The core technology of the structure flowchart in JS Jsplumb (2) _javascript skill

Preface: The core technology of the structure flowchart in JS is described in this paper, the jsplumb of the Jsplumb in the browser and the simple Jsplumb code example. This article is going to take a look at the code descriptions for each effect.

Set the style and color effect code example for a line
The approximate effect is as shown:

These effects look very simple, so how do we use code to implement it? As we said in the previous chapter, the line style of the jsplumb is determined by some attributes of the point, so we can change the line style dynamically by setting the style of the point. Look at the code:

First, let's look at the connection type of the Select

 <div id= "Btn_linetype" class= "divmenubtn btn-default btn" >
  connection Type: <select id= "Sel_linetype"
width:80px;height:20px ">
<option value=" 2 "> Line </option>
<option value=" 1 "> Polyline </ option>
<option value= "3" > Curve </option>
</select>
</div>

Registers a select Change event when the page is initialized

Global Hollow Circle Endpoint style setting var hollowcircle = {dragoptions: {cursor: ' pointer ', zindex:2000}, endpoint: [' Dot ', {radius:7} 
    ,//End shape connectorstyle:connectorpaintstyle,//connector color, size style Connectorhoverstyle:connectorhoverstyle, PaintStyle: { Strokestyle: "#1e8151", FillStyle: "Transparent", Radius:5, Linewidth:2},//Endpoint color style//anchor: " Autodefault ", issource:true,//Can be dragged (as the starting line) connector: [" Straight ", {stub: [0, 0], gap:10, Cornerradius:5, Alwa Ysrespectstubs:true}],//connector style type has [Bezier],[flowchart],[statemachine],[straight] istarget:true,//whether can be placed (line end) m

Axconnections:-1,//Set connection point can be connected to a few lines connectoroverlays: [["Arrow", {width:10, length:10, Location:1}]]};
    After page initialization is completed $ (the change event of the function () {//Line style Drop-down box $ ("#sel_linetype"). Change (function () {var strlinetype = "";
    var strlinecolor = "";
      Sets the style and sample color if ($ (this). val () = = "1") {Strlinetype = "Flowchart") for the node of the newly added element.
 Strlinecolor = "Red";     Hollowcircle.connector = ["Flowchart", {stub: [0, 0], gap:10, Cornerradius:5, alwaysrespectstubs:true}];
      //The style and color of the polyline else if ($ (this). val () = = "2") {Strlinetype = "Straight";
      Strlinecolor = "green";
    Hollowcircle.connector = ["Straight", {stub: [0, 0], gap:10, Cornerradius:5, alwaysrespectstubs:true}];
      }//Curve style and color else if ($ (this). val () = = "3") {Strlinetype = "Bézier";
      Strlinecolor = "Orange";
    Hollowcircle.connector = ["Bézier", {stub: [0, 0], gap:10, Cornerradius:5, alwaysrespectstubs:true}];
    //sets the line style for all existing connection points var Arrnode = $ ("#divCenter"). Find (". Node");
      for (var i = 0; i < arrnode.length i++) {var arrendpoints = jsplumb.getendpoints ($ (arrnode[i)). attr ("id");
      if (arrendpoints = = Undefined | | | arrendpoints = NULL) {return;
      var oconnector = Arrendpoints[0].connector;
   if (Oconnector = = NULL | | oconnector = = undefined) {return;   } oconnector[0] = Strlinetype;
      var oconnectstyle = Arrendpoints[0].connectorstyle;
      if (Oconnectstyle = = NULL | | oconnectstyle = = undefined) {return;
    } Oconnectstyle.strokestyle = Strlinecolor;
}
  });
 });

In fact, there are a few lines of code, set the line style that already exists and will be dragged to the endpoint above the interface.
Two, select all, select all Drag effect code example
You can select elements, bulk drag elements and lines, the approximate effect:

Look at the implementation code:
1, the initialization of the time registration can be selected

$ (function () {
  var oregionselect = new Regionselect ({
    region: ' #divCenter div.node ',
    selectedclass: ' Seled ',
    parentid: "Divcenter"
  });
  Oregionselect.select ();
});

2, select the relevant methods

var _selectedregions = [];

var Selprop;
  function Regionselect (selregionprop) {//selprop = Selregionprop;
  This.regions = [];
  This.selprop = Selregionprop; This.
  Initregions (Selregionprop);
  This.selectedclass = selregionprop["Selectedclass"];
  This.selectedregion = [];
  This.selectdiv = null;
  This.startx = null;
  This.starty = null;
This.parentid = selregionprop["ParentID"];
  } RegionSelect.prototype.InitRegions = function () {var _self = this;
  _self.regions = []; var _regions = Document.getelementsbyselector (_self.selprop["region");//$ ("#divCenter > Node");//var bselect = tr
  Ue if (_regions && _regions.length > 0) {for (var i = 0; i < _regions.length; i++) {_regions[i].onm
        Ousedown = function () {bselect = false; var evt = window.event | |
        Arguments[0]; if (!evt.shiftkey &&!evt.ctrlkey) {if ($.inarray (this, _selectedregions) = = 1) {//Empty All Select Style _self.Clearselections (_regions);
            This.classname + = "" + _self.selectedclass;
            Empty the selected array and add the elements in the current select _selectedregions = [];
          _selectedregions.push (this); } else {if (this.className.indexOf (_self.selectedclass) = = 1) {This.classname + = "" +
            _self.selectedclass;
          _selectedregions.push (this);
            else {this.classname = This.className.replaceAll (_self.selectedclass, "");
          _selectedregions.remove (this);
      } cleareventbubble (EVT);
    } this.regions.push (_regions[i]);
    } if (bselect) {//empty all Select Styles _self.clearselections (_regions);
  Empty the selected array and add the elements in the current select _selectedregions = [];
  } RegionSelect.prototype.select = function () {var _self = this;
  var sdivid = _self.parentid;
  var intmouseposition = [0, 0];
  var intoriginalposition = [0, 0]; var parentwidth = parseint (document.gEtelementbyid (Sdivid). Parentelement.offsetwidth);
  var parentheight = parseint (document.getElementById (sdivid). Parentelement.offsetheight);
    Addevent ("MouseDown", function () {var evt = window.event | | arguments[0]; var ButtonType = Evt.buttons | |
    Evt.button;
    if (evt.target!= undefined) {if (evt.target.id!== sdivid) return;
    } if (evt.srcelement!= undefined) {if (evt.srcElement.id!== sdivid) return;
    } if (evt.buttons = = undefined && buttontype = 0) {_self.onbeforeselect (evt, Sdivid);
    } if (ButtonType = = 1) {_self.onbeforeselect (evt, Sdivid);
      } if (ButtonType = = 2) {intmouseposition = [Evt.clientx, Evt.clienty];
      var movx = parseint (GetStyle (document.getElementById (Sdivid), "left"));
      var Movy = parseint (GetStyle (document.getElementById (Sdivid), "top");
      Intoriginalposition = [Movx, Movy];
    document.getElementById (sdivid). Style.cursor = "Move"; } cleareventbubble (EVT);

  }, document);
    Addevent ("MouseMove", function () {var evt = window.event | | arguments[0];
    if (evt.target.id!== sdivid) return; var ButtonType = Evt.buttons | |
    Evt.button;
    if (evt.buttons = = undefined && buttontype = 0) {_self.onselect (evt, Sdivid);
    } if (ButtonType = = 1) {_self.onselect (evt, Sdivid);
      } if (ButtonType = = 2) {var newx = intoriginalposition[0] + evt.clientx-intmouseposition[0];
      var newy = intoriginalposition[1] + evt.clienty-intmouseposition[1];
      if (newx >= 0) {newx = 0;
      } if (newy >= 0) {newy = 0;
      } $ ("#" + sdivid). CSS ("left", newx + "px");
      $ ("#" + sdivid). CSS ("top", Newy + "px");
      $ ("#" + sdivid). CSS ("width", (parentwidth-newx) + "px");

    $ ("#" + sdivid). CSS ("height", (parentheight-newy) + "px");
  } cleareventbubble (EVT);

  }, document); Addevent ("MouseUp", function () {var evt = window.event | | argumEnts[0]; var ButtonType = Evt.buttons | |
    Evt.button; if (evt.buttons = = undefined && buttontype = 0) {} if (ButtonType = = 1) {} Document.geteleme
      Ntbyid (sdivid). Style.cursor = "Default";
  _self.onend ();
}, document);
  } RegionSelect.prototype.onBeforeSelect = function (evt, sdivid) {//Create simulation selection box var _self = this; _self.
  Initregions (_self.selprop);
    if (!document.getelementbyid ("Selcontainer")) {This.selectdiv = document.createelement ("div"); This.selectDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px; border:1px dashed #0099FF; Background-color: #C3D5ED; Z-index:1000;filter:alpha (opacity:60); Opacity:0.6;display:
    none; ";
    This.selectDiv.id = "Selcontainer";
  document.getElementById (Sdivid). appendchild (This.selectdiv);
  else {this.selectdiv = document.getElementById ("Selcontainer");
  } This.startx = Posxy (evt, Sdivid). x;
  This.starty = Posxy (evt, sdivid). Y; This.isseLect = true;
  } RegionSelect.prototype.onSelect = function (evt, sdivid) {var self = this;

    if (self.isselect) {if (Self.selectDiv.style.display = = "None") Self.selectDiv.style.display = "";
    var posx = Posxy (evt, Sdivid). x;
    var poxy = Posxy (evt, sdivid). Y;
    Self.selectDiv.style.left = Math.min (Posx, This.startx) + "px";
    Self.selectDiv.style.top = Math.min (POxy, This.starty) + "px";
    Self.selectDiv.style.width = Math.Abs (posx-this.startx) + "px";

    Self.selectDiv.style.height = Math.Abs (poxy-this.starty) + "px";
    var regionlist = self.regions; for (var i = 0; i < regionlist.length i++) {if (self.selectDiv.parentNode.id!== regionlist[i].parentnode.id) c
      Ontinue;
      var r = regionlist[i], sr = self.innerregion (Self.selectdiv, R); if (SR && r.classname.indexof (self.selectedclass) = = 1) {r.classname = R.classname + "" + self.selected
        Class;
      _selectedregions.push (R); else if (!SR && R.CLASsname.indexof (Self.selectedclass)!=-1) {r.classname = R.classname.replaceall (Self.selectedclass, "");
      _selectedregions.remove (R);
  }}} RegionSelect.prototype.onEnd = function () {var self = this;
  if (self.selectdiv) {self.selectDiv.style.display = "none";
  } This.isselect = false;
_selectedregions = this.selectedregion; //Determine if an area is within the selection RegionSelect.prototype.innerRegion = function (seldiv, region) {var s_top = parseint (seldiv.style.t
  OP);
  var s_left = parseint (selDiv.style.left);
  var s_right = s_left + parseint (seldiv.offsetwidth);

  var s_bottom = s_top + parseint (seldiv.offsetheight);
  var r_top = parseint (region.offsettop);
  var r_left = parseint (region.offsetleft);
  var r_right = r_left + parseint (region.offsetwidth);

  var r_bottom = r_top + parseint (region.offsetheight);
  var t = Math.max (s_top, r_top);
  var r = math.min (S_right, r_right);
  var B = math.min (S_bottom, R_bottom); var L = Math.max (S_left, R_leFT);
  if (B > t + 5 && R > L + 5) {return region;
  else {return null; } RegionSelect.prototype.clearSelections = function (regions) {for (var i = 0; i < regions.length; i++) {RE
  Gions[i].classname = Regions[i].classname.replaceall (This.selectedclass, "");

} function Getselectedregions () {return _selectedregions;} /*--------------------------------------Area selection method End--------------------------------------------/function
  Showseldiv () {var selinfo = "";
  var arr = getselectedregions ();
  for (var i = 0; i < arr.length i++) {selinfo + = arr[i].innerhtml + "\ n";

Alert ("Select" + Arr.length + "files, respectively: \ n" + selinfo);
  function Moveselectdiv (event, Ui,id) {var arr = getselectedregions ();
  var imoveleft = Ui.position.left-ui.originalposition.left;

  var imovetop = ui.position.top-ui.originalposition.top;

    for (var i = 0; i < arr.length i++) {//if (arr[i].id = = ID) continue; if (Arr[i].parentnode. ID!== document.getElementById (ID). parentnode.id) Continue;
    var ileft = parseint ($ (arr[i)). attr ("Bleft"));
    var itop = parseint ($ (arr[i)). attr ("Btop"));
    $ (arr[i]). CSS ("Left", (ILeft + imoveleft) + "px");
  $ (arr[i]). CSS ("Top", (Itop + imovetop) + "px");
  } function Startmove () {var arr = getselectedregions ();
    for (var i = 0; i < Arr.length i++) {$ (arr[i]). attr ("Bleft", $ (arr[i)). Position ().
  $ (Arr[i]). attr ("Btop", $ (arr[i)). Position (). top);

 }
}

Three, align, rotate code example

Left-aligned function selectalignleft () {var arr = getselectedregions ();
  var ileft = 0;

  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue; if ($ (arr[i]). Position (). left<ileft| |
    ileft===0) {ILeft = $ (arr[i]). Position (). Left;
    for (var j = 0 J < Arr.length; J + +) {if (id!== arr[j].parentnode.id) continue;
  $ (arr[j]). CSS ("left", ILeft + "px");
} jsplumb.repainteverything ();
  The//Center alignment function Selectaligncenter () {var arr = getselectedregions ();
  var ileft = 0;

  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue; if ($ (arr[i]). Position (). Left < ILeft | | ileft = = 0) {ILeft = $ (arr[i]). Position ()-left + parseint (getstyle
    [i], "width")/2; for (var j = 0 J < Arr.length; J + +) {if (id!== arr[j].parentnode.id) cOntinue;
  $ (arr[j]). CSS ("Left", (Ileft-parseint (GetStyle (arr[j), "width")/2) + "px");
} jsplumb.repainteverything ();
  }//Right align function selectalignright () {var arr = getselectedregions ();
  var ileft = 0;

  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue; if ($ (arr[i]). Position (). Left + parseint (GetStyle (arr[i), "width") > ILeft | | ileft = 0) {ILeft = $ (arr[i]). P
    Osition (). Left + parseint (GetStyle (arr[i), "width");
    for (var j = 0 J < Arr.length; J + +) {if (id!== arr[j].parentnode.id) continue;
  $ (arr[j]). CSS ("Left", (Ileft-parseint (GetStyle (arr[j), "width")) + "px");
} jsplumb.repainteverything ();
  }//Up-aligned function selectaligntop () {var arr = getselectedregions ();
  var itop = 0;

  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id; if (ID!== arr[i].parentnode.id)Continue
    if ($ (arr[i]). Position (). Top < Itop | | itop = = 0) {itop = $ (arr[i]). Position ().
    for (var j = 0 J < Arr.length; J + +) {if (id!== arr[j].parentnode.id) continue;
  $ (arr[j]). CSS ("top", Itop + "px");
} jsplumb.repainteverything ();
  ///Vertical Center function Selectalignmiddle () {var arr = getselectedregions ();
  var itop = 0;

  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue; if ($ (arr[i]). Position (). Top + parseint (GetStyle (arr[i), "height")/2 < Itop | | itop = = 0) {itop = $ (arr[i]).
    Position (). Top + parseint (GetStyle (arr[i), "height")/2;
    for (var j = 0 J < Arr.length; J + +) {if (id!== arr[j].parentnode.id) continue;
  $ (arr[j]). CSS ("Top", (Itop-parseint (GetStyle (arr[j), "height")/2) + "px");
} jsplumb.repainteverything (); The//below alignment function Selectalignbottom () {var arr = getselectedRegions ();
  var itop = 0;

  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue; if ($ (arr[i]). Position (). Top + parseint (GetStyle (arr[i), "height") > Itop | | itop = = 0) {itop = $ (Arr[i]). posi
    tion (). Top + parseint (GetStyle (arr[i), "height");
    for (var j = 0 J < Arr.length; J + +) {if (id!== arr[j].parentnode.id) continue;
  $ (arr[j]). CSS ("Top", (Itop-parseint (GetStyle (arr[j), "height")) + "px");
} jsplumb.repainteverything ();
  }//Up and down function selectupcolse () {var arr = getselectedregions ();
  var itop = 0;
  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue;
    if (Itop = = 0) Itop = $ (arr[i]). Position (). Top;
    $ (arr[i]). CSS ("top", Itop + "px");
  Itop + + parseint (GetStyle (arr[i), "height");
} jsplumb.repainteverything (); }//Left/RightThe function Selectleftcolse () {var arr = getselectedregions ();
  var ileft = 0;
  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue;
    if (ILeft = = 0) ILeft = $ (arr[i]). Position (). Left;
    $ (arr[i]). CSS ("left", ILeft + "px");
  ILeft + + parseint (GetStyle (arr[i), "width");

} jsplumb.repainteverything ();
  }//With high function selectsameheight () {var arr = getselectedregions ();
  var iheigth = 0;
  var id = "";
    for (var i = 0; i < arr.length i++) {if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue;
    if (Iheigth = = 0) Iheigth = parseint (GetStyle (arr[i), "height"));
  $ (arr[i]). CSS ("height", iheigth+ "px");
} jsplumb.repainteverything ();
  }///same width function selectsamewidth () {var arr = getselectedregions ();
  var iwidth = 0;
  var id = ""; for (var i = 0; i < arr.length i++) {if (id = = "") id = Arr[i].parentnoDe.id;
    if (ID!== arr[i].parentnode.id) continue;
    if (iwidth = = 0) iwidth = parseint (GetStyle (arr[i), "width");
  $ (arr[i]). CSS ("width", iwidth + "px");

} jsplumb.repainteverything ();
  }//Rotate function selectclockwise (index) {var arr = getselectedregions ();
  var iwidth = 0;
  var id = "";
    for (var i = 0; i < arr.length i++) {//if (id = = "") id = arr[i].parentnode.id;
    if (ID!== arr[i].parentnode.id) continue;
    var sindex= arr[i].style.transform.replace ("Rotate", ""). Replace ("deg)", "");
    var inum = 0;
    if (sindex) Inum = parseint (Sindex);

    $ (arr[i]). CSS ("transform", "Rotate (" + (Inum + index)%360 + "deg");
  var points = jsplumb.getendpoints (arr[i]);

} jsplumb.repainteverything ();
  //Delete selected function Deleteselect () {var arr = getselectedregions ();
    for (var i = 0; i < arr.length i++) {jsplumb.remove (arr[i],true);
    var points = jsplumb.getendpoints (arr[i]); for (var j = 0; J < Points.length; J + +) {//Jsplumb.deleteendpoint (Points[j]);
    }//arr[i].parentnode.removechild (Arr[i]);

} jsplumb.repainteverything (); } function GetStyle (obj, attr) {if (Obj.currentstyle) {return obj.currentstyle[attr];///only applies to IE} else {r  Eturn getComputedStyle (obj, false) [attr]; Applies only to Ff,chrome,safa} return obj.style[attr];

 I test in IE and FF no use, chrome useful}

The code may be a bit messy and ready to be sorted. There are Bo friends on the chapter I want to go through the source code, this time out a primary version, hoping to help you better learn the core technology flow chart jsplumb.