/**

* $Id: mxConnectionHandler.js,v 1.221 2013/04/16 07:34:54 gaudenz Exp $

* Copyright (c) 2006-2010, JGraph Ltd

*/

/**

* Class: mxConnectionHandler

*

* 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>.

*

* Example:

*

* (code)

* new mxConnectionHandler(graph, function(source, target, style)

* {

* edge = new mxCell('', new mxGeometry());

* edge.setEdge(true);

* edge.setStyle(style);

* edge.geometry.relative = true;

* return edge;

* });

* (end)

*

* Here is an alternative solution that just sets a specific user object for

* new edges by overriding <insertEdge>.

*

* (code)

* mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;

* mxConnectionHandler.prototype.insertEdge = function(parent, id, value, source, target, style)

* {

* value = 'Test';

*

* return mxConnectionHandlerInsertEdge.apply(this, arguments);

* };

* (end)

*

* Using images to trigger connections:

*

* 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 MS Visio and other 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:

*

* (code)

* mxConstants.DEFAULT_HOTSPOT = 1;

* (end)

*

* In order to avoid confusion with the highlighting, the highlight color

* should not be used with a connect image:

*

* (code)

* mxConstants.HIGHLIGHT_COLOR = null;

* (end)

*

* To install the image, the connectImage field of the mxConnectionHandler must

* be assigned a new <mxImage> instance:

*

* (code)

* mxConnectionHandler.prototype.connectImage = new mxImage('images/green-dot.gif', 14, 14);

* (end)

*

* 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.

*

* Group: Events

*

* Event: mxEvent.START

*

* Fires when a new connection is being created by the user. The <code>state</code>

* property contains the state of the source cell.

*

* Event: mxEvent.CONNECT

*

* 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).

*

* 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>.

*

* (code)

* 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);

* });

* (end)

*

* Event: mxEvent.RESET

*

* Fires when the <reset> method is invoked.

*

* Constructor: mxConnectionHandler

*

* 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.

*

* Parameters:

*

* 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.

*/

function mxConnectionHandler(graph, factoryMethod)

{

if (graph != null)

{

this.graph = graph;

this.factoryMethod = factoryMethod;

this.init();

}

};

/**

* Extends mxEventSource.

*/

mxConnectionHandler.prototype = new mxEventSource();

mxConnectionHandler.prototype.constructor = mxConnectionHandler;

/**

* Variable: graph

*

* Reference to the enclosing <mxGraph>.

*/

mxConnectionHandler.prototype.graph = null;

/**

* Variable: 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.factoryMethod = true;

/**

* Variable: 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.moveIconFront = false;

/**

* Variable: moveIconBack

*

* Specifies if icons should be moved to the back of the overlay pane. This can

* be set to true if the icons of the connection handler conflict with other

* handles, such as the vertex label move handle. Default is false.

*/

mxConnectionHandler.prototype.moveIconBack = false;

/**

* Variable: connectImage

*

* <mxImage> that is used to trigger the creation of a new connection. This

* is used in <createIcons>. Default is null.

*/

mxConnectionHandler.prototype.connectImage = null;

/**

* Variable: targetConnectImage

*

* Specifies if the connect icon should be centered on the target state

* while connections are being previewed. Default is false.

*/

mxConnectionHandler.prototype.targetConnectImage = false;

/**

* Variable: enabled

*

* Specifies if events are handled. Default is true.

*/

mxConnectionHandler.prototype.enabled = true;

/**

* Variable: select

*

* Specifies if new edges should be selected. Default is true.

*/

mxConnectionHandler.prototype.select = true;

/**

* Variable: 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.createTarget = false;

/**

* Variable: marker

*

* Holds the <mxTerminalMarker> used for finding source and target cells.

*/

mxConnectionHandler.prototype.marker = null;

/**

* Variable: constraintHandler

*

* Holds the <mxConstraintHandler> used for drawing and highlighting

* constraints.

*/

mxConnectionHandler.prototype.constraintHandler = null;

/**

* Variable: error

*

* Holds the current validation error while connections are being created.

*/

mxConnectionHandler.prototype.error = null;

/**

* Variable: waypointsEnabled

*

* Specifies if single clicks should add waypoints on the new edge. Default is

* false.

*/

mxConnectionHandler.prototype.waypointsEnabled = false;

