Graph event handler that creates new connections. Uses <mxTerminalMarker> for finding and highlighting the source and target vertices and factoryMethod to create the edge instance. This handler is built-into <mxGraph.connectionHandler> and enabled using mxGraph.setConnectable.
new mxConnectionHandler(graph, function(source, target, style)
{
edge = new mxCell('', new mxGeometry());
edge.setEdge(true);
edge.setStyle(style);
edge.geometry.relative = true;
return edge;
});Here is an alternative solution that just sets a specific user object for new edges by overriding insertEdge.
mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)
{
value = 'Test';
return mxConnectionHandlerInsertEdge.apply(this, arguments);
};This handler uses mxTerminalMarker to find the source and target cell for the new connection and creates a new edge using connect. The new edge is created using createEdge which in turn uses factoryMethod or creates a new default edge.
The handler uses a “highlight-paradigm” for indicating if a cell is being used as a source or target terminal, as seen in other diagramming products. In order to allow both, moving and connecting cells at the same time, mxConstants.DEFAULT_HOTSPOT is used in the handler to determine the hotspot of a cell, that is, the region of the cell which is used to trigger a new connection. The constant is a value between 0 and 1 that specifies the amount of the width and height around the center to be used for the hotspot of a cell and its default value is 0.5. In addition, mxConstants.MIN_HOTSPOT_SIZE defines the minimum number of pixels for the width and height of the hotspot.
This solution, while standards compliant, may be somewhat confusing because there is no visual indicator for the hotspot and the highlight is seen to switch on and off while the mouse is being moved in and out. Furthermore, this paradigm does not allow to create different connections depending on the highlighted hotspot as there is only one hotspot per cell and it normally does not allow cells to be moved and connected at the same time as there is no clear indication of the connectable area of the cell.
To come across these issues, the handle has an additional createIcons hook with a default implementation that allows to create one icon to be used to trigger new connections. If this icon is specified, then new connections can only be created if the image is clicked while the cell is being highlighted. The createIcons hook may be overridden to create more than one mxImageShape for creating new connections, but the default implementation supports one image and is used as follows:
In order to display the “connect image” whenever the mouse is over the cell, an DEFAULT_HOTSPOT of 1 should be used:
mxConstants.DEFAULT_HOTSPOT = 1;
In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:
mxConstants.HIGHLIGHT_COLOR = null;
To install the image, the connectImage field of the mxConnectionHandler must be assigned a new mxImage instance:
mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);This will use the green-dot.gif with a width and height of 14 pixels as the image to trigger new connections. In createIcons the icon field of the handler will be set in order to remember the icon that has been clicked for creating the new connection. This field will be available under selectedIcon in the connect method, which may be overridden to take the icon that triggered the new connection into account. This is useful if more than one icon may be used to create a connection.
| mxConnectionHandler | Graph event handler that creates new connections. |
| Events | |
| mxEvent. | Fires when a new connection is being created by the user. |
| mxEvent. | Fires between begin- and endUpdate in connect. |
| mxEvent. | Fires when the reset method is invoked. |
| mxConnectionHandler | Constructs an event handler that connects vertices using the specified factory method to create the new edges. |
| graph | Reference to the enclosing mxGraph. |
| factoryMethod | Function that is used for creating new edges. |
| moveIconFront | Specifies if icons should be displayed inside the graph container instead of the overlay pane. |
| moveIconBack | Specifies if icons should be moved to the back of the overlay pane. |
| connectImage | mxImage that is used to trigger the creation of a new connection. |
| targetConnectImage | Specifies if the connect icon should be centered on the target state while connections are being previewed. |
| enabled | Specifies if events are handled. |
| select | Specifies if new edges should be selected. |
| createTarget | Specifies if createTargetVertex should be called if no target was under the mouse for the new connection. |
| marker | Holds the <mxTerminalMarker> used for finding source and target cells. |
| constraintHandler | Holds the mxConstraintHandler used for drawing and highlighting constraints. |
| error | Holds the current validation error while connections are being created. |
| waypointsEnabled | Specifies if single clicks should add waypoints on the new edge. |
| ignoreMouseDown | Specifies if the connection handler should ignore the state of the mouse button when highlighting the source. |
| first | Holds the mxPoint where the mouseDown took place while the handler is active. |
| connectIconOffset | Holds the offset for connect icons during connection preview. |
| edgeState | Optional mxCellState that represents the preview edge while the handler is active. |
| changeHandler | Holds the change event listener for later removal. |
| drillHandler | Holds the drill event listener for later removal. |
| mouseDownCounter | Counts the number of mouseDown events since the start. |
| movePreviewAway | Switch to enable moving the preview away from the mousepointer. |
| outlineConnect | Specifies if connections to the outline of a highlighted target should be enabled. |
| livePreview | Specifies if the actual shape of the edge state should be used for the preview. |
| cursor | Specifies the cursor to be used while the handler is active. |
| insertBeforeSource | Specifies if new edges should be inserted before the source vertex in the cell hierarchy. |
| isEnabled | Returns true if events are handled. |
| setEnabled | Enables or disables event handling. |
| isInsertBefore | Returns insertBeforeSource for non-loops and false for loops. |
| isCreateTarget | Returns createTarget. |
| setCreateTarget | Sets createTarget. |
| createShape | Creates the preview shape for new connections. |
| init | Initializes the shapes required for this connection handler. |
| isConnectableCell | Returns true if the given cell is connectable. |
| createMarker | Creates and returns the mxCellMarker used in marker. |
| start | Starts a new connection for the given state and coordinates. |
| isConnecting | Returns true if the source terminal has been clicked and a new connection is currently being previewed. |
| isValidSource | Returns mxGraph.isValidSource for the given source terminal. |
| isValidTarget | Returns true. |
| validateConnection | Returns the error message or an empty string if the connection for the given source target pair is not valid. |
| getConnectImage | Hook to return the mxImage used for the connection icon of the given mxCellState. |
| isMoveIconToFrontForState | Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront. |
| createIcons | Creates the array mxImageShapes that represent the connect icons for the given mxCellState. |
| redrawIcons | Redraws the given array of mxImageShapes. |
| redrawIcons | Redraws the given array of mxImageShapes. |
| destroyIcons | Destroys the connect icons and resets the respective state. |
| isStartEvent | Returns true if the given mouse down event should start this handler. |
| mouseDown | Handles the event by initiating a new connection. |
| isImmediateConnectSource | Returns true if a tap on the given source state should immediately start connecting. |
| createEdgeState | Hook to return an mxCellState which may be used during the preview. |
| isOutlineConnectEvent | Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed. |
| updateCurrentState | Updates the current state for a given mouse move event by using the marker. |
| convertWaypoint | Converts the given point from screen coordinates to model coordinates. |
| snapToPreview | Called to snap the given point to the current preview. |
| mouseMove | Handles the event by updating the preview edge or by highlighting a possible source or target terminal. |
| updateEdgeState | Updates edgeState. |
| getTargetPerimeterPoint | Returns the perimeter point for the given target state. |
| getSourcePerimeterPoint | Hook to update the icon position(s) based on a mouseOver event. |
| updateIcons | Hook to update the icon position(s) based on a mouseOver event. |
| isStopEvent | Returns true if the given mouse up event should stop this handler. |
| addWaypoint | Adds the waypoint for the given event to <waypoints>. |
| mouseUp | Handles the event by inserting the new connection. |
| reset | Resets the state of this handler. |
| drawPreview | Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth. |
| getEdgeColor | Returns the color used to draw the preview edge. |
| getEdgeColor | Returns the color used to draw the preview edge. |
| getEdgeWidth | Returns the width used to draw the preview edge. |
| connect | Connects the given source and target using a new edge. |
| selectCells | Selects the given edge after adding a new connection. |
| insertEdge | Creates, inserts and returns the new edge for the given parameters. |
| createTargetVertex | Hook method for creating new vertices on the fly if no target was under the mouse. |
| getAlignmentTolerance | Returns the tolerance for aligning new targets to sources. |
| createEdge | Creates and returns a new edge using factoryMethod if one exists. |
| destroy | Destroys the handler and all its resources and DOM nodes. |
Fires between begin- and endUpdate in connect. The <code>cell</code> property contains the inserted edge, the <code>event</code> and <code>target</code> properties contain the respective arguments that were passed to connect (where target corresponds to the dropTarget argument). Finally, the <code>terminal</code> property corresponds to the target argument in connect or the clone of the source terminal if createTarget is enabled.
Note that the target is the cell under the mouse where the mouse button was released. Depending on the logic in the handler, this doesn’t necessarily have to be the target of the inserted edge. To print the source, target or any optional ports IDs that the edge is connected to, the following code can be used. To get more details about the actual connection point, mxGraph.getConnectionConstraint can be used. To resolve the port IDs, use mxGraphModel.getCell.
graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt)
{
var edge = evt.getProperty('cell');
var source = graph.getModel().getTerminal(edge, true);
var target = graph.getModel().getTerminal(edge, false);
var style = graph.getCellStyle(edge);
var sourcePortId = style[mxConstants.STYLE_SOURCE_PORT];
var targetPortId = style[mxConstants.STYLE_TARGET_PORT];
mxLog.show();
mxLog.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
});Fires when the reset method is invoked.
function mxConnectionHandler( graph, factoryMethod )
Constructs an event handler that connects vertices using the specified factory method to create the new edges. Modify <mxConstants.ACTIVE_REGION> to setup the region on a cell which triggers the creation of a new connection or use connect icons as explained above.
| graph | Reference to the enclosing mxGraph. |
| factoryMethod | Optional function to create the edge. The function takes the source and target mxCell as the first and second argument and an optional cell style from the preview as the third argument. It returns the mxCell that represents the new edge. |
mxConnectionHandler.prototype.graph
Reference to the enclosing mxGraph.
mxConnectionHandler.prototype.factoryMethod
Function that is used for creating new edges. The function takes the source and target mxCell as the first and second argument and returns a new mxCell that represents the edge. This is used in createEdge.
mxConnectionHandler.prototype.moveIconFront
Specifies if icons should be displayed inside the graph container instead of the overlay pane. This is used for HTML labels on vertices which hide the connect icon. This has precendence over moveIconBack when set to true. Default is false.
mxConnectionHandler.prototype.connectImage
mxImage that is used to trigger the creation of a new connection. This is used in createIcons. Default is null.
mxConnectionHandler.prototype.createTarget
Specifies if createTargetVertex should be called if no target was under the mouse for the new connection. Setting this to true means the connection will be drawn as valid if no target is under the mouse, and createTargetVertex will be called before the connection is created between the source cell and the newly created vertex in createTargetVertex, which can be overridden to create a new target. Default is false.
mxConnectionHandler.prototype.constraintHandler
Holds the mxConstraintHandler used for drawing and highlighting constraints.
mxConnectionHandler.prototype.first
Holds the mxPoint where the mouseDown took place while the handler is active.
mxConnectionHandler.prototype.connectIconOffset
Holds the offset for connect icons during connection preview. Default is mxPoint(0, mxConstants.TOOLTIP_VERTICAL_OFFSET). Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.
mxConnectionHandler.prototype.edgeState
Optional mxCellState that represents the preview edge while the handler is active. This is created in createEdgeState.
mxConnectionHandler.prototype.movePreviewAway
Switch to enable moving the preview away from the mousepointer. This is required in browsers where the preview cannot be made transparent to events and if the built-in hit detection on the HTML elements in the page should be used. Default is the value of mxClient.IS_VML.
mxConnectionHandler.prototype.livePreview
Specifies if the actual shape of the edge state should be used for the preview. Default is false. (Ignored if no edge state is created in createEdgeState.)
mxConnectionHandler.prototype.isEnabled = function()
Returns true if events are handled. This implementation returns enabled.
mxConnectionHandler.prototype.setEnabled = function( enabled )
Enables or disables event handling. This implementation updates enabled.
| enabled | Boolean that specifies the new enabled state. |
mxConnectionHandler.prototype.isInsertBefore = function( edge, source, target, evt, dropTarget )
Returns insertBeforeSource for non-loops and false for loops.
| edge | mxCell that represents the edge to be inserted. |
| source | mxCell that represents the source terminal. |
| target | mxCell that represents the target terminal. |
| evt | Mousedown event of the connect gesture. |
| dropTarget | mxCell that represents the cell under the mouse when it was released. |
mxConnectionHandler.prototype.isCreateTarget = function( evt )
Returns createTarget.
| evt | Current active native pointer event. |
mxConnectionHandler.prototype.setCreateTarget = function( value )
Sets createTarget.
mxConnectionHandler.prototype.createMarker = function()
Creates and returns the mxCellMarker used in marker.
mxConnectionHandler.prototype.isValidSource = function( cell, me )
Returns mxGraph.isValidSource for the given source terminal.
| cell | mxCell that represents the source terminal. |
| me | mxMouseEvent that is associated with this call. |
mxConnectionHandler.prototype.isValidTarget = function( cell )
Returns true. The call to mxGraph.isValidTarget is implicit by calling mxGraph.getEdgeValidationError in validateConnection. This is an additional hook for disabling certain targets in this specific handler.
| cell | mxCell that represents the target terminal. |
mxConnectionHandler.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. |
mxConnectionHandler.prototype.getConnectImage = function( state )
Hook to return the mxImage used for the connection icon of the given mxCellState. This implementation returns connectImage.
| state | mxCellState whose connect image should be returned. |
mxConnectionHandler.prototype.isMoveIconToFrontForState = function( state )
Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
| state | mxCellState whose connect icons should be returned. |
mxConnectionHandler.prototype.createIcons = function( state )
Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
| state | mxCellState whose connect icons should be returned. |
mxConnectionHandler.prototype.redrawIcons = function( icons, state )
Redraws the given array of mxImageShapes.
| icons | Optional array of mxImageShapes to be redrawn. |
Redraws the given array of mxImageShapes.
| icons | Optional array of mxImageShapes to be redrawn. |
mxConnectionHandler.prototype.isStartEvent = function( me )
Returns true if the given mouse down event should start this handler. The This implementation returns true if the event does not force marquee selection, and the currentConstraint and currentFocus of the constraintHandler are not null, or <previous> and error are not null and <icons> is null or <icons> and <icon> are not null.
mxConnectionHandler.prototype.createEdgeState = function( me )
Hook to return an mxCellState which may be used during the preview. This implementation returns null.
graph.connectionHandler.createEdgeState = function(me)
{
var edge = graph.createEdge(null, null, null, null, null, 'edgeStyle=elbowEdgeStyle');
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};
mxConnectionHandler.prototype.isOutlineConnectEvent = function( me )
Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
mxConnectionHandler.prototype.updateCurrentState = function( me, point )
Updates the current state for a given mouse move event by using the marker.
mxConnectionHandler.prototype.updateEdgeState = function( current, constraint )
Updates edgeState.
mxConnectionHandler.prototype.getTargetPerimeterPoint = function( state, me )
Returns the perimeter point for the given target state.
| state | mxCellState that represents the target cell state. |
| me | mxMouseEvent that represents the mouse move. |
mxConnectionHandler.prototype.getSourcePerimeterPoint = function( state, next, me )
Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.
| state | mxCellState that represents the target cell state. |
| next | mxPoint that represents the next point along the previewed edge. |
| me | mxMouseEvent that represents the mouse move. |
mxConnectionHandler.prototype.updateIcons = function( state, icons, me )
Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.
| state | mxCellState under the mouse. |
| icons | Array of currently displayed icons. |
| me | mxMouseEvent that contains the mouse event. |
mxConnectionHandler.prototype.isStopEvent = function( me )
Returns true if the given mouse up event should stop this handler. The connection will be created if error is null. Note that this is only called if waypointsEnabled is true. This implemtation returns true if there is a cell state in the given event.
mxConnectionHandler.prototype.drawPreview = function()
Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
mxConnectionHandler.prototype.connect = function( source, target, evt, dropTarget )
Connects the given source and target using a new edge. This implementation uses createEdge to create the edge.
| source | mxCell that represents the source terminal. |
| target | mxCell that represents the target terminal. |
| evt | Mousedown event of the connect gesture. |
| dropTarget | mxCell that represents the cell under the mouse when it was released. |
mxConnectionHandler.prototype.insertEdge = function( parent, id, value, source, target, style )
Creates, inserts and returns the new edge for the given parameters. This implementation does only use createEdge if factoryMethod is defined, otherwise mxGraph.insertEdge will be used.
mxConnectionHandler.prototype.createTargetVertex = function( evt, source )
Hook method for creating new vertices on the fly if no target was under the mouse. This is only called if createTarget is true and returns null.
| evt | Mousedown event of the connect gesture. |
| source | mxCell that represents the source terminal. |
mxConnectionHandler.prototype.createEdge = function( value, source, target, style )
Creates and returns a new edge using factoryMethod if one exists. If no factory method is defined, then a new default edge is returned. The source and target arguments are informal, the actual connection is setup later by the caller of this function.
| value | Value to be used for creating the edge. |
| source | mxCell that represents the source terminal. |
| target | mxCell that represents the target terminal. |
| style | Optional style from the preview edge. |
mxConnectionHandler.prototype.destroy = function()
Destroys the handler and all its resources and DOM nodes. This should be called on all instances. It is called automatically for the built-in instance created for each mxGraph.
Connects the given source and target using a new edge.
mxConnectionHandler.prototype.connect = function( source, target, evt, dropTarget )
Resets the state of this handler.
mxConnectionHandler.prototype.reset = function()
Constructs an event handler that connects vertices using the specified factory method to create the new edges.
function mxConnectionHandler( graph, factoryMethod )
Reference to the enclosing mxGraph.
mxConnectionHandler.prototype.graph
Function that is used for creating new edges.
mxConnectionHandler.prototype.factoryMethod
Specifies if icons should be displayed inside the graph container instead of the overlay pane.
mxConnectionHandler.prototype.moveIconFront
Specifies if icons should be moved to the back of the overlay pane.
mxConnectionHandler.prototype.moveIconBack
mxImage that is used to trigger the creation of a new connection.
mxConnectionHandler.prototype.connectImage
Specifies if the connect icon should be centered on the target state while connections are being previewed.
mxConnectionHandler.prototype.targetConnectImage
Specifies if events are handled.
mxConnectionHandler.prototype.enabled
Specifies if new edges should be selected.
mxConnectionHandler.prototype.select
Specifies if createTargetVertex should be called if no target was under the mouse for the new connection.
mxConnectionHandler.prototype.createTarget
Hook method for creating new vertices on the fly if no target was under the mouse.
mxConnectionHandler.prototype.createTargetVertex = function( evt, source )
Holds the mxTerminalMarker used for finding source and target cells.
mxConnectionHandler.prototype.marker
Holds the mxConstraintHandler used for drawing and highlighting constraints.
mxConnectionHandler.prototype.constraintHandler
Holds the current validation error while connections are being created.
mxConnectionHandler.prototype.error
Specifies if single clicks should add waypoints on the new edge.
mxConnectionHandler.prototype.waypointsEnabled
Specifies if the connection handler should ignore the state of the mouse button when highlighting the source.
mxConnectionHandler.prototype.ignoreMouseDown
Holds the mxPoint where the mouseDown took place while the handler is active.
mxConnectionHandler.prototype.first
Holds the offset for connect icons during connection preview.
mxConnectionHandler.prototype.connectIconOffset
Optional mxCellState that represents the preview edge while the handler is active.
mxConnectionHandler.prototype.edgeState
Holds the change event listener for later removal.
mxConnectionHandler.prototype.changeHandler
Holds the drill event listener for later removal.
mxConnectionHandler.prototype.drillHandler
Counts the number of mouseDown events since the start.
mxConnectionHandler.prototype.mouseDownCounter
Switch to enable moving the preview away from the mousepointer.
mxConnectionHandler.prototype.movePreviewAway
Specifies if connections to the outline of a highlighted target should be enabled.
mxConnectionHandler.prototype.outlineConnect
Specifies if the actual shape of the edge state should be used for the preview.
mxConnectionHandler.prototype.livePreview
Specifies the cursor to be used while the handler is active.
mxConnectionHandler.prototype.cursor
Specifies if new edges should be inserted before the source vertex in the cell hierarchy.
mxConnectionHandler.prototype.insertBeforeSource
Returns true if events are handled.
mxConnectionHandler.prototype.isEnabled = function()
Enables or disables event handling.
mxConnectionHandler.prototype.setEnabled = function( enabled )
Returns insertBeforeSource for non-loops and false for loops.
mxConnectionHandler.prototype.isInsertBefore = function( edge, source, target, evt, dropTarget )
Returns createTarget.
mxConnectionHandler.prototype.isCreateTarget = function( evt )
Sets createTarget.
mxConnectionHandler.prototype.setCreateTarget = function( value )
Creates the preview shape for new connections.
mxConnectionHandler.prototype.createShape = function()
Initializes the shapes required for this connection handler.
mxConnectionHandler.prototype.init = function()
Returns true if the given cell is connectable.
mxConnectionHandler.prototype.isConnectableCell = function( cell )
Creates and returns the mxCellMarker used in marker.
mxConnectionHandler.prototype.createMarker = function()
Starts a new connection for the given state and coordinates.
mxConnectionHandler.prototype.start = function( state, x, y, edgeState )
Returns true if the source terminal has been clicked and a new connection is currently being previewed.
mxConnectionHandler.prototype.isConnecting = function()
Returns mxGraph.isValidSource for the given source terminal.
mxConnectionHandler.prototype.isValidSource = function( cell, me )
Returns true if the given cell is a valid source for new connections.
mxGraph.prototype.isValidSource = function( cell )
Returns true.
mxConnectionHandler.prototype.isValidTarget = function( cell )
Returns the error message or an empty string if the connection for the given source target pair is not valid.
mxConnectionHandler.prototype.validateConnection = function( source, target )
Hook to return the mxImage used for the connection icon of the given mxCellState.
mxConnectionHandler.prototype.getConnectImage = function( state )
Returns true if the state has a HTML label in the graph’s container, otherwise it returns moveIconFront.
mxConnectionHandler.prototype.isMoveIconToFrontForState = function( state )
Creates the array mxImageShapes that represent the connect icons for the given mxCellState.
mxConnectionHandler.prototype.createIcons = function( state )
Redraws the given array of mxImageShapes.
mxConnectionHandler.prototype.redrawIcons = function( icons, state )
Destroys the connect icons and resets the respective state.
mxConnectionHandler.prototype.destroyIcons = function()
Returns true if the given mouse down event should start this handler.
mxConnectionHandler.prototype.isStartEvent = function( me )
Handles the event by initiating a new connection.
mxConnectionHandler.prototype.mouseDown = function( sender, me )
Returns true if a tap on the given source state should immediately start connecting.
mxConnectionHandler.prototype.isImmediateConnectSource = function( state )
Hook to return an mxCellState which may be used during the preview.
mxConnectionHandler.prototype.createEdgeState = function( me )
Returns true if outlineConnect is true and the source of the event is the outline shape or shift is pressed.
mxConnectionHandler.prototype.isOutlineConnectEvent = function( me )
Updates the current state for a given mouse move event by using the marker.
mxConnectionHandler.prototype.updateCurrentState = function( me, point )
Converts the given point from screen coordinates to model coordinates.
mxConnectionHandler.prototype.convertWaypoint = function( point )
Called to snap the given point to the current preview.
mxConnectionHandler.prototype.snapToPreview = function( me, point )
Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
mxConnectionHandler.prototype.mouseMove = function( sender, me )
Updates edgeState.
mxConnectionHandler.prototype.updateEdgeState = function( current, constraint )
Returns the perimeter point for the given target state.
mxConnectionHandler.prototype.getTargetPerimeterPoint = function( state, me )
Hook to update the icon position(s) based on a mouseOver event.
mxConnectionHandler.prototype.getSourcePerimeterPoint = function( state, next, me )
Hook to update the icon position(s) based on a mouseOver event.
mxConnectionHandler.prototype.updateIcons = function( state, icons, me )
Returns true if the given mouse up event should stop this handler.
mxConnectionHandler.prototype.isStopEvent = function( me )
Adds the waypoint for the given event to waypoints.
mxConnectionHandler.prototype.addWaypointForEvent = function( me )
Handles the event by inserting the new connection.
mxConnectionHandler.prototype.mouseUp = function( sender, me )
Redraws the preview edge using the color and width returned by getEdgeColor and getEdgeWidth.
mxConnectionHandler.prototype.drawPreview = function()
Returns the width used to draw the preview edge.
mxConnectionHandler.prototype.getEdgeWidth = function( valid )
Selects the given edge after adding a new connection.
mxConnectionHandler.prototype.selectCells = function( edge, target )
Creates, inserts and returns the new edge for the given parameters.
mxConnectionHandler.prototype.insertEdge = function( parent, id, value, source, target, style )
Returns the tolerance for aligning new targets to sources.
mxConnectionHandler.prototype.getAlignmentTolerance = function( evt )
Creates and returns a new edge using factoryMethod if one exists.
mxConnectionHandler.prototype.createEdge = function( value, source, target, style )
Destroys the handler and all its resources and DOM nodes.
mxConnectionHandler.prototype.destroy = function()
Specifies if the graph should allow new connections.
mxGraph.prototype.setConnectable = function( connectable )
Returns an mxConnectionConstraint that describes the given connection point.
mxGraph.prototype.getConnectionConstraint = function( edge, terminal, source )
Returns the mxCell for the specified Id or null if no cell can be found for the given Id.
mxGraphModel.prototype.getCell = function( id )
True if the browser supports VML.
IS_VML: navigator.appName.toUpperCase()
Returns isValidSource for the given cell.
mxGraph.prototype.isValidTarget = function( cell )
Returns the validation error message to be displayed when inserting or changing an edges’ connectivity.
mxGraph.prototype.getEdgeValidationError = function( edge, source, target )
Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge.
mxGraph.prototype.insertEdge = function( parent, id, value, source, target, style )