GoJS® ResizingTool Class

Class ResizingTool

Extends Tool. The ResizingTool is used to interactively change the size of a GraphObject in the selected Part or Node by setting its GraphObject.desiredSize property. You may want to save the size to the model by using a TwoWay Binding on the "desiredSize" property of the GraphObject that is named by Part.resizeObjectName. This tool does not operate on Links.

You can limit the permitted minimum and maximum dimensions by setting minSize and maxSize. The resizing will also respect the GraphObject.minSize and GraphObject.maxSize properties. Width or height values that are NaN do not constrain the resizing. Override computeMinSize and/or computeMaxSize to change this behavior.

You can also limit the width and/or height to be multiples of a particular size by setting Part.resizeCellSize. If either or both of these values are NaN, as they are by default, it will get the values from this tool's cellSize. Then if either or both of the width and height are still NaN, and if DraggingTool.isGridSnapEnabled is true, it will use the DraggingTool.gridSnapCellSize. Finally it will consider the Diagram.grid's Panel.gridCellSize if isGridSnapEnabled is true. Override computeCellSize to change this behavior.

Pressing the Shift key or resizing a Shape with a Shape.geometryStretch of GraphObject.Uniform or GraphObject.UniformToFill will maintain the aspect ratio during the resize. Override computeReshape to change this behavior.

This tool makes use of an Adornment, shown when the Part or Node is selected, that includes some number of resize handles. The resize handles are normally copies of ResizingTool.handleArchetype, unless you specify a custom resize Adornment by setting Part.resizeAdornmentTemplate. The resize Adornment is normally a "Spot" Panel with eight resize handles, each with GraphObject.alignment set to one of the eight standard Spot values -- the four corners and the four side middles. The GraphObject.alignment is what identifies and distinguishes each of the handles and the behavior when the user drags the handle.

This tool conducts a transaction while the tool is active. A successful resizing will result in a "PartResized" DiagramEvent and a "Resizing" transaction.

For a general discussion of the sizing of objects, see: Introduction to the sizing of GraphObjects. For customizing the ResizingTool, see Introduction to the ResizingTool.

Constructor Summary Details

Name	Description
ResizingTool()	You do not normally need to create an instance of this tool because one already exists as the ToolManager.resizingTool, which you can modify.More... The Tool.name of this tool is "Resizing".

Properties Summary Details

Name, Value Type	Description
adornedObject {GraphObject}	Gets the GraphObject that is being resized.More... This may be the same object as the selected Part or it may be contained within that Part. This property is also settable, but should only be set when overriding functions in ResizingTool, and not during normal operation.
cellSize {Size}	Gets or sets the width and height multiples with which the user must resize.More... The effective cell size is computed by first looking at the AdornedPart's Part.resizeCellSize. If either or both of its width and height are NaN, it will use this property, `cellSize`. If either or both of this property's width and height are NaN, it will consider the DraggingTool.gridSnapCellSize and the Diagram.grid's Panel.gridCellSize. The default value is NaN x NaN. Setting this property does not raise any events.
handle {GraphObject}	This read-only property returns the GraphObject that is the tool handle being dragged by the user.More... This will be contained by an Adornment whose category is "ResizingTool". Its Adornment.adornedObject is the same as the adornedObject.
handleArchetype {GraphObject}	Gets or sets a small GraphObject that is copied as a resizing handle for the selected part.More... By default this is a Shape that is a small blue rectangle. Setting this property does not raise any events. Here is an example of changing the default handle to be larger yellow circles: myDiagram.toolManager.resizingTool.handleArchetype = $(go.Shape, "Circle", { width: 10, height: 10, fill: "yellow" }); This property is ignored when a custom resizing Adornment is specified as the Part.resizeAdornmentTemplate. That property is normally null, in which case this tool will automatically construct Adornments holding eight copies of this handle archetype, each with a GraphObject.alignment being one of the standard eight Spots.
isGridSnapEnabled {boolean}	Gets or sets whether the ResizingTool snaps object sizes to the diagram's background grid during the resize.More... By default this property is false. Setting this property does not raise any events.
maxSize {Size}	Gets or sets the maximum size to which the user can resize.More... The effective maximum size is the minimum of this value and the GraphObject.maxSize, independently in each direction. The default value is 9999 x 9999. Any new value must be of type Size; NaN width or height values are treated as Infinity. Setting this property does not raise any events.
minSize {Size}	Gets or sets the minimum size to which the user can resize.More... The effective minimum size is the maximum of this value and the GraphObject.minSize, independently in each direction. The default value is 1 x 1. Any new value must be of type Size; NaN width or height values are treated as zero. Setting this property does not raise any events.
originalDesiredSize {Size} 1.1	This read-only property returns the Size that was the original value of the GraphObject.desiredSize of the element that is being resized.
originalLocation {Point} 1.1	This read-only property returns the Point that was the original value of the Part.location of the Part that is being resized.

