JS Component Series--jsplumb connection and related effect detailed

Preface: Before the project used in the Web inside the drag-and-drop flowchart technology Jsplumb, in fact, really not difficult, but the project inside with some HTML-like flash effect, feel good, in this share.

JSPLUMB Official website: https://jsplumbtoolkit.com

github:https://github.com/sporritt/jsplumb/

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

2, the connection type can be customized: this is defined as a line, a polyline, a curve. The actual project according to the business we define as the sub-assembly line, the sub-assembly line, the final assembly lines, etc.

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

4. Align the selected elements to the left.

5. Center alignment of selected elements

6. Align Right

7, the upper alignment

8. Vertical Center Alignment

9, the next alignment

10. Move up and down according to the first selected element

11, according to the first selected element left and right closer

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

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

14, the selected elements clockwise rotation, click once rotated 45 degrees

15. Turn the selected element counterclockwise.

16. Select the unified delete element and the connection 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. No way, the leadership demands, we have to do.

Second, the code detailed

Here the effect is more, may be divided into several articles to introduce. This article still looks at the core technology of constructing flowchart: Jsplumb.

1. Overview

As for the contents of Jsplumb, there are many friends in the garden who have done the sharing and have written good blog posts. Here's a simple explanation. Jsplumb is a powerful JavaScript connection library that connects elements in HTML with arrows, curves, lines, and more, and is suitable for developing diagrams, modeling tools, and more on the web. It also supports the Jquery+jquery UI, MooTools, and YUI3, which are three JavaScript frameworks that are very powerful. This project is also a combination of the most familiar with the jquery to explain. and also pay attention to is Jsplumb browser compatibility, JSPLUMB support IE 6, Firefox, Google and other browsers

2. Use

(1) Introduction of JS file

can go directly to the official web page to download the latest JS library, because jsplumb need jquery support, according to the internet, it is only compatible with jquery1.3.x and above version, and in the jquery UI 1.7.x, 1.8.x and 1.9.x test pass. So we need to download the higher-bit version of 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

With Jsplumb, it is important to note that the style of the Jsplumb line is determined by the point, that is, the style of the point contains the relevant attributes that specify what the line style should be when using this point to connect.

In our project, the model area on the left is the design area in the middle. Then, to create an element from the model area, 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 zone container.

<DivID= "Divcontentleftmenu">            <Divclass= "Sidebar-menu"ID= "Divsidebar">                <ahref= "#plantmodel"onclick= "Resize ()"class= "Nav-header Menu-first collapsed"Data-toggle= "Collapse">Factory model</a>                <ulID= "Plantmodel"class= "Nav nav-list collapse Menu-second">                </ul>                <ahref= "#artlinemodel"onclick= "Resize ()"class= "Nav-header Menu-first collapsed"Data-toggle= "Collapse">Process Segment Model</a>                <ulID= "Artlinemodel"class= "Nav nav-list collapse Menu-second">                    <Li>                        <ahref="#">                            <Divclass= "Node radius"ID= "Node4"DbType= "Dto_tm_art_line">                                <label>Section</label>                            </Div>                        </a>                    </Li>                    <Li>                        <ahref="#">                            <Divclass= "Node"ID= "Node5"DbType= "Dto_tm_uloc">                                <label>Station</label>                            </Div>                        </a>                    </Li>                </ul>            </Div>        </Div>        <DivID= "Divcenter"></Div>

JS Code:

First we define the global variables for the style of several points

//Basic Connection Line stylevarConnectorpaintstyle = {Strokestyle: "#1e8151", FillStyle:"Transparent", Radius:5, LineWidth:2};//the style of hovering the mouse over the connector linevarConnectorhoverstyle ={linewidth:3, Strokestyle:"#216477", Outlinewidth:2, OutlineColor:"White"};varEndpointhoverstyle ={fillStyle:"#216477", Strokestyle:"#216477"};//Hollow Circle End style settingsvarHollowcircle ={dragoptions: {cursor:' Pointer ', zindex:2000}, endpoint: ["Dot", {radius:7}],//the shape of the endpointConnectorstyle:connectorpaintstyle,//the color, size style of the connection lineConnectorhoverstyle:connectorhoverstyle, Paintstyle: {strokestyle:"#1e8151", FillStyle:"Transparent", Radius:5, LineWidth:2    },        //the color style of the endpoint    //anchor: "Autodefault",Issource:true,//Whether you can drag (as the starting point of the connection)Connector: ["Straight", {stub: [0, 0], gap:10, Cornerradius:5, Alwaysrespectstubs:true}],//the style of the connector line is [Bezier],[flowchart],[statemachine],[straight]Istarget:true,//whether it can be placed (end of connection)MaxConnections:-1,//set up connection points to connect up to a few linesConnectoroverlays: [["Arrow", {width:10, length:10, Location:1 }]]};

Then register the event after the page initialization is complete

$(function(){                //draggable event in the left area$ ("#divContentLeftMenu. Node"). draggable ({helper:"Clone", Scope:"Plant"                }); //Drop event in the middle drag zone$ ("#divCenter"). droppable ({scope:"Plant", Drop:function(event, UI) {//Create a factory model to a drop zoneCreatemodel (UI, $ ( This));　　　　　　　　}                });    }); 

//1. Create the model (the parameters are: Drop event UI, current container, ID, current style)
 function Createmodel(UI, selector) {//1.1 Adding an HTML model        varModelID = $ (ui.draggable). attr ("id"); I++; varid = modelid +i; varCur_css =ModelID; varType = $ (ui.helper). attr ("DbType"); $ (selector). Append (' <div class= ' node ' + cur_css + ' "id=" ' + ID + ' "dbtype=" ' + Type + ' "parentid=" ' + $ (selector). attr ("id") + ' "Oncl ick= "Oinitelement.getpropertiesbytype (\ ' + type + ' \ ', this)" ondblclick= "initstation (). Dbclick (\ ' + type + ' \ ', this) ' > ' + $ (ui.helper). HTML () + ' </div> '); varleft = parseint (Ui.offset.left-$ (selector). Offset (). left); vartop = parseint (Ui.offset.top-$ (selector). Offset (). top); $("#" + ID). CSS ("left", left). CSS ("Top", top); //Jsplumb.setcontainer ($ ("#divCenter"));        //1.2 Adding a connection pointJsplumb.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));            }        });        returnID; };

The point is to look at this sentence:

Jsplumb.addendpoint (ID, {anchors: "Rightmiddle"}, Hollowcircle);

Called the Addendpoint method inside the Jsplumb, the first parameter represents the ID of the page label, and the first represents the location of the connection point (Rightmiddle, Leftmiddle, Topcenter, bottomcenter four options) The third parameter represents the style of the points and the style of the lines. Do not call the Addendpoint method in turn, the element above will be one more connected node. You can view the API for the meaning of each parameter within the hollowcircle.

There is one more place to see:

Jsplumb.repainteverything ();

Look at the literal meaning probably can know what this sentence is doing, fix all. When dragging an element in the middle area, the node does not move along with the element without this sentence. Plus the node will follow the tag. At this point, the most basic jsplumb connection is completed.

JS Component Series--jsplumb connection and related effect detailed