Skip to main content

Home > @jsplumbtoolkit/browser-ui

browser-ui package

Classes

ClassDescription
AbsoluteBackedLayoutBase class for layouts that want to be backed with an absolute layout, ie. if for a given vertex there is positioning data available in the dataset, that positioning data should be used instead of the layout's computed position.
AbsoluteLayoutThis layout uses left and top positions in your data model to position elements, unless you provide a locationFunction in its options.
AbstractHierarchicalLayout
AbstractLayoutBase class for all layouts.
ActiveFilteringPlugin
AddGroupMemberAction
ArrowOverlay
AutoSaver
BackgroundPluginOffers a means to manage backgrounds for a Surface.
BalloonLayout
Base
BezierConnectorBezier connector. In 7.x this will be removed and you'll need to use CONNECTOR_TYPE_CUBIC_BEZIER to refer to this connector type.
BlankEndpoint
BrowserJsPlumbInstanceJsPlumbInstance that renders to the DOM in a browser, and supports dragging of elements/connections.
BrowserUIConcrete instance of JsPlumbToolkit that uses the templates-2 package as its renderer.
BrowserUIBaseBase instance of the Toolkit that uses ajax to load data asynchronously. This is extended in the various integrations and in the vanilla packages.
BrowserUIClipboardA clipboard to use with a Surface widget, offering methods to copy data and to paste it.
BrowserUIMagnetizer
BrowserUIModelA Model describes the appearance and behaviour of a set of Nodes, Edges, Ports and Groups. You do not create one of these directly; instead you pass a definition to a jsPlumbToolkit.render or jsPlumbToolkitBrowserUI.newInstance() call. Although the Model has the same syntax in each context, you are encouraged to configure model-specific things in the Model you pass to the newInstance method (such as, which Nodes/Ports can be connected to which others, what is the maximum number of connections, etc), and view-specific things (such as css classes, paint styles, connector appearance etc) to the model you pass to the render method. The render method automatically merges in a Node/Port/Edge definition from a Model defined on the associated Toolkit, if there is one. Only the Surface widget provides this. The Toolkit instance creates a Model but it is headless.
BrowserUITestSupport
CatchAllEventHandler
CircularLayoutA layout that places vertices in a circle, optionally with one at the center.
ClipboardOffers methods to copy and paste data from/to a Toolkit instance. This class is abstract and is subclassed to concrete implementations by UI specific packages, of which currently there is only @jsplumbtoolkit/browser-ui-copy-paste. In the future if alternate renderers are written for the Toolkit it is expected that an implementation of the Clipboard would be one of the inclusions.
Cluster
ComponentBase class for Endpoint and Connection.
ConnectionDragSelector
ConnectionImpl
ConnectionSelection
ControlsComponentSimple component that was created for our demonstrations. We decided to include it in the Toolkit since it may of some use to others.
CustomOverlay
DialogsA set of Dialogs.
DialogsBaseSimple dialog library. Created for use in the Toolkit demonstrations.
DiamondOverlay
DotEndpoint
Drag
DragGroupsPlugin

Provides the ability to assign elements to groups for dragging purposes: when a member of some group is dragged, the other elements of the group can be dragged along with it.

The core concept is of the "DragGroup", which is basically just a tag. Each member of a group can belong to the group in one of two roles:

- **active** The element, when dragged, causes all of the other members of the group to be dragged too. - **passive** The element, when dragged, will not cause any of the other members of the group to be dragged. But when an active member of the group is dragged, passive elements are dragged at the same time.

When you configure this plugin you are required to provide an assignDragGroup function, whose signature is:

assignDragGroup:(v:Vertex) => DragGroupSpec

The return value DragGroupSpec may be either:

- a string, in which case the element is added to the drag group with the given name in an active role - an object containing id and active which you can specify the active/passive role - null, in which case the element is not added to a drag group.

DrawingToolsPlugin
DropManagerOffers a means to configure some element in the UI to act as a source for drag/drop of new nodes/groups. This is a concrete class that can be used standalone, but note that it is extended by the SurfaceDropManager, and for the vast majority of applications, SurfaceDropManager will be the class you want to use. The difference between the two classes is that DropManager provides a means for you to respond to items being dropped onto a surface canvas, but it does not do anything when such an event occurs other than inform you, via a set of callbacks, whereas the SurfaceDropManager provides implementations of these callbacks that manipulate the canvas and the data model.
Edge
EdgeGeometryTransformer
EdgePathEditorEditor for edge paths. Currently support Bezier, StateMachine and Orthogonal connectors.
EdgeRoutingPluginA plugin that can ingest the RoutingInformation created by a HierarchyLayout (as of 6.9.0 only this layout generates routing info), and then route edges according to the data. You must be using a Segmented connector if you use this plugin.
EdgeTypePicker

Helper class that renders a set of edge styles to the DOM and offers a callback method for when one is selected via a mouse click.

This was created as part of the demonstration applications for version 6.2.0 of the Toolkit and since it seemed useful for other applications we're shipping it in the Toolkit package.

ElementDragger

A helper class that uses the Toolkit's drag management classes to offer a means to make arbitrary DOM elements draggable.

You can pass a single element or an array of elements to the constructor.

ElementDragHandler
EmptyLayoutA layout that has no opinions whatsoever about where nodes should be placed. Everything is placed at [0,0] and assumed to have a width and height of 0. This layout is a placeholder.
EndpointImpl
EndpointRepresentationSuperclass for all types of Endpoint. This class is renderer agnostic, as are any subclasses of it.
EndpointSelection
EventGeneratorBase class for classes that wish to support binding and firing of events.
EventManager
ExtentsManagerA helper class that can track
ForceDirectedLayoutA layout that treats edges as springs, and places each vertex in proximity to other vertices to which it is connected. This is a rewrite of the original Spring layout, with several placement enhancements and typically a shorter run time. As of 5.7.0, existing users of the Spring layout are encouraged to switch to this layout, and new users are encouraged to prefer this layout over the Spring layout.
GeneratedGridBackground

A background that generates an SVG grid based upon the current content bounds, ensuring that there is always a grid visible underneath the content. The grid may consist of lines or dots - control this via the gridType option.

The size of the grid can be mandated in the options for the background, or it can be extracted from the surface.

You can hide/show the background grid via the hide(), show(), toggle() or setVisible(boolean) methods.

Graph
GridLayout

A layout that places elements into a grid, optionally with fixed number of rows or columns. If you provide a fixed value for both rows and columns only the rows value will be honoured.

Elements are placed such that they are centered in their cell, where the width and height of each cell is fixed, and is determined by the maximum width/height of all the vertices in the layout. For that reason if you have a dataset where the size of your vertices varies largely you may not get the best results - there could be a lot of whitespace.

Group
GroupCollapseAction
GroupExpandAction
GroupLayoutAdapter

Layout adapter that operates on a single group. getElements returns member of this group. filter filters out vertices that are not children of this group.

TODO why exactly does filter have to exist here? If getElements only returns group members, what's the filter for?

GroupManager
GroupRemoveAction
GroupSizeChangedAction
HierarchicalLayoutA layout that places vertices into a series of layers.
HierarchyLayout

A new version of a hierarchy layout, which can better handle upstream links and multiple parents. This layout runs in 3 stages -

1. placement of nodes into layers 2. reordering nodes in layers to minimise edge crossing 3. placement of nodes into final layout

ImageExporterExports the contents of some Surface as an image. The default supported image type in browsers is image/png but you'll probably find image/jpeg also works, although that is not under jsPlumb's control.
ImageExporterUI
InspectorOffers a simple means to inspect and change the values in some object or set of objects.
JsPlumbInstance
JsPlumbListModels a list of elements that is scrollable, and connections to the elements contained in the list are proxied onto the top of bottom edge of the list element whenever their source/target is not within the list element's current viewport.
JsPlumbListManagerProvides methods to create/destroy scrollable lists.
JsPlumbToolkitCore Toolkit functionality. This class is extended by renderer specific subclasses.
jsPlumbToolkitTestHarness
LabelDragManager
LabelManipulator
LabelOverlay
LabelSpacer
Lasso
LassoPluginA plugin that allows the user to select multiple elements with the mouse.
LightweightFloatingAnchor
LightweightRouter
Magnetizer

Offers a means to apply 'magnetization' to some list of elements, pushing them apart so that they do not overlap. For a given run of the magnetizer there is the concept of a "focus" rectangle. The center of this rectangle is the point from which magnetization occurs, with elements being pushed out radially from this point. There are a few different scenarios:

- execute magnetizer with a given origin, and affect all elements - execute magnetizer on all elements, having first computed the center of them - execute magnetizer using a specific element as the focus

