Detecting Shift Key During Cross-Diagram Drag in GoJS

GoJS
1

I’m implementing drag-and-drop behavior between two GoJS diagrams. When a node is being dragged from one diagram to another, I want to provide visual feedback in the target diagram—for example, by changing the cursor or modifying the appearance of the dragged node.

I also need this behavior to differ based on whether the Shift key is pressed during the drag.

However, I’m running into an issue: once the drag enters the second diagram, it seems I cannot reliably detect the Shift key status there. Using window.addEventListener('keydown') doesn’t work consistently, and InputEvent.shift in the target diagram doesn’t seem to reflect the current key status during the drag.

Is there a recommended way in GoJS to:

  1. Detect the current Shift key status during a cross-diagram drag?
  2. Apply visual feedback (like changing the cursor or temporarily modifying the dragged node) in the target diagram based on that?

Any suggestions or best practices would be greatly appreciated

2

During a drag-and-drop it is principally the source Diagram’s ToolManager.draggingTool that is running and active, although significant code will also be run in the target Diagram.

So to detect modifier key state such as Shift, check the source Diagram’s diagram.lastInput.shift value.

For changing the cursor, the basic idea is to set Diagram.currentCursor. However you might want to set DraggingTool.copyCursor, which is automatically assigned to Diagram.currentCursor for external drags when DraggingTool.mayCopy returns true.

What users see when the drag is over a diagram will be what that diagram renders for that data. If you look at the example in Palette | GoJS, you will see three Diagrams, each with a different node template. As the user drags from one Palette to the target Diagram what is being dragged changes appearance because the data produces different looking nodes due to the differing templates.

Furthermore there is support for notifying stationary GraphObjects about drag-overs. Notice the behavior in the Flowgrammer sample, Interactive Builder of Flowgrams, Flowcharts with Constrained Visual Syntax | GoJS Diagramming Library, as the user drags a node over a group or over a link. Or several other examples that make use of GraphObject.mouseDragEnter and mouseDragLeave, such as the Seating Chart sample, Seating Chart Diagram Editor Dropping People into Seats at Tables | GoJS Diagramming Library, or the Regrouping sample, Regrouping Editor for Dragging Nodes into and out of Groups | GoJS Diagramming Library.

The latter functionality isn’t what you are asking for, where you talk about modifying the appearance of the dragged node(s). If the behavior you want isn’t covered by the above information, you’ll need to override some DraggingTool methods such as DraggingTool.doDragOver. What do you really want to do with what the user is dragging?

Here’s an example modifying the cursor when the Shift modifier key is held down, by overriding DraggingTool.doDragOver in the target Diagram:

  new go.Diagram("myDiagramDiv", {
      "draggingTool.copyCursor": "progress",
      "draggingTool.doDragOver": function(pt, obj) {
        this.copyCursor = myPalette.lastInput.shift ? "help" : "progress";
      },
      . . .