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

Class	Description
BrowserJsPlumbInstance	JsPlumbInstance that renders to the DOM in a browser, and supports dragging of elements/connections.
Collicat
Drag
DragManager
ElementDragHandler
EventManager

Enumerations

Enumeration	Description
ContainmentType
ElementTypes
PositioningStrategies

Functions

Function	Description
addClass(el, clazz)
compoundEvent(stem, event, subevent)
consume(e, doNotPreventDefault)	Consume the given event, using stopPropagation() if present or returnValue if not, and optionally also calling preventDefault().
createElement(tag, style, clazz, atts)
createElementNS(ns, tag, style, clazz, atts)
findParent(el, selector, container, matchOnElementAlso)
getClass(el)
getElementType(el)
getEventSource(e)
getPageLocation(e)	Gets the page location for the given event, abstracting out differences between touch and mouse events.
getTouch(touches, idx)
hasClass(el, clazz)
isArrayLike(el)
isInsideParent(instance, _el, pos)
isMouseDevice()
isNodeList(el)
isSVGElement(el)
isTouchDevice()
matchesSelector(el, selector, ctx)
newInstance(defaults)
offsetSize(el)	Gets the offset width and offset height of the given element. Not safe for SVG elements. This method was previously exported as size but has been renamed in order to reflect the fact that it uses offsetWidth and offsetHeight, which are not set on SVG elements.
pageLocation(e)
ready(f)
registerEndpointRenderer(name, fns)
removeClass(el, clazz)
setForceMouseEvents(value)
setForceTouchEvents(value)
svgWidthHeightSize(el)
svgXYPosition(el)
toggleClass(el, clazz)
touchCount(e)
touches(e)

Interfaces

Interface	Description
BeforeStartEventParams
BrowserJsPlumbDefaults	Defaults for the BrowserUI implementation of jsPlumb.
CollicatOptions
DragEventParams
DragHandler
DragHandlerOptions
DragManagerOptions
DragMovePayload	Payload for drag:move event.
DragOptions
DragParams
DragPayload	Base payload for drag events. Contains the element being dragged, the corresponding mouse event, the current position, and the position when drag started.
DragStartEventParams
DragStartPayload	Payload for drag:start event.
DragStopEventParams
DragStopPayload	Payload 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

Variable	Description
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
EVENT_TOUCHEND
EVENT_TOUCHMOVE
EVENT_TOUCHSTART
PROPERTY_POSITION
SELECTOR_CONNECTOR
SELECTOR_ENDPOINT
SELECTOR_GROUP_CONTAINER
SELECTOR_GROUP
SELECTOR_OVERLAY
svg

Type Aliases

Type Alias	Description
ConstrainFunction	Definition of a function that can be used to constrain the movemement of an element that is being dragged. The function is given the "desiredLoc", which is the location the element would be moved to if not constrained, and it is expected to return either some other value, meaning place the element at that position, or null, meaning for the given desired location there is no preferred position and the element should not be moved.
DraggedElement
DragGroupSpec	Definition 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
GetPositionFunction
GetSizeFunction
GhostProxyGenerator
GroupLocation
IntersectingGroup
PositioningStrategy
RevertEventParams
RevertFunction
SetPositionFunction
SetSizeFunction