Fix resize handle proportion

Is it possible to set the resize box to a fixed proportion relative the object/group that is being resized?

As shown in the above image, when I resize horizontally the box stretches but the image does not. This is the intended function but is there a way to set the resize box to only resize in a diagonal manner and therefore ensure that the object is scaled proportionally at all times?

Thank you

That depends on what object your user is resizing. Did you set Part.resizeObjectName to refer to a Shape? If you haven’t set that property, by default the user will be resizing the whole Node, which might not be what you want.

Take a look at the Shapes sample: http://gojs.net/latest/samples/shapes.html. First note that the node template sets resizable: true and resizeObjectName: “SHAPE”, where “SHAPE” is the name of the Shape object.

If you interactively resize the “Rectangle” or the “Ellipse” figure shapes, you can change the aspect ratio of the original shape. But if you hold down the Shift key, the ResizingTool will automatically keep width/height ratio the same.

However if you try resizing the “Square” or the “Circle” shapes, you’ll notice that you cannot make them into non-square or non-circular shapes. This is because the ResizingTool respects the Shape.geometryStretch property, if the ResizingTool.adornedObject (the Part.resizeObject) is a Shape.

But if what you are showing is not a Shape (maybe it’s a Picture or a Panel), then there is no Shape.geometryStretch property, so there’s no automatic respect for maintaining aspect ratio. However you could override ResizingTool.computeResize to always pass a false value for the reshape parameter when calling the base method.

Thanks for the advice, Walter.


I use panels for the objects on screen and, as such, have attempted to override the reshape property. My Javascript is not strong though and I am running into errors : Uncaught TypeError: Cannot read property ‘pd’ of undefined.

I have included a code snippet of where I am so far but if you could further advise I would be most appreciative. Thanks again.

// OVERRIDE RESIZETOOL.COMPUTERESIZE TO FIX ASPECT RATIO WHEN RESIZING A PANEL
var tool = diagram.toolManager.resizingTool;
tool.computeResize = function() {
<span =“Apple-tab-span” style=“white-space:pre”> var reshape = tool.computeResize.reshape;
<span =“Apple-tab-span” style=“white-space:pre”> reshape = false;
<span =“Apple-tab-span” style=“white-space:pre”>
<span =“Apple-tab-span” style=“white-space:pre”> go.ResizingTool.prototype.computeResize.call(tool);
}



var tool = myDiagram.toolManager.resizingTool; tool.computeResize = function(newPoint, spot, min, max, cell, reshape) { return go.ResizingTool.prototype.computeResize.call(tool, newPoint, spot, min, max, cell, <font color="#FF0000">false</font>); };