How to make shapes resizable separately inside one node?

GoJS
1

Hello,

I have node template which consists of several shapes. I would like to resize each of shape separately. Is there way to do that ?

Thanks.

2

The ResizingTool was designed to only work on one object at a time, so as long as you don’t mind having one set of resize handles per selected node, this is easily achievable.

First, let’s define a node template that looks like a traffic light:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { resizable: true, resizeObjectName: "R" },
        $(go.Shape),
        $(go.Panel, "Vertical",
          $(go.Shape, "Circle",
            { name: "R", width: 30, height: 30, fill: "red", click: shapeClicked },
            new go.Binding("desiredSize", "Rsize", go.Size.parse).makeTwoWay(go.Size.stringify)),
          $(go.Shape, "Circle",
            { name: "O", width: 30, height: 30, fill: "orange", click: shapeClicked },
            new go.Binding("desiredSize", "Osize", go.Size.parse).makeTwoWay(go.Size.stringify)),
          $(go.Shape, "Circle",
            { name: "G", width: 30, height: 30, fill: "lightgreen", click: shapeClicked },
            new go.Binding("desiredSize", "Gsize", go.Size.parse).makeTwoWay(go.Size.stringify))
        )
      );

This results in this kind of node:

By default when the node is selected, one can resize the red circle:

Interactively resizing might produce this result, as one would expect:

Then to change the Part.resizeObjectName there is a GraphObject.click event handler:

    function shapeClicked(e, obj) {
      var node = obj.part;
      if (!node.isSelected) return;
      e.diagram.startTransaction();
      node.resizeObjectName = obj.name;
      node.removeAdornment("Resizing");
      node.updateAdornments();
      e.diagram.commitTransaction("changed resizeObjectName");
    }

Note how this event handler is used on all three Circle Shapes.

So clicking on the orange Shape results in resize handles on that circle, so you can resize it to maybe get:

3

I got the idea!
Thanks!