Skip to main content

Home > @jsplumb/core > JsPlumbInstance

JsPlumbInstance class#

Signature:

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

Extends: EventGenerator

Constructors#

ConstructorModifiersDescription
(constructor)(_instanceIndex, defaults)Constructs a new instance of the JsPlumbInstance class

Properties#

PropertyModifiersTypeDescription
_instanceIndexnumber
_managedElementsRecord<string, ManagedElement<T["E"]>>
_suspendDrawingboolean
_suspendedAtstring
allowNestedGroupsboolean
connectedClassstring
connectionsArray<Connection>
connectorClassstring
connectorOutlineClassstring
currentlyDraggingboolean
currentZoomnumber
defaultsJsPlumbDefaults<T["E"]>
defaultScopestring
endpointAnchorClassPrefixstring
endpointClassstring
endpointConnectedClassstring
endpointDropAllowedClassstring
endpointDropForbiddenClassstring
endpointFullClassstring
endpointsByElementRecord<string, Array<Endpoint>>
groupManagerGroupManager<T["E"]>
hoverSuspendedboolean
isConnectionBeingDraggedboolean
overlayClassstring
routerRouter<T, any>
sourceSelectorsArray<SourceSelector>
targetSelectorsArray<TargetSelector>
viewportViewport<T>

Methods#

MethodModifiersDescription
_appendElement(el, parent)
_createSourceDefinition(params, referenceParams)
_idstamp()
_removeElement(el)
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(params)
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)
applyConnectorType(connector, t)
applyEndpointType(ep, t)
batch(fn, doNotRepaintAfterwards)Suspend drawing, run the given function, and then re-enable drawing, optionally repainting everything.
checkCondition(conditionName, args)
collapseGroup(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.
deleteEveryConnection(params)
destroy()Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of jsPlumb again.
destroyEndpoint(ep)
destroyOverlay(o)
drawOverlay(overlay, component, paintStyle, absolutePosition)
each(spec, fn)Execute the given function for each of the given elements.
expandGroup(group)
fireMoveEvent(params, evt)
getAttribute(el, name)
getClass(el)
getConnections(options, flat)
getConnectionType(id)
getConnectorClass(connector)
getContainer()
getEndpoint(uuid)Retrieve an endpoint by its UUID.
getEndpointClass(ep)
getEndpoints(el)Gets all registered endpoints for the given element.
getEndpointType(id)
getGroup(groupId)
getGroupContentArea(group)
getGroupFor(el)
getId(element, uuid)
getManagedElement(id)Gets the element with the given ID from the list managed elements, null if not currently managed.
getManagedElements()
getOffset(el)
getOffsetRelativeToRoot(el)
getPathData(connector)
getSelector(ctx, spec)
getSize(el)
getStyle(el, prop)
getSuspendedAt()
getType(id, typeDescriptor)
hasClass(el, clazz)
hide(el, changeEndpoints)
importDefaults(d)
isHoverSuspended()Returns whether or not hover is currently suspended.
makeConnector(connection, name, args)
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)
paintConnection(connection, params)
paintEndpoint(endpoint, params)
paintOverlay(o, params, extents)
proxyConnection(connection, index, proxyEl, endpointGenerator, anchorGenerator)
reattachOverlay(o, c)
refreshEndpoint(endpoint)
registerConnectionType(id, type)
registerConnectionTypes(types)
registerEndpointType(id, type)
registerEndpointTypes(types)
removeAllEndpoints(el, recurse)Remove every endpoint registered to the given element.
removeAllGroups(deleteMembers, manipulateView)
removeAttribute(el, attName)
removeClass(el, clazz)
removeConnectorClass(connector, clazz)
removeEndpointClass(ep, c)
removeFromGroup(group, el, doNotFireEvent)
removeGroup(group, deleteMembers, manipulateView, doNotFireEvent)
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()
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.
select(params)
selectEndpoints(params)
setAttribute(el, name, value)
setAttributes(el, atts)
setConnectorVisible(connector, v)
setContainer(c)
setElementPosition(el, x, y)Sets the position of the given element to be [x,y].
setEndpointHover(endpoint, h, doNotCascade)
setEndpointUuid(endpoint, uuid)Set an endpoint's uuid, updating the internal map
setEndpointVisible(ep, v)
setGroupVisible(group, state)
setHover(component, hover)
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)
sourceOrTargetChanged(originalId, newId, connection, newElement, index)
toggleClass(el, clazz)
toggleGroup(group)
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.
unproxyConnection(connection, index)
updateLabel(o)
updateOffset(params)Update the cached offset information for some element.