Class EdgeHandler

Graph event handler that reconnects edges and modifies control points and the edge label location. Uses CellMarker for finding and highlighting new source and target vertices. This handler is automatically created in mxGraph.createHandler for each selected edge. To enable adding/removing control points, the following code can be used

Example

mxEdgeHandler.prototype.addEnabled = true;
mxEdgeHandler.prototype.removeEnabled = true;

Note: This experimental feature is not recommended for production use. EdgeHandler

Hierarchy (view full)

Constructors

constructor

Properties

abspoints active addEnabled allowHandleBoundsCheck bends cloneEnabled constraintHandler currentPoint customHandles dblClickRemoveEnabled error escapeHandler graph handleImage index isLabel isSource isTarget label labelHandleImage labelShape manageLabelHandle marker mergeRemoveEnabled outline outlineConnect parentHighlight parentHighlightEnabled points preferHtml removeEnabled shape snapPoint snapToTerminals startX startY state straightRemoveEnabled tolerance virtualBendOpacity virtualBends virtualBendsEnabled

Methods

addPoint addPointAt changePoints changeTerminalPoint checkLabelHandle clonePreviewState connect convertPoint createBends createCustomHandles createHandleShape createLabelHandleShape createMarker createParentHighlightShape createSelectionShape createVirtualBends destroyBends drawPreview getCellAt getHandleFillColor getHandleForEvent getPointForEvent getPreviewPoints getPreviewTerminalState getSelectionColor getSelectionPoints getSelectionStrokeWidth getSnapToTerminalTolerance initBend isAddPointEvent isAddVirtualBendEvent isCellEnabled isConnectableCell isCustomHandleEvent isCustomHandleVisible isDestroyed isHandleEnabled isHandleVisible isOutlineConnectEvent isParentHighlightVisible isRemovePointEvent isSelectionDashed isSnapToTerminalsEvent isVirtualBendsEnabled mouseDown mouseMove mouseUp moveLabel onDestroy redraw redrawHandles redrawInnerBends refresh removeHint removePoint reset roundLength setHandlesVisible setPreviewColor start updateHint updateParentHighlight updatePreviewState validateConnection

Constructors

constructor

Properties

abspoints

abspoints: (null | Point)[] = []

active

active: boolean = true

addEnabled

addEnabled: boolean = false

Specifies if adding bends by shift-click is enabled. Default is false. Note: This experimental feature is not recommended for production use.

allowHandleBoundsCheck

allowHandleBoundsCheck: boolean = true

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

bends

bends: Shape[] = []

Holds the Shapes that represent the points.

cloneEnabled

cloneEnabled: boolean = true

Specifies if cloning by control-drag is enabled. Default is true.

constraintHandler

constraintHandler: ConstraintHandler

Holds the ConstraintHandler used for drawing and highlighting constraints.

currentPoint

currentPoint: null | Point = null

customHandles

customHandles: undefined | CellHandle[]

dblClickRemoveEnabled

dblClickRemoveEnabled: boolean = false

Specifies if removing bends by double click is enabled. Default is false.

error

error: null | string = null

Holds the current validation error while a connection is being changed.

escapeHandler

escapeHandler: ((sender: Listenable, evt: Event) => void)

graph

graph: Graph

Reference to the enclosing Graph.

handleImage

handleImage: null | ImageBox = null

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

index

index: null | number = null

isLabel

isLabel: boolean = false

isSource

isSource: boolean = false

isTarget

isTarget: boolean = false

label

label: Point

labelHandleImage

labelHandleImage: null | ImageBox = null

labelShape

labelShape: Shape

Holds the Shape that represents the label position.

manageLabelHandle

manageLabelHandle: boolean = false

Specifies if the label handle should be moved if it intersects with another handle. Uses checkLabelHandle for checking and moving.

Default

false

marker

marker: CellMarker

Holds the CellMarker which is used for highlighting terminals.

mergeRemoveEnabled

mergeRemoveEnabled: boolean = false

Specifies if removing bends by dropping them on other bends is enabled. Default is false.

outline

outline: boolean = true

outlineConnect

outlineConnect: boolean = false

