Disable adornment menu zoom

Is it possible to keep the adornment menu of same scale throughout while I zoom the shape? I don’t want the adornment menu to zoom.

Which Adornments are you talking about?

The default behavior for Adornments is that they keep the same scale, so that as the Diagram.scale changes, they change apparent size and position along with everything else.

However, for context menus and tooltips that are implemented as GoJS objects, their scale is automatically adjusted so that they appear to have the same size while all of the nodes and links appear smaller or larger. That adjustment is done in ContextMenuTool.showContextMenu and ToolManager.showToolTip.

Here’s an example where nodes are automatically scaled so that they appear to be the same size as the users zooms in or out: Kitten Monitor

You could do the same for your Adornments. Example: Minimal GoJS Sample

With the example of Kitten Monitor, I was able to target all the node element but not the nodes inside the the selectionAdornmentTemplate. How can i specifically target that node and not all the other nodes?

I still don’t know what you really want to do.

To answer your question, I suppose you could see if Node.isSelected is true.

Bellow 1st image is my diagram with adornment and handles,

adornment zoom

and after the “Example: Minimal GoJS Sample”. On Zooming I just want the handles and the adornment diagram (the blue menu with 3 buttons) to be of same scale and dotted line of selection to remain around the black shape.

minimal sample

So I decided to add the kitten example for AdornmentTemplate, it is applying to all the main nodes which has stop scaling the node diagram but the adornment node is still scaling up and down.

I there a reason you didn’t follow the other example I gave you?
Minimal GoJS Sample

The second image is the result after following the example: Minimal GoJS Sample

How is your Adornment implemented?

