Custom shape for group using PolygonDrawing sample

GoJS
1

Hi,
Using PolylineDrawingTool sample Polygon Drawing Tool, I am trying to create group’s in different shape. I am facing some issue of assigning the group panel size after shape is drawn.

GroupTemplate:

myDiagram.groupTemplate =
$(go.Group, “Vertical”,
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
{
resizable: true,
resizeObjectName: “Shape”,
selectionObjectName: “PANEL”,
ungroupable: true,
mouseDrop: finishDrop
},
$(go.Panel, “Auto”,
{ name: “PANEL” },
$(go.Shape,
{ fill: “white”, stroke: “black”, strokeWidth: 2, name: “Shape” },
new go.Binding(“stroke”, “color”).makeTwoWay(),
new go.Binding(“angle”).makeTwoWay(),
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify),
new go.Binding(“geometryString”, “geo”).makeTwoWay(),
new go.Binding(“strokeDashArray”, “strokeDashArray”).makeTwoWay(),
new go.Binding(“strokeWidth”, “strokeWidth”).makeTwoWay()
),
$(go.Placeholder, { padding: 10 })
)
);

  1. After shape is drawn then group panel is look this:

    But that actual height and width is not like this.

  2. But after resizing the panel,then group look like this:

I believe that in group template I have not added any code for binding the size for panel. Can you tell how to bind the shaped size as panel size?.

2

A Placeholder in a Group will automatically have the size and position of the rectangular area that is the union of the bounds of its members, plus any Placeholder.padding.

An “Auto” Panel fits a GraphObject, usually a Shape, around one or more other GraphObjects. So in your template it will automatically size the Shape to fit around the Placeholder, whose size and position are determined by the Group.memberParts. Furthermore you can control what area within the Shape the Placeholder will occupy by setting Shape.spot1 and Shape.spot2. For a Geometry that you assign those two spots default to TopLeft and bottomRight, thereby causing the Shape to have the same width and height as the Placeholder.

However a problem arises when you set/bind the Shape.desiredSize. You have both a data binding on that as well as allow users to set it via the ResizingTool. That will mean that the Shape will have that specific size and the “Auto” Panel will no longer be able to automatically size the Shape based on the size of the Placeholder.