Simple use of Jsplumb

2. Jsplumb Overview
   Jsplumb is a JavaScript framework that draws connectors between DOM elements, drawing connectors using SVG technology.
3. Basic Concepts
   Obviously, one of the main issues to be solved is the problem of who is connected with whom, where to connect (where the connection points are), how long the connection points are, how to draw the line, etc.
   1:anchor, Anchor Point, which is a logical concept, solves the problem of connecting point location of the connection.
   2:endpoint, endpoint, it's a visual point, fix the connection point long what kind of problem
   3:connector, connect, solve the problem of how to draw a line
   4:overlay, covering, it mainly adds some decorations for the connection, rather than the label text, the arrow of the connection point. Anchor:
   There are several ways to define anchor points
   1: Using arrays to define
   [x position, y position, x direction, y direction]
   [x position, y position, x direction, y direction, x pixel offset, y pixel offset]
   The value of the position is between 0~1
   The value of the direction is 0,1,-1
   The 9 static values are:
   Top TopRight
   Right BottomRight
   Bottom Bottomleft
   Left TopLeft
   Center
   Autodefault includes top, right, Bottom and left
   It is important to note that coordinates use the coordinates of Quadrant four.
   A common combination is:
   var defaultanchors = ["Top", "right", "Bottom", "left", [0.25, 0, 0,-1], [0.75, 0, 0,-1], [0.25, 1, 0, 1], [0.75, 1, 0, 1]
   , [0, 0.25, 0,-1], [0, 0.75, 0,-1], [1, 0.25, 0, 1], [1, 0.75, 0, 1]];
   2: The periphery of the geometry
   Circle Ellipse Triangle Diamond Rectangle Square
   anchor:[{shape: "Triangle", anchorcount:150, rotation:25}]
   3: Continuous
   anchor:["Continuous", {faces:["top", "Left"]}]

   Endpoint:
   JSPLUMB provides four types of endpoints,
   Dot,rectangle,
   Blank, the use has failed.
   Image, the use failed.

   Connectors
   JSPLUMB offers four types of connections,
   Bezier,statemachine,flowchart,straight

   Overlay
   JSPLUMB offers 3 types of covering,
   Arrow: Arrows
   Label: Label
   Custom: Customized HTML elements
   Connectionoverlays: [
   ["Arrow", {
   Location:1,
   Foldback:1,
   foldback:0.618,///0.618: normal arrow, 1: flat-bottomed arrow, 2: Diamond Arrow
   Visible:true,
   ID: "Arrow"
   }],
   ["Label", {location:0.5,
   CssClass: "Endpointtargetlabel",
   Visible:true,
   ID: "Label"}]
   ]

5. A few points to note:
   1: All child elements are in a parent container, and the child elements are to use absolute layout
   Position:absolute;
   2: The endpoint can be hidden through the style, directly using "Blank" error.
   3: Performance, when multiple connections, need to use batch processing mode to draw.
   SintoonUx.jsPlumbInstance.setSuspendDrawing (True)
   SintoonUx.jsPlumbInstance.setSuspendDrawing (False, True);
   4: Setting can be dragged
   SintoonUx.jsPlumbInstance.draggable (btndoms);
6. usage Examples

       Drawconnectline:function () {var sintoonux = this; Define the location of the anchor point var defaultanchors = ["Top", "right", "Bottom", "left", [0.25, 0, 0,-1], [0.75, 0, 0,-1], [0.25, 1, 0        , 1], [0.75, 1, 0, 1], [0, 0.25, 0,-1], [0, 0.75, 0,-1], [1, 0.25, 0, 1], [1, 0.75, 0, 1];                Create an instance, configure the default drawing properties, establish a common drawing method, etc. sintoonux.jsplumbinstance = Jsplumb.getinstance ({paintstyle: { Linewidth:2, Strokestyle: "Blue", OutlineColor: "Blue", DashStyle: "4 2" , outlinewidth:1},//Connector: ["Bézier", {curviness:30}],//Conne ctor: ["StateMachine"],///Connector: ["Flowchart", {stub: [+], gap:10, Cornerradius:5, ALWAYSRESPECTST Ubs:true}], Connector: ["Straight", {stub: [], gap:0}], Endpoint: ["Dot", {radius:5, CS Sclass: "Displaynone"}],///hides anchor points by style//endpoint: ["Image", {src: "/http/Rmadyq.sintoon.cn/content/16icons/arrow_right.png "}],///by style to hide the anchor point//Endpoint: [" Blank "," blank "], failure error, Endpointstyle: {fillStyle: "#567567"}, Anchor: [defaultanchors],//Anchor: ["Perimeter",  {shape: "Triangle"}], Container:sintoonUx.flowchartContainerId, dragoptions: {cursor: ' pointer ',                    zindex:2000}, Connectionoverlays: [["Arrow", {location:1,                Foldback:1, foldback:0.618, visible:true, ID: "Arrow"  }], ["label", {location:0.5, Label: "Zhu", CssClass: "Endpointtargetlabel", Visible:true,        ID: "Label"}]});                Draw label SintoonUx.jsPlumbInstance.bind ("Connection", function (Conninfo, originalevent) {                var connection = conninfo.connection; var labelText = Connection.sourceId.substrinG (0, +) + "-" + connection.targetId.substring (0, 15); LabelText = Ext.String.format ("{0}---{1}", ext.getcmp (Connection.sourceid). Flowstage, ext.getcmp (Connec                Tion.targetid). Flowstage);            Connection.getoverlay ("label"). SetLabel (LabelText);        });        Batch Drawing sintoonUx.jsPlumbInstance.setSuspendDrawing (true);        var Searchpat = Ext.String.format ("#{0}. Btndraggable", Sintoonux.flowchartcontainerid);        var btndoms = SintoonUx.jsPlumbInstance.getSelector (Searchpat);        Sets the Draggable sintoonUx.jsPlumbInstance.draggable (btndoms) of DOM elements; Establish a connection between DOM elements, draw connectors, anchor points, overlays, etc. for (var i = 0; i < sintoonux.btnconfigs.length-1; i++) {sintoonux. Jsplumbinstance.connect ({reattach:true, Source:sintoonux.btnconfigs[i].btnid, Target:sintoonux.btnconfigs[i + 1].        Btnid});    ///force drawing of the entire interface sintoonUx.jsPlumbInstance.setSuspendDrawing (false, True); }

   　　

Simple use of Jsplumb