The two samples for group provided the re-sizing of the group node by dragging the inner nodes around, and it seemed not straightforward.
Is there a way to re-size the group node by dragging the corner to the size we want?
Thanks.
the code snippet:
myDiagram.groupTemplateMap.add(“OfGroups”,
$(go.Group, go.Panel.Auto,
{
background: ‘transparent’,
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(grp, false); },
//computesBoundsAfterDrag: true,
<span =“Apple-tab-span” style=“white-space: pre;”> selectionObjectName: “PH”,
locationObjectName: “PH”,
resizable: true,
resizeObjectName: “PH”,
// 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:
function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// Groups containing Groups lay out their members horizontally
layout:
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) })
},
<span =“Apple-tab-span” style=“white-space: pre;”> new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal,
{ stretch: go.GraphObject.Horizontal, background: “orange” },
$(“SubGraphExpanderButton”,
{ alignment: go.Spot.Right, margin: 2 }),
$(go.TextBlock,
{ alignment: go.Spot.Left, editable: true,
margin: 2, wrap: go.TextBlock.None },
new go.Binding(“text”, “text”).makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5 })
), // end Vertical Panel
$(go.Shape, “RoundedRectangle”,
{
<span =“Apple-tab-span” style=“white-space: pre;”> name : “PH”,
<span =“Apple-tab-span” style=“white-space: pre;”> fill: “lightyellow”,
isPanelMain: true, // the RoundedRectangle Shape is in front of the Vertical Panel
fill: null,
spot1: new go.Spot(0, 0, 1, 1), // the Vertical Panel is placed
spot2: new go.Spot(1, 1, -1, -1) // slightly inside the rounded rectangle
},
<span =“Apple-tab-span” style=“white-space: pre;”> new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify))
)); // end Group and call to add to template Map
I could re-size the group, but the caption section did not get adjusted after re-sized. Please see the attached image. Thanks.
I just took out the declaration and uses of “PH”:
myDiagram.groupTemplateMap.add("OfGroups",
$(go.Group, go.Panel.Auto,
{
background: 'transparent',
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(grp, false); },
//computesBoundsAfterDrag: true,
resizable: 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:
function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// Groups containing Groups lay out their members horizontally
layout:
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) })
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
$(go.Panel, go.Panel.Vertical,
{ stretch: go.GraphObject.Fill },
$(go.Panel, go.Panel.Horizontal,
{ stretch: go.GraphObject.Horizontal, background: “orange” },
$(“SubGraphExpanderButton”,
{ alignment: go.Spot.Right, margin: 2 }),
$(go.TextBlock,
{
alignment: go.Spot.Left, editable: true,
margin: 2, wrap: go.TextBlock.None
},
new go.Binding(“text”, “text”).makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5 })
), // end Vertical Panel
$(go.Shape, “RoundedRectangle”,
{
fill: “lightyellow”,
isPanelMain: true, // the RoundedRectangle Shape is in front of the Vertical Panel
fill: null,
spot1: new go.Spot(0, 0, 1, 1), // the Vertical Panel is placed
spot2: new go.Spot(1, 1, -1, -1) // slightly inside the rounded rectangle
},
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify))
)); // end Group and call to add to template Map
Thanks for your answer and it looks good. However I have another requirement which has to add port to the group node. I tried to follow what you suggested in http://www.nwoods.com/forum/forum_posts.asp?TID=5452&title=create-port-for-group-node-was-not-rendered-nicely to create port and added the code that supports re-size. My modified code looked like:
myDiagram.groupTemplateMap.add(“OfGroups”,
$(go.Group, go.Panel.Spot,
{ // NOTE: these properties and Binding belong to the Group, not to the Auto Panel
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(grp, false); },
//computesBoundsAfterDrag: true,
<span =“Apple-tab-span” style=“white-space:pre”> resizable: 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:
function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// Groups containing Groups lay out their members horizontally
layout:
$(go.GridLayout,
{ wrappingWidth: Infinity, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) })
},
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
// NOTE: this is the original Group Panel definition, minus the Group-specific properties and Binding:
$(go.Panel, go.Panel.Auto,
{ background: 'transparent' },
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal,
{ stretch: go.GraphObject.Horizontal, background: "orange" },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 2 }),
$(go.TextBlock,
{ alignment: go.Spot.Left, editable: true,
margin: 2, wrap: go.TextBlock.None
},
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5 })
), // end Vertical Panel
$(go.Shape, "RoundedRectangle",
{
isPanelMain: true, // the RoundedRectangle Shape is in front of the Vertical Panel
fill: null,
spot1: new go.Spot(0, 0, 1, 1), // the Vertical Panel is placed
spot2: new go.Spot(1, 1, -1, -1) // slightly inside the rounded rectangle
},
<span =“Apple-tab-span” style=“white-space:pre”> new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify)
<span =“Apple-tab-span” style=“white-space:pre”> )), // end of original Group definition
// add the port element:
$(go.Shape, "Rectangle", portStyle(false),
// NOTE: horizontal offset add to the Spot to position it outside of the Auto Panel
{ portId: "out", alignment: new go.Spot(1, 0.5, 3, 0) })
)); // end Group and call to add to template Map
myDiagram.groupTemplateMap.add("OfNodes",
$(go.Group, go.Panel.Auto,
{
background: 'transparent',
ungroupable: true,
// highlight when dragging into the Group
mouseDragEnter: function(e, grp, prev) { highlightGroup(grp, true); },
mouseDragLeave: function(e, grp, next) { highlightGroup(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:
function(e, grp) {
var ok = grp.addMembers(grp.diagram.selection, true);
if (!ok) grp.diagram.currentTool.doCancel();
},
// Groups containing Nodes lay out their members vertically
layout:
$(go.GridLayout,
{ wrappingColumn: 1, alignment: go.GridLayout.Position, cellSize: new go.Size(1, 1) })
},
$(go.Panel, go.Panel.Vertical,
$(go.Panel, go.Panel.Horizontal,
{ stretch: go.GraphObject.Horizontal, background: "turquoise" },
$("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 2 }),
$(go.TextBlock,
{ alignment: go.Spot.Left, editable: true,
margin: 2, wrap: go.TextBlock.None },
new go.Binding("text", "text").makeTwoWay())
), // end Horizontal Panel
$(go.Placeholder,
{ padding: 5 })
), // end Vertical Panel
$(go.Shape, "RoundedRectangle",
{
isPanelMain: true,
fill: null,
spot1: new go.Spot(0, 0, 1, 1),
spot2: new go.Spot(1, 1, -1, -1)
})
)); // end Group and call to add to template Map
I basically ran into the same problem as before plus the port was missing after I re-size the group node.
Any suggestion?
Thanks.
Can someone help? Thanks.
Sorry, your question looked complex and imprecise, so I was postponing looking at it until other tasks were completed.
I’m guessing that you want to have the Group.resizeObjectName refer to the Auto Panel. Although I don’t see resizable: true anywhere.
Yes, I guess that’s what I need but I could not get it working.
OK, starting with the Regrouping sample, modifying the “OfGroups” template, all I did was:
- change the Group’s Panel type from “Auto” to “Spot”
- add { resizable: true, resizeObjectName: “BODY” }, to the Group
- wrap the original group contents with a $(go.Panel, “Auto”, { name: “BODY” },
- add the following port element as the last element in the Group:
$(go.Shape, “Ellipse”,
{ portId: “out”, fromLinkable: true, cursor: “pointer” },
{ width: 8, height: 8, alignment: go.Spot.Right }) // this Shape is positioned at this Spot relative to the BODY
And I think everything works the way you are expecting.
Here is a screenshot of the resized group, showing the single port at the Spot.Right:
