mxVertexHandler

Event handler for resizing cells.  This handler is automatically created in mxGraph.createHandler.

Summary
mxVertexHandlerEvent handler for resizing cells.
Functions
mxVertexHandlerConstructs an event handler that allows to resize vertices and groups.
Variables
graphReference to the enclosing mxGraph.
stateReference to the mxCellState being modified.
singleSizerSpecifies if only one sizer handle at the bottom, right corner should be used.
indexHolds the index of the current handle.
allowHandleBoundsCheckSpecifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
handleImageOptional mxImage to be used as handles.
toleranceOptional tolerance for hit-detection in getHandleForEvent.
rotationEnabledSpecifies if a rotation handle should be visible.
rotationRasterSpecifies if rotation steps should be “rasterized” depening on the distance to the handle.
rotationCursorSpecifies the cursor for the rotation handle.
livePreviewSpecifies if resize should change the cell in-place.
manageSizersSpecifies if sizers should be hidden and spaced if the vertex is small.
constrainGroupByChildrenSpecifies if the size of groups should be constrained by the children.
rotationHandleVSpacingVertical spacing for rotation icon.
horizontalOffsetThe horizontal offset for the handles.
verticalOffsetThe horizontal offset for the handles.
Functions
initInitializes the shapes required for this vertex handler.
isConstrainedEventReturns true if the aspect ratio if the cell should be maintained.
isConstrainedEventReturns true if the aspect ratio if the cell should be maintained.
updateMinBoundsInitializes the shapes required for this vertex handler.
getSelectionBoundsReturns the mxRectangle that defines the bounds of the selection border.
createSelectionShapeCreates the shape used to draw the selection border.
getSelectionColorReturns mxConstants.VERTEX_SELECTION_COLOR.
getSelectionStrokeWidthReturns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
isSelectionDashedReturns <mxConstants.VERTEX_SELECTION_DASHED>.
createSizerCreates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
isSizerVisibleReturns true if the sizer for the given index is visible.
createSizerShapeCreates the shape used for the sizer handle for the specified bounds an index.
createBoundsHelper method to create an mxRectangle around the given centerpoint with a width and height of 2*s or 6, if no s is given.
getHandleForEventReturns the index of the handle for the given event.
mouseDownHandles the event if a handle has been clicked.
isLivePreviewBorderCalled if livePreview is enabled to check if a border should be painted.
startStarts the handling of the mouse gesture.
hideSizersHides all sizers except.
checkToleranceChecks if the coordinates for the given event are within the mxGraph.tolerance.
updateHintHook for subclassers do show details while the handler is active.
removeHintHooks for subclassers to hide details when the handler gets inactive.
roundAngleHook for rounding the angle.
roundLengthHook for rounding the unscaled width or height.
mouseMoveHandles the event by updating the preview.
mouseUpHandles the event by applying the changes to the geometry.
rotateCellRotates the given cell to the given rotation.
rotateCellRotates the given cell and its children by the given angle in degrees.
resetResets the state of this handler.
resizeCellUses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
moveChildrenMoves the children of the given cell by the given vector.
unionReturns the union of the given bounds and location for the specified handle index.
redrawRedraws the handles and the preview.
redrawHandlesRedraws the handles.
drawPreviewRedraws the preview.
destroyDestroys the handler and all its resources and DOM nodes.

Functions

mxVertexHandler

function mxVertexHandler(state)

Constructs an event handler that allows to resize vertices and groups.

Parameters

statemxCellState of the cell to be resized.

Variables

graph

mxVertexHandler.prototype.graph

Reference to the enclosing mxGraph.

state

mxVertexHandler.prototype.state

Reference to the mxCellState being modified.

singleSizer

mxVertexHandler.prototype.singleSizer

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

index

mxVertexHandler.prototype.index

Holds the index of the current handle.

allowHandleBoundsCheck

mxVertexHandler.prototype.allowHandleBoundsCheck

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

handleImage

mxVertexHandler.prototype.handleImage

Optional mxImage to be used as handles.  Default is null.

tolerance

mxVertexHandler.prototype.tolerance

Optional tolerance for hit-detection in getHandleForEvent.  Default is 0.

rotationEnabled

mxVertexHandler.prototype.rotationEnabled

Specifies if a rotation handle should be visible.  Default is false.

rotationRaster

mxVertexHandler.prototype.rotationRaster

Specifies if rotation steps should be “rasterized” depening on the distance to the handle.  Default is true.

rotationCursor

mxVertexHandler.prototype.rotationCursor

Specifies the cursor for the rotation handle.  Default is ‘crosshair’.

livePreview

mxVertexHandler.prototype.livePreview

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

manageSizers

mxVertexHandler.prototype.manageSizers

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

constrainGroupByChildren

mxVertexHandler.prototype.constrainGroupByChildren

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

rotationHandleVSpacing

mxVertexHandler.prototype.rotationHandleVSpacing

Vertical spacing for rotation icon.  Default is -16.

horizontalOffset

mxVertexHandler.prototype.horizontalOffset

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

verticalOffset

mxVertexHandler.prototype.verticalOffset

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

Functions

init

mxVertexHandler.prototype.init = function()

Initializes the shapes required for this vertex handler.

isConstrainedEvent

Returns true if the aspect ratio if the cell should be maintained.

isConstrainedEvent

mxVertexHandler.prototype.isConstrainedEvent = function(me)

Returns true if the aspect ratio if the cell should be maintained.

updateMinBounds

mxVertexHandler.prototype.updateMinBounds = function()

Initializes the shapes required for this vertex handler.

getSelectionBounds

mxVertexHandler.prototype.getSelectionBounds = function(state)

Returns the mxRectangle that defines the bounds of the selection border.

createSelectionShape

mxVertexHandler.prototype.createSelectionShape = function(bounds)

Creates the shape used to draw the selection border.

getSelectionColor

mxVertexHandler.prototype.getSelectionColor = function()

Returns mxConstants.VERTEX_SELECTION_COLOR.

getSelectionStrokeWidth

mxVertexHandler.prototype.getSelectionStrokeWidth = function()

Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.

isSelectionDashed

mxVertexHandler.prototype.isSelectionDashed = function()

Returns <mxConstants.VERTEX_SELECTION_DASHED>.

createSizer

mxVertexHandler.prototype.createSizer = function(cursor,
index,
size,
fillColor)

Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.

isSizerVisible

mxVertexHandler.prototype.isSizerVisible = function(index)

Returns true if the sizer for the given index is visible.  This returns true for all given indices.

createSizerShape

mxVertexHandler.prototype.createSizerShape = function(bounds,
index,
fillColor)

Creates the shape used for the sizer handle for the specified bounds an index.  Only images and rectangles should be returned if support for HTML labels with not foreign objects is required.

createBounds

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

getHandleForEvent

mxVertexHandler.prototype.getHandleForEvent = function(me)

Returns the index of the handle for the given event.  This returns the index of the sizer from where the event originated or <mxEvent.LABEL_INDEX>.

mouseDown

mxVertexHandler.prototype.mouseDown = function(sender,
me)

Handles the event if a handle has been clicked.  By consuming the event all subsequent events of the gesture are redirected to this handler.

isLivePreviewBorder

mxVertexHandler.prototype.isLivePreviewBorder = function()

Called if livePreview is enabled to check if a border should be painted.  This implementation returns true if the shape is transparent.

start

mxVertexHandler.prototype.start = function(x,
y,
index)

Starts the handling of the mouse gesture.

hideSizers

mxVertexHandler.prototype.hideSizers = function()

Hides all sizers except.

Starts the handling of the mouse gesture.

checkTolerance

mxVertexHandler.prototype.checkTolerance = function(me)

Checks if the coordinates for the given event are within the mxGraph.tolerance.  If the event is a mouse event then the tolerance is ignored.

updateHint

mxVertexHandler.prototype.updateHint = function(me)

Hook for subclassers do show details while the handler is active.

removeHint

mxVertexHandler.prototype.removeHint = function()

Hooks for subclassers to hide details when the handler gets inactive.

roundAngle

mxVertexHandler.prototype.roundAngle = function(angle)

