Home > @jsplumbtoolkit/browser-ui > BrowserJsPlumbInstance
BrowserJsPlumbInstance class
JsPlumbInstance that renders to the DOM in a browser, and supports dragging of elements/connections.
Signature:
export declare class BrowserJsPlumbInstance extends JsPlumbInstance<{
E: Element;
}>
Extends: JsPlumbInstance<{ E: Element; }>
Constructors
| Constructor | Modifiers | Description |
|---|---|---|
| (constructor)(_instanceIndex, defaults) | Constructs a new instance of the BrowserJsPlumbInstance class |
Properties
Methods
| Method | Modifiers | Description |
|---|---|---|
| addClass(el, clazz) | Add one or more classes to the given element or list of elements. | |
| addDragFilter(filter, exclude) | Adds a filter to the list of filters used to determine whether or not a given event should start an element drag. | |
| 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. | |
| addToDragGroup(spec, els) | Adds the given element(s) to the given drag group. | |
| addToDragSelection(el) | Adds the given element(s) to the current drag selection. | |
| clearDragGroup(name) | Removes all members from the drag group with the given name. | |
| clearDragSelection() | Clears the current drag selection | |
| consume(e, doNotPreventDefault) | Consumes the given event. | |
| destroy() | Clears the instance and unbinds any listeners on the instance. After you call this method you cannot use this instance of jsPlumb again. | |
| getAttribute(el, name) | Gets 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. | |
| getClass(el) | Gets the CSS class for the given element. | |
| getPosition(el) | get the position of the given element, allowing for svg elements and html elements | |
| hasClass(el, clazz) | Returns whether or not the given element has the given class. | |
| isDraggable(el) | Helper 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. | |
| isInsideParent(_el, pos) | ||
| 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. | |
| off(el, event, callback) | Remove an event binding from the given element or elements. | |
| on(el, event, callbackOrSelector, callback) | Bind an event listener to the given element or elements. | |
| removeAttribute(el, attName) | 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. | |
| removeClass(el, clazz) | Remove one or more classes from the given element or list of elements. | |
| removeDragFilter(filter) | Removes a filter from the list of filters used to determine whether or not a given event should start an element drag. | |
| removeFromDragGroup(els) | 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. | |
| removeFromDragSelection(el) | Removes the given element(s) from the current drag selection | |
| removeSourceSelector(selector) | Unregister the given source selector. | |
| reset() | 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(). | |
| rotate(element, rotation, doNotRepaint) | 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. | |
| setAttribute(el, name, value) | 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. | |
| setAttributes(el, atts) | Sets some attributes 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. | |
| setContainer(newContainer) | Sets 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. | |
| setDragConstrainFunction(constrainFunction) | Sets the function used to constrain the dragging of elements. | |
| setDraggable(element, draggable) | 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. | |
| setDragGrid(grid) | Sets the grid that should be used when dragging elements. | |
| setDragGroupState(state, els) | 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. | |
| setOverlayVisible(o, visible) | Sets the visibility of some overlay. | |
| toggleClass(el, clazz) | Toggles one or more classes on the given element or list of elements. | |
| toggleDraggable(el) | ||
| toggleDragSelection(el) | Toggles membership in the current drag selection of the given element(s) | |
| trigger(el, event, originalEvent, payload, detail) | Trigger an event on the given element. Exposed publically but mostly intended for internal use. | |
| unmanage(el, removeElement) | Stops managing the given element. |