/**

* Variable: tapAndHoldEnabled

*

* Specifies if tap and hold should be used for starting connections on touch-based

* devices. Default is true.

*/

mxConnectionHandler.prototype.tapAndHoldEnabled = true;

/**

* Variable: tapAndHoldDelay

*

* Specifies the time for a tap and hold. Default is 500 ms.

*/

mxConnectionHandler.prototype.tapAndHoldDelay = 500;

/**

* Variable: tapAndHoldInProgress

*

* True if the timer for tap and hold events is running.

*/

mxConnectionHandler.prototype.tapAndHoldInProgress = false;

/**

* Variable: tapAndHoldValid

*

* True as long as the timer is running and the touch events

* stay within the given <tapAndHoldTolerance>.

*/

mxConnectionHandler.prototype.tapAndHoldValid = false;

/**

* Variable: tapAndHoldTolerance

*

* Specifies the tolerance for a tap and hold. Default is 4 pixels.

*/

mxConnectionHandler.prototype.tapAndHoldTolerance = 4;

/**

* Variable: initialTouchX

*

* Holds the x-coordinate of the intial touch event for tap and hold.

*/

mxConnectionHandler.prototype.initialTouchX = 0;

/**

* Variable: initialTouchY

*

* Holds the y-coordinate of the intial touch event for tap and hold.

*/

mxConnectionHandler.prototype.initialTouchY = 0;

/**

* Variable: ignoreMouseDown

*

* Specifies if the connection handler should ignore the state of the mouse

* button when highlighting the source. Default is false, that is, the

* handler only highlights the source if no button is being pressed.

*/

mxConnectionHandler.prototype.ignoreMouseDown = false;

/**

* Variable: first

*

* Holds the <mxPoint> where the mouseDown took place while the handler is

* active.

*/

mxConnectionHandler.prototype.first = null;

/**

* Variable: 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.connectIconOffset = new mxPoint(0, mxConstants.TOOLTIP_VERTICAL_OFFSET);

/**

* Variable: edgeState

*

* Optional <mxCellState> that represents the preview edge while the

* handler is active. This is created in <createEdgeState>.

*/

mxConnectionHandler.prototype.edgeState = null;

/**

* Variable: changeHandler

*

* Holds the change event listener for later removal.

*/

mxConnectionHandler.prototype.changeHandler = null;

/**

* Variable: drillHandler

*

* Holds the drill event listener for later removal.

*/

mxConnectionHandler.prototype.drillHandler = null;

/**

* Variable: mouseDownCounter

*

* Counts the number of mouseDown events since the start. The initial mouse

* down event counts as 1.

*/

mxConnectionHandler.prototype.mouseDownCounter = 0;

/**

* Variable: 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.movePreviewAway = mxClient.IS_VML;

/**

* Function: isEnabled

*

* Returns true if events are handled. This implementation

* returns <enabled>.

*/

mxConnectionHandler.prototype.isEnabled = function()

{

return this.enabled;

};

/**

* Function: setEnabled

*

* Enables or disables event handling. This implementation

* updates <enabled>.

*

* Parameters:

*

* enabled - Boolean that specifies the new enabled state.

*/

mxConnectionHandler.prototype.setEnabled = function(enabled)

{

this.enabled = enabled;

};

/**

* Function: isCreateTarget

*

* Returns <createTarget>.

*/

mxConnectionHandler.prototype.isCreateTarget = function()

{

return this.createTarget;

};

/**

* Function: setCreateTarget

*

* Sets <createTarget>.

*/

mxConnectionHandler.prototype.setCreateTarget = function(value)

{

this.createTarget = value;

};

/**

* Function: createShape

*

* Creates the preview shape for new connections.

*/

mxConnectionHandler.prototype.createShape = function()

{

// Creates the edge preview

var shape = new mxPolyline([], mxConstants.INVALID_COLOR);

shape.isDashed = true;

shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ?

mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG;

shape.init(this.graph.getView().getOverlayPane());

// Event-transparency

if (this.graph.dialect == mxConstants.DIALECT_SVG)

{

// Sets event transparency on the internal shapes that represent

// the actual dashed line on the screen

shape.pipe.setAttribute('style', 'pointer-events:none;');

shape.innerNode.setAttribute('style', 'pointer-events:none;');

}

else

{

// Workaround no event transparency for preview in IE

// FIXME: 3,3 pixel offset for custom hit detection in IE

var getState = mxUtils.bind(this, function(evt)

{

var pt = mxUtils.convertPoint(this.graph.container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));

return this.graph.view.getState(this.graph.getCellAt(pt.x, pt.y));

});

// Redirects events on the shape to the graph

mxEvent.redirectMouseEvents(shape.node, this.graph, getState);

}