Specifies if connections to the outline of a highlighted target should be enabled. This will allow to place the connection point along the outline of the highlighted target.

Default

false

parentHighlight

parentHighlight: null | RectangleShape = null

parentHighlightEnabled

parentHighlightEnabled: boolean = false

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

points

points: Point[] = []

preferHtml

preferHtml: boolean = false

Specifies if bends should be added to the graph container. This is updated in based on whether the edge or one of its terminals has an HTML label in the container.

removeEnabled

removeEnabled: boolean = false

Specifies if removing bends by shift-click is enabled. Default is false. Note: This experimental feature is not recommended for production use.

shape

shape: Shape

Holds the Shape that represents the preview edge.

snapPoint

snapPoint: null | Point = null

snapToTerminals

snapToTerminals: boolean = false

Specifies if waypoints should snap to the routing centers of terminals. Default is false.

startX

startX: number = 0

startY

startY: number = 0

state

state: CellState

Reference to the being modified.

straightRemoveEnabled

straightRemoveEnabled: boolean = false

Specifies if removing bends by creating straight segments should be enabled. If enabled, this can be overridden by holding down the alt key while moving. Default is false.

tolerance

tolerance: number = 0

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

virtualBendOpacity

virtualBendOpacity: number = 20

Opacity to be used for virtual bends (see ). Default is 20.

virtualBends

virtualBends: undefined | Shape[]

virtualBendsEnabled

virtualBendsEnabled: boolean = false

Specifies if virtual bends should be added in the center of each segments. These bends can then be used to add new waypoints. Default is false.

Methods

addPoint

addPointAt

changePoints

changeTerminalPoint

checkLabelHandle

clonePreviewState

connect

  • connect(edge, terminal, isSource, isClone, me): Cell

  • Changes the terminal or terminal point of the given edge in the graph model.

    Parameters

    • edge: Cell

      that represents the edge to be reconnected.

    • terminal: Cell

      that represents the new terminal.

    • isSource: boolean

      Boolean indicating if the new terminal is the source or target terminal.

    • isClone: boolean

      Boolean indicating if the new connection should be a clone of the old edge.

    • me: InternalMouseEvent

      MouseEvent that contains the mouse up event.

    Returns Cell

convertPoint

  • convertPoint(point, gridEnabled): Point

  • Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid. Returns the given, modified point instance.

    Parameters

    • point: Point

      Point to be converted.

    • gridEnabled: boolean

      Boolean that specifies if the grid should be applied.

    Returns Point

createBends

createCustomHandles

createHandleShape

createLabelHandleShape

createMarker

createParentHighlightShape

createSelectionShape

createVirtualBends

destroyBends

drawPreview

getCellAt

getHandleFillColor

  • getHandleFillColor(index): string

  • Returns the fillcolor for the handle at the given index.

    Parameters

    • index: number

    Returns string

getHandleForEvent

getPointForEvent

getPreviewPoints

getPreviewTerminalState

getSelectionColor

getSelectionPoints

getSelectionStrokeWidth

getSnapToTerminalTolerance

  • getSnapToTerminalTolerance(): number

  • Returns the tolerance for the guides. Default value is gridSize * scale / 2.

    Returns number

initBend

  • initBend(bend, dblClick?): void

  • Helper method to initialize the given bend.

    Parameters

    • bend: Shape

      Shape that represents the bend to be initialized.

    • OptionaldblClick: ((evt: MouseEvent) => void)
        • (evt): void

        • Parameters

          • evt: MouseEvent

          Returns void

    Returns void

isAddPointEvent

  • isAddPointEvent(evt): boolean

  • Returns true if the given event is a trigger to add a new Point. This implementation returns true if shift is pressed.

    Parameters

    • evt: MouseEvent

    Returns boolean

isAddVirtualBendEvent

isCellEnabled

  • isCellEnabled(cell): boolean

  • Returns true if the given cell allows new connections to be created. This implementation always returns true.

    Parameters

    Returns boolean

isConnectableCell

  • isConnectableCell(cell): boolean

  • Returns true if the given cell is connectable. This is a hook to disable floating connections. This implementation returns true.

    Parameters

    Returns boolean

