How can I add an icon on image node data?

GoJS
1

I want to add rotation arrow icon on node item, and don’t know how to do it?

Screen Shot 2021-11-12 at 15.12.37
Screen Shot 2021-11-12 at 15.12.37835×458 53.4 KB

2

How is the rest of the node defined?

Did you want that arrow to be visible always, or only when the node is selected?

Is the direction/angle of the arrow determined by some data property? Is the whole node rotated?

3

I want that arrow to be visible only when the node is selected and I want to rotate all node with angle propert which is in my node data.

4

Screen Shot 2021-11-12 at 15.42.24
Screen Shot 2021-11-12 at 15.42.24953×225 32.5 KB

Here is the my node data.

5

Here’s an implementation using the default Adornments for selectable and rotatable nodes. Only the knob (i.e. the Picture) is rotatable, and its angle is data bound to the data.angle property.

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

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

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        "undoManager.isEnabled": true,
        "ModelChanged": e => {     // just for demonstration purposes,
          if (e.isTransactionFinished) {  // show the model data in the page's TextArea
            document.getElementById("mySavedModel").textContent = e.model.toJson();
          }
        }
      });

  myDiagram.nodeTemplate =
    $(go.Node, "Spot",
      { 
        locationSpot: go.Spot.Center,
        selectionObjectName: "PIC",
        rotatable: true, rotateObjectName: "PIC"
      },
      new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.Picture, "http://iop.io/demo/iopctrl/knob.png",
        { name: "PIC", width: 80, height: 80 },
        new go.Binding("angle").makeTwoWay()),
      $(go.TextBlock,
        new go.Binding("text"))
    );

  myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", angle: 0, location: "0 0" },
    { key: 2, text: "Beta", angle: 30, location: "0 150" },
  ]);

  myDiagram.commandHandler.selectAll();
}
window.addEventListener('DOMContentLoaded', init);
  </script>
</body>
</html>

The results are:
image

So if you want to show an arrow instead of the rotation handle (the small blue circle shown at the angle relative to the rotation point), you will have to customize the RotatingTool’s handleAngle, handleDistance and handleArchetype properties as well as the Part.selectionAdornmentTemplate to show the arrow.

  myDiagram =
    $(go.Diagram, "myDiagramDiv",
      {
        "rotatingTool.handleAngle": 270,
        "rotatingTool.handleDistance": 0,
        "rotatingTool.handleArchetype":
          $(go.Shape,
            {
              fill: null, stroke: "dodgerblue", strokeWidth: 2,
              geometryString:  "M0 6 L4 0 8 6",
              background: "transparent", cursor: "pointer"
            }),
        "undoManager.isEnabled": true,
        "ModelChanged": e => {     // just for demonstration purposes,
          if (e.isTransactionFinished) {  // show the model data in the page's TextArea
            document.getElementById("mySavedModel").textContent = e.model.toJson();
          }
        }
      });

  myDiagram.nodeTemplate =
    $(go.Node, "Spot",
      { 
        locationSpot: go.Spot.Center,
        selectionObjectName: "PIC",
        selectionAdornmentTemplate:
          $(go.Adornment, "Auto",
            $(go.Panel,
              { stretch: go.GraphObject.Fill },
              $(go.Shape, { stretch: go.GraphObject.Fill, fill: null, stroke: "dodgerblue", strokeWidth: 2 }),
              $(go.Shape, {
                fill: null, stroke: "dodgerblue", strokeWidth: 3,
                geometryString: "M41 0 L 41 41 M80 80"
              })
            ),
            $(go.Placeholder, { padding: 2 })
          ),
        rotatable: true, rotateObjectName: "PIC"
      },
      new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
      $(go.Picture, "http://iop.io/demo/iopctrl/knob.png",
        { name: "PIC", width: 80, height: 80 },
        new go.Binding("angle").makeTwoWay()),
      $(go.TextBlock,
        new go.Binding("text"))
    );

The result:
image

6

thank you very much