Hook for rounding the angle.  This uses Math.round.

roundLength

mxVertexHandler.prototype.roundLength = function(length)

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

mouseMove

mxVertexHandler.prototype.mouseMove = function(sender,
me)

Handles the event by updating the preview.

mouseUp

mxVertexHandler.prototype.mouseUp = function(sender,
me)

Handles the event by applying the changes to the geometry.

rotateCell

Rotates the given cell to the given rotation.

rotateCell

mxVertexHandler.prototype.rotateCell = function(cell,
angle,
parent)

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

Parameters

cellmxCell to be rotated.
angleAngle in degrees.

reset

mxVertexHandler.prototype.reset = function()

Resets the state of this handler.

resizeCell

mxVertexHandler.prototype.resizeCell = function(cell,
dx,
dy,
index,
gridEnabled,
constrained,
recurse)

Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.

moveChildren

mxVertexHandler.prototype.moveChildren = function(cell,
dx,
dy)

Moves the children of the given cell by the given vector.

union

mxVertexHandler.prototype.union = function(bounds,
dx,
dy,
index,
gridEnabled,
scale,
tr,
constrained)

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.

var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function(bounds, dx, dy, index, gridEnabled, scale, tr, constrained)
{
  var 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.

var mxVertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function(bounds, dx, dy, index, gridEnabled, scale, tr, constrained)
{
  var result = mxVertexHandlerUnion.apply(this, arguments);
  var s = this.state;

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

    result.height = mxUtils.getSizeForString(label, fontSize, s.style[mxConstants.STYLE_FONTFAMILY], ww).height;
  }

  return result;
};

redraw

mxVertexHandler.prototype.redraw = function()

Redraws the handles and the preview.

redrawHandles

mxVertexHandler.prototype.redrawHandles = function()

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

mxVertexHandler.prototype.redrawHandles = function()
{
  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';
  }
};

drawPreview

mxVertexHandler.prototype.drawPreview = function()

Redraws the preview.

destroy

mxVertexHandler.prototype.destroy = function()

Destroys the handler and all its resources and DOM nodes.