MiniviewPluginMiniview plugin for Surface. In previous versions of jsplumb this was embedded in the Surface.
Node
OptimisticEventGeneratorSubclass of EventGenerator with a default implementation of shouldFireEvent, which returns true always.
OrthogonalConnectorOrthogonal connector. In 7.x this will be removed and you'll need to use CONNECTOR_TYPE_ORTHOGONAL to refer to this connector type.
Overlay
PanButtonsPlugin
PathModels the path between two Nodes/Ports, which consists of a series of [Group/Node/Port, Edge] pairs.
PathTransport
PinchListener
PlainArrowOverlay
Port
PortAddAction
PortRemoveAction
PrintHandler
RectangleEndpoint
RemoveGroupMemberAction
SegmentedConnectorSegmented connector. In 7.x this will be removed and you'll need to use CONNECTOR_TYPE_SEGMENTED to refer to this connector type.
SelectionA selection is a group of vertices and edges, upon which you can perform bulk operations.
ShapeLibraryImplDefault ShapeLibrary implementation. Use one of these to manage a set of shapes for rendering into your vertices and/or for rendering as a palette from which the user can drag new objects.
ShapeLibraryPaletteA palette for drag/drop that renders the contents of a shape library.
SimpleBackgroundA background consisting of a single image.
SnaplinesPluginShows snaplines when objects are being dragged.
StateMachineConnectorStateMachine connector. In 7.x this will be removed and you'll need to use CONNECTOR_TYPE_QUADRATIC_BEZIER to refer to this connector type.
StatePlugin
StraightConnectorStraight connector. In 7.x this will be removed; you can use CONNECTOR_TYPE_SEGMENTED instead.
Surface
SurfaceAnimator

SurfaceAnimator offers a few methods for animating parts of a Surface widget:

- animateToPosition animates some vertex to a new position - tracePath animates an overlay along the path from some vertex to some other vertex - traceEdge animates an overlay along one edge

SurfaceDropManagerSurfaceDropManager wraps DropManager with default implementations of the various callbacks. Most users will want to use this class rather than DropManager, as it operates at a higher level.
SvgExporter

An exporter for Surfaces. This was first released in version 6.6.0 and currently has a few caveats attached to its usage:

- Primarily, the exporter is expected to be used with a Surface that has a ShapeLibrary set on it. The shape library is used to render appropriate SVG elements for each node. If you use this exporter on a Surface that does not have a ShapeLibrary attached, a default SVG rectangle will be used to represent each node.

- When using a shape library it is expected that your node data will contain left, top, w and h properties, defining the dimensions of the node.

- If you want to see labels on exported edges, you must ensure that you set useHtmlElement to "false" on a label overlay spec. Also, if you use the label shorthand property you need to set useHtmlLabel:false on the edge definition.

6.6.0

SvgExporterUI
TerminusAddAction
TerminusRemoveAction
TiledBackground
UIGroup
UINode
UIPathA wrapper around the Toolkit's path object, which offers a few DOM specific methods.
UIState
UiStatesBrowserUIModel
UiStatesPlugin
VanillaInspectorAn inspector that renders to a nominated DOM element, using the Toolkit's default template renderer. You have to provide a templateResolver which, for a given object, can return a template in the Toolkit's default template syntax.
Vertex
ViewportModels the positions of the elements a given jsPlumb instance is tracking. Users of the API should not need to interact directly with a Viewport.
xml

Enumerations

EnumerationDescription
AnchorLocationsDefault anchor locations.
AnimationClassesThe css classes that are used when animating an overlay along some path.
AnimationEvents
AnimationPhasesThe phases of an overlay path animation.
BackgroundTypes
ContainmentTypeContainment types for draggables: parent: constrain movement so at least some part of the drag element is within its parent parentEnclosed: constrain movement to the entire drag element is within its parent notNegative: dont allow any part of the drag element to be in the negative x or y axis of its parent.
ElementTypes
FaceValues
GridLayoutHorizontalAlignmentsPossible values for grid layout horizontal alignment
GridLayoutOrientationsOptions for grid layout orientation.
GridLayoutVerticalAlignmentsPossible values for grid layout vertical alignment
GridTypes
HierarchicalLayoutOrientationsAxis orientations for hierarchical layout
HierarchyLayoutAlignmentValuesAllowed values for hierarchy layout alignment
HierarchyLayoutAxisValuesAllowed values for hierarchy layout axis.
OrthogonalRouterModesAvailable values for OrthogonalRouteMode.
PanAxesAxes in which the canvas can be panned - x, y, or both.
PathTransportState
PerimeterAnchorShapesSupported shapes for a Perimeter anchor.
PlacementStageStrategyValues
SelectionModesPossible modes for a Selection. mixed: any combination of vertices and edges is supported isolated: either a set of vertices, or a set of edges, but not both at the same time nodesOnly: only Node objects groupsOnly: only Group objects edgesOnly:only Edge object.
SupportedEdge
SurfaceMode
TilingStrategies

Defines how the tiles are arranged.

With logarithmic each layer is assumed to have a maximum of (2^level+1) tiles in each axis (for instance at level 0, 2 tiles). This setup is how apps like Google maps arrange their tiles.

With absolute tiling, the number of tiles in each axis is computed as the size of the image in that axis divided by the tile size in that axis. Thus, for each zoom level, there are the same number of tiles.

Functions

FunctionDescription
_addConnectorSegment(c, type, params)
_appendAtIndex(svg, path, idx)
_applyStyles(node, style)
_attr(node, attributes)
_clearConnectorSegments(c)
_computeConnector(c, params)
_createBaseSegment(sp)
_createConnectorBase(type, connection, params, defaultStubs)Base method to use when creating Connectors. This is v2. Retain this.
_createQuadraticBezierConnector(connection, params)This is v2. Retain this.
_createStraightConnector(connection, params)Create a Straight connector. This is v2. Retain this.
_defaultSegmentBoundingBoxIntersection(s, box)Computes the list of points on the segment that intersect the given bounding box.
_defaultSegmentBoxIntersection(s, x, y, w, h)Computes the list of points on the segment that intersect the box with the given origin and size.
_defaultSegmentFindClosestPointOnPath(s, x, y)Finds the closest point on this segment to the given x/y, returning both the x and y of the point plus its distance from the supplied point, and its location along the length of the path inscribed by the segment. This implementation returns Infinity for distance and null values for everything else subclasses are expected to override.
_defaultSegmentLineIntersection(s, x1, y1, x2, y2)Computes the list of points on the segment that intersect the given line.
_findConnectorSegmentForLocation(c, location, absolute)returns [segment, proportion of travel in segment, segment index] for the segment that contains the point which is 'location' distance along the entire path, where 'location' is a decimal between 0 and 1 inclusive. in this connector type, paths are made up of a list of segments, each of which contributes some fraction to the total length. From 1.3.10 this also supports the 'absolute' property, which lets us specify a location as the absolute distance in pixels, rather than a proportion of the total path.
_findConnectorSegmentForPoint(c, x, y)

Function: findSegmentForPoint Returns the segment that is closest to the given [x,y], null if nothing found. This function returns a JS object with:

d - distance from segment l - proportional location in segment x - x point on the segment y - y point on the segment s - the segment itself.

