We have a link element that has a part attached to it. This part is built from 2 textBlock s, so we can present the two text part s in different colors.
In order to edit those values, we use a textEditingTool that have 2 dropdowns that should affect both of the text blocks.
This is a snippet of the current diagram with the relevant element marked in red:
This is a snippet of the open editor:
The editor is allowing to change both of the textBlock s values and the same editor is opened for both textBlock s.
The value model of the editor is an object, containing to properties that holds the values from both dropdowns.
Every time one of the dropdowns is changing, the value model is being updated and editor element.value is being set to function that returns the value object:
value = {prop1: {}, prop2:{}};
this.element.value = () => this.value;
Both text blocks have 2 way binding that are getting the value that was set on the editor’s element value.
The problem is that the value that makeTwoWay () is getting is evaluated as string and no matter through which textBlock I opened the editor, it is being updated with the value object as string.
My questions are:
How can I get the actual value object from the editor, not as string, so I can go ahead and update and manipulate my code accordingly?
Is there a way to create a single textBlock that is made out of two words in different colors?
Is there a way to edit the panel that hold the two text blocks?
So are you saying that you want your link data object to have a single property (let’s call it “value”) on it that holds your value object which has two properties on it, “prop1” and “prop2”?
Yes, you have to have two separate TextBlocks if you want them to be styled differently from each other. Perhaps you could do something like:
$(go.Link, . . .,
$(go.Shape, . . .), // the link path
$(go.Panel, "Auto", . . .,
$(go.Shape, "RoundedRectangle", . . .), // the border
$(go.Panel, "Horizontal", . . .,
$(go.TextBlock, . . ., // styling for first TextBlock
new go.Binding("text", "value", function(v) { return v.prop1; })
.makeTwoWay(function(str, data, model) { var v = data.value; model.set(v, "prop1", str); return v; })),
$(go.TextBlock, . . ., // styling for second TextBlock
new go.Binding("text", "value", function(v) { return v.prop2; })
.makeTwoWay(function(str, data, model) { var v = data.value; model.set(v, "prop2", str); return v; }))
)
)
I hope I typed all of that correctly – I haven’t tried this code.
But the value of TextBlock.text is always a string. So the (forward) binding conversion function should always return a string, and the backward conversion function will always take a string as its first argument.
And the forward conversion always takes a “value” Object, and the backward conversion always returns a “value” Object.
Calling updateTargetBindings means you won’t have support for undo/redo. Can’t you call Model.set?
Is this discussion actually about custom text editors rather than data bindings? What’s “value” in your code? Shouldn’t the behavior depend on which TextBlock is being edited?
In my scenario I have 2 fields (styled differently), But I want to edit them together (since they are connected) the value of one depends on the other.
So I want to edit them together, but to display them with different style.