In Planogram, I have all inner nodes are of same height. What I need to do is whenever the group node is resized, all inner nodes should get resized (with width touching to width of group node)
How easily it can be done and what needs to be updated in template?
Could you describe what you want a bit more precisely please?
Did you want starting to resize the group to automatically change the widths but not the heights of any of the members of the group?
Why shouldn’t a node change width as soon as they are added as a member of a group?
Should the heights change at all?
Should the resizing behavior happen in real-time or only at the end of the resizing operation?
Are there nested groups?
Here’s one possibility, but it’s unlikely that it meets all of your requirements: Resizing Group Resizes Member Nodes
In image, I shown the group node resized after putting the inner nodes in 5 cells as width (as per background grid).
So as per background grid, there are initially 4 cells.
There is no nested groups and height is fixed of 1 cell.
Implement one or more DiagramEvent listeners, depending on the situations that you want to cover, such as “SelectionMoved”, “SelectionCopied”, and “ExternalObjectsDropped”, that set the width of the dropped nodes depending on the Group that they just became members of, if any.
Override the ResizingTool.resize method, if what is being resized is a Group, to also resize that group’s member nodes as your requirements dictate.
(covered by #1, above)
Can you help me to convert the CustomResizeTool.js in typescript
I am getting runtime error - tried to set the this.adornedObject in constructor also to some private variable.
class CustomResizingTool extends go.ResizingTool {
// override ResizingTool.resize to change width of member nodes;
// this assumes that all nodes should occupy the full width of the group
resize(newr) {
super.resize(newr);
var group = this.adornedObject.part; // the resized element's Part
// set all member nodes to the left side of the group, with the new given width
if (group instanceof go.Group) {
// determine left side for each node
const x = this.adornedObject.getDocumentPoint(go.Spot.Left).x + newr.x;
group.memberParts.each(node => {
if (node instanceof go.Link) return;
node.position = new go.Point(x, node.actualBounds.y);
node.resizeObject.width = newr.width;
});
}
}
} // end CustomResizingTool
Install by replacing the regular ResizingTool, such as by:
$(go.Diagram, . . .,
{
resizingTool: new CustomResizingTool(),
"resizingTool.isGridSnapEnabled": true,
. . .
})
Thanks Walter. CustomResizingTool worked. Even i managed to support required padding and Typescript in editor was giving error - There I need to adapt null check by adding ternary operator.
var group = this.adornedObject?.part;
On another note - like you mentioned, when drag-drop of node happens on group node, I need to set the nodes width. - That is ok.
I am not preserving individual nodes width. So when diagram is loaded again, the nodes donot occupy full width of group node - Where I need to handle the code to set the width when diagram is loaded.
I haven’t tried this, but you could try implementing a Group.memberAdded event handler.
Yes. It worked with following code -
But having another issue with above change -
When diagram loaded it is according to the diagram layout but as I move the nodes link gets partially visible (Also the text on links one end is not shown)
Selecting link shows it highlighted touching both group nodes.
Don’t you want to use the group’s placeholder’s actualBounds.width?
I don’t know what you mean abou the other problem. Please start a new topic on it.