_getLabel(c)Return this component's label, if one is set.
_getOverlay(c, id)Get the Overlay with the given ID. You can optionally provide a type parameter for this method in order to get a typed return value (such as LabelOverlay, ArrowOverlay, etc), since some overlays have methods that others do not.
_getOverlays(c)Gets all the overlays registered on this component.
_hideOverlay(c, id)Hide the overlay with the given id.
_hideOverlays(c, ids)Hide all overlays, or a specific set of overlays.
_isConnectionDetachable(c, ep)
_isConnectionReattach(c)
_node(name, attributes)
_pos(d)
_registerSegmentHandler(type, handler)
_removeAllOverlays(c)Remove all overlays from this component.
_removeOverlays(c, overlays)Remove the given set of overlays, specified by their ids.
_resetConnectorGeometry(c)
_setAnchorLocation(loc, connection, endpointIndex)
_setConnectionDetachable(c, detachable)
_setConnectionLabel(c, l)Set this component's label.
_setConnectionReattach(c, reattach)
_showOverlay(c, id)Show a specific overlay (set it to be visible)
_showOverlays(c, ids)Show all overlays, or a specific set of overlays.
_size(svg, x, y, w, h)
add(p1, p2)Adds the x and y values of the two points and returns a new point.
addClass(el, clazz)
addWheelListener(el, callback, ignoreTouchWheelEvents, requireMetaKey)
ajax(params)Basic ajax function.
att(attName)
bezierLineIntersection(x1, y1, x2, y2, curve)Calculates all intersections of the given line with the given curve.
boundingBoxIntersection(boundingBox, curve)Calculates all intersections of the given bounding box with the given curve.
boxIntersection(x, y, w, h, curve)Calculates all intersections of the given box with the given curve.
calculateSpacingAdjustment(r1, r2)
classList(className)
cls(className)
compoundEvent(stem, event, subevent)
computeBezierLength(curve)
consume(e, doNotPreventDefault)Consume the given event, using stopPropagation() if present or returnValue if not, and optionally also calling preventDefault().
containsPoint(r, p, lax)
convertToFullOverlaySpec(spec)Convert the given input into an object in the form of a FullOverlaySpec
createDropManager(options)
createEdgeTypePickerTag(toolkit, propertyName, edgeMappings, onSelect)
createElement(tag, style, clazz, atts)
createElementNS(ns, tag, style, clazz, atts)
createFloatingAnchor(instance, ep, element, elementId)
createSurfaceDropManager(options)
createTestSupportInstance(instance, ok, equal)Create an instance of BrowserUITestSupport, using the given functions for testing boolean and equality.
createTestSupportInstanceQUnit(instance)Create an instance of BrowserUITestSupport that uses QUnit, a now venerable testing framework, admittedly, but one which jsPlumb still uses.
data(inObj, path, value)
debounce(fn, timeout)Create a debounced version of the given function.
defaultExportGeometry(ac)
defaultIdFunction(obj)
defaultImportGeometry(ac, g)Subclasses can override this. By default we just set the given geometry as our internal representation.
dist(p1, p2)
distanceFromCurve(point, curve)Calculates the distance that the given point lies from the given Bezier. Note that it is computed relative to the center of the Bezier, so if you have stroked the curve with a wide pen you may wish to take that into account! The distance returned is relative to the values of the curve and the point - it will most likely be pixels.
djikstra(params)
eachNotEmpty(strings, fn)Runs the given function for each value in the array that is not null and has a non-zero length.
emptyPaintGeometry()
encloses(r1, r2, allowSharedEdges)Calculates whether or not r2 is completely enclosed by r1.
exportData(type, toolkit, parameters)Internal method that handles data export, by looking for an exporter registered for the given type.
extend(o1, o2, keys)Equivalent of Object.assign, which IE11 does not support.
fastTrim(s)Trims whitespace from the given string.
filterEmpty(l)Filters out empty or null values from the given list of strings
filterList(list, value, missingIsFalse)
findClosestPoint(pos, constrainRect, locations)Find the closest point out of locations to the given point on the given constraining rectangle.
findParent(el, selector, container, matchOnElementAlso)
fixPrecision(n, digits)Trim decimal points from a number. Defaults to 3 decimal points.
floydWarshall(params)
getClass(el)
getClientSize(el)gets the element's "client" size, that which is reported by the clientWidth and clientHeight properties.
getElementType(el)
getEventSource(e)
getOffsetPosition(el)Gets the position of the given element as calculated by reading its offsetLeft and offsetTop properties.
getOffsetSize(el)Gets the offset width and offset height of the given element. Not safe for SVG elements. This method was previously exported as size but has been renamed in order to reflect the fact that it uses offsetWidth and offsetHeight, which are not set on SVG elements.
getPageLocation(e)Gets the page location for the given event, abstracting out differences between touch and mouse events.
getPosition(el)
getSelector(ctx, spec)
getsert(map, key, valueGenerator)Get, or insert then get, a value from the map.
getSvgWidthHeightSize(el)Gets the size of an svg element by reading its width and height properties.
getSvgXYPosition(el)
getTouch(touches, idx)
gradient(p1, p2)Calculates the gradient of a line between the two points.
gradientAtPoint(curve, location)Calculates the gradient at the point on the given curve at the given location
gradientAtPointAlongPathFrom(curve, location, distance)Returns the gradient of the curve at the point which is 'distance' from the given location. if this point is greater than location 1, the gradient at location 1 is returned. if this point is less than location 0, the gradient at location 0 is returned.
hasClass(el, clazz)
initializeBezierConnectorEditors()Register the bezier/state machines editors with the connector editors modules. In certain setups, for instance a React app, you need to do this in order to ensure the editor code is included.
initializeOrthogonalConnectorEditors()Register the orthogonal editor with the connector editors modules. In certain setups, for instance a React app, you need to do this in order to ensure the orthogonal editor code is included.
initializeSegmentedConnectorEditors()Register the orthogonal editor with the connector editors modules. In certain setups, for instance a React app, you need to do this in order to ensure the orthogonal editor code is included.
insertSorted(value, array, comparator, sortDescending)Inserts the given value into the given array at a sorted location.
intersects(r1, r2)Calculates whether or not the two rectangles intersect.
isArrayLike(el)
isArrowOverlay(o)
isAssignableFrom(object, cls)Returns true if the given object can be considered to be an instance of the class cls. This is done by testing the proto chain of the object and checking at each level to see if the proto is an instance of the given class.
isBoolean(s)Returns whether or not the given value is of boolean type.
isConnection(c)
isConnector(c)
isContinuous(a)
isCustomOverlay(o)
isDate(o)Returns whether or not the given value is of type Date
isDiamondOverlay(o)
isDynamic(a)
isEdge(obj)
isEdgeEditingSupported(type)Returns whether or not there is an edge editor registered for connectors of the given type.
isElement(o)Returns whether the given element
isEmpty(o)Returns whether or not the given object - which may be ArrayLike, or an object - is empty.
isEndpoint(c)
isFloating(a)
isFullOverlaySpec(o)Returns whether or not the given overlay spec is a 'full' overlay spec, ie. has a type and some options, or is just an overlay name.
isFunction(o)Returns whether or not the given value is of type Function
isGroup(obj)
isGroupVertex(v)
isLabelOverlay(o)
isMouseDevice()
isNamedFunction(o)Returns whether or not the given value is of type Function and is a named Function.
isNestedGroup(obj)
isNode(obj)
isNodeInsideAGroup(obj)
isNodeList(el)
isNodeVertex(v)
isNumber(n)Returns whether or not the given value is of number type.
isObject(o)Returns whether or not the given value is of type object
isPlainArrowOverlay(o)
isPoint(curve)
isPort(obj)
isPortVertex(v)
isReadyToPrint(handlerId)Returns whether or not the handler with the given id considers itself ready to print. if no such handler is found we also return false; it is entirely possible that this call could be made before the handler has been instantiated.
isString(s)Returns whether or not the given value is of string type.
isSVGElement(el)
isTextNode(o)Returns whether the given element
isTouchDevice()
isVertexNodeEntry(entry)
lineIntersection(l1, l2)Compute the intersection of the two lines.
lineLength(p1, p2)Calculates the length of a line between the two points.
lineRectangleIntersection(line, r)Finds all points where the given line intersects the given rectangle.
locationAlongCurveFrom(curve, location, distance)finds the location that is 'distance' along the path from 'location'.
makeLightweightAnchorFromSpec(spec)
matchesSelector(el, selector, ctx)
mergeWithParents(type, map, shouldOverride)Extract the definition(s) with the given type and merge them,
nearestPointOnCurve(point, curve)Calculates the nearest point to the given point on the given curve. The return value of this is a JS object literal, containing both the point's coordinates and also the 'location' of the point (see above).
newInstance(options)
newTemplates2Renderer(params)Create a template renderer using the template-2 package.
normal(p1, p2)Calculates the gradient of a normal to a line between the two points.
pageLocation(e)
parse(type, source, toolkit, parameters)
partition(l, partitioner)Partitions a list into two lists - one for which the supplied partitioner returns true (the left list), and the other, the right list, for which the supplied partitioner does not return true.
perpendicularLineTo(fromPoint, toPoint, length)Calculates a line of length length that is perpendicular to the line from fromPoint to toPoint and passes through toPoint.
perpendicularToPathAt(curve, location, length, distance)calculates a line that is 'length' pixels long, perpendicular to, and centered on, the path at 'distance' pixels from the given location. if distance is not supplied, the perpendicular for the given location is computed (ie. we set distance to zero).
pointAlongCurveFrom(curve, location, distance)finds the point that is 'distance' along the path from 'location'.
pointAlongPath(curve, location, distance)

finds the point that is 'distance' along the path from 'location'. this method returns both the x,y location of the point and also its 'location' (proportion of travel along the path); the method below - _pointAlongPathFrom - calls this method and just returns the point.

TODO The compute length functionality was made much faster recently, using a lookup table. is it possible to use that lookup table find a value for the point some distance along the curve from somewhere?

