Old text visible while editing text


I have added a text block to the group and it is editable. While editing that text the old text which I am editing is still showing up in the background and both texts are overlapping.

also getting following error “ERROR DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.”
while trying to stop the edit of the text if not valid by overriding errorFunction

The TextEditingTool does not modify the edited TextBlock until the user finishes the tool successfully. Did you want to make the text editor larger so that it obscures the TextBlock? Or do you want to change the TextBlock.opacity to 0.0 during the operation of the TextEditingTool? Or perhaps some other solution?

If you are calling doCancel it is too late to call doDeactivate, which has already been called.

I want make the old text hidden till some one is editing it whichever way that is possible.

But if I call doDeactivate first then the editor tool stays there.

No, I was trying to say and what the Tool Lifecycle diagram was trying to show is that if you are cancelling the operation of the tool, you do not need to call anything else besides doCancel. doDeactivate and doStop are called automatically for you no matter how the tool stops.

Try these overrides of TextEditingTool.doActivate and TextEditingTool.doDeactivate:

      $(go.Diagram, . . .,
          { . . .,
            "textEditingTool.doActivate": function() {
              if (this.textBlock) this.textBlock.opacity = 0.0;
            "textEditingTool.doDeactivate": function() {
              if (this.textBlock) this.textBlock.opacity = 1.0;

Yes doCancel and doDeactivate will be triggered automatically but I wanted to override errorFunction so that I can stop the edit and can revert the text to old stage and not update the text to an invalid text.
Hence I was using the doCancel and doDeactivate so that is not done.

Also if I want to inject some of my service that will be triggered on errorFunction like show custom notification on error how to do that?

this.textBlock is null every time doActivate is called

In the process of accepting any text edit (in the implementation of TextEditingTool.acceptText), it first validates the text. If the call to TextEditingTool.isValidText returns false, it calls the TextBlock.errorFunction (if non-null). Then it calls HTMLInfo.show on the TextEditingTool.currentTextEditor and returns without having accepted the text edit. I don’t see any problem with your showing some error information in your implementation of the errorFunction, although of course the details of how you do that depends entirely on the environment you have on the page.

Regarding your override of doActivate: that’s odd – I just tried it in a copy of the minimal.html sample, and it worked well.

I am using Angular and Type script
this Is my implementation of text editor tool do activate override and textBlock is always null

this.diagram.toolManager.textEditingTool.doActivate = () => {
      if (this['textBlock']) this['textBlock'].opacity = 0.0;
        this.diagram.toolManager.textEditingTool.doDeactivate = () => {
          if (this['textBlock']) this['textBlock'].opacity = 1.0;

But that code is quite different from what I wrote. Consider the value of this.

Get it, it’s done.
I thought it could be done like that but was wrong.
but why can’t we do it like this?

What do you mean?

I meant why can’t we use toolManager.textEditingTool for same?

I also want to give a text in the textBlock dynamically but right now when I create a node the default text is the same. How can I give dynamic custom text to the text block’s.

My code does use that expression. Doesn’t yours?

For your last question – isn’t there a Binding on the TextBlock.text property? So you could set the string in the new node data object. And if you expect users to edit the text, you probably want to make the Binding TwoWay.

yes there is binding and I am also using it but for the first time the part is made it is taking the default text from the textBlock text property.

{ text: ‘’ , margin: 8 , editable: true},
new go.Binding(‘text’, ‘groupName’).makeTwoWay()

and when part is created at that time also I am assigning the value for it but it is not getting reflected
e.subject.groupName = “Group” + someIteratingvalue;

You need to set groupName on the data object before you call Model.addNodeData.