Group resizing

I want resize a group but when i resize it a objects of that group is showing out side of group so a requirement is like resizing of group but it wont decrease at certain point where node is found.

Some of the samples, such as SwimLanes, Swim Lanes, have a custom ResizingTool that implements such a restriction. It also uses a custom Part.resizeAdornmentTemplate, so that the user only resizes two sides. However that LaneResizingTool is more complicated than what you need since when it resizes in one direction it has to change the length of all of the Groups (lanes) in the same pool.

yes, Laneresizing and pool resizing is two different thing. so which one i need to apply on my sample

I can find or create a simpler example for you later today, after I get to work.

What is your group template?

myDiagram.groupTemplate =
GO(go.Group, “Vertical”,
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
{
resizable: true,
resizeObjectName: “PANEL”,
selectionObjectName: “PANEL”,
ungroupable: true,
mouseDragEnter: function (e, grp, prev) { highlightGroup(e, grp, true); },
mouseDragLeave: function (e, grp, next) { highlightGroup(e, grp, false); },
mouseDrop: finishDrop
},
GO(go.Panel, “Auto”,
{ name: “PANEL” },
GO(go.Shape, “Rectangle”,
{ fill: “white”, stroke: “black”, strokeWidth: 2, name: “GroupShape” },
new go.Binding(“stroke”, “color”),
new go.Binding(“strokeDashArray”, “strokeDashArray”, this.getBoundaryStrokeDashArray),
new go.Binding(“strokeWidth”, “strokeWidth”)
),
GO(go.Placeholder, { padding: 10 }),
GO(go.TextBlock,
{
font: “bold 11pt helvetica, bold arial, sans-serif”,
editable: true,
// _isNodeLabel:true,
cursor: “move”
},
new go.Binding(“text”, “text”).makeTwoWay(),
new go.Binding(“alignment”, “alignment”, go.Spot.parse).makeTwoWay(go.Spot.stringify)
)),
{
contextMenu: GO(go.Adornment, “Vertical”, this.makeButton(“Cut”,
function (e: any, obj: any) { e.diagram.commandHandler.cutSelection(); },
function (o: any) { return o.diagram.commandHandler.canCutSelection(); }),
this.makeButton(“Copy”,
function (e: any, obj: any) { e.diagram.commandHandler.copySelection(); },
function (o: any) { return o.diagram.commandHandler.canCopySelection(); }),
this.makeButton(“Paste”,
function (e: any, obj: any) { e.diagram.commandHandler.pasteSelection(e.diagram.lastInput.documentPoint); },
function (o: any) { return o.diagram.commandHandler.canPasteSelection(); }),
this.makeButton(“Delete”,
function (e: any, obj: any) { e.diagram.commandHandler.deleteSelection(); },
function (o: any) { return o.diagram.commandHandler.canDeleteSelection(); }))
},
{
mouseEnter: function (e: any, node: any) {
e.diagram.startTransaction(“start alignment”);
e.diagram.model.setDataProperty(node.data, “strokeWidth”, 5);
e.diagram.commitTransaction(“End alignment”);
},
mouseLeave: function (e: any, node: any) {
e.diagram.startTransaction(“start alignment”);
e.diagram.model.setDataProperty(node.data, “strokeWidth”, 2);
e.diagram.commitTransaction(“End alignment”);
},
selectionChanged: function (e: any, node: any) {
if (e.isSelected == true) {
e.diagram.startTransaction(“start alignment”);
var childId = e.data[“child”];
var childNode = e.diagram.findNodeForKey(childId);

                    if (childId != undefined) {
                        e.diagram.model.setDataProperty(childNode.data, "background", "lightblue");
                        //e.diagram.model.setDataProperty(node, "background", "lightblue");
                    }
                    e.diagram.commitTransaction("End alignment");

                }
                else {
                    console.log("group unselected");
                    e.diagram.startTransaction("start alignment");
                    var childId = e.data["child"];
                    var childNode = e.diagram.findNodeForKey(childId);
                    if (childId != undefined) {
                        e.diagram.model.setDataProperty(childNode.data, "background", "white");
                    }
                    e.diagram.commitTransaction("End alignment");
                }
            }

            }
            
        );

Take a look at Simple Group Resizing. As always, all of the code is right there on the page.

@walter Thanks.

@walter a resizing is working but when i drag object outside of group. object is ungroup. and while i drag object at that time group also moving. group is not stable.

In that sample the user is not supposed to be able to move a member node outside of its containing group.

Could you describe more precisely what the problem is?

Yes, Using this logic node’s can be dragged out from group.
if (part.diagram.lastInput.shift) return pt;

The Node’s which dragged outside of group, I need to remove those nodes from group.
Using the above example I am able to drag out from group but I am not able to remove that from group.

In this sample I created for you I explicitly commented out that line to allow the user to move a node outside of its containing group. So it is not possible for the user to do what you say.