Class ResizingTool

GoJS® Diagramming Components
version 3.0.13
by Northwoods Software®

Hierarchy

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. 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 GeometryStretch.Uniform 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.

If you want to programmatically start a user's resizing of the Part.resizeObject of an existing selected node, you can set the handle property to the specific resize handle and then start and activate the tool.

  const node = ...;
myDiagram.select(node);
const adorn = node.findAdornment("Resizing");
const tool = myDiagram.toolManager.resizingTool;
// specify which resize handle of the "Resizing" Adornment of the selected node
tool.handle = adorn.elt(...);
myDiagram.currentTool = tool; // starts the ResizingTool
tool.doActivate(); // activates the ResizingTool
Index

Constructors

Accessors

  • Gets or sets the GraphObject that is being resized. 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.

  • Gets or sets the width and height multiples with which the user must resize. The effective cell size is computed by first looking at the Adornment.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 Diagram.grid's Panel.gridCellSize.

    The default value is go.Size(NaN, NaN). Setting this property does not raise any events.

  • Gets or sets whether the ResizingTool moves the member Parts of a Group that has no Group.placeholder. By default this property is true. Setting this property does not raise any events.

    since

    2.1.26

  • Gets or sets a small GraphObject that is copied as a resizing handle for the selected part. By default this is a Shape that is a small blue rectangle. This ResizingTool will automatically update the GraphObject.cursor property to match the corresponding corners or sides, if it is set to "pointer" or "...resize" in this archetype. 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 =
    new go.Shape('Circle', { width: 10, height: 10, fill: 'yellow', cursor: 'pointer' });

    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.

  • Gets or sets whether the ResizingTool snaps object sizes to the diagram's background grid during the resize. By default this property is false. Setting this property does not raise any events.

  • Gets or sets the maximum size to which the user can resize. The effective maximum size is the minimum of this value and the GraphObject.maxSize, independently in each direction.

    The default value is go.Size(9999, 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.

  • Gets or sets the minimum size to which the user can resize. The effective minimum size is the maximum of this value and the GraphObject.minSize, independently in each direction.

    The default value is go.Size(1, 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.

  • Gets or sets the Point opposite to the chosen, dragged handle of the "Resizing" Adornment. This property has no meaning until after doActivate has been called.

    since

    2.2

  • This read-only property returns the Size that was the original value of the GraphObject.desiredSize of the element that is being resized.

  • This read-only property returns the Point that was the original value of the Part.location of the Part that is being resized.

Methods

  • 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.

    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 boolean

  • The size should be a multiple of the value returned by this method.

    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

  • The effective maximum resizing size is the minimum of the maxSize and the adornedObject's GraphObject.maxSize.

    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

  • The effective minimum resizing size is the maximum of minSize and the adornedObject's GraphObject.minSize.

    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

  • Decide whether to allow arbitrary reshaping or whether to keep the same aspect ratio of the object being resized. If the adornedObject is a Shape, then if the Shape.geometryStretch is GeometryStretch.Uniform, 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 initializing a Diagram:

    const diagram = new go.Diagram, "myDiagramDiv"
    {
    "resizingTool.computeReshape": function() { return false; },
    // ... rest of Diagram init
    })

    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

  • Given a Spot in the original bounds of the object being resized and a new Point, compute the new Rect.

    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

    Returns Rect

    a Rectangle in the adornedObject's local coordinates, not in document coordinates

  • 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.

    Normally when this method is called the value of handle will be null, resulting in a call to Tool.findToolHandleAt to find a "Resizing" tool handle, which is then remembered as the value of handle. If when this method is called the value of handle is already set, then there is no need to call Tool.findToolHandleAt, because the programmer has already set up which resize handle they want the user to be resizing.

    Returns void

  • Restore the original size of the GraphObject.

    Returns void

  • Stop the current transaction, forget the handle and adornedObject, and release the mouse.

    Returns void

  • Call resize with the final bounds based on the most recent mouse point, commit the transaction, and raise the "PartResized" DiagramEvent. This determines the new bounds by calling computeResize.

    When this calls computeResize it passes as the reshape argument the result of calling computeReshape.

    Returns void

  • Change the size of the selected part's Part.resizeObject to have the given bounds. 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

    • newr: Rect

      a Rectangle in the adornedObject's local coordinates, not in document coordinates

    Returns void

  • This calls the super Tool.stopTransaction method, and if the result is true, attempts to optimize the transaction by removing all changes except the first and last by calling Transaction.optimize.

    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 boolean

    the result of the call to rollback or commit the transaction.

  • Show an Adornment with the resize handles at points along the edge of the bounds of the selected Part's Part.resizeObject.

    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

    Returns void