Doubleclick to create a new adornment

GoJS
2

You didn’t say anything about when the new adornment would be removed, so I made the assumption that it would be when the user double-clicked again.

Of course the appearance, location, and contents of the new adornment are completely customizable. I just implemented something simple for demonstration purposes.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 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",
    { "undoManager.isEnabled": true });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    {
      doubleClick: (e, node) => {
        if (node.findAdornment("DoubleClicked")) {
          node.removeAdornment("DoubleClicked");
        } else {
          const ad =
            $(go.Adornment, "Spot",
              $(go.Placeholder),
              $(go.Panel, "Auto",
                { alignment: go.Spot.TopRight, alignmentFocus: new go.Spot(0, 1, 10, -10) },
                $(go.Shape, "Circle", { fill: "yellow", strokeWidth: 0 }),
                $(go.TextBlock, { stroke: "blue" },
                  new go.Binding("text"))
              )
            )
          ad.adornedObject = node;
          node.addAdornment("DoubleClicked", ad);
        }
      }
    },
    $(go.Shape, { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
      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>
1 Like