The core technology jsplumb_javascript technique of constructing flow chart in JS

Project inside the Web to use the drag-and-drop flowchart technology Jsplumb, in fact, it is not difficult, but the project inside the use of HTML to do some like the effect of flash, feel good, in this share.

A, the effect chart shows

1, drag elements from the left to the middle area, and then connect

2, line type can be customized: here is defined as lines, polylines, curves. The actual project according to the business we define as the sub-loading line, the branch line, assembly lines, etc.

3. Drag the mouse area to select the element, and select the element unified drag position.

4, left-aligned to the selected element.

5. Align the selected elements to the center

6, right alignment

7, on the alignment

8, Vertical center alignment

9, under the alignment

10, according to the first selected elements up and down

11, according to the first selected elements around

12, according to the first selected elements of the same height

13, according to the first selected elements of the same width

14, selected elements clockwise rotation, click a rotation of 45 degrees

15, the selected element counterclockwise rotation.

16, select the unified deletion element and the line above the element

Here a lot of effect in fact in the project is not too big, a lot of pure is to show use.

Second, the code detailed
Here the effect is more, may be divided into several articles to introduce. This one is going to take a look at the core technology of structure flowchart: Jsplumb.

1. Overview
On the content of Jsplumb, here is a simple explanation. Jsplumb is a powerful JavaScript line library that connects elements of HTML with arrows, curves, lines, and so on, to develop charts, modeling tools, etc. on the web. It also supports the three JavaScript frameworks, Jquery+jquery UI, MooTools, and YUI3, which are very powerful. This project is also a combination of the most familiar jquery to explain. and also note that the Jsplumb browser compatibility, JSPLUMB support IE 6 above, Firefox, Google and other browsers

2. Use
(1) Introduction of JS file
Can directly to the official online download the latest JS library, because jsplumb need jquery support, according to the online version, it only compatible with jquery1.3.x and above versions, and in the jquery UI 1.7.x, 1.8.x and 1.9.x test pass. So we need to download a higher version of the jquery and jquery UI. About JSPLUMB content only need to refer to a JS can. Similar

<script src= "~/content/jquery-1.9.1.min.js" ></script>
<script src= "~/content/" Jquery-ui-1.11.4.custom/jquery-ui.js "></script>
<link href=" ~/content/jquery-ui-1.11.4.custom/ Jquery-ui.min.css "rel=" stylesheet "/>
<script src=" ~/content/jsplumb-master/dist/js/ Jquery.jsplumb-1.7.5.js "></script>

(2) initialization
Using Jsplumb, it is important to note that the line style of the jsplumb is determined by the point, that is, the style of the point contains the associated attributes that specify how the line should look when using this point to connect.
In our project, the left side of the model area, the middle is the design area. To create an element from the model area, you need to use the draggable and droppable events in our jquery UI. First we register the draggable of the left model and the Droppable event in the middle area.

Cshtml page code, <div id= "Divcontentleftmenu" > This is the container for the left model, <div id= "Divcenter" ></div> represents the intermediate area container.
　　　　　　

<div id= "Divcontentleftmenu" > <div class= "sidebar-menu" id= "Divsidebar" > <a href= "#plantmode L "onclick=" Resize () "class=" Nav-header Menu-first collapsed "data-toggle=" collapse "> Factory model </a> <ul id=" Plantmodel "class=" nav nav-list collapse Menu-second "> </ul> <a href=" #artlinemodel "onclick=" Resize () "class=" Nav-header Menu-first collapsed "data-toggle=" collapse "> Process Segment Model </a> <ul id=" Artlinemode  L "class=" nav nav-list collapse Menu-second "> <li> <a href=" # "> <div class= "Node radius" id= "Node4" dbtype= "Dto_tm_art_line" > <label> section </label> &
              lt;/div> </a> </li> <li> <a href= "#" > <div class= "Node" id= "Node5" dbtype= "Dto_tm_uloc" > <label> station </label> < /div>;/a> </li> </ul> </div> </div> <div id= "Divcenter" ></d Iv>

JS Code:
First we define a few points of the style of the global variable

