Combine customTextEditingTool and diagram work

Hello,
I’m working with customTextEditingTool Text Editing Examples

The issue: If you click on node and click on text you will see TextEditingTool then if you click on another node nothing will happens because this click just deactivate TextEditingTool and only if you click again on node you will choose it.

I found all diagram doesn’t work while customTextEditingTool is focused neither click or hover events.

How to work with diagram while customTextEditingTool is focused?

Does this answer your question? How to get out of focus and activate click on the same time while in text block edit mode

Yes it is.
But this answer only part of issue. Click event works fine but hover doesn’t work.
Sometimes I need to show tooltip on some buttons while typing text in textarea.

If you want additional functionality, you have to implement it yourself. To implement tooltips, you just need to call Tool.standardWaitAfter and override Tool.doWaitAfter:

      $(go.Diagram, . . .,
        { . . .,
          "textEditingTool.doMouseMove": function() {
            // do the usual behavior first
            go.TextEditingTool.prototype.doMouseMove.call(this);
            if (this.isBeyondDragSize()) {
              // start a timer to maybe call doWaitAfter
              this.standardWaitAfter(150, this.diagram.lastInput);
            }
          },
          "textEditingTool.doWaitAfter": function() {
            // the ToolManager normally implements tooltips
            this.diagram.toolManager.doWaitAfter(this.diagram.lastInput);
          },
          . . .
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Spot",
        {
          toolTip: $("ToolTip", $(go.TextBlock, new go.Binding("text")))
        },
        . . .

It almost works but there is an isuue in Typescript description

Tool.standardWaitAfter has only one argument but here is two
standardWaitAfter(delay: number): void;

toolManager.doWaitAfter doesn’t have arguments but here it exist

doWaitAfter(): void;

I wrote

Because Tooltip works well but hover effect on button doesn’t
How It loooks like now
image

How it should be
image

Maybe I need to override one more method?

Thanks for the bug report on the go.d.ts file declarations. Those are fixed for v2.0.

What hover effect are you missing?

I’ve got Node with Toolbar, Node contains text.
When I’m editing text I can click on Toobar I can move mouse on Toolbar and see Tooltip but events like onMouseEnter and onMouseLeave which are bound to Toolbar don’t work.

How did you implement the toolbar? Is it an Adornment? If so, have you set isActionable to true on it or on pieces of it?

You might need to override doMouseMove on your TextEditingTool and implement the behaviors that you want. I’m not sure what you have implemented.

Yes,It is Adornment and isActionable is true
What should I add to doMouseMove to implement that feature?

Maybe just calling Tool.standardMouseOver is sufficient; I don’t know what you have set up, so it’s hard to say.

Thank you so much, This helped me

Tool | GoJS API takes no arguments.

1 Like