browser-ui package#
Classes#
| Class | Description |
|---|---|
| ArrowOverlay | |
| BezierConnector | |
| BezierSegment | |
| BlankEndpoint | |
| BrowserJsPlumbInstance | JsPlumbInstance that renders to the DOM in a browser, and supports dragging of elements/connections. |
| BrowserUITestSupport | |
| Collicat | |
| Component | Base class for Endpoint and Connection. |
| Connection | |
| ConnectionDragSelector | |
| ConnectionSelection | |
| CustomOverlay | |
| DiamondOverlay | |
| DotEndpoint | |
| Drag | |
| DragManager | |
| ElementDragHandler | |
| Endpoint | |
| EndpointRepresentation | Superclass for all types of Endpoint. This class is renderer agnostic, as are any subclasses of it. |
| EndpointSelection | |
| EventGenerator | Base class for classes that wish to support binding and firing of events. |
| EventManager | |
| FlowchartConnector | Flowchart connector inscribes a path consisting of a series of horizontal and vertical segments. |
| GroupManager | |
| JsPlumbInstance | |
| JsPlumbList | Models a list of elements that is scrollable, and connections to the elements contained in the list are proxied onto the top of bottom edge of the list element whenever their source/target is not within the list element's current viewport. |
| JsPlumbListManager | Provides methods to create/destroy scrollable lists. |
| LabelOverlay | |
| LightweightFloatingAnchor | |
| LightweightRouter | |
| OptimisticEventGenerator | Subclass of EventGenerator with a default implementation of shouldFireEvent, which returns true always. |
| Overlay | |
| PlainArrowOverlay | |
| RectangleEndpoint | |
| StateMachineConnector | |
| StraightConnector | |
| UIGroup | |
| UINode | |
| Viewport | Models the positions of the elements a given jsPlumb instance is tracking. Users of the API should not need to interact directly with a Viewport. |
Enumerations#
| Enumeration | Description |
|---|---|
| AnchorLocations | Default anchor locations. |
| ContainmentType | |
| ElementTypes | |
| PerimeterAnchorShapes | Supported shapes for a Perimeter anchor. |
| PositioningStrategies | |
| SupportedEdge |
Functions#
| Function | Description |
|---|---|
| _createPerimeterAnchor(params) | |
| _removeTypeCssHelper(component, typeId) | |
| _updateHoverStyle(component) | |
| add(p1, p2) | Adds the x and y values of the two points and returns a new point. |
| addClass(el, clazz) | |
| att(attName) | |
| bezierLineIntersection(x1, y1, x2, y2, curve) | Calculates all intersections of the given line with the given curve. |
| boundingBoxIntersection(boundingBox, curve) | Calculates all intersections of the given bounding box with the given curve. |
| boxIntersection(x, y, w, h, curve) | Calculates all intersections of the given box with the given curve. |
| classList(className) | |
| cls(className) | |
| compoundEvent(stem, event, subevent) | |
| computeBezierLength(curve) | |
| consume(e, doNotPreventDefault) | Consume the given event, using stopPropagation() if present or returnValue if not, and optionally also calling preventDefault(). |
| convertToFullOverlaySpec(spec) | Convert the given input into an object in the form of a FullOverlaySpec |
| createElement(tag, style, clazz, atts) | |
| createElementNS(ns, tag, style, clazz, atts) | |
| createFloatingAnchor(instance, element, elementId) | |
| createTestSupportInstance(instance, ok, equal) | Create an instance of BrowserUITestSupport, using the given functions for testing boolean and equality. |
| createTestSupportInstanceQUnit(instance) | Create an instance of BrowserUITestSupport that uses QUnit, a now venerable testing framework, admittedly, but one which jsPlumb still uses. |
| dist(p1, p2) | |
| distanceFromCurve(point, curve) | Calculates the distance that the given point lies from the given Bezier. Note that it is computed relative to the center of the Bezier, so if you have stroked the curve with a wide pen you may wish to take that into account! The distance returned is relative to the values of the curve and the point - it will most likely be pixels. |
| encloses(r1, r2, allowSharedEdges) | Calculates whether or not r2 is completely enclosed by r1. |
| extend(o1, o2, keys) | Equivalent of Object.assign, which IE11 does not support. |
| fastTrim(s) | Trims whitespace from the given string. |
| findParent(el, selector, container, matchOnElementAlso) | |
| fixPrecision(n, digits) | Trim decimal points from a number. Defaults to 3 decimal points. |
| getClass(el) | |
| getElementType(el) | |
| getEventSource(e) | |
| getPageLocation(e) | Gets the page location for the given event, abstracting out differences between touch and mouse events. |
| getsert(map, key, valueGenerator) | Get, or insert then get, a value from the map. |
| getTouch(touches, idx) | |
| gradient(p1, p2) | Calculates the gradient of a line between the two points. |
| gradientAtPoint(curve, location) | Calculates the gradient at the point on the given curve at the given location |
| gradientAtPointAlongPathFrom(curve, location, distance) | Returns the gradient of the curve at the point which is 'distance' from the given location. if this point is greater than location 1, the gradient at location 1 is returned. if this point is less than location 0, the gradient at location 0 is returned. |
| hasClass(el, clazz) | |
| insertSorted(value, array, comparator, sortDescending) | Inserts the given value into the given array at a sorted location. |
| intersects(r1, r2) | Calculates whether or not the two rectangles intersect. |
| isArrayLike(el) | |
| isArrowOverlay(o) | |
| isAssignableFrom(object, cls) | Returns true if the given object can be considered to be an instance of the class cls. This is done by testing the proto chain of the object and checking at each level to see if the proto is an instance of the given class. |
| isBoolean(s) | Returns whether or not the given value is of boolean type. |
| isContinuous(a) | |
| isCustomOverlay(o) | |
| isDate(o) | Returns whether or not the given value is of type Date |
| isDiamondOverlay(o) | |
| isDynamic(a) | |
| isEmpty(o) | Returns whether or not the given object - which may be ArrayLike, or an object - is empty. |
| isFloating(a) | |
| isFullOverlaySpec(o) | Returns whether or not the given overlay spec is a 'full' overlay spec, ie. has a type and some options, or is just an overlay name. |
| isFunction(o) | Returns whether or not the given value is of type Function |
| isInsideParent(instance, _el, pos) | |
| isLabelOverlay(o) | |
| isMouseDevice() | |
| isNamedFunction(o) | Returns whether or not the given value is of type Function and is a named Function. |
| isNodeList(el) | |
| isNumber(n) | Returns whether or not the given value is of number type. |
| isObject(o) | Returns whether or not the given value is of type object |
| isPlainArrowOverlay(o) | |
| isPoint(curve) | |
| isString(s) | Returns whether or not the given value is of string type. |
| isSVGElement(el) | |
| isTouchDevice() | |
| lineIntersection(l1, l2) | Compute the intersection of the two lines. |
| lineLength(p1, p2) | Calculates the length of a line between the two points. |
| lineRectangleIntersection(line, r) | Finds all points where the given line intersects the given rectangle. |
| locationAlongCurveFrom(curve, location, distance) | finds the location that is 'distance' along the path from 'location'. |
| makeLightweightAnchorFromSpec(spec) | |
| matchesSelector(el, selector, ctx) | |
| nearestPointOnCurve(point, curve) | Calculates the nearest point to the given point on the given curve. The return value of this is a JS object literal, containing both the point's coordinates and also the 'location' of the point (see above). |
| newInstance(defaults) | Create a new BrowserJsPlumbInstance, optionally with the given defaults. |
| normal(p1, p2) | Calculates the gradient of a normal to a line between the two points. |
| 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. |
| onDocumentReady(f) | Execute the given function when the DOM is ready, or if the DOM is already ready, execute the given function immediately. |
| pageLocation(e) | |
| perpendicularLineTo(fromPoint, toPoint, length) | Calculates a line of length length that is perpendicular to the line from fromPoint to toPoint and passes through toPoint. |
| perpendicularToPathAt(curve, location, length, distance) | calculates a line that is 'length' pixels long, perpendicular to, and centered on, the path at 'distance' pixels from the given location. if distance is not supplied, the perpendicular for the given location is computed (ie. we set distance to zero). |
| pointAlongCurveFrom(curve, location, distance) | finds the point that is 'distance' along the path from 'location'. |
| pointAlongPath(curve, location, distance) | finds the point that is 'distance' along the path from 'location'. this method returns both the x,y location of the point and also its 'location' (proportion of travel along the path); the method below - _pointAlongPathFrom - calls this method and just returns the point.TODO The compute length functionality was made much faster recently, using a lookup table. is it possible to use that lookup table find a value for the point some distance along the curve from somewhere? |
| pointOnCurve(curve, location) | calculates a point on the curve, for a Bezier of arbitrary order. |
| pointOnLine(fromPoint, toPoint, distance) | Calculates a point on the line from fromPoint to toPoint that is distance units along the length of the line. |
| quadrant(p1, p2) | Calculates the quadrant in which the angle between the two points lies. |
| ready(f) | Execute the given function when the DOM is ready, or if the DOM is already ready, execute the given function immediately. |
| registerEndpointRenderer(name, fns) | |
| removeClass(el, clazz) | |
| rotatePoint(point, center, rotation) | Rotate the given point around the given center, by the given rotation (in degrees) |
| setForceMouseEvents(value) | |
| setForceTouchEvents(value) | |
| sgn(x) | Replacement for Math.sign, which IE11 does not support. |
| snapToGrid(pos, grid, thresholdX, thresholdY) | Snap the given x,y to a point on the grid defined by gridX and gridY, using the given thresholds to calculate proximity to the grid. |
| subtract(p1, p2) | Subtracts p2 from p1, returning a new point. |
| svgWidthHeightSize(el) | |
| svgXYPosition(el) | |
| theta(p1, p2) | Calculates the angle between the two points. |
| toggleClass(el, clazz) | |
| touchCount(e) | |
| touches(e) | |
| uuid() | Generate a v4 UUID. |
Interfaces#
| Interface | Description |
|---|---|
| AbstractBezierOptions | Base options interface for StateMachine and Bezier connectors. |
| AbstractSelectOptions | |
| AddGroupOptions | |
| AnchorOptions | |
| ArrowOverlayOptions | |
| BeforeDragParams | The parameters passed to a beforeDrag interceptor. |
| BeforeDropParams | Definition of the parameters passed to the beforeDrop interceptor. |
| BeforeStartConnectionDetachParams | The parameters passed to a beforeStartDetach interceptor. |
| BeforeStartEventParams | |
| BehaviouralTypeDescriptor | Extends EndpointTypeDescriptor to add the options supported by an addSourceSelector or addTargetSelector call. |
| BezierConnectorGeometry | |
| BezierOptions | Options for the Bezier connector. |
| BezierSegmentParams | |
| BlankEndpointParams | |
| BrowserJsPlumbDefaults | Defaults for the BrowserUI implementation of jsPlumb. |
| CollicatOptions | |
| ConnectionDetachedParams | Definition of the parameters passed to a listener for the connection:detach event. |
| ConnectionEstablishedParams | Definition of the parameters passed to a listener for the connection event. |
| ConnectionMovedParams | Definition of the parameters passed to a listener for the connection:move event. |
| ConnectionTypeDescriptor | Definition of a connection type. |
| Connector | High level definition of a Connector. |
| ConnectorOptions | Common options for connectors. |
| ConnectParams | Options for the connect call on a JsPlumbInstance |
| CustomOverlayOptions | |
| DotEndpointParams | |
| 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. |
| EndpointHandler | |
| EndpointOptions | |
| EndpointRepresentationParams | |
| EndpointStyle | |
| EndpointTypeDescriptor | Definition of an endpoint type. |
| EventHandlers | Defines a set of event handlers that can be supplied to various methods that simulate mouse activity. Using these you can inject tests into various parts of the lifecycle of a given operation. |
| FlowchartConnectorOptions | |
| Geometry | Geometry defines the path along which a connector travels. The internal contents of a Geometry vary widely between connectors. |
| GhostProxyingDragHandler | |
| Grid | Definition of a grid - the width/height of each cell, and, optionally, a threshold value for each axis to use when trying to snap some coordinate to the grid. |
| GroupCollapsedParams | |
| GroupExpandedParams | |
| GroupOptions | |
| InternalConnectParams | Internal extension of ConnectParams containing a few extra things needed to establish a connection. |
| InternalEndpointOptions | |
| JsPlumbDefaults | |
| jsPlumbDOMElement | |
| jsPlumbDragManager | |
| jsPlumbElement | |
| JsPlumbListOptions | Constructor options for a list. |
| LabelOverlayOptions | |
| LightweightAnchor | |
| LightweightContinuousAnchor | |
| LightweightPerimeterAnchor | |
| ListManagerOptions | |
| ListSpec | |
| ManageElementParams | Payload for an element managed event |
| OverlayMouseEventParams | |
| OverlayOptions | |
| PaintStyle | |
| PerimeterAnchorOptions | Constructor options for a Perimeter Anchor. |
| PointXY | Defines an x/y location. |
| RectangleEndpointParams | |
| RedrawResult | |
| Router | |
| SegmentParams | |
| SelectEndpointOptions | |
| SelectOptions | |
| Size | Defines the width and height of some element. |
| SourceDefinition | Defines the supported options on an addSourceSelector call. |
| SourceOrTargetDefinition | Base interface for source/target definitions |
| StateMachineOptions | |
| StraightConnectorGeometry | |
| TargetDefinition | Defines the supported options on an addTargetSelector call. |
| TypeDescriptor | Base interface for type descriptors for public methods. |
| UIComponent | |
| UnmanageElementParams | Payload for an element unmanaged event. |
| UpdateOffsetOptions | Options for the UpdateOffset method |
| ViewportPosition | Definition of some element's location and rotation in the viewport. |
Variables#
Type Aliases#
| Type Alias | Description |
|---|---|
| AnchorId | List of entries in the AnchorLocations enum |
| AnchorOrientationHint | |
| AnchorSpec | Models the specification of anchor - which may be a SingleAnchorSpec, or an array of SingleAnchorSpec objects. |
| ArrayAnchorSpec | An anchor spec in the form [ x, y, ox, oy ] |
| Axis | |
| AxisCoefficients | |
| BeforeConnectionDetachInterceptor | Defines the method signature for the callback to the beforeDetach interceptor. Returning false from this method prevents the connection from being detached. The interceptor is fired by the core, meaning that it will be invoked regardless of whether the detach occurred programmatically, or via the mouse. |
| BeforeConnectionDropInterceptor | Defines the method signature for the callback to the beforeDrop interceptor. |
| BeforeDragInterceptor | Defines the method signature for the callback to the beforeDrag interceptor. This method can return boolean false to abort the connection drag, or it can return an object containing values that will be used as the data for the connection that is created. |
| BeforeStartConnectionDetachInterceptor | Defines the method signature for the callback to the beforeStartDetach interceptor. |
| BoundingBox | Defines the bounding box for some element - its x/y location, width and height, and optionally the computed center, but that can of course be calculated from the other values. Internally there are times when the code has this to hand so we include it here. |
| ComponentParameters | |
| ComputedBlankEndpoint | |
| ComputedDotEndpoint | |
| ComputedRectangleEndpoint | |
| ConnectorComputeParams | |
| ConnectorId | Alias for the use case that a Connector is referenced just by its type. |
| ConnectorSpec | Specification of a connector - either the type id of some Connector, a type+options object. |
| ConnectorWithOptions | Connector spec in the form {type:.., options:{.. }} |
| 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. |
| Constructable | Defines an object that has a constructor. Used internally to create endpoints/connectors/overlays from their names. Exposed as public for people to create their own endpoints/connectors/overlays. |
| Curve | |
| DeleteConnectionOptions | Optional parameters to the DeleteConnection method. |
| DistanceFromCurve | |
| 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. |
| ElementSelectionSpecifier | |
| ElementType | |
| EndpointComputeFunction | |
| EndpointHelperFunctions | |
| EndpointId | |
| EndpointParams | |
| EndpointSpec | |
| Face | |
| FullAnchorSpec | An anchor spec in the form {type:..., options:{ ... }} |
| FullEndpointSpec | |
| FullOverlaySpec | |
| GetPositionFunction | |
| GetSizeFunction | |
| GhostProxyGenerator | |
| GroupLocation | |
| IntersectingGroup | |
| LineXY | Defines a line from some point to another. |
| ManagedElement | |
| Orientation | |
| OverlaySpec | |
| PointOnPath | |
| PositioningStrategy | |
| Quadrant | |
| RectangleXY | This is an alias for BoundingBox. |
| RedropPolicy | Defines how redrop of source endpoints can be done. |
| RevertEventParams | |
| RevertFunction | |
| SelectionList | |
| SetPositionFunction | |
| SetSizeFunction | |
| SingleAnchorSpec | Models the specification of a single anchor. |
| StraightSegmentCoordinates | |
| TranslatedViewportElement | |
| UserDefinedEndpointId | |
| UUID |