Basic connector style var Connectorpaintstyle = {strokestyle: "#1e8151", FillStyle: "Transparent", Radius:5, Linewidth:2}
; The style of the mouse hovering over the connector var Connectorhoverstyle = {linewidth:3, Strokestyle: "#216477", Outlinewidth:2, OutlineColor: "
White "};
var Endpointhoverstyle = {fillStyle: "#216477", Strokestyle: "#216477"}; Hollow Circle Endpoint Style setting var hollowcircle = {dragoptions: {cursor: ' pointer ', zindex:2000}, endpoint: [' Dot ', {radius:7}],/
    /endpoint shape connectorstyle:connectorpaintstyle,//connector color, size style Connectorhoverstyle:connectorhoverstyle, PaintStyle: { Strokestyle: "#1e8151", FillStyle: "Transparent", Radius:5, Linewidth:2},//Endpoint color style//anchor: "Auto Default, Issource:true,//Can be dragged (as a line start) connector: ["Straight", {stub: [0, 0], gap:10, Cornerradius:5, Alwaysre Spectstubs:true}],//connector style type has [Bezier],[flowchart],[statemachine],[straight] istarget:true,//whether can be placed (line end) Maxco Nnections:-1,//Set connection point can connect up to several lines connectoroverlays:[["Arrow", {width:10, length:10, Location:1}]]};
 

And then register the event after page initialization

　　　　　　　　$ (function () {//Draggable event $ ("#divContentLeftMenu. Node") in the left area. Draggable ({helper: cl

        One ", Scope:" Plant "});
            Drop Event $ ("#divCenter") in the middle drag area. droppable ({scope: "Plant", Drop:function (event, UI) {
          Create factory model to drag area Createmodel (UI, $ (this));
　　　　　　　　}
        });  
 
}); 1. Create model (parameters are: UI of drop event, current container, ID, current style) function Createmodel (UI, selector) {//1.1 add HTML model var modelid = $ (Ui.dra
    ggable). attr ("id");
    i++;
    var id = modelid + i;
    var cur_css = ModelID;
    var type = $ (ui.helper). attr ("DbType"); $ (selector). Append (' <div class= node ' + cur_css + ' "id=" ' + ID + ' "dbtype=" ' + Type + ' "parentid=" ' + $ (selector). A TTR ("id") + ' "onclick=" oinitelement.getpropertiesbytype (\ ' + type + ' \ ', this) ' ondblclick= ' initstation ().
    Dbclick (\ ' + type + ' \ ', this) ' > ' + $ (ui.helper). HTML () + ' </div> '); var left = parseint (Ui.offset.left-$ (selector). Offset (). left);
    var top = parseint (Ui.offset.top-$ (selector). Offset (). top);
    $ ("#" + ID). CSS (' left ', left '). CSS ("top", top);
    Jsplumb.setcontainer ($ ("#divCenter"));
    1.2 Add Connection point Jsplumb.addendpoint (ID, {anchors: "Rightmiddle"}, Hollowcircle);
    Jsplumb.addendpoint (ID, {anchors: "Leftmiddle"}, Hollowcircle);
    Jsplumb.addendpoint (ID, {anchors: "Topcenter"}, Hollowcircle);
    Jsplumb.addendpoint (ID, {anchors: "Bottomcenter"}, Hollowcircle);

    Jsplumb.draggable (ID);
        1.3 Registered entities can be draggable and resizable $ ("#" + ID). draggable ({containment: "parent", start:function () {
      Startmove ();
        }, Drag:function (event, UI) {Moveselectdiv (event, UI, ID);
      Jsplumb.repainteverything ();
      }, Stop:function () {jsplumb.repainteverything ();

    }
    });
      $ ("#" + ID). Resizable ({resize:function () {jsplumb.repainteverything ()); }, Stop:function () {JspluMb.repainteverything ();
      Oinitelement.sendproprequest ("Dto_tm_plant", $ (this));
    }
    });
  return ID;

 };

The point is to take a look at this sentence:

Jsplumb.addendpoint (ID, {anchors: "Rightmiddle"}, Hollowcircle);
The Addendpoint method inside the Jsplumb is invoked, the first parameter represents the ID of the page label, and the first indicates the position of the line point (Rightmiddle, Leftmiddle, Topcenter, Bottomcenter four options); The third parameter represents the style of the point and the style of the attachment. Without calling the Addendpoint method sequentially, the element will have one more line of nodes above it. For the meaning of each parameter in Hollowcircle, you can view the API.

There is one more place to see:

Jsplumb.repainteverything ();
the literal meaning can probably know what this sentence is to do, fix all. When you drag an element in the middle area, the node does not move along with the element without this phrase. After that, the node will follow the label to move. At this point, the most basic jsplumb connection is completed.

The above is the entire content of this article, I hope to help you learn to master the flow chart of the core technology Jsplumb.