Unable to two way bind desired size for a shape

GoJS
1

Hi,

I am trying to use two way binding for desired size for a group template. But the binding is not working and its not updating my model data.
Below is the template used for it:


$(
      go.Group,
      "Spot",
      {
        // use a simple layout that ignores links to stack the "lane" Groups on top of each other
        layout: $(PoolLayout, { spacing: new go.Size(0, 0) }), // no space between lanes
        resizable: true,
        location: new go.Point(0, 0),
        computesBoundsAfterDrag: true,
        computesBoundsIncludingLocation: true,
      },

      new go.Binding("selectable", "hidePool", (hidePool) => !hidePool),
      $(
        go.Panel,
        go.Panel.Auto,
        $(
          go.Shape,
          "Rectangle",
          {
            fill: "transparent",
            strokeDashArray: [3, 3],
            strokeWidth: 0.5,
            stretch: go.GraphObject.Uniform,
          },
          new go.Binding(
            "desiredSize",
            "metaData",
            (metaData: BaseNodeShapeMetaData) => parseEntitySize(metaData?.size)
          ).makeTwoWay((val: go.Size, data: PoolShape) => {
            const size = parseShapeSize(val);
            const metaData: typeof data.metaData = {
              ...(data?.metaData ?? {}),
              size,
            };
            return metaData;
          }),
          new go.Binding("stroke", "hidePool", (hidePool) =>
            hidePool ? "transparent" : "black"
          )
        ),
        $(go.Placeholder)
      )
    );

parseEntitySize = (size: EntitySize): go.Size => {
  return size ? new go.Size(size.width, size.height) : new go.Size(120, 120);
};

parseShapeSize = (size: go.Size): EntitySize => ({
  width: size.width,
  height: size.height,
});

Could you provide details on how to achieve this?

2

First, you should bind the desiredSize of the GraphObject that the user resizes. Since you have not set Part.resizeObjectName, the user is resizing the whole Group, not the Shape.

Second, it’s not going to work anyway because there is a Placeholder whose size is determined by the area occupied by the group’s member parts.
https://gojs.net/latest/intro/sizedGroups.html

3

Is there a way where we can bind the size it took, without setting resize and resizeObject name properties?

We have a use case where we need to save the size and position of all nodes and group nodes in Backend. If there is a way similar to two way binding of position where it updates the data with position it takes in layout for size as well, it would be helpful.

4

When you save your model to your server you could include the GraphObject.actualBounds’s Rect.size information for each Node, instead of using a Binding. TwoWay bindings only work on settable properties. When the model is loaded again, the TwoWay binding on the Node.location will be sufficient to restore the diagram.