sesaparcours
    Preparing search index...

    Class JsPlumbInstance<T>Abstract

    Base class for classes that wish to support binding and firing of events.

    You need to implement the shouldFireEvent method in your concrete subclasses of this class, or you can instead extend from OptimisticEventGenerator, which has a default implementation of shouldFireEvent that returns true.

    Type Parameters

    • T extends { E: unknown } = any

    Hierarchy (View Summary)

    Index

    Constructors

    Properties

    Accessors

    Methods

    _appendElement _appendElementToContainer _appendElementToGroup _idstamp _removeElement addClass addEndpoint addEndpointClass addEndpoints addGroup addOverlay addOverlayClass addSourceSelector addTargetSelector addToGroup applyConnectorType applyEndpointType batch bind checkCondition collapseGroup connect deleteConnection deleteConnectionsForElement deleteEndpoint deleteEveryConnection destroy destroyEndpoint destroyOverlay drawOverlay each expandGroup fire fireMoveEvent getAttribute getClass getConnections getConnectionType getConnectorClass getContainer getEndpoint getEndpointClass getEndpoints getEndpointType getGroup getGroupContentArea getGroupFor getId getListener getManagedElement getManagedElements getOffset getOffsetRelativeToRoot getSelector getSize getStyle getSuspendedAt getType hasClass hide importDefaults isHoverSuspended isSuspendEvents manage manageAll off on reattachOverlay registerConnectionType registerConnectionTypes registerEndpointType registerEndpointTypes removeAllEndpoints removeAllGroups removeAttribute removeClass removeConnectorClass removeEndpointClass removeFromGroup removeGroup removeOverlay removeOverlayClass removeSourceSelector removeTargetSelector renderEndpoint repaint repaintEverything reset restoreDefaults revalidate rotate select selectEndpoints setAttribute setAttributes setColor setConnectionType setConnectorVisible setContainer setElementPosition setEndpointHover setEndpointUuid setEndpointVisible setGroupVisible setHover setLineStyle setLineWidth setOutlineColor setOutlineWidth setOverlayHover setOverlayVisible setPosition setSource setSuspendDrawing setSuspendEvents setTarget setZoom show silently toggleClass toggleGroup toggleVisible trigger unbind unmanage updateLabel updateOffset

    Constructors

    Properties

    _instanceIndex: number
    _suspendDrawing: boolean
    _suspendedAt: string
    allowNestedGroups: boolean
    connectedClass: string
    connections: Connection<any>[]
    connectorClass: string
    connectorOutlineClass: string
    currentlyDragging: boolean
    defaults: JsPlumbDefaults<T["E"]>
    endpointAnchorClassPrefix: string
    endpointClass: string
    endpointConnectedClass: string
    endpointDropAllowedClass: string
    endpointDropForbiddenClass: string
    endpointFloatingClass: string
    endpointFullClass: string
    endpointsByElement: Record<string, Endpoint[]>
    groupManager: GroupManager<T["E"]>
    hoverSuspended: boolean
    isConnectionBeingDragged: boolean
    overlayClass: string
    router: Router<T, any>
    sourceSelectors: ConnectionDragSelector[]
    targetSelectors: ConnectionDragSelector[]
    viewport: Viewport<T>

    Accessors

    • get currentZoom(): number

      Returns number

    • get defaultScope(): string

      Returns string

    Methods

    • Parameters

      • el: T["E"]
      • parent: T["E"]

      Returns void

    • Parameters

      • e: T["E"]

      Returns void

    • Parameters

      Returns void

    • Returns string

    • Parameters

      • el: T["E"]

      Returns void

    • Parameters

      Returns void

    • Add an Endpoint to the given element.

      Parameters

      Returns Endpoint

    • Parameters

      Returns void

    • Add a set of Endpoints to an element

      Parameters

      Returns Endpoint<any>[]

    • Adds an overlay to the given component, repainting the UI as necessary.

      Parameters

      • component: Component

        A Connection or Endpoint to add the overlay to

      • overlay: OverlaySpec

        Spec for the overlay

      • OptionaldoNotRevalidate: boolean

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

      Returns void

    • Parameters

      Returns void

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

      Parameters

      • selector: string

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

        If true, the selector defines an 'exclusion': anything except elements that match this.

      Returns ConnectionDragSelector

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

      Parameters

      • selector: string

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

        If true, the selector defines an 'exclusion': anything except elements that match this.

      Returns ConnectionDragSelector

    • Add an element to a group

      Parameters

      • group: string | UIGroup<T["E"]>
      • ...el: T["E"][]

      Returns void

    • Parameters

      Returns void

    • Suspend drawing, run the given function, and then re-enable drawing, optionally repainting everything.

      Parameters

      • fn: Function

        Function to run while drawing is suspended.

      • OptionaldoNotRepaintAfterwards: boolean

        Whether or not to repaint everything after drawing is re-enabled.

      Returns void

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

      Type Parameters

      • T = any

      Parameters

      • event: string | String[]

        Name of the event(s) to bind to.

      • listener: (a: T, e?: any) => any

        Function to bind to the given event(s)

      • OptionalinsertAtStart: boolean

        Whether or not to insert this listener at the head of the listener queue. Defaults to false.

      Returns EventGenerator

    • Type Parameters

      • RetVal

      Parameters

      • conditionName: string
      • Optionalargs: any

      Returns RetVal

    • Collapse a group.

      Parameters

      Returns void

    • Connect one element to another.

      Parameters

      • params: ConnectParams<T["E"]>

        At the very least you need to supply a source and target.

      • OptionalreferenceParams: ConnectParams<T["E"]>

        Optional extra parameters. This can be useful when you're creating multiple connections that have some things in common.

      Returns Connection

    • Delete the given connection.

      Parameters

      Returns boolean

    • Delete the given endpoint.

      Parameters

      • object: string | Endpoint<any>

        Either an Endpoint, or the UUID of an Endpoint.

      Returns JsPlumbInstance

    • Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of jsPlumb again.

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns any

    • Execute the given function for each of the given elements.

      Parameters

      • spec: T["E"] | T["E"][]

        An Element, or an element id, or an array of elements/element ids.

      • fn: (e: T["E"]) => any

        The function to run on each element.

      Returns JsPlumbInstance

    • Expand a group.

      Parameters

      Returns void

    • Fire the named event.

      Type Parameters

      • T

      Parameters

      • event: string

        Event to fire

      • Optionalvalue: T

        Value to pass to event handlers

      • OptionaloriginalEvent: Event

        Optional original event that caused this event to be fired.

      Returns any

    • Parameters

      • el: T["E"]
      • name: string

      Returns string

    • Parameters

      • el: T["E"]

      Returns string

    • Parameters

      • connector: AbstractConnector

      Returns string

    • Returns any

    • Retrieve an endpoint by its UUID.

      Parameters

      • uuid: string

      Returns Endpoint

    • Parameters

      Returns string

    • Gets all registered endpoints for the given element.

      Parameters

      • el: T["E"]

      Returns Endpoint<any>[]

    • Retrieve an endpoint type by its id.

      Parameters

      • id: string

      Returns EndpointTypeDescriptor

    • Gets the group with given id, null if not found.

      Parameters

      • groupId: string

      Returns UIGroup<T["E"]>

    • Parameters

      Returns T["E"]

    • Gets the group associated with the given element, null if the given element does not map to a group.

      Parameters

      • el: T["E"]

      Returns UIGroup<T["E"]>

    • Parameters

      • element: T["E"]
      • Optionaluuid: string

      Returns string

    • Gets all listeners for the given named event.

      Parameters

      • forEvent: string

      Returns any[]

    • Gets the element with the given ID from the list managed elements, null if not currently managed.

      Parameters

      • id: string

      Returns T["E"]

    • Gets all of the elements managed by this instance.

      Returns Record<string, ManagedElement<T["E"]>>

    • Parameters

      • el: T["E"]

      Returns PointXY

    • Parameters

      • el: string | T["E"]

      Returns PointXY

    • Parameters

      • ctx: string | T["E"]
      • Optionalspec: string

      Returns ArrayLike<T["E"]>

    • Parameters

      • el: T["E"]

      Returns Size

    • Parameters

      • el: T["E"]
      • prop: string

      Returns any

    • Returns string

    • Retrieve an endpoint or connection type by its id.

      Parameters

      • id: string
      • typeDescriptor: string

      Returns TypeDescriptor

    • Parameters

      • el: T["E"]
      • clazz: string

      Returns boolean

    • Parameters

      • el: T["E"]
      • OptionalchangeEndpoints: boolean

      Returns JsPlumbInstance

    • Returns whether or not hover is currently suspended.

      Returns boolean

    • Returns whether not event firing is currently suspended

      Returns boolean

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

      Parameters

      • element: T["E"]

        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: string

        Optional ID for jsPlumb to use internally. If this is not supplied, one will be created.

      • Optional_recalc: boolean

        Maybe 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

      Returns ManagedElement<T["E"]>

    • Manage a group of elements.

      Parameters

      • elements: string | ArrayLike<T["E"]>

        Array-like object of strings or elements (can be an Array or a NodeList), or a CSS selector (which is applied with the instance's container element as its context)

      • Optionalrecalc: boolean

        Maybe recalculate offsets for the element also.

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Register a connection type: a set of connection attributes grouped together with an ID.

      Parameters

      Returns void

    • Register a set of connection types

      Parameters

      Returns void

    • Register an endpoint type: a set of endpoint attributes grouped together with an ID.

      Parameters

      Returns void

    • Register a set of endpoint types

      Parameters

      Returns void

    • Remove every endpoint registered to the given element.

      Parameters

      • el: T["E"]

        Element to remove endpoints for.

      • Optionalrecurse: boolean

        If true, also remove endpoints for elements that are descendants of this element.

      Returns JsPlumbInstance

    • Remove all groups from this instance of jsPlumb

      Parameters

      • OptionaldeleteMembers: boolean
      • Optional_manipulateView: boolean

        Not for public usage. Used internally.

      Returns void

    • Parameters

      • el: T["E"]
      • attName: string

      Returns void

    • Parameters

      Returns void

    • Parameters

      • connector: AbstractConnector
      • clazz: string

      Returns void

    • Parameters

      Returns void

    • Remove an element from a group

      Parameters

      • group: string | UIGroup<T["E"]>

        Group to remove element from

      • el: T["E"]

        Element to remove.

      • Optional_doNotFireEvent: boolean

        Not for public usage. Used internally.

      Returns void

    • Remove a group from this instance of jsPlumb.

      Parameters

      • group: string | UIGroup<T["E"]>

        Group to remove

      • OptionaldeleteMembers: boolean

        Whether 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: boolean

        Not for public usage. Used internally.

      • Optional_doNotFireEvent: boolean

        Not recommended for public usage, used internally.

      Returns Record<string, PointXY>

    • Remove the overlay with the given id from the given component.

      Parameters

      • component: Component

        Component to remove the overlay from.

      • overlayId: string

        ID of the overlay to remove.

      Returns void

    • Parameters

      Returns void

    • Unregister the given source selector.

      Parameters

      Returns void

    • Unregister the given target selector.

      Parameters

      Returns void

    • Parameters

      Returns void

    • 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,

      Parameters

      • el: T["E"]

        Element to repaint.

      • Optionaltimestamp: string

        Optional parameter used internally to avoid recalculating offsets multiple times in one paint.

      • OptionaloffsetsWereJustCalculated: boolean

        If true, we don't recalculate the offsets of child elements of the element we're repainting.

      Returns RedrawResult

    • Repaint every connection and endpoint in the instance.

      Returns JsPlumbInstance

    • 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().

      Returns void

    • Reset the instance defaults to the defaults computed by the constructor.

      Returns JsPlumbInstance

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

      Parameters

      • el: T["E"]

        Element to revalidate.

      • Optionaltimestamp: string

        Optional, used internally to avoid recomputing position/size information if it has already been computed.

      Returns RedrawResult

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

      Parameters

      • element: T["E"]

        Element to rotate

      • rotation: number

        Amount to totate

      • Optional_doNotRepaint: boolean

        For internal use.

      Returns RedrawResult

    • Parameters

      • el: T["E"]
      • name: string
      • value: string

      Returns void

    • Parameters

      • el: T["E"]
      • atts: Record<string, string>

      Returns void

    • Sets the color of the connection.

      Parameters

      Returns void

    • Sets the type of a connection and then repaints it.

      Parameters

      • connection: Connection
      • type: string
      • Optionalparams: any

      Returns void

    • Parameters

      • connector: AbstractConnector
      • v: boolean

      Returns void

    • Parameters

      • c: T["E"]

      Returns void

    • Sets the position of the given element to be [x,y].

      Parameters

      • el: T["E"]

        Element to set the position for

      • x: number

        Position in X axis

      • y: number

        Position in Y axis

      Returns RedrawResult

      The result of the redraw operation that follows the update of the viewport.

    • Parameters

      • endpoint: Endpoint<T>
      • h: boolean
      • endpointIndex: number
      • OptionaldoNotCascade: boolean

      Returns void

    • Set an endpoint's uuid, updating the internal map

      Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

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

      Parameters

      • conn: Connection
      • style: {
            color?: string;
            lineWidth?: number;
            outlineColor?: string;
            outlineWidth?: number;
        }

      Returns void

    • Sets the line width of the connection

      Parameters

      Returns void

    • Set the outline color for the given connection

      Parameters

      Returns void

    • Sets the outline width for the given connection

      Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Parameters

      Returns void

    • Change the source of the given connection to be the given endpoint or element.

      Parameters

      Returns void

    • Sets whether or not drawing is suspended.

      Parameters

      • Optionalval: boolean

        True to suspend, false to enable.

      • OptionalrepaintAfterwards: boolean

        If true, repaint everything afterwards.

      Returns boolean

    • Sets whether not event firing is currently suspended

      Parameters

      • val: boolean

      Returns void

    • Change the target of the given connection to be the given endpoint or element.

      Parameters

      Returns void

    • Parameters

      • z: number
      • OptionalrepaintEverything: boolean

      Returns boolean

    • Parameters

      • el: T["E"]
      • OptionalchangeEndpoints: boolean

      Returns JsPlumbInstance

    • Run the given function without firing any events.

      Parameters

      Returns void

    • Parameters

      Returns void

    • Expand a group if it is collapsed, or collapse it if it is expanded.

      Parameters

      Returns void

    • private method to do the business of toggling hiding/showing.

      Parameters

      • el: T["E"]
      • OptionalchangeEndpoints: boolean

      Returns void

    • Parameters

      • el: Document | T["E"]
      • event: string
      • OptionaloriginalEvent: Event
      • Optionalpayload: any
      • Optionaldetail: number

      Returns void

    • Unbind the given event listener, or all listeners. If you call this method with no arguments then all event listeners are unbound.

      Parameters

      • OptionaleventOrListener: string | Function

        Either an event name, or an event handler function

      • Optionallistener: Function

        If eventOrListener is defined, this is the event handler to unbind.

      Returns EventGenerator

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

      Parameters

      • el: T["E"]

        Element, or ID of the element to stop managing.

      • OptionalremoveElement: boolean

        If true, also remove the element from the renderer.

      Returns void

    • Parameters

      Returns void

    • Update the cached offset information for some element.

      Parameters

      Returns ViewportElement<T["E"]>

      an UpdateOffsetResult containing the offset information for the given element.