pointOnCurve(curve, location)calculates a point on the curve, for a Bezier of arbitrary order.
pointOnLine(fromPoint, toPoint, distance)Calculates a point on the line from fromPoint to toPoint that is distance units along the length of the line.
populateRegions(edges, regions, gateMap)
quadrant(p1, p2)Calculates the quadrant in which the angle between the two points lies.
ready(f)
recordGetsert(map, key, valueGenerator)Get, or insert then get, a value from the map.
registerDecorator(name, dec)Register a new decorator.
registerEndpointRenderer(name, fns)
registerExporter(name, p)
registerHandler(surface, id)Register a print handler for the given surface, optionally with the given id. An id will be generated if not provided.
registerParser(name, p)
removeClass(el, clazz)
removeWheelListener(el, callback)
resolveIfExecution(e, templateData, expander)
resolveNode(v)For the given vertex, resolves the node/group it pertains to. If the vertex is already a node/group, it is returned. Otherwise, if it is a port, the parent of the port is returned.
resolvePortId(v)For the given vertex, resolve its port id. If it is not a port, null is returned. If it is a port, its id is returned (without the parent vertex's id prefixed to it)
rotatePoint(point, center, rotation)Rotate the given point around the given center, by the given rotation (in degrees)
scaleToBounds(handlerId, wh, margins)Instructs the given handler to zoom and pan its content so that it would fit into the given width and height (which are pixel values). This is used when printing if we wish to fix to a specific page size like A4.
scaleToFullPage(handlerId, margins, units)Instructs the given handler to zoom its content to 1, and then report back how big the page needs to be to render the entire dataset. Note that this method returns an array serialized as a string.
scaleToPageDimensions(handlerId, dimensions, margins, units)Instructs the given handler to zoom its content so that it would fit into a page of the given dimensions. The values are in centimetres, unless you specify in the third argument to the method that the dimensions are inches.
scaleToPageSize(handlerId, size, margins, units)Instructs the given handler to zoom its content so that it would fit into a page of the given size. We currently know about LETTER, A5, A4, A3, A2, A1, A0 and FULL (which is the same as calling scaleToFullPage). Note that this method returns an array serialized as a string.
segmentLineAngle(cs)Compute the line angle for the given segment.
setBoundingRect(element, origin, size)Sets the position and size of the given element. This method is equivalent to first calling setAbsolutePosition and then setSize on the given element.
setForceMouseEvents(value)
setForceTouchEvents(value)
setOffsetPosition(el, p)
setPosition(el, p)
setSvgTranslatePosition(el, p)
setSvgXYPosition(el, p)Sets the position of the given element by writing values to its x and y attributes.
sgn(x)Replacement for Math.sign, which IE11 does not support.
snapToGrid(pos, grid, thresholdX, thresholdY)Snap the given x,y to a point on the grid defined by gridX and gridY, using the given thresholds to calculate proximity to the grid.
subtract(p1, p2)Subtracts p2 from p1, returning a new point.
theta(p1, p2)Calculates the angle between the two points.
toggleClass(el, clazz)
touchCount(e)
touches(e)
translateRect(p1, delta, dir)
uuid()Generate a v4 UUID.

Interfaces

InterfaceDescription
AbsoluteBackedLayoutParametersParameters for a layout that extends AbsoluteBackedLayout
AbstractBezierOptionsBase options interface for StateMachine and Bezier connectors.
AbstractEdgeTerminusBase class for objects in a Graph that can act as the terminus for an Edge.
AbstractHierarchicalLayoutParametersBase parameters for layouts that extend AbstractHierarchicalLayout.
AbstractSelectOptions
ActiveFilteringPluginOptions
AddEdgeOptions
AddGroupOptions
AnchorOptions
ArrowOverlayOptions
AutoSaveOptions
BackgroundOptionsBase options for background
BalloonLayoutParametersConstructor parameters for a Balloon layout.
BeforeDragParamsThe parameters passed to a beforeDrag interceptor.
BeforeDropParamsDefinition of the parameters passed to the beforeDrop interceptor.
BeforeStartConnectionDetachParamsThe parameters passed to a beforeStartDetach interceptor.
BeforeStartEventParams
BehaviouralTypeDescriptorExtends EndpointTypeDescriptor to add the options supported by an addSourceSelector or addTargetSelector call.
BezierConnectorGeometryDefines the geometry used by a cubic bezier connector.
BezierOptionsOptions for the Bezier connector.
BlankEndpointParams
BrowserJsPlumbDefaultsDefaults for the BrowserUI implementation of jsPlumb.
BrowserJsPlumbOptions
BrowserUIPasteOptionsExtension of paste options for use in a browser.
CircularLayoutParametersParameters for the circular layout.
ClonedSetThe return value from a paste. Contains a list of nodes, groups and edges that were pasted, as well as a map of previous edge/vertex ids to their new ids, the computed origin of the copied vertices, and the amount by which the set of objects was translated for the paste (so the paste location is origin + transform).
CollicatOptions
ComponentBase
Connection
ConnectionDetachedParamsDefinition of the parameters passed to a listener for the connection:detach event.
ConnectionDragEventHandlersCallbacks you can provide to connection drag methods to interrupt the process and inspect what's going on,
ConnectionEstablishedParamsDefinition of the parameters passed to a listener for the connection event.
ConnectionMovedParamsDefinition of the parameters passed to a listener for the connection:move event.
ConnectionTypeDescriptorDefinition of a connection type.
ConnectOptionsOptions for a connect call.
ConnectorHigh level definition of a Connector.
ConnectorEditorActivateParams
ConnectorEditorOptionsOptions for the EdgePathEditor.
ConnectorHandlerDefinition of an object that can create instances of some connector type, and perform a few housekeeping tasks on connectors of that type.
ConnectorOptionsCommon options for connectors.
ConnectParamsOptions for the connect call on a JsPlumbInstance
ContainerOptions
CustomOverlayOptions
CustomTagDefinition
CustomTagOptionsOptions for a custom tag
DataLoadOptions
DataSource
Deletion
DialogsOptionsOptions for a Dialogs instance.
DjikstraOptions
DotEndpointParams
DragEventHandlersHandlers you can pass as an argument to various element drag methods, to interrupt the drag and inspect what's going on.
DragEventParams
DragGroupsPluginOptionsOptions for the drag groups plugin.
DragHandler
DragHandlerOptions
DragManagerOptions
DragMovePayloadPayload for drag:move event.
DragOptions
DragParams
DragPayloadBase payload for drag events. Contains the element being dragged, the corresponding mouse event, the current position, and the position when drag started.
DragStartEventParams
DragStartPayloadPayload for drag:start event.
DragStopEventParams
DragStopPayloadPayload for drag:stop event. In addition to the base payload, contains a redraw result object, listing all the connections and endpoints that were affected by the drag.
DrawingToolsPluginOptions
DropManagerOptionsOptions for the DropManager.
EdgeAddedParams
EdgeOptions
EdgePathEditedParams
EdgePathRestoredParams
EdgeRemovedParams
EdgeRoutingPluginOptionsOptions for the edge routing plugin.
EdgeSelectionParams
EdgeSourceChangedParams
EdgeTargetChangedParams
EdgeUpdatedParams
EdgeVertexChangedParams
ElementDraggerOptionsOptions for an ElementDragger
Endpoint
EndpointOptions
EndpointRepresentationParams
EndpointStyle
EndpointTypeDescriptorDefinition of an endpoint type.
EventHandlersDefines a set of event handlers that can be supplied to various methods that simulate mouse activity. Using these you can inject tests into various parts of the lifecycle of a given operation.
ExportOptionsOptions for data export.
FilterableDatasetExtension of dataset that offers operation to perform operations on the contents, and to filter the contents.
FloydWarshallOptions
FloydWarshallResult
ForceDirectedLayoutParametersParameters for the force directed layout
GateThe gate between two regions. A gate is a region in the plane of either the x or y axis (axis === 0 for x, 1 for y), and consists of a segment that is a line in that axis, having a start and end point.
GeneratedGridBackgroundOptionsOptions for the generated grid background. This background is still in beta as of 5.10.6.
GeometryGeometry defines the path along which a connector travels. The internal contents of a Geometry vary widely between connectors.
GhostProxyingDragHandler
GraphObject
GraphOptions
GridDefinition of a grid - the width/height of each cell, and, optionally, a threshold value for each axis to use when trying to snap some coordinate to the grid.
GridLayoutParametersOptions for the GridLayout.
GroupAddedParams
GroupCollapsedParams
GroupDefinitionA group definition in a view.
GroupDeletion
GroupExpandedParams
GroupMemberAddedParams
GroupMemberRemovedParams
GroupOptions
GroupRemovedParams
GroupSizeChangedParams
HasIdAndType
HasScore
HierarchicalLayoutParametersParameters for the Hierarchical Layout.
HierarchyLayoutParametersOptional parameters for a Hierarchy layout
Hit
IconDefinitionDefines an icon that can be rendered in a shape.
IIfExecution
ImageBackgroundOptionsOptions for an image background
ImageExportOptionsOptions for an image export.
ImageExportUIOptionsOptions for the image export UI.
IndexDocument
InspectorOptionsOptions for an inspector.
InternalConnectParamsInternal extension of ConnectParams containing a few extra things needed to establish a connection.
InternalEndpointOptions
IntersectingObjectData
JsPlumbDefaults
jsPlumbDOMElement
jsPlumbElement
JsPlumbListOptionsConstructor options for a list.
jsPlumbToolkitDOMElement
jsPlumbToolkitDOMInformation
JsPlumbToolkitGlobal
JsPlumbToolkitOptionsConstructor options for a Toolkit instance.
jsPlumbToolkitSearchIndexOptionsOptions for the search index.
LabelOverlayOptions
LassoOptions
LassoPluginOptions
LayoutParametersBase interface for layout parameters. All layout parameter interfaces extend this.
LightweightAnchor
LightweightContinuousAnchor
LightweightPerimeterAnchor
ListManagerOptions
ListSpec
LoadOptionsOptions for loading data.
MagnetizerOptions
MagnetizerRunOptions
ManageElementParamsPayload for an element managed event
MiniviewPluginOptions
ModelOptions
NodeAddedParams
NodeDefinitionA node definition in a view.
NodeDeletion
NodeRemovedParams
ObjectInfo
OrthogonalConnectorGeometryThe format used to load/export orthogonal connector geometry
OrthogonalConnectorOptionsOptions for an orthogonal connector.
OverlayAnimationOptionsOptions for animating an overlay along an edge
OverlayMouseEventParams
OverlayOptions
PaintStyle
PanButtonsPluginOptions
PanZoomOptionsOptions for the PanZoom widget. This widget is used internally by the Toolkit and is not something users of the library will need to interact with.
ParentRelativePlacementStrategyOptions
PasteOptions
PathOptionsPath specification.
PerimeterAnchorOptionsConstructor options for a Perimeter Anchor.
PinchListenerOptionsPinch listener for all touch browsers - ipad, android, and windows laptops/surfaces. Needless to say, every browser does it differently. IE10+ uses PointerEvents; ipad safari/windows chrome/ipad chrome/ android chrome use TouchEvents. The listener posts pinchstart, pinch happening, and pinch end events.
PointXYDefines an x/y location.
PortAddedParams
PortDefinitionA port definition in a view.
PortRemovedParams
PortUpdatedParams
PropertyMappingA mapping of some property to a set of appearance values.
PropertyMappingsA set of property mappings - currently only edges are supported, but future versions will support nodes, groups and ports
QuadraticBezierConnectorThis is v2. Retain this.
RectangleEndpointParams
RedrawResult
RendererAddedParams
Router
RouterEdge
RouterOptions
RouterRegion
RoutingInformation
SaveOptionsOptions for a save via ajax.
SegmentedConnectorGeometryThe format used to load/export segmented connector geometry
SegmentedConnectorOptionsOptions for an orthogonal connector.
SegmentHandler
SegmentParams
SelectEndpointOptions
SelectionOptionsOptions for the behaviour of a selection.
SelectOptions
ShapeLibraryPaletteOptionsOptions for a shape library palette.
ShapeSetDefines a set of shapes. This is the interface you should extend if you wish to supply custom shape sets to the widget.
ShapeTypeDefines a shape type. If you wish to supply custom shape types you should extend this interface.
ShortestPathComponent
ShortestPathResult
ShowOptionsDefines the allowed options to the show method.
SizeDefines the width and height of some element.
SnaplinesPluginOptionsOptions for the snaplines plugin.
SourceDefinitionDefines the supported options on an addSourceSelector call.
SourceOrTargetDefinitionBase interface for source/target definitions
StateMachineOptions
StatePluginOptions
StraightConnector
StraightConnectorGeometry
SurfaceDragOptionsOptions for element drag in a Surface.
SurfaceDropManagerOptionsOptions for the SurfaceDropManager.
SurfaceEdgeAddedParamsPayload for an edge:added event from a surface.
SurfaceGridOptions
SurfaceGroupAddedParamsPayload for a group:added event from the Surface.
SurfaceGroupCollapsedParamsPayload for a group:collapse event from a surface
SurfaceGroupExpandedParamsPayload for a group:expand event from a surface
SurfaceGroupMemberAddedParamsPayload for a group:member:added event from the Surface.
SurfaceGroupMemberRemovedParamsPayload for a group:member:removed event from the Surface.
SurfaceGroupRemovedParamsPayload for a group:removed event from the Surface.
SurfaceGroupResizedParamsPayload for a group:resize event from a surface.
SurfaceMagnetizeOptionsOptions for the magnetize functionality of the Surface.
SurfaceNodeAddedParamsPayload for a node:added event from the Surface.
SurfaceNodeRemovedParamsPayload for a node:removed event from the Surface.
SurfaceObjectInfo
SurfacePanZoomParamsPayload for a pan/zoom event from a surface.
SurfacePluginDefines a surface plugin
SurfacePluginOptionsBase interface for Surface plugin options.
SurfacePortRemovedParamsPayload for a port:removed event from a Surface.
SurfaceRenderOptionsThis interface defines the allowed parameters on a render call that will create a new Surface.
SurfaceSelector
SurfaceVertexAddedParamsPayload for a node:added or group:added event from the Surface.
SurfaceVertexMoveStartParamsPayload for the node:move:start event that is fired when a node/group has just begun to be moved.
SurfaceVertexRemovedParamsParent payload for a node:removed or group:removed event from the Surface.
SurfaceViewOptions
SurfaceWheelOptions
SvgExportOptionsOptions for SVG export.
SvgExportOutputOutput of the svg exporter.
SvgExportUIOptionsOptions for the SVG export UI.
SynthesizedEventAn object conforming to enough of the Event interface to be used to trigger events in the DOM.
TargetDefinitionDefines the supported options on an addTargetSelector call.
TemplateRendererDefines a template renderer
TiledBackgroundOptions
ToolkitRenderer
TypeDescriptorBase interface for type descriptors for public methods.
UIComponent
UICoreOptions
UINodeDefinition
UiStatesPluginOptions
UIStatesSurfaceViewOptions
UndoRedoUpdateParams
UnmanageElementParamsPayload for an element unmanaged event.
UpdateOffsetOptionsOptions for the UpdateOffset method
VanillaInspectorOptionsOptions for the VanillaInspector, an instance of Inspector that uses the Toolkit's default templating mechanism to render elements.
VanillaSurfaceRenderOptionsConstructor options for the BrowserUI class.
VertexDefinitionBase class for node, group and port definitions. This interface is shared by the model and the view.
VertexMovedParams
VertexUpdatedParams
ViewEdgeOptionsThe mapping for the definition of an edge inside a view.
ViewGroupOptionsThe mapping for the definition of a group inside a view.
ViewNodeOptionsThe mapping for the definition of a node inside a view.
ViewNodeOrPortOptionsBase view definition options for nodes and ports (and groups, since they extend nodes)
ViewOptionsCommonCommon options for edge/node/group/port definitions in a view.
ViewportBoundsModels the current bounds of a viewport, containing its left/top, width/height, padding and current zoom.
ViewPortOptionsDefinition of a port inside a view.
ViewportPositionDefinition of some element's location and rotation in the viewport.
WheelOptionsOptions for how to respond to wheel events.

Variables

VariableDescription
_internalLabelOverlayClass
_internalLabelOverlayId
ABSOLUTE
ACTION_ADD
ACTION_REMOVE
ALIGNConstants for defining the align option on a Hierarchical layout.
APPEND_TO_CURRENTDirective to append the operations in the new transaction to the current transaction, if a new one has been opened before the current one has been closed.
ATTR_ANCHOR_FACE
ATTR_SCROLLABLE_LIST
ATTRIBUTE_ANCHOR_X
ATTRIBUTE_ANCHOR_Y
ATTRIBUTE_CONTAINER
ATTRIBUTE_GROUP_CONTENT
ATTRIBUTE_GROUP
ATTRIBUTE_IS_SOURCE
ATTRIBUTE_IS_TARGET
ATTRIBUTE_JTK_EDGE_TYPE
ATTRIBUTE_JTK_ENABLED
ATTRIBUTE_JTK_ENDPOINT
ATTRIBUTE_JTK_NODE_ID
ATTRIBUTE_JTK_PORT_IDUsed to indicate what the port id should be for connections from/to this element. It does not necessarily mean that the connection will be attached to an element that has this attribute - it is possible to have 'logical' ports on some vertex, whose edges appear in the UI attached to the vertex, rather than some element inside the vertex. If you want to specify that some element is the place to which connections for a given port should be attached, use ATTRIBUTE_JTK_PORT (data-jtk-port)
ATTRIBUTE_JTK_PORT_TYPE
ATTRIBUTE_JTK_PORTUsed to indicate that the given element is the place to which connections for the given port should be attached in the UI. Don't confuse this with ATTRIBUTE_JTK_PORT_ID.
ATTRIBUTE_JTK_SCOPE
ATTRIBUTE_JTK_SOURCE_PORT_ID
ATTRIBUTE_JTK_SOURCE_PORT_TYPE
ATTRIBUTE_JTK_SOURCE_PORT
ATTRIBUTE_JTK_SOURCE
ATTRIBUTE_JTK_TARGET_PORT_ID
ATTRIBUTE_JTK_TARGET_PORT_TYPE
ATTRIBUTE_JTK_TARGET_PORT
ATTRIBUTE_JTK_TARGET
ATTRIBUTE_MANAGED
ATTRIBUTE_MINIVIEW_TYPE
ATTRIBUTE_NODE
ATTRIBUTE_NOT_DRAGGABLE
ATTRIBUTE_OFFSET_X
ATTRIBUTE_OFFSET_Y
ATTRIBUTE_ORIENTATION_X
ATTRIBUTE_ORIENTATION_Y
ATTRIBUTE_PORT_ID
ATTRIBUTE_PORT_TYPE
ATTRIBUTE_PORT
ATTRIBUTE_SCOPE_PREFIX
ATTRIBUTE_SCOPE
ATTRIBUTE_SURFACE_GROUP
ATTRIBUTE_TABINDEX
BASIC_SHAPESShapefile for basic shapes.
BLOCK
BOTTOM
CHECK_CONDITION
CHECK_DROP_ALLOWED
CLASS_ANCHOR_CANDIDATE
CLASS_ANCHOR_PLACEHOLDER
CLASS_BACKGROUND_BORDERthe css class that will be added to a grid background's border
CLASS_BACKGROUND_GRID_DOT_MAJORThe class that will be added to the dots representing grid lines (when gridType is GridTypes.dotted)
CLASS_BACKGROUND_GRID_DOT_MINORThe class that will be added to the dots representing grid tick marks (when gridType is GridTypes.dotted)
CLASS_BACKGROUND_GRID_MAJORThe class that will be added to the lines representing grid lines (when gridType is GridTypes.lines)
CLASS_BACKGROUND_GRID_MINORThe class that will be added to the lines representing grid tick marks (when gridType is GridTypes.lines)
CLASS_BACKGROUND_GRIDthe css class that will be added to the major and minor dots/lines in a grid
CLASS_BACKGROUNDThe css class that will be added to a grid background's main element
CLASS_BEZIER_HANDLECSS class added to all handles used by this editor.
CLASS_CONNECTED
CLASS_CONNECTION_EDIT
CLASS_CONNECTOR_OUTLINE
CLASS_CONNECTOR
CLASS_DELEGATED_DRAGGABLE
CLASS_DRAG_ACTIVE
CLASS_DRAG_CONTAINER
CLASS_DRAG_HOVER
CLASS_DRAG_ORIGINAL_GROUP
CLASS_DRAG_SELECT_DEFEAT
CLASS_DRAGGABLE
CLASS_DRAGGED
CLASS_EDGE_DELETE_BUTTON
CLASS_EDGE_GUIDELINECSS class added to an edge guideline by the segmented connector editor
CLASS_EDGE_INSPECTOR
CLASS_EMPTY_INSPECTOR
CLASS_ENDPOINT_ANCHOR_PREFIX
CLASS_ENDPOINT_CONNECTED
CLASS_ENDPOINT_DROP_ALLOWED
CLASS_ENDPOINT_DROP_FORBIDDEN
CLASS_ENDPOINT_FLOATING
CLASS_ENDPOINT_FULL
CLASS_ENDPOINT
CLASS_EXPORT_CANCEL
CLASS_EXPORT_DIMENSIONS
CLASS_EXPORT_DOWNLOAD_TOOLS
CLASS_EXPORT_OVERLAY
CLASS_EXPORT_UNDERLAY
CLASS_GHOST_PROXY
CLASS_GROUP_COLLAPSED
CLASS_GROUP_EXPANDED
CLASS_GROUP
CLASS_INSPECTOR_ACTIVE
CLASS_INSPECTOR_INACTIVE
CLASS_INSPECTOR
CLASS_LABEL_OVERLAY
CLASS_LASSO_MASK_BOTTOM
CLASS_LASSO_MASK_LEFT
CLASS_LASSO_MASK_RIGHT
CLASS_LASSO_MASK_TOP
CLASS_LASSO_MASK
CLASS_LASSO_SELECT_DEFEAT
CLASS_LASSO
CLASS_MINIVIEW_CANVAS
CLASS_MINIVIEW_COLLAPSE
CLASS_MINIVIEW_COLLAPSED
CLASS_MINIVIEW_ELEMENT
CLASS_MINIVIEW_GROUP_ELEMENT
CLASS_MINIVIEW_PANNER
CLASS_MINIVIEW_PANNING
CLASS_MINIVIEW
CLASS_MOST_RECENTLY_DRAGGED
CLASS_NODE_INSPECTOR
CLASS_NODE
CLASS_OVERLAY
CLASS_PALETTE_SET_FILTER
CLASS_PALETTE_SET_TITLE
CLASS_PALETTE_SET
CLASS_PALETTE_SHAPE
CLASS_PALETTE
CLASS_PORT
CLASS_SEGMENTED_DELETE_HANDLECSS class added to a delete handle by the segmented connector editor
CLASS_SEGMENTED_DRAG_HANDLECSS class added to a drag handle by the segmented connector editor
CLASS_SEGMENTED_HANDLECSS class added to all segment handles created by the segmented editor
CLASS_SEGMENTED_SPLIT_HANDLECSS class added to a segment split handle by the segmented connector editor
CLASS_SELECT_DEFEAT
CLASS_SHAPE_LABELThis class is assigned to svg text elements serving as shape labels.
CLASS_SHAPEThis class is assigned to the parent SVG elements for shapes.
CLASS_SNAPLINE_ACTIVE_EXACTAssigned to an element attached to an active snapline and the elements on the snapline are exactly aligned
CLASS_SNAPLINE_ACTIVEAssigned to an element attached to an active snapline
CLASS_SNAPLINE_EXACTAssigned to both horizontal and vertical snaplines when the elements are exactly aligned
CLASS_SNAPLINE_HORIZONTALAssigned to horizontal snaplines when active
CLASS_SNAPLINE_VERTICALAssigned to vertical snaplines when active
CLASS_SNAPLINEAssigned to both horizontal and vertical snaplines when active
CLASS_SURFACE_CANVAS
CLASS_SURFACE_DIRECT
CLASS_SURFACE_EDGE_DRAGGING
CLASS_SURFACE_ELEMENT_DRAGGING
CLASS_SURFACE_NO_PAN
CLASS_SURFACE_PAN_ACTIVE
CLASS_SURFACE_PAN_BOTTOM
CLASS_SURFACE_PAN_LEFT
CLASS_SURFACE_PAN_RIGHT
CLASS_SURFACE_PAN_TOP
CLASS_SURFACE_PAN
CLASS_SURFACE_PANNING
CLASS_SURFACE_POINTER_DEVICE
CLASS_SURFACE_SELECTED_CONNECTION
CLASS_SURFACE_SELECTED_ELEMENT
CLASS_SURFACE_TOUCH_DEVICE
CLASS_SURFACE
COMMIT_CURRENTDirective to commit the current transaction if a new one has been opened before the current one has been closed.
COMPONENT_TYPE_CONNECTION
COMPONENT_TYPE_ENDPOINT
Components
CONNECTION
Connections
CONNECTOR_TYPE_CUBIC_BEZIERDefines the Bezier connector type. Since 6.9.0 this replaces BezierConnector.type.
CONNECTOR_TYPE_ORTHOGONALDefines the Orthogonal connector type. Since 6.9.0 this constant replaces OrthogonalConnector.type.
CONNECTOR_TYPE_QUADRATIC_BEZIERThis is v2. Retain this.
CONNECTOR_TYPE_SEGMENTEDSegmented connector type. Since 6.9.0 this replaces SegmentedConnector.type.
CONNECTOR_TYPE_STRAIGHT
Connectors
Constants
DecoratorsDecorator factory. Call register to add a new decorator type.
DEFAULT_HIERARCHICAL_LAYOUT_ALIGNMENT
DEFAULT_HIERARCHY_LAYOUT_ALIGNMENTThe default hierarchy layout alignment.
DEFAULT_KEY_ALLOW_NESTED_GROUPS
DEFAULT_KEY_ANCHOR
DEFAULT_KEY_ANCHORS
DEFAULT_KEY_CONNECTION_OVERLAYS
DEFAULT_KEY_CONNECTIONS_DETACHABLE
DEFAULT_KEY_CONNECTOR
DEFAULT_KEY_CONTAINER
DEFAULT_KEY_ENDPOINT_HOVER_STYLE
DEFAULT_KEY_ENDPOINT_HOVER_STYLES
DEFAULT_KEY_ENDPOINT_STYLE
DEFAULT_KEY_ENDPOINT_STYLES
DEFAULT_KEY_ENDPOINT
DEFAULT_KEY_ENDPOINTS
DEFAULT_KEY_GROUP_SIZE
DEFAULT_KEY_HOVER_CLASS
DEFAULT_KEY_HOVER_PAINT_STYLE
DEFAULT_KEY_LIST_STYLE
DEFAULT_KEY_MAX_CONNECTIONS
DEFAULT_KEY_NODE_SIZE
DEFAULT_KEY_PAINT_STYLE
DEFAULT_KEY_REATTACH_CONNECTIONS
DEFAULT_KEY_SCOPE
DEFAULT_LABEL_LOCATION_ATTRIBUTE
DEFAULT_LINE_STROKE
DEFAULT_LIST_OPTIONS
DEFAULT_TICK_LINE_STROKE
DEFAULTConstant used im various places internally, and in the Toolkit edition used as the key for default node, edge, port and group definitions.
DialogConstantsCSS classes, attributes and attribute values for Dialogs.
EDGE_DRAG_HANDLEClass applied to edge drag handles.
EDGE
editors
ELEMENT_DIV
ELEMENT_JTK_ENDPOINT
ELEMENT
ENDPOINT
EndpointFactory
Endpoints
ERROR_SOURCE_DOES_NOT_EXIST
ERROR_SOURCE_ENDPOINT_FULL
ERROR_TARGET_DOES_NOT_EXIST
ERROR_TARGET_ENDPOINT_FULL
EVENT_AFTER_LAYOUT_REFRESH
EVENT_ANCHOR_CHANGED
EVENT_BEFORE_START
EVENT_CANVAS_CLICK
EVENT_CANVAS_DBL_CLICK
EVENT_CLICK
EVENT_CONNECTION_ABORT
EVENT_CONNECTION_CLICK
EVENT_CONNECTION_CONTEXTMENU
EVENT_CONNECTION_DBL_CLICK
EVENT_CONNECTION_DBL_TAP
EVENT_CONNECTION_DETACHED
EVENT_CONNECTION_DRAG
EVENT_CONNECTION_EDIT
EVENT_CONNECTION_MOUSEDOWN
EVENT_CONNECTION_MOUSEOUT
EVENT_CONNECTION_MOUSEOVER
EVENT_CONNECTION_MOUSEUP
EVENT_CONNECTION_MOVED
EVENT_CONNECTION_TAP
EVENT_CONNECTION
EVENT_CONTAINER_CHANGE
EVENT_CONTEXTMENU
EVENT_DATA_APPEND_END
EVENT_DATA_APPEND_START
EVENT_DATA_LOAD_END
EVENT_DATA_LOAD_START
EVENT_DATA_UPDATED
EVENT_DBL_CLICK
EVENT_DBL_TAP
EVENT_DESELECT
EVENT_DESTROY
EVENT_DIRECT_RENDER_RELAYOUT
EVENT_DRAG_MOVE
EVENT_DRAG_START
EVENT_DRAG_STOP
EVENT_DRAG
EVENT_DROP
EVENT_EDGE_ADDED
EVENT_EDGE_PATH_EDITED
EVENT_EDGE_PATH_RESTORED
EVENT_EDGE_REMOVED
EVENT_EDGE_SOURCE_CHANGED
EVENT_EDGE_TARGET_CHANGED
EVENT_EDGE_TYPE_CHANGED
EVENT_EDGE_UPDATED
EVENT_ELEMENT_CLICK
EVENT_ELEMENT_CONTEXTMENU
EVENT_ELEMENT_DBL_CLICK
EVENT_ELEMENT_DBL_TAP
EVENT_ELEMENT_MOUSE_DOWN
EVENT_ELEMENT_MOUSE_MOVE
EVENT_ELEMENT_MOUSE_OUT
EVENT_ELEMENT_MOUSE_OVER
EVENT_ELEMENT_MOUSE_UP
EVENT_ELEMENT_TAP
EVENT_ENDPOINT_CLICK
EVENT_ENDPOINT_DBL_CLICK
EVENT_ENDPOINT_DBL_TAP
EVENT_ENDPOINT_MOUSEDOWN
EVENT_ENDPOINT_MOUSEOUT
EVENT_ENDPOINT_MOUSEOVER
EVENT_ENDPOINT_MOUSEUP
EVENT_ENDPOINT_REPLACED
EVENT_ENDPOINT_TAP
EVENT_FOCUS
EVENT_GRAPH_CHANGED
EVENT_GRAPH_CLEAR_START
EVENT_GRAPH_CLEARED
EVENT_GROUP_ADDED
EVENT_GROUP_COLLAPSE
EVENT_GROUP_EXPAND
EVENT_GROUP_MEMBER_ADDED
EVENT_GROUP_MEMBER_REMOVED
EVENT_GROUP_MOVE_END
EVENT_GROUP_MOVE_START
EVENT_GROUP_MOVE
EVENT_GROUP_RELAYOUT
EVENT_GROUP_REMOVED
EVENT_GROUP_RESIZE
EVENT_GROUP_SIZE_CHANGED_REDO
EVENT_GROUP_SIZE_CHANGED_UNDO
EVENT_GROUP_SIZE_CHANGED
EVENT_GROUP_TYPE_CHANGED
EVENT_GROUP_UPDATED
EVENT_INTERNAL_CONNECTION_DETACHED
EVENT_INTERNAL_CONNECTION
EVENT_INTERNAL_ENDPOINT_UNREGISTERED
EVENT_LASSO_END
EVENT_MANAGE_ELEMENT
EVENT_MAX_CONNECTIONS
EVENT_MOUSEDOWN
EVENT_MOUSEENTER
EVENT_MOUSEEXIT
EVENT_MOUSEMOVE
EVENT_MOUSEOUT
EVENT_MOUSEOVER
EVENT_MOUSEUP
EVENT_NESTED_GROUP_ADDED
EVENT_NESTED_GROUP_REMOVED
EVENT_NODE_ADDED
EVENT_NODE_MOVE_END
EVENT_NODE_MOVE_START
EVENT_NODE_MOVE
EVENT_NODE_REMOVED
EVENT_NODE_RENDERED
EVENT_NODE_TYPE_CHANGED
EVENT_NODE_UPDATED
EVENT_NODE_VISIBILITY
EVENT_OBJECT_REPAINTED
EVENT_OUT
EVENT_OVER
EVENT_PAN
EVENT_PORT_ADDED
EVENT_PORT_REMOVED
EVENT_PORT_RENAMED
EVENT_PORT_TYPE_CHANGED
EVENT_PORT_UPDATED
EVENT_RELAYOUT
EVENT_RENDER_END
EVENT_RENDER_START
EVENT_RENDERER_ADDED
EVENT_RESIZE
EVENT_REVERT
EVENT_ROTATE
EVENT_SCROLL
EVENT_SELECT
EVENT_SELECTION_CLEARED
EVENT_START
EVENT_STATE_RESTORED
EVENT_STATE
EVENT_STOP
EVENT_SURFACE_MODE_CHANGED
EVENT_TAP
EVENT_TOUCHEND
EVENT_TOUCHMOVE
EVENT_TOUCHSTART
EVENT_UNDOREDO_UPDATE
EVENT_UNMANAGE_ELEMENT
EVENT_ZOOM
EVT_CLEAR_CONNECTION_EDITS
EVT_START_CONNECTION_EDIT
EVT_STOP_CONNECTION_EDIT
EVT_ZOOM
FALSEConstant for the term "false"
FIXED
FLOWCHART_HANDLE_CLASS
FLOWCHART_SHAPESShapefile for flowchart shapes.
HIERARCHICAL_JSON_DATATYPE
ICON_ORIGIN_CENTER
ICON_ORIGIN_LEFT
ICON_ORIGIN_RIGHT
INTERCEPT_BEFORE_DETACH
INTERCEPT_BEFORE_DRAG
INTERCEPT_BEFORE_DROP
INTERCEPT_BEFORE_START_DETACH
IS_DETACH_ALLOWED
JSON_DATATYPE
jsPlumbToolkitTestSupport
KEY_CONNECTION_OVERLAYS
LAYOUT_TYPE_GRIDGridLayout type. You can use this in a layout spec for a Surface's render parameters.
LAYOUT_TYPE_HIERARCHYHierarchy layout type. Use this when referencing a hierarchy layout in render params.
Layouts
LEFT
LEGACY_JSON_DATATYPE
LOCATION_ATTRIBUTE
logEnabledDetermines whether or not logging is currently enabled.
NONE
OVERLAY_TYPE_CUSTOM
OverlayFactory
Parameters
PROPERTY_POSITION
PX
REDROP_POLICY_ANY_SOURCE_OR_TARGETThis flag is the union of REDROP_POLICY_ANY_TARGET and REDROP_POLICY_ANY_SOURCE
REDROP_POLICY_ANY_SOURCEIndicates that when dragging an existing connection by its source endpoint, it can be relocated onto any other source element, by dropping it anywhere on a source element. But it cannot be dropped onto any target element. This flag is equivalent to REDROP_POLICY_ANY but with the stipulation that the element on which the connections is being dropped must itself be configured with one or more source selectors.
REDROP_POLICY_ANY_TARGETIndicates that when dragging an existing connection by its target endpoint, it can be relocated onto any other target element, by dropping it anywhere on a target element. But it cannot be dropped onto any source element. This flag is equivalent to REDROP_POLICY_ANY but with the stipulation that the element on which the connections is being dropped must itself be configured with one or more target selectors.
REDROP_POLICY_ANYIndicates that when dragging an existing connection by its source endpoint, it can be relocated onto some other source element by dropping it anywhere on that element.
REDROP_POLICY_STRICTIndicates that when dragging an existing connection by its source endpoint, it can only be relocated onto some other source element by dropping it on the part of that element defined by its source selector.
RIGHT
ROLLBACK_CURRENTDirective to rollback the current transaction if a new one has been opened before the current one has been closed.
SEGMENT_DRAG_HANDLE_HORIZONTAL_CLASS
SEGMENT_DRAG_HANDLE_VERTICAL_CLASS
SEGMENT_DRAG_HANDLE
Segments
SELECTOR_CONNECTOR
SELECTOR_ENDPOINT
SELECTOR_GROUP_CONTAINER
SELECTOR_GROUP
SELECTOR_MANAGED_ELEMENT
SELECTOR_OVERLAY
SELECTOR_SCROLLABLE_LIST
ShapeLibraryDefaultsDefault fill/stroke/text color for items in ShapeLibrary.
SOURCE_INDEX
SOURCE
SPACINGConstants for defining the spacing option on a Hierarchical layout.
STATIC
Storage
SurfacePlugins
SVG_NAMESPACE
svg
TARGET_INDEX
TARGET
TOP
TRUEConstant for the term "true"
TWO_PIDefinition of 2 PI
TYPE_ID_CONNECTION
TYPE_ITEM_OVERLAY
UNDEFINEDConstant for matching JS 'undefined'.
UPDATE_NODE_REASON_ADD_NEW_PORT
UPDATE_NODE_REASON_ADD_PORT
UPDATE_NODE_REASON_MOVED
UPDATE_NODE_REASON_REMOVE_PORT
UPDATE_NODE_REASON_UPDATE_PORT
VERTEX
WILDCARDConstant representing the wildcard used in several places in the API.
X_AXIS_FACES
XHTML_NAMESPACE
XLINK_NAMESPACE
Y_AXIS_FACES

Type Aliases

Type AliasDescription
AnchorIdList of entries in the AnchorLocations enum
AnchorOrientationHint
AnchorSpecModels the specification of anchor - which may be a SingleAnchorSpec, or an array of SingleAnchorSpec objects.
AnimationEvent
AnimationEventCallbackParamsThe type defining the object that is passed to all events fired by the tracePath method.
AnimationPhase
ArrayAnchorSpecAn anchor spec in the form [ x, y, ox, oy ]
Axis
AxisCoefficients
BackgroundTypeType of a background - the values from the BackgroundTypes enum.
BeforeConnectInterceptorDefinition of a function to use as a beforeConnect interceptor.
BeforeConnectionDetachInterceptorDefines the method signature for the callback to the beforeDetach interceptor. Returning false from this method prevents the connection from being detached. The interceptor is fired by the core, meaning that it will be invoked regardless of whether the detach occurred programmatically, or via the mouse.
BeforeConnectionDropInterceptorDefines the method signature for the callback to the beforeDrop interceptor.
BeforeDetachInterceptorA function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted.
BeforeDragInterceptorDefines the method signature for the callback to the beforeDrag interceptor. This method can return boolean false to abort the connection drag, or it can return an object containing values that will be used as the data for the connection that is created.
BeforeMoveConnectionInterceptorA function to run before an edge of the given type is relocated from its current source or target to a new source or target. Returning false from this method will abort the move.
BeforeStartConnectInterceptorA function to run before an edge of the given type is dragged from the given source. Returning false from this method will abort the connection.
BeforeStartConnectionDetachInterceptorDefines the method signature for the callback to the beforeStartDetach interceptor.
BeforeStartDetachInterceptorA function to run before the given edge is detached from the given source vertex. If this method returns false, the detach will be aborted. The difference between this and beforeDetach is that this method is fired as soon as a user tries to detach an edge from an endpoint in the UI, whereas beforeDetach allows a user to detach the edge in the UI.
BindableEvent
BoundingBoxDefines the bounding box for some element - its x/y location, width and height, and optionally the computed center, but that can of course be calculated from the other values. Internally there are times when the code has this to hand so we include it here.
CancelFunctionDefines the function called when a user cancels a dialog.
CanvasDropFilterDefines a function used to filter drop on a canvas
CanvasDropFunctionDefines the function invoked when an item is dropped onto whitespace in the canvas.
ChildEdgesFunctionDefines the function used to find child edges from some vertex.
ChildVerticesFunctionDefinition of a function that can retrieve child vertices of some vertex.
CloseFunctionDefines the function invoked after a dialog has closed.
ClosestPointCandidate
CommitFunctionDefines the function called when a user commits a dialog.
ComponentParameters
ComputedBlankEndpoint
ComputedDotEndpoint
ComputedRectangleEndpoint
ConnectionOverlayAnimatorDefinition of the control surface for a specific segment in the tracePath method.
ConnectorIdAlias for the use case that a Connector is referenced just by its type.
ConnectorSpecSpecification of a connector - either the type id of some Connector, a type+options object.
ConnectorWithOptionsConnector spec in the form {type:.., options:{.. }}
ConstrainFunctionDefinition of a function that can be used to constrain the movemement of an element that is being dragged. The function is given the "desiredLoc", which is the location the element would be moved to if not constrained, and it is expected to return either some other value, meaning place the element at that position, or null, meaning for the given desired location there is no preferred position and the element should not be moved.
ConstructableDefines an object that has a constructor. Used internally to create endpoints/connectors/overlays from their names. Exposed as public for people to create their own endpoints/connectors/overlays.
CurrentState
Curve
DataGeneratorFunctionDefines the function that is invoked to gather a dataset to associate with an item that is being dragged.
DecorateParamsParameters for a decorator
DecoratorSpec
DeleteConnectionOptionsOptional parameters to the DeleteConnection method.
DistanceFromCurve
DragFunctionDefines the callback function invoked when an item is being dragged.
DraggedElement
DragGroupSpecDefinition of a drag group membership - either just the id of a drag group, or the id of a drag group and whether or not this element plays an active role in the drag group.
DropFilterDefines a function used to filter drop.
DropFunctionDefines the function invoked when an item is dropped onto an existing vertex.
DropTargetInfo
EdgeDropFilterDefines a function used to filter drop on an edge.
EdgeDropFunctionDefines the function invoked when an item is dropped on an edge.
EdgePropertyMappingsA set of property mappings for edges.
ElementAttributes
ElementSelectionSpecifier
ElementType
EndpointHelperFunctions
EndpointId
EndpointParams
EndpointSpec
Exporter
Face
FilteredEdgeProcessor
FilterFunction
FixedElementConstraint
FixedElementConstraints
FullAnchorSpecAn anchor spec in the form {type:..., options:{ ... }}
FullDecoratorSpec
FullEndpointSpec
FullOverlaySpec
FullPluginSpecA full surface plugin spec - name and options.
GatedPath
GateId
GetPositionFunction
GetSizeFunction
GhostProxyGenerator
GridLayoutHorizontalAlignmentHorizontal alignment for cells in grid layout.
GridLayoutOrientationGrid layout orientation
GridLayoutVerticalAlignmentVertical alignment for cells in grid layout.
GridType
GroupIdentifierFunctionDefines the function that is invoked to determine whether an item that is about to be dragged represents a group.
GroupLocation
HasId
HasType
HierarchicalLayoutAlignmentPossible values for the align option on a Hierarchical layout.
HierarchicalLayoutChildVerticesFunctionDefines the function used to find child edges in some hierarchical layout.
HierarchicalLayoutOrientationPossible values for hierarchical layout orientation. horizontal means that the layers of vertices are arranged horizontally. vertical means the layers of vertices are arranged vertically.
HierarchicalLayoutSpacingDefines the type of the spacing option on a Hierarchical layout.
HierarchyLayoutAlignmentHierarchy layout alignment.
HierarchyLayoutAxisHierarchy layout axis.
IconOrigin
IdFunction
ImageReadyFunction
IntersectingGroup
IntersectingVertex
jsPlumbToolkitSearchResultsResults from a text search
LineXYDefines a line from some point to another.
LocationFunctionDefines a function that, given some vertex, can provide the x/y location of the vertex on the canvas. During a group layout, the second argument will contain the group that is being laid out, but when running the layout for the main canvas, parentGroup will not be provided.
MagnetizerConstrainFunction
ManagedElement
Margins
MaybeCloseFunctionDefines the interceptor invoked prior to a user closing a dialog, to allow you to allow or reject the operation
ModelEventCallback
ObjectAnchorSpec
ObjectData
ObjectFactoryDefinition of a function that can act as a factory for model objects.
OnBackgroundReadyCallbackCallback from the SimpleBackground when the background image has loaded.
OpenFunctionDefines the callback invoked when a dialog has opened
Orientation
OrthogonalRouterModeHow to draw edges in 'orthogonal' mode in the edge router plugin. bus collates lines that are traversing a segment together into one line. separate draws lines that are traversing a segment together as parallel lines.
OverlaySpec
PageBounds
PageDimensions
PageSize
PanAxisAxes in which the canvas can be panned - x, y, or both.
Parser
PathTransportListener
PlacementStageStrategy
PointOnPath
Quadrant
RectangleXYThis is an alias for BoundingBox.
RedropPolicyDefines how redrop of source endpoints can be done.
RevertEventParams
RevertFunction
RouterLine
SearchDocumentIdFunction
SelectionList
SelectionModePossible modes for a selection.
SetPositionFunction
SetSizeFunction
ShapeGeneratorFunctionDefines a function that can take a vertex's data object and return a document fragment with it rendered.
SingleAnchorSpecModels the specification of a single anchor.
StraightSegmentCoordinates
SupportsClassManipulationList of entities whose class, in the visual representation, can be manipulated.
SupportsClassManipulationElementModels some entity whose class, in the visual representation, can be manipulated.
SurfaceBindableEvent
SurfaceEvent
SurfacePluginSpecA surface plugin spec - either just its name, or its name and options
TemplateResolverResolves the content for some template, via id.
TileSpecs
TilingStrategyTiling strategy - the values from the TilingStrategies enum
TransactionCleanupActionDefines the available actions in response to a new transaction being opened when one is currently open.
TranslatedViewportElement
TypeFunction
TypeGeneratorFunctionDefines the function invoked to determine the type of some item that is about to be dragged.
Units
UnprocessedEdgeListList of edges that were filtered by an edgeFilter and which were not used in the calculation of the layout.
UserDefinedEndpointId
UUID
VertexDefinitionEventsAllowed event bindings for vertices in a view.
VertexUpdatedReason
ViewEventOptions
ViewOptionsEntry
ZoomRangeModels the minimum and maximum values in an allowed zoom range. These value are expressed decimals: 0.5 means 50%, for instance.