function mxVertexHandler(state)
Constructs an event handler that allows to resize vertices and groups.
mxVertexHandler.prototype.graph
Reference to the enclosing mxGraph.
Extends mxEventSource to implement a graph component for the browser.
mxVertexHandler.prototype.state
Reference to the mxCellState being modified.
Represents the current state of a cell in a given mxGraphView.
mxVertexHandler.prototype.singleSizer
Specifies if only one sizer handle at the bottom, right corner should be used.
mxVertexHandler.prototype.index
Holds the index of the current handle.
mxVertexHandler.prototype.allowHandleBoundsCheck
Specifies if the bounds of handles should be used for hit-detection in IE or if tolerance > 0.
mxVertexHandler.prototype.tolerance
Optional tolerance for hit-detection in getHandleForEvent.
mxVertexHandler.prototype.handleImage
Optional mxImage to be used as handles.
Encapsulates the URL, width and height of an image.
mxVertexHandler.prototype.getHandleForEvent = function(me)
Returns the index of the handle for the given event.
mxVertexHandler.prototype.rotationEnabled
Specifies if a rotation handle should be visible.
mxVertexHandler.prototype.rotationRaster
Specifies if rotation steps should be “rasterized” depening on the distance to the handle.
mxVertexHandler.prototype.rotationCursor
Specifies the cursor for the rotation handle.
mxVertexHandler.prototype.livePreview
Specifies if resize should change the cell in-place.
mxVertexHandler.prototype.manageSizers
Specifies if sizers should be hidden and spaced if the vertex is small.
mxVertexHandler.prototype.constrainGroupByChildren
Specifies if the size of groups should be constrained by the children.
mxVertexHandler.prototype.rotationHandleVSpacing
Vertical spacing for rotation icon.
mxVertexHandler.prototype.horizontalOffset
The horizontal offset for the handles.
mxVertexHandler.prototype.verticalOffset
The horizontal offset for the handles.
mxVertexHandler.prototype.init = function()
Initializes the shapes required for this vertex handler.
mxVertexHandler.prototype.isConstrainedEvent = function(me)
Returns true if the aspect ratio if the cell should be maintained.
mxVertexHandler.prototype.updateMinBounds = function()
Initializes the shapes required for this vertex handler.
mxVertexHandler.prototype.getSelectionBounds = function(state)
Returns the mxRectangle that defines the bounds of the selection border.
mxVertexHandler.prototype.createSelectionShape = function(bounds)
Creates the shape used to draw the selection border.
mxVertexHandler.prototype.getSelectionColor = function()
Returns mxConstants.VERTEX_SELECTION_COLOR.
Defines the color to be used for the selection border of vertices.
mxVertexHandler.prototype.getSelectionStrokeWidth = function()
Returns mxConstants.VERTEX_SELECTION_STROKEWIDTH.
Defines the strokewidth to be used for vertex selections.
mxVertexHandler.prototype.isSelectionDashed = function()
Returns mxConstants.VERTEX_SELECTION_DASHED.
mxVertexHandler.prototype.createSizer = function(cursor,
index,
size,
fillColor)
Creates a sizer handle for the specified cursor and index and returns the new mxRectangleShape that represents the handle.
Extends mxShape to implement a rectangle shape.
mxVertexHandler.prototype.isSizerVisible = function(index)
Returns true if the sizer for the given index is visible.
mxVertexHandler.prototype.createSizerShape = function(bounds,
index,
fillColor)
Creates the shape used for the sizer handle for the specified bounds an index.
Extends mxPoint to implement a 2-dimensional rectangle with double precision coordinates.
mxVertexHandler.prototype.mouseDown = function(sender,
me)
Handles the event if a handle has been clicked.
mxVertexHandler.prototype.isLivePreviewBorder = function()
Called if livePreview is enabled to check if a border should be painted.
mxVertexHandler.prototype.start = function(x,
y,
index)
Starts the handling of the mouse gesture.
mxVertexHandler.prototype.hideSizers = function()
Hides all sizers except.
mxVertexHandler.prototype.checkTolerance = function(me)
Checks if the coordinates for the given event are within the mxGraph.tolerance.
mxGraph.prototype.tolerance
Tolerance for a move to be handled as a single click.
mxVertexHandler.prototype.updateHint = function(me)
Hook for subclassers do show details while the handler is active.
mxVertexHandler.prototype.removeHint = function()
Hooks for subclassers to hide details when the handler gets inactive.
mxVertexHandler.prototype.roundAngle = function(angle)
Hook for rounding the angle.
mxVertexHandler.prototype.roundLength = function(length)
Hook for rounding the unscaled width or height.
mxVertexHandler.prototype.mouseMove = function(sender,
me)
Handles the event by updating the preview.
mxVertexHandler.prototype.mouseUp = function(sender,
me)
Handles the event by applying the changes to the geometry.
mxVertexHandler.prototype.rotateCell = function(cell,
angle,
parent)
Rotates the given cell and its children by the given angle in degrees.
mxVertexHandler.prototype.reset = function()
Resets the state of this handler.
mxVertexHandler.prototype.resizeCell = function(cell,
dx,
dy,
index,
gridEnabled,
constrained,
recurse)
Uses the given vector to change the bounds of the given cell in the graph using mxGraph.resizeCell.
mxGraph.prototype.resizeCell = function(cell,
bounds,
recurse)
Sets the bounds of the given cell using resizeCells.
mxVertexHandler.prototype.moveChildren = function(cell,
dx,
dy)
Moves the children of the given cell by the given vector.
mxVertexHandler.prototype.union = function(bounds,
dx,
dy,
index,
gridEnabled,
scale,
tr,
constrained)
Returns the union of the given bounds and location for the specified handle index.
mxVertexHandler.prototype.redraw = function()
Redraws the handles and the preview.
mxVertexHandler.prototype.redrawHandles = function()
Redraws the handles.
mxVertexHandler.prototype.drawPreview = function()
Redraws the preview.
mxVertexHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes.
mxGraph.prototype.createHandler = function(state)
Creates a new handler for the given cell state.
Cells are the elements of the graph model.
Close