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