Step by step jQuery flow designer plug-in goflow (with code), jquerygoflow

Step by step jQuery flow designer plug-in goflow (with code), jquerygoflow

After the process node can be added, connect to the draw node and the node, as shown below:

 

It is easy to fold the line of visio.

First, the connection types are divided into Z (line), N (line), And I (Line). Then, when the two nodes are crossed, determine the line to draw based on the location between the two nodes.

1. Node 2 is on the left of Node 1

2. Node 2 is on the right of Node 1

// Calculate the connection type between two nodes. calcLineType = function (n1, n2) {var x11 = n1.left, x12 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width; var y11 = n1.top, y12 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height; var x1m = (x11 + x12)/2, x2m = (x21 + x22)/2, y1m = (y11 + y12)/2, y2m = (y21 + y22)/2; if (x1m> = x22) {// Node 2 is on the left of Node 1 (X axis has an intersection) if (y11> y22) {// Node 2 is on the top left of Node 1 (Y axis has no intersection) return "N "; } Else if (y12 <y21) {// Node 2 returns "N";} else {// the Y axis has an intersection return (Math. abs (y1m-y2m) <20? "I": "Z") ;}} else {// Node 2 is on the right of Node 1 (with an intersection on the X axis) if (y11> y22) {// Node 2 is at the top right of Node 1 (the Y axis has no intersection) return (Math. abs (x1m-x2m) <20? "I": "N");} else if (y12 <y21) {// Node 2 returns (Math. abs (x1m-x2m) <20? "I": "N");} else {// the Y axis has an intersection return (Math. abs (y1m-y2m) <20? "I": "Z ");}}};

Currently, this is a simple implementation of connections. Which of the following friends is willing to help you achieve better performance.

Code: GoFlow_04.zip