Skip to main content

Home > @jsplumbtoolkit/browser-ui

browser-ui package#

Classes#

ClassDescription
AbsoluteTiledBackground
BaseSurfaceLayoutAdapter
BrowserUIBaseConcrete instance of the Toolkit that uses ajax to load data asynchronously.
BrowserUIMagnetizerAn extension of the Magnetizer that knows about the DOM, offering an executeAtEvent method that takes a MouseEvent as the focus of the operation.
BrowserUIModelA Model describes the appearance and behaviour of a set of Nodes, Edges, Ports and Groups. You do not create one of these directly; instead you pass a definition to a jsPlumbToolkit.render or jsPlumbToolkitBrowserUI.newInstance() call. Although the Model has the same syntax in each context, you are encouraged to configure model-specific things in the Model you pass to the newInstance method (such as, which Nodes/Ports can be connected to which others, what is the maximum number of connections, etc), and view-specific things (such as css classes, paint styles, connector appearance etc) to the model you pass to the render method. The render method automatically merges in a Node/Port/Edge definition from a Model defined on the associated Toolkit, if there is one. Only the Surface widget provides this. The Toolkit instance creates a Model but it is headless.
CanvasLayoutAdapter
Decorator
FixedLayer
GroupLayoutAdapter
LogarithmicTiledBackground
PanZoomProvides Pan/Zoom functionality. This component is not something with which users of the Toolkit are expected to work directly (although in fact it is sufficiently decoupled from the Surface that it could serve as a stand-alone widget for other use cases, which is something we've slated for future investigation). Each Surface widget is backed by a ZoomWidget.
PinchListener
SimpleBackground
Surface
TiledBackground
UIPathA wrapper around the Toolkit's path object, which offers a few DOM specific methods.
UIState
xml

Enumerations#

EnumerationDescription
SurfaceMode

Functions#

FunctionDescription
addWheelListener(el, callback, ignoreTouchWheelEvents, requireMetaKey)
ajax(params)Basic ajax function.
attWithValue(att, value)
debounce(fn, timeout)Create a debounced version of the given function.
getAbsolutePosition(element)Returns the position of the given element, as reported by the left and top properties of the element's style.
mergeWithParents(type, map, shouldOverride)Extract the definition(s) with the given type and merge them,
registerDecorator(name, dec)
removeWheelListener(el, callback)
render(toolkit, container, renderer, options)This method is not intended to be used by a library user - you should use the render method on the Toolkit instance instead.Configures the given element as a Surface, registering it so that it reflects any changes to the underlying data. If there is any data in the Toolkit at the time of this call it is rendered; any data subsequently loaded is automatically rendered. You can supply layout arguments to this method (layout type + layout specific parameters), as well as jsPlumb rules for endpoints, paint styles etc.
setAbsolutePosition(element, x, y)Sets the position of the given DOM element, by setting values for left and top on the element's style.
setBoundingRect(element, origin, size)Sets the position and size of the given element. This method is equivalent to first calling setAbsolutePosition and then setSize on the given element.
setSize(element, w, h)Sets the size of the given DOM element, by setting values for width and height on the element's style.
shouldOverrideEndpoints(p, from)

Interfaces#

InterfaceDescription
Background
BackgroundOptions
BasePortDefinition
ConnectorEditor
ConnectorEditorFactory
ConstructableConnectorEditor
EdgeDefinition
EndpointDefinitionDefinition of an Endpoint to be added to some Vertex. This is largely the same as a PortDefinition in the view, with the exception that an EndpointDefinition supports portId (which is used to look up a PortDefinition, if found), and also portId.
InternalSurfacePluginOptions
IntersectingObjectData
jsPlumbToolkitDOMElement
jsPlumbToolkitDOMInformation
ModelOptions
PanZoomOptionsOptions for the PanZoom widget. This widget is used internally by the Toolkit and is not something users of the library will need to interact with.
PinchListenerOptionsPinch listener for all touch browsers - ipad, android, and windows laptops/surfaces. Needless to say, every browser does it differently. IE10+ uses PointerEvents; ipad safari/windows chrome/ipad chrome/ android chrome use TouchEvents. The listener posts pinchstart, pinch happening, and pinch end events.
SimpleBackgroundOptions
SurfaceDragOptions
SurfaceEdgeAddedParamsPayload for an edge:added event from a surface.
SurfaceGridOptionsOptions for the grid in a Surface.
SurfaceGroupAddedParamsPayload for a group:added event from the Surface.
SurfaceGroupCollapsedParamsPayload for a group:collapse event from a surface
SurfaceGroupExpandedParamsPayload for a group:expand event from a surface
SurfaceGroupMemberAddedParamsPayload for a group:member:added event from the Surface.
SurfaceGroupMemberRemovedParamsPayload for a group:member:removed event from the Surface.
SurfaceGroupRemovedParamsPayload for a group:removed event from the Surface.
SurfaceGroupResizedParamsPayload for a group:resize event from a surface.
SurfaceMagnetizeOptionsOptions for the magnetize functionality of the Surface.
SurfaceNodeAddedParamsPayload for a node:added event from the Surface.
SurfaceNodeRemovedParamsPayload for a node:removed event from the Surface.
SurfaceObjectInfo
SurfacePanZoomParamsPayload for a pan/zoom event from a surface.
SurfacePlugin
SurfacePluginOptions
SurfacePortRemovedParamsPayload for a port:removed event from a Surface.
SurfaceRenderOptionsThis interface defines the allowed parameters on a render call that will create a new Surface.
SurfaceSelector
SurfaceVertexAddedParamsPayload for a node:added or group:added event from the Surface.
SurfaceVertexMoveStartParamsPayload for the node:move:start event that is fired when a node/group has just begun to be moved.
SurfaceVertexRemovedParamsParent payload for a node:removed or group:removed event from the Surface.
SurfaceViewOptions
TemplateRendererDefines a template renderer
TiledBackgroundOptions
UIGroupDefinitionDefinition of a group in the view.
UINodeDefinition
UIPortDefinitionDefinition of a port type.
UIVertexDefinition
ViewEdgeOptions
ViewGroupOptions
ViewNodeOptions
ViewNodeOrPortOptions
ViewOptionsCommon
ViewportBoundsModels the current bounds of a viewport, containing its left/top, width/height, padding and current zoom.
ViewPortOptions

Variables#

VariableDescription
ATTRIBUTE_ANCHOR_X
ATTRIBUTE_ANCHOR_Y
ATTRIBUTE_IS_SOURCE
ATTRIBUTE_IS_TARGET
ATTRIBUTE_JTK_EDGE_TYPE
ATTRIBUTE_JTK_ENDPOINT
ATTRIBUTE_JTK_NODE_ID
ATTRIBUTE_JTK_PORT_IDUsed to indicate what the port id should be for connections from/to this element. It does not necessarily mean that the connection will be attached to an element that has this attribute - it is possible to have 'logical' ports on some vertex, whose edges appear in the UI attached to the vertex, rather than some element inside the vertex. If you want to specify that some element is the place to which connections for a given port should be attached, use ATTRIBUTE_JTK_PORT (data-jtk-port)
ATTRIBUTE_JTK_PORT_TYPE
ATTRIBUTE_JTK_PORTUsed to indicate that the given element is the place to which connections for the given port should be attached in the UI. Don't confuse this with ATTRIBUTE_JTK_PORT_ID.
ATTRIBUTE_JTK_SOURCE_PORT_ID
ATTRIBUTE_JTK_SOURCE_PORT_TYPE
ATTRIBUTE_JTK_SOURCE_PORT
ATTRIBUTE_JTK_SOURCE
ATTRIBUTE_JTK_TARGET_PORT_ID
ATTRIBUTE_JTK_TARGET_PORT_TYPE
ATTRIBUTE_JTK_TARGET_PORT
ATTRIBUTE_JTK_TARGET
ATTRIBUTE_MINIVIEW_TYPE
ATTRIBUTE_NODE
ATTRIBUTE_OFFSET_X
ATTRIBUTE_OFFSET_Y
ATTRIBUTE_ORIENTATION_X
ATTRIBUTE_ORIENTATION_Y
ATTRIBUTE_PORT_ID
ATTRIBUTE_PORT_TYPE
ATTRIBUTE_PORT
ATTRIBUTE_SURFACE_GROUP
CLASS_DRAG_SELECT_DEFEAT
CLASS_GROUP
CLASS_LASSO_MASK_BOTTOM
CLASS_LASSO_MASK_LEFT
CLASS_LASSO_MASK_RIGHT
CLASS_LASSO_MASK_TOP
CLASS_LASSO_MASK
CLASS_LASSO_SELECT_DEFEAT
CLASS_LASSO
CLASS_MINIVIEW_CANVAS
CLASS_MINIVIEW_COLLAPSE
CLASS_MINIVIEW_COLLAPSED
CLASS_MINIVIEW_ELEMENT
CLASS_MINIVIEW_GROUP_ELEMENT
CLASS_MINIVIEW_PANNER
CLASS_MINIVIEW_PANNING
CLASS_MINIVIEW
CLASS_MOST_RECENTLY_DRAGGED
CLASS_NODE
CLASS_PORT
CLASS_SELECT_DEFEAT
CLASS_SURFACE_CANVAS
CLASS_SURFACE_DIRECT
CLASS_SURFACE_ELEMENT_DRAGGING
CLASS_SURFACE_NO_PAN
CLASS_SURFACE_PAN_ACTIVE
CLASS_SURFACE_PAN_BOTTOM
CLASS_SURFACE_PAN_LEFT
CLASS_SURFACE_PAN_RIGHT
CLASS_SURFACE_PAN_TOP
CLASS_SURFACE_PAN
CLASS_SURFACE_PANNING
CLASS_SURFACE_SELECTED_CONNECTION
CLASS_SURFACE_SELECTED_ELEMENT
CLASS_SURFACE
Constants
Decorators
ELEMENT_JTK_ENDPOINT
EVENT_AFTER_LAYOUT_REFRESH
EVENT_CANVAS_CLICK
EVENT_CANVAS_DBL_CLICK
EVENT_CONNECTION_EDIT
EVENT_GROUP_RELAYOUT
EVENT_GROUP_RESIZE
EVENT_LASSO_END
EVENT_NODE_RENDERED
EVENT_NODE_VISIBILITY
EVENT_OBJECT_REPAINTED
EVENT_PAN
EVENT_RELAYOUT
EVENT_RESIZE
EVENT_ROTATE
EVENT_STATE_RESTORED
EVENT_SURFACE_MODE_CHANGED
SurfacePlugins

Type Aliases#

Type AliasDescription
DecoratorSpec
FixedElementConstraint
FixedElementConstraints
FullDecoratorSpec
FullPluginSpec
IntersectingElementsFilter
IntersectingVertex
ModelEventCallback
SupportsClassManipulationList of entities whose class, in the visual representation, can be manipulated.
SupportsClassManipulationElementModels some entity whose class, in the visual representation, can be manipulated.
SurfacePluginSpec
TileSpecs
ViewOptionsEntry
ZoomRangeModels the minimum and maximum values in an allowed zoom range.