@maxgraph/core
Version:
maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
1,145 lines (1,142 loc) • 71.2 kB
JavaScript
/*
Copyright 2021-present The maxGraph project Contributors
Copyright (c) 2006-2016, JGraph Ltd
Copyright (c) 2006-2016, Gaudenz Alder
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import Geometry from '../geometry/Geometry.js';
import Cell from '../cell/Cell.js';
import Point from '../geometry/Point.js';
import EventObject from '../event/EventObject.js';
import InternalEvent from '../event/InternalEvent.js';
import { DEFAULT_HOTSPOT, DEFAULT_INVALID_COLOR, DEFAULT_VALID_COLOR, HIGHLIGHT_STROKEWIDTH, INVALID_COLOR, NONE, OUTLINE_HIGHLIGHT_COLOR, OUTLINE_HIGHLIGHT_STROKEWIDTH, TOOLTIP_VERTICAL_OFFSET, VALID_COLOR, } from '../../util/Constants.js';
import { getRotatedPoint, toRadians } from '../../util/mathUtils.js';
import { convertPoint, getOffset } from '../../util/styleUtils.js';
import InternalMouseEvent from '../event/InternalMouseEvent.js';
import ImageShape from '../shape/node/ImageShape.js';
import CellMarker from '../cell/CellMarker.js';
import ConstraintHandler from '../handler/ConstraintHandler.js';
import PolylineShape from '../shape/edge/PolylineShape.js';
import EventSource from '../event/EventSource.js';
import Rectangle from '../geometry/Rectangle.js';
import { GlobalConfig } from '../../util/config.js';
import { getClientX, getClientY, isAltDown, isConsumed, isShiftDown, } from '../../util/EventUtils.js';
/**
* Graph event handler that creates new connections.
* Uses {@link CellMarker} for finding and highlighting the source and target vertices and {@link factoryMethod} to create the edge instance.
*
* This handler is enabled using {@link AbstractGraph.setConnectable}.
*
* Example:
*
* ```javascript
* new ConnectionHandler(graph, (source, target, style)=>
* {
* edge = new Cell('', new Geometry());
* edge.setEdge(true);
* edge.setStyle(style);
* edge.geometry.relative = true;
* return edge;
* });
* ```
*
* Here is an alternative solution that just sets a specific user object for new edges by overriding {@link insertEdge}.
*
* ```javascript
* originalConnectionHandlerInsertEdge = connectionHandler.insertEdge;
* connectionHandler.insertEdge = (parent, id, value, source, target, style) => {
* value = 'Test';
* return originalConnectionHandlerInsertEdge.apply(this, arguments);
* };
* ```
*
* ### Using images to trigger connections
*
* This handler uses {@link CellMarker} to find the source and target cell for
* the new connection and creates a new edge using {@link connect}. The new edge is
* created using {@link createEdge} which in turn uses {@link 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,
* {@link 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,
* {@link 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 {@link 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 {@link createIcons} hook may be overridden to create more than one
* {@link ImageShape} 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:
*
* ```javascript
* mxConstants.DEFAULT_HOTSPOT = 1;
* ```
*
* In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:
*
* ```javascript
* mxConstants.HIGHLIGHT_COLOR = null;
* ```
*
* To install the image, the connectImage field of the ConnectionHandler must be assigned a new {@link Image} instance:
*
* ```javascript
* connectImage = new ImageBox('images/green-dot.gif', 14, 14);
* ```
*
* This will use the green-dot.gif with a width and height of 14 pixels as the
* image to trigger new connections. In createIcons the icon field of the
* handler will be set in order to remember the icon that has been clicked for
* creating the new connection. This field will be available under selectedIcon
* in the connect method, which may be overridden to take the icon that
* triggered the new connection into account. This is useful if more than one
* icon may be used to create a connection.
*
* ### Events
*
* #### InternalEvent.START
*
* Fires when a new connection is being created by the user. The `state`
* property contains the state of the source cell.
*
* #### InternalEvent.CONNECT
*
* Fires between begin- and endUpdate in {@link connect}. The `cell`
* property contains the inserted edge, the `event` and `target`
* properties contain the respective arguments that were passed to {@link connect} (where
* target corresponds to the dropTarget argument). Finally, the `terminal`
* property corresponds to the target argument in {@link connect} or the clone of the source
* terminal if {@link 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, {@link AbstractGraph.getConnectionConstraint} can be used. To resolve
* the port IDs, use {@link GraphDataModel.getCell}.
*
* ```javascript
* graph.getPlugin('ConnectionHandler')?.addListener(mxEvent.CONNECT, (sender, evt) => {
* const edge = evt.getProperty('cell');
* const source = graph.getDataModel().getTerminal(edge, true);
* const target = graph.getDataModel().getTerminal(edge, false);
*
* const style = graph.getCellStyle(edge);
* const sourcePortId = style.sourcePort;
* const targetPortId = style.targetPort;
*
* GlobalConfig.logger.show();
* GlobalConfig.logger.debug('connect', edge, source.id, target.id, sourcePortId, targetPortId);
* });
* ```
*
* #### InternalEvent.RESET
*
* Fires when the {@link reset} method is invoked.
*
* @category Plugin
*/
class ConnectionHandler extends EventSource {
/**
* Constructs an event handler that connects vertices using the specified
* factory method to create the new edges.
*
* @param graph Reference to the enclosing {@link AbstractGraph}.
* @param factoryMethod Optional function to create the edge. The function takes
* the source and target {@link Cell} as the first and second argument and an
* optional cell style from the preview as the third argument. It returns
* the {@link Cell} that represents the new edge.
*/
constructor(graph, factoryMethod = null) {
super();
this.previous = null;
this.iconState = null;
this.icons = [];
this.cell = null;
this.currentPoint = null;
this.sourceConstraint = null;
this.shape = null;
this.icon = null;
this.originalPoint = null;
this.currentState = null;
this.selectedIcon = null;
this.waypoints = [];
/**
* Function that is used for creating new edges. The function takes the
* source and target {@link Cell} as the first and second argument and returns
* a new {@link Cell} that represents the edge. This is used in {@link createEdge}.
*/
this.factoryMethod = null;
/**
* 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 precedence over {@link moveIconBack} when set
* to true.
* @default `false`
*/
this.moveIconFront = false;
/**
* 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.
*/
this.moveIconBack = false;
/**
* {@link Image} that is used to trigger the creation of a new connection.
* This is used in {@link createIcons}.
* @default null
*/
this.connectImage = null;
/**
* Specifies if the connect icon should be centered on the target state
* while connections are being previewed. Default is false.
*/
this.targetConnectImage = false;
/**
* Specifies if events are handled. Default is false.
*/
this.enabled = false;
/**
* Specifies if new edges should be selected. Default is true.
*/
this.select = true;
/**
* 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.
*/
this.createTarget = false;
/**
* Holds the current validation error while connections are being created.
*/
this.error = null;
/**
* Specifies if single clicks should add waypoints on the new edge. Default is
* false.
*/
this.waypointsEnabled = false;
/**
* 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.
*/
this.ignoreMouseDown = false;
/**
* Holds the {@link Point} where the mouseDown took place while the handler is
* active.
*/
this.first = null;
/**
* Holds the offset for connect icons during connection preview.
* Default is mxPoint(0, {@link Constants#TOOLTIP_VERTICAL_OFFSET}).
* Note that placing the icon under the mouse pointer with an
* offset of (0,0) will affect hit detection.
*/
this.connectIconOffset = new Point(0, TOOLTIP_VERTICAL_OFFSET);
/**
* Optional <CellState> that represents the preview edge while the
* handler is active. This is created in <createEdgeState>.
*/
this.edgeState = null;
/**
* Counts the number of mouseDown events since the start. The initial mouse
* down event counts as 1.
*/
this.mouseDownCounter = 0;
/**
* 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 false
*/
this.movePreviewAway = false;
/**
* Specifies if connections to the outline of a highlighted target should be
* enabled. This will allow to place the connection point along the outline of
* the highlighted target.
* @default false
*/
this.outlineConnect = false;
/**
* 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>.)
*/
this.livePreview = false;
/**
* Specifies the cursor to be used while the handler is active.
* @default null
*/
this.cursor = null;
/**
* Defines the cursor for a connectable state.
* @default 'pointer'
* @since 0.20.0
*/
this.cursorConnect = 'pointer';
/**
* Specifies if new edges should be inserted before the source vertex in the
* cell hierarchy. Default is false for backwards compatibility.
*/
this.insertBeforeSource = false;
this.graph = graph;
this.factoryMethod = factoryMethod;
this.graph.addMouseListener(this);
this.marker = this.createMarker();
this.constraintHandler = this.createConstraintHandler();
// Redraws the icons if the graph changes
this.changeHandler = (sender) => {
if (this.iconState) {
this.iconState = this.graph.getView().getState(this.iconState.cell);
}
if (this.iconState) {
this.redrawIcons(this.icons, this.iconState);
this.constraintHandler.reset();
}
else if (this.previous && !this.graph.view.getState(this.previous.cell)) {
this.reset();
}
};
this.graph.getDataModel().addListener(InternalEvent.CHANGE, this.changeHandler);
this.graph.getView().addListener(InternalEvent.SCALE, this.changeHandler);
this.graph.getView().addListener(InternalEvent.TRANSLATE, this.changeHandler);
this.graph
.getView()
.addListener(InternalEvent.SCALE_AND_TRANSLATE, this.changeHandler);
// Removes the icon if we step into/up or start editing
this.drillHandler = (sender) => {
this.reset();
};
this.graph.addListener(InternalEvent.START_EDITING, this.drillHandler);
this.graph.getView().addListener(InternalEvent.DOWN, this.drillHandler);
this.graph.getView().addListener(InternalEvent.UP, this.drillHandler);
// Handles escape keystrokes
this.escapeHandler = () => {
this.reset();
};
this.graph.addListener(InternalEvent.ESCAPE, this.escapeHandler);
}
/**
* Hook for subclasses to change the implementation of {@link ConstraintHandler} used here.
* @since 0.21.0
*/
createConstraintHandler() {
return new ConstraintHandler(this.graph);
}
/**
* Returns true if events are handled. This implementation
* returns <enabled>.
*/
isEnabled() {
return this.enabled;
}
/**
* Enables or disables event handling. This implementation
* updates <enabled>.
*
* @param enabled Boolean that specifies the new enabled state.
*/
setEnabled(enabled) {
this.enabled = enabled;
}
/**
* Returns <insertBeforeSource> for non-loops and false for loops.
*
* @param edge <Cell> that represents the edge to be inserted.
* @param source <Cell> that represents the source terminal.
* @param target <Cell> that represents the target terminal.
* @param evt Mousedown event of the connect gesture.
* @param dropTarget <Cell> that represents the cell under the mouse when it was
* released.
*/
isInsertBefore(edge, source, target, evt, dropTarget) {
return this.insertBeforeSource && source !== target;
}
/**
* Returns <createTarget>.
*
* @param evt Current active native pointer event.
*/
isCreateTarget(evt) {
return this.createTarget;
}
/**
* Sets <createTarget>.
*/
setCreateTarget(value) {
this.createTarget = value;
}
/**
* Creates the preview shape for new connections.
*/
createShape() {
// Creates the edge preview
const shape = this.livePreview && this.edgeState
? this.graph.cellRenderer.createShape(this.edgeState)
: new PolylineShape([], INVALID_COLOR);
if (shape && shape.node) {
shape.dialect = 'svg';
shape.scale = this.graph.view.scale;
shape.pointerEvents = false;
shape.isDashed = true;
shape.init(this.graph.getView().getOverlayPane());
InternalEvent.redirectMouseEvents(shape.node, this.graph, null);
}
return shape;
}
/**
* Returns true if the given cell is connectable. This is a hook to
* disable floating connections. This implementation returns true.
*/
isConnectableCell(cell) {
return true;
}
/**
* Creates and returns the {@link CellMarker} used in {@link arker}.
*/
createMarker() {
return new ConnectionHandlerCellMarker(this.graph, this);
}
/**
* Starts a new connection for the given state and coordinates.
*/
start(state, x, y, edgeState) {
this.previous = state;
this.first = new Point(x, y);
this.edgeState = edgeState ?? this.createEdgeState();
// Marks the source state
this.marker.currentColor = this.marker.validColor;
this.marker.markedState = state;
this.marker.mark();
this.fireEvent(new EventObject(InternalEvent.START, { state: this.previous }));
}
/**
* Returns true if the source terminal has been clicked and a new
* connection is currently being previewed.
*/
isConnecting() {
return !!this.first && !!this.shape;
}
/**
* Returns {@link AbstractGraph.isValidSource} for the given source terminal.
*
* @param cell <Cell> that represents the source terminal.
* @param me {@link MouseEvent} that is associated with this call.
*/
isValidSource(cell, me) {
return this.graph.isValidSource(cell);
}
/**
* Returns true. The call to {@link AbstractGraph.isValidTarget} is implicit by calling
* {@link AbstractGraph.getEdgeValidationError} in <validateConnection>. This is an
* additional hook for disabling certain targets in this specific handler.
*
* @param cell <Cell> that represents the target terminal.
*/
isValidTarget(cell) {
return true;
}
/**
* 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 {@link AbstractGraph.getEdgeValidationError}.
*
* @param source <Cell> that represents the source terminal.
* @param target <Cell> that represents the target terminal.
*/
validateConnection(source, target) {
if (!this.isValidTarget(target)) {
return '';
}
return this.graph.getEdgeValidationError(null, source, target);
}
/**
* Hook to return the {@link Image} used for the connection icon of the given
* {@link CellState}. This implementation returns {@link connectImage}.
*
* @param state {@link CellState} whose connect image should be returned.
*/
getConnectImage(state) {
return this.connectImage;
}
/**
* Returns true if the state has a HTML label in the graph's container, otherwise
* it returns {@link oveIconFront}.
*
* @param state <CellState> whose connect icons should be returned.
*/
isMoveIconToFrontForState(state) {
if (state.text && state.text.node.parentNode === this.graph.container) {
return true;
}
return this.moveIconFront;
}
/**
* Creates the array {@link ImageShape}s that represent the connect icons for
* the given {@link CellState}.
*
* @param state {@link CellState} whose connect icons should be returned.
*/
createIcons(state) {
const image = this.getConnectImage(state);
if (image) {
this.iconState = state;
const 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
const bounds = new Rectangle(0, 0, image.width, image.height);
const icon = new ImageShape(bounds, image.src, undefined, undefined, 0);
icon.preserveImageAspect = false;
if (this.isMoveIconToFrontForState(state)) {
icon.dialect = 'strictHtml';
icon.init(this.graph.container);
}
else {
icon.dialect = 'svg';
icon.init(this.graph.getView().getOverlayPane());
// Move the icon back in the overlay pane
if (this.moveIconBack && icon.node.parentNode && icon.node.previousSibling) {
icon.node.parentNode.insertBefore(icon.node, icon.node.parentNode.firstChild);
}
}
icon.node.style.cursor = this.cursorConnect;
// Events transparency
const getState = () => {
return this.currentState ?? state;
};
// Updates the local icon before firing the mouse down event.
const mouseDown = (evt) => {
if (!isConsumed(evt)) {
this.icon = icon;
this.graph.fireMouseEvent(InternalEvent.MOUSE_DOWN, new InternalMouseEvent(evt, getState()));
}
};
InternalEvent.redirectMouseEvents(icon.node, this.graph, getState, mouseDown);
icons.push(icon);
this.redrawIcons(icons, this.iconState);
return icons;
}
return [];
}
/**
* Redraws the given array of {@link ImageShapes}.
*
* @param icons Array of {@link ImageShapes} to be redrawn.
*/
redrawIcons(icons, state) {
if (icons[0] && icons[0].bounds) {
const pos = this.getIconPosition(icons[0], state);
icons[0].bounds.x = pos.x;
icons[0].bounds.y = pos.y;
icons[0].redraw();
}
}
// TODO: Document me! ===========================================================================================================
getIconPosition(icon, state) {
const { scale } = this.graph.getView();
let cx = state.getCenterX();
let cy = state.getCenterY();
if (this.graph.isSwimlane(state.cell)) {
const 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;
const alpha = toRadians(state.style.rotation ?? 0);
if (alpha !== 0) {
const cos = Math.cos(alpha);
const sin = Math.sin(alpha);
const ct = new Point(state.getCenterX(), state.getCenterY());
const pt = getRotatedPoint(new Point(cx, cy), cos, sin, ct);
cx = pt.x;
cy = pt.y;
}
}
return new Point(cx - icon.bounds.width / 2, cy - icon.bounds.height / 2);
}
/**
* Destroys the connect icons and resets the respective state.
*/
destroyIcons() {
for (let i = 0; i < this.icons.length; i += 1) {
this.icons[i].destroy();
}
this.icons = [];
this.icon = null;
this.selectedIcon = null;
this.iconState = null;
}
/**
* 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.
*/
isStartEvent(me) {
return ((this.constraintHandler.currentFocus !== null &&
this.constraintHandler.currentConstraint !== null) ||
(this.previous !== null &&
this.error === null &&
(this.icons.length === 0 || this.icon !== null)));
}
/**
* Handles the event by initiating a new connection.
*/
mouseDown(_sender, me) {
this.mouseDownCounter += 1;
if (this.isEnabled() &&
this.graph.isEnabled() &&
!me.isConsumed() &&
!this.isConnecting() &&
this.isStartEvent(me)) {
if (this.constraintHandler.currentConstraint &&
this.constraintHandler.currentFocus &&
this.constraintHandler.currentPoint) {
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 Point(me.getGraphX(), me.getGraphY());
}
this.edgeState = this.createEdgeState(me);
this.mouseDownCounter = 1;
if (this.waypointsEnabled && !this.shape) {
this.waypoints = [];
this.shape = this.createShape();
if (this.edgeState) {
this.shape.apply(this.edgeState);
}
}
// Stores the starting point in the geometry of the preview
if (!this.previous && this.edgeState && this.edgeState.cell.geometry) {
const pt = this.graph.getPointForEvent(me.getEvent());
this.edgeState.cell.geometry.setTerminalPoint(pt, true);
}
this.fireEvent(new EventObject(InternalEvent.START, { state: this.previous }));
me.consume();
}
this.selectedIcon = this.icon;
this.icon = null;
}
/**
* 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.
*/
isImmediateConnectSource(state) {
return !this.graph.isCellMovable(state.cell);
}
/**
* Hook to return an <CellState> which may be used during the preview.
* This implementation returns null.
*
* Use the following code to create a preview for an existing edge style:
*
* ```javascript
* graph.getPlugin('ConnectionHandler').createEdgeState(me)
* {
* var edge = graph.createEdge(null, null, null, null, null, 'edgeStyle=elbowEdgeStyle');
*
* return new CellState(this.graph.view, edge, this.graph.getCellStyle(edge));
* };
* ```
*/
createEdgeState(me) {
return null;
}
/**
* Returns true if <outlineConnect> is true and the source of the event is the outline shape
* or shift is pressed.
*/
isOutlineConnectEvent(me) {
if (!this.currentPoint)
return false;
const offset = getOffset(this.graph.container);
const evt = me.getEvent();
const clientX = getClientX(evt);
const clientY = getClientY(evt);
const doc = document.documentElement;
const left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
const gridX = this.currentPoint.x - this.graph.container.scrollLeft + offset.x - left;
const gridY = this.currentPoint.y - this.graph.container.scrollTop + offset.y - top;
return (this.outlineConnect &&
!isShiftDown(me.getEvent()) &&
(me.isSource(this.marker.highlight.shape) ||
(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))));
}
/**
* Updates the current state for a given mouse move event by using
* the {@link arker}.
*/
updateCurrentState(me, point) {
this.constraintHandler.update(me, !this.first, false, !this.first || 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 &&
this.marker.highlight.state &&
this.marker.highlight.state.cell === this.constraintHandler.currentFocus.cell &&
this.marker.highlight.shape) {
// 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) {
this.error = this.validateConnection(this.previous.cell, this.constraintHandler.currentFocus.cell);
if (!this.error) {
this.currentState = this.constraintHandler.currentFocus;
}
if (this.error ||
(this.currentState && !this.isCellEnabled(this.currentState.cell))) {
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();
}
if (this.currentState != null && !this.isCellEnabled(this.currentState.cell)) {
this.constraintHandler.reset();
this.marker.reset();
this.currentState = null;
}
const 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 Point(me.getGraphX(), me.getGraphY());
}
const 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) {
const s = this.graph.view.scale;
if (this.constraintHandler.currentConstraint != null &&
this.constraintHandler.currentFocus != null) {
this.marker.highlight.shape.stroke = OUTLINE_HIGHLIGHT_COLOR;
this.marker.highlight.shape.strokeWidth =
OUTLINE_HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint();
}
else if (this.marker.hasValidState()) {
const cell = me.getCell();
// 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
// but ignores cases where parent is used for non-connectable child cells
if (cell &&
cell.isConnectable() &&
this.marker.getValidState() !== me.getState()) {
this.marker.highlight.shape.stroke = 'transparent';
this.currentState = null;
}
else {
this.marker.highlight.shape.stroke = DEFAULT_VALID_COLOR;
}
this.marker.highlight.shape.strokeWidth = HIGHLIGHT_STROKEWIDTH / s / s;
this.marker.highlight.repaint();
}
}
}
}
}
/**
* Returns true if the given cell does not allow new connections to be created.
*/
isCellEnabled(cell) {
return true;
}
/**
* Converts the given point from screen coordinates to model coordinates.
*/
convertWaypoint(point) {
const scale = this.graph.getView().getScale();
const tr = this.graph.getView().getTranslate();
point.x = point.x / scale - tr.x;
point.y = point.y / scale - tr.y;
}
/**
* Called to snap the given point to the current preview. This snaps to the
* first point of the preview if alt is not pressed.
*/
snapToPreview(me, point) {
if (!isAltDown(me.getEvent()) && this.previous) {
const tol = (this.graph.getGridSize() * this.graph.view.scale) / 2;
const tmp = this.sourceConstraint && this.first
? this.first
: new Point(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;
}
}
}
/**
* Handles the event by updating the preview edge or by highlighting
* a possible source or target terminal.
*/
mouseMove(_sender, me) {
if (!me.isConsumed() &&
(this.ignoreMouseDown || this.first || !this.graph.isMouseDown)) {
// Handles special case when handler is disabled during highlight
if (!this.isEnabled() && this.currentState) {
this.destroyIcons();
this.currentState = null;
}
const view = this.graph.getView();
const { scale } = view;
const tr = view.translate;
let point = new Point(me.getGraphX(), me.getGraphY());
this.error = null;
if (this.graph.isGridEnabledEvent(me.getEvent())) {
point = new Point((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 || (this.isEnabled() && this.graph.isEnabled())) &&
(this.shape ||
!this.first ||
Math.abs(me.getGraphX() - this.first.x) > this.graph.getEventTolerance() ||
Math.abs(me.getGraphY() - this.first.y) > this.graph.getEventTolerance())) {
this.updateCurrentState(me, point);
}
if (this.first) {
let constraint = null;
let current = point;
// Uses the current point from the constraint handler if available
if (this.constraintHandler.currentConstraint &&
this.constraintHandler.currentFocus &&
this.constraintHandler.currentPoint) {
constraint = this.constraintHandler.currentConstraint;
current = this.constraintHandler.currentPoint.clone();
}
else if (this.previous &&
!this.graph.isIgnoreTerminalEvent(me.getEvent()) &&
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();
}
}
let pt2 = this.first;
// Moves the connect icon with the mouse
if (this.selectedIcon && this.selectedIcon.bounds) {
const w = this.selectedIcon.bounds.width;
const h = this.selectedIcon.bounds.height;
if (this.currentState && this.targetConnectImage) {
const pos = this.getIconPosition(this.selectedIcon, this.currentState);
this.selectedIcon.bounds.x = pos.x;
this.selectedIcon.bounds.y = pos.y;
}
else {
const bounds = new Rectangle(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) {
this.updateEdgeState(current, constraint);
current =
this.edgeState.absolutePoints[this.edgeState.absolutePoints.length - 1];
pt2 = this.edgeState.absolutePoints[0];
}
else {
if (this.currentState) {
if (!this.constraintHandler.currentConstraint) {
const tmp = this.getTargetPerimeterPoint(this.currentState, me);
if (tmp != null) {
current = tmp;
}
}
}
// Computes the source perimeter point
if (!this.sourceConstraint && this.previous) {
const next = this.waypoints.length > 0 ? this.waypoints[0] : current;
const tmp = this.getSourcePerimeterPoint(this.previous, next, me);
if (tmp) {
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 && this.movePreviewAway && current) {
let tmp = pt2;
if (this.edgeState && this.edgeState.absolutePoints.length >= 2) {
const tmp2 = this.edgeState.absolutePoints[this.edgeState.absolutePoints.length - 2];
if (tmp2) {
tmp = tmp2;
}
}
if (tmp) {
const dx = current.x - tmp.x;
const dy = current.y - tmp.y;
const 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) {
const dx = Math.abs(me.getGraphX() - this.first.x);
const dy = Math.abs(me.getGraphY() - this.first.y);
if (dx > this.graph.getEventTolerance() ||
dy > this.graph.getEventTolerance()) {
this.shape = this.createShape();
if (this.edgeState) {
this.shape.apply(this.edgeState);
}
// Revalidates current connection
this.updateCurrentState(me, point);
}
}
// Updates the points in the preview edge
if (this.shape) {
if (this.edgeState) {
this.shape.points = this.edgeState.absolutePoints;
}
else {
let pts = [pt2];
if (this.waypoints.length > 0) {
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) {
this.graph.container.style.cursor = this.cursor;
}
InternalEvent.consume(me.getEvent());
me.consume();
}
else if (!this.isEnabled() || !this.graph.isEnabled()) {
this.constraintHandler.reset();
}
else if (this.previous !== this.currentState && !this.edgeState) {
this.destroyIcons();
// Sets the cursor on the current shape
if (this.currentState &&
!this.error &&
!this.constraintHandler.currentConstraint) {
this.icons = this.createIcons(this.currentState);
if (this.icons.length === 0) {
this.currentState.setCursor(this.cursorConnect);
me.consume();
}
}
this.previous = this.currentState;
}
else if (this.previous === this.currentState &&
this.currentState != null &&
this.icons.length === 0 &&
!this.graph.isMouseDown) {
// Makes sure that no cursors are changed
me.consume();
}
if (!this.graph.isMouseDown && this.currentState != null && this.icons != null) {
let hitsIcon = false;
const target = me.getSource();
for (let i = 0; i < this.icons.length && !hitsIcon; i += 1) {
hitsIcon =
target === this.icons[i].node ||
// @ts-ignore parentNode should exist.
(!!target && target.parentNode === this.icons[i].node);
}
if (!hitsIcon) {
this.updateIcons(this.currentState, this.icons, me);
}
}
}
else {
this.constraintHandler.reset();
}
}
/**
* Updates {@link edgeState}.
*/
updateEdgeState(current, constraint) {
if (!this.edgeState)
return;
// TODO: Use generic method for writing constraint to style
if (this.sourceConstraint && this.sourceConstraint.point) {
this.edgeState.style.exitX = this.sourceConstraint.point.x;
this.edgeState.style.exitY = this.sourceConstraint.point.y;
}
if (constraint && constraint.point) {
this.edgeState.style.entryX = constraint.point.x;
this.edgeState.style.entryY = constraint.point.y;
}
else {
this.edgeState.style.entryX = 0;
this.edgeState.style.entryY = 0;
}
this.edgeState.absolutePoints = [null, this.currentState != null ? null : current];
if (this.sourceConstraint) {
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
const realPoints = [];
for (let i = 0; i < this.waypoints.length; i += 1) {
const 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);
}
/**
* Returns the perimeter point for the given target state.
*
* @param state <CellState> that represents the target cell state.
* @param _me {@link MouseEvent} that represents the mouse move.
*/
getTargetPerimeterPoint(state, _me) {
let result = null;
const { view } = state;
const targetPerimeter = view.getPerimeterFunction(state);
if (targetPerimeter && this.previous && this.edgeState) {
const next = this.waypoints.length > 0
? this.waypoints[this.waypoints.length - 1]
: new Point(this.previous.getCenterX(), this.previous.getCenterY());
const tmp = targetPerimeter(view.getPerimeterBounds(state), this.edgeState, next, false);
if (tmp) {
result = tmp;
}
}
else {
result = new Point(state.getCenterX(), state.getCenterY());
}
return result;
}
/**
* Hook to update the icon position(s) based on a mouseOver event. This is
* an empty implementation.
*
* @param state <CellState> that represents the target cell state.
* @param next {@link Point} that represents the next point along the previewed edge.
* @param me {@link MouseEvent} that represents the mouse move.
*/
getSourcePerimeterPoint(state, next, me) {
let result = null;
const { view } = state;
const sourcePerimeter = view.getPerimeterFunction(state);
const c = new Point(state.getCenterX(), state.getCenterY());
if (sourcePerimeter) {
const theta = state.style.rotation ?? 0;
const rad = -theta * (Math.PI / 180);
if (theta !== 0) {
next = getRotatedPoint(new Point(next.x, next.y), Math.cos(rad), Math.sin(rad), c);
}
let tmp = sourcePerimeter(view.getPerimeterBounds(state), state, next, false);
if (tmp) {
if (theta !== 0) {
tmp = getRotatedPoint(new Point(tmp.x, tmp.y), Math.cos(-rad), Math.sin(-rad), c);
}
result = tmp;
}
}
else {
result = c;
}
return result;
}
/**
* Hook to update the icon position(s) based on a mouseOver event. This is
* an empty implementation.
*
* @param state <CellState> under the mouse.
* @param icons Array of currently displayed icons.
* @param me {@link MouseEvent} that contains the mouse event.
*/
updateIcons(state, icons, me) {
// empty
}
/**
* 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.
*/
isStopEvent(me) {
return !!me.getState();
}
/**
* Adds the waypoin