Optionaldefaults: BrowserJsPlumbDefaultsReadonlyconnectionsWhether or not elements should be draggable. This can be provided in the constructor arguments, or simply toggled on the
class. The default value is true.
ReadonlygroupReadonlyrouterReadonlyviewportAdds a filter to the list of filters used to determine whether or not a given event should start an element drag.
CSS3 selector, or function that takes an element and returns true/false
Optionalexclude: booleanIf true, the filter is inverted: anything but this value.
Add an Endpoint to the given element.
Element to add the endpoint to.
Optionalparams: EndpointOptions<Element>OptionalreferenceParams: EndpointOptions<Element>Add a set of Endpoints to an element
Element to add the Endpoints to.
Array of endpoint options.
OptionalreferenceParams: EndpointOptions<Element>Adds an overlay to the given component, repainting the UI as necessary.
A Connection or Endpoint to add the overlay to
Spec for the overlay
OptionaldoNotRevalidate: booleanDefaults to true. If false, a repaint won't occur after adding the overlay. This flag can be used when adding several overlays in a loop.
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.
CSS3 selector identifying child element(s) of some managed element that should act as a connection source.
Optionalparams: BehaviouralTypeDescriptor<any>Options for the source: connector type, behaviour, etc.
Optionalexclude: booleanIf true, the selector defines an 'exclusion': anything except elements that match this.
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.
CSS3 selector identifying child element(s) of some managed element that should act as a connection target.
Optionalparams: BehaviouralTypeDescriptor<any>Options for the target
Optionalexclude: booleanIf true, the selector defines an 'exclusion': anything except elements that match this.
Adds the given element(s) to the given drag group.
Either the ID of some drag group, in which case the elements are all added as 'active', or an object of the form
{ id:"someId", active:boolean }. In the latter case, active, if true, which is the default, indicates whether
dragging the given element(s) should cause all the elements in the drag group to be dragged. If active is false it means the
given element(s) is "passive" and should only move when an active member of the drag group is dragged.
Elements to add to the drag group.
Suspend drawing, run the given function, and then re-enable drawing, optionally repainting everything.
Function to run while drawing is suspended.
OptionaldoNotRepaintAfterwards: booleanWhether or not to repaint everything after drawing is re-enabled.
Bind an event listener. This method can be used with a type parameter by call sites; although it's not necessary it can be helpful to use this to ensure you've thought about what the payload to your event handler is going to be.
Removes all members from the drag group with the given name.
Clears the current drag selection
Connect one element to another.
At the very least you need to supply a source and target.
OptionalreferenceParams: ConnectParams<Element>Optional extra parameters. This can be useful when you're creating multiple connections that have some things in common.
Delete all connections attached to the given element.
Optionalparams: DeleteConnectionOptionsDelete the given endpoint.
Either an Endpoint, or the UUID of an Endpoint.
Optionalparams: DeleteConnectionOptionsClears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of jsPlumb again.
Optionalparams: ConnectionMovedParams<any>Optionalevt: EventGets an attribute from the given element. Exposed publically but mostly for internal use, to allow the core to abstract out the details of how the UI is being rendered.
Optionaloptions: SelectOptions<Element>Optionalflat: booleanOptionaluuid: stringGets all listeners for the given named event.
Gets the element with the given ID from the list managed elements, null if not currently managed.
Gets all of the elements managed by this instance.
Retrieve an endpoint or connection type by its id.
Returns whether or not the given element has the given class.
OptionalchangeEndpoints: booleanHelper method to get the draggable state of some element. Under the hood all this does is check for the existence of the data-jtk-not-draggable attribute.
Element to get draggable state for.
Returns whether or not hover is currently suspended.
Returns whether not event firing is currently suspended
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.
Element to manage. This method does not accept a DOM element ID as argument. If you wish to manage elements via their DOM element ID,
you should use manageAll and pass in an appropriate CSS selector that represents your element, eg #myElementId.
OptionalinternalId: stringOptional ID for jsPlumb to use internally. If this is not supplied, one will be created.
Optional_recalc: booleanMaybe recalculate offsets for the element also. It is not recommended that clients of the API use this parameter; it's used in certain scenarios internally
Manage a group of elements.
Bind an event listener to the given element or elements.
Element, or elements, to bind the event listener to.
Name of the event to bind to.
Either a callback function, or a CSS 3 selector. When this is a selector the event listener is bound as a "delegate", ie. the event listeners
listens to events on children of the given el that match the selector.
Optionalcallback: FunctionCallback function for event. Only supplied when you're binding a delegated event handler.
Register a connection type: a set of connection attributes grouped together with an ID.
Register a set of connection types
Set of types to register.
Register an endpoint type: a set of endpoint attributes grouped together with an ID.
Register a set of endpoint types
Set of types to register.
Remove every endpoint registered to the given element.
Element to remove endpoints for.
Optionalrecurse: booleanIf true, also remove endpoints for elements that are descendants of this element.
Remove all groups from this instance of jsPlumb
OptionaldeleteMembers: booleanOptional_manipulateView: booleanNot for public usage. Used internally.
Remove an attribute from the given element. Exposed publically but mostly for internal use, to allow the core to abstract out the details of how the UI is being rendered.
Element to remove an attribute from
Name of the attribute to remove
Removes a filter from the list of filters used to determine whether or not a given event should start an element drag.
CSS3 selector, or function that takes an element and returns true/false
Removes the given element(s) from any drag group they may be in. You don't need to supply the drag group id, as elements can only be in one drag group anyway.
Elements to remove from drag groups.
Remove a group from this instance of jsPlumb.
Group to remove
OptionaldeleteMembers: booleanWhether or not to also delete any members of the group. If this is false (the default) then group members will be removed before the group is deleted.
Optional_manipulateView: booleanNot for public usage. Used internally.
Optional_doNotFireEvent: booleanNot recommended for public usage, used internally.
Remove the overlay with the given id from the given component.
Component to remove the overlay from.
ID of the overlay to remove.
Unregister the given source selector.
Remove the given drag selector from the instance.
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,
Element to repaint.
Optionaltimestamp: stringOptional parameter used internally to avoid recalculating offsets multiple times in one paint.
OptionaloffsetsWereJustCalculated: booleanIf true, we don't recalculate the offsets of child elements of the element we're repainting.
Repaint every connection and endpoint in the instance.
Clears all endpoints and connections and managed elements from the instance of jsplumb. Does not also clear out event listeners, selectors, or
connection/endpoint types - for that, use destroy().
Reset the instance defaults to the defaults computed by the constructor.
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.
Element to revalidate.
Optionaltimestamp: stringOptional, used internally to avoid recomputing position/size information if it has already been computed.
Rotates the given element. This method overrides the same method from the superclass: the superclass only makes a note of the current rotation for the given element, but in this class the element has appropriate CSS transforms applied to it to effect the rotation in the DOM.
Element to rotate.
Rotation, in degrees.
OptionaldoNotRepaint: booleanIf true, a repaint is not done afterwards. Defaults to false.
Optionalparams: SelectOptions<Element>Optionalparams: SelectEndpointOptions<Element>Sets an attribute on the given element. Exposed publically but mostly for internal use, to allow the core to abstract out the details of how the UI is being rendered.
Sets the type of a connection and then repaints it.
Optionalparams: anySets the element this instance will use as the container for everything it adds to the UI. In normal use this method is not expected to be called very often, if at all. The method is used by the instance constructor and also in certain situations by the Toolkit edition.
Sets the function used to constrain the dragging of elements.
Helper method to set the draggable state of some element. Under the hood all this does is add/remove the data-jtk-not-draggable attribute.
Element to set draggable state for.
Sets the grid that should be used when dragging elements.
Grid to use.
Sets the active/passive state for the given element(s) in their respective drag groups (if any). You don't need to supply the drag group id, as elements can only be in one drag group anyway.
true for active, false for passive.
Sets the position of the given element to be [x,y].
Element to set the position for
Position in X axis
Position in Y axis
The result of the redraw operation that follows the update of the viewport.
Set an endpoint's uuid, updating the internal map
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.
Sets the visibility of some overlay.
Overlay to hide or show
If true, make the overlay visible, if false, make the overlay invisible.
Change the source of the given connection to be the given endpoint or element.
Sets whether or not drawing is suspended.
Optionalval: booleanTrue to suspend, false to enable.
OptionalrepaintAfterwards: booleanIf true, repaint everything afterwards.
Sets whether not event firing is currently suspended
Change the target of the given connection to be the given endpoint or element.
OptionalrepaintEverything: booleanOptionaloriginalEvent: EventOptionalchangeEndpoints: booleanToggles membership in the current drag selection of the given element(s)
private method to do the business of toggling hiding/showing.
OptionalchangeEndpoints: booleanTrigger an event on the given element. Exposed publically but mostly intended for internal use.
Element to trigger the event on.
Name of the event to trigger.
OptionaloriginalEvent: EventOptional event that gave rise to this method being called.
Optionalpayload: anyOptional payload to set on the Event that is created.
Optionaldetail: numberOptional detail for the Event that is created.
Unbind the given event listener, or all listeners. If you call this method with no arguments then all event listeners are unbound.
Stops managing the given element.
Element, or ID of the element to stop managing.
OptionalremoveElement: booleanIf true, also remove the element from the renderer.
Update the cached offset information for some element.
Optionalparams: UpdateOffsetOptionsan UpdateOffsetResult containing the offset information for the given element.
JsPlumbInstance that renders to the DOM in a browser, and supports dragging of elements/connections.