Jsplumb.js (connector) API Read notes __js

Jsplumb.js (connector) API Read notes Jsplumb DOCS

The company is going to start doing process controllers, so take a look at the jsplumb below, read the JSPLUMB provided by the document produced by the summary setup

If you do not use jquery or the class jquery library, the incoming node must be in the form of an ID, otherwise JSPLUMB will set an ID for the element.

Jsplumb.ready (function () {· •
});
or
jsplumb.bind ("Ready", function () {•
});

It is best to confirm that the Jsplumb has finished loading before you start using the related features.

By default, Jsplumb registers in a browser window and provides a static instance of the entire page, so you can also think of it as a class to instantiate Jsplumb:

var firstinstance = jsplumb.getinstance ();

If in use, the ID of the element produces a new change (mostly a new node is generated, and the old node is deleted). You can: Jsplumb.setid (el,newid) jsplumb.setidchanged (Oldid,newid)

During use, each part of the Z-index needs to be noted, otherwise the line may be overwritten, JSPLUMB will set the endpoint for each node to locate the endpoint.

Jsplumb also provides a drag method:

var secondinstance = Jsplumb.getinstance ();
Secondinstance.draggable ("some element");

redrawing, each time the connection is used, causes the associated elements to be redrawn, but when large amounts of data are loaded, you can use:

Jsplumb.setsuspenddrawing (true);

Jsplumb.setsuspenddrawing (false,true);

The true of the second argument here causes the entire jsplumb to be redrawn immediately.
You can also use batch:

Jsplumb.batch (Fn,[donotrepaintafterwards]);

This function is the same, you can first of all the connection to register all right, and then redraw.
This method is named dowhilesuspended. Config defaults before the 1.7.3 version.

Of course, Jsplumb will have some default parameters:
is divided into global default parameters and line default parameters,

Anchor: "Bottomcenter",//The position declaration (anchor Point) of the anchor point: Left,top,bottom et anchors: [NULL, NULL],//the location declaration of multiple anchor points connectionsdetachable: Whether the true,//connection can be separated using the mouse default connectionoverlays: [],//default overlap Connector attached to each connection: Bezier,//The type of default connector to use: polyline, process, etc. Container: null,//sets the element of the parent, a container donotthrowerrors:false,//if the request does not exist anchor,endpoint or connector, it throws Dragoptions: {},// Parameters used to configure drag-and-drop elements dropoptions: {},//parameters used to configure the drop behavior of the element Endpoint: "dot",//endpoint (anchor) style declaration (dot) endpoints: [NULL, NULL],//style sound for multiple endpoints
Ming (Dot) endpointoverlays: [Overlap of],//Endpoints Endpointstyle: {fill: ' #456 '},//the CSS style declaration for the endpoint endpointstyles: [NULL, NULL],//IBID. endpointhoverstyle:null,//mouse through style endpointhoverstyles: [NULL, NULL],//ditto hoverpaintstyle:null,//mouse over line style LabelStyle
: {color: "Black" the default style for},//labels. logenabled:false,//whether to open Jsplumb internal logging overlays: [],//overlapping maxconnections:1,//maximum number of connections Paintstyle: {linewidth:8, Strok E: "#456"},//line style reattachconnections:false,//whether to reconnect lines using the mouse rendermode: "SVG",//default rendering mode Scope: "Jsplumb_defaultscope "//Range, logo

If it is global, you can use Jsplumb.importdefaults ({...}).
You can also redefine Jsplumb.getinstance ({.}) when instantiated, Basic Concepts

The Jsplumb key point is the connector, which can be seen from above that most of the configuration items are set for the line.
It is divided into five aspects: anchors: Anchor position Endpoint: endpoint, the beginning or end of the connection Connector: wiring, the intuitive performance of connecting two nodes, there are four default types: Bézier (Bezier curve), Straight (straight line), Flowchart (flowchart), state machine Overlay: Decorative connector components, such as arrows group: a set of elements contained in a different element that can be collapsed, causing connections to all group members to be merged into a collapsed group container. Anchor

There are four types of anchor positions: static, which is fixed to a point on the element, and does not move dynamic: Dynamics is a collection of static anchors, which is the most suitable anchor for each connection Jsplumb Perimeter anchors: Perimeter anchor, dynamic anchor application. Continuous Anchors: Continuous anchor Static
The JSPLUMB has nine default positions, Four corners of the element, the center of the element, and the midpoint of each side of the element. Top (Topcenter), Topright,topleft Right (Rightmiddle) Bottom (bottomcenter), Bottomright,bottomleft left (Leftmiddle) Center
You can use an array-based form to define an anchor point location: [X,y,dx,dy,offsetx,offsety].
[0,0] represents the upper-left corner of the node.
x indicates the distance of the anchor point on the horizontal axis, and y indicates the distance of the anchor point on the vertical axis, which can be set from 0 to 0.5 and center.
While DX indicates that the anchor points to the transverse line, DY indicates that the anchor point is 0,-1,1 to the longitudinal axis, and there are three values to set. 0 for no radioactivity.
OffsetX represents the anchor offset x (px), and offsety represents the anchor offset y (px).

