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?