Class ConnectionHandler

Graph event handler that creates new connections. Uses CellMarker for finding and highlighting the source and target vertices and factoryMethod to create the edge instance.

This handler is enabled using Graph.setConnectable.

Example:

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

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 CellMarker 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, 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, 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 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:

mxConstants.DEFAULT_HOTSPOT = 1;

In order to avoid confusion with the highlighting, the highlight color should not be used with a connect image:

mxConstants.HIGHLIGHT_COLOR = null;

To install the image, the connectImage field of the ConnectionHandler must be assigned a new Image instance:

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 connect. The cell property contains the inserted edge, the event and target properties contain the respective arguments that were passed to connect (where target corresponds to the dropTarget argument). Finally, the terminal 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, Graph.getConnectionConstraint can be used. To resolve the port IDs, use <Transactions.getCell>.

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 reset method is invoked.

Hierarchy (view full)

EventSource
- ConnectionHandler

Implements

GraphPlugin

Index

Constructors

constructor

Constructors

constructor

new ConnectionHandler(graph, factoryMethod?): ConnectionHandler
Constructs an event handler that connects vertices using the specified factory method to create the new edges.
Parameters
- graph: Graph
  Reference to the enclosing Graph.
- factoryMethod: null | FactoryMethod = null
  Optional function to create the edge. The function takes the source and target Cell as the first and second argument and an optional cell style from the preview as the third argument. It returns the Cell that represents the new edge.
Returns ConnectionHandler
Overrides EventSource.constructor
- Defined in view/handler/ConnectionHandler.ts:388

Properties

cell

cell: null | Cell = null

changeHandler

changeHandler: ((sender: Listenable) => void)

Holds the change event listener for later removal.

connectIconOffset

connectIconOffset: Point = ...

Holds the offset for connect icons during connection preview. Default is mxPoint(0, Constants#TOOLTIP_VERTICAL_OFFSET). Note that placing the icon under the mouse pointer with an offset of (0,0) will affect hit detection.

connectImage

connectImage: null | ImageBox = null

Image that is used to trigger the creation of a new connection. This is used in createIcons.

Default

null

constraintHandler

constraintHandler: ConstraintHandler

Holds the ConstraintHandler used for drawing and highlighting constraints.

createTarget

createTarget: boolean = false

Specifies if 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 will be called before the connection is created between the source cell and the newly created vertex in , which can be overridden to create a new target. Default is false.

currentPoint

currentPoint: null | Point = null

currentState

currentState: null | CellState = null

cursor

cursor: null | string = null

Specifies the cursor to be used while the handler is active. Default is null.

drillHandler

drillHandler: ((sender: Listenable) => void)

Holds the drill event listener for later removal.

edgeState

edgeState: null | CellState = null

Optional that represents the preview edge while the handler is active. This is created in .

enabled

enabled: boolean = false

Specifies if events are handled. Default is false.

error

error: null | string = null

Holds the current validation error while connections are being created.

escapeHandler

escapeHandler: (() => void)

eventListeners

eventListeners: EventListenerObject[] = []

Holds the event names and associated listeners in an array. The array contains the event name followed by the respective listener for each registered listener.

eventsEnabled

eventsEnabled: boolean = true

Specifies if events can be fired. Default is true.

eventSource

eventSource: null | EventTarget = null

Optional source for events. Default is null.

factoryMethod

factoryMethod: null | FactoryMethod = null

Function that is used for creating new edges. The function takes the source and target Cell as the first and second argument and returns a new Cell that represents the edge. This is used in createEdge.

first

first: null | Point = null

Holds the Point where the mouseDown took place while the handler is active.

graph

graph: Graph

Reference to the enclosing Graph.

icon

icon: null | ImageShape = null

icons

icons: ImageShape[] = []

iconState

iconState: null | CellState = null

ignoreMouseDown

ignoreMouseDown: boolean = 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.

insertBeforeSource

insertBeforeSource: boolean = false

Specifies if new edges should be inserted before the source vertex in the cell hierarchy. Default is false for backwards compatibility.

livePreview

livePreview: boolean = 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 .)