Dynamic Anchors
Choose the location that is most appropriate whenever something is moved or drawn in the UI.

var dynamicanchors = [[0.2,0,0,0], "Top", "Bottom"]

In the course of use, it is found that the specified anchor point should appear in the place. Jsplumb will select the nearest point as the anchor point. You can set multiple points as a possible anchor point.
Of course, JSPLUMB has its own default parameters, Autodefault. In fact, it is the same as "top", "right", "Bottom" and "left". Perimeter Anchors
Jsplumb offers six different shapes: Circle Ellipse triangle Diamond Square

Continuous anchors

Anchor: "Continuous"
//or
anchor:["continuous", {faces:["top", "left"}]

Faces also has four values: Top,left,right,bottom. Associate a CSS class with anchors

var EP = Jsplumb.addendpoint ("Ele1", {
  anchor:[0,0,0,0,0,0, "test"]
});

You can also modify the prefix:

Jsplumb.endpointanchorclass= "Anchor_";

Connectors

Connectors are lines that actually connect UI elements, the default connectors are Bezier curves, and the default value is Bézier;
This is where the line is drawn, Bézier: It has a configuration item, curviness (curvature) and defaults to 150. This defines the distance between Bézier control points and anchor points Straight: Draw a line between two endpoints, support two configuration parameters: stub, default is 0. Gap, the default is 0 Flowchart: a series of vertical or horizontal segments of the connection. Supports four parameters, stub, default is 30;alwaysrespectstubs, default is False;gap, default is 0;midpoint, default is 0.5;cornerradius, default is 0; StateMachine: State device, Support for the start and end of the connection on the same element, the supported parameters are: margin, default for 5;curviness, default for 10;proximitylimit, default for; endpoints

Configuration and appearance parameters for the endpoint.
Jsplumb with four endpoint implementations-points, rectangles, blanks and images, can be used in Connect (), Addendpoint (), Makesource () or jsplumb.maketarget, use the endpoint parameter to specify the endpoint property. Configure the Endpoint Jsplumb.connect () to configure the endpoint's properties Jsplumb.addendpoint () when creating a connection, and configure the properties Jsplumb.makesource () when a new endpoint is created. When you configure an element and then drag a connection from that element, you create and assign a preset type for the new endpoint endpoint

Dot: Supports three parameters:
Radius, default 10px, defines the radius of a dot
CssClass, CSS class attached to elements created by endpoint
Hoverclass, a CSS class that attaches to elements created by endpoint when the mouse hovers over an element or connected line

Rectangle: Supported Parameters:
width, which defaults to 20, defines the rectangle's widths
Height, which defaults to 20, defines a rectangle's altitude
CssClass, CSS class attached to elements created by endpoint
Hoverclass, when the mouse hovers over an element or connected line, attaches to the element image created by endpoint: Draws an image from a given URL and supports three parameters:
SRC, required, specifies the URL of the image to use,
CssClass, CSS class attached to elements created by endpoint
Hoverclass, when the mouse hovers over an element or connected line, attaches to the element created by endpoint,

Blank: Blank overlays (overlay layer)

Jsplumb has five types of overlays:

Arrow: arrows, configurable arrows drawn at a point in the connector to control the length and width of the arrows, and the parameters are:
width, length of arrowhead tail
Length, the distance from the tail of the arrow to the head
Location, position, recommended to use between 0~1, as a percentage, easy to understand
direction, direction, default value is 1 (for forward), optional-1 (for backwards)
Foldback, retrace, that is, the angle of the tail, default 0.623, when 1 o'clock, for the positive triangle
Paintstyle, Style object

Plainarrow: Arrow shape is triangle
Just Arrow's foldback as an example of 1 o'clock, with the same parameters as arrow

Diamond: Prism shape
The same is the case of Arrow's foldback as 2 o'clock, with the same parameters as arrow

Custom: Customizing
Allows you to create a custom overlay layer, you need to use Create () to return a DOM element or a valid selector (ID)
var conn = Jsplumb.connect ({source: "D1", Target: "D2", paintstyle:{Stroke: "Red", Strokewidth:3}, overlays:[["Custom", { Create:function (component) {return $ ("<select id= ' Mydropdown ' ><option" value= ' foo ' >foo</option> <option value= ' bar ' >bar</option></select> '); }, location:0.7, ID: "Customoverlay"}]});

As a decimal number for [0,1], which represents a proportional stroke along the path that is attached to the connector, the default value is 0.5.
As an integer greater than 1, representing certain absolute pixels that travel from the start point along the connector. equals 1 o'clock, at the end.
As an integer less than 0, which indicates the pixel of some absolute value that travels backwards along the connector from the endpoint. equals 0 o'clock, at the beginning.

All overlay layers are supported:
getlocation-return to current position
setlocation-Set Current position Add overlay layer

Example:

Jsplumb.connect ({
  overlays:[
    "Arrow",
      ["Label", {LA