myDiagram.nodeTemplateMap.add(

  "PolygonDrawing",

  $(

    go.Node,

    {


      locationSpot: go.Spot.Center,

    },

    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(

      go.Point.stringify

    ),

    {

      selectionAdorned: true,

      // selectionObjectName: "SHAPE",

      // custom selection adornment: a blue rectangle

      selectionAdornmentTemplate: $(

        go.Adornment,

        "Spot", //configuration panel

        $(go.Panel, "Auto",

          $(go.Shape, {

            stroke: "transparent",

            strokeWidth: 2,

            fill: null,

            // margin: -25

          }),

          $(go.Placeholder, {

          }),

        ),

        $(go.Panel, {

          alignmentFocus: go.Spot.Top,

          // alignment: new go.Spot(0.5, 1.2),

          alignment: go.Spot.Bottom,

          margin: 25

        },

         

          $(go.Shape, {

            margin: 25,

            geometryString:

              "M123 0H8C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16H123C127.418 16 131 12.4183 131 8C131 3.58172 127.418 0 123 0Z",

            fill: "#00D1FF",

            stroke: "#00D1FF",

            strokeWidth: 40,

          }),

          $(go.Panel, "Horizontal",

            {

              // alignment: new go.Spot(0.5, 1.2),

              // alignmentFocus: go.Spot.Top,

              // alignment: go.Spot.Bottom

            },

            $(

              "Button",

              {

                "margin": new go.Margin(40, 30, 40, 40),

                "height": 26,

                "width": 26,

                "ButtonBorder.stroke": null,

                "ButtonBorder.fill": "#00D1FF",

                "click": function (e, button) {

                  //   alert("Show Information about " + button.part.adornedPart.data.text);

                  // console.log("Show Information about " + button.part.adornedPart.data.text);

                  console.log(

                    "id on selected object = " + current_selection

                  );

                  alert("id on selected object = " + current_selection);

                },

              }, // defined below, to support editing the text of the node

              $(go.Picture, "./settings.svg", {})

            ),

            $(

              "Button",

              {

                "margin": new go.Margin(0, 0, 0, 0),

                "height": 26,

                "width": 26,

                "ButtonBorder.fill": "#00D1FF",

                "ButtonBorder.stroke": null,

                "click": function (e, button) {

                  // this is different from CommandHandler.deleteSelection because this

                  // only deletes the one node, not all selected parts

                  e.diagram.commit(function (d) {

                    e.diagram.commandHandler.copySelection();

                    e.diagram.commandHandler.pasteSelection(

                      e.diagram.toolManager.contextMenuTool.mouseDownPoint

                    );

                  }, "copy node");

                },

              }, // defined below, to support editing the text of the node

              $(go.Picture, "./copy.svg", {})

            ),

            $(

              "Button",

              {

                "margin": new go.Margin(0, 40, 0, 30),

                "height": 26,

                "width": 26,

                "ButtonBorder.fill": "#00D1FF",

                "ButtonBorder.stroke": null,

                "click": function (e, button) {

                  // this is different from CommandHandler.deleteSelection because this

                  // only deletes the one node, not all selected parts

                  e.diagram.commit(function (d) {

                    d.remove(button.part.adornedPart);

                  }, "deleted node");

                },

              }, // defined below, to support editing the text of the node

              $(go.Picture, "./trash.svg", {})

            )

          )

        ),

      ),

    },

    {

      resizable: true,

      resizeObjectName: "SHAPE",

      resizeCellSize: new go.Size(18, 18),

      selectionAdorned: true,

      resizeAdornmentTemplate:

        $(go.Adornment, "Spot",

          $(go.Panel, "Auto",

            $(go.Shape, {

              strokeDashArray: [8, 4],

              stroke: "#00D1FF",

              strokeWidth: 2,

              fill: null,

              // margin: -25

            }),

            $(go.Placeholder, { margin: 14 }),

          ),

          $(go.Shape, "Circle",

            {

              alignment: go.Spot.TopRight,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(24, 24), cursor: "col-resize"

            }

          ),

          $(go.Shape, "Circle",

            {

              alignment: go.Spot.TopLeft,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(24, 24), cursor: "col-resize"

            }

          ),

          $(go.Shape, "Circle",

            {

              alignment: go.Spot.BottomLeft,

              stroke: "#00D1FF",

              

              fill: "#00D1FF",

              

              desiredSize: new go.Size(24, 24), cursor: "col-resize"

            }

          ),

          $(go.Shape, "Circle",

            {

              alignment: go.Spot.BottomRight,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(24, 24), cursor: "col-resize"

            }

          ),

          $(go.Shape, "roundedrectangle",

            {

              alignment: go.Spot.Right,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(8, 24), cursor: "col-resize"

            }

          ),

          $(go.Shape, "roundedrectangle",

            {

              alignment: go.Spot.Left,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(8, 24), cursor: "col-resize"

            }

          ),

          $(go.Shape, "roundedrectangle",

            {

              alignment: go.Spot.Top,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(24, 8), cursor: "col-resize"

            }

          ),

          $(go.Shape, "roundedrectangle",

            {

              alignment: go.Spot.Bottom,

              stroke: "#00D1FF",

              // position: new go.Point(1, 1),

              fill: "#00D1FF",

              // margin: -25,

              desiredSize: new go.Size(24, 8), cursor: "col-resize"

            }

          )

        )

    },

Is the problem that your code is or is not updating the scale of the Placeholder?

Correct, rest all the node have the effect of the code.

So why haven’t you changed your code to do that? Or am I missing what the problem is?

var origscale = NaN;

myDiagram.addDiagramListener("InitialLayoutCompleted", function (e) { origscale = myDiagram.scale; });

myDiagram.addDiagramListener("ViewportBoundsChanged", function (e) {

  if (isNaN(origscale)) return;

  var newscale = myDiagram.scale;

  if (e.subject.scale === newscale) return;  // optimization: don't scale Nodes when just scrolling/panning

  myDiagram.skipsUndoManager = true;

  myDiagram.startTransaction("scale Nodes");

  myDiagram.nodes.each(function (node) {

    node.scale = origscale / newscale;

  });

  myDiagram.commitTransaction("scale Nodes");

  myDiagram.skipsUndoManager = false;

});

this is applying to all the node elements except Placeholder node.

How can it also apply to the placeholder?

Look at the example code in Minimal GoJS Sample

above mention problem happens with the example code Minimal GoJS Sample if

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
  <meta name="description" content="An almost minimal diagram using a very simple node template and the default link template." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>
  <p>
    As the user zooms in and out, the absolute size of adornment handles should stay the same.
  </p>

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

  function updateHandles(diagram) {
    const sc = diagram.scale;
    diagram.nodes.each(n => {
      n.adornments.each(a => {
        a.scale = 1/sc;
        if (a.placeholder) a.placeholder.scale = sc;
      });
    });
  }

  myDiagram =
    $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
      {
        "mouseWheelBehavior": go.ToolManager.WheelZoom,
        "ViewportBoundsChanged": e => {
          if (e.diagram.scale !== e.subject.scale) updateHandles(e.diagram);
        },
        "undoManager.isEnabled": true  // enable undo & redo
      });

  myDiagram.nodeTemplate =
  $(go.Node,
    {
     locationSpot: go.Spot.Center,
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    {
      selectionAdorned: true,
      selectionObjectName: "SHAPE",
      // custom selection adornment: a blue rectangle
      selectionAdornmentTemplate: $(
        go.Adornment,
        "Spot", //configuration panel
        $(go.Panel, "Auto",
          $(go.Shape, {
            stroke: "transparent",
            strokeWidth: 2,
            fill: null,
            // margin: -25
          }),
          $(go.Placeholder, {
          }),
        ),
        $(go.Panel, {
            alignmentFocus: go.Spot.Top,
            // alignment: new go.Spot(0.5, 1.2),
            alignment: go.Spot.Bottom,
            margin: 25
          },
          $(go.Shape, {
            margin: 25,
            geometryString:
              "M123 0H8C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16H123C127.418 16 131 12.4183 131 8C131 3.58172 127.418 0 123 0Z",
            fill: "#00D1FF",
            stroke: "#00D1FF",
            strokeWidth: 40,
          }),
          $(go.Panel, "Horizontal",
            {
              // alignment: new go.Spot(0.5, 1.2),
              // alignmentFocus: go.Spot.Top,
              // alignment: go.Spot.Bottom
            },
            $(
              "Button",
              {
                "margin": new go.Margin(40, 30, 40, 40),
                "height": 26,
                "width": 26,
                "ButtonBorder.stroke": null,
                "ButtonBorder.fill": "#00D1FF",
                "click": function (e, button) {
                  //   alert("Show Information about " + button.part.adornedPart.data.text);
                  // console.log("Show Information about " + button.part.adornedPart.data.text);
                  console.log(
                    "id on selected object = " + current_selection
                  );
                  alert("id on selected object = " + current_selection);
                },
              }, // defined below, to support editing the text of the node
              $(go.Picture, "./settings.svg", {})
            ),
            $(
              "Button",
              {
                "margin": new go.Margin(0, 0, 0, 0),
                "height": 26,
                "width": 26,
                "ButtonBorder.fill": "#00D1FF",
                "ButtonBorder.stroke": null,
                "click": function (e, button) {
                  // this is different from CommandHandler.deleteSelection because this
                  // only deletes the one node, not all selected parts
                  e.diagram.commit(function (d) {
                    e.diagram.commandHandler.copySelection();
                    e.diagram.commandHandler.pasteSelection(
                      e.diagram.toolManager.contextMenuTool.mouseDownPoint
                    );
                  }, "copy node");
                },
              }, // defined below, to support editing the text of the node
              $(go.Picture, "./copy.svg", {})
            ),
            $(
              "Button",
              {
                "margin": new go.Margin(0, 40, 0, 30),
                "height": 26,
                "width": 26,
                "ButtonBorder.fill": "#00D1FF",
                "ButtonBorder.stroke": null,
                "click": function (e, button) {
                  // this is different from CommandHandler.deleteSelection because this
                  // only deletes the one node, not all selected parts
                  e.diagram.commit(function (d) {
                    d.remove(button.part.adornedPart);
                  }, "deleted node");
                },
              }, // defined below, to support editing the text of the node
              $(go.Picture, "./trash.svg", {})
            )
          )
        ),
      ),
    },
    {
      resizable: true,
      resizeObjectName: "SHAPE",
      resizeCellSize: new go.Size(18, 18),
      resizeAdornmentTemplate:
        $(go.Adornment, "Spot",
          $(go.Panel, "Auto",
            $(go.Shape, {
              strokeDashArray: [8, 4],
              stroke: "#00D1FF",
              strokeWidth: 2,
              fill: null,
              // margin: -25
            }),
            $(go.Placeholder, { margin: 14 }),
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.TopRight,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.TopLeft,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.BottomLeft,
              stroke: "#00D1FF",
              
              fill: "#00D1FF",
              
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.BottomRight,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Right,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(8, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Left,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(8, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Top,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 8), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Bottom,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 8), cursor: "col-resize"
            }
          )
        )
    },
    $(go.Panel, "Auto", { name: "SHAPE" },
      $(go.Shape, { fill: "lightgray" }),
      $(go.TextBlock, { margin: 8 }, new go.Binding("text", "color"))
    )
  );

  // create the model data that will be represented by Nodes and Links
  myDiagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
  ]);
}
  </script>
