Skip to main content

Home > @jsplumb/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<ElementType> 

Extends: JsPlumbInstance<ElementType>

Constructors#

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

Properties#

PropertyModifiersTypeDescription
_connectorClickFunction
_connectorDblClickFunction
_connectorDblTapFunction
_connectorMouseoutFunction
_connectorMouseoverFunction
_connectorTapFunction
_elementClickFunction
_elementDblTapFunction
_elementMouseenterFunction
_elementMouseexitFunction
_elementTapFunction
_endpointClickFunction
_endpointDblClickFunction
_endpointMouseoutFunction
_endpointMouseoverFunction
_instanceIndexnumber
_overlayClickFunction
_overlayDblClickFunction
_overlayDblTapFunction
_overlayMouseoutFunction
_overlayMouseoverFunction
_overlayTapFunction
draggingClassstring
dragManagerDragManager
dragSelectClassstring
elementDraggingClassstring
elementsDraggablebooleanWhether 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.
eventManagerEventManager
hoverClassstring
hoverSourceClassstring
hoverTargetClassstring
managedElementsSelectorstring
sourceElementDraggingClassstring
svg{ node: (name: string, attributes?: Dictionary<string | number>) => SVGElement; attr: (node: SVGElement, attributes: Dictionary<string | number>) => void; pos: (d: [number, number]) => string; }
targetElementDraggingClassstring

Methods#

MethodModifiersDescription
_appendElement(el, parent)
_getAssociatedElements(el)
_removeElement(element)
addClass(el, clazz)Add one or more classes to the given element or list of elements.
addConnectorClass(connector, clazz)
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.
addEndpointClass(ep, c)
addOverlayClass(o, clazz)
addSourceSelector(selector, params, exclude)
addToDragGroup(spec, els)Adds the given element(s) to the given drag group.
addToDragSelection(el)
applyConnectorType(connector, t)
applyEndpointType(ep, t)
clearDragSelection()
consume(e, doNotPreventDefault)Consumes the given event.
deleteConnection(connection, params)
destroy()
destroyConnector(connection)
destroyEndpoint(ep)
destroyOverlay(o)
drawOverlay(o, component, paintStyle, absolutePosition)
getAttribute(el, name)
getClass(el)
getConnectorClass(connector)
getEndpointClass(ep)
getGroupContentArea(group)
getOffset(el)
getOffsetRelativeToRoot(el)
getSelector(ctx, spec)
getSize(el)
getStyle(el, prop)
hasClass(el, clazz)Returns whether or not the given element has the given class.
isDraggable(el)
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.
paintConnector(connector, paintStyle, extents)
paintOverlay(o, params, extents)
reattachOverlay(o, c)
removeAttribute(el, attName)
removeClass(el, clazz)Remove one or more classes from the given element or list of elements.
removeConnectorClass(connector, clazz)
removeDragFilter(filter)Removes a filter from the list of filters used to determine whether or not a given event should start an element drag.
removeEndpointClass(ep, c)
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)
removeOverlayClass(o, clazz)
removeSourceSelector(selector)
renderEndpoint(ep, paintStyle)
reset()
rotate(element, rotation, doNotRepaint)
setAttribute(el, name, value)
setAttributes(el, atts)
setConnectorHover(connector, h, doNotCascade)
setConnectorVisible(connector, v)
setContainer(newContainer)
setDraggable(element, draggable)
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).You don't need to supply the drag group id, as elements can only be in one drag group anyway.
setEndpointHover(endpoint, h, doNotCascade)
setEndpointVisible(ep, v)
setGroupVisible(group, state)
setHover(component, hover)
setOverlayHover(o, hover)
setOverlayVisible(o, visible)
setPosition(el, p)Sets the position of the given element.
shouldFireEvent(event, value, originalEvent)
toggleClass(el, clazz)Toggles one or more classes on the given element or list of elements.
toggleDraggable(el)
toggleDragSelection(el)
trigger(el, event, originalEvent, payload, detail)Trigger an event on the given element.
unmanage(el, removeElement)
updateLabel(o)