| /** |
| * Copyright (c) 2006-2016, JGraph Ltd |
| * Copyright (c) 2006-2016, Gaudenz Alder |
| */ |
| /** |
| * 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 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: |
| * |
| * (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). 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>. |
| * |
| * (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) |
| { |
| mxEventSource.call(this); |
| |
| if (graph != null) |
| { |
| this.graph = graph; |
| this.factoryMethod = factoryMethod; |
| this.init(); |
| |
| // Handles escape keystrokes |
| this.escapeHandler = mxUtils.bind(this, function(sender, evt) |
| { |
| this.reset(); |
| }); |
| |
| this.graph.addListener(mxEvent.ESCAPE, this.escapeHandler); |
| } |
| }; |
| |
| /** |
| * Extends mxEventSource. |
| */ |
| mxUtils.extend(mxConnectionHandler, mxEventSource); |
| |
| /** |
| * 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: 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; |
| |
| /** |
| * Variable: outlineConnect |
| * |
| * 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 is false. |
| */ |
| mxConnectionHandler.prototype.outlineConnect = false; |
| |
| /** |
| * Variable: 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.livePreview = false; |
| |
| /** |
| * Variable: cursor |
| * |
| * Specifies the cursor to be used while the handler is active. Default is null. |
| */ |
| mxConnectionHandler.prototype.cursor = null; |
| |
| /** |
| * Variable: insertBeforeSource |
| * |
| * Specifies if new edges should be inserted before the source vertex in the |
| * cell hierarchy. Default is false for backwards compatibility. |
| */ |
| mxConnectionHandler.prototype.insertBeforeSource = false; |
| |
| /** |
| * 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: isInsertBefore |
| * |
| * Returns <insertBeforeSource> for non-loops and false for loops. |
| * |
| * Parameters: |
| * |
| * 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.isInsertBefore = function(edge, source, target, evt, dropTarget) |
| { |
| return this.insertBeforeSource && source != target; |
| }; |
| |
| /** |
| * Function: isCreateTarget |
| * |
| * Returns <createTarget>. |
| * |
| * Parameters: |
| * |
| * evt - Current active native pointer event. |
| */ |
| mxConnectionHandler.prototype.isCreateTarget = function(evt) |
| { |
| 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 = (this.livePreview && this.edgeState != null) ? |
| this.graph.cellRenderer.createShape(this.edgeState) : |
| new mxPolyline([], mxConstants.INVALID_COLOR); |
| shape.dialect = (this.graph.dialect != mxConstants.DIALECT_SVG) ? |
| mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG; |
| shape.scale = this.graph.view.scale; |
| shape.pointerEvents = false; |
| shape.isDashed = true; |
| shape.init(this.graph.getView().getOverlayPane()); |
| mxEvent.redirectMouseEvents(shape.node, this.graph, null); |
| |
| 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 if (this.previous != null && this.graph.view.getState(this.previous.cell) == null) |
| { |
| 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(me) |
| { |
| var cell = mxCellMarker.prototype.getCell.apply(marker, arguments); |
| this.error = null; |
| |
| // Checks for cell at preview point (with grid) |
| if (cell == null && this.currentPoint != null) |
| { |
| cell = this.graph.getCellAt(this.currentPoint.x, this.currentPoint.y); |
| } |
| |
| // Uses connectable parent vertex if one exists |
| if (cell != null && !this.graph.isCellConnectable(cell)) |
| { |
| var parent = this.graph.getModel().getParent(cell); |
| |
| if (this.graph.getModel().isVertex(parent) && this.graph.isCellConnectable(parent)) |
| { |
| cell = parent; |
| } |
| } |
| |
| if ((this.graph.isSwimlane(cell) && this.currentPoint != null && |
| this.graph.hitsSwimlaneContent(cell, this.currentPoint.x, this.currentPoint.y)) || |
| !this.isConnectableCell(cell)) |
| { |
| cell = 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(me.getEvent())) |
| { |
| this.error = null; |
| } |
| } |
| } |
| } |
| else if (!this.isValidSource(cell, me)) |
| { |
| cell = null; |
| } |
| } |
| else if (this.isConnecting() && !this.isCreateTarget(me.getEvent()) && |
| !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. |
| * me - <mxMouseEvent> that is associated with this call. |
| */ |
| mxConnectionHandler.prototype.isValidSource = function(cell, me) |
| { |
| 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; |
| |
| var alpha = mxUtils.toRadians(mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION) || 0); |
| |
| if (alpha != 0) |
| { |
| var cos = Math.cos(alpha); |
| var sin = Math.sin(alpha); |
| var ct = new mxPoint(state.getCenterX(), state.getCenterY()); |
| var pt = mxUtils.getRotatedPoint(new mxPoint(cx, cy), cos, sin, ct); |
| cx = pt.x; |
| cy = pt.y; |
| } |
| } |
| |
| return new mxPoint(cx - icon.bounds.width / 2, |
| cy - icon.bounds.height / 2); |
| }; |
| |
| /** |
| * Function: destroyIcons |
| * |
| * Destroys the connect icons and resets the respective state. |
| */ |
| 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.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(); |
| |
| if (this.edgeState != null) |
| { |
| this.shape.apply(this.edgeState); |
| } |
| } |
| |
| // 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(); |
| } |
| |
| this.selectedIcon = this.icon; |
| this.icon = null; |
| }; |
| |
| /** |
| * Function: isImmediateConnectSource |
| * |
| * Returns true if a tap on the given source state should immediately start |
| * connecting. This implementation returns true if the state is not movable |
| * in the graph. |
| */ |
| mxConnectionHandler.prototype.isImmediateConnectSource = function(state) |
| { |
| return !this.graph.isCellMovable(state.cell); |
| }; |
| |
| /** |
| * Function: createEdgeState |
| * |
| * Hook to return an <mxCellState> which may be used during the preview. |
| * This implementation returns null. |
| * |
| * Use the following code to create a preview for an existing edge style: |
| * |
| * (code) |
| * 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)); |
| * }; |
| * (end) |
| */ |
| mxConnectionHandler.prototype.createEdgeState = function(me) |
| { |
| return null; |
| }; |
| |
| /** |
| * Function: isOutlineConnectEvent |
| * |
| * 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) |
| { |
| var offset = mxUtils.getOffset(this.graph.container); |
| var evt = me.getEvent(); |
| |
| var clientX = mxEvent.getClientX(evt); |
| var clientY = mxEvent.getClientY(evt); |
| |
| var doc = document.documentElement; |
| var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0); |
| var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); |
| |
| var gridX = this.currentPoint.x - this.graph.container.scrollLeft + offset.x - left; |
| var gridY = this.currentPoint.y - this.graph.container.scrollTop + offset.y - top; |
| |
| return this.outlineConnect && !mxEvent.isShiftDown(me.getEvent()) && |
| (me.isSource(this.marker.highlight.shape) || |
| (mxEvent.isAltDown(me.getEvent()) && me.getState() != null) || |
| this.marker.highlight.isHighlightAt(clientX, clientY) || |
| ((gridX != clientX || gridY != clientY) && me.getState() == null && |
| this.marker.highlight.isHighlightAt(gridX, gridY))); |
| }; |
| |
| /** |
| * Function: updateCurrentState |
| * |
| * Updates the current state for a given mouse move event by using |
| * the <marker>. |
| */ |
| mxConnectionHandler.prototype.updateCurrentState = function(me, point) |
| { |
| this.constraintHandler.update(me, this.first == null, false, (this.first == null || |
| me.isSource(this.marker.highlight.shape)) ? null : point); |
| |
| if (this.constraintHandler.currentFocus != null && this.constraintHandler.currentConstraint != null) |
| { |
| // Handles special case where grid is large and connection point is at actual point in which |
| // case the outline is not followed as long as we're < gridSize / 2 away from that point |
| if (this.marker.highlight != null && this.marker.highlight.state != null && |
| this.marker.highlight.state.cell == this.constraintHandler.currentFocus.cell) |
| { |
| // Direct repaint needed if cell already highlighted |
| if (this.marker.highlight.shape.stroke != 'transparent') |
| { |
| this.marker.highlight.shape.stroke = 'transparent'; |
| this.marker.highlight.repaint(); |
| } |
| } |
| else |
| { |
| this.marker.markCell(this.constraintHandler.currentFocus.cell, 'transparent'); |
| } |
| |
| // Updates validation state |
| if (this.previous != null) |
| { |
| this.error = this.validateConnection(this.previous.cell, this.constraintHandler.currentFocus.cell); |
| |
| if (this.error == null) |
| { |
| this.currentState = this.constraintHandler.currentFocus; |
| } |
| else |
| { |
| this.constraintHandler.reset(); |
| } |
| } |
| } |
| else |
| { |
| if (this.graph.isIgnoreTerminalEvent(me.getEvent())) |
| { |
| this.marker.reset(); |
| this.currentState = null; |
| } |
| else |
| { |
| this.marker.process(me); |
| this.currentState = this.marker.getValidState(); |
| } |
| |
| var outline = this.isOutlineConnectEvent(me); |
| |
| if (this.currentState != null && outline) |
| { |
| // Handles special case where mouse is on outline away from actual end point |
| // in which case the grid is ignored and mouse point is used instead |
| if (me.isSource(this.marker.highlight.shape)) |
| { |
| point = new mxPoint(me.getGraphX(), me.getGraphY()); |
| } |
| |
| var constraint = this.graph.getOutlineConstraint(point, this.currentState, me); |
| this.constraintHandler.setFocus(me, this.currentState, false); |
| this.constraintHandler.currentConstraint = constraint; |
| this.constraintHandler.currentPoint = point; |
| } |
| |
| if (this.outlineConnect) |
| { |
| if (this.marker.highlight != null && this.marker.highlight.shape != null) |
| { |
| var s = this.graph.view.scale; |
| |
| if (this.constraintHandler.currentConstraint != null && |
| this.constraintHandler.currentFocus != null) |
| { |
| this.marker.highlight.shape.stroke = mxConstants.OUTLINE_HIGHLIGHT_COLOR; |
| this.marker.highlight.shape.strokewidth = mxConstants.OUTLINE_HIGHLIGHT_STROKEWIDTH / s / s; |
| this.marker.highlight.repaint(); |
| } |
| else if (this.marker.hasValidState()) |
| { |
| // Handles special case where actual end point of edge and current mouse point |
| // are not equal (due to grid snapping) and there is no hit on shape or highlight |
| if (this.marker.getValidState() != me.getState()) |
| { |
| this.marker.highlight.shape.stroke = 'transparent'; |
| this.currentState = null; |
| } |
| else |
| { |
| this.marker.highlight.shape.stroke = mxConstants.DEFAULT_VALID_COLOR; |
| } |
| |
| this.marker.highlight.shape.strokewidth = mxConstants.HIGHLIGHT_STROKEWIDTH / s / s; |
| this.marker.highlight.repaint(); |
| } |
| } |
| } |
| } |
| }; |
| |
| /** |
| * Function: convertWaypoint |
| * |
| * Converts the given point from screen coordinates to model coordinates. |
| */ |
| mxConnectionHandler.prototype.convertWaypoint = function(point) |
| { |
| var scale = this.graph.getView().getScale(); |
| var tr = this.graph.getView().getTranslate(); |
| |
| point.x = point.x / scale - tr.x; |
| point.y = point.y / scale - tr.y; |
| }; |
| |
| /** |
| * Function: snapToPreview |
| * |
| * Called to snap the given point to the current preview. This snaps to the |
| * first point of the preview if alt is not pressed. |
| */ |
| mxConnectionHandler.prototype.snapToPreview = function(me, point) |
| { |
| if (!mxEvent.isAltDown(me.getEvent()) && this.previous != null) |
| { |
| var tol = this.graph.gridSize * this.graph.view.scale / 2; |
| var tmp = (this.sourceConstraint != null) ? this.first : |
| new mxPoint(this.previous.getCenterX(), this.previous.getCenterY()); |
| |
| if (Math.abs(tmp.x - me.getGraphX()) < tol) |
| { |
| point.x = tmp.x; |
| } |
| |
| if (Math.abs(tmp.y - me.getGraphY()) < tol) |
| { |
| point.y = tmp.y; |
| } |
| } |
| }; |
| |
| /** |
| * Function: mouseMove |
| * |
| * Handles the event by updating the preview edge or by highlighting |
| * a possible source or target terminal. |
| */ |
| mxConnectionHandler.prototype.mouseMove = function(sender, me) |
| { |
| if (!me.isConsumed() && (this.ignoreMouseDown || this.first != null || !this.graph.isMouseDown)) |
| { |
| // Handles special case when handler is disabled during highlight |
| if (!this.isEnabled() && this.currentState != null) |
| { |
| this.destroyIcons(); |
| this.currentState = null; |
| } |
| |
| var view = this.graph.getView(); |
| var scale = view.scale; |
| var tr = view.translate; |
| var point = new mxPoint(me.getGraphX(), me.getGraphY()); |
| this.error = null; |
| |
| if (this.graph.isGridEnabledEvent(me.getEvent())) |
| { |
| point = new mxPoint((this.graph.snap(point.x / scale - tr.x) + tr.x) * scale, |
| (this.graph.snap(point.y / scale - tr.y) + tr.y) * scale); |
| } |
| |
| this.snapToPreview(me, point); |
| this.currentPoint = point; |
| |
| if (this.first != null || (this.isEnabled() && this.graph.isEnabled())) |
| { |
| this.updateCurrentState(me, point); |
| } |
| |
| if (this.first != null) |
| { |
| var constraint = null; |
| var current = point; |
| |
| // Uses the current point from the constraint handler if available |
| if (this.constraintHandler.currentConstraint != null && |
| this.constraintHandler.currentFocus != null && |
| this.constraintHandler.currentPoint != null) |
| { |
| constraint = this.constraintHandler.currentConstraint; |
| current = this.constraintHandler.currentPoint.clone(); |
| } |
| else if (this.previous != null && !this.graph.isIgnoreTerminalEvent(me.getEvent()) && mxEvent.isShiftDown(me.getEvent())) |
| { |
| if (Math.abs(this.previous.getCenterX() - point.x) < Math.abs(this.previous.getCenterY() - point.y)) |
| { |
| point.x = this.previous.getCenterX(); |
| } |
| else |
| { |
| point.y = this.previous.getCenterY(); |
| } |
| } |
| |
| var pt2 = this.first; |
| |
| // Moves the connect icon with the mouse |
| if (this.selectedIcon != null) |
| { |
| var w = this.selectedIcon.bounds.width; |
| var h = this.selectedIcon.bounds.height; |
| |
| if (this.currentState != null && this.targetConnectImage) |
| { |
| var pos = this.getIconPosition(this.selectedIcon, this.currentState); |
| this.selectedIcon.bounds.x = pos.x; |
| this.selectedIcon.bounds.y = pos.y; |
| } |
| else |
| { |
| var bounds = new mxRectangle(me.getGraphX() + this.connectIconOffset.x, |
| me.getGraphY() + this.connectIconOffset.y, w, h); |
| this.selectedIcon.bounds = bounds; |
| } |
| |
| this.selectedIcon.redraw(); |
| } |
| |
| // Uses edge state to compute the terminal points |
| if (this.edgeState != null) |
| { |
| this.updateEdgeState(current, constraint); |
| current = this.edgeState.absolutePoints[this.edgeState.absolutePoints.length - 1]; |
| pt2 = this.edgeState.absolutePoints[0]; |
| } |
| else |
| { |
| if (this.currentState != null) |
| { |
| if (this.constraintHandler.currentConstraint == null) |
| { |
| var tmp = this.getTargetPerimeterPoint(this.currentState, me); |
| |
| if (tmp != null) |
| { |
| current = tmp; |
| } |
| } |
| } |
| |
| // Computes the source perimeter point |
| if (this.sourceConstraint == null && this.previous != null) |
| { |
| var next = (this.waypoints != null && this.waypoints.length > 0) ? |
| this.waypoints[0] : current; |
| var tmp = this.getSourcePerimeterPoint(this.previous, next, me); |
| |
| if (tmp != null) |
| { |
| pt2 = tmp; |
| } |
| } |
| } |
| |
| // Makes sure the cell under the mousepointer can be detected |
| // by moving the preview shape away from the mouse. This |
| // makes sure the preview shape does not prevent the detection |
| // of the cell under the mousepointer even for slow gestures. |
| if (this.currentState == null && this.movePreviewAway) |
| { |
| var tmp = pt2; |
| |
| if (this.edgeState != null && this.edgeState.absolutePoints.length >= 2) |
| { |
| var tmp2 = this.edgeState.absolutePoints[this.edgeState.absolutePoints.length - 2]; |
| |
| if (tmp2 != null) |
| { |
| tmp = tmp2; |
| } |
| } |
| |
| var dx = current.x - tmp.x; |
| var dy = current.y - tmp.y; |
| |
| var len = Math.sqrt(dx * dx + dy * dy); |
| |
| if (len == 0) |
| { |
| return; |
| } |
| |
| // Stores old point to reuse when creating edge |
| this.originalPoint = current.clone(); |
| current.x -= dx * 4 / len; |
| current.y -= dy * 4 / len; |
| } |
| else |
| { |
| this.originalPoint = null; |
| } |
| |
| // Creates the preview shape (lazy) |
| if (this.shape == null) |
| { |
| var dx = Math.abs(point.x - this.first.x); |
| var dy = Math.abs(point.y - this.first.y); |
| |
| if (dx > this.graph.tolerance || dy > this.graph.tolerance) |
| { |
| this.shape = this.createShape(); |
| |
| if (this.edgeState != null) |
| { |
| this.shape.apply(this.edgeState); |
| } |
| |
| // Revalidates current connection |
| this.updateCurrentState(me, point); |
| } |
| } |
| |
| // Updates the points in the preview edge |
| if (this.shape != null) |
| { |
| if (this.edgeState != null) |
| { |
| this.shape.points = this.edgeState.absolutePoints; |
| } |
| else |
| { |
| var pts = [pt2]; |
| |
| if (this.waypoints != null) |
| { |
| pts = pts.concat(this.waypoints); |
| } |
| |
| pts.push(current); |
| this.shape.points = pts; |
| } |
| |
| this.drawPreview(); |
| } |
| |
| // Makes sure endpoint of edge is visible during connect |
| if (this.cursor != null) |
| { |
| this.graph.container.style.cursor = this.cursor; |
| } |
| |
| mxEvent.consume(me.getEvent()); |
| me.consume(); |
| } |
| else if (!this.isEnabled() || !this.graph.isEnabled()) |
| { |
| this.constraintHandler.reset(); |
| } |
| else if (this.previous != this.currentState && this.edgeState == null) |
| { |
| this.destroyIcons(); |
| |
| // Sets the cursor on the current shape |
| if (this.currentState != null && this.error == null && this.constraintHandler.currentConstraint == null) |
| { |
| this.icons = this.createIcons(this.currentState); |
| |
| if (this.icons == null) |
| { |
| this.currentState.setCursor(mxConstants.CURSOR_CONNECT); |
| me.consume(); |
| } |
| } |
| |
| this.previous = this.currentState; |
| } |
| else if (this.previous == this.currentState && this.currentState != null && this.icons == null && |
| !this.graph.isMouseDown) |
| { |
| // Makes sure that no cursors are changed |
| me.consume(); |
| } |
| |
| if (!this.graph.isMouseDown && this.currentState != null && this.icons != null) |
| { |
| var hitsIcon = false; |
| var target = me.getSource(); |
| |
| for (var i = 0; i < this.icons.length && !hitsIcon; i++) |
| { |
| hitsIcon = target == this.icons[i].node || target.parentNode == this.icons[i].node; |
| } |
| |
| if (!hitsIcon) |
| { |
| this.updateIcons(this.currentState, this.icons, me); |
| } |
| } |
| } |
| else |
| { |
| this.constraintHandler.reset(); |
| } |
| }; |
| |
| /** |
| * Function: updateEdgeState |
| * |
| * Updates <edgeState>. |
| */ |
| mxConnectionHandler.prototype.updateEdgeState = function(current, constraint) |
| { |
| // TODO: Use generic method for writing constraint to style |
| if (this.sourceConstraint != null && this.sourceConstraint.point != null) |
| { |
| this.edgeState.style[mxConstants.STYLE_EXIT_X] = this.sourceConstraint.point.x; |
| this.edgeState.style[mxConstants.STYLE_EXIT_Y] = this.sourceConstraint.point.y; |
| } |
| |
| if (constraint != null && constraint.point != null) |
| { |
| this.edgeState.style[mxConstants.STYLE_ENTRY_X] = constraint.point.x; |
| this.edgeState.style[mxConstants.STYLE_ENTRY_Y] = constraint.point.y; |
| } |
| else |
| { |
| delete this.edgeState.style[mxConstants.STYLE_ENTRY_X]; |
| delete this.edgeState.style[mxConstants.STYLE_ENTRY_Y]; |
| } |
| |
| this.edgeState.absolutePoints = [null, (this.currentState != null) ? null : current]; |
| this.graph.view.updateFixedTerminalPoint(this.edgeState, this.previous, true, this.sourceConstraint); |
| |
| if (this.currentState != null) |
| { |
| if (constraint == null) |
| { |
| constraint = this.graph.getConnectionConstraint(this.edgeState, this.previous, false); |
| } |
| |
| this.edgeState.setAbsoluteTerminalPoint(null, false); |
| this.graph.view.updateFixedTerminalPoint(this.edgeState, this.currentState, false, constraint); |
| } |
| |
| // Scales and translates the waypoints to the model |
| var realPoints = null; |
| |
| if (this.waypoints != null) |
| { |
| realPoints = []; |
| |
| for (var i = 0; i < this.waypoints.length; i++) |
| { |
| var pt = this.waypoints[i].clone(); |
| this.convertWaypoint(pt); |
| realPoints[i] = pt; |
| } |
| } |
| |
| this.graph.view.updatePoints(this.edgeState, realPoints, this.previous, this.currentState); |
| this.graph.view.updateFloatingTerminalPoints(this.edgeState, this.previous, this.currentState); |
| }; |
| |
| /** |
| * Function: getTargetPerimeterPoint |
| * |
| * Returns the perimeter point for the given target state. |
| * |
| * Parameters: |
| * |
| * state - <mxCellState> that represents the target cell state. |
| * me - <mxMouseEvent> that represents the mouse move. |
| */ |
| mxConnectionHandler.prototype.getTargetPerimeterPoint = function(state, me) |
| { |
| var result = null; |
| var view = state.view; |
| var targetPerimeter = view.getPerimeterFunction(state); |
| |
| if (targetPerimeter != null) |
| { |
| var next = (this.waypoints != null && this.waypoints.length > 0) ? |
| this.waypoints[this.waypoints.length - 1] : |
| new mxPoint(this.previous.getCenterX(), this.previous.getCenterY()); |
| var tmp = targetPerimeter(view.getPerimeterBounds(state), |
| this.edgeState, next, false); |
| |
| if (tmp != null) |
| { |
| result = tmp; |
| } |
| } |
| else |
| { |
| result = new mxPoint(state.getCenterX(), state.getCenterY()); |
| } |
| |
| return result; |
| }; |
| |
| /** |
| * Function: getSourcePerimeterPoint |
| * |
| * Hook to update the icon position(s) based on a mouseOver event. This is |
| * an empty implementation. |
| * |
| * Parameters: |
| * |
| * 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.getSourcePerimeterPoint = function(state, next, me) |
| { |
| var result = null; |
| var view = state.view; |
| var sourcePerimeter = view.getPerimeterFunction(state); |
| var c = new mxPoint(state.getCenterX(), state.getCenterY()); |
| |
| if (sourcePerimeter != null) |
| { |
| var theta = mxUtils.getValue(state.style, mxConstants.STYLE_ROTATION, 0); |
| var rad = -theta * (Math.PI / 180); |
| |
| if (theta != 0) |
| { |
| next = mxUtils.getRotatedPoint(new mxPoint(next.x, next.y), Math.cos(rad), Math.sin(rad), c); |
| } |
| |
| var tmp = sourcePerimeter(view.getPerimeterBounds(state), state, next, false); |
| |
| if (tmp != null) |
| { |
| if (theta != 0) |
| { |
| tmp = mxUtils.getRotatedPoint(new mxPoint(tmp.x, tmp.y), Math.cos(-rad), Math.sin(-rad), c); |
| } |
| |
| result = tmp; |
| } |
| } |
| else |
| { |
| result = c; |
| } |
| |
| return result; |
| }; |
| |
| |
| /** |
| * Function: updateIcons |
| * |
| * Hook to update the icon position(s) based on a mouseOver event. This is |
| * an empty implementation. |
| * |
| * Parameters: |
| * |
| * state - <mxCellState> under the mouse. |
| * icons - Array of currently displayed icons. |
| * me - <mxMouseEvent> that contains the mouse event. |
| */ |
| mxConnectionHandler.prototype.updateIcons = function(state, icons, me) |
| { |
| // empty |
| }; |
| |
| /** |
| * Function: isStopEvent |
| * |
| * 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.isStopEvent = function(me) |
| { |
| return me.getState() != null; |
| }; |
| |
| /** |
| * Function: addWaypoint |
| * |
| * Adds the waypoint for the given event to <waypoints>. |
| */ |
| mxConnectionHandler.prototype.addWaypointForEvent = function(me) |
| { |
| var point = mxUtils.convertPoint(this.graph.container, me.getX(), me.getY()); |
| var dx = Math.abs(point.x - this.first.x); |
| var dy = Math.abs(point.y - this.first.y); |
| var addPoint = this.waypoints != null || (this.mouseDownCounter > 1 && |
| (dx > this.graph.tolerance || dy > this.graph.tolerance)); |
| |
| if (addPoint) |
| { |
| if (this.waypoints == null) |
| { |
| this.waypoints = []; |
| } |
| |
| var scale = this.graph.view.scale; |
| var point = new mxPoint(this.graph.snap(me.getGraphX() / scale) * scale, |
| this.graph.snap(me.getGraphY() / scale) * scale); |
| this.waypoints.push(point); |
| } |
| }; |
| |
| /** |
| * Function: mouseUp |
| * |
| * Handles the event by inserting the new connection. |
| */ |
| mxConnectionHandler.prototype.mouseUp = function(sender, me) |
| { |
| if (!me.isConsumed() && this.isConnecting()) |
| { |
| if (this.waypointsEnabled && !this.isStopEvent(me)) |
| { |
| this.addWaypointForEvent(me); |
| me.consume(); |
| |
| return; |
| } |
| |
| // Inserts the edge if no validation error exists |
| if (this.error == null) |
| { |
| var source = (this.previous != null) ? this.previous.cell : null; |
| var target = null; |
| |
| if (this.constraintHandler.currentConstraint != null && |
| this.constraintHandler.currentFocus != null) |
| { |
| target = this.constraintHandler.currentFocus.cell; |
| } |
| |
| if (target == null && this.currentState != null) |
| { |
| target = this.currentState.cell; |
| } |
| |
| this.connect(source, target, me.getEvent(), me.getCell()); |
| } |
| else |
| { |
| // Selects the source terminal for self-references |
| if (this.previous != null && this.marker.validState != null && |
| this.previous.cell == this.marker.validState.cell) |
| { |
| this.graph.selectCellForEvent(this.marker.source, evt); |
| } |
| |
| // Displays the error message if it is not an empty string, |
| // for empty error messages, the event is silently dropped |
| if (this.error.length > 0) |
| { |
| this.graph.validationAlert(this.error); |
| } |
| } |
| |
| // Redraws the connect icons and resets the handler state |
| this.destroyIcons(); |
| me.consume(); |
| } |
| |
| if (this.first != null) |
| { |
| this.reset(); |
| } |
| }; |
| |
| /** |
| * Function: reset |
| * |
| * Resets the state of this handler. |
| */ |
| mxConnectionHandler.prototype.reset = function() |
| { |
| if (this.shape != null) |
| { |
| this.shape.destroy(); |
| this.shape = null; |
| } |
| |
| // Resets the cursor on the container |
| if (this.cursor != null && this.graph.container != null) |
| { |
| this.graph.container.style.cursor = ''; |
| } |
| |
| this.destroyIcons(); |
| this.marker.reset(); |
| this.constraintHandler.reset(); |
| this.originalPoint = null; |
| this.currentPoint = null; |
| this.edgeState = null; |
| this.previous = null; |
| this.error = null; |
| this.sourceConstraint = null; |
| this.mouseDownCounter = 0; |
| this.first = null; |
| |
| this.fireEvent(new mxEventObject(mxEvent.RESET)); |
| }; |
| |
| /** |
| * Function: drawPreview |
| * |
| * Redraws the preview edge using the color and width returned by |
| * <getEdgeColor> and <getEdgeWidth>. |
| */ |
| mxConnectionHandler.prototype.drawPreview = function() |
| { |
| this.updatePreview(this.error == null); |
| this.shape.redraw(); |
| }; |
| |
| /** |
| * Function: getEdgeColor |
| * |
| * Returns the color used to draw the preview edge. This returns green if |
| * there is no edge validation error and red otherwise. |
| * |
| * Parameters: |
| * |
| * valid - Boolean indicating if the color for a valid edge should be |
| * returned. |
| */ |
| mxConnectionHandler.prototype.updatePreview = function(valid) |
| { |
| this.shape.strokewidth = this.getEdgeWidth(valid); |
| this.shape.stroke = this.getEdgeColor(valid); |
| }; |
| |
| /** |
| * Function: getEdgeColor |
| * |
| * Returns the color used to draw the preview edge. This returns green if |
| * there is no edge validation error and red otherwise. |
| * |
| * Parameters: |
| * |
| * valid - Boolean indicating if the color for a valid edge should be |
| * returned. |
| */ |
| mxConnectionHandler.prototype.getEdgeColor = function(valid) |
| { |
| return (valid) ? mxConstants.VALID_COLOR : mxConstants.INVALID_COLOR; |
| }; |
| |
| /** |
| * Function: getEdgeWidth |
| * |
| * Returns the width used to draw the preview edge. This returns 3 if |
| * there is no edge validation error and 1 otherwise. |
| * |
| * Parameters: |
| * |
| * valid - Boolean indicating if the width for a valid edge should be |
| * returned. |
| */ |
| mxConnectionHandler.prototype.getEdgeWidth = function(valid) |
| { |
| return (valid) ? 3 : 1; |
| }; |
| |
| /** |
| * Function: connect |
| * |
| * Connects the given source and target using a new edge. This |
| * implementation uses <createEdge> to create the edge. |
| * |
| * Parameters: |
| * |
| * 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.connect = function(source, target, evt, dropTarget) |
| { |
| if (target != null || this.isCreateTarget(evt) || this.graph.allowDanglingEdges) |
| { |
| // Uses the common parent of source and target or |
| // the default parent to insert the edge |
| var model = this.graph.getModel(); |
| var terminalInserted = false; |
| var edge = null; |
| |
| model.beginUpdate(); |
| try |
| { |
| if (source != null && target == null && !this.graph.isIgnoreTerminalEvent(evt) && this.isCreateTarget(evt)) |
| { |
| target = this.createTargetVertex(evt, source); |
| |
| if (target != null) |
| { |
| dropTarget = this.graph.getDropTarget([target], evt, dropTarget); |
| terminalInserted = true; |
| |
| // Disables edges as drop targets if the target cell was created |
| // FIXME: Should not shift if vertex was aligned (same in Java) |
| if (dropTarget == null || !this.graph.getModel().isEdge(dropTarget)) |
| { |
| var pstate = this.graph.getView().getState(dropTarget); |
| |
| if (pstate != null) |
| { |
| var tmp = model.getGeometry(target); |
| tmp.x -= pstate.origin.x; |
| tmp.y -= pstate.origin.y; |
| } |
| } |
| else |
| { |
| dropTarget = this.graph.getDefaultParent(); |
| } |
| |
| this.graph.addCell(target, dropTarget); |
| } |
| } |
| |
| var parent = this.graph.getDefaultParent(); |
| |
| if (source != null && target != null && |
| model.getParent(source) == model.getParent(target) && |
| model.getParent(model.getParent(source)) != model.getRoot()) |
| { |
| parent = model.getParent(source); |
| |
| if ((source.geometry != null && source.geometry.relative) && |
| (target.geometry != null && target.geometry.relative)) |
| { |
| parent = model.getParent(parent); |
| } |
| } |
| |
| // Uses the value of the preview edge state for inserting |
| // the new edge into the graph |
| var value = null; |
| var style = null; |
| |
| if (this.edgeState != null) |
| { |
| value = this.edgeState.cell.value; |
| style = this.edgeState.cell.style; |
| } |
| |
| edge = this.insertEdge(parent, null, value, source, target, style); |
| |
| if (edge != null) |
| { |
| // Updates the connection constraints |
| this.graph.setConnectionConstraint(edge, source, true, this.sourceConstraint); |
| this.graph.setConnectionConstraint(edge, target, false, this.constraintHandler.currentConstraint); |
| |
| // Uses geometry of the preview edge state |
| if (this.edgeState != null) |
| { |
| model.setGeometry(edge, this.edgeState.cell.geometry); |
| } |
| |
| var parent = model.getParent(source); |
| |
| // Inserts edge before source |
| if (this.isInsertBefore(edge, source, target, evt, dropTarget)) |
| { |
| var index = null; |
| var tmp = source; |
| |
| while (tmp.parent != null && tmp.geometry != null && |
| tmp.geometry.relative && tmp.parent != edge.parent) |
| { |
| tmp = this.graph.model.getParent(tmp); |
| } |
| |
| if (tmp != null && tmp.parent != null && tmp.parent == edge.parent) |
| { |
| var index = tmp.parent.getIndex(tmp); |
| tmp.parent.insert(edge, index); |
| } |
| } |
| |
| // Makes sure the edge has a non-null, relative geometry |
| var geo = model.getGeometry(edge); |
| |
| if (geo == null) |
| { |
| geo = new mxGeometry(); |
| geo.relative = true; |
| |
| model.setGeometry(edge, geo); |
| } |
| |
| // Uses scaled waypoints in geometry |
| if (this.waypoints != null && this.waypoints.length > 0) |
| { |
| var s = this.graph.view.scale; |
| var tr = this.graph.view.translate; |
| geo.points = []; |
| |
| for (var i = 0; i < this.waypoints.length; i++) |
| { |
| var pt = this.waypoints[i]; |
| geo.points.push(new mxPoint(pt.x / s - tr.x, pt.y / s - tr.y)); |
| } |
| } |
| |
| if (target == null) |
| { |
| var t = this.graph.view.translate; |
| var s = this.graph.view.scale; |
| var pt = (this.originalPoint != null) ? |
| new mxPoint(this.originalPoint.x / s - t.x, this.originalPoint.y / s - t.y) : |
| new mxPoint(this.currentPoint.x / s - t.x, this.currentPoint.y / s - t.y); |
| pt.x -= this.graph.panDx / this.graph.view.scale; |
| pt.y -= this.graph.panDy / this.graph.view.scale; |
| geo.setTerminalPoint(pt, false); |
| } |
| |
| this.fireEvent(new mxEventObject(mxEvent.CONNECT, 'cell', edge, 'terminal', target, |
| 'event', evt, 'target', dropTarget, 'terminalInserted', terminalInserted)); |
| } |
| } |
| catch (e) |
| { |
| mxLog.show(); |
| mxLog.debug(e.message); |
| } |
| finally |
| { |
| model.endUpdate(); |
| } |
| |
| if (this.select) |
| { |
| this.selectCells(edge, (terminalInserted) ? target : null); |
| } |
| } |
| }; |
| |
| /** |
| * Function: selectCells |
| * |
| * Selects the given edge after adding a new connection. The target argument |
| * contains the target vertex if one has been inserted. |
| */ |
| mxConnectionHandler.prototype.selectCells = function(edge, target) |
| { |
| this.graph.setSelectionCell(edge); |
| }; |
| |
| /** |
| * Function: insertEdge |
| * |
| * 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.insertEdge = function(parent, id, value, source, target, style) |
| { |
| if (this.factoryMethod == null) |
| { |
| return this.graph.insertEdge(parent, id, value, source, target, style); |
| } |
| else |
| { |
| var edge = this.createEdge(value, source, target, style); |
| edge = this.graph.addEdge(edge, parent, source, target); |
| |
| return edge; |
| } |
| }; |
| |
| /** |
| * Function: createTargetVertex |
| * |
| * 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. |
| * |
| * Parameters: |
| * |
| * evt - Mousedown event of the connect gesture. |
| * source - <mxCell> that represents the source terminal. |
| */ |
| mxConnectionHandler.prototype.createTargetVertex = function(evt, source) |
| { |
| // Uses the first non-relative source |
| var geo = this.graph.getCellGeometry(source); |
| |
| while (geo != null && geo.relative) |
| { |
| source = this.graph.getModel().getParent(source); |
| geo = this.graph.getCellGeometry(source); |
| } |
| |
| var clone = this.graph.cloneCells([source])[0]; |
| var geo = this.graph.getModel().getGeometry(clone); |
| |
| if (geo != null) |
| { |
| var t = this.graph.view.translate; |
| var s = this.graph.view.scale; |
| var point = new mxPoint(this.currentPoint.x / s - t.x, this.currentPoint.y / s - t.y); |
| geo.x = Math.round(point.x - geo.width / 2 - this.graph.panDx / s); |
| geo.y = Math.round(point.y - geo.height / 2 - this.graph.panDy / s); |
| |
| // Aligns with source if within certain tolerance |
| var tol = this.getAlignmentTolerance(); |
| |
| if (tol > 0) |
| { |
| var sourceState = this.graph.view.getState(source); |
| |
| if (sourceState != null) |
| { |
| var x = sourceState.x / s - t.x; |
| var y = sourceState.y / s - t.y; |
| |
| if (Math.abs(x - geo.x) <= tol) |
| { |
| geo.x = Math.round(x); |
| } |
| |
| if (Math.abs(y - geo.y) <= tol) |
| { |
| geo.y = Math.round(y); |
| } |
| } |
| } |
| } |
| |
| return clone; |
| }; |
| |
| /** |
| * Function: getAlignmentTolerance |
| * |
| * Returns the tolerance for aligning new targets to sources. This returns the grid size / 2. |
| */ |
| mxConnectionHandler.prototype.getAlignmentTolerance = function(evt) |
| { |
| return (this.graph.isGridEnabled()) ? this.graph.gridSize / 2 : this.graph.tolerance; |
| }; |
| |
| /** |
| * Function: createEdge |
| * |
| * 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. |
| * |
| * Parameters: |
| * |
| * 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.createEdge = function(value, source, target, style) |
| { |
| var edge = null; |
| |
| // Creates a new edge using the factoryMethod |
| if (this.factoryMethod != null) |
| { |
| edge = this.factoryMethod(source, target, style); |
| } |
| |
| if (edge == null) |
| { |
| edge = new mxCell(value || ''); |
| edge.setEdge(true); |
| edge.setStyle(style); |
| |
| var geo = new mxGeometry(); |
| geo.relative = true; |
| edge.setGeometry(geo); |
| } |
| |
| return edge; |
| }; |
| |
| /** |
| * Function: destroy |
| * |
| * 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>. |
| */ |
| mxConnectionHandler.prototype.destroy = function() |
| { |
| this.graph.removeMouseListener(this); |
| |
| if (this.shape != null) |
| { |
| this.shape.destroy(); |
| this.shape = null; |
| } |
| |
| if (this.marker != null) |
| { |
| this.marker.destroy(); |
| this.marker = null; |
| } |
| |
| if (this.constraintHandler != null) |
| { |
| this.constraintHandler.destroy(); |
| this.constraintHandler = null; |
| } |
| |
| if (this.changeHandler != null) |
| { |
| this.graph.getModel().removeListener(this.changeHandler); |
| this.graph.getView().removeListener(this.changeHandler); |
| this.changeHandler = null; |
| } |
| |
| if (this.drillHandler != null) |
| { |
| this.graph.removeListener(this.drillHandler); |
| this.graph.getView().removeListener(this.drillHandler); |
| this.drillHandler = null; |
| } |
| |
| if (this.escapeHandler != null) |
| { |
| this.graph.removeListener(this.escapeHandler); |
| this.escapeHandler = null; |
| } |
| }; |