Access shapes inside a node

Hi.

I’m trying to resize and entire Node object which itself contains a number of Shape objects and a TextBlock object. I thought grouping would solve this problem but cannot find a solution. I have taken the ResizeMutlipleTool.js from the site and have implemented it with limited success. So far all I can manage is to resize the back-most object and all of the other objects retain their size.

Here is my code so far:

var $ = go.GraphObject.make; diagram = $(go.Diagram, "diagram", { resizingTool: new ResizeMultipleTool() } ); diagram.nodeTemplate = $(go.Node, "Vertical", { name: "SHAPE", selectionAdorned: true, locationObjectName: "SHAPE" }, new go.Binding("location", "loc", go.Point.parse), { resizable: true, resizeObjectName: "SHAPE" }, $(go.Panel, "Auto", {name: "myPanel"}, $(go.Shape, { visible: true } ), // outer $(go.Shape, { name: "outer", figure: "circle", fill: "yellow", stroke: "black", width: 120, visible: false } ), // background $(go.Shape, { figure: "circle", fill: "grey", width: 80 } ), // arrow $(go.Shape, { name: "arrow", figure: "triangle", stroke: "black", fill: "darkgrey", width: 50, height: 60, angle: 90 }, new go.Binding("fill", "color") ), $(go.Shape, { name: "strikeLine", fill: "yellow", stroke: "black", width: 5, height: 100, angle: 135, visible: false } ) ), $(go.TextBlock, { name: "control", margin: 1, editable: true, text: "On" }, new go.Binding("text", "key") ) ) ; diagram.groupTemplate = $(go.Group, { resizable: true, selectionObjectName: "SHAPE", resizeObjectName: "SHAPE", toolTip: tooltiptemplate }, $(go.Shape, "Rectangle", { fill: "transparent", stroke: "lightgray", strokeWidth: 1 }), $(go.Placeholder) ); diagram.model = new go.GraphLinksModel( [ {key: "MyArrowGroup", isGroup: true, loc: new go.Point(100, 150), isSelected: true}, {key: "Arrow1", group: "MyArrowGroup"} ]); With ResizeMultipleTool.js: "use strict;" function ResizeMultipleTool() { go.ResizingTool.call(this); this.name = "ResizeMultiple"; } go.Diagram.inherit(ResizeMultipleTool, go.ResizingTool); ResizeMultipleTool.prototype.resize = function (newr) { var diagram = this.diagram; if (diagram === null) return; var itr = diagram.selection.iterator; while (itr.next()) { var part = itr.value; console.log(part); var i = part; if (part instanceof go.Link || part instanceof go.Group || part instanceof go.Shape || part instanceof go.Panel) continue; // only Nodes and simple Parts var obj = part.resizeObject; // calculate new location var part = obj.part; var pos = part.position.copy(); var angle = obj.getDocumentAngle(); var sc = obj.getDocumentScale(); var radAngle = Math.PI * angle / 180; var angleCos = Math.cos(radAngle); var angleSin = Math.sin(radAngle); var deltaWidth = newr.width - obj.naturalBounds.width; var deltaHeight = newr.height - obj.naturalBounds.height; var angleRight = (angle > 270 || angle < 90) ? 1 : 0; var angleBottom = (angle > 0 && angle < 180) ? 1 : 0; var angleLeft = (angle > 90 && angle < 270) ? 1 : 0; var angleTop = (angle > 180 && angle < 360) ? 1 : 0; pos.x += sc * ((newr.x + deltaWidth * angleLeft) * angleCos - (newr.y + deltaHeight * angleBottom) * angleSin); pos.y += sc * ((newr.x + deltaWidth * angleTop) * angleSin + (newr.y + deltaHeight * angleLeft) * angleCos); obj.desiredSize = newr.size; part.position = pos; } } So in essence I need to access the Shape objects within the Panel and resize it all at the same time. Thank you

Are you trying to resize at the same time more than one GraphObject within a single Node?

ResizeMultipleTool is trying to resize multiple Nodes at the same time, which is different.

Yes I am trying to resize multiple GraphObjects inside a single Node. The idea is that a Node can be selected and resized while maintaining the aspect of all GraphObjects inside the selected Node

OK, forget about ResizeMultipleTool. You just need to override the standard ResizingTool.resize method to compute the ratio between the old bounds size (the ResizingTool.originalDesiredSize, or if that !isReal(), then the .adornedObject.actualBounds) and the new bounds size (the newr argument). Then adjust the sizes of all of the desired GraphObjects within the node by that ratio.

Thanks for getting back to me, Walter. I’ll try to get that working now and get back to you if there are any further issues.

Cheers

Oh, and in case it wasn’t clear – I suspect you do not want to actually change the desiredSize of the adornedObject, as ResizingTool normally does. Once you resize all of the objects within the selected part that you want to resize, the normal Panel layout should determine the correct new size for the part.