Properties borrowed from class Tool:: diagram, isActive, isEnabled, name, transactionResult

Method Summary Details

Name, Return Type	Description
canStart() {boolean}	This tool may run when there is a mouse-down event on a resize handle, the diagram is not read-only and it allows resizing, the left mouse button is being used, and this tool's adornment's resize handle is at the current mouse point.More... This method may be overridden. Returns: {boolean}
computeCellSize() {Size}	The size should be a multiple of the value returned by this method.More... This is called once when the tool is activated. This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. Returns: {Size}
computeMaxSize() {Size}	The effective maximum resizing size is the minimum of the maxSize and the adornedObject's GraphObject.maxSize.More... This is called once when the tool is activated. This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. Returns: {Size}
computeMinSize() {Size}	The effective minimum resizing size is the maximum of minSize and the adornedObject's GraphObject.minSize.More... This is called once when the tool is activated. This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. Returns: {Size}
computeReshape() {boolean} 1.7	Decide whether to allow arbitrary reshaping or whether to keep the same aspect ratio of the object being resized.More... If the adornedObject is a Shape, then if the GraphObject.stretch is GraphObject.Uniform or GraphObject.UniformToFill, this method will return false to restrict reshaping to maintain the object's current ratio of height to width. Also, if the user is holding down the Shift key, this method will return false. This is called on each mouse-move and on mouse-up; the result is passed to the call to resize. This permits the user to change the behavior dynamically during resizing. This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. For example, to always keep the object's original aspect ratio, override this method to return false. When calling GraphObject.make to initialize a Diagram: $(go.Diagram, . . ., { "resizingTool.computeReshape": function() { return false; }, . . . }) Or when overriding the method dynamically: myDiagram.toolManager.resizingTool.computeReshape = function() { return false; }; Your override might want to look at the `this.adornedObject.part.data` properties to decide whether to allow reshaping. Returns: {boolean} true to allow any aspect ratio; false to preserve the adornedObject's height/width ratio
computeResize(newPoint, spot, min, max, cell, reshape) {Rect}	Given a Spot in the original bounds of the object being resized and a new Point, compute the new Rect.More... This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. Parameters: {Point} newPoint a Point in local coordinates. {Spot} spot the alignment spot of the handle being dragged. {Size} min the result of the call to computeMinSize. {Size} max the result of the call to computeMaxSize. {Size} cell the result of the call to computeCellSize. {boolean} reshape true if the new size may change the aspect ratio from that of the natural bounds of the adornedObject. Returns: {Rect} a Rectangle in the adornedObject's local coordinates, not in document coordinates
doActivate()	Find the handle, remember the object's original bounds, save the results of calling computeMinSize, computeMaxSize, and computeCellSize, capture the mouse, and start a transaction.More... If the call to Tool.findToolHandleAt finds no "Resizing" tool handle, this method returns without activating this tool.
doCancel()	Restore the original size of the GraphObject.
doDeactivate()	Stop the current transaction and release the mouse.
doMouseMove()	Call resize with a new size determined by the current mouse point.More... This determines the new bounds by calling computeResize. When this calls computeResize it passes as the reshape argument the result of calling computeReshape. The min, max, and cell arguments will be the saved results of doActivate's calls to computeMinSize, computeMaxSize, and computeCellSize.
doMouseUp()	Call resize with the final bounds based on the most recent mouse point, commit the transaction, and raise the "PartResized" DiagramEvent.More... This determines the new bounds by calling computeResize. When this calls computeResize it passes as the reshape argument the result of calling computeReshape.
resize(newr)	Change the size of the selected part's Part.resizeObject to have the given bounds.More... This modifies its GraphObject.desiredSize and maybe its Part.location. This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. Parameters: {Rect} newr a Rectangle in the adornedObject's local coordinates, not in document coordinates
updateAdornments(part)	Show an Adornment with the resize handles at points along the edge of the bounds of the selected Part's Part.resizeObject.More... First this finds the object in the visual tree of the Part that should get the resize adornment and that the user will be able to resize interactively. It finds the object that has the Part.resizeObjectName property of the Part. If the Part.resizeObjectName property is an empty string, as it is by default, it uses the whole part. It then builds the adornment, associating it with the chosen resize object. If Part.resizeAdornmentTemplate is non-null, it is copied. Otherwise it constructs a new Adornment with a Placeholder and eight copies of handleArchetype, four at the corners and four at the middle of each side. This method may be overridden. Please read the Introduction page on Extensions for how to override methods and how to call this base method. Parameters: {Part} part