Simulating hover/focus on element

GoJS
1

So, in order for the user to be able to use a keyboard and TAB through the edges and nodes we have creates this clever workaround:

  • We create invisible buttons for every node and every edge and when the user TABS he tabs through the buttons
  • When the user presses on the button, we trigger the press on the node/edge (simple enough)

However, the problem is when the user TABS on a button, basically focused on it and we need to show some form of focus styling on that node/edge. What we did is we simulated a mouse hover event on that node/edge and it works.

It does have one huge limitation though: When the user moves the mouse, that hover simulation is gone. Can you give some pointers on how to achieve some form of styling on “focus” on a node/edge?

2

I think such cleverness isn’t necessary. Just handle the “Tab” key directly and do what you want. For example:

  $(go.Diagram, . . .,
    {
      "commandHandler.doKeyDown": function() {
        const e = this.diagram.lastInput;
        if (e.key === "\t") {
          // select and scroll to a random Node
          const nodes = new go.List(myDiagram.nodes);
          if (nodes.count > 0) {
            const node = nodes.elt(Math.floor(Math.random() * nodes.count))
            this.diagram.select(node);
            this.scrollToPart(node);
          }
        } else {
          go.CommandHandler.prototype.doKeyDown.call(this);
        }
      }
      . . .
    })
3

Ok, but in your solution, @walter, you don’t solve our dilemma. You select the element. We use the selection for something else, so selection is not a solution for us. And neither is highlight - which we also use for something else

4

That was just an example to make it more obvious what is going on. I don’t know what mouse hover behavior you have implemented – but that code is what I would call instead of calling Diagram.select and CommandHandler.scrollToPart. Well, you probably want to call the latter anyway.

5

Ok, but that is the question 😅

How do we simulate mouse hover / focus event for a node/edge?

We do the following (position is the position of the element):

const robot = new Robot(diagram);
robot.mouseMove(position.middle.x, position.middle.y, 0, {});

The problem with this is that when the user moves the mouse even for a little bit anywhere outside, the hover styling is no longer there.

6

Well, you could call mouseHover on the appropriate GraphObject where that event handler is declared.

But I was suggesting that you directly call the code that that event handler is executing in order to have the effect(s) that you want.