return shape;

};

/**

* Function: init

*

* Initializes the shapes required for this connection handler. This should

* be invoked if <mxGraph.container> is assigned after the connection

* handler has been created.

*/

mxConnectionHandler.prototype.init = function()

{

this.graph.addMouseListener(this);

this.marker = this.createMarker();

this.constraintHandler = new mxConstraintHandler(this.graph);

// Redraws the icons if the graph changes

this.changeHandler = mxUtils.bind(this, function(sender)

{

if (this.iconState != null)

{

this.iconState = this.graph.getView().getState(this.iconState.cell);

}

if (this.iconState != null)

{

this.redrawIcons(this.icons, this.iconState);

this.constraintHandler.reset();

}

else

{

this.reset();

}

});

this.graph.getModel().addListener(mxEvent.CHANGE, this.changeHandler);

this.graph.getView().addListener(mxEvent.SCALE, this.changeHandler);

this.graph.getView().addListener(mxEvent.TRANSLATE, this.changeHandler);

this.graph.getView().addListener(mxEvent.SCALE_AND_TRANSLATE, this.changeHandler);

// Removes the icon if we step into/up or start editing

this.drillHandler = mxUtils.bind(this, function(sender)

{

this.reset();

});

this.graph.addListener(mxEvent.START_EDITING, this.drillHandler);

this.graph.getView().addListener(mxEvent.DOWN, this.drillHandler);

this.graph.getView().addListener(mxEvent.UP, this.drillHandler);

};

/**

* Function: isConnectableCell

*

* Returns true if the given cell is connectable. This is a hook to

* disable floating connections. This implementation returns true.

*/

mxConnectionHandler.prototype.isConnectableCell = function(cell)

{

return true;

};

/**

* Function: createMarker

*

* Creates and returns the <mxCellMarker> used in <marker>.

*/

mxConnectionHandler.prototype.createMarker = function()

{

var marker = new mxCellMarker(this.graph);

marker.hotspotEnabled = true;

// Overrides to return cell at location only if valid (so that

// there is no highlight for invalid cells)

marker.getCell = mxUtils.bind(this, function(evt, cell)

{

var cell = mxCellMarker.prototype.getCell.apply(marker, arguments);

this.error = null;

if (!this.isConnectableCell(cell))

{

return null;

}

if (cell != null)

{

if (this.isConnecting())

{

if (this.previous != null)

{

this.error = this.validateConnection(this.previous.cell, cell);

if (this.error != null && this.error.length == 0)

{

cell = null;

// Enables create target inside groups

if (this.isCreateTarget())

{

this.error = null;

}

}

}

}

else if (!this.isValidSource(cell))

{

cell = null;

}

}

else if (this.isConnecting() && !this.isCreateTarget() &&

!this.graph.allowDanglingEdges)

{

this.error = '';

}

return cell;

});

// Sets the highlight color according to validateConnection

marker.isValidState = mxUtils.bind(this, function(state)

{

if (this.isConnecting())

{

return this.error == null;

}

else

{

return mxCellMarker.prototype.isValidState.apply(marker, arguments);

}

});

// Overrides to use marker color only in highlight mode or for

// target selection

marker.getMarkerColor = mxUtils.bind(this, function(evt, state, isValid)

{

return (this.connectImage == null || this.isConnecting()) ?

mxCellMarker.prototype.getMarkerColor.apply(marker, arguments) :

null;

});

// Overrides to use hotspot only for source selection otherwise

// intersects always returns true when over a cell

marker.intersects = mxUtils.bind(this, function(state, evt)

{

if (this.connectImage != null || this.isConnecting())

{

return true;

}

return mxCellMarker.prototype.intersects.apply(marker, arguments);

});

return marker;

};

/**

* Function: start

*

* Starts a new connection for the given state and coordinates.

*/

mxConnectionHandler.prototype.start = function(state, x, y, edgeState)

