Class VertexHandler

Event handler for resizing cells.

This handler is automatically created in Graph#createHandler.

Some elements of this handler and its subclasses can be configured using EdgeHandlerConfig.

Constructors

Properties

allowHandleBoundsCheck: boolean = true

Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.

true
bounds: Rectangle
childOffsetX: number = 0
childOffsetY: number = 0
constrainGroupByChildren: boolean = false

Specifies if the size of groups should be constrained by the children.

false
currentAlpha: number = 100
customHandles: CellHandle[] = []
edgeHandlers: EdgeHandler[] = []
EMPTY_POINT: Point = ...
escapeHandler: ((sender: Listenable, evt: Event) => void)
ghostPreview: null | Shape = null
graph: Graph

Reference to the enclosing Graph.

handleImage: null | ImageBox = null

Optional Image to be used as handles.

null
handlesVisible: boolean = true

If handles are currently visible.

true
horizontalOffset: number = 0

The horizontal offset for the handles. This is updated in redrawHandles if manageSizers is true and the sizers are offset horizontally.

index: null | number = null

Holds the index of the current handle.

inTolerance: boolean = false
labelShape: null | Shape = null
livePreview: boolean = false

Specifies if resize should change the cell in-place. This is an experimental feature for non-touch devices.

false
livePreviewActive: boolean = false
manageSizers: boolean = false

Specifies if sizers should be hidden and spaced if the vertex is small.

false
minBounds: null | Rectangle = null
movePreviewToFront: boolean = false

Specifies if the live preview should be moved to the front.

false
parentHighlight: null | RectangleShape = null
parentHighlightEnabled: boolean = false

Specifies if the parent should be highlighted if a child cell is selected.

false
parentState: null | CellState = null
preview: null | Shape = null
rotationCursor: string = 'crosshair'

Specifies the cursor for the rotation handle.

'crosshair'.
rotationHandleVSpacing: number = -16

Vertical spacing for rotation icon.

-16
rotationRaster: boolean = true

Specifies if rotation steps should be "rasterized" depending on the distance to the handle.

true
rotationShape: null | Shape = null
selectionBorder: RectangleShape
selectionBounds: Rectangle
singleSizer: boolean = false

Specifies if only one sizer handle at the bottom, right corner should be used.

false
sizers: Shape[] = []
startAngle: number = 0
startDist: number = 0
startX: number = 0
startY: number = 0
state: CellState

Reference to the CellState being modified.

tolerance: number = 0

Optional tolerance for hit-detection in getHandleForEvent.

0
unscaledBounds: null | Rectangle = null
verticalOffset: number = 0

The horizontal offset for the handles. This is updated in if manageSizers is true and the sizers are offset vertically.

x0: number = 0
y0: number = 0

Methods

  • Called if livePreview is enabled to check if a border should be painted.

    This implementation returns true if the shape is transparent.

    Returns null | boolean

  • Returns true if the parent highlight should be visible.

    This implementation always returns true.

    Returns boolean

  • Returns true if the sizer for the given index is visible.

    This implementation returns true for all given indices.

    Parameters

    • _index: number

    Returns boolean

  • Helper method to create an Rectangle around the given center point with a width and height of 2*s or 6, if no s is given.

    Parameters

    • shape: Shape
    • x: number
    • y: number

    Returns void

  • Redraws the handles. To hide certain handles the following code can be used.

    redrawHandles()
    {
    mxVertexHandlerRedrawHandles.apply(this, arguments);

    if (this.sizers != null && this.sizers.length > 7)
    {
    this.sizers[1].node.style.display = 'none';
    this.sizers[6].node.style.display = 'none';
    }
    };

    Returns void

  • Uses the given vector to change the bounds of the given cell in the graph using Graph#resizeCell.

    Parameters

    • cell: Cell
    • dx: number
    • dy: number
    • index: number
    • gridEnabled: boolean
    • constrained: boolean
    • recurse: boolean

    Returns void

  • Rotates the given cell and its children by the given angle in degrees.

    Parameters

    • cell: Cell

      Cell to be rotated.

    • angle: number

      Angle in degrees.

    • Optionalparent: Cell

      if set, consider the parent in the rotation computation.

    Returns void

  • Hook for subclasses to implement a single click on the rotation handle. This code is executed as part of the model transaction.

    This implementation is empty.

    Returns void

  • Hook for rounding the unscaled width or height. This uses Math.round.

    Parameters

    • length: number

    Returns number

  • Returns the union of the given bounds and location for the specified handle index.

    To override this to limit the size of vertex via a minWidth/-Height style, the following code can be used.

    let vertexHandlerUnion = union;
    union = (bounds, dx, dy, index, gridEnabled, scale, tr, constrained)=>
    {
    let result = vertexHandlerUnion.apply(this, arguments);

    result.width = Math.max(result.width, mxUtils.getNumber(this.state.style, 'minWidth', 0));
    result.height = Math.max(result.height, mxUtils.getNumber(this.state.style, 'minHeight', 0));

    return result;
    };

    The minWidth/-Height style can then be used as follows:

    graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'minWidth=100;minHeight=100;');
    

    To override this to update the height for a wrapped text if the width of a vertex is changed, the following can be used.

    let mxVertexHandlerUnion = union;
    union = (bounds, dx, dy, index, gridEnabled, scale, tr, constrained)=>
    {
    let result = mxVertexHandlerUnion.apply(this, arguments);
    let s = this.state;

    if (this.graph.isHtmlLabel(s.cell) && (index == 3 || index == 4) &&
    s.text != null && s.style.whiteSpace == 'wrap')
    {
    let label = this.graph.getLabel(s.cell);
    let fontSize = mxUtils.getNumber(s.style, 'fontSize', mxConstants.DEFAULT_FONTSIZE);
    let ww = result.width / s.view.scale - s.text.spacingRight - s.text.spacingLeft

    result.height = mxUtils.getSizeForString(label, fontSize, s.style.fontFamily, ww).height;
    }

    return result;
    };

    Parameters

    • bounds: Rectangle
    • dx: number
    • dy: number
    • index: number
    • gridEnabled: boolean
    • scale: number
    • tr: Point
    • constrained: boolean
    • centered: boolean

    Returns Rectangle