Skip to main content

Home > @jsplumbtoolkit/browser-ui > JsPlumbInstance

JsPlumbInstance class


export declare abstract class JsPlumbInstance<T extends {
E: unknown;
} = any> extends OptimisticEventGenerator

Extends: OptimisticEventGenerator


(constructor)(toolkit, options, defaults)Constructs a new instance of the JsPlumbInstance class


_connectionEstablished(payload: ConnectionEstablishedParams) => any
_managedElementsRecord<string, ManagedElement<T["E"]>>
endpointsByElementRecord<string, Array<Endpoint<T["E"]>>>
routerRouter<T, any>


_appendElement(el, parent)
_appendElementToGroup(group, e)
_createSourceDefinition(params, referenceParams)
addClass(el, clazz)
addEndpoint(el, params, referenceParams)Add an Endpoint to the given element.
addEndpointClass(ep, c)
addEndpoints(el, endpoints, referenceParams)Add a set of Endpoints to an element
addGroup(group, params)Add a group.
addOverlay(component, overlay, doNotRevalidate)Adds an overlay to the given component, repainting the UI as necessary.
addOverlayClass(o, clazz)
addSourceSelector(selector, params, exclude)Registers a selector for connection drag on the instance. This is a newer version of the makeSource functionality that had been in jsPlumb since the early days (and which, in 5.x, has been removed). With this approach, rather than calling makeSource on every element, you can register a CSS selector on the instance that identifies something that is common to your elements. This will only respond to mouse/touch events on elements that are managed by the instance.
addTargetSelector(selector, params, exclude)Registers a selector for connection drag on the instance. This is a newer version of the makeTarget functionality that has been in jsPlumb since the early days. With this approach, rather than calling makeTarget on every element, you can register a CSS selector on the instance that identifies something that is common to your elements. This will only respond to mouse events on elements that are managed by the instance.
addToGroup(group, el)Add an element to a group
applyConnectorType(connector, t)
applyEndpointType(ep, t)
batch(fn, doNotRepaintAfterwards)Suspend drawing, run the given function, and then re-enable drawing, optionally repainting everything.
beforeDetach(connection, isDiscard)
collapseGroup(group)Collapse a group.
connect(params, referenceParams)Connect one element to another.
deleteConnection(connection, params)Delete the given connection.
deleteConnectionsForElement(el, params)Delete all connections attached to the given element.
deleteEndpoint(object)Delete the given endpoint.
destroy()Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of jsPlumb again.
drawOverlay(overlay, component, paintStyle, absolutePosition)
each(spec, fn)Execute the given function for each of the given elements.
expandGroup(group)Expand a group.
fireMoveEvent(params, evt)
getAttribute(el, name)
getConnections(options, flat)
getConnectionType(id)Retrieve a connection type by its id.
getEndpoint(uuid)Retrieve an endpoint by its UUID.
getEndpoints(el)Gets all registered endpoints for the given element.
getEndpointType(id)Retrieve an endpoint type by its id.
getGroup(groupId)Gets the group with given id, null if not found.
getGroupFor(el)Gets the group associated with the given element, null if the given element does not map to a group.
getId(element, uuid)
getManagedElement(id)Gets the element with the given ID from the list managed elements, null if not currently managed.
getManagedElements()Gets all of the elements managed by this instance.
getSelector(ctx, spec)
getStyle(el, prop)
getType(id, typeDescriptor)Retrieve an endpoint or connection type by its id.
hasClass(el, clazz)
hide(el, changeEndpoints)
importDefaults(d)Import the given set of defaults to the instance.
isHoverSuspended()Returns whether or not hover is currently suspended.
manage(element, internalId, _recalc)Manage an element. Adds the element to the viewport and sets up tracking for endpoints/connections for the element, as well as enabling dragging for the element. This method is called internally by various methods of the jsPlumb instance, such as connect, addEndpoint, makeSource and makeTarget, so if you use those methods to setup your UI then you may not need to call this. However, if you use the addSourceSelector and addTargetSelector methods to configure your UI then you will need to register elements using this method, or they will not be draggable.
manageAll(elements, recalc)Manage a group of elements.
off(el, event, callback)
on(el, event, callbackOrSelector, callback)
reattachOverlay(o, c)
registerConnectionType(id, type)Register a connection type: a set of connection attributes grouped together with an ID.
registerConnectionTypes(types)Register a set of connection types
registerEndpointType(id, type)Register an endpoint type: a set of endpoint attributes grouped together with an ID.
registerEndpointTypes(types)Register a set of endpoint types
removeAllEndpoints(el, recurse)Remove every endpoint registered to the given element.
removeAllGroups(deleteMembers, _manipulateView)Remove all groups from this instance of jsPlumb
removeAttribute(el, attName)
removeClass(el, clazz)
removeConnectorClass(connector, clazz)
removeEndpointClass(ep, c)
removeFromGroup(group, el, _doNotFireEvent)Remove an element from a group
removeGroup(group, deleteMembers, _manipulateView, _doNotFireEvent)Remove a group from this instance of jsPlumb.
removeOverlay(conn, overlayId)Remove the overlay with the given id from the given component.
removeOverlayClass(o, clazz)
removeSourceSelector(selector)Unregister the given source selector.
removeTargetSelector(selector)Unregister the given target selector.
renderEndpoint(ep, paintStyle)
repaint(el, timestamp, offsetsWereJustCalculated)Repaints all connections and endpoints associated with the given element, _without recomputing the element size and position_. If you want to first recompute element size and position you should call revalidate(el) instead,
repaintEverything()Repaint every connection and endpoint in the instance.
reset()Clears all endpoints and connections from the instance of jsplumb. Does not also clear out event listeners, selectors, or connection/endpoint types - for that, use destroy().
restoreDefaults()Reset the instance defaults to the defaults computed by the constructor.
revalidate(el, timestamp)Updates position/size information for the given element and redraws its Endpoints and their Connections. Use this method when you've made a change to some element that may have caused the element to change its position or size and you want to ensure the connections are in the right place.
rotate(element, rotation, _doNotRepaint)Sets rotation for the element to the given number of degrees (not radians). A value of null is treated as a rotation of 0 degrees.
setAttribute(el, name, value)
setAttributes(el, atts)
setColor(conn, color)Sets the color of the connection.
setConnectionType(connection, type, params)Sets the type of a connection and then repaints it.
setConnectorVisible(connector, v)
setElementPosition(el, x, y)Sets the position of the given element to be [x,y].
setEndpointHover(endpoint, h, endpointIndex, doNotCascade)
setEndpointVisible(ep, v)
setGroupVisible(group, state)
setHover(component, hover)
setLineStyle(conn, style)Sets color, outline color, line width and outline width. Any values for which the key is present will not be set, but if the key is present and the value is null, the corresponding value in the connection's paint style will be set to null.
setLineWidth(conn, width)Sets the line width of the connection
setOutlineColor(conn, color)Set the outline color for the given connection
setOutlineWidth(conn, width)Sets the outline width for the given connection
setOverlayHover(o, hover)
setOverlayVisible(o, visible)
setPosition(el, p)
setSource(connection, el)Change the source of the given connection to be the given endpoint or element.
setSuspendDrawing(val, repaintAfterwards)Sets whether or not drawing is suspended.
setTarget(connection, el)Change the target of the given connection to be the given endpoint or element.
setZoom(z, repaintEverything)
show(el, changeEndpoints)
toggleClass(el, clazz)
toggleGroup(group)Expand a group if it is collapsed, or collapse it if it is expanded.
toggleVisible(el, changeEndpoints)private method to do the business of toggling hiding/showing.
trigger(el, event, originalEvent, payload, detail)
unmanage(el, removeElement)Stops managing the given element, removing it from internal tracking and clearing the custom attribute that is added by jsPlumb to mark it as managed. This method fires an 'element:unmanage' event containing the unmanaged element and its managed id.
updateOffset(params)Update the cached offset information for some element.