bjquanjiang
/
DigitalScholl
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1676 Commitit
27 Branchit
925 MiB
 
 
 
 
 
 
Puu: a69f528220
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from 'a69f528220'
${ noResults }
DigitalScholl/Learun.Framework.Ultimate V7/Learun.Application.Web/Content/flow-ui/flow.js

1909 rivejä
93 KiB
Raaka Blame Historia 

  1. //定义一个区域图类：

  2. function GooFlow(bgDiv, property) {

  3.     if (navigator.userAgent.indexOf("MSIE 8.0") > 0 || navigator.userAgent.indexOf("MSIE 7.0") > 0 || navigator.userAgent.indexOf("MSIE 6.0") > 0)

  4.         GooFlow.prototype.useSVG = "";

  5.     else GooFlow.prototype.useSVG = "1";

  6.     //初始化区域图的对象

  7.     this.$id = bgDiv.attr("id");

  8.     this.$bgDiv = bgDiv;//最父框架的DIV

  9.     this.$bgDiv.addClass("GooFlow");

  10.     var width = (property.width || 800) - 2;

  11.     var height = (property.height || 500) - 2;

  12.     this.$bgDiv.css({ width: width + "px", height: height + "px" });

  13.     this.$tool = null;//左侧工具栏对象

  14.     this.$head = null;//顶部标签及工具栏按钮

  15.     this.$title = "newFlow_1";//流程图的名称

  16.     this.$nodeRemark = {};//每一种结点或按钮的说明文字,JSON格式,key为类名,value为用户自定义文字说明

  17.     this.$nowType = "cursor";//当前要绘制的对象类型

  18.     this.$lineData = {};

  19.     this.$lineCount = 0;

  20.     this.$nodeData = {};

  21.     this.$nodeCount = 0;

  22.     this.$areaData = {};

  23.     this.$areaCount = 0;

  24.     this.$lineDom = {};

  25.     this.$nodeDom = {};

  26.     this.$areaDom = {};

  27.     this.$max = property.initNum || 1;//计算默认ID值的起始SEQUENCE

  28.     this.$focus = "";//当前被选定的结点/转换线ID,如果没选中或者工作区被清空,则为""

  29.     this.$cursor = "default";//鼠标指针在工作区内的样式

  30.     this.$editable = false;//工作区是否可编辑

  31.     this.$deletedItem = {};//在流程图的编辑操作中被删除掉的元素ID集合,元素ID为KEY,元素类型(node,line.area)为VALUE

  32.     var headHeight = 0;

  33.     var tmp = "";

  34.     if (property.haveHead) {

  35.         tmp = "<div class='GooFlow_head'><label title='" + (property.initLabelText || "newFlow_1") + "'>" + (property.initLabelText || "newFlow_1") + "</label>";

  36.         for (var x = 0; x < property.headBtns.length; ++x) {

  37.             tmp += "<a  class='GooFlow_head_btn'><b class='ico_" + property.headBtns[x] + "'></b></a>"

  38.         }

  39.         tmp += "</div>";

  40.         this.$head = $(tmp);

  41.         this.$bgDiv.append(this.$head);

  42.         headHeight = 24;

  43.         //以下是当工具栏按钮被点击时触发的事件自定义(虚函数),格式为function(),因为可直接用THIS操作对象本身,不用传参；用户可自行重定义:

  44.         this.onBtnNewClick = null;//新建流程图按钮被点中

  45.         this.onBtnOpenClick = null;//打开流程图按钮定义

  46.         this.onBtnSaveClick = null;//保存流程图按钮定义

  47.         this.onFreshClick = null;//重载流程图按钮定义

  48.         if (property.headBtns)

  49.             this.$head.on("click", { inthis: this }, function (e) {

  50.                 if (!e) e = window.event;

  51.                 var tar = e.target;

  52.                 if (tar.tagName == "DIV" || tar.tagName == "SPAN") return;

  53.                 else if (tar.tagName == "a") tar = tar.childNode[0];

  54.                 var This = e.data.inthis;

  55.                 //定义顶部操作栏按钮的事件

  56.                 switch ($(tar).attr("class")) {

  57.                     case "ico_new": if (This.onBtnNewClick != null) This.onBtnNewClick(); break;

  58.                     case "ico_open": if (This.onBtnOpenClick != null) This.onBtnOpenClick(); break;

  59.                     case "ico_save": if (This.onBtnSaveClick != null) This.onBtnSaveClick(); break;

  60.                     case "ico_undo": This.undo(); break;

  61.                     case "ico_redo": This.redo(); break;

  62.                     case "ico_reload": if (This.onFreshClick != null) This.onFreshClick(); break;

  63.                 }

  64.             });

  65.     }

  66.     var toolWidth = 0;

  67.     if (property.haveTool) {

  68.         this.$bgDiv.append("<div class='GooFlow_tool'" + (property.haveHead ? "" : " style='margin-top:1px'") + "><div style='height:" + (height - headHeight - (property.haveHead ? 7 : 10)) + "px' class='GooFlow_tool_div'></div></div>");

  69.         this.$tool = this.$bgDiv.find(".GooFlow_tool div");

  70.         //未加代码：加入绘图工具按钮

  71.         this.$tool.append("<a  type='cursor' class='GooFlow_tool_btndown' id='" + this.$id + "_btn_cursor'><b class='ico_cursor'/></a><a  type='direct' class='GooFlow_tool_btn' id='" + this.$id + "_btn_direct'><b class='ico_direct'/></a>");

  72.         if (property.toolBtns && property.toolBtns.length > 0) {

  73.             tmp = "<span/>";

  74.             for (var i = 0; i < property.toolBtns.length; ++i) {

  75.                 tmp += "<a  type='" + property.toolBtns[i] + "' id='" + this.$id + "_btn_" + property.toolBtns[i].split(" ")[0] + "' class='GooFlow_tool_btn'><b class='ico_" + property.toolBtns[i] + "'/></a>";//加入自定义按钮

  76.             }

  77.             this.$tool.append(tmp);

  78.         }

  79.         //加入区域划分框工具开关按钮

  80.         if (property.haveGroup)

  81.             this.$tool.append("<span/><a  type='group' class='GooFlow_tool_btn' id='" + this.$id + "_btn_group'><b class='ico_group'/></a>");

  82.         toolWidth = 31;

  83.         this.$nowType = "cursor";

  84.         //绑定各个按钮的点击事件

  85.         this.$tool.on("click", { inthis: this }, function (e) {

  86.             if (!e) e = window.event;

  87.             var tar;

  88.             switch (e.target.tagName) {

  89.                 case "SPAN": return false;

  90.                 case "DIV": return false;

  91.                 case "B": tar = e.target.parentNode; break;

  92.                 case "A": tar = e.target;

  93.             };

  94.             var type = $(tar).attr("type");

  95.             e.data.inthis.switchToolBtn(type);

  96.             return false;

  97.         });

  98.         this.$editable = true;//只有具有工具栏时可编辑

  99.     }

  100.     width = width - toolWidth - 8;

  101.     height = height;

  102.     this.$bgDiv.append("<div class='GooFlow_work' style='width:" + (width - (property.haveTool == true?20:-8)) + "px;height:" + (height) + "px;" + (property.haveHead ? "" : "margin-top:0px") + "'></div>");

  103.     this.$workArea = $("<div class='GooFlow_work_inner' style='width:" + width * 3 + "px;height:" + height * 3 + "px'></div>")

  104. 		.attr({ "unselectable": "on", "onselectstart": 'return false', "onselect": 'document.selection.empty()' });

  105.     this.$bgDiv.children(".GooFlow_work").append(this.$workArea);

  106.     this.$draw = null;//画矢量线条的容器

  107.     this.initDraw("draw_" + this.$id, width, height);

  108.     this.$group = null;

  109.     if (property.haveGroup)

  110.         this.initGroup(width, height);

  111.     if (this.$editable) {

  112.         this.$workArea.on("click", { inthis: this }, function (e) {

  113.             if (!e) e = window.event;

  114.             if (!e.data.inthis.$editable) return;

  115.             var type = e.data.inthis.$nowType;

  116.             if (type == "cursor") {

  117.                 var t = $(e.target);

  118.                 var n = t.prop("tagName");

  119.                 if (n == "svg" || (n == "DIV" && t.prop("class").indexOf("GooFlow_work") > -1) || n == "LABEL") e.data.inthis.blurItem();

  120.                 return;

  121.             }

  122.             else if (type == "direct" || type == "group") return;

  123.             var X, Y;

  124.             var ev = mousePosition(e), t = getElCoordinate(this);

  125.             X = ev.x - t.left + this.parentNode.scrollLeft - 1;

  126.             Y = ev.y - t.top + this.parentNode.scrollTop - 1;

  127. 

  128.             var name = "新建节点" + e.data.inthis.$max;

  129.             var type = e.data.inthis.$nowType;

  130.             if (type == 'startround') {

  131.                 name = "开始";

  132.             }

  133.             if (type == 'endround') {

  134.                 name = "结束";

  135.             }

  136.             var executeadd = true;

  137.             var _nodeData = e.data.inthis.$nodeData;

  138.             $.each(_nodeData, function (i) {

  139.                 if (_nodeData[i].name == name) {

  140.                     alert(name + '节点不能重复');

  141.                     executeadd = false;

  142.                     return false;

  143.                 }

  144.             })

  145.             if (executeadd) {

  146.                 e.data.inthis.addNode(e.data.inthis.$id + "_node_" + e.data.inthis.$max, { name: name, left: X, top: Y, type: e.data.inthis.$nowType, css: '', img: '', });

  147.                 e.data.inthis.$max++;

  148.             }

  149.         });

  150.         //划线时用的绑定

  151.         this.$workArea.mousemove({ inthis: this }, function (e) {

  152.             if (e.data.inthis.$nowType != "direct") return;

  153.             var lineStart = $(this).data("lineStart");

  154.             if (!lineStart) return;

  155.             var ev = mousePosition(e), t = getElCoordinate(this);

  156.             var X, Y;

  157.             X = ev.x - t.left + this.parentNode.scrollLeft;

  158.             Y = ev.y - t.top + this.parentNode.scrollTop;

  159.             var line = document.getElementById("GooFlow_tmp_line");

  160.             if (GooFlow.prototype.useSVG != "") {

  161.                 line.childNodes[0].setAttribute("d", "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y);

  162.                 line.childNodes[1].setAttribute("d", "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y);

  163.                 if (line.childNodes[1].getAttribute("marker-end") == "url(\"#arrow2\")")

  164.                     line.childNodes[1].setAttribute("marker-end", "url(#arrow3)");

  165.                 else line.childNodes[1].setAttribute("marker-end", "url(#arrow2)");

  166.             }

  167.             else line.points.value = lineStart.x + "," + lineStart.y + " " + X + "," + Y;

  168.         });

  169.         this.$workArea.mouseup({ inthis: this }, function (e) {

  170.             if (e.data.inthis.$nowType != "direct") return;

  171.             $(this).css("cursor", "auto").removeData("lineStart");

  172.             var tmp = document.getElementById("GooFlow_tmp_line");

  173.             if (tmp) e.data.inthis.$draw.removeChild(tmp);

  174.         });

  175.         //为了结点而增加的一些集体delegate绑定

  176.         this.initWorkForNode();

  177.         //对结点进行移动或者RESIZE时用来显示的遮罩层

  178.         this.$ghost = $("<div class='rs_ghost'></div>").attr({ "unselectable": "on", "onselectstart": 'return false', "onselect": 'document.selection.empty()' });

  179.         this.$bgDiv.append(this.$ghost);

  180.         this.$textArea = $("<textarea></textarea>");

  181.         this.$bgDiv.append(this.$textArea);

  182.         this.$lineMove = $("<div class='GooFlow_line_move' style='display:none'></div>");//操作折线时的移动框

  183.         this.$workArea.append(this.$lineMove);

  184.         this.$lineMove.on("mousedown", { inthis: this }, function (e) {

  185.             if (e.button == 2) return false;

  186.             var lm = $(this);

  187.             lm.css({ "background-color": "#333" });

  188.             var This = e.data.inthis;

  189.             var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]);

  190.             var X, Y;

  191.             X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;

  192.             Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;

  193.             var p = This.$lineMove.position();

  194.             var vX = X - p.left, vY = Y - p.top;

  195.             var isMove = false;

  196.             document.onmousemove = function (e) {

  197.                 if (!e) e = window.event;

  198.                 var ev = mousePosition(e);

  199.                 var ps = This.$lineMove.position();

  200.                 X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;

  201.                 Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;

  202.                 if (This.$lineMove.data("type") == "lr") {

  203.                     X = X - vX;

  204.                     if (X < 0) X = 0;

  205.                     else if (X > This.$workArea.width())

  206.                         X = This.$workArea.width();

  207.                     This.$lineMove.css({ left: X + "px" });

  208.                 }

  209.                 else if (This.$lineMove.data("type") == "tb") {

  210.                     Y = Y - vY;

  211.                     if (Y < 0) Y = 0;

  212.                     else if (Y > This.$workArea.height())

  213.                         Y = This.$workArea.height();

  214.                     This.$lineMove.css({ top: Y + "px" });

  215.                 }

  216.                 isMove = true;

  217.             }

  218.             document.onmouseup = function (e) {

  219.                 if (isMove) {

  220.                     var p = This.$lineMove.position();

  221.                     if (This.$lineMove.data("type") == "lr")

  222.                         This.setLineM(This.$lineMove.data("tid"), p.left + 3);

  223.                     else if (This.$lineMove.data("type") == "tb")

  224.                         This.setLineM(This.$lineMove.data("tid"), p.top + 3);

  225.                 }

  226.                 This.$lineMove.css({ "background-color": "transparent" });

  227.                 if (This.$focus == This.$lineMove.data("tid")) {

  228.                     This.focusItem(This.$lineMove.data("tid"));

  229.                 }

  230.                 document.onmousemove = null;

  231.                 document.onmouseup = null;

  232.             }

  233.         });

  234.         this.$lineOper = $("<div class='GooFlow_line_oper' style='display:none'><b class='b_l1'></b><b class='b_l2'></b><b class='b_l3'></b><b class='b_x'></b></div>");//选定线时显示的操作框

  235.         this.$workArea.append(this.$lineOper);

  236.         this.$lineOper.on("click", { inthis: this }, function (e) {

  237.             if (!e) e = window.event;

  238.             if (e.target.tagName != "A" && e.target.tagName != "B") return;

  239.             var This = e.data.inthis;

  240.             var id = $(this).data("tid");

  241.             switch ($(e.target).attr("class")) {

  242.                 case "b_x":

  243.                     This.delLine(id);

  244.                     this.style.display = "none"; break;

  245.                 case "b_l1":

  246.                     This.setLineType(id, "lr"); break;

  247.                 case "b_l2":

  248.                     This.setLineType(id, "tb"); break;

  249.                 case "b_l3":

  250.                     This.setLineType(id, "sl"); break;

  251.                     break;

  252.             }

  253.         });

  254. 

  255.         //下面绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身

  256.         //当操作某个单元（结点/线/分组块）被添加时，触发的方法，返回FALSE可阻止添加事件的发生

  257.         //格式function(id，type,json)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json.

  258.         this.onItemAdd = null;

  259.         //当操作某个单元（结点/线/分组块）被删除时，触发的方法，返回FALSE可阻止删除事件的发生

  260.         //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值

  261.         this.onItemDel = null;

  262.         //当操作某个单元（结点/分组块）被移动时，触发的方法，返回FALSE可阻止移动事件的发生

  263.         //格式function(id，type,left,top)：id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值，线line不支持移动,left是新的左边距坐标，top是新的顶边距坐标

  264.         this.onItemMove = null;

  265.         //当操作某个单元（结点/线/分组块）被重命名时，触发的方法，返回FALSE可阻止重命名事件的发生

  266.         //格式function(id,name,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称

  267.         this.onItemRename = null;

  268.         //当操作某个单元（结点/线）被由不选中变成选中时，触发的方法，返回FALSE可阻止选中事件的发生

  269.         //格式function(id,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中

  270.         this.onItemFocus = null;

  271.         //当操作某个单元（结点/线）被由选中变成不选中时，触发的方法，返回FALSE可阻止取消选中事件的发生

  272.         //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中

  273.         this.onItemBlur = null;

  274.         //当操作某个单元（结点/分组块）被重定义大小或造型时，触发的方法，返回FALSE可阻止重定大小/造型事件的发生

  275.         //格式function(id，type,width,height)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值;width是新的宽度,height是新的高度

  276.         this.onItemResize = null;

  277.         //当移动某条折线中段的位置，触发的方法，返回FALSE可阻止重定大小/造型事件的发生

  278.         //格式function(id，M)：id是单元的唯一标识ID,M是中段的新X(或Y)的坐标

  279.         this.onLineMove = null;

  280.         //当变换某条连接线的类型，触发的方法，返回FALSE可阻止重定大小/造型事件的发生

  281.         //格式function(id，type)：id是单元的唯一标识ID,type是连接线的新类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线

  282.         this.onLineSetType = null;

  283.         //当用重色标注某个结点/转换线时触发的方法，返回FALSE可阻止重定大小/造型事件的发生

  284.         //格式function(id，type，mark)：id是单元的唯一标识ID,type是单元类型（"node"结点,"line"转换线），mark为布尔值,表示是要标注TRUE还是取消标注FALSE

  285.         this.onItemMark = null;

  286. 

  287.         if (property.useOperStack && this.$editable) {//如果要使用堆栈记录操作并提供“撤销/重做”的功能,只在编辑状态下有效

  288.             this.$undoStack = [];

  289.             this.$redoStack = [];

  290.             this.$isUndo = 0;

  291.             ///////////////以下是构造撤销操作/重做操作的方法

  292.             //为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存

  293.             this.pushOper = function (funcName, paras) {

  294.                 var len = this.$undoStack.length;

  295.                 if (this.$isUndo == 1) {

  296.                     this.$redoStack.push([funcName, paras]);

  297.                     this.$isUndo = false;

  298.                     if (this.$redoStack.length > 40) this.$redoStack.shift();

  299.                 } else {

  300.                     this.$undoStack.push([funcName, paras]);

  301.                     if (this.$undoStack.length > 40) this.$undoStack.shift();

  302.                     if (this.$isUndo == 0) {

  303.                         this.$redoStack.splice(0, this.$redoStack.length);

  304.                     }

  305.                     this.$isUndo = 0;

  306.                 }

  307.             };

  308.             //将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制，一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制；

  309.             //传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参,由JSON对象带入所有要传的信息；

  310.             //提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper

  311.             this.pushExternalOper = function (func, jsonPara) {

  312.                 this.pushOper("externalFunc", [func, jsonPara]);

  313.             };

  314.             //撤销上一步操作

  315.             this.undo = function () {

  316.                 if (this.$undoStack.length == 0) return;

  317.                 var tmp = this.$undoStack.pop();

  318.                 this.$isUndo = 1;

  319.                 if (tmp[0] == "externalFunc") {

  320.                     tmp[1][0](tmp[1][1]);

  321.                 }

  322.                 else {

  323.                     //传参的数量,最多支持6个.

  324.                     switch (tmp[1].length) {

  325.                         case 0: this[tmp[0]](); break;

  326.                         case 1: this[tmp[0]](tmp[1][0]); break;

  327.                         case 2: this[tmp[0]](tmp[1][0], tmp[1][1]); break;

  328.                         case 3: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]); break;

  329.                         case 4: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]); break;

  330.                         case 5: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]); break;

  331.                         case 6: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4], tmp[1][5]); break;

  332.                     }

  333.                 }

  334.             };

  335.             //重做最近一次被撤销的操作

  336.             this.redo = function () {

  337.                 if (this.$redoStack.length == 0) return;

  338.                 var tmp = this.$redoStack.pop();

  339.                 this.$isUndo = 2;

  340.                 if (tmp[0] == "externalFunc") {

  341.                     tmp[1][0](tmp[1][1]);

  342.                 }

  343.                 else {

  344.                     //传参的数量,最多支持6个.

  345.                     switch (tmp[1].length) {

  346.                         case 0: this[tmp[0]](); break;

  347.                         case 1: this[tmp[0]](tmp[1][0]); break;

  348.                         case 2: this[tmp[0]](tmp[1][0], tmp[1][1]); break;

  349.                         case 3: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]); break;

  350.                         case 4: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]); break;

  351.                         case 5: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]); break;

  352.                         case 6: this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4], tmp[1][5]); break;

  353.                     }

  354.                 }

  355.             };

  356.         }

  357.         $(document).keydown({ inthis: this }, function (e) {

  358.             //绑定键盘操作

  359.             var This = e.data.inthis;

  360.             if (This.$focus == "") return;

  361.             switch (e.keyCode) {

  362.                 case 46://删除

  363.                     This.delNode(This.$focus, true);

  364.                     This.delLine(This.$focus);

  365.                     break;

  366.             }

  367.         });

  368.     }

  369. }

  370. GooFlow.prototype = {

  371.     useSVG: "",

  372.     getSvgMarker: function (id, color) {

  373.         var m = document.createElementNS("http://www.w3.org/2000/svg", "marker");

  374.         m.setAttribute("id", id);

  375.         m.setAttribute("viewBox", "0 0 6 6");

  376.         m.setAttribute("refX", 5);

  377.         m.setAttribute("refY", 3);

  378.         m.setAttribute("markerUnits", "strokeWidth");

  379.         m.setAttribute("markerWidth", 6);

  380.         m.setAttribute("markerHeight", 6);

  381.         m.setAttribute("orient", "auto");

  382.         var path = document.createElementNS("http://www.w3.org/2000/svg", "path");

  383.         path.setAttribute("d", "M 0 0 L 6 3 L 0 6 z");

  384.         path.setAttribute("fill", color);

  385.         path.setAttribute("stroke-width", 0);

  386.         m.appendChild(path);

  387.         return m;

  388.     },

  389.     initDraw: function (id, width, height) {

  390.         var elem;

  391.         if (GooFlow.prototype.useSVG != "") {

  392.             this.$draw = document.createElementNS("http://www.w3.org/2000/svg", "svg");//可创建带有指定命名空间的元素节点

  393.             this.$workArea.prepend(this.$draw);

  394.             var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");

  395.             this.$draw.appendChild(defs);

  396.             defs.appendChild(GooFlow.prototype.getSvgMarker("arrow1", "gray"));

  397.             defs.appendChild(GooFlow.prototype.getSvgMarker("arrow2", "#ff3300"));

  398.             defs.appendChild(GooFlow.prototype.getSvgMarker("arrow3", "#ff3300"));

  399.         }

  400.         else {

  401.             this.$draw = document.createElement("v:group");

  402.             this.$draw.coordsize = width * 3 + "," + height * 3;

  403.             this.$workArea.prepend("<div class='GooFlow_work_vml' style='position:relative;width:" + width * 3 + "px;height:" + height * 3 + "px'></div>");

  404.             this.$workArea.children("div")[0].insertBefore(this.$draw, null);

  405.         }

  406.         this.$draw.id = id;

  407.         this.$draw.style.width = width * 3 + "px";

  408.         this.$draw.style.height = +height * 3 + "px";

  409.         //绑定连线的点击选中以及双击编辑事件

  410.         var tmpClk = null;

  411.         if (GooFlow.prototype.useSVG != "") tmpClk = "g";

  412.         else tmpClk = "PolyLine";

  413.         if (this.$editable) {

  414.             $(this.$draw).delegate(tmpClk, "click", { inthis: this }, function (e) {

  415.                 e.data.inthis.focusItem(this.id, true);

  416.             });

  417.             $(this.$draw).delegate(tmpClk, "dblclick", { inthis: this }, function (e) {

  418.                 var This = e.data.inthis;

  419.                 OpenLine(this.id, This);

  420.                 //var oldTxt, x, y, from, to;

  421.                 //var This = e.data.inthis;

  422.                 //if (GooFlow.prototype.useSVG != "") {

  423.                 //    oldTxt = this.childNodes[2].textContent;

  424.                 //    from = this.getAttribute("from").split(",");

  425.                 //    to = this.getAttribute("to").split(",");

  426.                 //} else {

  427.                 //    oldTxt = this.childNodes[1].innerHTML;

  428.                 //    var n = this.getAttribute("fromTo").split(",");

  429.                 //    from = [n[0], n[1]];

  430.                 //    to = [n[2], n[3]];

  431.                 //}

  432.                 //if (This.$lineData[this.id].type == "lr") {

  433.                 //    from[0] = This.$lineData[this.id].M;

  434.                 //    to[0] = from[0];

  435.                 //}

  436.                 //else if (This.$lineData[this.id].type == "tb") {

  437.                 //    from[1] = This.$lineData[this.id].M;

  438.                 //    to[1] = from[1];

  439.                 //}

  440.                 //x = (parseInt(from[0], 10) + parseInt(to[0], 10)) / 2 - 60;

  441.                 //y = (parseInt(from[1], 10) + parseInt(to[1], 10)) / 2 - 12;

  442.                 //var t = getElCoordinate(This.$workArea[0]);

  443.                 //This.$textArea.val(oldTxt).css({

  444.                 //    display: "block", width: 120, height: 14,

  445.                 //    left: t.left + x - This.$workArea[0].parentNode.scrollLeft,

  446.                 //    top: t.top + y - This.$workArea[0].parentNode.scrollTop

  447.                 //}).data("id", This.$focus).focus();

  448.                 //This.$workArea.parent().one("mousedown", function (e) {

  449.                 //    if (e.button == 2) return false;

  450.                 //    This.setName(This.$textArea.data("id"), This.$textArea.val(), "line");

  451.                 //    This.$textArea.val("").removeData("id").hide();

  452.                 //});

  453.             });

  454.         }

  455.     },

  456.     initGroup: function (width, height) {

  457.         this.$group = $("<div class='GooFlow_work_group' style='width:" + width * 3 + "px;height:" + height * 3 + "px'></div>");//存放背景区域的容器

  458.         this.$workArea.prepend(this.$group);

  459.         if (!this.$editable) return;

  460.         //区域划分框操作区的事件绑定

  461.         this.$group.on("mousedown", { inthis: this }, function (e) {//绑定RESIZE功能以及移动功能

  462.             if (e.button == 2) return false;

  463.             var This = e.data.inthis;

  464.             if (This.$nowType != "group") return;

  465.             if (This.$textArea.css("display") == "block") {

  466.                 This.setName(This.$textArea.data("id"), This.$textArea.val(), "area");

  467.                 This.$textArea.val("").removeData("id").hide();

  468.                 return false;

  469.             };

  470.             if (!e) e = window.event;

  471.             var cursor = $(e.target).css("cursor");

  472.             var id = e.target.parentNode;

  473.             switch (cursor) {

  474.                 case "nw-resize": id = id.parentNode; break;

  475.                 case "w-resize": id = id.parentNode; break;

  476.                 case "n-resize": id = id.parentNode; break;

  477.                 case "move": break;

  478.                 default: return;

  479.             }

  480.             id = id.id;

  481.             var hack = 1;

  482.             if (navigator.userAgent.indexOf("8.0") != -1) hack = 0;

  483.             var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]);

  484. 

  485.             var X, Y;

  486.             X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;

  487.             Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;

  488.             if (cursor != "move") {

  489.                 This.$ghost.css({

  490.                     display: "block",

  491.                     width: This.$areaData[id].width - 2 + "px", height: This.$areaData[id].height - 2 + "px",

  492.                     top: This.$areaData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + hack + "px",

  493.                     left: This.$areaData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + hack + "px", cursor: cursor

  494.                 });

  495.                 var vX = (This.$areaData[id].left + This.$areaData[id].width) - X;

  496.                 var vY = (This.$areaData[id].top + This.$areaData[id].height) - Y;

  497.             }

  498.             else {

  499.                 var vX = X - This.$areaData[id].left;

  500.                 var vY = Y - This.$areaData[id].top;

  501.             }

  502.             var isMove = false;

  503.             This.$ghost.css("cursor", cursor);

  504.             document.onmousemove = function (e) {

  505.                 if (!e) e = window.event;

  506.                 var ev = mousePosition(e);

  507.                 if (cursor != "move") {

  508.                     X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft - This.$areaData[id].left + vX;

  509.                     Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop - This.$areaData[id].top + vY;

  510.                     if (X < 200) X = 200;

  511.                     if (Y < 100) Y = 100;

  512.                     switch (cursor) {

  513.                         case "nw-resize": This.$ghost.css({ width: X - 2 + "px", height: Y - 2 + "px" }); break;

  514.                         case "w-resize": This.$ghost.css({ width: X - 2 + "px" }); break;

  515.                         case "n-resize": This.$ghost.css({ height: Y - 2 + "px" }); break;

  516.                     }

  517.                 }

  518.                 else {

  519.                     if (This.$ghost.css("display") == "none") {

  520.                         This.$ghost.css({

  521.                             display: "block",

  522.                             width: This.$areaData[id].width - 2 + "px", height: This.$areaData[id].height - 2 + "px",

  523.                             top: This.$areaData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + hack + "px",

  524.                             left: This.$areaData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + hack + "px", cursor: cursor

  525.                         });

  526.                     }

  527.                     X = ev.x - vX; Y = ev.y - vY;

  528.                     if (X < t.left - This.$workArea[0].parentNode.scrollLeft)

  529.                         X = t.left - This.$workArea[0].parentNode.scrollLeft;

  530.                     else if (X + This.$workArea[0].parentNode.scrollLeft + This.$areaData[id].width > t.left + This.$workArea.width())

  531.                         X = t.left + This.$workArea.width() - This.$workArea[0].parentNode.scrollLeft - This.$areaData[id].width;

  532.                     if (Y < t.top - This.$workArea[0].parentNode.scrollTop)

  533.                         Y = t.top - This.$workArea[0].parentNode.scrollTop;

  534.                     else if (Y + This.$workArea[0].parentNode.scrollTop + This.$areaData[id].height > t.top + This.$workArea.height())

  535.                         Y = t.top + This.$workArea.height() - This.$workArea[0].parentNode.scrollTop - This.$areaData[id].height;

  536.                     This.$ghost.css({ left: X + hack + "px", top: Y + hack + "px" });

  537.                 }

  538.                 isMove = true;

  539.             }

  540.             document.onmouseup = function (e) {

  541.                 This.$ghost.empty().hide();

  542.                 document.onmousemove = null;

  543.                 document.onmouseup = null;

  544.                 if (!isMove) return;

  545.                 if (cursor != "move")

  546.                     This.resizeArea(id, This.$ghost.outerWidth(), This.$ghost.outerHeight());

  547.                 else

  548.                     This.moveArea(id, X + This.$workArea[0].parentNode.scrollLeft - t.left, Y + This.$workArea[0].parentNode.scrollTop - t.top);

  549.                 return false;

  550.             }

  551.         });

  552.         //绑定修改文字说明功能

  553.         this.$group.on("dblclick", { inthis: this }, function (e) {

  554.             var This = e.data.inthis;

  555.             if (This.$nowType != "group") return;

  556.             if (!e) e = window.event;

  557.             if (e.target.tagName != "LABEL") return false;

  558.             var oldTxt = e.target.innerHTML;

  559.             var p = e.target.parentNode;

  560.             var x = parseInt(p.style.left, 10) + 18, y = parseInt(p.style.top, 10) + 1;

  561.             var t = getElCoordinate(This.$workArea[0]);

  562.             This.$textArea.val(oldTxt).css({

  563.                 display: "block", width: 100, height: 14,

  564.                 left: t.left + x - This.$workArea[0].parentNode.scrollLeft,

  565.                 top: t.top + y - This.$workArea[0].parentNode.scrollTop

  566.             }).data("id", p.id).focus();

  567.             This.$workArea.parent().one("mousedown", function (e) {

  568.                 if (e.button == 2) return false;

  569.                 if (This.$textArea.css("display") == "block") {

  570.                     This.setName(This.$textArea.data("id"), This.$textArea.val(), "area");

  571.                     This.$textArea.val("").removeData("id").hide();

  572.                 }

  573.             });

  574.             return false;

  575.         });

  576.         //绑定点击事件

  577.         this.$group.mouseup({ inthis: this }, function (e) {

  578. 

  579.             var This = e.data.inthis;

  580.             if (This.$nowType != "group") return;

  581.             if (!e) e = window.event;

  582.             switch ($(e.target).attr("class")) {

  583.                 case "rs_close": This.delArea(e.target.parentNode.parentNode.id); return false;//删除该分组区域

  584.                 case "bg": return;

  585.             }

  586.             switch (e.target.tagName) {

  587.                 case "LABEL": return false;

  588.                 case "B"://绑定变色功能

  589.                     var id = e.target.parentNode.id;

  590.                     switch (This.$areaData[id].color) {

  591.                         case "red": This.setAreaColor(id, "yellow"); break;

  592.                         case "yellow": This.setAreaColor(id, "blue"); break;

  593.                         case "blue": This.setAreaColor(id, "green"); break;

  594.                         case "green": This.setAreaColor(id, "red"); break;

  595.                     }

  596.                     return false;

  597.             }

  598.             if (e.data.inthis.$ghost.css("display") == "none") {

  599.                 var X, Y;

  600.                 var ev = mousePosition(e), t = getElCoordinate(this);

  601.                 X = ev.x - t.left + this.parentNode.parentNode.scrollLeft - 1;

  602.                 Y = ev.y - t.top + this.parentNode.parentNode.scrollTop - 1;

  603.                 var color = ["red", "yellow", "blue", "green"];

  604.                 e.data.inthis.addArea(e.data.inthis.$id + "_area_" + e.data.inthis.$max, { name: "area_" + e.data.inthis.$max, left: X, top: Y, color: color[e.data.inthis.$max % 4], width: 200, height: 100 });

  605.                 e.data.inthis.$max++;

  606.                 return false;

  607.             }

  608.         });

  609.     },

  610.     //每一种类型结点及其按钮的说明文字

  611.     setNodeRemarks: function (remark) {

  612.         if (this.$tool != null)

  613.         {

  614.             this.$tool.children("a").each(function () {

  615.                 this.title = remark[$(this).attr("id").split("btn_")[1]];

  616.             });

  617.             this.$nodeRemark = remark;

  618.         }

  619.     },

  620. 

  621.     //切换左边工具栏按钮,传参TYPE表示切换成哪种类型的按钮

  622.     switchToolBtn: function (type) {

  623.         this.$tool.children("#" + this.$id + "_btn_" + this.$nowType.split(" ")[0]).attr("class", "GooFlow_tool_btn");

  624.         if (this.$nowType == "group") {

  625.             this.$workArea.prepend(this.$group);

  626.             for (var key in this.$areaDom) this.$areaDom[key].addClass("lock").children("div:eq(1)").css("display", "none");

  627.         }

  628.         this.$nowType = type;

  629.         this.$tool.children("#" + this.$id + "_btn_" + type.split(" ")[0]).attr("class", "GooFlow_tool_btndown");

  630.         if (this.$nowType == "group") {

  631.             this.blurItem();

  632.             this.$workArea.append(this.$group);

  633.             for (var key in this.$areaDom) this.$areaDom[key].removeClass("lock").children("div:eq(1)").css("display", "");

  634.         }

  635.         if (this.$textArea.css("display") == "none") this.$textArea.removeData("id").val("").hide();

  636.     },

  637.     //增加一个流程结点,传参为一个JSON,有id,name,top,left,width,height,type(结点类型)等属性

  638.     addNode: function (id, json) {

  639.         if (this.onItemAdd != null && !this.onItemAdd(id, "node", json)) return;

  640.         if (this.$undoStack && this.$editable) {

  641.             this.pushOper("delNode", [id]);

  642.         }

  643.         var mark = json.type;

  644.         if (json.type != "startround" && json.type != "endround") {

  645.             if (!json.width || json.width < 86) json.width = 150;

  646.             if (!json.height || json.height < 24) json.height = 65;

  647.             if (!json.top || json.top < 0) json.top = 0;

  648.             if (!json.left || json.left < 0) json.left = 0;

  649.             var hack = 0;

  650.             if (navigator.userAgent.indexOf("8.0") != -1) hack = 2;

  651.             this.$nodeDom[id] = $("<div class='GooFlow_item " + mark + "' id='" + id + "' style='top:" + json.top + "px;left:" + json.left + "px'><table cellspacing='1' style='width:" + (json.width) + "px;height:" + (json.height) + "px;'><tr><td class='ico'><b class='ico_" + json.type + "'></b></td><td>" + json.name + "</td></tr></table><div style='display:none'><div class='rs_bottom'></div><div class='rs_right'></div><div class='rs_rb'></div><div class='rs_close'></div></div></div>");

  652.             if (json.type.indexOf(" mix") > -1) this.$nodeDom[id].addClass(mark);

  653.             //json.css = mark;

  654.             //json.img = mark;

  655.         }

  656.         else {

  657.             json.width = 24; json.height = 24;

  658.             var name = json.name;

  659.             if (json.type == 'startround') {

  660.                 name = "开始";

  661.             }

  662.             if (json.type == 'endround') {

  663.                 name = "结束";

  664.             }

  665.             this.$nodeDom[id] = $("<div class='GooFlow_item item_" + json.type + "' id='" + id + "' style='top:" + json.top + "px;left:" + json.left + "px'><table cellspacing='0'><tr><td class='ico'></td></tr></table><div  style='display:none'><div class='rs_close'></div></div><div class='span'>" + name + "</div></div>");

  666.         }

  667.         var ua = navigator.userAgent.toLowerCase();

  668.         if (ua.indexOf('msie') != -1 && ua.indexOf('8.0') != -1)

  669.             this.$nodeDom[id].css("filter", "progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)");

  670.         this.$workArea.append(this.$nodeDom[id]);

  671.         this.$nodeData[id] = json;

  672.         ++this.$nodeCount;

  673.         if (this.$editable) {

  674.             this.$nodeData[id].alt = true;

  675.             if (this.$deletedItem[id]) delete this.$deletedItem[id];//在回退删除操作时,去掉该元素的删除记录

  676.         }

  677.     },

  678.     initWorkForNode: function () {

  679.         //绑定点击事件

  680.         this.$workArea.delegate(".GooFlow_item", "click", { inthis: this }, function (e) {

  681.             e.data.inthis.focusItem(this.id, true);

  682.             $(this).removeClass("item_mark");

  683.             //if (!$(this).hasClass("item_startround")) {

  684.             //    LoadrightMenu("#" + this.id);

  685.             //}

  686.             //if (!$(this).hasClass("item_endround")) {

  687.             //    LoadrightMenu("#" + this.id);

  688.             //}

  689.         });

  690.         //绑定右击事件

  691.         this.$workArea.delegate(".GooFlow_item", "contextmenu", { inthis: this }, function (e) {

  692.             e.data.inthis.focusItem(this.id, true);

  693.             $(this).removeClass("item_mark");

  694.             return false;

  695.         });

  696.         //绑定用鼠标移动事件

  697.         this.$workArea.delegate(".ico", "mousedown", { inthis: this }, function (e) {

  698.             if (!e) e = window.event;

  699.             if (e.button == 2) return false;

  700.             var This = e.data.inthis;

  701.             if (This.$nowType == "direct") return;

  702.             var Dom = $(this).parents(".GooFlow_item");

  703.             var id = Dom.attr("id");

  704.             This.focusItem(id, true);

  705.             var hack = 1;

  706.             if (navigator.userAgent.indexOf("8.0") != -1) hack = 0;

  707.             var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]);

  708. 

  709.             Dom.children("table").clone().prependTo(This.$ghost);

  710.             var X, Y;

  711.             X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;

  712.             Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;

  713.             var vX = X - This.$nodeData[id].left, vY = Y - This.$nodeData[id].top;

  714.             var isMove = false;

  715.             document.onmousemove = function (e) {

  716.                 if (!e) e = window.event;

  717.                 var ev = mousePosition(e);

  718.                 if (X == ev.x - vX && Y == ev.y - vY) return false;

  719.                 X = ev.x - vX; Y = ev.y - vY;

  720. 

  721.                 if (isMove && This.$ghost.css("display") == "none") {

  722.                     This.$ghost.css({

  723.                         display: "block",

  724.                         width: $('#' + id).width() - 2 + "px", height: $('#' + id).height() - 2 + "px",

  725.                         top: This.$nodeData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + hack + "px",

  726.                         left: This.$nodeData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + hack + "px", cursor: "move"

  727.                     });

  728.                 }

  729. 

  730.                 if (X < t.left - This.$workArea[0].parentNode.scrollLeft)

  731.                     X = t.left - This.$workArea[0].parentNode.scrollLeft;

  732.                 else if (X + This.$workArea[0].parentNode.scrollLeft + This.$nodeData[id].width > t.left + This.$workArea.width())

  733.                     X = t.left + This.$workArea.width() - This.$workArea[0].parentNode.scrollLeft - This.$nodeData[id].width;

  734.                 if (Y < t.top - This.$workArea[0].parentNode.scrollTop)

  735.                     Y = t.top - This.$workArea[0].parentNode.scrollTop;

  736.                 else if (Y + This.$workArea[0].parentNode.scrollTop + This.$nodeData[id].height > t.top + This.$workArea.height())

  737.                     Y = t.top + This.$workArea.height() - This.$workArea[0].parentNode.scrollTop - This.$nodeData[id].height;

  738.                 This.$ghost.css({ left: X + hack + "px", top: Y + hack + "px" });

  739.                 isMove = true;

  740.             }

  741.             document.onmouseup = function (e) {

  742.                 if (isMove) This.moveNode(id, X + This.$workArea[0].parentNode.scrollLeft - t.left, Y + This.$workArea[0].parentNode.scrollTop - t.top);

  743.                 This.$ghost.empty().hide();

  744.                 document.onmousemove = null;

  745.                 document.onmouseup = null;

  746.             }

  747.         });

  748.         if (!this.$editable) return;

  749.         //绑定鼠标覆盖/移出事件

  750.         this.$workArea.delegate(".GooFlow_item", "mouseenter", { inthis: this }, function (e) {

  751.             if (e.data.inthis.$nowType != "direct") return;

  752.             $(this).addClass("item_mark");

  753.         });

  754.         this.$workArea.delegate(".GooFlow_item", "mouseleave", { inthis: this }, function (e) {

  755.             if (e.data.inthis.$nowType != "direct") return;

  756.             $(this).removeClass("item_mark");

  757.         });

  758.         //绑定连线时确定初始点

  759.         this.$workArea.delegate(".GooFlow_item", "mousedown", { inthis: this }, function (e) {

  760.             if (e.button == 2) return false;

  761.             var This = e.data.inthis;

  762.             if (This.$nowType != "direct") return;

  763.             var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]);

  764.             var X, Y;

  765.             X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;

  766.             Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;

  767.             This.$workArea.data("lineStart", { "x": X, "y": Y, "id": this.id }).css("cursor", "crosshair");

  768.             var line = GooFlow.prototype.drawLine("GooFlow_tmp_line", [X, Y], [X, Y], true, true);

  769.             This.$draw.appendChild(line);

  770.         });

  771.         //绑定连线时确定结束点

  772.         this.$workArea.delegate(".GooFlow_item", "mouseup", { inthis: this }, function (e) {

  773.             var This = e.data.inthis;

  774.             if (This.$nowType != "direct") return;

  775.             var lineStart = This.$workArea.data("lineStart");

  776.             if (lineStart) This.addLine(This.$id + "_line_" + This.$max, { from: lineStart.id, to: this.id, name: "" });

  777.             This.$max++;

  778.         });

  779.         //绑定双击编辑事件

  780.         this.$workArea.delegate(".GooFlow_item > .span", "dblclick", { inthis: this }, function (e) {

  781.             var This = e.data.inthis;

  782.             var type = $('.item_focus').hasClass('item_startround');

  783.             if (type) {

  784.                 OpenNode(This);

  785.             }

  786.             //var oldTxt = this.innerHTML;

  787.             //var This = e.data.inthis;

  788.             //var id = this.parentNode.id;

  789.             //var t = getElCoordinate(This.$workArea[0]);

  790.             //This.$textArea.val(oldTxt).css({

  791.             //    display: "block", height: $(this).height(), width: 100,

  792.             //    left: t.left + This.$nodeData[id].left - This.$workArea[0].parentNode.scrollLeft - 24,

  793.             //    top: t.top + This.$nodeData[id].top - This.$workArea[0].parentNode.scrollTop + 26

  794.             //})

  795.             //	.data("id", This.$focus).focus();

  796.             //This.$workArea.parent().one("mousedown", function (e) {

  797.             //    if (e.button == 2) return false;

  798.             //    This.setName(This.$textArea.data("id"), This.$textArea.val(), "node");

  799.             //    This.$textArea.val("").removeData("id").hide();

  800.             //});

  801.         });

  802.         //节点双击事件

  803.         this.$workArea.delegate(".ico + td", "dblclick", { inthis: this }, function (e) {

  804.             var This = e.data.inthis;

  805.             OpenNode(This);

  806.             //var oldTxt = this.innerHTML;

  807.             //var This = e.data.inthis;

  808.             //var id = $(this).parents(".GooFlow_item").attr("id");

  809.             //var t = getElCoordinate(This.$workArea[0]);

  810.             //This.$textArea.val(oldTxt).css({

  811.             //    display: "block", width: $(this).width() + 24, height: $(this).height(),

  812.             //    left: t.left + 24 + This.$nodeData[id].left - This.$workArea[0].parentNode.scrollLeft,

  813.             //    top: t.top + 2 + This.$nodeData[id].top - This.$workArea[0].parentNode.scrollTop

  814.             //})

  815.             //	.data("id", This.$focus).focus();

  816.             //This.$workArea.parent().one("mousedown", function (e) {

  817.             //    if (e.button == 2) return false;

  818.             //    This.setName(This.$textArea.data("id"), This.$textArea.val(), "node");

  819.             //    This.$textArea.val("").removeData("id").hide();

  820.             //});

  821.         });

  822.         //绑定结点的删除功能

  823.         this.$workArea.delegate(".rs_close", "click", { inthis: this }, function (e) {

  824.             if (!e) e = window.event;

  825.             e.data.inthis.delNode(e.data.inthis.$focus);

  826.             return false;

  827.         });

  828.         //绑定结点的RESIZE功能

  829.         this.$workArea.delegate(".GooFlow_item > div > div[class!=rs_close]", "mousedown", { inthis: this }, function (e) {

  830.             if (!e) e = window.event;

  831.             if (e.button == 2) return false;

  832.             var cursor = $(this).css("cursor");

  833.             if (cursor == "pointer") { return; }

  834.             var This = e.data.inthis;

  835.             var id = This.$focus;

  836.             This.switchToolBtn("cursor");

  837.             e.cancelBubble = true;

  838.             e.stopPropagation();

  839.             var hack = 1;

  840.             if (navigator.userAgent.indexOf("8.0") != -1) hack = 0;

  841.             var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]);

  842.             This.$ghost.css({

  843.                 display: "block",

  844.                 width: This.$nodeData[id].width - 2 + "px", height: This.$nodeData[id].height - 2 + "px",

  845.                 top: This.$nodeData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + hack + "px",

  846.                 left: This.$nodeData[id].left + t.left - This.$workArea[0].parentNode.scrollLeft + hack + "px", cursor: cursor

  847.             });

  848.             var X, Y;

  849.             X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft;

  850.             Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop;

  851.             var vX = (This.$nodeData[id].left + This.$nodeData[id].width) - X;

  852.             var vY = (This.$nodeData[id].top + This.$nodeData[id].height) - Y;

  853.             var isMove = false;

  854.             This.$ghost.css("cursor", cursor);

  855.             document.onmousemove = function (e) {

  856.                 if (!e) e = window.event;

  857.                 var ev = mousePosition(e);

  858.                 X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft - This.$nodeData[id].left + vX;

  859.                 Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop - This.$nodeData[id].top + vY;

  860.                 if (X < 86) X = 86;

  861.                 if (Y < 24) Y = 24;

  862.                 isMove = true;

  863.                 switch (cursor) {

  864.                     case "nw-resize": This.$ghost.css({ width: X - 2 + "px", height: Y - 2 + "px" }); break;

  865.                     case "w-resize": This.$ghost.css({ width: X - 2 + "px" }); break;

  866.                     case "n-resize": This.$ghost.css({ height: Y - 2 + "px" }); break;

  867.                 }

  868.             }

  869.             document.onmouseup = function (e) {

  870.                 This.$ghost.hide();

  871.                 if (!isMove) return;

  872.                 if (!e) e = window.event;

  873.                 This.resizeNode(id, This.$ghost.outerWidth(), This.$ghost.outerHeight());

  874.                 document.onmousemove = null;

  875.                 document.onmouseup = null;

  876.             }

  877.         });

  878.     },

  879.     //获取结点/连线/分组区域的详细信息

  880.     getItemInfo: function (id, type) {

  881.         switch (type) {

  882.             case "node": return this.$nodeData[id] || null;

  883.             case "line": return this.$lineData[id] || null;

  884.             case "area": return this.$areaData[id] || null;

  885.         }

  886.     },

  887.     //取消所有结点/连线被选定的状态

  888.     blurItem: function () {

  889.         if (this.$focus != "") {

  890.             var jq = $("#" + this.$focus);

  891.             if (jq.prop("tagName") == "DIV") {

  892.                 if (this.onItemBlur != null && !this.onItemBlur(id, "node")) return false;

  893.                 jq.removeClass("item_focus").children("div:eq(0)").css("display", "none");

  894.             }

  895.             else {

  896.                 if (this.onItemBlur != null && !this.onItemBlur(id, "line")) return false;

  897.                 if (GooFlow.prototype.useSVG != "") {

  898.                     if (!this.$lineData[this.$focus].marked) {

  899.                         jq[0].childNodes[1].setAttribute("stroke", "gray");

  900.                         jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow1)");

  901.                     }

  902.                 }

  903.                 else {

  904.                     if (!this.$lineData[this.$focus].marked) jq[0].strokeColor = "gray";

  905.                 }

  906.                 this.$lineMove.hide().removeData("type").removeData("tid");

  907.                 if (this.$editable) this.$lineOper.hide().removeData("tid");

  908.             }

  909.         }

  910.         this.$focus = "";

  911.         return true;

  912.     },

  913.     //选定某个结点/转换线 bool:TRUE决定了要触发选中事件，FALSE则不触发选中事件，多用在程序内部调用。

  914.     focusItem: function (id, bool) {

  915.         var jq = $("#" + id);

  916.         if (jq.length == 0) return;

  917.         if (!this.blurItem()) return;//先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行.

  918.         if (jq.prop("tagName") == "DIV") {

  919.             if (bool && this.onItemFocus != null && !this.onItemFocus(id, "node")) return;

  920.             jq.addClass("item_focus");

  921.             if (this.$editable) jq.children("div:eq(0)").css("display", "block");

  922.             this.$workArea.append(jq);

  923.         }

  924.         else {//如果是连接线

  925.             if (this.onItemFocus != null && !this.onItemFocus(id, "line")) return;

  926.             if (GooFlow.prototype.useSVG != "") {

  927.                 jq[0].childNodes[1].setAttribute("stroke", "#ff3300");

  928.                 jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow2)");

  929.             }

  930.             else jq[0].strokeColor = "#ff3300";

  931.             if (!this.$editable) return;

  932.             var x, y, from, to;

  933.             if (GooFlow.prototype.useSVG != "") {

  934.                 from = jq.attr("from").split(",");

  935.                 to = jq.attr("to").split(",");

  936.             } else {

  937.                 var n = jq[0].getAttribute("fromTo").split(",");

  938.                 from = [n[0], n[1]];

  939.                 to = [n[2], n[3]];

  940.             }

  941.             from[0] = parseInt(from[0], 10);

  942.             from[1] = parseInt(from[1], 10);

  943.             to[0] = parseInt(to[0], 10);

  944.             to[1] = parseInt(to[1], 10);

  945.             //var t=getElCoordinate(this.$workArea[0]);

  946.             if (this.$lineData[id].type == "lr") {

  947.                 from[0] = this.$lineData[id].M;

  948.                 to[0] = from[0];

  949. 

  950.                 this.$lineMove.css({

  951.                     width: "5px", height: (to[1] - from[1]) * (to[1] > from[1] ? 1 : -1) + "px",

  952.                     left: from[0] - 3 + "px",

  953.                     top: (to[1] > from[1] ? from[1] : to[1]) + 1 + "px",

  954.                     cursor: "e-resize", display: "block"

  955.                 }).data({ "type": "lr", "tid": id });

  956.             }

  957.             else if (this.$lineData[id].type == "tb") {

  958.                 from[1] = this.$lineData[id].M;

  959.                 to[1] = from[1];

  960.                 this.$lineMove.css({

  961.                     width: (to[0] - from[0]) * (to[0] > from[0] ? 1 : -1) + "px", height: "5px",

  962.                     left: (to[0] > from[0] ? from[0] : to[0]) + 1 + "px",

  963.                     top: from[1] - 3 + "px",

  964.                     cursor: "s-resize", display: "block"

  965.                 }).data({ "type": "tb", "tid": id });

  966.             }

  967.             x = (from[0] + to[0]) / 2 - 35;

  968.             y = (from[1] + to[1]) / 2 + 6;

  969.             this.$lineOper.css({ display: "block", left: x + "px", top: y + "px" }).data("tid", id);

  970.         }

  971.         this.$focus = id;

  972.         this.switchToolBtn("cursor");

  973.     },

  974.     //移动结点到一个新的位置

  975.     moveNode: function (id, left, top) {

  976.         if (!this.$nodeData[id]) return;

  977.         if (this.onItemMove != null && !this.onItemMove(id, "node", left, top)) return;

  978.         if (this.$undoStack) {

  979.             var paras = [id, this.$nodeData[id].left, this.$nodeData[id].top];

  980.             this.pushOper("moveNode", paras);

  981.         }

  982.         if (left < 0) left = 0;

  983.         if (top < 0) top = 0;

  984.         $("#" + id).css({ left: left + "px", top: top + "px" });

  985.         this.$nodeData[id].left = left;

  986.         this.$nodeData[id].top = top;

  987.         //重画转换线

  988.         this.resetLines(id, this.$nodeData[id]);

  989.         if (this.$editable) {

  990.             this.$nodeData[id].alt = true;

  991.         }

  992.     },

  993.     //设置结点/连线/分组区域的文字信息

  994.     setName: function (id, name, type,setinfo) {

  995.         var oldName;

  996.         if (type == "node") {//如果是结点

  997.             this.$nodeData[id].setInfo = setinfo;

  998.             if (!this.$nodeData[id])

  999.                 if (this.$nodeData[id].name == name)

  1000.                     if (this.onItemRename != null && !this.onItemRename(id, name, "node"))

  1001.                         oldName = this.$nodeData[id].name;

  1002.             this.$nodeData[id].name = name;

  1003.             if (this.$nodeData[id].type.indexOf("round") > 1) {

  1004.                 this.$nodeDom[id].children(".span").text(name);

  1005.             }

  1006.             else {

  1007.                 this.$nodeDom[id].find("td:eq(1)").text(name);

  1008.                 var hack = 0;

  1009.                 if (navigator.userAgent.indexOf("8.0") != -1) hack = 2;

  1010.                 var width = this.$nodeDom[id].outerWidth();

  1011.                 var height = this.$nodeDom[id].outerHeight();

  1012.                 this.$nodeDom[id].children("table").css({ width: width - 2 + "px", height: height - 2 + "px" });

  1013.                 this.$nodeData[id].width = width;

  1014.                 this.$nodeData[id].height = height;

  1015.             }

  1016.             if (this.$editable) {

  1017.                 this.$nodeData[id].alt = true;

  1018.             }

  1019.             //重画转换线

  1020.             this.resetLines(id, this.$nodeData[id]);

  1021.         }

  1022.         else if (type == "line") {//如果是线

  1023.             this.$lineData[id].setInfo = setinfo;

  1024.             if (!this.$lineData[id])

  1025.                 if (this.$lineData[id].name == name)

  1026.                     if (this.onItemRename != null && !this.onItemRename(id, name, "line"))

  1027.                         oldName = this.$lineData[id].name;

  1028.             this.$lineData[id].name = name;

  1029.             if (GooFlow.prototype.useSVG != "") {

  1030.                 this.$lineDom[id].childNodes[2].textContent = name;

  1031.             }

  1032.             else {

  1033.                 this.$lineDom[id].childNodes[1].innerHTML = name;

  1034.                 var n = this.$lineDom[id].getAttribute("fromTo").split(",");

  1035.                 var x;

  1036.                 if (this.$lineData[id].type != "lr") {

  1037.                     x = (n[2] - n[0]) / 2;

  1038.                 }

  1039.                 else {

  1040.                     var Min = n[2] > n[0] ? n[0] : n[2];

  1041.                     if (Min > this.$lineData[id].M) Min = this.$lineData[id].M;

  1042.                     x = this.$lineData[id].M - Min;

  1043.                 }

  1044.                 if (x < 0) x = x * -1;

  1045.                 this.$lineDom[id].childNodes[1].style.left = x - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4 + "px";

  1046.             }

  1047.             if (this.$editable) {

  1048.                 this.$lineData[id].alt = true;

  1049.             }

  1050.         }

  1051.         else if (type == "area") {//如果是分组区域

  1052.             if (!this.$areaData[id]) return;

  1053.             if (this.$areaData[id].name == name) return;

  1054.             if (this.onItemRename != null && !this.onItemRename(id, name, "area")) return;

  1055.             oldName = this.$areaData[id].name;

  1056.             this.$areaData[id].name = name;

  1057.             this.$areaDom[id].children("label").text(name);

  1058.             if (this.$editable) {

  1059.                 this.$areaData[id].alt = true;

  1060.             }

  1061.         }

  1062.         if (this.$undoStack) {

  1063.             var paras = [id, oldName, type];

  1064.             this.pushOper("setName", paras);

  1065.         }

  1066.     },

  1067.     //设置结点的尺寸,仅支持非开始/结束结点

  1068.     resizeNode: function (id, width, height) {

  1069.         if (!this.$nodeData[id]) return;

  1070.         if (this.onItemResize != null && !this.onItemResize(id, "node", width, height)) return;

  1071.         if (this.$nodeData[id].type == "start" || this.$nodeData[id].type == "end") return;

  1072.         if (this.$undoStack) {

  1073.             var paras = [id, this.$nodeData[id].width, this.$nodeData[id].height];

  1074.             this.pushOper("resizeNode", paras);

  1075.         }

  1076.         var hack = 0;

  1077.         if (navigator.userAgent.indexOf("8.0") != -1) hack = 2;

  1078.         this.$nodeDom[id].children("table").css({ width: width - 2 + "px", height: height - 2 + "px" });

  1079.         width = this.$nodeDom[id].outerWidth() - hack;

  1080.         height = this.$nodeDom[id].outerHeight() - hack;

  1081.         this.$nodeDom[id].children("table").css({ width: width - 2 + "px", height: height - 2 + "px" });

  1082.         this.$nodeData[id].width = width;

  1083.         this.$nodeData[id].height = height;

  1084.         if (this.$editable) {

  1085.             this.$nodeData[id].alt = true;

  1086.         }

  1087.         //重画转换线

  1088.         this.resetLines(id, this.$nodeData[id]);

  1089.     },

  1090.     //删除结点

  1091.     delNode: function (id) {

  1092.         if (!this.$nodeData[id]) return;

  1093.         if (this.onItemDel != null && !this.onItemDel(id, "node")) return;

  1094.         //先删除可能的连线

  1095.         for (var k in this.$lineData) {

  1096.             if (this.$lineData[k].from == id || this.$lineData[k].to == id) {

  1097.                 //this.$draw.removeChild(this.$lineDom[k]);

  1098.                 //delete this.$lineData[k];

  1099.                 //delete this.$lineDom[k];

  1100.                 this.delLine(k);

  1101.             }

  1102.         }

  1103.         //再删除结点本身

  1104.         if (this.$undoStack) {

  1105.             var paras = [id, this.$nodeData[id]];

  1106.             this.pushOper("addNode", paras);

  1107.         }

  1108.         delete this.$nodeData[id];

  1109.         this.$nodeDom[id].remove();

  1110.         delete this.$nodeDom[id];

  1111.         --this.$nodeCount;

  1112.         if (this.$focus == id) this.$focus = "";

  1113. 

  1114.         if (this.$editable) {

  1115.             //在回退新增操作时,如果节点ID以this.$id+"_node_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中

  1116.             if (id.indexOf(this.$id + "_node_") < 0)

  1117.                 this.$deletedItem[id] = "node";

  1118.         }

  1119.     },

  1120.     //设置流程图的名称

  1121.     setTitle: function (text) {

  1122.         this.$title = text;

  1123.         if (this.$head) this.$head.children("label").attr("title", text).text(text);

  1124.     },

  1125.     //载入一组数据

  1126.     loadData: function (data) {

  1127.         if (data == undefined)

  1128.         {

  1129.             data = "";

  1130.         }

  1131.         var t = this.$editable;

  1132.         this.$editable = false;

  1133.         if (data.title) this.setTitle(data.title);

  1134.         if (data.initNum) this.$max = data.initNum;

  1135.         for (var i in data.nodes)

  1136.             this.addNode(data.nodes[i].id, data.nodes[i]);

  1137.         for (var j in data.lines)

  1138.             this.addLine(data.lines[j].id, data.lines[j]);

  1139.         for (var k in data.areas)

  1140.             this.addArea(data.areas[k].id, data.areas[k]);

  1141.         this.$editable = t;

  1142.         this.$deletedItem = {};

  1143.     },

  1144.     //用AJAX方式，远程读取一组数据

  1145.     //参数para为JSON结构，与JQUERY中$.ajax()方法的传参一样

  1146.     loadDataAjax: function (para) {

  1147.         var This = this;

  1148.         $.ajax({

  1149.             type: para.type,

  1150.             url: para.url,

  1151.             dataType: "json",

  1152.             data: para.data,

  1153.             success: function (msg) {

  1154.                 if (para.dataFilter) para.dataFilter(msg, "json");

  1155.                 This.loadData(msg);

  1156.                 if (para.success) para.success(msg);

  1157.             },

  1158.             error: function (XMLHttpRequest, textStatus, errorThrown) {

  1159.                 if (para.error) para.error(textStatus, errorThrown);

  1160.             }

  1161.         })

  1162.     },

  1163.     //把画好的整个流程图导出到一个变量中(其实也可以直接访问GooFlow对象的$nodeData,$lineData,$areaData这三个JSON属性)

  1164.     exportData: function () {

  1165.         var ret = { title: this.$title, nodes: this.$nodeData, lines: this.$lineData, areas: this.$areaData, initNum: this.$max };

  1166. 

  1167.         var _nodeobject = [],_lineobject = [];

  1168.         for (var k1 in ret.nodes) {

  1169.             if (!ret.nodes[k1].marked) {

  1170.                 delete ret.nodes[k1]["marked"];

  1171.             }

  1172.             ret.nodes[k1]["id"] = k1;

  1173.             _nodeobject.push(ret.nodes[k1]);

  1174.         }

  1175.         ret.nodes = _nodeobject;

  1176.         for (var k2 in ret.lines) {

  1177.             if (!ret.lines[k2].marked) {

  1178.                 delete ret.lines[k2]["marked"];

  1179.             }

  1180.             ret.lines[k2]["id"] = k2;

  1181.             _lineobject.push(ret.lines[k2]);

  1182.         }

  1183.         ret.lines = _lineobject;

  1184.         return ret;

  1185.     },

  1186.     //只把本次编辑流程图中作了变更(包括增删改)的元素导出到一个变量中,以方便用户每次编辑载入的流程图后只获取变更过的数据

  1187.     exportAlter: function () {

  1188.         var ret = { nodes: {}, lines: {}, areas: {} };

  1189.         for (var k1 in this.$nodeData) {

  1190.             if (this.$nodeData[k1].alt) {

  1191.                 ret.nodes[k1] = this.$nodeData[k1];

  1192.             }

  1193.         }

  1194.         for (var k2 in this.$lineData) {

  1195.             if (this.$lineData[k2].alt) {

  1196.                 ret.lines[k2] = this.$lineData[k2];

  1197.             }

  1198.         }

  1199.         for (var k3 in this.$areaData) {

  1200.             if (this.$areaData[k3].alt) {

  1201.                 ret.areas[k3] = this.$areaData[k3];

  1202.             }

  1203.         }

  1204.         ret.deletedItem = this.$deletedItem;

  1205.         return ret;

  1206.     },

  1207.     //变更元素的ID,一般用于快速保存后,将后台返回新元素的ID更新到页面中;type为元素类型(节点,连线,区块)

  1208.     transNewId: function (oldId, newId, type) {

  1209.         var tmp;

  1210.         switch (type) {

  1211.             case "node":

  1212.                 if (this.$nodeData[oldId]) {

  1213.                     tmp = this.$nodeData[oldId];

  1214.                     delete this.$nodeData[oldId];

  1215.                     this.$nodeData[newId] = tmp;

  1216.                 }

  1217.                 break;

  1218.             case "line":

  1219.                 if (this.$lineData[oldId]) {

  1220.                     tmp = this.$lineData[oldId];

  1221.                     delete this.$lineData[oldId];

  1222.                     this.$lineData[newId] = tmp;

  1223.                 }

  1224.                 break;

  1225.             case "area":

  1226.                 if (this.$areaData[oldId]) {

  1227.                     tmp = this.$areaData[oldId];

  1228.                     delete this.$areaData[oldId];

  1229.                     this.$areaData[newId] = tmp;

  1230.                 }

  1231.                 break;

  1232.         }

  1233.     },

  1234.     //清空工作区及已载入的数据

  1235.     clearData: function () {

  1236.         for (var key in this.$nodeData) {

  1237.             this.delNode(key);

  1238.         }

  1239.         for (var key in this.$lineData) {

  1240.             this.delLine(key);

  1241.         }

  1242.         for (var key in this.$areaData) {

  1243.             this.delArea(key);

  1244.         }

  1245.         this.$deletedItem = {};

  1246.     },

  1247.     //销毁自己

  1248.     destrory: function () {

  1249.         this.$bgDiv.empty();

  1250.         this.$lineData = null;

  1251.         this.$nodeData = null;

  1252.         this.$lineDom = null;

  1253.         this.$nodeDom = null;

  1254.         this.$areaDom = null;

  1255.         this.$areaData = null;

  1256.         this.$nodeCount = 0;

  1257.         this.$areaCount = 0;

  1258.         this.$areaCount = 0;

  1259.         this.$deletedItem = {};

  1260.     },

  1261.     ///////////以下为有关画线的方法

  1262.     //绘制一条箭头线，并返回线的DOM

  1263.     drawLine: function (id, sp, ep, mark, dash) {

  1264.         var line;

  1265.         if (GooFlow.prototype.useSVG != "") {

  1266.             line = document.createElementNS("http://www.w3.org/2000/svg", "g");

  1267.             var hi = document.createElementNS("http://www.w3.org/2000/svg", "path");

  1268.             var path = document.createElementNS("http://www.w3.org/2000/svg", "path");

  1269. 

  1270.             if (id != "") line.setAttribute("id", id);

  1271.             line.setAttribute("from", sp[0] + "," + sp[1]);

  1272.             line.setAttribute("to", ep[0] + "," + ep[1]);

  1273.             hi.setAttribute("visibility", "hidden");

  1274.             hi.setAttribute("stroke-width", 9);

  1275.             hi.setAttribute("fill", "none");

  1276.             hi.setAttribute("stroke", "white");

  1277.             hi.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]);

  1278.             hi.setAttribute("pointer-events", "stroke");

  1279.             path.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]);

  1280.             path.setAttribute("stroke-width", 2.0);

  1281.             path.setAttribute("stroke-linecap", "round");

  1282.             path.setAttribute("fill", "none");

  1283.             if (dash) path.setAttribute("style", "stroke-dasharray:6,5");

  1284.             if (mark) {

  1285.                 path.setAttribute("stroke", "#ff3300");

  1286.                 path.setAttribute("marker-end", "url(#arrow2)");

  1287.             }

  1288.             else {

  1289.                 path.setAttribute("stroke", "gray");

  1290.                 path.setAttribute("marker-end", "url(#arrow1)");

  1291.             }

  1292.             line.appendChild(hi);

  1293.             line.appendChild(path);

  1294.             line.style.cursor = "crosshair";

  1295.             if (id != "" && id != "GooFlow_tmp_line") {

  1296.                 var text = document.createElementNS("http://www.w3.org/2000/svg", "text");

  1297.                 //text.textContent=id;

  1298.                 line.appendChild(text);

  1299.                 var x = (ep[0] + sp[0]) / 2;

  1300.                 var y = (ep[1] + sp[1]) / 2;

  1301.                 text.setAttribute("text-anchor", "middle");

  1302.                 text.setAttribute("x", x);

  1303.                 text.setAttribute("y", y - 5);

  1304.                 line.style.cursor = "pointer";

  1305.                 text.style.cursor = "text";

  1306.             }

  1307.         } else {

  1308.             line = document.createElement("v:polyline");

  1309.             if (id != "") line.id = id;

  1310.             //line.style.position="absolute";

  1311.             line.points.value = sp[0] + "," + sp[1] + " " + ep[0] + "," + ep[1];

  1312.             line.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]);

  1313.             line.strokeWeight = "1.2";

  1314.             line.stroke.EndArrow = "Block";

  1315.             line.style.cursor = "crosshair";

  1316.             if (id != "" && id != "GooFlow_tmp_line") {

  1317.                 var text = document.createElement("div");

  1318.                 //text.innerHTML=id;

  1319.                 line.appendChild(text);

  1320.                 var x = (ep[0] - sp[0]) / 2;

  1321.                 var y = (ep[1] - sp[1]) / 2;

  1322.                 if (x < 0) x = x * -1;

  1323.                 if (y < 0) y = y * -1;

  1324.                 text.style.left = x + "px";

  1325.                 text.style.top = y - 6 + "px";

  1326.                 line.style.cursor = "pointer";

  1327.             }

  1328.             if (dash) line.stroke.dashstyle = "Dash";

  1329.             if (mark) line.strokeColor = "#ff3300";

  1330.             else line.strokeColor = "gray";

  1331.         }

  1332.         return line;

  1333.     },

  1334.     //画一条只有两个中点的折线

  1335.     drawPoly: function (id, sp, m1, m2, ep, mark) {

  1336.         var poly, strPath;

  1337.         if (GooFlow.prototype.useSVG != "") {

  1338.             poly = document.createElementNS("http://www.w3.org/2000/svg", "g");

  1339.             var hi = document.createElementNS("http://www.w3.org/2000/svg", "path");

  1340.             var path = document.createElementNS("http://www.w3.org/2000/svg", "path");

  1341.             if (id != "") poly.setAttribute("id", id);

  1342.             poly.setAttribute("from", sp[0] + "," + sp[1]);

  1343.             poly.setAttribute("to", ep[0] + "," + ep[1]);

  1344.             hi.setAttribute("visibility", "hidden");

  1345.             hi.setAttribute("stroke-width", 9);

  1346.             hi.setAttribute("fill", "none");

  1347.             hi.setAttribute("stroke", "white");

  1348.             strPath = "M " + sp[0] + " " + sp[1];

  1349.             if (m1[0] != sp[0] || m1[1] != sp[1])

  1350.                 strPath += " L " + m1[0] + " " + m1[1];

  1351.             if (m2[0] != ep[0] || m2[1] != ep[1])

  1352.                 strPath += " L " + m2[0] + " " + m2[1];

  1353.             strPath += " L " + ep[0] + " " + ep[1];

  1354.             hi.setAttribute("d", strPath);

  1355.             hi.setAttribute("pointer-events", "stroke");

  1356.             path.setAttribute("d", strPath);

  1357.             path.setAttribute("stroke-width", 2.0);

  1358.             path.setAttribute("stroke-linecap", "round");

  1359.             path.setAttribute("fill", "none");

  1360.             if (mark) {

  1361.                 path.setAttribute("stroke", "#ff3300");

  1362.                 path.setAttribute("marker-end", "url(#arrow2)");

  1363.             }

  1364.             else {

  1365.                 path.setAttribute("stroke", "gray");

  1366.                 path.setAttribute("marker-end", "url(#arrow1)");

  1367.             }

  1368.             poly.appendChild(hi);

  1369.             poly.appendChild(path);

  1370.             var text = document.createElementNS("http://www.w3.org/2000/svg", "text");

  1371.             //text.textContent=id;

  1372.             poly.appendChild(text);

  1373.             var x = (m2[0] + m1[0]) / 2;

  1374.             var y = (m2[1] + m1[1]) / 2;

  1375.             text.setAttribute("text-anchor", "middle");

  1376.             text.setAttribute("x", x);

  1377.             text.setAttribute("y", y - 5);

  1378.             text.style.cursor = "text";

  1379.             poly.style.cursor = "pointer";

  1380.         }

  1381.         else {

  1382.             poly = document.createElement("v:Polyline");

  1383.             if (id != "") poly.id = id;

  1384.             poly.filled = "false";

  1385.             strPath = sp[0] + "," + sp[1];

  1386.             if (m1[0] != sp[0] || m1[1] != sp[1])

  1387.                 strPath += " " + m1[0] + "," + m1[1];

  1388.             if (m2[0] != ep[0] || m2[1] != ep[1])

  1389.                 strPath += " " + m2[0] + "," + m2[1];

  1390.             strPath += " " + ep[0] + "," + ep[1];

  1391.             poly.points.value = strPath;

  1392.             poly.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]);

  1393.             poly.strokeWeight = "1.2";

  1394.             poly.stroke.EndArrow = "Block";

  1395.             var text = document.createElement("div");

  1396.             //text.innerHTML=id;

  1397.             poly.appendChild(text);

  1398.             var x = (m2[0] - m1[0]) / 2;

  1399.             var y = (m2[1] - m1[1]) / 2;

  1400.             if (x < 0) x = x * -1;

  1401.             if (y < 0) y = y * -1;

  1402.             text.style.left = x + "px";

  1403.             text.style.top = y - 4 + "px";

  1404.             poly.style.cursor = "pointer";

  1405.             if (mark) poly.strokeColor = "#ff3300";

  1406.             else poly.strokeColor = "gray";

  1407.         }

  1408.         return poly;

  1409.     },

  1410.     //计算两个结点间要连直线的话，连线的开始坐标和结束坐标

  1411.     calcStartEnd: function (n1, n2) {

  1412.         var X_1, Y_1, X_2, Y_2;

  1413.         //X判断：

  1414.         var x11 = n1.left, x12 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width;

  1415.         //结点2在结点1左边

  1416.         if (x11 >= x22) {

  1417.             X_1 = x11; X_2 = x22;

  1418.         }

  1419.             //结点2在结点1右边

  1420.         else if (x12 <= x21) {

  1421.             X_1 = x12; X_2 = x21;

  1422.         }

  1423.             //结点2在结点1水平部分重合

  1424.         else if (x11 <= x21 && x12 >= x21 && x12 <= x22) {

  1425.             X_1 = (x12 + x21) / 2; X_2 = X_1;

  1426.         }

  1427.         else if (x11 >= x21 && x12 <= x22) {

  1428.             X_1 = (x11 + x12) / 2; X_2 = X_1;

  1429.         }

  1430.         else if (x21 >= x11 && x22 <= x12) {

  1431.             X_1 = (x21 + x22) / 2; X_2 = X_1;

  1432.         }

  1433.         else if (x11 <= x22 && x12 >= x22) {

  1434.             X_1 = (x11 + x22) / 2; X_2 = X_1;

  1435.         }

  1436. 

  1437.         //Y判断：

  1438.         var y11 = n1.top, y12 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height;

  1439.         //结点2在结点1上边

  1440.         if (y11 >= y22) {

  1441.             Y_1 = y11; Y_2 = y22;

  1442.         }

  1443.             //结点2在结点1下边

  1444.         else if (y12 <= y21) {

  1445.             Y_1 = y12; Y_2 = y21;

  1446.         }

  1447.             //结点2在结点1垂直部分重合

  1448.         else if (y11 <= y21 && y12 >= y21 && y12 <= y22) {

  1449.             Y_1 = (y12 + y21) / 2; Y_2 = Y_1;

  1450.         }

  1451.         else if (y11 >= y21 && y12 <= y22) {

  1452.             Y_1 = (y11 + y12) / 2; Y_2 = Y_1;

  1453.         }

  1454.         else if (y21 >= y11 && y22 <= y12) {

  1455.             Y_1 = (y21 + y22) / 2; Y_2 = Y_1;

  1456.         }

  1457.         else if (y11 <= y22 && y12 >= y22) {

  1458.             Y_1 = (y11 + y22) / 2; Y_2 = Y_1;

  1459.         }

  1460.         return { "start": [X_1, Y_1], "end": [X_2, Y_2] };

  1461.     },

  1462.     //计算两个结点间要连折线的话，连线的所有坐标

  1463.     calcPolyPoints: function (n1, n2, type, M) {

  1464.         //开始/结束两个结点的中心

  1465.         var SP = { x: n1.left + n1.width / 2, y: n1.top + n1.height / 2 };

  1466.         var EP = { x: n2.left + n2.width / 2, y: n2.top + n2.height / 2 };

  1467.         var sp = [], m1 = [], m2 = [], ep = [];

  1468.         //如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标

  1469.         //粗略计算起始点

  1470.         sp = [SP.x, SP.y];

  1471.         ep = [EP.x, EP.y];

  1472.         if (type == "lr") {

  1473.             //粗略计算2个中点

  1474.             m1 = [M, SP.y];

  1475.             m2 = [M, EP.y];

  1476.             //再具体分析修改开始点和中点1

  1477.             if (m1[0] > n1.left && m1[0] < n1.left + n1.width) {

  1478.                 m1[1] = (SP.y > EP.y ? n1.top : n1.top + n1.height);

  1479.                 sp[0] = m1[0]; sp[1] = m1[1];

  1480.             }

  1481.             else {

  1482.                 sp[0] = (m1[0] < n1.left ? n1.left : n1.left + n1.width)

  1483.             }

  1484.             //再具体分析中点2和结束点

  1485.             if (m2[0] > n2.left && m2[0] < n2.left + n2.width) {

  1486.                 m2[1] = (SP.y > EP.y ? n2.top + n2.height : n2.top);

  1487.                 ep[0] = m2[0]; ep[1] = m2[1];

  1488.             }

  1489.             else {

  1490.                 ep[0] = (m2[0] < n2.left ? n2.left : n2.left + n2.width)

  1491.             }

  1492.         }

  1493.             //如果是允许中段可上下移动的折线,则参数M为可移动中段线的Y坐标

  1494.         else if (type == "tb") {

  1495.             //粗略计算2个中点

  1496.             m1 = [SP.x, M];

  1497.             m2 = [EP.x, M];

  1498.             //再具体分析修改开始点和中点1

  1499.             if (m1[1] > n1.top && m1[1] < n1.top + n1.height) {

  1500.                 m1[0] = (SP.x > EP.x ? n1.left : n1.left + n1.width);

  1501.                 sp[0] = m1[0]; sp[1] = m1[1];

  1502.             }

  1503.             else {

  1504.                 sp[1] = (m1[1] < n1.top ? n1.top : n1.top + n1.height)

  1505.             }

  1506.             //再具体分析中点2和结束点

  1507.             if (m2[1] > n2.top && m2[1] < n2.top + n2.height) {

  1508.                 m2[0] = (SP.x > EP.x ? n2.left + n2.width : n2.left);

  1509.                 ep[0] = m2[0]; ep[1] = m2[1];

  1510.             }

  1511.             else {

  1512.                 ep[1] = (m2[1] < n2.top ? n2.top : n2.top + n2.height);

  1513.             }

  1514.         }

  1515.         return { start: sp, m1: m1, m2: m2, end: ep };

  1516.     },

  1517.     //初始化折线中段的X/Y坐标,mType='rb'时为X坐标,mType='tb'时为Y坐标

  1518.     getMValue: function (n1, n2, mType) {

  1519.         if (mType == "lr") {

  1520.             return (n1.left + n1.width / 2 + n2.left + n2.width / 2) / 2;

  1521.         }

  1522.         else if (mType == "tb") {

  1523.             return (n1.top + n1.height / 2 + n2.top + n2.height / 2) / 2;

  1524.         }

  1525.     },

  1526.     //增加一条线

  1527.     addLine: function (id, json) {

  1528.         if (this.onItemAdd != null && !this.onItemAdd(id, "line", json)) return;

  1529.         if (this.$undoStack && this.$editable) {

  1530.             this.pushOper("delLine", [id]);

  1531.         }

  1532.         var n1 = null, n2 = null;//获取开始/结束结点的数据

  1533.         if (json.from == json.to) return;

  1534.         //避免两个节点间不能有一条以上同向接连线

  1535.         for (var k in this.$lineData) {

  1536.             if ((json.from == this.$lineData[k].from && json.to == this.$lineData[k].to))

  1537.                 return;

  1538.         }

  1539.         var n1 = this.$nodeData[json.from], n2 = this.$nodeData[json.to];//获取开始/结束结点的数据

  1540.         if (!n1 || !n2) return;

  1541.         var res;

  1542.         if (json.type && json.type != "sl")

  1543.             res = GooFlow.prototype.calcPolyPoints(n1, n2, json.type, json.M);

  1544.         else

  1545.             res = GooFlow.prototype.calcStartEnd(n1, n2);

  1546.         if (!res) return;

  1547.         this.$lineData[id] = {};

  1548.         this.$lineData[id].setInfo = json.setInfo;

  1549.         this.$lineData[id].id = json.id;

  1550.         if (json.type) {

  1551.             this.$lineData[id].type = json.type;

  1552.             this.$lineData[id].M = json.M;

  1553.         }

  1554.         else this.$lineData[id].type = "sl";//默认为直线

  1555.         this.$lineData[id].from = json.from;

  1556.         this.$lineData[id].to = json.to;

  1557.         this.$lineData[id].name = json.name;

  1558.         if (json.mark) this.$lineData[id].marked = json.mark;

  1559.         else this.$lineData[id].marked = false;

  1560. 

  1561.         if (this.$lineData[id].type == "sl")

  1562.             this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, json.mark);

  1563.         else

  1564.             this.$lineDom[id] = GooFlow.prototype.drawPoly(id, res.start, res.m1, res.m2, res.end, json.mark);

  1565.         this.$draw.appendChild(this.$lineDom[id]);

  1566.         if (GooFlow.prototype.useSVG == "") {

  1567.             this.$lineDom[id].childNodes[1].innerHTML = json.name;

  1568.             if (this.$lineData[id].type != "sl") {

  1569.                 var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);

  1570.                 if (Min > res.m2[0]) Min = res.m2[0];

  1571.                 if (Min > res.m1[0]) Min = res.m1[0];

  1572.                 this.$lineDom[id].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;

  1573.                 Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);

  1574.                 if (Min > res.m2[1]) Min = res.m2[1];

  1575.                 if (Min > res.m1[1]) Min = res.m1[1];

  1576.                 this.$lineDom[id].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2;

  1577.             } else

  1578.                 this.$lineDom[id].childNodes[1].style.left =

  1579. 				((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;

  1580.         }

  1581.         else this.$lineDom[id].childNodes[2].textContent = json.name;

  1582.         ++this.$lineCount;

  1583.         if (this.$editable) {

  1584.             this.$lineData[id].alt = true;

  1585.             if (this.$deletedItem[id]) delete this.$deletedItem[id];//在回退删除操作时,去掉该元素的删除记录

  1586.         }

  1587.     },

  1588.     //重构所有连向某个结点的线的显示，传参结构为$nodeData数组的一个单元结构

  1589.     resetLines: function (id, node) {

  1590.         for (var i in this.$lineData) {

  1591.             var other = null;//获取结束/开始结点的数据

  1592.             var res;

  1593.             if (this.$lineData[i].from == id) {//找结束点

  1594.                 other = this.$nodeData[this.$lineData[i].to] || null;

  1595.                 if (other == null) continue;

  1596.                 if (this.$lineData[i].type == "sl")

  1597.                     res = GooFlow.prototype.calcStartEnd(node, other);

  1598.                 else

  1599.                     res = GooFlow.prototype.calcPolyPoints(node, other, this.$lineData[i].type, this.$lineData[i].M)

  1600.                 if (!res) break;

  1601.             }

  1602.             else if (this.$lineData[i].to == id) {//找开始点

  1603.                 other = this.$nodeData[this.$lineData[i].from] || null;

  1604.                 if (other == null) continue;

  1605.                 if (this.$lineData[i].type == "sl")

  1606.                     res = GooFlow.prototype.calcStartEnd(other, node);

  1607.                 else

  1608.                     res = GooFlow.prototype.calcPolyPoints(other, node, this.$lineData[i].type, this.$lineData[i].M);

  1609.                 if (!res) break;

  1610.             }

  1611.             if (other == null) continue;

  1612.             this.$draw.removeChild(this.$lineDom[i]);

  1613.             if (this.$lineData[i].type == "sl") {

  1614.                 this.$lineDom[i] = GooFlow.prototype.drawLine(i, res.start, res.end, this.$lineData[i].marked);

  1615.             }

  1616.             else {

  1617.                 this.$lineDom[i] = GooFlow.prototype.drawPoly(i, res.start, res.m1, res.m2, res.end, this.$lineData[i].marked);

  1618.             }

  1619.             this.$draw.appendChild(this.$lineDom[i]);

  1620.             if (GooFlow.prototype.useSVG == "") {

  1621.                 this.$lineDom[i].childNodes[1].innerHTML = this.$lineData[i].name;

  1622.                 if (this.$lineData[i].type != "sl") {

  1623.                     var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]);

  1624.                     if (Min > res.m2[0]) Min = res.m2[0];

  1625.                     if (Min > res.m1[0]) Min = res.m1[0];

  1626.                     this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetWidth / 2 + 4;

  1627.                     Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]);

  1628.                     if (Min > res.m2[1]) Min = res.m2[1];

  1629.                     if (Min > res.m1[1]) Min = res.m1[1];

  1630.                     this.$lineDom[i].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - Min - this.$lineDom[i].childNodes[1].offsetHeight / 2 - 4;

  1631.                 } else

  1632.                     this.$lineDom[i].childNodes[1].style.left =

  1633.                     ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[i].childNodes[1].offsetWidth) / 2 + 4;

  1634.             }

  1635.             else this.$lineDom[i].childNodes[2].textContent = this.$lineData[i].name;

  1636.         }

  1637.     },

  1638.     //重新设置连线的样式 newType= "sl":直线, "lr":中段可左右移动型折线, "tb":中段可上下移动型折线

  1639.     setLineType: function (id, newType) {

  1640.         if (!newType || newType == null || newType == "" || newType == this.$lineData[id].type) return false;

  1641.         if (this.onLineSetType != null && !this.onLineSetType(id, newType)) return;

  1642.         if (this.$undoStack) {

  1643.             var paras = [id, this.$lineData[id].type];

  1644.             this.pushOper("setLineType", paras);

  1645.             if (this.$lineData[id].type != "sl") {

  1646.                 var para2 = [id, this.$lineData[id].M];

  1647.                 this.pushOper("setLineM", para2);

  1648.             }

  1649.         }

  1650.         var from = this.$lineData[id].from;

  1651.         var to = this.$lineData[id].to;

  1652.         this.$lineData[id].type = newType;

  1653.         var res;

  1654.         //如果是变成折线

  1655.         if (newType != "sl") {

  1656.             var res = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);

  1657.             this.setLineM(id, this.getMValue(this.$nodeData[from], this.$nodeData[to], newType), true);

  1658.         }

  1659.             //如果是变回直线

  1660.         else {

  1661.             delete this.$lineData[id].M;

  1662.             this.$lineMove.hide().removeData("type").removeData("tid");

  1663.             res = GooFlow.prototype.calcStartEnd(this.$nodeData[from], this.$nodeData[to]);

  1664.             if (!res) return;

  1665.             this.$draw.removeChild(this.$lineDom[id]);

  1666.             this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, this.$lineData[id].marked || this.$focus == id);

  1667.             this.$draw.appendChild(this.$lineDom[id]);

  1668.             if (GooFlow.prototype.useSVG == "") {

  1669.                 this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;

  1670.                 this.$lineDom[id].childNodes[1].style.left =

  1671.                 ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - this.$lineDom[id].childNodes[1].offsetWidth) / 2 + 4;

  1672.             }

  1673.             else

  1674.                 this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;

  1675.         }

  1676.         if (this.$focus == id) {

  1677.             this.focusItem(id);

  1678.         }

  1679.         if (this.$editable) {

  1680.             this.$lineData[id].alt = true;

  1681.         }

  1682.     },

  1683.     //设置折线中段的X坐标值（可左右移动时）或Y坐标值（可上下移动时）

  1684.     setLineM: function (id, M, noStack) {

  1685.         if (!this.$lineData[id] || M < 0 || !this.$lineData[id].type || this.$lineData[id].type == "sl") return false;

  1686.         if (this.onLineMove != null && !this.onLineMove(id, M)) return false;

  1687.         if (this.$undoStack && !noStack) {

  1688.             var paras = [id, this.$lineData[id].M];

  1689.             this.pushOper("setLineM", paras);

  1690.         }

  1691.         var from = this.$lineData[id].from;

  1692.         var to = this.$lineData[id].to;

  1693.         this.$lineData[id].M = M;

  1694.         var ps = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], this.$nodeData[to], this.$lineData[id].type, this.$lineData[id].M);

  1695.         this.$draw.removeChild(this.$lineDom[id]);

  1696.         this.$lineDom[id] = GooFlow.prototype.drawPoly(id, ps.start, ps.m1, ps.m2, ps.end, this.$lineData[id].marked || this.$focus == id);

  1697.         this.$draw.appendChild(this.$lineDom[id]);

  1698.         if (GooFlow.prototype.useSVG == "") {

  1699.             this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name;

  1700.             var Min = (ps.start[0] > ps.end[0] ? ps.end[0] : ps.start[0]);

  1701.             if (Min > ps.m2[0]) Min = ps.m2[0];

  1702.             if (Min > ps.m1[0]) Min = ps.m1[0];

  1703.             this.$lineDom[id].childNodes[1].style.left = (ps.m2[0] + ps.m1[0]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4;

  1704.             Min = (ps.start[1] > ps.end[1] ? ps.end[1] : ps.start[1]);

  1705.             if (Min > ps.m2[1]) Min = ps.m2[1];

  1706.             if (Min > ps.m1[1]) Min = ps.m1[1];

  1707.             this.$lineDom[id].childNodes[1].style.top = (ps.m2[1] + ps.m1[1]) / 2 - Min - this.$lineDom[id].childNodes[1].offsetHeight / 2 - 4;

  1708.         }

  1709.         else this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name;

  1710.         if (this.$editable) {

  1711.             this.$lineData[id].alt = true;

  1712.         }

  1713.     },

  1714.     //删除转换线

  1715.     delLine: function (id) {

  1716.         if (!this.$lineData[id]) return;

  1717.         if (this.onItemDel != null && !this.onItemDel(id, "node")) return;

  1718.         if (this.$undoStack) {

  1719.             var paras = [id, this.$lineData[id]];

  1720.             this.pushOper("addLine", paras);

  1721.         }

  1722.         this.$draw.removeChild(this.$lineDom[id]);

  1723.         delete this.$lineData[id];

  1724.         delete this.$lineDom[id];

  1725.         if (this.$focus == id) this.$focus = "";

  1726.         --this.$lineCount;

  1727.         if (this.$editable) {

  1728.             //在回退新增操作时,如果节点ID以this.$id+"_line_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中

  1729.             if (id.indexOf(this.$id + "_line_") < 0)

  1730.                 this.$deletedItem[id] = "line";

  1731.         }

  1732.         this.$lineOper.hide();

  1733.     },

  1734.     //用颜色标注/取消标注一个结点或转换线，常用于显示重点或流程的进度。

  1735.     //这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法，实际运用中可用于跟踪流程的进度。

  1736.     markItem: function (id, type, mark) {

  1737.         if (type == "node") {

  1738.             if (!this.$nodeData[id]) return;

  1739.             if (this.onItemMark != null && !this.onItemMark(id, "node", mark)) return;

  1740.             this.$nodeData[id].marked = mark || false;

  1741.             if (mark) this.$nodeDom[id].addClass("item_mark");

  1742.             else this.$nodeDom[id].removeClass("item_mark");

  1743. 

  1744.         } else if (type == "line") {

  1745.             if (!this.$lineData[id]) return;

  1746.             if (this.onItemMark != null && !this.onItemMark(id, "line", mark)) return;

  1747.             this.$lineData[id].marked = mark || false;

  1748.             if (GooFlow.prototype.useSVG != "") {

  1749.                 if (mark) {

  1750.                     this.$nodeDom[id].childNodes[1].setAttribute("stroke", "#ff3300");

  1751.                     this.$nodeDom[id].childNodes[1].setAttribute("marker-end", "url(#arrow2)");

  1752.                 } else {

  1753.                     this.$nodeDom[id].childNodes[1].setAttribute("stroke", "gray");

  1754.                     this.$nodeDom[id].childNodes[1].setAttribute("marker-end", "url(#arrow1)");

  1755.                 }

  1756.             } else {

  1757.                 if (mark) this.$nodeDom[id].strokeColor = "#ff3300";

  1758.                 else this.$nodeDom[id].strokeColor = "gray"

  1759.             }

  1760.         }

  1761.         if (this.$undoStatck) {

  1762.             var paras = [id, type, !mark];

  1763.             this.pushOper("markItem", paras);

  1764.         }

  1765.     },

  1766.     ////////////////////////以下为区域分组块操作

  1767.     moveArea: function (id, left, top) {

  1768.         if (!this.$areaData[id]) return;

  1769.         if (this.onItemMove != null && !this.onItemMove(id, "area", left, top)) return;

  1770.         if (this.$undoStack) {

  1771.             var paras = [id, this.$areaData[id].left, this.$areaData[id].top];

  1772.             this.pushOper("moveNode", paras);

  1773.         }

  1774.         if (left < 0) left = 0;

  1775.         if (top < 0) top = 0;

  1776.         $("#" + id).css({ left: left + "px", top: top + "px" });

  1777.         this.$areaData[id].left = left;

  1778.         this.$areaData[id].top = top;

  1779.         if (this.$editable) {

  1780.             this.$areaData[id].alt = true;

  1781.         }

  1782.     },

  1783.     //删除区域分组

  1784.     delArea: function (id) {

  1785.         if (!this.$areaData[id]) return;

  1786.         if (this.$undoStack) {

  1787.             var paras = [id, this.$areaData[id]];

  1788.             this.pushOper("addArea", paras);

  1789.         }

  1790.         if (this.onItemDel != null && !this.onItemDel(id, "node")) return;

  1791.         delete this.$areaData[id];

  1792.         this.$areaDom[id].remove();

  1793.         delete this.$areaDom[id];

  1794.         --this.$areaCount;

  1795.         if (this.$editable) {

  1796.             //在回退新增操作时,如果节点ID以this.$id+"_area_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中

  1797.             if (id.indexOf(this.$id + "_area_") < 0)

  1798.                 this.$deletedItem[id] = "area";

  1799.         }

  1800.     },

  1801.     //设置区域分组的颜色

  1802.     setAreaColor: function (id, color) {

  1803.         if (!this.$areaData[id]) return;

  1804.         if (this.$undoStack) {

  1805.             var paras = [id, this.$areaData[id].color];

  1806.             this.pushOper("setAreaColor", paras);

  1807.         }

  1808.         if (color == "red" || color == "yellow" || color == "blue" || color == "green") {

  1809.             this.$areaDom[id].removeClass("area_" + this.$areaData[id].color).addClass("area_" + color);

  1810.             this.$areaData[id].color = color;

  1811.         }

  1812.         if (this.$editable) {

  1813.             this.$areaData[id].alt = true;

  1814.         }

  1815.     },

  1816.     //设置区域分块的尺寸

  1817.     resizeArea: function (id, width, height) {

  1818.         if (!this.$areaData[id]) return;

  1819.         if (this.onItemResize != null && !this.onItemResize(id, "area", width, height)) return;

  1820.         if (this.$undoStack) {

  1821.             var paras = [id, this.$areaData[id].width, this.$areaData[id].height];

  1822.             this.pushOper("resizeArea", paras);

  1823.         }

  1824.         var hack = 0;

  1825.         if (navigator.userAgent.indexOf("8.0") != -1) hack = 2;

  1826.         this.$areaDom[id].children(".bg").css({ width: width - 2 + "px", height: height - 2 + "px" });

  1827.         width = this.$areaDom[id].outerWidth();

  1828.         height = this.$areaDom[id].outerHeight();

  1829.         this.$areaDom[id].children("bg").css({ width: width - 2 + "px", height: height - 2 + "px" });

  1830.         this.$areaData[id].width = width;

  1831.         this.$areaData[id].height = height;

  1832.         if (this.$editable) {

  1833.             this.$areaData[id].alt = true;

  1834.         }

  1835.     },

  1836.     addArea: function (id, json) {

  1837.         if (this.onItemAdd != null && !this.onItemAdd(id, "area", json)) return;

  1838.         if (this.$undoStack && this.$editable) {

  1839.             this.pushOper("delArea", [id]);

  1840.         }

  1841.         this.$areaDom[id] = $("<div id='" + id + "' class='GooFlow_area area_" + json.color + "' style='top:" + json.top + "px;left:" + json.left + "px'><div class='bg' style='width:" + (json.width - 2) + "px;height:" + (json.height - 2) + "px'></div>"

  1842. 		+ "<label>" + json.name + "</label><b></b><div><div class='rs_bottom'></div><div class='rs_right'></div><div class='rs_rb'></div><div class='rs_close'></div></div></div>");

  1843.         this.$areaData[id] = json;

  1844.         this.$group.append(this.$areaDom[id]);

  1845.         if (this.$nowType != "group") this.$areaDom[id].children("div:eq(1)").css("display", "none");

  1846.         ++this.$areaCount;

  1847.         if (this.$editable) {

  1848.             this.$areaData[id].alt = true;

  1849.             if (this.$deletedItem[id]) delete this.$deletedItem[id];//在回退删除操作时,去掉该元素的删除记录

  1850.         }

  1851.     },

  1852.     //重构整个流程图设计器的宽高

  1853.     reinitSize: function (width, height) {

  1854.         var w = (width || 800) - 2;

  1855.         var h = (height || 500) - 2;

  1856.         this.$bgDiv.css({ height: h + "px", width: w + "px" });

  1857.         var headHeight = 0, hack = 10;

  1858.         if (this.$head != null) {

  1859.             headHeight = 24;

  1860.             hack = 7;

  1861.         }

  1862.         if (this.$tool != null) {

  1863.             this.$tool.css({ height: h - headHeight - hack + "px" });

  1864.         }

  1865.         w -= 39;

  1866.         h = h - headHeight - (this.$head != null ? 5 : 8);

  1867.         this.$workArea.parent().css({ height: h + "px", width: w + "px" });

  1868.         this.$workArea.css({ height: h * 3 + "px", width: w * 3 + "px" });

  1869.         if (GooFlow.prototype.useSVG == "") {

  1870.             this.$draw.coordsize = w * 3 + "," + h * 3;

  1871.         }

  1872.         this.$draw.style.width = w * 3 + "px";

  1873.         this.$draw.style.height = +h * 3 + "px";

  1874.         if (this.$group == null) {

  1875.             this.$group.css({ height: h * 3 + "px", width: w * 3 + "px" });

  1876.         }

  1877.     }

  1878. }

  1879. //将此类的构造函数加入至JQUERY对象中

  1880. jQuery.extend({

  1881.     createGooFlow: function (bgDiv, property) {

  1882.         return new GooFlow(bgDiv, property);

  1883.     }

  1884. });

  1885. //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到

  1886. function getElCoordinate(dom) {

  1887.     var t = dom.offsetTop;

  1888.     var l = dom.offsetLeft;

  1889.     dom = dom.offsetParent;

  1890.     while (dom) {

  1891.         t += dom.offsetTop;

  1892.         l += dom.offsetLeft;

  1893.         dom = dom.offsetParent;

  1894.     }; return {

  1895.         top: t,

  1896.         left: l

  1897.     };

  1898. }

  1899. //兼容各种浏览器的,获取鼠标真实位置

  1900. function mousePosition(ev) {

  1901.     if (!ev) ev = window.event;

  1902.     if (ev.pageX || ev.pageY) {

  1903.         return { x: ev.pageX, y: ev.pageY };

  1904.     }

  1905.     return {

  1906.         x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,

  1907.         y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop

  1908.     };

  1909. }