{

this.previous = state;

this.first = new mxPoint(x, y);

this.edgeState = (edgeState != null) ? edgeState : this.createEdgeState(null);

// Marks the source state

this.marker.currentColor = this.marker.validColor;

this.marker.markedState = state;

this.marker.mark();

this.fireEvent(new mxEventObject(mxEvent.START, 'state', this.previous));

};

/**

* Function: isConnecting

*

* Returns true if the source terminal has been clicked and a new

* connection is currently being previewed.

*/

mxConnectionHandler.prototype.isConnecting = function()

{

return this.first != null && this.shape != null;

};

/**

* Function: isValidSource

*

* Returns <mxGraph.isValidSource> for the given source terminal.

*

* Parameters:

*

* cell - <mxCell> that represents the source terminal.

*/

mxConnectionHandler.prototype.isValidSource = function(cell)

{

return this.graph.isValidSource(cell);

};

/**

* Function: isValidTarget

*

* 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.

*

* Parameters:

*

* cell - <mxCell> that represents the target terminal.

*/

mxConnectionHandler.prototype.isValidTarget = function(cell)

{

return true;

};

/**

* Function: validateConnection

*

* 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>.

*

* Parameters:

*

* source - <mxCell> that represents the source terminal.

* target - <mxCell> that represents the target terminal.

*/

mxConnectionHandler.prototype.validateConnection = function(source, target)

{

if (!this.isValidTarget(target))

{

return '';

}

return this.graph.getEdgeValidationError(null, source, target);

};

/**

* Function: getConnectImage

*

* Hook to return the <mxImage> used for the connection icon of the given

* <mxCellState>. This implementation returns <connectImage>.

*

* Parameters:

*

* state - <mxCellState> whose connect image should be returned.

*/

mxConnectionHandler.prototype.getConnectImage = function(state)

{

return this.connectImage;

};

/**

* Function: isMoveIconToFrontForState

*

* Returns true if the state has a HTML label in the graph's container, otherwise

* it returns <moveIconFront>.

*

* Parameters:

*

* state - <mxCellState> whose connect icons should be returned.

*/

mxConnectionHandler.prototype.isMoveIconToFrontForState = function(state)

{

if (state.text != null && state.text.node.parentNode == this.graph.container)

{

return true;

}

return this.moveIconFront;

};

/**

* Function: createIcons

*

* Creates the array <mxImageShapes> that represent the connect icons for

* the given <mxCellState>.

*

* Parameters:

*

* state - <mxCellState> whose connect icons should be returned.

*/

mxConnectionHandler.prototype.createIcons = function(state)

{

var image = this.getConnectImage(state);

if (image != null && state != null)

{

this.iconState = state;

var icons = [];

// Cannot use HTML for the connect icons because the icon receives all

// mouse move events in IE, must use VML and SVG instead even if the

// connect-icon appears behind the selection border and the selection

// border consumes the events before the icon gets a chance

var bounds = new mxRectangle(0, 0, image.width, image.height);

var icon = new mxImageShape(bounds, image.src, null, null, 0);

icon.preserveImageAspect = false;

if (this.isMoveIconToFrontForState(state))

{

icon.dialect = mxConstants.DIALECT_STRICTHTML;

icon.init(this.graph.container);

}

else

{

icon.dialect = (this.graph.dialect == mxConstants.DIALECT_SVG) ?

mxConstants.DIALECT_SVG :

mxConstants.DIALECT_VML;

icon.init(this.graph.getView().getOverlayPane());

// Move the icon back in the overlay pane

if (this.moveIconBack && icon.node.previousSibling != null)

{

icon.node.parentNode.insertBefore(icon.node, icon.node.parentNode.firstChild);

}

}

icon.node.style.cursor = mxConstants.CURSOR_CONNECT;

// Events transparency

var getState = mxUtils.bind(this, function()

{

return (this.currentState != null) ? this.currentState : state;

});

// Updates the local icon before firing the mouse down event.

var mouseDown = mxUtils.bind(this, function(evt)

{

if (!mxEvent.isConsumed(evt))

{

this.icon = icon;

this.graph.fireMouseEvent(mxEvent.MOUSE_DOWN,

new mxMouseEvent(evt, getState()));

}

});

mxEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown);

icons.push(icon);

this.redrawIcons(icons, this.iconState);

return icons;

}

return null;

};

