Node Resizing

class ResizingManager(graphEditor)

A class to add interactive node resizing to a grapheditor instance.

_Usage:_

Initialize a new ResizingManager for a grapheditor instance.

const resizeingManager = new ResizeingManager(grapheditor);

Show the resize overlay for a Node

resizeingManager.showResizeOverlay(node.id);

OR resize Node via api.

resizeingManager.resizeNode(node.id, newWidth, newHeight);

For cleanup call resizeingManager.unlink() !

Arguments:

graphEditor (default) –

Returns:

ResizingManager –

ResizingManager.graphEditor

type: WeakRef<default>

The grapheditor instance this object is bound to.

ResizingManager.resizeStrategies

type: Map<string, ResizeStrategy>

The map containing all resize strategies to be used for resizing nodes.

ResizingManager.derefGraph()

Safely deref the grapheditor weak reference.

Returns:: default –

ResizingManager.hideResizeOverlay(nodeId)

Hide a visible resize overlay.

This method will completely remove the resize overlay from the dom and discard the resize options associated with that resize overlay.

This method will quietly return if the resize overlay is not visible for the requested node id.

Arguments:

nodeId (string|number) –

ResizingManager.isResizeOverlayVisible(nodeId)

Check if the resize overlay is currently visible for the given node id.

Arguments:

nodeId (string|number) –

Returns:

boolean –

ResizingManager.resizeNode(nodeId, width, height, resizeStrategy, updateGrapheditor=true)

Resize a node to the given dimensions.

Equivalent to resizeNodeToBBox(nodeId, {x: - (width / 2), y: - (height / 2), width: width, height: height}, resizeStrategy) .

Arguments:

nodeId (string|number) –
width (number) –
height (number) –
resizeStrategy (string) –
updateGrapheditor (boolean) –

ResizingManager.resizeNodeToBBox(nodeId, dimensions, resizeStrategy, updateGrapheditor=true)

Resize the node to fit into the given dimensions.

The dimensions are given as a bounding box relative to the node coordinates.

For batch resizing many nodes in one go it is possible to set updateGrapheditor to false . This will prevent any updates to be visible until graphEditor.completeRender() is called manually. The resize overlays also need to be updated manually if updateGrapheditor is false . To update the overlays make sure to call updateOverlays __after__

graphEditor.completeRender() to ensure that the bounding boxes are up to date.

If updateGrapheditor is set to false the ‘noderesize’ event will still be fired. But becouse the actual bounding box of the node is not updated as the graph is not rerendered the new bounding box is guessed from the dimensions rect.

Arguments:

nodeId (string|number) –
dimensions (Rect) –
resizeStrategy (string) –
updateGrapheditor (boolean) –

ResizingManager.showResizeOverlay(nodeId, options)

Show a resize overlay with the given options for the given node.

This method will quietly return without changing the resize options if the overlay is already visible!

Arguments:

nodeId (string|number) –
options (ResizeOverlayOptions) –

ResizingManager.unlink(): Unsubscribe all event subscriptions of this object on the grapheditor instance.

ResizingManager.updateOverlays()

Update all resize overlays including positions.

Use this method to update the resize overlay manually if needed.

ResizeOverlayOptions

class ResizeOverlayOptions()

Options for the resize overlay to control appeareance and behaviour.

interface

ResizeOverlayOptions.cornerHandleTemplate?

type: string

The id of a static marker template to use for corner resize handles. (Overwrites handleTemplate for corner handles)

ResizeOverlayOptions.handleTemplate?

type: string

The id of a static marker template to use for all resize handles.

ResizeOverlayOptions.liveResize?

type: boolean

True if the node is resized while dragging. If unset or false the node is only resized after the resize overlay is not dragged anymore.

ResizeOverlayOptions.maxHeight?

type: number

The maximal height of the node. Must be >= minHeight . Set this to minHeight to disable vertical resizing.

ResizeOverlayOptions.maxWidth?

type: number

The maximal width of the node. Must be >= minWidth . Set this to minWidth to disable horizontal resizing.

ResizeOverlayOptions.minHeight?

type: number

The minimal height of the node. Must be > 0 .

ResizeOverlayOptions.minWidth?

type: number

The minimal width of the node. Must be > 0 .

ResizeOverlayOptions.noCornerHandles?

type: boolean

True if the overlay should not have handles in the corners.

ResizeOverlayOptions.noHorizontalHandles?

type: boolean

True if the overlay should not have handles for horizontal resizing (left and right).

ResizeOverlayOptions.noVerticalHandles?

type: boolean

True if the overlay should not have handles for vertical resizing (top and bottom).

ResizeOverlayOptions.preserveRatio?

type: boolean

True if all resizing handles should preserve the aspect ratio of the node.

ResizeOverlayOptions.preserveRatioOnDiagonals?

type: boolean

True if corner resizing handles should preserve the aspect ratio of the node.

ResizeOverlayOptions.resizeStrategy?

type: string

The name of the strategy that is used to resize the node when the resize overlay changes.

ResizeOverlayOptions.rotateCornerHandles?

type: boolean

True if handles on the corners of the rectangle overlay should be rotated. (see rotateHandles )

ResizeOverlayOptions.rotateEdgeHandles?

type: boolean

True if handles on the edges of the rectangle overlay should be rotated. (see rotateHandles )

ResizeOverlayOptions.rotateHandles?

type: boolean

True if all handles should be rotated. (Handles are rotated such that the upward facing side is facing out of the rectangle overlay)

ResizeOverlayOptions.symmetric?

type: boolean

True if all resizing operations are mirrored at the center of the resize overlay.

ResizeOverlayOptions.symmetricHorizontal?

type: boolean

True if the horizontal part of all resizing operations is mirrored at the center of the resize overlay.

ResizeOverlayOptions.symmetricVertical?

type: boolean

True if the vertical part of all resizing operations is mirrored at the center of the resize overlay.

ResizeStrategy

class ResizeStrategy()

A strategy to apply the new dimensions to a node when a resize happens.

interface

ResizeStrategy.applyNewDimensions

type: (node: Node, width: number, height: number, graphEditor: default) => void

Apply the new width/height dimensions to the given node.

This method is called before fitIntoBoundingBox .

ResizeStrategy.fitIntoBoundingBox

type: (node: Node, rect: Rect, graphEditor: default) => void

Fit the given node into the given bounding box.

This method is called after applyNewDimensions .

The given bounding box has the same width and height that are used in the call of the applyNewDimensions method.

If the center of the new bounding box is not (0,0) then the node should be moved such that the resulting bounding box of the node is again centered around (0,0) relative to the node.

ResizeStrategy.getNodeDimensions?

type: (node: Node, graphEditor: default) => Rect

Get the current dimensions of a node.

If this method is not implemented or fails to return a Rect the bounding box of the node is fetched from the graphEditor.

This method only needs to be implemented if the svg bounding box is not accurate in representing the actual node dimensions. This can happen with odd shapes, visible link handles that are included in the bounding box or rotated nodes.

Default ResizeStrategy

class DefaultResizeStrategy()

The default resize strategy.

This strategy uses node.width and node.height .

Implements:

ResizeStrategy()

Returns:: DefaultResizeStrategy –

DefaultResizeStrategy.applyNewDimensions(node, width, height, graphEditor)

The width and height are set as node.width and node.height .

Arguments:

node (Node) –
width (number) –
height (number) –
graphEditor (default) –

DefaultResizeStrategy.fitIntoBoundingBox(node, rect, graphEditor)

The node position is first adjusted such that the center of the new bounding box of the node is at the node coordinates.

Then the node is moved to that location with the GraphEditor.moveNode method to run all movement logic without changing child node positions.

This ensures that child nodes that have a fixed position or a drop zone still get moved to the correct position.

Arguments:

node (Node) –
rect (Rect) –
graphEditor (default) –