Hello,
How can i resize "Main1" in the example http://gojs.net/latest/samples/regrouping.html.
I tried using resizable:true. but tht doesnt seem to resize all the elements inside it also.
First, I suggest that you read GoJS Groups -- Northwoods Software and GoJS Sized Groups -- Northwoods Software.
Second, the automatic resizing of member parts is not supported by ResizingTool. So the behavior you saw with your change is correct.
Third, take a look at Resizing Group Resizes Member Nodes. This defines a custom ResizingTool that both resizes all of its members proportionally as well as limits the size so that the part remains within the containingGroup’s bounds.
after resizing if i collapse the group size remains same . how can i solve this. Group template is as below
var subProcessGroupTemplate =
$(go.Group, go.Panel.Auto,
{
ungroupable: true,
selectionAdorned: false,
resizable: true,
resizeAdornmentTemplate:
$(go.Adornment, "Spot",
$(go.Placeholder, { padding: 5/2 }), // half the SHAPE.strokeWidth
$(go.Shape, { alignment: go.Spot.Right, width: 8, height: 8, stroke: "dodgerblue", fill: "lightblue", cursor: "e-resize" }),
$(go.Shape, { alignment: go.Spot.BottomRight, width: 8, height: 8, stroke: "dodgerblue", fill: "lightblue", cursor: "se-resize" }),
$(go.Shape, { alignment: go.Spot.Bottom, width: 8, height: 8, stroke: "dodgerblue", fill: "lightblue", cursor: "s-resize" })
),
dragComputation: stayInGroup,
background: "transparent",
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(e, grp, false); },
computesBoundsAfterDrag: true,
// when the selection is dropped into a Group, add the selected Parts into that Group;
// if it fails, cancel the tool, rolling back any changes
mouseDrop: finishDrop,
// don't need to define handlers on member Nodes and Links
// Groups containing Groups lay out their members horizontally
},
new go.Binding("background", "isHighlighted", function(h) { return h ? "rgba(255,0,0,0.2)" : "transparent"; }).ofObject(),
$(go.Shape, "Rectangle",
{ fill: null, stroke: "#E69900", strokeWidth: 2 }),
$(go.Panel, go.Panel.Vertical, // title above Placeholder
$(go.Panel, go.Panel.Horizontal, // button next to TextBlock
{ stretch: go.GraphObject.Horizontal, background: "#FFDD33", margin: 1 },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5 }),
$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: "bold 18px sans-serif",
stroke: "#9A6600"
},
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ name:"SHAPE",padding: 5, alignment: go.Spot.TopLeft })
) ,makeStartPort("L", go.Spot.Left, true, true),
makeEndPort("R", go.Spot.Right, true, true)// end Vertical Panel
); // end Group and call to add to template MapIt appears to me that the “Loop” group was collapsed into a smaller node, just as one would expect.
Are you saying that the problem is that the yellow-orange Rectangle and the green and red circles are not also shrinking down to surround the “Loop” box? If so, then you need to have a single Panel containing those three Shapes. That Panel should be the first (i.e. the “main”) element of the “Auto” Panel that is the whole Group.
The problem is that you are adding the two ports at the same level as the Panel holding the TextBlock and Placeholder (i.e. the “Loop” box). They should be in the same (new) Panel that holds the Rectangle, and that (new) Panel should be the main element of the “Auto” Panel (that is also a Group).
Although that doesn’t explain why at the moment the Rectangle Shape isn’t shrinking down to surround the “Loop” box. One problem is that maybe the definition of makeEndPort assumes the Panel that it is in is of type “Spot”, not “Auto”. But I’m suggesting that the new Panel that replaces the Rectangle Shape could be a “Spot” Panel, where its main element is that Rectangle Shape.