Toggle GraphObject.Shape and isShadowed on dragging/hold

GoJS
1

I have the following two GraphObject.Shapes:

const selectedBorder = () =>
  GraphObject.make(
    Shape,
    'RoundedRectangle',
    {
      fill: '#101625',
      stroke: null,
      width: 269,
      height: 69,
    },
    new Binding('visible', 'isSelected').ofObject(),
    new Binding('width', '', ({ data: { isFocused } }) => (isFocused ? 269 : 266)).ofObject(),
    new Binding('height', '', ({ data: { isFocused } }) => (isFocused ? 69 : 66)).ofObject(),
  );

const baseNodeTemplate = (...props) =>
  GraphObject.make(
    Node,
    'Auto',
    new Binding('location', 'nodeLocation', toPoint).makeTwoWay(fromPoint),
    new Binding('isShadowed', 'isSelected').ofObject(),
    {
      selectionAdorned: false,
      locationSpot: Spot.Center,
      layerName: 'Background',
      isShadowed: true,
      shadowBlur: 30,
      shadowOffset: new Point(0, 0),
    },
    ...props,
  );

I currently have the baseNodeTemplate’s shadow and the selectionBorder binded to the isSelected property. The behavior I want is for the shadow to only be applied while the user is dragging/holding the node and for the selection border to only be applied when the the node is selected but not being currently dragged/held.

Any ideas for how to achieve this desired behavior? Thanks in advance for any help!

2

Well, if you are willing to assume that for all of your Node templates and Link templates Part.selectionAdorned is true (which is the default value) and that Part.isShadowed is false (as you seem to imply), then this will work for dragging within a diagram:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "draggingTool.doActivate": function() {
        go.DraggingTool.prototype.doActivate.call(this);
        if (this.draggedParts) {
          this.draggedParts.each(kvp => {
            const part = kvp.key;
            part.isShadowed = true;
            part.selectionAdorned = false;
          });
        }
      },
      "draggingTool.doDeactivate": function() {
        if (this.draggedParts) {
          this.draggedParts.each(kvp => {
            const part = kvp.key;
            part.isShadowed = false;
            part.selectionAdorned = true;
          });
        }
        go.DraggingTool.prototype.doDeactivate.call(this);
      },
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);
  </script>
</body>
</html>
3

Thanks! The draggingTool.doActivate/doDeactivate was what I needed! For my specific use case, I just needed the part.isShadowed = true in the functions and then modified the ‘visible’ binding in my selectedBorder() shape to be:

new Binding('visible', '', ({ isSelected, isShadowed }) => isSelected && !isShadowed).ofObject(),