</body>
</html>

Thanks a lot Walter, this now works fine but once i zoom in or out and then try to open the adornment, the adornment menu and handles are of big or small size respectively and then scales back to desired size once zoomed in or out again.

I realize that I missed the a.placeholder. Appreciate your quick response.

In the demo code I just gave you, I had removed the code from the extras/constantSizeAdornments.html that modified the adornment templates that are copied for each selected node. You will want to put some of that code back in, perhaps with modifications.

I think the scale is not being saved, on zooming in and out deselecting and again selecting node, the resize handles and adornment gets a different scale and while zooming in or out the scales restores to original scales.

i’ve tried all the contantsizeadornment.html code, still this issue remains

One option would be to bind the various scaling elements to Model.modelData and keep an up-to-date scale there. That’s shown below. Another option would be to call updateHandles from a “ChangedSelection” diagram listener.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
  <meta name="description" content="An almost minimal diagram using a very simple node template and the default link template." />
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:800px"></div>
  <p>
    As the user zooms in and out, the absolute size of adornment handles should stay the same.
  </p>

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

  myDiagram =
    $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
      {
        "mouseWheelBehavior": go.ToolManager.WheelZoom,
        "ViewportBoundsChanged": e => {
          var m = e.diagram.model;
          if (e.diagram.scale !== e.subject.scale) m.set(m.modelData, "scale", e.diagram.scale);
        },
        "undoManager.isEnabled": true  // enable undo & redo
      });

  myDiagram.nodeTemplate =
  $(go.Node,
    {
     locationSpot: go.Spot.Center,
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
    {
      selectionAdorned: true,
      selectionObjectName: "SHAPE",
      // custom selection adornment: a blue rectangle
      selectionAdornmentTemplate: $(
        go.Adornment,
        "Spot", //configuration panel
        new go.Binding("scale", "scale", sc => 1 / sc).ofModel(),
        $(go.Panel, "Auto",
          $(go.Shape, {
            stroke: "transparent",
            strokeWidth: 2,
            fill: null,
            // margin: -25
          }),
          $(go.Placeholder, new go.Binding("scale", "scale").ofModel()),
        ),
        $(go.Panel, {
            alignmentFocus: go.Spot.Top,
            // alignment: new go.Spot(0.5, 1.2),
            alignment: go.Spot.Bottom,
            margin: 25
          },
          $(go.Shape, {
            margin: 25,
            geometryString:
              "M123 0H8C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16H123C127.418 16 131 12.4183 131 8C131 3.58172 127.418 0 123 0Z",
            fill: "#00D1FF",
            stroke: "#00D1FF",
            strokeWidth: 40,
          }),
          $(go.Panel, "Horizontal",
            {
              // alignment: new go.Spot(0.5, 1.2),
              // alignmentFocus: go.Spot.Top,
              // alignment: go.Spot.Bottom
            },
            $(
              "Button",
              {
                "margin": new go.Margin(40, 30, 40, 40),
                "height": 26,
                "width": 26,
                "ButtonBorder.stroke": null,
                "ButtonBorder.fill": "#00D1FF",
                "click": function (e, button) {
                  //   alert("Show Information about " + button.part.adornedPart.data.text);
                  // console.log("Show Information about " + button.part.adornedPart.data.text);
                  console.log(
                    "id on selected object = " + current_selection
                  );
                  alert("id on selected object = " + current_selection);
                },
              }, // defined below, to support editing the text of the node
              $(go.Picture, "./settings.svg", {})
            ),
            $(
              "Button",
              {
                "margin": new go.Margin(0, 0, 0, 0),
                "height": 26,
                "width": 26,
                "ButtonBorder.fill": "#00D1FF",
                "ButtonBorder.stroke": null,
                "click": function (e, button) {
                  // this is different from CommandHandler.deleteSelection because this
                  // only deletes the one node, not all selected parts
                  e.diagram.commit(function (d) {
                    e.diagram.commandHandler.copySelection();
                    e.diagram.commandHandler.pasteSelection(
                      e.diagram.toolManager.contextMenuTool.mouseDownPoint
                    );
                  }, "copy node");
                },
              }, // defined below, to support editing the text of the node
              $(go.Picture, "./copy.svg", {})
            ),
            $(
              "Button",
              {
                "margin": new go.Margin(0, 40, 0, 30),
                "height": 26,
                "width": 26,
                "ButtonBorder.fill": "#00D1FF",
                "ButtonBorder.stroke": null,
                "click": function (e, button) {
                  // this is different from CommandHandler.deleteSelection because this
                  // only deletes the one node, not all selected parts
                  e.diagram.commit(function (d) {
                    d.remove(button.part.adornedPart);
                  }, "deleted node");
                },
              }, // defined below, to support editing the text of the node
              $(go.Picture, "./trash.svg", {})
            )
          )
        ),
      ),
    },
    {
      resizable: true,
      resizeObjectName: "SHAPE",
      resizeCellSize: new go.Size(18, 18),
      resizeAdornmentTemplate:
        $(go.Adornment, "Spot",
        new go.Binding("scale", "scale", sc => 1 / sc).ofModel(),
          $(go.Panel, "Auto",
            $(go.Shape, {
              strokeDashArray: [8, 4],
              stroke: "#00D1FF",
              strokeWidth: 2,
              fill: null,
              // margin: -25
            }),
            $(go.Placeholder, { margin: 14 }, new go.Binding("scale", "scale").ofModel()),
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.TopRight,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.TopLeft,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.BottomLeft,
              stroke: "#00D1FF",
              
              fill: "#00D1FF",
              
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "Circle",
            {
              alignment: go.Spot.BottomRight,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Right,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(8, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Left,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(8, 24), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Top,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 8), cursor: "col-resize"
            }
          ),
          $(go.Shape, "roundedrectangle",
            {
              alignment: go.Spot.Bottom,
              stroke: "#00D1FF",
              // position: new go.Point(1, 1),
              fill: "#00D1FF",
              // margin: -25,
              desiredSize: new go.Size(24, 8), cursor: "col-resize"
            }
          )
        )
    },
    $(go.Panel, "Auto", { name: "SHAPE" },
      $(go.Shape, { fill: "lightgray" }),
      $(go.TextBlock, { margin: 8 }, new go.Binding("text", "color"))
    )
  );

  // create the model data that will be represented by Nodes and Links
  myDiagram.model = new go.GraphLinksModel(
  [
    { key: "Alpha", color: "lightblue" },
    { key: "Beta", color: "orange" },
  ]);
  myDiagram.model.modelData = { scale: 1 };
}
  </script>
</body>
</html>