Custom text editor editing 2 text block at the same time

GoJS
1

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:
pic1

This is a snippet of the open editor:
pic2

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?
  • Is there another way to do that?
2

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.

3

One solution to the problem might be.
in the editor in the value function

value =()=>{
   myModel.prop1=prop1;
  myModel.prop2 = prop2
 settTimeout(()=>{
   tool.textblox.panel.updateTargetBindings();
)

}

does this solution look good to You? (I do not like the setTimout)

4

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.

5

I accidentally removed one of the old messages (sorry)

One solution to the problem might be.
in the editor in the value function

value =()=>{
   myModel.prop1=prop1;
  myModel.prop2 = prop2
 settTimeout(()=>{
   tool.textblox.panel.updateTargetBindings();
)

}

does this solution look good to You? (I do not like the setTimout)

6

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?

7

I can call Model.set .

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.

Is there another solution for that?

8

If it works and does what you want, what is the problem? Yes, your editor is changing two properties instead of one, but that’s OK.

9

I do not like to do setTimeout, it looks like a hack, it is not trivial.

but maybe If will not use 2 way binding than I will not have to do the setttimeout.