/**

* Function: redrawIcons

*

* Redraws the given array of <mxImageShapes>.

*

* Parameters:

*

* icons - Optional array of <mxImageShapes> to be redrawn.

*/

mxConnectionHandler.prototype.redrawIcons = function(icons, state)

{

if (icons != null && icons[0] != null && state != null)

{

var pos = this.getIconPosition(icons[0], state);

icons[0].bounds.x = pos.x;

icons[0].bounds.y = pos.y;

icons[0].redraw();

}

};

/**

* Function: redrawIcons

*

* Redraws the given array of <mxImageShapes>.

*

* Parameters:

*

* icons - Optional array of <mxImageShapes> to be redrawn.

*/

mxConnectionHandler.prototype.getIconPosition = function(icon, state)

{

var scale = this.graph.getView().scale;

var cx = state.getCenterX();

var cy = state.getCenterY();

if (this.graph.isSwimlane(state.cell))

{

var size = this.graph.getStartSize(state.cell);

cx = (size.width != 0) ? state.x + size.width * scale / 2 : cx;

cy = (size.height != 0) ? state.y + size.height * scale / 2 : cy;

}

return new mxPoint(cx - icon.bounds.width / 2,

cy - icon.bounds.height / 2);

};

/**

* Function: destroyIcons

*

* Destroys the given array of <mxImageShapes>.

*/

mxConnectionHandler.prototype.destroyIcons = function()

{

if (this.icons != null)

{

for (var i = 0; i < this.icons.length; i++)

{

this.icons[i].destroy();

}

this.icons = null;

this.icon = null;

this.selectedIcon = null;

this.iconState = null;

}

};

/**

* Function: isStartEvent

*

* 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.isStartEvent = function(me)

{

return !this.graph.isForceMarqueeEvent(me.getEvent()) &&

((this.constraintHandler.currentFocus != null &&

this.constraintHandler.currentConstraint != null) ||

(this.previous != null && this.error == null &&

(this.icons == null || (this.icons != null && this.icon != null))));

};

/**

* Function: mouseDown

*

* Handles the event by initiating a new connection.

*/

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

{

this.mouseDownCounter++;

if (this.isEnabled() && this.graph.isEnabled() && !me.isConsumed() &&

!this.isConnecting() && this.isStartEvent(me))

{

if (this.constraintHandler.currentConstraint != null &&

this.constraintHandler.currentFocus != null &&

this.constraintHandler.currentPoint != null)

{

this.sourceConstraint = this.constraintHandler.currentConstraint;

this.previous = this.constraintHandler.currentFocus;

this.first = this.constraintHandler.currentPoint.clone();

}

else

{

// Stores the location of the initial mousedown

this.first = new mxPoint(me.getGraphX(), me.getGraphY());

}

this.edgeState = this.createEdgeState(me);

this.mouseDownCounter = 1;

if (this.waypointsEnabled && this.shape == null)

{

this.waypoints = null;

this.shape = this.createShape();

}

// Stores the starting point in the geometry of the preview

if (this.previous == null && this.edgeState != null)

{

var pt = this.graph.getPointForEvent(me.getEvent());

this.edgeState.cell.geometry.setTerminalPoint(pt, true);

}

this.fireEvent(new mxEventObject(mxEvent.START, 'state', this.previous));

me.consume();

}

// Handles connecting via tap and hold

else if (mxClient.IS_TOUCH && this.tapAndHoldEnabled && !this.tapAndHoldInProgress &&

this.isEnabled() && this.graph.isEnabled() && !this.isConnecting())

{

this.tapAndHoldInProgress = true;

this.initialTouchX = me.getX();

this.initialTouchY = me.getY();

var state = this.graph.view.getState(this.marker.getCell(me));

var handler = function()

{

if (this.tapAndHoldValid)

{

this.tapAndHold(me, state);

}

this.tapAndHoldInProgress = false;

this.tapAndHoldValid = false;

};

if (this.tapAndHoldThread)

{

window.clearTimeout(this.tapAndHoldThread);

}

this.tapAndHoldThread = window.setTimeout(mxUtils.bind(this, handler), this.tapAndHoldDelay);

this.tapAndHoldValid = true;

}

this.selectedIcon = this.icon;

this.icon = null;

};

/**

* Function: tapAndHold

*

* Handles the <mxMouseEvent> by highlighting the <mxCellState>.

*

* Parameters: