RobotJS mouseMove is preventing onKeyDown events from firing


I’m trying to add some accessibility to our diagram through some keyboard shortcuts. I’ve implemented the RobotJS as a class in my repo to assist. My end goal is to enable a user to simulate a drag and drop between two nodes of their choice. I initially chose to enable this by having a user be able to follow the steps below:

  1. Shift + 1 to create a connection from a selected node, continue holding Shift, create a mouseDown event at the selected Node’s port
  2. Automatically move the mouse to the next node in the diagram’s location
  3. Allow the user to use the S key to toggle to another node if desired, update mouseMove to new node
  4. Release shift, trigger mouseUp, create connection

This did not work, as everything worked fine up until step 3. That seems to be because triggering a mouseMove event prevents any keyboard inputs from being read. My additional S key presses to change the node did not come through, and releasing shift was not picked up.

I tested by just doing a drag event and seeing if any key presses would come through, and noticed they did not. I came up with another approach that combined all three mouse movements into one function triggered by a key combo that works, but it does not allow for the same visual experience as dragging from the port, as it instead has a user select Node A, store it as source, select node B store it as target, and then enter Shift + 1 to create the link.

I am curious if there is anything I can do to enable keyboard events to keep being processed even when mouseMove/down events have not completed, but understand that it might have larger implications and hence my backup method, while less visually appealing, has to remain.

It sounds like you are starting a drag of the first node, dragging it to the second node. Is that correct?

In that case the DraggingTool is active during the drag. Did you override the DraggingTool.doKeyDown method in order to handle the “S” key?

All input events are canonicalized and sent to the Diagram which sends them on to the Diagram.currentTool, which is normally a ToolManager but will be a specialized tool when events are happening. In this case I’m guessing it’s a DraggingTool.

That is correct, I trigger a mouseDown on an output Port on Node A, then a mouseMove to nodeB. At that point keyboard events stop working.

So I need to override the dragginTool.onKeyDown/Up to have the logic I have in my commandHandler basically? I’ll give that a go

Wait – are you trying to simulate the user’s drawing of a new Link? If so, that is the LinkingTool that is operating, so you would need to override its doKeyDown method.

Note that all of these overrides should be present in your app – it’s nothing special for testing.

This was exactly the case. I tried overriding the DraggingTool to no avail, but then saw that the currentTool in the toolManager was indeed the LinkingTool. I overrode the doKeyDown/Up methods to just call this.diagram.commandHandler.doKeyDown etc. and now everything works great!

Thank you for the help!