isCustomHandleEvent

isCustomHandleVisible

isDestroyed

isHandleEnabled

  • isHandleEnabled(index): boolean

  • Creates the shape used to display the given bend.

    Parameters

    • index: number

    Returns boolean

isHandleVisible

  • isHandleVisible(index): boolean

  • Returns true if the handle at the given index is visible.

    Parameters

    • index: number

    Returns boolean

isOutlineConnectEvent

isParentHighlightVisible

  • isParentHighlightVisible(): null | boolean

  • Returns true if the parent highlight should be visible. This implementation always returns true.

    Returns null | boolean

isRemovePointEvent

  • isRemovePointEvent(evt): boolean

  • Returns true if the given event is a trigger to remove a point. This implementation returns true if shift is pressed.

    Parameters

    • evt: MouseEvent

    Returns boolean

isSelectionDashed

isSnapToTerminalsEvent

isVirtualBendsEnabled

  • isVirtualBendsEnabled(evt?): undefined | boolean

  • Returns true if virtual bends should be added. This returns true if is true and the current style allows and renders custom waypoints.

    Parameters

    • Optionalevt: Event

    Returns undefined | boolean

mouseDown

  • mouseDown(sender, me): void

  • Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null. The indices may be one of <LABEL_HANDLE> or the number of the respective control point. The source and target points are used for reconnecting the edge.

    Parameters

    Returns void

mouseMove

mouseUp

moveLabel

  • moveLabel(edgeState, x, y): void

  • Changes the coordinates for the label of the given edge.

    Parameters

    • edgeState: CellState
    • x: number

      Integer that specifies the x-coordinate of the new location.

    • y: number

      Integer that specifies the y-coordinate of the new location.

    Returns void

onDestroy

  • onDestroy(): void

  • Destroys the handler and all its resources and DOM nodes. This does normally not need to be called as handlers are destroyed automatically when the corresponding cell is deselected.

    Returns void

redraw

  • redraw(ignoreHandles?): void

  • Redraws the preview, and the bends- and label control points.

    Parameters

    • OptionalignoreHandles: boolean

    Returns void

redrawHandles

redrawInnerBends

refresh

removeHint

removePoint

reset

roundLength

  • roundLength(length): number

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

    Parameters

    • length: number

    Returns number

setHandlesVisible

setPreviewColor

start

  • start(x, y, index): void

  • Starts the handling of the mouse gesture.

    Parameters

    • x: number
    • y: number
    • index: number

    Returns void

updateHint

updateParentHighlight

updatePreviewState

validateConnection

  • validateConnection(source, target): null | string

  • Returns the error message or an empty string if the connection for the given source, target pair is not valid. Otherwise it returns null. This implementation uses Graph#getEdgeValidationError.

    Parameters

    • source: null | Cell

      that represents the source terminal.

    • target: null | Cell

      that represents the target terminal.

    Returns null | string

Settings

Member Visibility

On This Page

Constructors
Properties
Methods
addPointaddPointAtchangePointschangeTerminalPointcheckLabelHandleclonePreviewStateconnectconvertPointcreateBendscreateCustomHandlescreateHandleShapecreateLabelHandleShapecreateMarkercreateParentHighlightShapecreateSelectionShapecreateVirtualBendsdestroyBendsdrawPreviewgetCellAtgetHandleFillColorgetHandleForEventgetPointForEventgetPreviewPointsgetPreviewTerminalStategetSelectionColorgetSelectionPointsgetSelectionStrokeWidthgetSnapToTerminalToleranceinitBendisAddPointEventisAddVirtualBendEventisCellEnabledisConnectableCellisCustomHandleEventisCustomHandleVisibleisDestroyedisHandleEnabledisHandleVisibleisOutlineConnectEventisParentHighlightVisibleisRemovePointEventisSelectionDashedisSnapToTerminalsEventisVirtualBendsEnabledmouseDownmouseMovemouseUpmoveLabelonDestroyredrawredrawHandlesredrawInnerBendsrefreshremoveHintremovePointresetroundLengthsetHandlesVisiblesetPreviewColorstartupdateHintupdateParentHighlightupdatePreviewStatevalidateConnection