| jsPlumb | |
| Properties | |
| Defaults | These are the default settings for jsPlumb. |
| connectorClass | The CSS class to set on Connection elements. |
| endpointClass | The CSS class to set on Endpoint elements. |
| overlayClass | The CSS class to set on an Overlay that is an HTML element. |
| Functions | |
| bind | Bind to an event on jsPlumb. |
| clearListeners | Clears either all listeners, or listeners for some specific event. |
| addEndpoint | Adds an Endpoint to a given element or elements. |
| addEndpoints | Adds a list of Endpoints to a given element or elements. |
| animate | This is a wrapper around the supporting library’s animate function; it injects a call to jsPlumb in the ‘step’ function (creating the ‘step’ function if necessary). |
| connect | Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements). |
| deleteEndpoint | Deletes an Endpoint and removes all Connections it has (which removes the Connections from the other Endpoints involved too) |
| deleteEveryEndpoint | Deletes every Endpoint, and their associated Connections, in this instance of jsPlumb. |
| detach | Detaches and then removes a Connection. |
| detachAll | Removes all an element’s Connections. |
| detachEveryConnection | Remove all Connections from all elements, but leaves Endpoints in place. |
| draggable | Initialises the draggability of some element or elements. |
| extend | Wraps the underlying library’s extend functionality. |
| getDefaultEndpointType | Returns the default Endpoint type. |
| getDefaultConnectionType | Returns the default Connection type. |
| getConnections | Gets all or a subset of connections currently managed by this jsPlumb instance. |
| getAllConnections | Gets all connections, as a map of { scope -> [ connection... |
| getDefaultScope | Gets the default scope for connections and endpoints. |
| getEndpoint | Gets an Endpoint by UUID |
| hide | Sets an element’s connections to be hidden. |
| makeTarget | Makes some DOM element a Connection target, allowing you to drag connections to it without having to register any Endpoints on it first. |
| ready | Helper method to bind a function to jsPlumb’s ready event. |
| repaint | Repaints an element and its connections. |
| repaintEverything | Repaints all connections. |
| removeAllEndpoints | Removes all Endpoints associated with a given element. |
| setAutomaticRepaint | Sets/unsets automatic repaint on window resize. |
| setDefaultScope | Sets the default scope for Connections and Endpoints. |
| setDraggable | Sets whether or not a given element is draggable, regardless of what any jsPlumb command may request. |
| setDraggableByDefault | Sets whether or not elements are draggable by default. |
| setRepaintFunction | Sets the function to fire when the window size has changed and a repaint was fired. |
| setMouseEventsEnabled | Sets whether or not mouse events are enabled. |
| setRenderMode | Sets render mode: jsPlumb.CANVAS, jsPlumb.SVG or jsPlumb.VML. |
| show | Sets an element’s connections to be visible. |
| sizeCanvas | Helper to size a canvas. |
| toggleVisible | Toggles visibility of an element’s Connections. |
| toggleDraggable | Toggles draggability (sic?) |
| unload | Unloads jsPlumb, deleting all storage. |
| Connection | The connecting line between two Endpoints. |
| Functions and Properties | |
| Connection | Connection constructor. |
| sourceId | Id of the source element in the connection. |
| targetId | Id of the target element in the connection. |
| scope | Optional scope descriptor for the connection. |
| endpoints | Array of [source, target] Endpoint objects. |
| setConnector | |
| connector | The underlying Connector for this Connection (eg. |
| overlays | List of Overlays for this Connection. |
| bind | Bind to an event on the Connection. |
| setPaintStyle | Sets the Connection’s paint style and then repaints the Connection. |
| setHoverPaintStyle | Sets the paint style to use when the mouse is hovering over the Connection. |
| setHover | Sets/unsets the hover state of this Connection. |
| addOverlay | Adds an Overlay to the Connection. |
| removeAllOverlays | Removes all overlays from the Connection, and then repaints. |
| setLabel | Sets the Connection’s label. |
| repaint | Repaints the Connection. |
| Endpoint | Models an endpoint. |
| Functions | |
| Endpoint | Endpoint constructor. |
| bind | Bind to an event on the Endpoint. |
| setPaintStyle | Sets the Endpoint’s paint style and then repaints the Endpoint. |
| setHoverPaintStyle | Sets the paint style to use when the mouse is hovering over the Endpoint. |
| setHover | Sets/unsets the hover state of this Endpoint. |
| isVisible | Returns whether or not the Endpoint is currently visible. |
| setVisible | Sets whether or not the Endpoint is currently visible. |
| Properties | |
| canvas | The Endpoint’s Canvas. |
| connections | List of Connections this Endpoint is attached to. |
| scope | Scope descriptor for this Endpoint. |
| Functions | |
| addConnection | Adds a Connection to this Endpoint. |
| detach | Detaches the given Connection from this Endpoint. |
| detachAll | Detaches all Connections this Endpoint has. |
| detachFrom | Removes any connections from this Endpoint that are connected to the given target endpoint. |
| detachFromConnection | Detach this Endpoint from the Connection, but leave the Connection alive. |
| getElement | Returns the DOM element this Endpoint is attached to. |
| getUuid | Returns the UUID for this Endpoint, if there is one. |
| isConnectedTo | Returns whether or not this endpoint is connected to the given Endpoint. |
| isFull | Returns whether or not the Endpoint can accept any more Connections. |
| setDragAllowedWhenFull | Sets whether or not connections can be dragged from this Endpoint once it is full. |
| setStyle | Sets the paint style of the Endpoint. |
| paint | Paints the Endpoint, recalculating offset and anchor positions if necessary. |
| Connectors. Straight | The Straight connector draws a simple straight line between the two anchor points. |
| Connectors. Flowchart | Provides ‘flowchart’ connectors, consisting of vertical and horizontal line segments. |
| Functions | |
| Constructor | |
| Endpoints.Dot | A round endpoint, with default radius 10 pixels. |
| Functions | |
| Constructor | |
| Endpoints. Rectangle | A Rectangular Endpoint, with default size 20x20. |
| Functions | |
| Constructor | |
| Endpoints. Image | Draws an image as the Endpoint. |
| Functions | |
| Constructor | |
| Endpoints. Blank | An Endpoint that paints nothing on the screen, and cannot be interacted with using the mouse. |
| Endpoints. Triangle | A triangular Endpoint. |
| Functions | |
| Constructor | |
| Overlays. Arrow | An arrow overlay, defined by four points: the head, the two sides of the tail, and a ‘foldback’ point at some distance along the length of the arrow that lines from each tail point converge into. |
| Functions | |
| Constructor | |
| Overlays. PlainArrow | A basic arrow. |
| Functions | |
| Constructor | See Overlays.Arrow for allowed parameters for this overlay. |
| Overlays. Diamond | A diamond. |
| Functions | |
| Constructor | See Overlays.Arrow for allowed parameters for this overlay. |
| Overlays. Label | A Label overlay. |
| Functions | |
| Constructor |
These are the default settings for jsPlumb. They are what will be used if you do not supply specific pieces of information to the various API calls. A convenient way to implement your own look and feel can be to override these defaults by including a script somewhere after the jsPlumb include, but before you make any calls to jsPlumb.
Bind to an event on jsPlumb.
| event | the event to bind. Available events on jsPlumb are: |
| callback | function to callback. This function will be passed the Connection/Endpoint that caused the event, and also the original event. |
this.addEndpoint = function( el, params, referenceParams )
Adds an Endpoint to a given element or elements.
| el | Element to add the endpoint to. Either an element id, a selector representing some element(s), or an array of either of these. |
| params | Object containing Endpoint constructor arguments. For more information, see Endpoint. |
| referenceParams | Object containing more Endpoint constructor arguments; it will be merged with params by jsPlumb. You would use this if you had some shared parameters that you wanted to reuse when you added Endpoints to a number of elements. The allowed values in this object are anything that ‘params’ can contain. See Endpoint. |
The newly created Endpoint, if el referred to a single element. Otherwise, an array of newly created Endpoints.
this.addEndpoints = function( el, endpoints, referenceParams )
Adds a list of Endpoints to a given element or elements.
| target | element to add the Endpoint to. Either an element id, a selector representing some element(s), or an array of either of these. |
| endpoints | List of objects containing Endpoint constructor arguments. one Endpoint is created for each entry in this list. See Endpoint’s constructor documentation. |
| referenceParams | Object containing more Endpoint constructor arguments; it will be merged with params by jsPlumb. You would use this if you had some shared parameters that you wanted to reuse when you added Endpoints to a number of elements. |
List of newly created Endpoints, one for each entry in the ‘endpoints’ argument.
this.animate = function( el, properties, options )
This is a wrapper around the supporting library’s animate function; it injects a call to jsPlumb in the ‘step’ function (creating the ‘step’ function if necessary). This only supports the two-arg version of the animate call in jQuery, the one that takes an ‘options’ object as the second arg. MooTools has only one method, a two arg one. Which is handy. YUI has a one-arg method, so jsPlumb merges ‘properties’ and ‘options’ together for YUI.
| el | Element to animate. Either an id, or a selector representing the element. |
| properties | The ‘properties’ argument you want passed to the library’s animate call. |
| options | The ‘options’ argument you want passed to the library’s animate call. |
void
this.connect = function( params, referenceParams )
Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).
| params | Object containing constructor arguments for the Connection. See Connection’s constructor documentation. |
| referenceParams | Optional object containing more constructor arguments for the Connection. Typically you would pass in data that a lot of Connections are sharing here, such as connector style etc, and then use the main params for data specific to this Connection. |
The newly created Connection.
this.deleteEndpoint = function( object )
Deletes an Endpoint and removes all Connections it has (which removes the Connections from the other Endpoints involved too)
| object | either an Endpoint object (such as from an addEndpoint call), or a String UUID. |
void
this.deleteEveryEndpoint = function()
Deletes every Endpoint, and their associated Connections, in this instance of jsPlumb. Does not unregister any event listeners (this is the only difference between this method and jsPlumb.reset).
void
this.detach = function( source, target )
Detaches and then removes a Connection. Takes either (source, target) (the old way, maintained for backwards compatibility), or a params object with various possible values.
| source | id or element object of the first element in the Connection. |
| target | id or element object of the second element in the Connection. |
| params | a JS object containing the same parameters as you pass to jsPlumb.connect. If this is present then neither source nor target should be present; it should be the only argument to the method. See the docs for Connection’s constructor for information about the parameters allowed in the params object. Returns: true if successful, false if not. |
this.draggable = function( el, options )
Initialises the draggability of some element or elements. You should use this instead of you library’s draggable method so that jsPlumb can setup the appropriate callbacks. Your underlying library’s drag method is always called from this method.
| el | either an element id, a list of element ids, or a selector. |
| options | options to pass through to the underlying library |
void
this.getDefaultEndpointType = function()
Returns the default Endpoint type. Used when someone wants to subclass Endpoint and have jsPlumb return instances of their subclass. you would make a call like this in your class’s constructor: jsPlumb.getDefaultEndpointType().apply(this, arguments);
the default Endpoint function used by jsPlumb.
this.getDefaultConnectionType = function()
Returns the default Connection type. Used when someone wants to subclass Connection and have jsPlumb return instances of their subclass. you would make a call like this in your class’s constructor: jsPlumb.getDefaultConnectionType().apply(this, arguments);
the default Connection function used by jsPlumb.
this.getConnections = function( options )
Gets all or a subset of connections currently managed by this jsPlumb instance. If only one scope is passed in to this method, the result will be a list of connections having that scope (passing in no scope at all will result in jsPlumb assuming you want the default scope). If multiple scopes are passed in, the return value will be a map of { scope -> [ connection... ] }.
Parameters scope - if the only argument to getConnections is a string, jsPlumb will treat that string as a scope filter, and return a list of connections that are in the given scope. options - if the argument is a JS object, you can specify a finer-grained filter:
this.getDefaultScope = function()
Gets the default scope for connections and endpoints. a scope defines a type of endpoint/connection; supplying a scope to an endpoint or connection allows you to support different types of connections in the same UI. but if you’re only interested in one type of connection, you don’t need to supply a scope. this method will probably be used by very few people; it’s good for testing though.
Makes some DOM element a Connection target, allowing you to drag connections to it without having to register any Endpoints on it first. When a Connection is established, the endpoint spec that was passed in to this method is used to create a suitable Endpoint (the default will be used if you do not provide one).
| el | string id or element selector for the element to make a target. |
| params | JS object containing parameters: endpoint optional. specification of an endpoint to create when a connection is created. scope optional. scope for the drop zone. dropOptions optional. same stuff as you would pass to dropOptions of an Endpoint definition. deleteEndpointsOnDetach optional, defaults to false. whether or not to delete any Endpoints created by a connection to this target if the connection is subsequently detached. this will not remove Endpoints that have had more Connections attached to them after they were created. |
this.setDefaultScope = function( scope )
Sets the default scope for Connections and Endpoints. A scope defines a type of Endpoint/Connection; supplying a scope to an Endpoint or Connection allows you to support different types of Connections in the same UI. If you’re only interested in one type of Connection, you don’t need to supply a scope. This method will probably be used by very few people; it just instructs jsPlumb to use a different key for the default scope.
| scope | scope to set as default. |
this.setRenderMode = function( mode )
Sets render mode: jsPlumb.CANVAS, jsPlumb.SVG or jsPlumb.VML. jsPlumb will fall back to VML if it determines that what you asked for is not supported (and that VML is). If you asked for VML but the browser does not support it, jsPlumb uses SVG.
the render mode that jsPlumb set, which of course may be different from that requested.
this.show = function( el, changeEndpoints )
Sets an element’s connections to be visible.
| el | either the id of the element, or a selector for the element. |
| changeEndpoints | whether or not to also change the visible state of the endpoints on the element. this also has a bearing on other connections on those endpoints: if their other endpoint is also visible, the connections are made visible. |
void
this.sizeCanvas = function( canvas, x, y, w, h )
Helper to size a canvas. You would typically use this when writing your own Connector or Endpoint implementation.
| x | [int] x position for the Canvas origin |
| y | [int] y position for the Canvas origin |
| w | [int] width of the canvas |
| h | [int] height of the canvas |
void
The connecting line between two Endpoints.
| Functions and Properties | |
| Connection | Connection constructor. |
| sourceId | Id of the source element in the connection. |
| targetId | Id of the target element in the connection. |
| scope | Optional scope descriptor for the connection. |
| endpoints | Array of [source, target] Endpoint objects. |
| setConnector | |
| connector | The underlying Connector for this Connection (eg. |
| overlays | List of Overlays for this Connection. |
| bind | Bind to an event on the Connection. |
| setPaintStyle | Sets the Connection’s paint style and then repaints the Connection. |
| setHoverPaintStyle | Sets the paint style to use when the mouse is hovering over the Connection. |
| setHover | Sets/unsets the hover state of this Connection. |
| addOverlay | Adds an Overlay to the Connection. |
| removeAllOverlays | Removes all overlays from the Connection, and then repaints. |
| setLabel | Sets the Connection’s label. |
| repaint | Repaints the Connection. |
var Connection = function( params )
Connection constructor.
| source | either an element id, a selector for an element, or an Endpoint. |
| target | either an element id, a selector for an element, or an Endpoint |
| scope | scope descriptor for this connection. optional. |
| container | optional id or selector instructing jsPlumb where to attach all the elements it creates for this connection. you should read the documentation for a full discussion of this. |
| endpoint | Optional. Endpoint definition to use for both ends of the connection. |
| endpoints | Optional. Array of two Endpoint definitions, one for each end of the Connection. This and ‘endpoint’ are mutually exclusive parameters. |
| endpointStyle | Optional. Endpoint style definition to use for both ends of the Connection. |
| endpointStyles | Optional. Array of two Endpoint style definitions, one for each end of the Connection. This and ‘endpoint’ are mutually exclusive parameters. |
| paintStyle | Parameters defining the appearance of the Connection. Optional; jsPlumb will use the defaults if you supply nothing here. |
| hoverPaintStyle | Parameters defining the appearance of the Connection when the mouse is hovering over it. Optional; jsPlumb will use the defaults if you supply nothing here (note that the default hoverPaintStyle is null). |
| overlays | Optional array of Overlay definitions to appear on this Connection. |
| drawEndpoints | if false, instructs jsPlumb to not draw the endpoints for this Connection. Be careful with this: it only really works when you tell jsPlumb to attach elements to the document body. Read the documentation for a full discussion of this. |
this.setConnector = function( connector, doNotRepaint )
| Sets the Connection’s connector (eg “Bezier”, “Flowchart”, etc). You pass a Connector definition into this method | the same thing that you would set as the ‘connector’ property on a jsPlumb.connect call. |
| connector | Connector definition |
Bind to an event on the Connection.
| event | the event to bind. Available events on a Connection are: |
| callback | function to callback. This function will be passed the Connection that caused the event, and also the original event. |
Sets the paint style to use when the mouse is hovering over the Connection. This is null by default. The hover paint style is applied as extensions to the paintStyle; it does not entirely replace it. This is because people will most likely want to change just one thing when hovering, say the color for example, but leave the rest of the appearance the same.
| style | Style to use when the mouse is hovering. |
| doNotRepaint | if true, the Connection will not be repainted. useful when setting things up initially. |
Models an endpoint. Can have 1 to ‘maxConnections’ Connections emanating from it (set maxConnections to -1 to allow unlimited). Typically, if you use ‘jsPlumb.connect’ to programmatically connect two elements, you won’t actually deal with the underlying Endpoint objects. But if you wish to support drag and drop Connections, one of the ways you do so is by creating and registering Endpoints using ‘jsPlumb.addEndpoint’, and marking these Endpoints as ‘source’ and/or ‘target’ Endpoints for Connections.
| Functions | |
| Endpoint | Endpoint constructor. |
| bind | Bind to an event on the Endpoint. |
| setPaintStyle | Sets the Endpoint’s paint style and then repaints the Endpoint. |
| setHoverPaintStyle | Sets the paint style to use when the mouse is hovering over the Endpoint. |
| setHover | Sets/unsets the hover state of this Endpoint. |
| isVisible | Returns whether or not the Endpoint is currently visible. |
| setVisible | Sets whether or not the Endpoint is currently visible. |
| Properties | |
| canvas | The Endpoint’s Canvas. |
| connections | List of Connections this Endpoint is attached to. |
| scope | Scope descriptor for this Endpoint. |
| Functions | |
| addConnection | Adds a Connection to this Endpoint. |
| detach | Detaches the given Connection from this Endpoint. |
| detachAll | Detaches all Connections this Endpoint has. |
| detachFrom | Removes any connections from this Endpoint that are connected to the given target endpoint. |
| detachFromConnection | Detach this Endpoint from the Connection, but leave the Connection alive. |
| getElement | Returns the DOM element this Endpoint is attached to. |
| getUuid | Returns the UUID for this Endpoint, if there is one. |
| isConnectedTo | Returns whether or not this endpoint is connected to the given Endpoint. |
| isFull | Returns whether or not the Endpoint can accept any more Connections. |
| setDragAllowedWhenFull | Sets whether or not connections can be dragged from this Endpoint once it is full. |
| setStyle | Sets the paint style of the Endpoint. |
| paint | Paints the Endpoint, recalculating offset and anchor positions if necessary. |
var Endpoint = function( params )
Endpoint constructor.
| anchor | definition of the Anchor for the endpoint. You can include one or more Anchor definitions here; if you include more than one, jsPlumb creates a ‘dynamic’ Anchor, ie. an Anchor which changes position relative to the other elements in a Connection. Each Anchor definition can be either a string nominating one of the basic Anchors provided by jsPlumb (eg. “TopCenter”), or a four element array that designates the Anchor’s location and orientation (eg, and this is equivalent to TopCenter, [ 0.5, 0, 0, -1 ]). To provide more than one Anchor definition just put them all in an array. You can mix string definitions with array definitions. |
| endpoint | optional Endpoint definition. This takes the form of either a string nominating one of the basic Endpoints provided by jsPlumb (eg. “Rectangle”), or an array containing [name,params] for those cases where you don’t wish to use the default values, eg. [ “Rectangle”, { width:5, height:10 } ]. |
| paintStyle | endpoint style, a js object. may be null. |
| hoverPaintStyle | style to use when the mouse is hovering over the Endpoint. A js object. may be null; defaults to null. |
| source | element the Endpoint is attached to, of type String (an element id) or element selector. Required. |
| canvas | canvas element to use. may be, and most often is, null. |
| container | optional id or selector instructing jsPlumb where to attach the element it creates for this endpoint. you should read the documentation for a full discussion of this. |
| connections | optional list of Connections to configure the Endpoint with. |
| isSource | boolean. indicates the endpoint can act as a source of new connections. Optional; defaults to false. |
| maxConnections | integer; defaults to 1. a value of -1 means no upper limit. |
| dragOptions | if isSource is set to true, you can supply arguments for the underlying library’s drag method. Optional; defaults to null. |
| connectorStyle | if isSource is set to true, this is the paint style for Connections from this Endpoint. Optional; defaults to null. |
| connectorHoverStyle | if isSource is set to true, this is the hover paint style for Connections from this Endpoint. Optional; defaults to null. |
| connector | optional Connector type to use. Like ‘endpoint’, this may be either a single string nominating a known Connector type (eg. “Bezier”, “Straight”), or an array containing [name, params], eg. [ “Bezier”, { curviness:160 } ]. |
| connectorOverlays | optional array of Overlay definitions that will be applied to any Connection from this Endpoint. |
| isTarget | boolean. indicates the endpoint can act as a target of new connections. Optional; defaults to false. |
| dropOptions | if isTarget is set to true, you can supply arguments for the underlying library’s drop method with this parameter. Optional; defaults to null. |
| reattach | optional boolean that determines whether or not the Connections reattach after they have been dragged off an Endpoint and left floating. defaults to false: Connections dropped in this way will just be deleted. |
Bind to an event on the Endpoint.
| event | the event to bind. Available events on an Endpoint are: |
| callback | function to callback. This function will be passed the Endpoint that caused the event, and also the original event. |
Sets the paint style to use when the mouse is hovering over the Endpoint. This is null by default. The hover paint style is applied as extensions to the paintStyle; it does not entirely replace it. This is because people will most likely want to change just one thing when hovering, say the color for example, but leave the rest of the appearance the same.
| style | Style to use when the mouse is hovering. |
| doNotRepaint | if true, the Endpoint will not be repainted. useful when setting things up initially. |
this.setVisible = function( v, doNotChangeConnections, doNotNotifyOtherEndpoint )
Sets whether or not the Endpoint is currently visible.
| visible | whether or not the Endpoint should be visible. |
| doNotChangeConnections | Instructs jsPlumb to not pass the visible state on to any attached Connections. defaults to false. |
| doNotNotifyOtherEndpoint | Instructs jsPlumb to not pass the visible state on to Endpoints at the other end of any attached Connections. defaults to false. |
this.detach = function( connection, ignoreTarget )
Detaches the given Connection from this Endpoint.
| connection | the Connection to detach. |
| ignoreTarget | optional; tells the Endpoint to not notify the Connection target that the Connection was detached. The default behaviour is to notify the target. |
this.setDragAllowedWhenFull = function( allowed )
Sets whether or not connections can be dragged from this Endpoint once it is full. You would use this in a UI in which you’re going to provide some other way of breaking connections, if you need to break them at all. This property is by default true; use it in conjunction with the ‘reattach’ option on a connect call.
| allowed | whether drag is allowed or not when the Endpoint is full. |
Sets the paint style of the Endpoint. This is a JS object of the same form you supply to a jsPlumb.addEndpoint or jsPlumb.connect call. TODO move setStyle into EventGenerator, remove it from here. is Connection’s method currently setPaintStyle ? wire that one up to setStyle and deprecate it if so.
| style | Style object to set, for example {fillStyle:”blue”}. |
@deprecated use setPaintStyle instead.
this.paint = function( params )
Paints the Endpoint, recalculating offset and anchor positions if necessary.
| timestamp | optional timestamp advising the Endpoint of the current paint time; if it has painted already once for this timestamp, it will not paint again. |
| canvas | optional Canvas to paint on. Only used internally by jsPlumb in certain obscure situations. |
| connectorPaintStyle | paint style of the Connector attached to this Endpoint. Used to get a fillStyle if nothing else was supplied. |
An arrow overlay, defined by four points: the head, the two sides of the tail, and a ‘foldback’ point at some distance along the length of the arrow that lines from each tail point converge into. The foldback point is defined using a decimal that indicates some fraction of the length of the arrow and has a default value of 0.623. A foldback point value of 1 would mean that the arrow had a straight line across the tail.
| length | distance in pixels from head to tail baseline. default 20. |
| width | width in pixels of the tail baseline. default 20. |
| fillStyle | style to use when filling the arrow. defaults to “black”. |
| strokeStyle | style to use when stroking the arrow. defaults to null, which means the arrow is not stroked. |
| lineWidth | line width to use when stroking the arrow. defaults to 1, but only used if strokeStyle is not null. |
| foldback | distance (as a decimal from 0 to 1 inclusive) along the length of the arrow marking the point the tail points should fold back to. defaults to 0.623. |
| location | distance (as a decimal from 0 to 1 inclusive) marking where the arrow should sit on the connector. defaults to 0.5. |
| direction | indicates the direction the arrow points in. valid values are -1 and 1; 1 is default. |
A basic arrow. This is in fact just one instance of the more generic case in which the tail folds back on itself to some point along the length of the arrow: in this case, that foldback point is the full length of the arrow. so it just does a ‘call’ to Arrow with foldback set appropriately.
| Functions | |
| Constructor | See Overlays.Arrow for allowed parameters for this overlay. |
See Overlays.Arrow for allowed parameters for this overlay.
A diamond. Like PlainArrow, this is a concrete case of the more generic case of the tail points converging on some point...it just happens that in this case, that point is greater than the length of the the arrow.
this could probably do with some help with positioning...due to the way it reuses the Arrow paint code, what Arrow thinks is the center is actually 1/4 of the way along for this guy. but we don’t have any knowledge of pixels at this point, so we’re kind of stuck when it comes to helping out the Arrow class. possibly we could pass in a ‘transpose’ parameter or something. the value would be -l/4 in this case - move along one quarter of the total length.
| Functions | |
| Constructor | See Overlays.Arrow for allowed parameters for this overlay. |
See Overlays.Arrow for allowed parameters for this overlay.
A Label overlay. For all different renderer types (SVG/Canvas/VML), jsPlumb draws a Label overlay as a styled DIV. Version 1.3.0 of jsPlumb introduced the ability to set css classes on the label; this is now the preferred way for you to style a label. The ‘labelStyle’ parameter is still supported in 1.3.0 but its usage is deprecated. Under the hood, jsPlumb just turns that object into a bunch of CSS directive that it puts on the Label’s ‘style’ attribute, so the end result is the same.
| cssClass | optional css class string to append to css class. This string is appended “as-is”, so you can of course have multiple classes defined. This parameter is preferred to using labelStyle, borderWidth and borderStyle. |
| label | the label to paint. May be a string or a function that returns a string. Nothing will be painted if your label is null or your label function returns null. empty strings will be painted. |
| location | distance (as a decimal from 0 to 1 inclusive) marking where the label should sit on the connector. defaults to 0.5. |
| labelStyle | (deprecated) js object containing style instructions for the label. defaults to jsPlumb.Defaults.LabelStyle. |
| borderWidth | (deprecated) width of a border to paint. defaults to zero. |
| borderStyle | (deprecated) strokeStyle to use when painting the border, if necessary. |
Adds an Endpoint to a given element or elements.
this.addEndpoint = function( el, params, referenceParams )
Adds a list of Endpoints to a given element or elements.
this.addEndpoints = function( el, endpoints, referenceParams )
This is a wrapper around the supporting library’s animate function; it injects a call to jsPlumb in the ‘step’ function (creating the ‘step’ function if necessary).
this.animate = function( el, properties, options )
Establishes a Connection between two elements (or Endpoints, which are themselves registered to elements).
this.connect = function( params, referenceParams )
Deletes an Endpoint and removes all Connections it has (which removes the Connections from the other Endpoints involved too)
this.deleteEndpoint = function( object )
Deletes every Endpoint, and their associated Connections, in this instance of jsPlumb.
this.deleteEveryEndpoint = function()
Detaches and then removes a Connection.
this.detach = function( source, target )
Removes all an element’s Connections.
this.detachAllConnections = function( el )
Remove all Connections from all elements, but leaves Endpoints in place.
this.detachEveryConnection = function()
Initialises the draggability of some element or elements.
this.draggable = function( el, options )
Wraps the underlying library’s extend functionality.
this.extend = function( o1, o2 )
Returns the default Endpoint type.
this.getDefaultEndpointType = function()
Returns the default Connection type.
this.getDefaultConnectionType = function()
Gets all or a subset of connections currently managed by this jsPlumb instance.
this.getConnections = function( options )
Gets all connections, as a map of { scope -> [ connection...
this.getAllConnections = function()
Gets the default scope for connections and endpoints.
this.getDefaultScope = function()
Sets an element’s connections to be hidden.
this.hide = function( el, changeEndpoints )
Helper method to bind a function to jsPlumb’s ready event.
this.ready = function( fn )
Repaints an element and its connections.
this.repaint = function( el )
Repaints all connections.
this.repaintEverything = function()
Removes all Endpoints associated with a given element.
this.removeAllEndpoints = function( el )
Sets/unsets automatic repaint on window resize.
this.setAutomaticRepaint = function( value )
Sets the default scope for Connections and Endpoints.
this.setDefaultScope = function( scope )
Sets whether or not elements are draggable by default.
this.setDraggableByDefault = function( draggable )
Sets the function to fire when the window size has changed and a repaint was fired.
this.setRepaintFunction = function( f )
Sets whether or not mouse events are enabled.
this.setMouseEventsEnabled = function( enabled )
Sets render mode: jsPlumb.CANVAS, jsPlumb.SVG or jsPlumb.VML.
this.setRenderMode = function( mode )
Sets an element’s connections to be visible.
this.show = function( el, changeEndpoints )
Helper to size a canvas.
this.sizeCanvas = function( canvas, x, y, w, h )
Unloads jsPlumb, deleting all storage.
this.unload = function()
Connection constructor.
var Connection = function( params )
this.setConnector = function( connector, doNotRepaint )
Adds an Overlay to the Connection.
this.addOverlay = function( overlay )
Removes all overlays from the Connection, and then repaints.
this.removeAllOverlays = function()
Sets the Connection’s label.
this.setLabel = function( l )
Repaints the Connection.
this.repaint = function()
Endpoint constructor.
var Endpoint = function( params )
Returns whether or not the Endpoint is currently visible.
this.isVisible = function()
Sets whether or not the Endpoint is currently visible.
this.setVisible = function( v, doNotChangeConnections, doNotNotifyOtherEndpoint )
Adds a Connection to this Endpoint.
this.addConnection = function( connection )
Detaches the given Connection from this Endpoint.
this.detach = function( connection, ignoreTarget )
Detaches all Connections this Endpoint has.
this.detachAll = function()
Removes any connections from this Endpoint that are connected to the given target endpoint.
this.detachFrom = function( targetEndpoint )
Detach this Endpoint from the Connection, but leave the Connection alive.
this.detachFromConnection = function( connection )
Returns the DOM element this Endpoint is attached to.
this.getElement = function()
Returns the UUID for this Endpoint, if there is one.
this.getUuid = function()
Returns whether or not this endpoint is connected to the given Endpoint.
this.isConnectedTo = function( endpoint )
Returns whether or not the Endpoint can accept any more Connections.
this.isFull = function()
Sets whether or not connections can be dragged from this Endpoint once it is full.
this.setDragAllowedWhenFull = function( allowed )
Paints the Endpoint, recalculating offset and anchor positions if necessary.
this.paint = function( params )