marker

marker: CellMarker

Holds the CellMarker used for finding source and target cells.

mouseDownCounter

mouseDownCounter: number = 0

Counts the number of mouseDown events since the start. The initial mouse down event counts as 1.

moveIconBack

moveIconBack: boolean = 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.

moveIconFront

moveIconFront: boolean = false

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 moveIconBack when set to true.

Default

false

movePreviewAway

movePreviewAway: boolean = false

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

originalPoint

originalPoint: null | Point = null

outlineConnect

outlineConnect: boolean = 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

previous: null | CellState = null

select

select: boolean = true

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

selectedIcon

selectedIcon: null | ImageShape = null

shape

shape: null | Shape = null

sourceConstraint

sourceConstraint: null | ConnectionConstraint = null

targetConnectImage

targetConnectImage: boolean = false

Specifies if the connect icon should be centered on the target state while connections are being previewed. Default is false.

waypoints

waypoints: Point[] = []

waypointsEnabled

waypointsEnabled: boolean = false

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

`Static`pluginId

pluginId: string = 'ConnectionHandler'

Methods

addListener

addListener(name, funct): void
Binds the specified function to the given event name. If no event name is given, then the listener is registered for all events.

The parameters of the listener are the sender and an EventObject.
Parameters
- name: string
- funct: Function
Returns void
Inherited from EventSource.addListener
- Defined in view/event/EventSource.ts:102

addWaypointForEvent

addWaypointForEvent(me): void
Adds the waypoint for the given event to .
Parameters
- me: InternalMouseEvent
Returns void
- Defined in view/handler/ConnectionHandler.ts:1443

checkConstraints

checkConstraints(c1, c2): boolean
Returns true if the connection for the given constraints is valid. This implementation returns true if the constraints are not pointing to the same fixed connection point.
Parameters
- c1: null | ConnectionConstraint
- c2: null | ConnectionConstraint
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:1469

connect

connect(source, target, evt, dropTarget?): void
Connects the given source and target using a new edge. This implementation uses to create the edge.
Parameters
- source: null | Cell
  that represents the source terminal.
- target: null | Cell
  that represents the target terminal.
- evt: MouseEvent
  Mousedown event of the connect gesture.
- dropTarget: null | Cell = null
  that represents the cell under the mouse when it was released.
Returns void
- Defined in view/handler/ConnectionHandler.ts:1628

convertWaypoint

convertWaypoint(point): void
Converts the given point from screen coordinates to model coordinates.
Parameters
- point: Point
Returns void
- Defined in view/handler/ConnectionHandler.ts:986

createEdge

createEdge(value, source, target, style?): Cell
Creates and returns a new edge using 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: any
  Value to be used for creating the edge.
- source: null | Cell
  that represents the source terminal.
- target: null | Cell
  that represents the target terminal.
- style: CellStyle = {}
  Optional style from the preview edge.
Returns Cell
- Defined in view/handler/ConnectionHandler.ts:1920

createEdgeState

createEdgeState(me?): null | CellState
Hook to return an which may be used during the preview. This implementation returns null.

Use the following code to create a preview for an existing edge style:
```
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));
};
```
Parameters
- Optionalme: InternalMouseEvent
Returns null | CellState
- Defined in view/handler/ConnectionHandler.ts:822

createIcons

createIcons(state): ImageShape[]
Creates the array ImageShapes that represent the connect icons for the given CellState.
Parameters
- state: CellState
  CellState whose connect icons should be returned.
Returns ImageShape[]
- Defined in view/handler/ConnectionHandler.ts:616

createMarker

createMarker(): ConnectionHandlerCellMarker
Creates and returns the CellMarker used in arker.

Returns ConnectionHandlerCellMarker
- Defined in view/handler/ConnectionHandler.ts:523

createShape

createShape(): Shape
Creates the preview shape for new connections.

Returns Shape
- Defined in view/handler/ConnectionHandler.ts:493

createTargetVertex

createTargetVertex(evt, source): Cell
Hook method for creating new vertices on the fly if no target was under the mouse. This is only called if is true and returns null.
Parameters
- evt: MouseEvent
  Mousedown event of the connect gesture.
