Skip to main content

Home > @jsplumb/browser-ui

browser-ui package#

This package is a renderer for the jsPlumb Community edition that uses a single SVG element per connection, and can connect HTML/SVG elements in the DOM. For users of version of jsPlumb prior to 5.x, this package is the equivalent to what used to just be known as "jsPlumb".

In actual fact only this renderer exists for the 5.x Community edition, but the code in 5.x is now architected in such a way that alternative renderers could be implemented.

Classes#

ClassDescription
BrowserJsPlumbInstanceJsPlumbInstance that renders to the DOM in a browser, and supports dragging of elements/connections.
Collicat
Drag
DragManager
ElementDragHandler
EventManager

Enumerations#

EnumerationDescription
ContainmentType

Functions#

FunctionDescription
addClass(el, clazz)
compoundEvent(stem, event, subevent)
consume(e, doNotPreventDefault)
createElement(tag, style, clazz, atts)
createElementNS(ns, tag, style, clazz, atts)
findParent(el, selector, container, matchOnElementAlso)
getClass(el)
getEventSource(e)
getTouch(touches, idx)
hasClass(el, clazz)
isArrayLike(el)
isInsideParent(instance, _el, pos)
isNodeList(el)
matchesSelector(el, selector, ctx)
newInstance(defaults)
offsetRelativeToRoot(el)
pageLocation(e)
ready(f)
registerEndpointRenderer(name, fns)
removeClass(el, clazz)
size(el)
toggleClass(el, clazz)
touchCount(e)
touches(e)

Interfaces#

InterfaceDescription
BeforeStartEventParams
BrowserJsPlumbDefaultsDefaults for the BrowserUI implementation of jsPlumb.
CollicatOptions
DragEventParams
DragHandler
DragHandlerOptions
DragManagerOptions
DragMovePayloadPayload for drag:move event.
DragOptions
DragParams
DragPayloadBase payload for drag events. Contains the element being dragged, the corresponding mouse event, the current position, and the position when drag started.
DragStartEventParams
DragStartPayloadPayload for drag:start event.
DragStopEventParams
DragStopPayloadPayload for drag:stop event. In addition to the base payload, contains a redraw result object, listing all the connections and endpoints that were affected by the drag.
GhostProxyingDragHandler
jsPlumbDOMElement
jsPlumbDragManager
UIComponent

Variables#

VariableDescription
ATTRIBUTE_CONTAINER
ATTRIBUTE_GROUP_CONTENT
ATTRIBUTE_JTK_ENABLED
ATTRIBUTE_JTK_SCOPE
CLASS_DELEGATED_DRAGGABLE
CLASS_DRAG_ACTIVE
CLASS_DRAG_CONTAINER
CLASS_DRAG_HOVER
CLASS_DRAGGABLE
CLASS_DRAGGED
CLASS_GHOST_PROXY
CONNECTION
ELEMENT_DIV
ELEMENT
ENDPOINT
EVENT_BEFORE_START
EVENT_CLICK
EVENT_CONNECTION_ABORT
EVENT_CONNECTION_CLICK
EVENT_CONNECTION_CONTEXTMENU
EVENT_CONNECTION_DBL_CLICK
EVENT_CONNECTION_DBL_TAP
EVENT_CONNECTION_DRAG
EVENT_CONNECTION_MOUSEDOWN
EVENT_CONNECTION_MOUSEOUT
EVENT_CONNECTION_MOUSEOVER
EVENT_CONNECTION_MOUSEUP
EVENT_CONNECTION_TAP
EVENT_CONTEXTMENU
EVENT_DBL_CLICK
EVENT_DBL_TAP
EVENT_DRAG_MOVE
EVENT_DRAG_START
EVENT_DRAG_STOP
EVENT_DRAG
EVENT_DROP
EVENT_ELEMENT_CLICK
EVENT_ELEMENT_CONTEXTMENU
EVENT_ELEMENT_DBL_CLICK
EVENT_ELEMENT_DBL_TAP
EVENT_ELEMENT_MOUSE_DOWN
EVENT_ELEMENT_MOUSE_MOVE
EVENT_ELEMENT_MOUSE_OUT
EVENT_ELEMENT_MOUSE_OVER
EVENT_ELEMENT_MOUSE_UP
EVENT_ELEMENT_TAP
EVENT_ENDPOINT_CLICK
EVENT_ENDPOINT_DBL_CLICK
EVENT_ENDPOINT_DBL_TAP
EVENT_ENDPOINT_MOUSEDOWN
EVENT_ENDPOINT_MOUSEOUT
EVENT_ENDPOINT_MOUSEOVER
EVENT_ENDPOINT_MOUSEUP
EVENT_ENDPOINT_TAP
EVENT_FOCUS
EVENT_MOUSEDOWN
EVENT_MOUSEENTER
EVENT_MOUSEEXIT
EVENT_MOUSEMOVE
EVENT_MOUSEOUT
EVENT_MOUSEOVER
EVENT_MOUSEUP
EVENT_OUT
EVENT_OVER
EVENT_REVERT
EVENT_START
EVENT_STOP
EVENT_TAP
PROPERTY_POSITION
SELECTOR_CONNECTOR
SELECTOR_ENDPOINT
SELECTOR_GROUP_CONTAINER
SELECTOR_GROUP
SELECTOR_OVERLAY

Type Aliases#

Type AliasDescription
ConstrainFunction
DraggedElement
DragGroupSpecDefinition of a drag group membership - either just the id of a drag group, or the id of a drag group and whether or not this element plays an active role in the drag group.
ElementType
EndpointHelperFunctions
GhostProxyGenerator
GroupLocation
IntersectingGroup
RevertEventParams
RevertFunction