Graph event handler that reconnects edges and modifies control points and the edge label location. Uses <mxTerminalMarker> for finding and highlighting new source and target vertices. This handler is automatically created in mxGraph.createHandler for each selected edge.
mxEdgeHandler.prototype.addEnabled = true; mxEdgeHandler.prototype.removeEnabled = true;
Note: This experimental feature is not recommended for production use.
mxEdgeHandler | Graph event handler that reconnects edges and modifies control points and the edge label location. |
Functions | |
mxEdgeHandler | Constructs an edge handler for the specified mxCellState. |
Variables | |
graph | Reference to the enclosing mxGraph. |
state | Reference to the mxCellState being modified. |
marker | Holds the <mxTerminalMarker> which is used for highlighting terminals. |
constraintHandler | Holds the mxConstraintHandler used for drawing and highlighting constraints. |
error | Holds the current validation error while a connection is being changed. |
shape | Holds the mxShape that represents the preview edge. |
bends | Holds the mxShapes that represent the points. |
labelShape | Holds the mxShape that represents the label position. |
cloneEnabled | Specifies if cloning by control-drag is enabled. |
addEnabled | Specifies if adding bends by shift-click is enabled. |
removeEnabled | Specifies if removing bends by shift-click is enabled. |
dblClickRemoveEnabled | Specifies if removing bends by double click is enabled. |
mergeRemoveEnabled | Specifies if removing bends by dropping them on other bends is enabled. |
straightRemoveEnabled | Specifies if removing bends by creating straight segments should be enabled. |
virtualBendsEnabled | Specifies if virtual bends should be added in the center of each segments. |
virtualBendOpacity | Opacity to be used for virtual bends (see virtualBendsEnabled). |
parentHighlightEnabled | Specifies if the parent should be highlighted if a child cell is selected. |
preferHtml | Specifies if bends should be added to the graph container. |
allowHandleBoundsCheck | Specifies if the bounds of handles should be used for hit-detection in IE Default is true. |
snapToTerminals | Specifies if waypoints should snap to the routing centers of terminals. |
handleImage | Optional mxImage to be used as handles. |
tolerance | Optional tolerance for hit-detection in getHandleForEvent. |
outlineConnect | Specifies if connections to the outline of a highlighted target should be enabled. |
manageLabelHandle | Specifies if the label handle should be moved if it intersects with another handle. |
Functions | |
init | Initializes the shapes required for this edge handler. |
isParentHighlightVisible | Returns true if the parent highlight should be visible. |
updateParentHighlight | Updates the highlight of the parent if parentHighlightEnabled is true. |
createCustomHandles | Returns an array of custom handles. |
isVirtualBendsEnabled | Returns true if virtual bends should be added. |
isCellEnabled | Returns true if the given cell allows new connections to be created. |
isAddPointEvent | Returns true if the given event is a trigger to add a new point. |
isRemovePointEvent | Returns true if the given event is a trigger to remove a point. |
getSelectionPoints | Returns the list of points that defines the selection stroke. |
createParentHighlightShape | Creates the shape used to draw the selection border. |
createSelectionShape | Creates the shape used to draw the selection border. |
getSelectionColor | Returns mxConstants.EDGE_SELECTION_COLOR. |
getSelectionStrokeWidth | Returns mxConstants.EDGE_SELECTION_STROKEWIDTH. |
isSelectionDashed | Returns <mxConstants.EDGE_SELECTION_DASHED>. |
isConnectableCell | Returns true if the given cell is connectable. |
getCellAt | Creates and returns the mxCellMarker used in marker. |
createMarker | Creates and returns the mxCellMarker used in marker. |
validateConnection | Returns the error message or an empty string if the connection for the given source, target pair is not valid. |
createBends | Creates and returns the bends used for modifying the edge. |
createVirtualBends | Creates and returns the bends used for modifying the edge. |
isHandleEnabled | Creates the shape used to display the given bend. |
isHandleVisible | Returns true if the handle at the given index is visible. |
createHandleShape | Creates the shape used to display the given bend. |
createLabelHandleShape | Creates the shape used to display the the label handle. |
initBend | Helper method to initialize the given bend. |
getHandleForEvent | Returns the index of the handle for the given event. |
isAddVirtualBendEvent | Returns true if the given event allows virtual bends to be added. |
isCustomHandleEvent | Returns true if the given event allows custom handles to be changed. |
mouseDown | Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null. |
start | Starts the handling of the mouse gesture. |
clonePreviewState | Returns a clone of the current preview state for the given point and terminal. |
getSnapToTerminalTolerance | Returns the tolerance for the guides. |
updateHint | Hook for subclassers do show details while the handler is active. |
removeHint | Hooks for subclassers to hide details when the handler gets inactive. |
roundLength | Hook for rounding the unscaled width or height. |
isSnapToTerminalsEvent | Returns true if snapToTerminals is true and if alt is not pressed. |
getPointForEvent | Returns the point for the given event. |
getPreviewTerminalState | Updates the given preview state taking into account the state of the constraint handler. |
getPreviewPoints | Updates the given preview state taking into account the state of the constraint handler. |
isOutlineConnectEvent | Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed. |
updatePreviewState | Updates the given preview state taking into account the state of the constraint handler. |
mouseMove | Handles the event by updating the preview. |
mouseUp | Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints. |
reset | Resets the state of this handler. |
setPreviewColor | Sets the color of the preview to the given value. |
convertPoint | Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid. |
moveLabel | Changes the coordinates for the label of the given edge. |
connect | Changes the terminal or terminal point of the given edge in the graph model. |
changeTerminalPoint | Changes the terminal point of the given edge. |
changePoints | Changes the control points of the given edge in the graph model. |
addPoint | Adds a control point for the given state and event. |
addPointAt | Adds a control point at the given point. |
removePoint | Removes the control point at the given index from the given state. |
getHandleFillColor | Returns the fillcolor for the handle at the given index. |
redraw | Redraws the preview, and the bends- and label control points. |
redrawHandles | Redraws the handles. |
isCustomHandleVisible | Returns true if the given custom handle is visible. |
hideHandles | Shortcut to <hideSizers>. |
redrawInnerBends | Updates and redraws the inner bends. |
checkLabelHandle | Checks if the label handle intersects the given bounds and moves it if it intersects. |
drawPreview | Redraws the preview. |
refresh | Refreshes the bends of this handler. |
isDestroyed | Returns true if destroy was called. |
destroyBends | Destroys all elements in bends. |
destroy | Destroys the handler and all its resources and DOM nodes. |
function mxEdgeHandler( state )
Constructs an edge handler for the specified mxCellState.
state | mxCellState of the cell to be handled. |
mxEdgeHandler.prototype.graph
Reference to the enclosing mxGraph.
mxEdgeHandler.prototype.state
Reference to the mxCellState being modified.
mxEdgeHandler.prototype.constraintHandler
Holds the mxConstraintHandler used for drawing and highlighting constraints.
mxEdgeHandler.prototype.shape
Holds the mxShape that represents the preview edge.
mxEdgeHandler.prototype.bends
Holds the mxShapes that represent the points.
mxEdgeHandler.prototype.labelShape
Holds the mxShape that represents the label position.
mxEdgeHandler.prototype.virtualBendOpacity
Opacity to be used for virtual bends (see virtualBendsEnabled). Default is 20.
mxEdgeHandler.prototype.preferHtml
Specifies if bends should be added to the graph container. This is updated in init based on whether the edge or one of its terminals has an HTML label in the container.
mxEdgeHandler.prototype.handleImage
Optional mxImage to be used as handles. Default is null.
mxEdgeHandler.prototype.tolerance
Optional tolerance for hit-detection in getHandleForEvent. Default is 0.
mxEdgeHandler.prototype.manageLabelHandle
Specifies if the label handle should be moved if it intersects with another handle. Uses checkLabelHandle for checking and moving. Default is false.
Updates the highlight of the parent if parentHighlightEnabled is true.
mxEdgeHandler.prototype.isVirtualBendsEnabled = function( evt )
Returns true if virtual bends should be added. This returns true if virtualBendsEnabled is true and the current style allows and renders custom waypoints.
mxEdgeHandler.prototype.getSelectionColor = function()
Returns mxConstants.EDGE_SELECTION_COLOR.
mxEdgeHandler.prototype.getCellAt = function( x, y )
Creates and returns the mxCellMarker used in marker.
mxEdgeHandler.prototype.createMarker = function()
Creates and returns the mxCellMarker used in marker.
mxEdgeHandler.prototype.validateConnection = function( source, target )
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 mxGraph.getEdgeValidationError.
source | mxCell that represents the source terminal. |
target | mxCell that represents the target terminal. |
mxEdgeHandler.prototype.createBends = function()
Creates and returns the bends used for modifying the edge. This is typically an array of mxRectangleShapes.
mxEdgeHandler.prototype.createVirtualBends = function()
Creates and returns the bends used for modifying the edge. This is typically an array of mxRectangleShapes.
mxEdgeHandler.prototype.createHandleShape = function( index )
Creates the shape used to display the given bend. Note that the index may be null for special cases, such as when called from mxElbowEdgeHandler.createVirtualBend. Only images and rectangles should be returned if support for HTML labels with not foreign objects is required. Index if null for virtual handles.
mxEdgeHandler.prototype.initBend = function( bend, dblClick )
Helper method to initialize the given bend.
bend | mxShape that represents the bend to be initialized. |
mxEdgeHandler.prototype.mouseDown = function( sender, me )
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.
mxEdgeHandler.prototype.isSnapToTerminalsEvent = function( me )
Returns true if snapToTerminals is true and if alt is not pressed.
mxEdgeHandler.prototype.getPreviewPoints = function( pt, me )
Updates the given preview state taking into account the state of the constraint handler.
pt | mxPoint that contains the current pointer position. |
me | Optional mxMouseEvent that contains the current event. |
mxEdgeHandler.prototype.isOutlineConnectEvent = function( me )
Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
mxEdgeHandler.prototype.mouseUp = function( sender, me )
Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
mxEdgeHandler.prototype.convertPoint = function( point, gridEnabled )
Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid. Returns the given, modified point instance.
point | mxPoint to be converted. |
gridEnabled | Boolean that specifies if the grid should be applied. |
mxEdgeHandler.prototype.moveLabel = function( edgeState, x, y )
Changes the coordinates for the label of the given edge.
edge | mxCell that represents the edge. |
x | Integer that specifies the x-coordinate of the new location. |
y | Integer that specifies the y-coordinate of the new location. |
mxEdgeHandler.prototype.connect = function( edge, terminal, isSource, isClone, me )
Changes the terminal or terminal point of the given edge in the graph model.
edge | mxCell that represents the edge to be reconnected. |
terminal | mxCell that represents the new terminal. |
isSource | Boolean indicating if the new terminal is the source or target terminal. |
isClone | Boolean indicating if the new connection should be a clone of the old edge. |
me | mxMouseEvent that contains the mouse up event. |
mxEdgeHandler.prototype.isDestroyed = function()
Returns true if destroy was called.
mxEdgeHandler.prototype.destroyBends = function( bends )
Destroys all elements in bends.
Constructs an edge handler for the specified mxCellState.
function mxEdgeHandler( state )
Reference to the enclosing mxGraph.
mxEdgeHandler.prototype.graph
Reference to the mxCellState being modified.
mxEdgeHandler.prototype.state
Holds the mxTerminalMarker which is used for highlighting terminals.
mxEdgeHandler.prototype.marker
Holds the mxConstraintHandler used for drawing and highlighting constraints.
mxEdgeHandler.prototype.constraintHandler
Holds the current validation error while a connection is being changed.
mxEdgeHandler.prototype.error
Holds the mxShape that represents the preview edge.
mxEdgeHandler.prototype.shape
Holds the mxShapes that represent the points.
mxEdgeHandler.prototype.bends
Holds the mxShape that represents the label position.
mxEdgeHandler.prototype.labelShape
Specifies if cloning by control-drag is enabled.
mxEdgeHandler.prototype.cloneEnabled
Specifies if adding bends by shift-click is enabled.
mxEdgeHandler.prototype.addEnabled
Specifies if removing bends by shift-click is enabled.
mxEdgeHandler.prototype.removeEnabled
Specifies if removing bends by double click is enabled.
mxEdgeHandler.prototype.dblClickRemoveEnabled
Specifies if removing bends by dropping them on other bends is enabled.
mxEdgeHandler.prototype.mergeRemoveEnabled
Specifies if removing bends by creating straight segments should be enabled.
mxEdgeHandler.prototype.straightRemoveEnabled
Specifies if virtual bends should be added in the center of each segments.
mxEdgeHandler.prototype.virtualBendsEnabled
Opacity to be used for virtual bends (see virtualBendsEnabled).
mxEdgeHandler.prototype.virtualBendOpacity
Specifies if the parent should be highlighted if a child cell is selected.
mxEdgeHandler.prototype.parentHighlightEnabled
Specifies if bends should be added to the graph container.
mxEdgeHandler.prototype.preferHtml
Specifies if the bounds of handles should be used for hit-detection in IE Default is true.
mxEdgeHandler.prototype.allowHandleBoundsCheck
Specifies if waypoints should snap to the routing centers of terminals.
mxEdgeHandler.prototype.snapToTerminals
Optional mxImage to be used as handles.
mxEdgeHandler.prototype.handleImage
Optional tolerance for hit-detection in getHandleForEvent.
mxEdgeHandler.prototype.tolerance
Returns the index of the handle for the given event.
mxEdgeHandler.prototype.getHandleForEvent = function( me )
Specifies if connections to the outline of a highlighted target should be enabled.
mxEdgeHandler.prototype.outlineConnect
Specifies if the label handle should be moved if it intersects with another handle.
mxEdgeHandler.prototype.manageLabelHandle
Initializes the shapes required for this edge handler.
mxEdgeHandler.prototype.init = function()
Returns an array of custom handles.
mxEdgeHandler.prototype.createCustomHandles = function()
Returns true if virtual bends should be added.
mxEdgeHandler.prototype.isVirtualBendsEnabled = function( evt )
Returns true if the given cell allows new connections to be created.
mxEdgeHandler.prototype.isCellEnabled = function( cell )
Returns true if the given event is a trigger to add a new point.
mxEdgeHandler.prototype.isAddPointEvent = function( evt )
Returns true if the given event is a trigger to remove a point.
mxEdgeHandler.prototype.isRemovePointEvent = function( evt )
Returns the list of points that defines the selection stroke.
mxEdgeHandler.prototype.getSelectionPoints = function( state )
Creates the shape used to draw the selection border.
mxEdgeHandler.prototype.createParentHighlightShape = function( bounds )
Creates the shape used to draw the selection border.
mxEdgeHandler.prototype.createSelectionShape = function( points )
Returns mxConstants.EDGE_SELECTION_COLOR.
mxEdgeHandler.prototype.getSelectionColor = function()
Defines the color to be used for the selection border of edges.
EDGE_SELECTION_COLOR: '#00FF00'
Returns mxConstants.EDGE_SELECTION_STROKEWIDTH.
mxEdgeHandler.prototype.getSelectionStrokeWidth = function()
Defines the strokewidth to be used for edge selections.
EDGE_SELECTION_STROKEWIDTH: 1
Returns mxConstants.EDGE_SELECTION_DASHED.
mxEdgeHandler.prototype.isSelectionDashed = function()
Returns true if the given cell is connectable.
mxEdgeHandler.prototype.isConnectableCell = function( cell )
Creates and returns the mxCellMarker used in marker.
mxEdgeHandler.prototype.getCellAt = function( x, y )
Creates and returns the mxCellMarker used in marker.
mxEdgeHandler.prototype.createMarker = function()
Returns the error message or an empty string if the connection for the given source, target pair is not valid.
mxEdgeHandler.prototype.validateConnection = function( source, target )
Creates and returns the bends used for modifying the edge.
mxEdgeHandler.prototype.createBends = function()
Creates and returns the bends used for modifying the edge.
mxEdgeHandler.prototype.createVirtualBends = function()
Creates the shape used to display the given bend.
mxEdgeHandler.prototype.isHandleEnabled = function( index )
Returns true if the handle at the given index is visible.
mxEdgeHandler.prototype.isHandleVisible = function( index )
Creates the shape used to display the given bend.
mxEdgeHandler.prototype.createHandleShape = function( index )
Creates the shape used to display the the label handle.
mxEdgeHandler.prototype.createLabelHandleShape = function()
Helper method to initialize the given bend.
mxEdgeHandler.prototype.initBend = function( bend, dblClick )
Returns true if the given event allows virtual bends to be added.
mxEdgeHandler.prototype.isAddVirtualBendEvent = function( me )
Returns true if the given event allows custom handles to be changed.
mxEdgeHandler.prototype.isCustomHandleEvent = function( me )
Handles the event by checking if a special element of the handler was clicked, in which case the index parameter is non-null.
mxEdgeHandler.prototype.mouseDown = function( sender, me )
Starts the handling of the mouse gesture.
mxEdgeHandler.prototype.start = function( x, y, index )
Returns a clone of the current preview state for the given point and terminal.
mxEdgeHandler.prototype.clonePreviewState = function( point, terminal )
Returns the tolerance for the guides.
mxEdgeHandler.prototype.getSnapToTerminalTolerance = function()
Hook for subclassers do show details while the handler is active.
mxEdgeHandler.prototype.updateHint = function( me, point )
Hooks for subclassers to hide details when the handler gets inactive.
mxEdgeHandler.prototype.removeHint = function()
Hook for rounding the unscaled width or height.
mxEdgeHandler.prototype.roundLength = function( length )
Returns true if snapToTerminals is true and if alt is not pressed.
mxEdgeHandler.prototype.isSnapToTerminalsEvent = function( me )
Returns the point for the given event.
mxEdgeHandler.prototype.getPointForEvent = function( me )
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeHandler.prototype.getPreviewTerminalState = function( me )
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeHandler.prototype.getPreviewPoints = function( pt, me )
Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
mxEdgeHandler.prototype.isOutlineConnectEvent = function( me )
Updates the given preview state taking into account the state of the constraint handler.
mxEdgeHandler.prototype.updatePreviewState = function( edge, point, terminalState, me, outline )
Handles the event by updating the preview.
mxEdgeHandler.prototype.mouseMove = function( sender, me )
Handles the event to applying the previewed changes on the edge by using moveLabel, connect or changePoints.
mxEdgeHandler.prototype.mouseUp = function( sender, me )
Changes the coordinates for the label of the given edge.
mxEdgeHandler.prototype.moveLabel = function( edgeState, x, y )
Changes the terminal or terminal point of the given edge in the graph model.
mxEdgeHandler.prototype.connect = function( edge, terminal, isSource, isClone, me )
Changes the control points of the given edge in the graph model.
mxEdgeHandler.prototype.changePoints = function( edge, points, clone )
Resets the state of this handler.
mxEdgeHandler.prototype.reset = function()
Sets the color of the preview to the given value.
mxEdgeHandler.prototype.setPreviewColor = function( color )
Converts the given point in-place from screen to unscaled, untranslated graph coordinates and applies the grid.
mxEdgeHandler.prototype.convertPoint = function( point, gridEnabled )
Changes the terminal point of the given edge.
mxEdgeHandler.prototype.changeTerminalPoint = function( edge, point, isSource, clone )
Adds a control point for the given state and event.
mxEdgeHandler.prototype.addPoint = function( state, evt )
Adds a control point at the given point.
mxEdgeHandler.prototype.addPointAt = function( state, x, y )
Removes the control point at the given index from the given state.
mxEdgeHandler.prototype.removePoint = function( state, index )
Returns the fillcolor for the handle at the given index.
mxEdgeHandler.prototype.getHandleFillColor = function( index )
Redraws the preview, and the bends- and label control points.
mxEdgeHandler.prototype.redraw = function( ignoreHandles )
Redraws the handles.
mxEdgeHandler.prototype.redrawHandles = function()
Returns true if the given custom handle is visible.
mxEdgeHandler.prototype.isCustomHandleVisible = function( handle )
Updates and redraws the inner bends.
mxEdgeHandler.prototype.redrawInnerBends = function( p0, pe )
Checks if the label handle intersects the given bounds and moves it if it intersects.
mxEdgeHandler.prototype.checkLabelHandle = function( b )
Redraws the preview.
mxEdgeHandler.prototype.drawPreview = function()
Refreshes the bends of this handler.
mxEdgeHandler.prototype.refresh = function()
Returns true if destroy was called.
mxEdgeHandler.prototype.isDestroyed = function()
Destroys the handler and all its resources and DOM nodes.
mxEdgeHandler.prototype.destroy = function()
Destroys all elements in bends.
mxEdgeHandler.prototype.destroyBends = function( bends )
Creates a new handler for the given cell state.
mxGraph.prototype.createHandler = function( state )
Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
mxGraph.prototype.getEdgeValidationError = function( edge, source, target )
Creates a virtual bend that supports double clicking and calls mxGraph.flipEdge.
mxElbowEdgeHandler.prototype.createVirtualBend = function( dblClickHandler )