- source: Cell
  that represents the source terminal.
Returns Cell
- Defined in view/handler/ConnectionHandler.ts:1854

destroyIcons

destroyIcons(): void
Destroys the connect icons and resets the respective state.

Returns void
- Defined in view/handler/ConnectionHandler.ts:717

drawPreview

drawPreview(): void
Redraws the preview edge using the color and width returned by and .

Returns void
- Defined in view/handler/ConnectionHandler.ts:1577

fireEvent

fireEvent(evt, sender?): void
Dispatches the given event to the listeners which are registered for the event. The sender argument is optional. The current execution scope ("this") is used for the listener invocation (see Utils#bind).

Example:
```
fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN))
```
Parameters
- evt: EventObject
  EventObject that represents the event.
- sender: null | EventTarget = null
  Optional sender to be passed to the listener. Default value is the return value of .
Returns void
Inherited from EventSource.fireEvent
- Defined in view/event/EventSource.ts:136

getAlignmentTolerance

getAlignmentTolerance(evt?): number
Returns the tolerance for aligning new targets to sources. This returns the grid size / 2.
Parameters
- Optionalevt: MouseEvent
Returns number
- Defined in view/handler/ConnectionHandler.ts:1903

getConnectImage

getConnectImage(state): null | ImageBox
Hook to return the Image used for the connection icon of the given CellState. This implementation returns connectImage.
Parameters
- state: CellState
  CellState whose connect image should be returned.
Returns null | ImageBox
- Defined in view/handler/ConnectionHandler.ts:593

getEdgeColor

getEdgeColor(valid): "#00FF00" | "#FF0000"
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
  Boolean indicating if the color for a valid edge should be returned.
Returns "#00FF00" | "#FF0000"
- Defined in view/handler/ConnectionHandler.ts:1603

getEdgeWidth

getEdgeWidth(valid): number
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
  Boolean indicating if the width for a valid edge should be returned.
Returns number
- Defined in view/handler/ConnectionHandler.ts:1614

getEventSource

getEventSource(): null | EventTarget
Returns .

Returns null | EventTarget
Inherited from EventSource.getEventSource
- Defined in view/event/EventSource.ts:85

getIconPosition

getIconPosition(icon, state): Point
Parameters
- icon: ImageShape
- state: CellState
Returns Point
- Defined in view/handler/ConnectionHandler.ts:688

getSourcePerimeterPoint

getSourcePerimeterPoint(state, next, me): null | Point
Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.
Parameters
- state: CellState
  that represents the target cell state.
- next: Point
  Point that represents the next point along the previewed edge.
- me: InternalMouseEvent
  MouseEvent that represents the mouse move.
Returns null | Point
- Defined in view/handler/ConnectionHandler.ts:1378

getTargetPerimeterPoint

getTargetPerimeterPoint(state, _me): null | Point
Returns the perimeter point for the given target state.
Parameters
- state: CellState
  that represents the target cell state.
- _me: InternalMouseEvent
  MouseEvent that represents the mouse move.
Returns null | Point
- Defined in view/handler/ConnectionHandler.ts:1343

insertEdge

insertEdge(parent, id, value, source, target, style): Cell
Creates, inserts and returns the new edge for the given parameters. This implementation does only use if is defined, otherwise Graph#insertEdge will be used.
Parameters
- parent: Cell
- id: string
- value: any
- source: null | Cell
- target: null | Cell
- style: CellStyle
Returns Cell
- Defined in view/handler/ConnectionHandler.ts:1829

isCellEnabled

isCellEnabled(cell): boolean
Returns true if the given cell does not allow new connections to be created.
Parameters
- cell: Cell
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:979

isConnectableCell

isConnectableCell(cell): boolean
Returns true if the given cell is connectable. This is a hook to disable floating connections. This implementation returns true.
Parameters
- cell: Cell
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:516

isConnecting

isConnecting(): boolean
Returns true if the source terminal has been clicked and a new connection is currently being previewed.

Returns boolean
- Defined in view/handler/ConnectionHandler.ts:547

isCreateTarget

isCreateTarget(evt): boolean
Returns .
Parameters
- evt: Event
  Current active native pointer event.
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:479

isEnabled

isEnabled(): boolean
Returns true if events are handled. This implementation returns .

Returns boolean
- Defined in view/handler/ConnectionHandler.ts:440

isEventsEnabled

isEventsEnabled(): boolean
Returns .

Returns boolean
Inherited from EventSource.isEventsEnabled
- Defined in view/event/EventSource.ts:71

isImmediateConnectSource

isImmediateConnectSource(state): boolean
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.
Parameters
- state: CellState
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:803

isInsertBefore

isInsertBefore(edge, source, target, evt, dropTarget): boolean
Returns for non-loops and false for loops.
Parameters
- edge: Cell
  that represents the edge to be inserted.
- source: null | Cell
  that represents the source terminal.
- target: null | Cell
  that represents the target terminal.
- evt: MouseEvent
  Mousedown event of the connect gesture.
- dropTarget: null | Cell
  that represents the cell under the mouse when it was released.
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:464

isMoveIconToFrontForState

isMoveIconToFrontForState(state): boolean
Returns true if the state has a HTML label in the graph's container, otherwise it returns oveIconFront.
Parameters
- state: CellState
  whose connect icons should be returned.
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:603

isOutlineConnectEvent

isOutlineConnectEvent(me): boolean
Returns true if is true and the source of the event is the outline shape or shift is pressed.
Parameters
- me: InternalMouseEvent
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:830

isStartEvent

isStartEvent(me): boolean
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 are not null, or and are not null and is null or and are not null.
Parameters
- me: InternalMouseEvent
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:735

isStopEvent

isStopEvent(me): boolean
Returns true if the given mouse up event should stop this handler. The connection will be created if is null. Note that this is only called if is true. This implemtation returns true if there is a cell state in the given event.
Parameters
- me: InternalMouseEvent
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:1436

isValidSource

isValidSource(cell, me): boolean
Returns Graph#isValidSource for the given source terminal.
Parameters
- cell: Cell
  that represents the source terminal.
- me: InternalMouseEvent
  MouseEvent that is associated with this call.
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:557

isValidTarget

isValidTarget(cell): boolean
Returns true. The call to Graph#isValidTarget is implicit by calling Graph#getEdgeValidationError in . This is an additional hook for disabling certain targets in this specific handler.
Parameters
- cell: Cell
  that represents the target terminal.
Returns boolean
- Defined in view/handler/ConnectionHandler.ts:568

mouseDown

mouseDown(sender, me): void
Handles the event by initiating a new connection.
Parameters
- sender: EventSource
- me: InternalMouseEvent
Returns void
- Defined in view/handler/ConnectionHandler.ts:748

mouseMove

mouseMove(sender, me): void
Handles the event by updating the preview edge or by highlighting a possible source or target terminal.
Parameters
- sender: EventSource
- me: InternalMouseEvent
Returns void
- Defined in view/handler/ConnectionHandler.ts:1020

mouseUp

mouseUp(sender, me): void
Handles the event by inserting the new connection.
Parameters
- sender: EventSource
- me: InternalMouseEvent
Returns void
- Defined in view/handler/ConnectionHandler.ts:1485

onDestroy

onDestroy(): void
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 Graph.

Returns void
Implementation of GraphPlugin.onDestroy
- Defined in view/handler/ConnectionHandler.ts:1951

redrawIcons

redrawIcons(icons, state): void
Redraws the given array of ImageShapes.
Parameters
- icons: ImageShape[]
  Array of ImageShapes to be redrawn.
- state: CellState
Returns void
- Defined in view/handler/ConnectionHandler.ts:678

removeListener

removeListener(funct): void
Removes all occurrences of the given listener from .
Parameters
- funct: Function
Returns void
Inherited from EventSource.removeListener
- Defined in view/event/EventSource.ts:109

reset

reset(): void
Resets the state of this handler.

Returns void
- Defined in view/handler/ConnectionHandler.ts:1547

selectCells

selectCells(edge, target): void
Selects the given edge after adding a new connection. The target argument contains the target vertex if one has been inserted.
Parameters
- edge: null | Cell
- target: null | Cell
Returns void
- Defined in view/handler/ConnectionHandler.ts:1820

setCreateTarget

setCreateTarget(value): void
Sets .
Parameters
- value: boolean
Returns void
- Defined in view/handler/ConnectionHandler.ts:486

setEnabled

setEnabled(enabled): void
Enables or disables event handling. This implementation updates .
Parameters
- enabled: boolean
  Boolean that specifies the new enabled state.
Returns void
- Defined in view/handler/ConnectionHandler.ts:450

setEventsEnabled

setEventsEnabled(value): void
Sets .
Parameters
- value: boolean
Returns void
Inherited from EventSource.setEventsEnabled
- Defined in view/event/EventSource.ts:78

setEventSource

setEventSource(value): void
Sets .
Parameters
- value: null | EventTarget
Returns void
Inherited from EventSource.setEventSource
- Defined in view/event/EventSource.ts:92

snapToPreview

snapToPreview(me, point): void
Called to snap the given point to the current preview. This snaps to the first point of the preview if alt is not pressed.
Parameters
- me: InternalMouseEvent
- point: Point
Returns void
- Defined in view/handler/ConnectionHandler.ts:998

start

start(state, x, y, edgeState?): void
Starts a new connection for the given state and coordinates.
Parameters
- state: CellState
- x: number
- y: number
- OptionaledgeState: CellState
Returns void
- Defined in view/handler/ConnectionHandler.ts:530

updateCurrentState

updateCurrentState(me, point): void
Updates the current state for a given mouse move event by using the arker.
Parameters
- me: InternalMouseEvent
- point: Point
Returns void
- Defined in view/handler/ConnectionHandler.ts:862

updateEdgeState

updateEdgeState(current, constraint): void
Updates .
Parameters
- current: null | Point
- constraint: null | ConnectionConstraint
Returns void
- Defined in view/handler/ConnectionHandler.ts:1269

updateIcons

updateIcons(state, icons, me): void
Hook to update the icon position(s) based on a mouseOver event. This is an empty implementation.
Parameters
- state: CellState
  under the mouse.
- icons: ImageShape[]
  Array of currently displayed icons.
- me: InternalMouseEvent
  MouseEvent that contains the mouse event.
Returns void
- Defined in view/handler/ConnectionHandler.ts:1426

updatePreview

updatePreview(valid): void
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
  Boolean indicating if the color for a valid edge should be returned.
Returns void
- Defined in view/handler/ConnectionHandler.ts:1589

validateConnection

validateConnection(source, target): null | string
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 Graph#getEdgeValidationError.
Parameters
- source: Cell
  that represents the source terminal.
- target: Cell
  that represents the target terminal.
Returns null | string
- Defined in view/handler/ConnectionHandler.ts:580

Class ConnectionHandler

Using images to trigger connections

Events

InternalEvent.START

InternalEvent.CONNECT

InternalEvent.RESET

Hierarchy (view full)

Implements

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns ConnectionHandler

Properties

cell

changeHandler

connectIconOffset

connectImage

Default

constraintHandler

createTarget

currentPoint

currentState

cursor

drillHandler

edgeState

enabled

error

escapeHandler

eventListeners

eventsEnabled

eventSource

factoryMethod

first

graph

icon

icons

iconState

ignoreMouseDown

insertBeforeSource

livePreview

marker

mouseDownCounter

moveIconBack

moveIconFront

Default

movePreviewAway

Default

originalPoint

outlineConnect

Default

previous

select

selectedIcon

shape

sourceConstraint

targetConnectImage

waypoints

waypointsEnabled

StaticpluginId

Methods

addListener

Parameters

Returns void

addWaypointForEvent

Parameters

Returns void

checkConstraints

Parameters

Returns boolean

connect

Parameters

Returns void

convertWaypoint

Parameters

Returns void

createEdge

`Static`pluginId