From 25387d12f14be6fc8888e091ebe489c1c84bdceb Mon Sep 17 00:00:00 2001 From: yubaolee Date: Mon, 19 Mar 2018 17:21:56 +0800 Subject: [PATCH] update gooflow to 1.3.2 --- OpenAuth.Mvc/OpenAuth.Mvc.csproj | 41 +- OpenAuth.Mvc/Views/FlowSchemes/Design.cshtml | 2 +- OpenAuth.Mvc/js/flow-ui/flow.css | 77 - OpenAuth.Mvc/js/flow-ui/gooflow.js | 2279 --------------- OpenAuth.Mvc/js/flow-ui/img/1.png | Bin 2818 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/10.png | Bin 2096 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/11.png | Bin 4779 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/2.png | Bin 2038 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/3.png | Bin 2369 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/4.png | Bin 2119 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/5.png | Bin 2071 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/6.png | Bin 1933 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/7.png | Bin 2574 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/9.png | Bin 3184 -> 0 bytes .../js/flow-ui/img/GooFlow_line_oper.png | Bin 652 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/gooflow_bg.png | Bin 249 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/gooflow_blank.gif | Bin 70 -> 0 bytes .../js/flow-ui/img/gooflow_blank2.gif | Bin 58 -> 0 bytes .../js/flow-ui/img/gooflow_blank3.gif | Bin 79 -> 0 bytes .../js/flow-ui/img/gooflow_btn_bg.png | Bin 336 -> 0 bytes .../js/flow-ui/img/gooflow_bullet.png | Bin 1426 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/gooflow_icon2.png | Bin 1952 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/gooflow_tip.png | Bin 218 -> 0 bytes OpenAuth.Mvc/js/flow-ui/img/ui_close.png | Bin 2127 -> 0 bytes OpenAuth.Mvc/js/flow/GooFlow.css | 195 ++ OpenAuth.Mvc/js/flow/GooFlow.export.js | 427 +++ OpenAuth.Mvc/js/flow/GooFlow.js | 2514 +++++++++++++++++ OpenAuth.Mvc/js/flow/GooFlow.print.js | 207 ++ OpenAuth.Mvc/js/flow/GooFunc.js | 117 + OpenAuth.Mvc/js/flow/config.js | 48 + OpenAuth.Mvc/js/flow/fonts/demo.css | 370 +++ .../js/flow/fonts/demo_fontclass.html | 256 ++ OpenAuth.Mvc/js/flow/fonts/demo_symbol.html | 351 +++ OpenAuth.Mvc/js/flow/fonts/demo_unicode.html | 294 ++ OpenAuth.Mvc/js/flow/fonts/iconflow.eot | Bin 0 -> 8612 bytes OpenAuth.Mvc/js/flow/fonts/iconflow.svg | 141 + OpenAuth.Mvc/js/flow/fonts/iconflow.ttf | Bin 0 -> 8444 bytes OpenAuth.Mvc/js/flow/fonts/iconflow.woff | Bin 0 -> 5592 bytes OpenAuth.Mvc/js/flow/fonts/iconfont.css | 89 + OpenAuth.Mvc/js/flow/fonts/iconfont.js | 1 + .../js/{flow-ui => flow}/img/gooflow_icon.png | Bin OpenAuth.Mvc/js/utils/flowlayout.js | 337 +-- OpenAuth.Mvc/userJs/flowSchemeDesign.js | 21 +- OpenAuth.Mvc/userJs/nodeInfo.js | 5 +- 44 files changed, 5213 insertions(+), 2559 deletions(-) delete mode 100644 OpenAuth.Mvc/js/flow-ui/flow.css delete mode 100644 OpenAuth.Mvc/js/flow-ui/gooflow.js delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/1.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/10.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/11.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/2.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/3.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/4.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/5.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/6.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/7.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/9.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/GooFlow_line_oper.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_bg.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_blank.gif delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_blank2.gif delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_blank3.gif delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_btn_bg.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_bullet.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_icon2.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/gooflow_tip.png delete mode 100644 OpenAuth.Mvc/js/flow-ui/img/ui_close.png create mode 100644 OpenAuth.Mvc/js/flow/GooFlow.css create mode 100644 OpenAuth.Mvc/js/flow/GooFlow.export.js create mode 100644 OpenAuth.Mvc/js/flow/GooFlow.js create mode 100644 OpenAuth.Mvc/js/flow/GooFlow.print.js create mode 100644 OpenAuth.Mvc/js/flow/GooFunc.js create mode 100644 OpenAuth.Mvc/js/flow/config.js create mode 100644 OpenAuth.Mvc/js/flow/fonts/demo.css create mode 100644 OpenAuth.Mvc/js/flow/fonts/demo_fontclass.html create mode 100644 OpenAuth.Mvc/js/flow/fonts/demo_symbol.html create mode 100644 OpenAuth.Mvc/js/flow/fonts/demo_unicode.html create mode 100644 OpenAuth.Mvc/js/flow/fonts/iconflow.eot create mode 100644 OpenAuth.Mvc/js/flow/fonts/iconflow.svg create mode 100644 OpenAuth.Mvc/js/flow/fonts/iconflow.ttf create mode 100644 OpenAuth.Mvc/js/flow/fonts/iconflow.woff create mode 100644 OpenAuth.Mvc/js/flow/fonts/iconfont.css create mode 100644 OpenAuth.Mvc/js/flow/fonts/iconfont.js rename OpenAuth.Mvc/js/{flow-ui => flow}/img/gooflow_icon.png (100%) diff --git a/OpenAuth.Mvc/OpenAuth.Mvc.csproj b/OpenAuth.Mvc/OpenAuth.Mvc.csproj index d191cc15..67f755e2 100644 --- a/OpenAuth.Mvc/OpenAuth.Mvc.csproj +++ b/OpenAuth.Mvc/OpenAuth.Mvc.csproj @@ -179,30 +179,20 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + @@ -617,6 +607,9 @@ + + + diff --git a/OpenAuth.Mvc/Views/FlowSchemes/Design.cshtml b/OpenAuth.Mvc/Views/FlowSchemes/Design.cshtml index b857221c..3512385a 100644 --- a/OpenAuth.Mvc/Views/FlowSchemes/Design.cshtml +++ b/OpenAuth.Mvc/Views/FlowSchemes/Design.cshtml @@ -2,7 +2,7 @@ @section header { - + }
diff --git a/OpenAuth.Mvc/js/flow-ui/flow.css b/OpenAuth.Mvc/js/flow-ui/flow.css deleted file mode 100644 index ba831015..00000000 --- a/OpenAuth.Mvc/js/flow-ui/flow.css +++ /dev/null @@ -1,77 +0,0 @@ -v\:group,v\:rect,v\:imagedata,v\:oval,v\:line,v\:polyline,v\:stroke,v\:textbox{display:inline-block;background:transparent} -.GooFlow{margin:0px;background:#F7F7F7;border-right:#ccc 0px solid;font: 12px Arial, Helvetica, sans-serif;-moz-user-select:none;-webkit-user-select:none;float:left;} -.GooFlow_head{clear:both;height:22px;padding:1px;display:none;} -.GooFlow_tool{float:left;margin:0px 1px;overflow:hidden;clear:left;border-radius:3px;margin-top:2px;margin-left:3px;} -.GooFlow_tool_div{overflow:hidden;border-radius:2px;width:54px;} -.GooFlow_tool span{height:0px;overflow:hidden;border-bottom:#ccc 1px solid;border-top:#FFFFFF 1px solid;margin:1px;clear:both;display:block;} -.GooFlow_tool_btn{display:block;border:0px;height:50px;width:50px;cursor:default;margin:1px;margin-top:2px;margin-bottom:2px; outline :none;border:#F7F7F7 1px solid;border-radius:8px} -.GooFlow_tool_btn b{cursor:pointer;} -.GooFlow_tool_btn:hover{border:#8E9DA6 1px solid;opacity: 0.8;} -.GooFlow_tool_btndown{display:block;border:0px;height:50px;width:50px;cursor:default;margin:1px;margin-top:2px;margin-bottom:2px; outline :none;border:#ccc 1px solid;background:#fff;border-radius:8px} -.GooFlow_tool_btndown b{cursor:pointer;} -.GooFlow_work{float:right;margin:0px;border-left:#ccc 1px solid;position:relative;overflow:scroll} -.GooFlow_work .GooFlow_work_inner{background-image:url(img/wallbg.png) ;position:relative;overflow:hidden} -.GooFlow_work .GooFlow_work_group{cursor:default;position:absolute;overflow:hidden;top:0px;left:0px} -.GooFlow_area{position:absolute;} -.GooFlow_area .lock{cursor:default;} -.GooFlow_area .bg{cursor:move;filter:Alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.3;border-radius:10px;} -.GooFlow_work .lock .bg{cursor:default;} -.GooFlow_area label{cursor:text;top:1px;left:1px;position:absolute;display:block;font-size:12px;text-indent:18px;height:18px;line-height:18px} -.GooFlow_work .lock label{cursor:default;} -.GooFlow_area b{display:block;height:18px;width:18px;top:0px;left:0px;position:absolute;cursor:pointer} -.GooFlow_work .area_red .bg{border:1px solid red;background-color:#EB4F2D} -.GooFlow_work .area_red label{color:red;background:url(img/gooflow_bullet.png) no-repeat 1px 1px} -.GooFlow_work .area_yellow .bg{border:1px solid #CD925A;background-color:#F5B93D} -.GooFlow_work .area_yellow label{color:#FFBA1D;background:url(img/gooflow_bullet.png) no-repeat 1px -16px} -.GooFlow_work .area_blue .bg{border:1px solid #347BB1;background-color:#43A4EE} -.GooFlow_work .area_blue label{color:#347BB1;background:url(img/gooflow_bullet.png) no-repeat 1px -33px} -.GooFlow_work .area_green .bg{border:1px solid green;background-color:#7FBA2E} -.GooFlow_work .area_green label{color:green;background:url(img/gooflow_bullet.png) no-repeat 1px -50px} -.GooFlow_work svg{display:block;position:absolute} -.GooFlow_work v\:group{position:relative;display:block} -.GooFlow_work v\:group v\:line{overflow:visible} -.GooFlow_work v\:group v\:polyline{overflow:visible} -.GooFlow_work v\:group div{cursor:text;position:absolute;overflow:visible;display:inline;float:left;white-space: nowrap} -.GooFlow_work .draw{color:#ff3300} - -.GooFlow_item{ - position:absolute;background:#A1DCEB;border:#A1DCEB solid 1px; - border-radius:3px;background-color:#C1DCFC;box-shadow:1px 1px 2px rgba(99,99,99,2); -} -.GooFlow table{padding:1px;border-radius:2px} -.GooFlow td{ vertical-align:middle;text-align:center;padding:0px;cursor:default;word-wrap:break-word;word-break:break-all} -.GooFlow .ico{width:18px;cursor:move} -.GooFlow i{display:block;width:18px;height:18px;overflow:hidden} - -.GooFlow b{display:block;width:48px;height:48px;overflow:hidden;} -.GooFlow .item_startround{background:#5CCB41;width:52px;height:52px;border:#5e8800 solid 1px;overflow:visible} -.GooFlow .item_startround table{border:0px;padding:2px;width:50px;height:50px;} -.GooFlow .item_startround .span{font-weight: bold;color:#fff; display:block;text-align:center;position:absolute;top:18px;left:-14px;width:80px;overflow:visible;text-align:center;padding:0px;cursor:default;word-wrap: break-word;word-break:break-all} -.GooFlow .item_endround{background:#DE2922;width:52px;height:52px;border:#BE0E0E solid 1px;overflow:visible} -.GooFlow .item_endround table{border:0px;padding:2px;width:50px;height:50px;} -.GooFlow .item_endround .span{font-weight: bold;color:#fff; display:block;text-align:center;position:absolute;top:18px;left:-15px;width:80px;overflow:visible;text-align:center;padding:0px;cursor:default;word-wrap: break-word;word-break:break-all} -.GooFlow .gentlenode{background:#DC5E2B;color:#FFFFFF;} -.GooFlow div .rs_right{display:none;overflow:hidden;position:absolute;right:-1px;top:-1px;height:100%;width:6px;cursor:w-resize} -.GooFlow div .rs_bottom{display:none;overflow:hidden;position:absolute;left:-1px;bottom:-1px;width:100%;height:6px;cursor:n-resize} -.GooFlow div .rs_rb{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;overflow:hidden;cursor:nw-resize;background:url(img/gooflow_tip.png) no-repeat 0px -8px;} -.GooFlow div .rs_close{z-index:10;position:absolute;right:-12px;top:-12px;width:24px;height:24px;overflow:hidden;cursor:pointer;background:url(img/ui_close.png) no-repeat 0px 0px} -.GooFlow .rs_ghost{position:absolute;display:none;overflow:hidden;border:#8EA4C1 1px dashed;background:#F2F2F2;filter:Alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;z-index:10;border-radius:10px;} -.GooFlow .item_focus{border:#4A5B79 1px solid;box-shadow:2px 2px 19px #444;opacity:0.9;cursor:pointer;} -.GooFlow .item_mark{border:#ff3300 1px solid} -.GooFlow .item_mark td{cursor:crosshair} -.GooFlow textarea{position:absolute;border:#4A5B79 1px solid;display:none;font-size:12px;overflow-y:visible;width:100px;z-index:10001} -.GooFlow .GooFlow_line_oper{height:15px;background-color:#D8E8FC;border:#ccc 1px solid;position:absolute;z-index:10000;} -.GooFlow .GooFlow_line_move{filter:Alpha(Opacity=50);-moz-opacity:0.5;opacity:0.5;overflow:hidden;position:absolute;z-index:9999;background:url(0) no-repeat} -.GooFlow .GooFlow_line_oper b{display:inline-block;width:15px;height:15px;margin-left:2px;cursor:pointer} -.GooFlow .b_l1{background:url(img/GooFlow_line_oper.png) no-repeat 1px 1px} -.GooFlow .b_l2{background:url(img/GooFlow_line_oper.png) no-repeat 1px -14px} -.GooFlow .b_l3{background:url(img/GooFlow_line_oper.png) no-repeat 1px -29px} -.GooFlow .b_x{background:url(img/GooFlow_line_oper.png) no-repeat 1px -44px;margin-left:10px} -.GooFlow .ico_cursor{background:url(img/10.png) no-repeat 0px 0px} -.GooFlow .ico_direct{background:url(img/9.png) no-repeat 0px 0px} -.GooFlow .ico_startround{background:url(img/2.png) no-repeat 0px 0px} -.GooFlow .ico_endround{background:url(img/7.png) no-repeat 0px 0px} -.GooFlow .ico_stepnode{background:url(img/4.png) no-repeat 0px 0px} -.GooFlow .ico_shuntnode{background:url(img/5.png) no-repeat 0px 0px} -.GooFlow .ico_confluencenode{background:url(img/3.png) no-repeat 0px 0px} -.GooFlow .ico_group{background:url(img/11.png) no-repeat 0px 0px} \ No newline at end of file diff --git a/OpenAuth.Mvc/js/flow-ui/gooflow.js b/OpenAuth.Mvc/js/flow-ui/gooflow.js deleted file mode 100644 index d8944dc9..00000000 --- a/OpenAuth.Mvc/js/flow-ui/gooflow.js +++ /dev/null @@ -1,2279 +0,0 @@ -layui.define("jquery", - function(exports) { - var jQuery = layui.jquery, - $ = layui.jquery; - - //定义一个区域图类： - function GooFlow(bgDiv, property) { - if (navigator.userAgent.indexOf("MSIE 8.0") > 0 || - navigator.userAgent.indexOf("MSIE 7.0") > 0 || - navigator.userAgent.indexOf("MSIE 6.0") > 0) - GooFlow.prototype.useSVG = ""; - else GooFlow.prototype.useSVG = "1"; - //初始化区域图的对象 - this.$id = bgDiv.attr("id"); - this.$bgDiv = bgDiv; //最父框架的DIV - this.$bgDiv.addClass("GooFlow"); - var width = (property.width || 800) - 2; - var height = (property.height || 500) - 2; - this.$bgDiv.css({ width: width + "px", height: height + "px" }); - this.$tool = null; //左侧工具栏对象 - this.$head = null; //顶部标签及工具栏按钮 - this.$title = "newFlow_1"; //流程图的名称 - this.$nodeRemark = {}; //每一种结点或按钮的说明文字,JSON格式,key为类名,value为用户自定义文字说明 - this.$nowType = "cursor"; //当前要绘制的对象类型 - this.$lineData = {}; - this.$lineCount = 0; - this.$nodeData = {}; - this.$nodeCount = 0; - this.$areaData = {}; - this.$areaCount = 0; - this.$lineDom = {}; - this.$nodeDom = {}; - this.$areaDom = {}; - this.$max = property.initNum || 1; //计算默认ID值的起始SEQUENCE - this.$focus = ""; //当前被选定的结点/转换线ID,如果没选中或者工作区被清空,则为"" - this.$cursor = "default"; //鼠标指针在工作区内的样式 - this.$editable = false; //工作区是否可编辑 - this.$deletedItem = {}; //在流程图的编辑操作中被删除掉的元素ID集合,元素ID为KEY,元素类型(node,line.area)为VALUE - var headHeight = 0; - var tmp = ""; - if (property.haveHead) { - tmp = "
"; - for (var x = 0; x < property.headBtns.length; ++x) { - tmp += "" - } - tmp += "
"; - this.$head = $(tmp); - this.$bgDiv.append(this.$head); - headHeight = 24; - //以下是当工具栏按钮被点击时触发的事件自定义(虚函数),格式为function(),因为可直接用THIS操作对象本身,不用传参；用户可自行重定义: - this.onBtnNewClick = null; //新建流程图按钮被点中 - this.onBtnOpenClick = null; //打开流程图按钮定义 - this.onBtnSaveClick = null; //保存流程图按钮定义 - this.onFreshClick = null; //重载流程图按钮定义 - if (property.headBtns) - this.$head.on("click", - { inthis: this }, - function(e) { - if (!e) e = window.event; - var tar = e.target; - if (tar.tagName == "DIV" || tar.tagName == "SPAN") return; - else if (tar.tagName == "a") tar = tar.childNode[0]; - var This = e.data.inthis; - //定义顶部操作栏按钮的事件 - switch ($(tar).attr("class")) { - case "ico_new": - if (This.onBtnNewClick != null) This.onBtnNewClick(); - break; - case "ico_open": - if (This.onBtnOpenClick != null) This.onBtnOpenClick(); - break; - case "ico_save": - if (This.onBtnSaveClick != null) This.onBtnSaveClick(); - break; - case "ico_undo": - This.undo(); - break; - case "ico_redo": - This.redo(); - break; - case "ico_reload": - if (This.onFreshClick != null) This.onFreshClick(); - break; - } - }); - } - var toolWidth = 0; - if (property.haveTool) { - this.$bgDiv.append("
"); - this.$tool = this.$bgDiv.find(".GooFlow_tool div"); - //未加代码：加入绘图工具按钮 - this.$tool.append(""); - if (property.toolBtns && property.toolBtns.length > 0) { - tmp = ""; - for (var i = 0; i < property.toolBtns.length; ++i) { - tmp += ""; //加入自定义按钮 - } - this.$tool.append(tmp); - } - //加入区域划分框工具开关按钮 - if (property.haveGroup) - this.$tool.append(""); - toolWidth = 31; - this.$nowType = "cursor"; - //绑定各个按钮的点击事件 - this.$tool.on("click", - { inthis: this }, - function(e) { - if (!e) e = window.event; - var tar; - switch (e.target.tagName) { - case "SPAN": - return false; - case "DIV": - return false; - case "B": - tar = e.target.parentNode; - break; - case "A": - tar = e.target; - }; - var type = $(tar).attr("type"); - e.data.inthis.switchToolBtn(type); - return false; - }); - this.$editable = true; //只有具有工具栏时可编辑 - } - width = width - toolWidth - 8; - height = height; - this.$bgDiv.append("
"); - this.$workArea = $("
") - .attr({ - "unselectable": "on", - "onselectstart": 'return false', - "onselect": 'document.selection.empty()' - }); - this.$bgDiv.children(".GooFlow_work").append(this.$workArea); - this.$draw = null; //画矢量线条的容器 - this.initDraw("draw_" + this.$id, width, height); - this.$group = null; - if (property.haveGroup) - this.initGroup(width, height); - if (this.$editable) { - this.$workArea.on("click", - { inthis: this }, - function(e) { - if (!e) e = window.event; - if (!e.data.inthis.$editable) return; - var type = e.data.inthis.$nowType; - if (type == "cursor") { - var t = $(e.target); - var n = t.prop("tagName"); - if (n == "svg" || - (n == "DIV" && t.prop("class").indexOf("GooFlow_work") > -1) || - n == "LABEL") e.data.inthis.blurItem(); - return; - } else if (type == "direct" || type == "group") return; - var X, Y; - var ev = mousePosition(e), t = getElCoordinate(this); - X = ev.x - t.left + this.parentNode.scrollLeft - 1; - Y = ev.y - t.top + this.parentNode.scrollTop - 1; - - var name = "新建节点" + e.data.inthis.$max; - var type = e.data.inthis.$nowType; - if (type == 'startround') { - name = "开始"; - } - if (type == 'endround') { - name = "结束"; - } - var executeadd = true; - var _nodeData = e.data.inthis.$nodeData; - $.each(_nodeData, - function(i) { - if (_nodeData[i].name == name) { - alert(name + '节点不能重复'); - executeadd = false; - return false; - } - }) - if (executeadd) { - 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: '', }); - e.data.inthis.$max++; - } - }); - //划线时用的绑定 - this.$workArea.mousemove({ inthis: this }, - function(e) { - if (e.data.inthis.$nowType != "direct") return; - var lineStart = $(this).data("lineStart"); - if (!lineStart) return; - var ev = mousePosition(e), t = getElCoordinate(this); - var X, Y; - X = ev.x - t.left + this.parentNode.scrollLeft; - Y = ev.y - t.top + this.parentNode.scrollTop; - var line = document.getElementById("GooFlow_tmp_line"); - if (GooFlow.prototype.useSVG != "") { - line.childNodes[0].setAttribute("d", - "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y); - line.childNodes[1].setAttribute("d", - "M " + lineStart.x + " " + lineStart.y + " L " + X + " " + Y); - if (line.childNodes[1].getAttribute("marker-end") == "url(\"#arrow2\")") - line.childNodes[1].setAttribute("marker-end", "url(#arrow3)"); - else line.childNodes[1].setAttribute("marker-end", "url(#arrow2)"); - } else line.points.value = lineStart.x + "," + lineStart.y + " " + X + "," + Y; - }); - this.$workArea.mouseup({ inthis: this }, - function(e) { - if (e.data.inthis.$nowType != "direct") return; - $(this).css("cursor", "auto").removeData("lineStart"); - var tmp = document.getElementById("GooFlow_tmp_line"); - if (tmp) e.data.inthis.$draw.removeChild(tmp); - }); - //为了结点而增加的一些集体delegate绑定 - this.initWorkForNode(); - //对结点进行移动或者RESIZE时用来显示的遮罩层 - this.$ghost = $("
").attr({ - "unselectable": "on", - "onselectstart": 'return false', - "onselect": 'document.selection.empty()' - }); - this.$bgDiv.append(this.$ghost); - this.$textArea = $(""); - this.$bgDiv.append(this.$textArea); - this.$lineMove = $(""); //操作折线时的移动框 - this.$workArea.append(this.$lineMove); - this.$lineMove.on("mousedown", - { inthis: this }, - function(e) { - if (e.button == 2) return false; - var lm = $(this); - lm.css({ "background-color": "#333" }); - var This = e.data.inthis; - var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]); - var X, Y; - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop; - var p = This.$lineMove.position(); - var vX = X - p.left, vY = Y - p.top; - var isMove = false; - document.onmousemove = function(e) { - if (!e) e = window.event; - var ev = mousePosition(e); - var ps = This.$lineMove.position(); - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop; - if (This.$lineMove.data("type") == "lr") { - X = X - vX; - if (X < 0) X = 0; - else if (X > This.$workArea.width()) - X = This.$workArea.width(); - This.$lineMove.css({ left: X + "px" }); - } else if (This.$lineMove.data("type") == "tb") { - Y = Y - vY; - if (Y < 0) Y = 0; - else if (Y > This.$workArea.height()) - Y = This.$workArea.height(); - This.$lineMove.css({ top: Y + "px" }); - } - isMove = true; - } - document.onmouseup = function(e) { - if (isMove) { - var p = This.$lineMove.position(); - if (This.$lineMove.data("type") == "lr") - This.setLineM(This.$lineMove.data("tid"), p.left + 3); - else if (This.$lineMove.data("type") == "tb") - This.setLineM(This.$lineMove.data("tid"), p.top + 3); - } - This.$lineMove.css({ "background-color": "transparent" }); - if (This.$focus == This.$lineMove.data("tid")) { - This.focusItem(This.$lineMove.data("tid")); - } - document.onmousemove = null; - document.onmouseup = null; - } - }); - this.$lineOper = - $( - ""); //选定线时显示的操作框 - this.$workArea.append(this.$lineOper); - this.$lineOper.on("click", - { inthis: this }, - function(e) { - if (!e) e = window.event; - if (e.target.tagName != "A" && e.target.tagName != "B") return; - var This = e.data.inthis; - var id = $(this).data("tid"); - switch ($(e.target).attr("class")) { - case "b_x": - This.delLine(id); - this.style.display = "none"; - break; - case "b_l1": - This.setLineType(id, "lr"); - break; - case "b_l2": - This.setLineType(id, "tb"); - break; - case "b_l3": - This.setLineType(id, "sl"); - break; - break; - } - }); - - //下面绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身 - //当操作某个单元（结点/线/分组块）被添加时，触发的方法，返回FALSE可阻止添加事件的发生 - //格式function(id，type,json)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json. - this.onItemAdd = null; - //当操作某个单元（结点/线/分组块）被删除时，触发的方法，返回FALSE可阻止删除事件的发生 - //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 - this.onItemDel = null; - //当操作某个单元（结点/分组块）被移动时，触发的方法，返回FALSE可阻止移动事件的发生 - //格式function(id，type,left,top)：id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值，线line不支持移动,left是新的左边距坐标，top是新的顶边距坐标 - this.onItemMove = null; - //当操作某个单元（结点/线/分组块）被重命名时，触发的方法，返回FALSE可阻止重命名事件的发生 - //格式function(id,name,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称 - this.onItemRename = null; - //当操作某个单元（结点/线）被由不选中变成选中时，触发的方法，返回FALSE可阻止选中事件的发生 - //格式function(id,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中 - this.onItemFocus = null; - //当操作某个单元（结点/线）被由选中变成不选中时，触发的方法，返回FALSE可阻止取消选中事件的发生 - //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中 - this.onItemBlur = null; - //当操作某个单元（结点/分组块）被重定义大小或造型时，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 - //格式function(id，type,width,height)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值;width是新的宽度,height是新的高度 - this.onItemResize = null; - //当移动某条折线中段的位置，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 - //格式function(id，M)：id是单元的唯一标识ID,M是中段的新X(或Y)的坐标 - this.onLineMove = null; - //当变换某条连接线的类型，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 - //格式function(id，type)：id是单元的唯一标识ID,type是连接线的新类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线 - this.onLineSetType = null; - //当用重色标注某个结点/转换线时触发的方法，返回FALSE可阻止重定大小/造型事件的发生 - //格式function(id，type，mark)：id是单元的唯一标识ID,type是单元类型（"node"结点,"line"转换线），mark为布尔值,表示是要标注TRUE还是取消标注FALSE - this.onItemMark = null; - - if (property.useOperStack && this.$editable) { //如果要使用堆栈记录操作并提供“撤销/重做”的功能,只在编辑状态下有效 - this.$undoStack = []; - this.$redoStack = []; - this.$isUndo = 0; - ///////////////以下是构造撤销操作/重做操作的方法 - //为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放40步操作;超过40步时,将自动删掉最旧的一个缓存 - this.pushOper = function(funcName, paras) { - var len = this.$undoStack.length; - if (this.$isUndo == 1) { - this.$redoStack.push([funcName, paras]); - this.$isUndo = false; - if (this.$redoStack.length > 40) this.$redoStack.shift(); - } else { - this.$undoStack.push([funcName, paras]); - if (this.$undoStack.length > 40) this.$undoStack.shift(); - if (this.$isUndo == 0) { - this.$redoStack.splice(0, this.$redoStack.length); - } - this.$isUndo = 0; - } - }; - //将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制，一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制； - //传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参,由JSON对象带入所有要传的信息； - //提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper - this.pushExternalOper = function(func, jsonPara) { - this.pushOper("externalFunc", [func, jsonPara]); - }; - //撤销上一步操作 - this.undo = function() { - if (this.$undoStack.length == 0) return; - var tmp = this.$undoStack.pop(); - this.$isUndo = 1; - if (tmp[0] == "externalFunc") { - tmp[1][0](tmp[1][1]); - } else { - //传参的数量,最多支持6个. - switch (tmp[1].length) { - case 0: - this[tmp[0]](); - break; - case 1: - this[tmp[0]](tmp[1][0]); - break; - case 2: - this[tmp[0]](tmp[1][0], tmp[1][1]); - break; - case 3: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]); - break; - case 4: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]); - break; - case 5: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]); - break; - case 6: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4], tmp[1][5]); - break; - } - } - }; - //重做最近一次被撤销的操作 - this.redo = function() { - if (this.$redoStack.length == 0) return; - var tmp = this.$redoStack.pop(); - this.$isUndo = 2; - if (tmp[0] == "externalFunc") { - tmp[1][0](tmp[1][1]); - } else { - //传参的数量,最多支持6个. - switch (tmp[1].length) { - case 0: - this[tmp[0]](); - break; - case 1: - this[tmp[0]](tmp[1][0]); - break; - case 2: - this[tmp[0]](tmp[1][0], tmp[1][1]); - break; - case 3: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2]); - break; - case 4: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3]); - break; - case 5: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4]); - break; - case 6: - this[tmp[0]](tmp[1][0], tmp[1][1], tmp[1][2], tmp[1][3], tmp[1][4], tmp[1][5]); - break; - } - } - }; - } - $(document).keydown({ inthis: this }, - function(e) { - //绑定键盘操作 - var This = e.data.inthis; - if (This.$focus == "") return; - switch (e.keyCode) { - case 46: //删除 - This.delNode(This.$focus, true); - This.delLine(This.$focus); - break; - } - }); - } - } - - GooFlow.prototype = { - useSVG: "", - getSvgMarker: function(id, color) { - var m = document.createElementNS("http://www.w3.org/2000/svg", "marker"); - m.setAttribute("id", id); - m.setAttribute("viewBox", "0 0 6 6"); - m.setAttribute("refX", 5); - m.setAttribute("refY", 3); - m.setAttribute("markerUnits", "strokeWidth"); - m.setAttribute("markerWidth", 6); - m.setAttribute("markerHeight", 6); - m.setAttribute("orient", "auto"); - var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path.setAttribute("d", "M 0 0 L 6 3 L 0 6 z"); - path.setAttribute("fill", color); - path.setAttribute("stroke-width", 0); - m.appendChild(path); - return m; - }, - initDraw: function(id, width, height) { - var elem; - if (GooFlow.prototype.useSVG != "") { - this.$draw = document.createElementNS("http://www.w3.org/2000/svg", "svg"); //可创建带有指定命名空间的元素节点 - this.$workArea.prepend(this.$draw); - var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); - this.$draw.appendChild(defs); - defs.appendChild(GooFlow.prototype.getSvgMarker("arrow1", "gray")); - defs.appendChild(GooFlow.prototype.getSvgMarker("arrow2", "#ff3300")); - defs.appendChild(GooFlow.prototype.getSvgMarker("arrow3", "#ff3300")); - } else { - this.$draw = document.createElement("v:group"); - this.$draw.coordsize = width * 3 + "," + height * 3; - this.$workArea.prepend("
"); - this.$workArea.children("div")[0].insertBefore(this.$draw, null); - } - this.$draw.id = id; - this.$draw.style.width = width * 3 + "px"; - this.$draw.style.height = +height * 3 + "px"; - //绑定连线的点击选中以及双击编辑事件 - var tmpClk = null; - if (GooFlow.prototype.useSVG != "") tmpClk = "g"; - else tmpClk = "PolyLine"; - if (this.$editable) { - $(this.$draw).delegate(tmpClk, - "click", - { inthis: this }, - function(e) { - e.data.inthis.focusItem(this.id, true); - }); - $(this.$draw).delegate(tmpClk, - "dblclick", - { inthis: this }, - function(e) { - var This = e.data.inthis; - OpenLine(this.id, This); - //var oldTxt, x, y, from, to; - //var This = e.data.inthis; - //if (GooFlow.prototype.useSVG != "") { - // oldTxt = this.childNodes[2].textContent; - // from = this.getAttribute("from").split(","); - // to = this.getAttribute("to").split(","); - //} else { - // oldTxt = this.childNodes[1].innerHTML; - // var n = this.getAttribute("fromTo").split(","); - // from = [n[0], n[1]]; - // to = [n[2], n[3]]; - //} - //if (This.$lineData[this.id].type == "lr") { - // from[0] = This.$lineData[this.id].M; - // to[0] = from[0]; - //} - //else if (This.$lineData[this.id].type == "tb") { - // from[1] = This.$lineData[this.id].M; - // to[1] = from[1]; - //} - //x = (parseInt(from[0], 10) + parseInt(to[0], 10)) / 2 - 60; - //y = (parseInt(from[1], 10) + parseInt(to[1], 10)) / 2 - 12; - //var t = getElCoordinate(This.$workArea[0]); - //This.$textArea.val(oldTxt).css({ - // display: "block", width: 120, height: 14, - // left: t.left + x - This.$workArea[0].parentNode.scrollLeft, - // top: t.top + y - This.$workArea[0].parentNode.scrollTop - //}).data("id", This.$focus).focus(); - //This.$workArea.parent().one("mousedown", function (e) { - // if (e.button == 2) return false; - // This.setName(This.$textArea.data("id"), This.$textArea.val(), "line"); - // This.$textArea.val("").removeData("id").hide(); - //}); - }); - } - }, - initGroup: function(width, height) { - this.$group = - $("
"); //存放背景区域的容器 - this.$workArea.prepend(this.$group); - if (!this.$editable) return; - //区域划分框操作区的事件绑定 - this.$group.on("mousedown", - { inthis: this }, - function(e) { //绑定RESIZE功能以及移动功能 - if (e.button == 2) return false; - var This = e.data.inthis; - if (This.$nowType != "group") return; - if (This.$textArea.css("display") == "block") { - This.setName(This.$textArea.data("id"), This.$textArea.val(), "area"); - This.$textArea.val("").removeData("id").hide(); - return false; - }; - if (!e) e = window.event; - var cursor = $(e.target).css("cursor"); - var id = e.target.parentNode; - switch (cursor) { - case "nw-resize": - id = id.parentNode; - break; - case "w-resize": - id = id.parentNode; - break; - case "n-resize": - id = id.parentNode; - break; - case "move": - break; - default: - return; - } - id = id.id; - var hack = 1; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 0; - var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]); - - var X, Y; - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop; - if (cursor != "move") { - This.$ghost.css({ - display: "block", - width: This.$areaData[id].width - 2 + "px", - height: This.$areaData[id].height - 2 + "px", - top: This.$areaData[id].top + - t.top - - This.$workArea[0].parentNode.scrollTop + - hack + - "px", - left: This.$areaData[id].left + - t.left - - This.$workArea[0].parentNode.scrollLeft + - hack + - "px", - cursor: cursor - }); - var vX = (This.$areaData[id].left + This.$areaData[id].width) - X; - var vY = (This.$areaData[id].top + This.$areaData[id].height) - Y; - } else { - var vX = X - This.$areaData[id].left; - var vY = Y - This.$areaData[id].top; - } - var isMove = false; - This.$ghost.css("cursor", cursor); - document.onmousemove = function(e) { - if (!e) e = window.event; - var ev = mousePosition(e); - if (cursor != "move") { - X = ev.x - - t.left + - This.$workArea[0].parentNode.scrollLeft - - This.$areaData[id].left + - vX; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop - This.$areaData[id].top + vY; - if (X < 200) X = 200; - if (Y < 100) Y = 100; - switch (cursor) { - case "nw-resize": - This.$ghost.css({ width: X - 2 + "px", height: Y - 2 + "px" }); - break; - case "w-resize": - This.$ghost.css({ width: X - 2 + "px" }); - break; - case "n-resize": - This.$ghost.css({ height: Y - 2 + "px" }); - break; - } - } else { - if (This.$ghost.css("display") == "none") { - This.$ghost.css({ - display: "block", - width: This.$areaData[id].width - 2 + "px", - height: This.$areaData[id].height - 2 + "px", - top: This.$areaData[id].top + - t.top - - This.$workArea[0].parentNode.scrollTop + - hack + - "px", - left: This.$areaData[id].left + - t.left - - This.$workArea[0].parentNode.scrollLeft + - hack + - "px", - cursor: cursor - }); - } - X = ev.x - vX; - Y = ev.y - vY; - if (X < t.left - This.$workArea[0].parentNode.scrollLeft) - X = t.left - This.$workArea[0].parentNode.scrollLeft; - else if (X + This.$workArea[0].parentNode.scrollLeft + This.$areaData[id].width > - t.left + This.$workArea.width()) - X = t.left + - This.$workArea.width() - - This.$workArea[0].parentNode.scrollLeft - - This.$areaData[id].width; - if (Y < t.top - This.$workArea[0].parentNode.scrollTop) - Y = t.top - This.$workArea[0].parentNode.scrollTop; - else if (Y + This.$workArea[0].parentNode.scrollTop + This.$areaData[id].height > - t.top + This.$workArea.height()) - Y = t.top + - This.$workArea.height() - - This.$workArea[0].parentNode.scrollTop - - This.$areaData[id].height; - This.$ghost.css({ left: X + hack + "px", top: Y + hack + "px" }); - } - isMove = true; - } - document.onmouseup = function(e) { - This.$ghost.empty().hide(); - document.onmousemove = null; - document.onmouseup = null; - if (!isMove) return; - if (cursor != "move") - This.resizeArea(id, This.$ghost.outerWidth(), This.$ghost.outerHeight()); - else - This.moveArea(id, - X + This.$workArea[0].parentNode.scrollLeft - t.left, - Y + This.$workArea[0].parentNode.scrollTop - t.top); - return false; - } - }); - //绑定修改文字说明功能 - this.$group.on("dblclick", - { inthis: this }, - function(e) { - var This = e.data.inthis; - if (This.$nowType != "group") return; - if (!e) e = window.event; - if (e.target.tagName != "LABEL") return false; - var oldTxt = e.target.innerHTML; - var p = e.target.parentNode; - var x = parseInt(p.style.left, 10) + 18, y = parseInt(p.style.top, 10) + 1; - var t = getElCoordinate(This.$workArea[0]); - This.$textArea.val(oldTxt).css({ - display: "block", - width: 100, - height: 14, - left: t.left + x - This.$workArea[0].parentNode.scrollLeft, - top: t.top + y - This.$workArea[0].parentNode.scrollTop - }).data("id", p.id).focus(); - This.$workArea.parent().one("mousedown", - function(e) { - if (e.button == 2) return false; - if (This.$textArea.css("display") == "block") { - This.setName(This.$textArea.data("id"), This.$textArea.val(), "area"); - This.$textArea.val("").removeData("id").hide(); - } - }); - return false; - }); - //绑定点击事件 - this.$group.mouseup({ inthis: this }, - function(e) { - - var This = e.data.inthis; - if (This.$nowType != "group") return; - if (!e) e = window.event; - switch ($(e.target).attr("class")) { - case "rs_close": - This.delArea(e.target.parentNode.parentNode.id); - return false; //删除该分组区域 - case "bg": - return; - } - switch (e.target.tagName) { - case "LABEL": - return false; - case "B": //绑定变色功能 - var id = e.target.parentNode.id; - switch (This.$areaData[id].color) { - case "red": - This.setAreaColor(id, "yellow"); - break; - case "yellow": - This.setAreaColor(id, "blue"); - break; - case "blue": - This.setAreaColor(id, "green"); - break; - case "green": - This.setAreaColor(id, "red"); - break; - } - return false; - } - if (e.data.inthis.$ghost.css("display") == "none") { - var X, Y; - var ev = mousePosition(e), t = getElCoordinate(this); - X = ev.x - t.left + this.parentNode.parentNode.scrollLeft - 1; - Y = ev.y - t.top + this.parentNode.parentNode.scrollTop - 1; - var color = ["red", "yellow", "blue", "green"]; - 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 - }); - e.data.inthis.$max++; - return false; - } - }); - }, - //每一种类型结点及其按钮的说明文字 - setNodeRemarks: function(remark) { - if (this.$tool != null) { - this.$tool.children("a").each(function() { - this.title = remark[$(this).attr("id").split("btn_")[1]]; - }); - this.$nodeRemark = remark; - } - }, - - //切换左边工具栏按钮,传参TYPE表示切换成哪种类型的按钮 - switchToolBtn: function(type) { - this.$tool.children("#" + this.$id + "_btn_" + this.$nowType.split(" ")[0]) - .attr("class", "GooFlow_tool_btn"); - if (this.$nowType == "group") { - this.$workArea.prepend(this.$group); - for (var key in this.$areaDom) - this.$areaDom[key].addClass("lock").children("div:eq(1)").css("display", "none"); - } - this.$nowType = type; - this.$tool.children("#" + this.$id + "_btn_" + type.split(" ")[0]) - .attr("class", "GooFlow_tool_btndown"); - if (this.$nowType == "group") { - this.blurItem(); - this.$workArea.append(this.$group); - for (var key in this.$areaDom) - this.$areaDom[key].removeClass("lock").children("div:eq(1)").css("display", ""); - } - if (this.$textArea.css("display") == "none") this.$textArea.removeData("id").val("").hide(); - }, - //增加一个流程结点,传参为一个JSON,有id,name,top,left,width,height,type(结点类型)等属性 - addNode: function(id, json) { - if (this.onItemAdd != null && !this.onItemAdd(id, "node", json)) return; - if (this.$undoStack && this.$editable) { - this.pushOper("delNode", [id]); - } - var mark = json.type; - if (json.type != "startround" && json.type != "endround") { - if (!json.width || json.width < 86) json.width = 150; - if (!json.height || json.height < 24) json.height = 65; - if (!json.top || json.top < 0) json.top = 0; - if (!json.left || json.left < 0) json.left = 0; - var hack = 0; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 2; - this.$nodeDom[id] = $("
" + - json.name + - "
"); - if (json.type.indexOf(" mix") > -1) this.$nodeDom[id].addClass(mark); - //json.css = mark; - //json.img = mark; - } else { - json.width = 24; - json.height = 24; - var name = json.name; - if (json.type == 'startround') { - name = "开始"; - } - if (json.type == 'endround') { - name = "结束"; - } - this.$nodeDom[id] = $("
" + - name + - "
"); - } - var ua = navigator.userAgent.toLowerCase(); - if (ua.indexOf('msie') != -1 && ua.indexOf('8.0') != -1) - this.$nodeDom[id].css("filter", - "progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)"); - this.$workArea.append(this.$nodeDom[id]); - this.$nodeData[id] = json; - ++this.$nodeCount; - if (this.$editable) { - this.$nodeData[id].alt = true; - if (this.$deletedItem[id]) delete this.$deletedItem[id]; //在回退删除操作时,去掉该元素的删除记录 - } - }, - initWorkForNode: function() { - //绑定点击事件 - this.$workArea.delegate(".GooFlow_item", - "click", - { inthis: this }, - function(e) { - e.data.inthis.focusItem(this.id, true); - $(this).removeClass("item_mark"); - //if (!$(this).hasClass("item_startround")) { - // LoadrightMenu("#" + this.id); - //} - //if (!$(this).hasClass("item_endround")) { - // LoadrightMenu("#" + this.id); - //} - }); - //绑定右击事件 - this.$workArea.delegate(".GooFlow_item", - "contextmenu", - { inthis: this }, - function(e) { - e.data.inthis.focusItem(this.id, true); - $(this).removeClass("item_mark"); - return false; - }); - //绑定用鼠标移动事件 - this.$workArea.delegate(".ico", - "mousedown", - { inthis: this }, - function(e) { - if (!e) e = window.event; - if (e.button == 2) return false; - var This = e.data.inthis; - if (This.$nowType == "direct") return; - var Dom = $(this).parents(".GooFlow_item"); - var id = Dom.attr("id"); - This.focusItem(id, true); - var hack = 1; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 0; - var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]); - - Dom.children("table").clone().prependTo(This.$ghost); - var X, Y; - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop; - var vX = X - This.$nodeData[id].left, vY = Y - This.$nodeData[id].top; - var isMove = false; - document.onmousemove = function(e) { - if (!e) e = window.event; - var ev = mousePosition(e); - if (X == ev.x - vX && Y == ev.y - vY) return false; - X = ev.x - vX; - Y = ev.y - vY; - - if (isMove && This.$ghost.css("display") == "none") { - This.$ghost.css({ - display: "block", - width: $('#' + id).width() - 2 + "px", - height: $('#' + id).height() - 2 + "px", - top: This.$nodeData[id].top + - t.top - - This.$workArea[0].parentNode.scrollTop + - hack + - "px", - left: This.$nodeData[id].left + - t.left - - This.$workArea[0].parentNode.scrollLeft + - hack + - "px", - cursor: "move" - }); - } - - if (X < t.left - This.$workArea[0].parentNode.scrollLeft) - X = t.left - This.$workArea[0].parentNode.scrollLeft; - else if (X + This.$workArea[0].parentNode.scrollLeft + This.$nodeData[id].width > - t.left + This.$workArea.width()) - X = t.left + - This.$workArea.width() - - This.$workArea[0].parentNode.scrollLeft - - This.$nodeData[id].width; - if (Y < t.top - This.$workArea[0].parentNode.scrollTop) - Y = t.top - This.$workArea[0].parentNode.scrollTop; - else if (Y + This.$workArea[0].parentNode.scrollTop + This.$nodeData[id].height > - t.top + This.$workArea.height()) - Y = t.top + - This.$workArea.height() - - This.$workArea[0].parentNode.scrollTop - - This.$nodeData[id].height; - This.$ghost.css({ left: X + hack + "px", top: Y + hack + "px" }); - isMove = true; - } - document.onmouseup = function(e) { - if (isMove) - This.moveNode(id, - X + This.$workArea[0].parentNode.scrollLeft - t.left, - Y + This.$workArea[0].parentNode.scrollTop - t.top); - This.$ghost.empty().hide(); - document.onmousemove = null; - document.onmouseup = null; - } - }); - if (!this.$editable) return; - //绑定鼠标覆盖/移出事件 - this.$workArea.delegate(".GooFlow_item", - "mouseenter", - { inthis: this }, - function(e) { - if (e.data.inthis.$nowType != "direct") return; - $(this).addClass("item_mark"); - }); - this.$workArea.delegate(".GooFlow_item", - "mouseleave", - { inthis: this }, - function(e) { - if (e.data.inthis.$nowType != "direct") return; - $(this).removeClass("item_mark"); - }); - //绑定连线时确定初始点 - this.$workArea.delegate(".GooFlow_item", - "mousedown", - { inthis: this }, - function(e) { - if (e.button == 2) return false; - var This = e.data.inthis; - if (This.$nowType != "direct") return; - var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]); - var X, Y; - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop; - This.$workArea.data("lineStart", { "x": X, "y": Y, "id": this.id }).css("cursor", "crosshair"); - var line = GooFlow.prototype.drawLine("GooFlow_tmp_line", [X, Y], [X, Y], true, true); - This.$draw.appendChild(line); - }); - //绑定连线时确定结束点 - this.$workArea.delegate(".GooFlow_item", - "mouseup", - { inthis: this }, - function(e) { - var This = e.data.inthis; - if (This.$nowType != "direct") return; - var lineStart = This.$workArea.data("lineStart"); - if (lineStart) - This.addLine(This.$id + "_line_" + This.$max, - { from: lineStart.id, to: this.id, name: "" }); - This.$max++; - }); - //绑定双击编辑事件 - this.$workArea.delegate(".GooFlow_item > .span", - "dblclick", - { inthis: this }, - function(e) { - var This = e.data.inthis; - var type = $('.item_focus').hasClass('item_startround'); - if (type) { - OpenNode(This); - } - //var oldTxt = this.innerHTML; - //var This = e.data.inthis; - //var id = this.parentNode.id; - //var t = getElCoordinate(This.$workArea[0]); - //This.$textArea.val(oldTxt).css({ - // display: "block", height: $(this).height(), width: 100, - // left: t.left + This.$nodeData[id].left - This.$workArea[0].parentNode.scrollLeft - 24, - // top: t.top + This.$nodeData[id].top - This.$workArea[0].parentNode.scrollTop + 26 - //}) - // .data("id", This.$focus).focus(); - //This.$workArea.parent().one("mousedown", function (e) { - // if (e.button == 2) return false; - // This.setName(This.$textArea.data("id"), This.$textArea.val(), "node"); - // This.$textArea.val("").removeData("id").hide(); - //}); - }); - //节点双击事件 - this.$workArea.delegate(".ico + td", - "dblclick", - { inthis: this }, - function(e) { - var This = e.data.inthis; - OpenNode(This); - //var oldTxt = this.innerHTML; - //var This = e.data.inthis; - //var id = $(this).parents(".GooFlow_item").attr("id"); - //var t = getElCoordinate(This.$workArea[0]); - //This.$textArea.val(oldTxt).css({ - // display: "block", width: $(this).width() + 24, height: $(this).height(), - // left: t.left + 24 + This.$nodeData[id].left - This.$workArea[0].parentNode.scrollLeft, - // top: t.top + 2 + This.$nodeData[id].top - This.$workArea[0].parentNode.scrollTop - //}) - // .data("id", This.$focus).focus(); - //This.$workArea.parent().one("mousedown", function (e) { - // if (e.button == 2) return false; - // This.setName(This.$textArea.data("id"), This.$textArea.val(), "node"); - // This.$textArea.val("").removeData("id").hide(); - //}); - }); - //绑定结点的删除功能 - this.$workArea.delegate(".rs_close", - "click", - { inthis: this }, - function(e) { - if (!e) e = window.event; - e.data.inthis.delNode(e.data.inthis.$focus); - return false; - }); - //绑定结点的RESIZE功能 - this.$workArea.delegate(".GooFlow_item > div > div[class!=rs_close]", - "mousedown", - { inthis: this }, - function(e) { - if (!e) e = window.event; - if (e.button == 2) return false; - var cursor = $(this).css("cursor"); - if (cursor == "pointer") { - return; - } - var This = e.data.inthis; - var id = This.$focus; - This.switchToolBtn("cursor"); - e.cancelBubble = true; - e.stopPropagation(); - var hack = 1; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 0; - var ev = mousePosition(e), t = getElCoordinate(This.$workArea[0]); - This.$ghost.css({ - display: "block", - width: This.$nodeData[id].width - 2 + "px", - height: This.$nodeData[id].height - 2 + "px", - top: This.$nodeData[id].top + t.top - This.$workArea[0].parentNode.scrollTop + hack + "px", - left: This.$nodeData[id].left + - t.left - - This.$workArea[0].parentNode.scrollLeft + - hack + - "px", - cursor: cursor - }); - var X, Y; - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop; - var vX = (This.$nodeData[id].left + This.$nodeData[id].width) - X; - var vY = (This.$nodeData[id].top + This.$nodeData[id].height) - Y; - var isMove = false; - This.$ghost.css("cursor", cursor); - document.onmousemove = function(e) { - if (!e) e = window.event; - var ev = mousePosition(e); - X = ev.x - t.left + This.$workArea[0].parentNode.scrollLeft - This.$nodeData[id].left + vX; - Y = ev.y - t.top + This.$workArea[0].parentNode.scrollTop - This.$nodeData[id].top + vY; - if (X < 86) X = 86; - if (Y < 24) Y = 24; - isMove = true; - switch (cursor) { - case "nw-resize": - This.$ghost.css({ width: X - 2 + "px", height: Y - 2 + "px" }); - break; - case "w-resize": - This.$ghost.css({ width: X - 2 + "px" }); - break; - case "n-resize": - This.$ghost.css({ height: Y - 2 + "px" }); - break; - } - } - document.onmouseup = function(e) { - This.$ghost.hide(); - if (!isMove) return; - if (!e) e = window.event; - This.resizeNode(id, This.$ghost.outerWidth(), This.$ghost.outerHeight()); - document.onmousemove = null; - document.onmouseup = null; - } - }); - }, - //获取结点/连线/分组区域的详细信息 - getItemInfo: function(id, type) { - switch (type) { - case "node": - return this.$nodeData[id] || null; - case "line": - return this.$lineData[id] || null; - case "area": - return this.$areaData[id] || null; - } - }, - //取消所有结点/连线被选定的状态 - blurItem: function() { - if (this.$focus != "") { - var jq = $("#" + this.$focus); - if (jq.prop("tagName") == "DIV") { - if (this.onItemBlur != null && !this.onItemBlur(id, "node")) return false; - jq.removeClass("item_focus").children("div:eq(0)").css("display", "none"); - } else { - if (this.onItemBlur != null && !this.onItemBlur(id, "line")) return false; - if (GooFlow.prototype.useSVG != "") { - if (!this.$lineData[this.$focus].marked) { - jq[0].childNodes[1].setAttribute("stroke", "gray"); - jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow1)"); - } - } else { - if (!this.$lineData[this.$focus].marked) jq[0].strokeColor = "gray"; - } - this.$lineMove.hide().removeData("type").removeData("tid"); - if (this.$editable) this.$lineOper.hide().removeData("tid"); - } - } - this.$focus = ""; - return true; - }, - //选定某个结点/转换线 bool:TRUE决定了要触发选中事件，FALSE则不触发选中事件，多用在程序内部调用。 - focusItem: function(id, bool) { - var jq = $("#" + id); - if (jq.length == 0) return; - if (!this.blurItem()) return; //先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行. - if (jq.prop("tagName") == "DIV") { - if (bool && this.onItemFocus != null && !this.onItemFocus(id, "node")) return; - jq.addClass("item_focus"); - if (this.$editable) jq.children("div:eq(0)").css("display", "block"); - this.$workArea.append(jq); - } else { //如果是连接线 - if (this.onItemFocus != null && !this.onItemFocus(id, "line")) return; - if (GooFlow.prototype.useSVG != "") { - jq[0].childNodes[1].setAttribute("stroke", "#ff3300"); - jq[0].childNodes[1].setAttribute("marker-end", "url(#arrow2)"); - } else jq[0].strokeColor = "#ff3300"; - if (!this.$editable) return; - var x, y, from, to; - if (GooFlow.prototype.useSVG != "") { - from = jq.attr("from").split(","); - to = jq.attr("to").split(","); - } else { - var n = jq[0].getAttribute("fromTo").split(","); - from = [n[0], n[1]]; - to = [n[2], n[3]]; - } - from[0] = parseInt(from[0], 10); - from[1] = parseInt(from[1], 10); - to[0] = parseInt(to[0], 10); - to[1] = parseInt(to[1], 10); - //var t=getElCoordinate(this.$workArea[0]); - if (this.$lineData[id].type == "lr") { - from[0] = this.$lineData[id].M; - to[0] = from[0]; - - this.$lineMove.css({ - width: "5px", - height: (to[1] - from[1]) * (to[1] > from[1] ? 1 : -1) + "px", - left: from[0] - 3 + "px", - top: (to[1] > from[1] ? from[1] : to[1]) + 1 + "px", - cursor: "e-resize", - display: "block" - }).data({ "type": "lr", "tid": id }); - } else if (this.$lineData[id].type == "tb") { - from[1] = this.$lineData[id].M; - to[1] = from[1]; - this.$lineMove.css({ - width: (to[0] - from[0]) * (to[0] > from[0] ? 1 : -1) + "px", - height: "5px", - left: (to[0] > from[0] ? from[0] : to[0]) + 1 + "px", - top: from[1] - 3 + "px", - cursor: "s-resize", - display: "block" - }).data({ "type": "tb", "tid": id }); - } - x = (from[0] + to[0]) / 2 - 35; - y = (from[1] + to[1]) / 2 + 6; - this.$lineOper.css({ display: "block", left: x + "px", top: y + "px" }).data("tid", id); - } - this.$focus = id; - this.switchToolBtn("cursor"); - }, - //移动结点到一个新的位置 - moveNode: function(id, left, top) { - if (!this.$nodeData[id]) return; - if (this.onItemMove != null && !this.onItemMove(id, "node", left, top)) return; - if (this.$undoStack) { - var paras = [id, this.$nodeData[id].left, this.$nodeData[id].top]; - this.pushOper("moveNode", paras); - } - if (left < 0) left = 0; - if (top < 0) top = 0; - $("#" + id).css({ left: left + "px", top: top + "px" }); - this.$nodeData[id].left = left; - this.$nodeData[id].top = top; - //重画转换线 - this.resetLines(id, this.$nodeData[id]); - if (this.$editable) { - this.$nodeData[id].alt = true; - } - }, - //设置结点/连线/分组区域的文字信息 - setName: function(id, name, type, setinfo) { - var oldName; - if (type == "node") { //如果是结点 - this.$nodeData[id].setInfo = setinfo; - if (!this.$nodeData[id]) - if (this.$nodeData[id].name == name) - if (this.onItemRename != null && !this.onItemRename(id, name, "node")) - oldName = this.$nodeData[id].name; - this.$nodeData[id].name = name; - if (this.$nodeData[id].type.indexOf("round") > 1) { - this.$nodeDom[id].children(".span").text(name); - } else { - this.$nodeDom[id].find("td:eq(1)").text(name); - var hack = 0; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 2; - var width = this.$nodeDom[id].outerWidth(); - var height = this.$nodeDom[id].outerHeight(); - this.$nodeDom[id].children("table").css({ width: width - 2 + "px", height: height - 2 + "px" }); - this.$nodeData[id].width = width; - this.$nodeData[id].height = height; - } - if (this.$editable) { - this.$nodeData[id].alt = true; - } - //重画转换线 - this.resetLines(id, this.$nodeData[id]); - } else if (type == "line") { //如果是线 - this.$lineData[id].setInfo = setinfo; - if (!this.$lineData[id]) - if (this.$lineData[id].name == name) - if (this.onItemRename != null && !this.onItemRename(id, name, "line")) - oldName = this.$lineData[id].name; - this.$lineData[id].name = name; - if (GooFlow.prototype.useSVG != "") { - this.$lineDom[id].childNodes[2].textContent = name; - } else { - this.$lineDom[id].childNodes[1].innerHTML = name; - var n = this.$lineDom[id].getAttribute("fromTo").split(","); - var x; - if (this.$lineData[id].type != "lr") { - x = (n[2] - n[0]) / 2; - } else { - var Min = n[2] > n[0] ? n[0] : n[2]; - if (Min > this.$lineData[id].M) Min = this.$lineData[id].M; - x = this.$lineData[id].M - Min; - } - if (x < 0) x = x * -1; - this.$lineDom[id].childNodes[1].style.left = - x - this.$lineDom[id].childNodes[1].offsetWidth / 2 + 4 + "px"; - } - if (this.$editable) { - this.$lineData[id].alt = true; - } - } else if (type == "area") { //如果是分组区域 - if (!this.$areaData[id]) return; - if (this.$areaData[id].name == name) return; - if (this.onItemRename != null && !this.onItemRename(id, name, "area")) return; - oldName = this.$areaData[id].name; - this.$areaData[id].name = name; - this.$areaDom[id].children("label").text(name); - if (this.$editable) { - this.$areaData[id].alt = true; - } - } - if (this.$undoStack) { - var paras = [id, oldName, type]; - this.pushOper("setName", paras); - } - }, - //设置结点的尺寸,仅支持非开始/结束结点 - resizeNode: function(id, width, height) { - if (!this.$nodeData[id]) return; - if (this.onItemResize != null && !this.onItemResize(id, "node", width, height)) return; - if (this.$nodeData[id].type == "start" || this.$nodeData[id].type == "end") return; - if (this.$undoStack) { - var paras = [id, this.$nodeData[id].width, this.$nodeData[id].height]; - this.pushOper("resizeNode", paras); - } - var hack = 0; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 2; - this.$nodeDom[id].children("table").css({ width: width - 2 + "px", height: height - 2 + "px" }); - width = this.$nodeDom[id].outerWidth() - hack; - height = this.$nodeDom[id].outerHeight() - hack; - this.$nodeDom[id].children("table").css({ width: width - 2 + "px", height: height - 2 + "px" }); - this.$nodeData[id].width = width; - this.$nodeData[id].height = height; - if (this.$editable) { - this.$nodeData[id].alt = true; - } - //重画转换线 - this.resetLines(id, this.$nodeData[id]); - }, - //删除结点 - delNode: function(id) { - if (!this.$nodeData[id]) return; - if (this.onItemDel != null && !this.onItemDel(id, "node")) return; - //先删除可能的连线 - for (var k in this.$lineData) { - if (this.$lineData[k].from == id || this.$lineData[k].to == id) { - //this.$draw.removeChild(this.$lineDom[k]); - //delete this.$lineData[k]; - //delete this.$lineDom[k]; - this.delLine(k); - } - } - //再删除结点本身 - if (this.$undoStack) { - var paras = [id, this.$nodeData[id]]; - this.pushOper("addNode", paras); - } - delete this.$nodeData[id]; - this.$nodeDom[id].remove(); - delete this.$nodeDom[id]; - --this.$nodeCount; - if (this.$focus == id) this.$focus = ""; - - if (this.$editable) { - //在回退新增操作时,如果节点ID以this.$id+"_node_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中 - if (id.indexOf(this.$id + "_node_") < 0) - this.$deletedItem[id] = "node"; - } - }, - //设置流程图的名称 - setTitle: function(text) { - this.$title = text; - if (this.$head) this.$head.children("label").attr("title", text).text(text); - }, - //载入一组数据 - loadData: function(data) { - if (data == undefined) { - data = ""; - } - var t = this.$editable; - this.$editable = false; - if (data.title) this.setTitle(data.title); - if (data.initNum) this.$max = data.initNum; - for (var i in data.nodes) - this.addNode(data.nodes[i].id, data.nodes[i]); - for (var j in data.lines) - this.addLine(data.lines[j].id, data.lines[j]); - for (var k in data.areas) - this.addArea(data.areas[k].id, data.areas[k]); - this.$editable = t; - this.$deletedItem = {}; - }, - //用AJAX方式，远程读取一组数据 - //参数para为JSON结构，与JQUERY中$.ajax()方法的传参一样 - loadDataAjax: function(para) { - var This = this; - $.ajax({ - type: para.type, - url: para.url, - dataType: "json", - data: para.data, - success: function(msg) { - if (para.dataFilter) para.dataFilter(msg, "json"); - This.loadData(msg); - if (para.success) para.success(msg); - }, - error: function(XMLHttpRequest, textStatus, errorThrown) { - if (para.error) para.error(textStatus, errorThrown); - } - }) - }, - //把画好的整个流程图导出到一个变量中(其实也可以直接访问GooFlow对象的$nodeData,$lineData,$areaData这三个JSON属性) - exportData: function() { - var ret = { - title: this.$title, - nodes: this.$nodeData, - lines: this.$lineData, - areas: this.$areaData, - initNum: this.$max - }; - - var _nodeobject = [], _lineobject = []; - for (var k1 in ret.nodes) { - if (!ret.nodes[k1].marked) { - delete ret.nodes[k1]["marked"]; - } - ret.nodes[k1]["id"] = k1; - _nodeobject.push(ret.nodes[k1]); - } - ret.nodes = _nodeobject; - for (var k2 in ret.lines) { - if (!ret.lines[k2].marked) { - delete ret.lines[k2]["marked"]; - } - ret.lines[k2]["id"] = k2; - _lineobject.push(ret.lines[k2]); - } - ret.lines = _lineobject; - return ret; - }, - //只把本次编辑流程图中作了变更(包括增删改)的元素导出到一个变量中,以方便用户每次编辑载入的流程图后只获取变更过的数据 - exportAlter: function() { - var ret = { nodes: {}, lines: {}, areas: {} }; - for (var k1 in this.$nodeData) { - if (this.$nodeData[k1].alt) { - ret.nodes[k1] = this.$nodeData[k1]; - } - } - for (var k2 in this.$lineData) { - if (this.$lineData[k2].alt) { - ret.lines[k2] = this.$lineData[k2]; - } - } - for (var k3 in this.$areaData) { - if (this.$areaData[k3].alt) { - ret.areas[k3] = this.$areaData[k3]; - } - } - ret.deletedItem = this.$deletedItem; - return ret; - }, - //变更元素的ID,一般用于快速保存后,将后台返回新元素的ID更新到页面中;type为元素类型(节点,连线,区块) - transNewId: function(oldId, newId, type) { - var tmp; - switch (type) { - case "node": - if (this.$nodeData[oldId]) { - tmp = this.$nodeData[oldId]; - delete this.$nodeData[oldId]; - this.$nodeData[newId] = tmp; - } - break; - case "line": - if (this.$lineData[oldId]) { - tmp = this.$lineData[oldId]; - delete this.$lineData[oldId]; - this.$lineData[newId] = tmp; - } - break; - case "area": - if (this.$areaData[oldId]) { - tmp = this.$areaData[oldId]; - delete this.$areaData[oldId]; - this.$areaData[newId] = tmp; - } - break; - } - }, - //清空工作区及已载入的数据 - clearData: function() { - for (var key in this.$nodeData) { - this.delNode(key); - } - for (var key in this.$lineData) { - this.delLine(key); - } - for (var key in this.$areaData) { - this.delArea(key); - } - this.$deletedItem = {}; - }, - //销毁自己 - destrory: function() { - this.$bgDiv.empty(); - this.$lineData = null; - this.$nodeData = null; - this.$lineDom = null; - this.$nodeDom = null; - this.$areaDom = null; - this.$areaData = null; - this.$nodeCount = 0; - this.$areaCount = 0; - this.$areaCount = 0; - this.$deletedItem = {}; - }, - ///////////以下为有关画线的方法 - //绘制一条箭头线，并返回线的DOM - drawLine: function(id, sp, ep, mark, dash) { - var line; - if (GooFlow.prototype.useSVG != "") { - line = document.createElementNS("http://www.w3.org/2000/svg", "g"); - var hi = document.createElementNS("http://www.w3.org/2000/svg", "path"); - var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - - if (id != "") line.setAttribute("id", id); - line.setAttribute("from", sp[0] + "," + sp[1]); - line.setAttribute("to", ep[0] + "," + ep[1]); - hi.setAttribute("visibility", "hidden"); - hi.setAttribute("stroke-width", 9); - hi.setAttribute("fill", "none"); - hi.setAttribute("stroke", "white"); - hi.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]); - hi.setAttribute("pointer-events", "stroke"); - path.setAttribute("d", "M " + sp[0] + " " + sp[1] + " L " + ep[0] + " " + ep[1]); - path.setAttribute("stroke-width", 2.0); - path.setAttribute("stroke-linecap", "round"); - path.setAttribute("fill", "none"); - if (dash) path.setAttribute("style", "stroke-dasharray:6,5"); - if (mark) { - path.setAttribute("stroke", "#ff3300"); - path.setAttribute("marker-end", "url(#arrow2)"); - } else { - path.setAttribute("stroke", "gray"); - path.setAttribute("marker-end", "url(#arrow1)"); - } - line.appendChild(hi); - line.appendChild(path); - line.style.cursor = "crosshair"; - if (id != "" && id != "GooFlow_tmp_line") { - var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); - //text.textContent=id; - line.appendChild(text); - var x = (ep[0] + sp[0]) / 2; - var y = (ep[1] + sp[1]) / 2; - text.setAttribute("text-anchor", "middle"); - text.setAttribute("x", x); - text.setAttribute("y", y - 5); - line.style.cursor = "pointer"; - text.style.cursor = "text"; - } - } else { - line = document.createElement("v:polyline"); - if (id != "") line.id = id; - //line.style.position="absolute"; - line.points.value = sp[0] + "," + sp[1] + " " + ep[0] + "," + ep[1]; - line.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]); - line.strokeWeight = "1.2"; - line.stroke.EndArrow = "Block"; - line.style.cursor = "crosshair"; - if (id != "" && id != "GooFlow_tmp_line") { - var text = document.createElement("div"); - //text.innerHTML=id; - line.appendChild(text); - var x = (ep[0] - sp[0]) / 2; - var y = (ep[1] - sp[1]) / 2; - if (x < 0) x = x * -1; - if (y < 0) y = y * -1; - text.style.left = x + "px"; - text.style.top = y - 6 + "px"; - line.style.cursor = "pointer"; - } - if (dash) line.stroke.dashstyle = "Dash"; - if (mark) line.strokeColor = "#ff3300"; - else line.strokeColor = "gray"; - } - return line; - }, - //画一条只有两个中点的折线 - drawPoly: function(id, sp, m1, m2, ep, mark) { - var poly, strPath; - if (GooFlow.prototype.useSVG != "") { - poly = document.createElementNS("http://www.w3.org/2000/svg", "g"); - var hi = document.createElementNS("http://www.w3.org/2000/svg", "path"); - var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - if (id != "") poly.setAttribute("id", id); - poly.setAttribute("from", sp[0] + "," + sp[1]); - poly.setAttribute("to", ep[0] + "," + ep[1]); - hi.setAttribute("visibility", "hidden"); - hi.setAttribute("stroke-width", 9); - hi.setAttribute("fill", "none"); - hi.setAttribute("stroke", "white"); - strPath = "M " + sp[0] + " " + sp[1]; - if (m1[0] != sp[0] || m1[1] != sp[1]) - strPath += " L " + m1[0] + " " + m1[1]; - if (m2[0] != ep[0] || m2[1] != ep[1]) - strPath += " L " + m2[0] + " " + m2[1]; - strPath += " L " + ep[0] + " " + ep[1]; - hi.setAttribute("d", strPath); - hi.setAttribute("pointer-events", "stroke"); - path.setAttribute("d", strPath); - path.setAttribute("stroke-width", 2.0); - path.setAttribute("stroke-linecap", "round"); - path.setAttribute("fill", "none"); - if (mark) { - path.setAttribute("stroke", "#ff3300"); - path.setAttribute("marker-end", "url(#arrow2)"); - } else { - path.setAttribute("stroke", "gray"); - path.setAttribute("marker-end", "url(#arrow1)"); - } - poly.appendChild(hi); - poly.appendChild(path); - var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); - //text.textContent=id; - poly.appendChild(text); - var x = (m2[0] + m1[0]) / 2; - var y = (m2[1] + m1[1]) / 2; - text.setAttribute("text-anchor", "middle"); - text.setAttribute("x", x); - text.setAttribute("y", y - 5); - text.style.cursor = "text"; - poly.style.cursor = "pointer"; - } else { - poly = document.createElement("v:Polyline"); - if (id != "") poly.id = id; - poly.filled = "false"; - strPath = sp[0] + "," + sp[1]; - if (m1[0] != sp[0] || m1[1] != sp[1]) - strPath += " " + m1[0] + "," + m1[1]; - if (m2[0] != ep[0] || m2[1] != ep[1]) - strPath += " " + m2[0] + "," + m2[1]; - strPath += " " + ep[0] + "," + ep[1]; - poly.points.value = strPath; - poly.setAttribute("fromTo", sp[0] + "," + sp[1] + "," + ep[0] + "," + ep[1]); - poly.strokeWeight = "1.2"; - poly.stroke.EndArrow = "Block"; - var text = document.createElement("div"); - //text.innerHTML=id; - poly.appendChild(text); - var x = (m2[0] - m1[0]) / 2; - var y = (m2[1] - m1[1]) / 2; - if (x < 0) x = x * -1; - if (y < 0) y = y * -1; - text.style.left = x + "px"; - text.style.top = y - 4 + "px"; - poly.style.cursor = "pointer"; - if (mark) poly.strokeColor = "#ff3300"; - else poly.strokeColor = "gray"; - } - return poly; - }, - //计算两个结点间要连直线的话，连线的开始坐标和结束坐标 - calcStartEnd: function(n1, n2) { - var X_1, Y_1, X_2, Y_2; - //X判断： - var x11 = n1.left, x12 = n1.left + n1.width, x21 = n2.left, x22 = n2.left + n2.width; - //结点2在结点1左边 - if (x11 >= x22) { - X_1 = x11; - X_2 = x22; - } - //结点2在结点1右边 - else if (x12 <= x21) { - X_1 = x12; - X_2 = x21; - } - //结点2在结点1水平部分重合 - else if (x11 <= x21 && x12 >= x21 && x12 <= x22) { - X_1 = (x12 + x21) / 2; - X_2 = X_1; - } else if (x11 >= x21 && x12 <= x22) { - X_1 = (x11 + x12) / 2; - X_2 = X_1; - } else if (x21 >= x11 && x22 <= x12) { - X_1 = (x21 + x22) / 2; - X_2 = X_1; - } else if (x11 <= x22 && x12 >= x22) { - X_1 = (x11 + x22) / 2; - X_2 = X_1; - } - - //Y判断： - var y11 = n1.top, y12 = n1.top + n1.height, y21 = n2.top, y22 = n2.top + n2.height; - //结点2在结点1上边 - if (y11 >= y22) { - Y_1 = y11; - Y_2 = y22; - } - //结点2在结点1下边 - else if (y12 <= y21) { - Y_1 = y12; - Y_2 = y21; - } - //结点2在结点1垂直部分重合 - else if (y11 <= y21 && y12 >= y21 && y12 <= y22) { - Y_1 = (y12 + y21) / 2; - Y_2 = Y_1; - } else if (y11 >= y21 && y12 <= y22) { - Y_1 = (y11 + y12) / 2; - Y_2 = Y_1; - } else if (y21 >= y11 && y22 <= y12) { - Y_1 = (y21 + y22) / 2; - Y_2 = Y_1; - } else if (y11 <= y22 && y12 >= y22) { - Y_1 = (y11 + y22) / 2; - Y_2 = Y_1; - } - return { "start": [X_1, Y_1], "end": [X_2, Y_2] }; - }, - //计算两个结点间要连折线的话，连线的所有坐标 - calcPolyPoints: function(n1, n2, type, M) { - //开始/结束两个结点的中心 - var SP = { x: n1.left + n1.width / 2, y: n1.top + n1.height / 2 }; - var EP = { x: n2.left + n2.width / 2, y: n2.top + n2.height / 2 }; - var sp = [], m1 = [], m2 = [], ep = []; - //如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标 - //粗略计算起始点 - sp = [SP.x, SP.y]; - ep = [EP.x, EP.y]; - if (type == "lr") { - //粗略计算2个中点 - m1 = [M, SP.y]; - m2 = [M, EP.y]; - //再具体分析修改开始点和中点1 - if (m1[0] > n1.left && m1[0] < n1.left + n1.width) { - m1[1] = (SP.y > EP.y ? n1.top : n1.top + n1.height); - sp[0] = m1[0]; - sp[1] = m1[1]; - } else { - sp[0] = (m1[0] < n1.left ? n1.left : n1.left + n1.width) - } - //再具体分析中点2和结束点 - if (m2[0] > n2.left && m2[0] < n2.left + n2.width) { - m2[1] = (SP.y > EP.y ? n2.top + n2.height : n2.top); - ep[0] = m2[0]; - ep[1] = m2[1]; - } else { - ep[0] = (m2[0] < n2.left ? n2.left : n2.left + n2.width) - } - } - //如果是允许中段可上下移动的折线,则参数M为可移动中段线的Y坐标 - else if (type == "tb") { - //粗略计算2个中点 - m1 = [SP.x, M]; - m2 = [EP.x, M]; - //再具体分析修改开始点和中点1 - if (m1[1] > n1.top && m1[1] < n1.top + n1.height) { - m1[0] = (SP.x > EP.x ? n1.left : n1.left + n1.width); - sp[0] = m1[0]; - sp[1] = m1[1]; - } else { - sp[1] = (m1[1] < n1.top ? n1.top : n1.top + n1.height) - } - //再具体分析中点2和结束点 - if (m2[1] > n2.top && m2[1] < n2.top + n2.height) { - m2[0] = (SP.x > EP.x ? n2.left + n2.width : n2.left); - ep[0] = m2[0]; - ep[1] = m2[1]; - } else { - ep[1] = (m2[1] < n2.top ? n2.top : n2.top + n2.height); - } - } - return { start: sp, m1: m1, m2: m2, end: ep }; - }, - //初始化折线中段的X/Y坐标,mType='rb'时为X坐标,mType='tb'时为Y坐标 - getMValue: function(n1, n2, mType) { - if (mType == "lr") { - return (n1.left + n1.width / 2 + n2.left + n2.width / 2) / 2; - } else if (mType == "tb") { - return (n1.top + n1.height / 2 + n2.top + n2.height / 2) / 2; - } - }, - //增加一条线 - addLine: function(id, json) { - if (this.onItemAdd != null && !this.onItemAdd(id, "line", json)) return; - if (this.$undoStack && this.$editable) { - this.pushOper("delLine", [id]); - } - var n1 = null, n2 = null; //获取开始/结束结点的数据 - if (json.from == json.to) return; - //避免两个节点间不能有一条以上同向接连线 - for (var k in this.$lineData) { - if ((json.from == this.$lineData[k].from && json.to == this.$lineData[k].to)) - return; - } - var n1 = this.$nodeData[json.from], n2 = this.$nodeData[json.to]; //获取开始/结束结点的数据 - if (!n1 || !n2) return; - var res; - if (json.type && json.type != "sl") - res = GooFlow.prototype.calcPolyPoints(n1, n2, json.type, json.M); - else - res = GooFlow.prototype.calcStartEnd(n1, n2); - if (!res) return; - this.$lineData[id] = {}; - this.$lineData[id].setInfo = json.setInfo; - this.$lineData[id].id = json.id; - if (json.type) { - this.$lineData[id].type = json.type; - this.$lineData[id].M = json.M; - } else this.$lineData[id].type = "sl"; //默认为直线 - this.$lineData[id].from = json.from; - this.$lineData[id].to = json.to; - this.$lineData[id].name = json.name; - if (json.mark) this.$lineData[id].marked = json.mark; - else this.$lineData[id].marked = false; - - if (this.$lineData[id].type == "sl") - this.$lineDom[id] = GooFlow.prototype.drawLine(id, res.start, res.end, json.mark); - else - this.$lineDom[id] = GooFlow.prototype.drawPoly(id, res.start, res.m1, res.m2, res.end, json.mark); - this.$draw.appendChild(this.$lineDom[id]); - if (GooFlow.prototype.useSVG == "") { - this.$lineDom[id].childNodes[1].innerHTML = json.name; - if (this.$lineData[id].type != "sl") { - var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]); - if (Min > res.m2[0]) Min = res.m2[0]; - if (Min > res.m1[0]) Min = res.m1[0]; - this.$lineDom[id].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - - Min - - this.$lineDom[id].childNodes[1].offsetWidth / 2 + - 4; - Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]); - if (Min > res.m2[1]) Min = res.m2[1]; - if (Min > res.m1[1]) Min = res.m1[1]; - this.$lineDom[id].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - - Min - - this.$lineDom[id].childNodes[1].offsetHeight / 2; - } else - this.$lineDom[id].childNodes[1].style.left = - ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - - this.$lineDom[id].childNodes[1].offsetWidth) / - 2 + - 4; - } else this.$lineDom[id].childNodes[2].textContent = json.name; - ++this.$lineCount; - if (this.$editable) { - this.$lineData[id].alt = true; - if (this.$deletedItem[id]) delete this.$deletedItem[id]; //在回退删除操作时,去掉该元素的删除记录 - } - }, - //重构所有连向某个结点的线的显示，传参结构为$nodeData数组的一个单元结构 - resetLines: function(id, node) { - for (var i in this.$lineData) { - var other = null; //获取结束/开始结点的数据 - var res; - if (this.$lineData[i].from == id) { //找结束点 - other = this.$nodeData[this.$lineData[i].to] || null; - if (other == null) continue; - if (this.$lineData[i].type == "sl") - res = GooFlow.prototype.calcStartEnd(node, other); - else - res = GooFlow.prototype.calcPolyPoints(node, - other, - this.$lineData[i].type, - this.$lineData[i].M) - if (!res) break; - } else if (this.$lineData[i].to == id) { //找开始点 - other = this.$nodeData[this.$lineData[i].from] || null; - if (other == null) continue; - if (this.$lineData[i].type == "sl") - res = GooFlow.prototype.calcStartEnd(other, node); - else - res = GooFlow.prototype.calcPolyPoints(other, - node, - this.$lineData[i].type, - this.$lineData[i].M); - if (!res) break; - } - if (other == null) continue; - this.$draw.removeChild(this.$lineDom[i]); - if (this.$lineData[i].type == "sl") { - this.$lineDom[i] = GooFlow.prototype.drawLine(i, res.start, res.end, this.$lineData[i].marked); - } else { - this.$lineDom[i] = - GooFlow.prototype.drawPoly(i, res.start, res.m1, res.m2, res.end, this.$lineData[i].marked); - } - this.$draw.appendChild(this.$lineDom[i]); - if (GooFlow.prototype.useSVG == "") { - this.$lineDom[i].childNodes[1].innerHTML = this.$lineData[i].name; - if (this.$lineData[i].type != "sl") { - var Min = (res.start[0] > res.end[0] ? res.end[0] : res.start[0]); - if (Min > res.m2[0]) Min = res.m2[0]; - if (Min > res.m1[0]) Min = res.m1[0]; - this.$lineDom[i].childNodes[1].style.left = (res.m2[0] + res.m1[0]) / 2 - - Min - - this.$lineDom[i].childNodes[1].offsetWidth / 2 + - 4; - Min = (res.start[1] > res.end[1] ? res.end[1] : res.start[1]); - if (Min > res.m2[1]) Min = res.m2[1]; - if (Min > res.m1[1]) Min = res.m1[1]; - this.$lineDom[i].childNodes[1].style.top = (res.m2[1] + res.m1[1]) / 2 - - Min - - this.$lineDom[i].childNodes[1].offsetHeight / 2 - - 4; - } else - this.$lineDom[i].childNodes[1].style.left = - ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - - this.$lineDom[i].childNodes[1].offsetWidth) / - 2 + - 4; - } else this.$lineDom[i].childNodes[2].textContent = this.$lineData[i].name; - } - }, - //重新设置连线的样式 newType= "sl":直线, "lr":中段可左右移动型折线, "tb":中段可上下移动型折线 - setLineType: function(id, newType) { - if (!newType || newType == null || newType == "" || newType == this.$lineData[id].type) return false; - if (this.onLineSetType != null && !this.onLineSetType(id, newType)) return; - if (this.$undoStack) { - var paras = [id, this.$lineData[id].type]; - this.pushOper("setLineType", paras); - if (this.$lineData[id].type != "sl") { - var para2 = [id, this.$lineData[id].M]; - this.pushOper("setLineM", para2); - } - } - var from = this.$lineData[id].from; - var to = this.$lineData[id].to; - this.$lineData[id].type = newType; - var res; - //如果是变成折线 - if (newType != "sl") { - var res = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], - this.$nodeData[to], - this.$lineData[id].type, - this.$lineData[id].M); - this.setLineM(id, this.getMValue(this.$nodeData[from], this.$nodeData[to], newType), true); - } - //如果是变回直线 - else { - delete this.$lineData[id].M; - this.$lineMove.hide().removeData("type").removeData("tid"); - res = GooFlow.prototype.calcStartEnd(this.$nodeData[from], this.$nodeData[to]); - if (!res) return; - this.$draw.removeChild(this.$lineDom[id]); - this.$lineDom[id] = GooFlow.prototype.drawLine(id, - res.start, - res.end, - this.$lineData[id].marked || this.$focus == id); - this.$draw.appendChild(this.$lineDom[id]); - if (GooFlow.prototype.useSVG == "") { - this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name; - this.$lineDom[id].childNodes[1].style.left = - ((res.end[0] - res.start[0]) * (res.end[0] > res.start[0] ? 1 : -1) - - this.$lineDom[id].childNodes[1].offsetWidth) / - 2 + - 4; - } else - this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name; - } - if (this.$focus == id) { - this.focusItem(id); - } - if (this.$editable) { - this.$lineData[id].alt = true; - } - }, - //设置折线中段的X坐标值（可左右移动时）或Y坐标值（可上下移动时） - setLineM: function(id, M, noStack) { - if (!this.$lineData[id] || M < 0 || !this.$lineData[id].type || this.$lineData[id].type == "sl") - return false; - if (this.onLineMove != null && !this.onLineMove(id, M)) return false; - if (this.$undoStack && !noStack) { - var paras = [id, this.$lineData[id].M]; - this.pushOper("setLineM", paras); - } - var from = this.$lineData[id].from; - var to = this.$lineData[id].to; - this.$lineData[id].M = M; - var ps = GooFlow.prototype.calcPolyPoints(this.$nodeData[from], - this.$nodeData[to], - this.$lineData[id].type, - this.$lineData[id].M); - this.$draw.removeChild(this.$lineDom[id]); - this.$lineDom[id] = GooFlow.prototype.drawPoly(id, - ps.start, - ps.m1, - ps.m2, - ps.end, - this.$lineData[id].marked || this.$focus == id); - this.$draw.appendChild(this.$lineDom[id]); - if (GooFlow.prototype.useSVG == "") { - this.$lineDom[id].childNodes[1].innerHTML = this.$lineData[id].name; - var Min = (ps.start[0] > ps.end[0] ? ps.end[0] : ps.start[0]); - if (Min > ps.m2[0]) Min = ps.m2[0]; - if (Min > ps.m1[0]) Min = ps.m1[0]; - this.$lineDom[id].childNodes[1].style.left = (ps.m2[0] + ps.m1[0]) / 2 - - Min - - this.$lineDom[id].childNodes[1].offsetWidth / 2 + - 4; - Min = (ps.start[1] > ps.end[1] ? ps.end[1] : ps.start[1]); - if (Min > ps.m2[1]) Min = ps.m2[1]; - if (Min > ps.m1[1]) Min = ps.m1[1]; - this.$lineDom[id].childNodes[1].style.top = (ps.m2[1] + ps.m1[1]) / 2 - - Min - - this.$lineDom[id].childNodes[1].offsetHeight / 2 - - 4; - } else this.$lineDom[id].childNodes[2].textContent = this.$lineData[id].name; - if (this.$editable) { - this.$lineData[id].alt = true; - } - }, - //删除转换线 - delLine: function(id) { - if (!this.$lineData[id]) return; - if (this.onItemDel != null && !this.onItemDel(id, "node")) return; - if (this.$undoStack) { - var paras = [id, this.$lineData[id]]; - this.pushOper("addLine", paras); - } - this.$draw.removeChild(this.$lineDom[id]); - delete this.$lineData[id]; - delete this.$lineDom[id]; - if (this.$focus == id) this.$focus = ""; - --this.$lineCount; - if (this.$editable) { - //在回退新增操作时,如果节点ID以this.$id+"_line_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中 - if (id.indexOf(this.$id + "_line_") < 0) - this.$deletedItem[id] = "line"; - } - this.$lineOper.hide(); - }, - //用颜色标注/取消标注一个结点或转换线，常用于显示重点或流程的进度。 - //这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法，实际运用中可用于跟踪流程的进度。 - markItem: function(id, type, mark) { - if (type == "node") { - if (!this.$nodeData[id]) return; - if (this.onItemMark != null && !this.onItemMark(id, "node", mark)) return; - this.$nodeData[id].marked = mark || false; - if (mark) this.$nodeDom[id].addClass("item_mark"); - else this.$nodeDom[id].removeClass("item_mark"); - - } else if (type == "line") { - if (!this.$lineData[id]) return; - if (this.onItemMark != null && !this.onItemMark(id, "line", mark)) return; - this.$lineData[id].marked = mark || false; - if (GooFlow.prototype.useSVG != "") { - if (mark) { - this.$nodeDom[id].childNodes[1].setAttribute("stroke", "#ff3300"); - this.$nodeDom[id].childNodes[1].setAttribute("marker-end", "url(#arrow2)"); - } else { - this.$nodeDom[id].childNodes[1].setAttribute("stroke", "gray"); - this.$nodeDom[id].childNodes[1].setAttribute("marker-end", "url(#arrow1)"); - } - } else { - if (mark) this.$nodeDom[id].strokeColor = "#ff3300"; - else this.$nodeDom[id].strokeColor = "gray" - } - } - if (this.$undoStatck) { - var paras = [id, type, !mark]; - this.pushOper("markItem", paras); - } - }, - ////////////////////////以下为区域分组块操作 - moveArea: function(id, left, top) { - if (!this.$areaData[id]) return; - if (this.onItemMove != null && !this.onItemMove(id, "area", left, top)) return; - if (this.$undoStack) { - var paras = [id, this.$areaData[id].left, this.$areaData[id].top]; - this.pushOper("moveNode", paras); - } - if (left < 0) left = 0; - if (top < 0) top = 0; - $("#" + id).css({ left: left + "px", top: top + "px" }); - this.$areaData[id].left = left; - this.$areaData[id].top = top; - if (this.$editable) { - this.$areaData[id].alt = true; - } - }, - //删除区域分组 - delArea: function(id) { - if (!this.$areaData[id]) return; - if (this.$undoStack) { - var paras = [id, this.$areaData[id]]; - this.pushOper("addArea", paras); - } - if (this.onItemDel != null && !this.onItemDel(id, "node")) return; - delete this.$areaData[id]; - this.$areaDom[id].remove(); - delete this.$areaDom[id]; - --this.$areaCount; - if (this.$editable) { - //在回退新增操作时,如果节点ID以this.$id+"_area_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中 - if (id.indexOf(this.$id + "_area_") < 0) - this.$deletedItem[id] = "area"; - } - }, - //设置区域分组的颜色 - setAreaColor: function(id, color) { - if (!this.$areaData[id]) return; - if (this.$undoStack) { - var paras = [id, this.$areaData[id].color]; - this.pushOper("setAreaColor", paras); - } - if (color == "red" || color == "yellow" || color == "blue" || color == "green") { - this.$areaDom[id].removeClass("area_" + this.$areaData[id].color).addClass("area_" + color); - this.$areaData[id].color = color; - } - if (this.$editable) { - this.$areaData[id].alt = true; - } - }, - //设置区域分块的尺寸 - resizeArea: function(id, width, height) { - if (!this.$areaData[id]) return; - if (this.onItemResize != null && !this.onItemResize(id, "area", width, height)) return; - if (this.$undoStack) { - var paras = [id, this.$areaData[id].width, this.$areaData[id].height]; - this.pushOper("resizeArea", paras); - } - var hack = 0; - if (navigator.userAgent.indexOf("8.0") != -1) hack = 2; - this.$areaDom[id].children(".bg").css({ width: width - 2 + "px", height: height - 2 + "px" }); - width = this.$areaDom[id].outerWidth(); - height = this.$areaDom[id].outerHeight(); - this.$areaDom[id].children("bg").css({ width: width - 2 + "px", height: height - 2 + "px" }); - this.$areaData[id].width = width; - this.$areaData[id].height = height; - if (this.$editable) { - this.$areaData[id].alt = true; - } - }, - addArea: function(id, json) { - if (this.onItemAdd != null && !this.onItemAdd(id, "area", json)) return; - if (this.$undoStack && this.$editable) { - this.pushOper("delArea", [id]); - } - this.$areaDom[id] = $("
" + - "
"); - this.$areaData[id] = json; - this.$group.append(this.$areaDom[id]); - if (this.$nowType != "group") this.$areaDom[id].children("div:eq(1)").css("display", "none"); - ++this.$areaCount; - if (this.$editable) { - this.$areaData[id].alt = true; - if (this.$deletedItem[id]) delete this.$deletedItem[id]; //在回退删除操作时,去掉该元素的删除记录 - } - }, - //重构整个流程图设计器的宽高 - reinitSize: function(width, height) { - var w = (width || 800) - 2; - var h = (height || 500) - 2; - this.$bgDiv.css({ height: h + "px", width: w + "px" }); - var headHeight = 0, hack = 10; - if (this.$head != null) { - headHeight = 24; - hack = 7; - } - if (this.$tool != null) { - this.$tool.css({ height: h - headHeight - hack + "px" }); - } - w -= 39; - h = h - headHeight - (this.$head != null ? 5 : 8); - this.$workArea.parent().css({ height: h + "px", width: w + "px" }); - this.$workArea.css({ height: h * 3 + "px", width: w * 3 + "px" }); - if (GooFlow.prototype.useSVG == "") { - this.$draw.coordsize = w * 3 + "," + h * 3; - } - this.$draw.style.width = w * 3 + "px"; - this.$draw.style.height = +h * 3 + "px"; - if (this.$group == null) { - this.$group.css({ height: h * 3 + "px", width: w * 3 + "px" }); - } - } - } - //将此类的构造函数加入至JQUERY对象中 - jQuery.extend({ - createGooFlow: function(bgDiv, property) { - return new GooFlow(bgDiv, property); - } - }); - - //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 - function getElCoordinate(dom) { - var t = dom.offsetTop; - var l = dom.offsetLeft; - dom = dom.offsetParent; - while (dom) { - t += dom.offsetTop; - l += dom.offsetLeft; - dom = dom.offsetParent; - }; - return { - top: t, - left: l - }; - } - - //兼容各种浏览器的,获取鼠标真实位置 - function mousePosition(ev) { - if (!ev) ev = window.event; - if (ev.pageX || ev.pageY) { - return { x: ev.pageX, y: ev.pageY }; - } - return { - x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft, - y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop - }; - } - - exports('flow-ui/gooflow'); - }); - diff --git a/OpenAuth.Mvc/js/flow-ui/img/1.png b/OpenAuth.Mvc/js/flow-ui/img/1.png deleted file mode 100644 index 5dfd0b95310ea049d3aeb2456d19c6ed79e96d11..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2818 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 Zfrd#g1&O{%zMuercRK8N$NpIIzX3pz(JTM} diff --git a/OpenAuth.Mvc/js/flow-ui/img/10.png b/OpenAuth.Mvc/js/flow-ui/img/10.png deleted file mode 100644 index b6d6de78b839fc7dd6687cdbc980f49ad2c8fed3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2096 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 diff --git a/OpenAuth.Mvc/js/flow-ui/img/2.png b/OpenAuth.Mvc/js/flow-ui/img/2.png deleted file mode 100644 index 07c94382ea4b10da9d1c7557bfde86f1dc286197..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2038 zcmZ8hc{JPk7XKv?OVEmaiy>9rNb)06Vp^d=QbUQQ)+y3RVo5Y&t&(8IlB#7=En1Y) zO>5{3hgO?WouO5_XkM#m4xV0Gz}*HA+>#@mYutZ$t9o=ZPK6*VE<$3tyG3#EesSGvo?007CN zQ{4hN6LZyWoCpu&-*Q5qjW<8Ky6c5x+$IEFec&|dB9bp=lm};CZ91J>5axf);@_62 z+?{fXdRW_>-P8KoKB-7w(<0x-x?rYEap5WP_w7>sSIq-F=CAiY_AK|j%;3M~HE^49 zLi&g9RIRMDm5YxCKf<^E*v$#M@_qL0Kf{Bnl25HXh&-1}gbjU4eY;Zo+&~B0vJ;pU zd!0+34V0a4w&9U~vn70Wb>wn=H&UhWjY#(~Qiuo_KcYNw?hHl_B09wyQRc?*@5S_} zW6tjHbQR@z;Fc(lvh^`+dJZ9Xx7aN+P<;I-f}k!nLzmMjQ6slRd&MVYjr1jkO2``iC9*xTSF&bloPnY;`9=#I6}GpI!A32^owUau?8XL(yzZ!EX_>>T z5v7N)6L-{4!k!IvIU78NC#aCouTtWV?>7|fS0EBwn+vHhi3OK1x@$B2E1~!{7qt+)U~r9t48W=Mbzxd zPff%6_fG0hu2?TvYAUxWu3WB%q2K(3mz;QT1=W?`j-b@+GJEc66wr@ofqm=V@GzNE z)^Bg-+1K#FF)o`I;2V^60De%$YkhAk_A?O$z=tir%~s=-WDnY#6>H2ri`grF#HWkq zbBqK8385%~L5X}a11j_sW(xWqEWME3ls$QzQXr6A&wH#T)N{S5W#y6(d4bWU`Z95w z_w#)8vCy?sWrum-GF*;*lOd6uopQ^2aVq3pbA^X-}g+rw;%Znq5^PP*{FTOKkuikkdHs1O$W^_pLw)j5V)*6I2~$tz-8mVV%F-@}pZhfDZa<{pu&@!i-V)8mJ zW`6A3)2wfWw2m{URQO`XuHjc0RLVlUTrP{3Uu&6(mz%m{srYWmP*<>l&iKXH`Ju%U z-6I_$+uWye*}>1(enGU5l&V#Hzex3eNSB~Lc)QReM0hk>$RaZZEGPi>1dwD$aJB>Y z27-=cdys5T+Cy+669_rsVCDZ168T5Du^Af#q8(^&2ND875*Z|riOzo!eqR7~Lj<1< zhh%=NFfCfZ0_cg+Y?e0aNKs%D9KS;7ncOo4j5iS3Ax8w+gNn|`eEiDbl z-5^01BH{P~_V~*tUr5+^LpYF=k{ClKQ~Au4L>5m-Ci_9qWB|OhehdG9m@n33GL6M$ zbA$kB?{px`O$1?#HtGBqbC`Qn$k~8AEP2C^{9f;*7u%Hd# zIs8P{#vTNGz7U_x6@E!@tmxznE|bs0@mNAU^C-`bo5=pV$mHRZ1x!2$I@yDNy$+5z VXx5$VHZf!c&^>&qH{7Fg{{tFgOVI!T diff --git a/OpenAuth.Mvc/js/flow-ui/img/3.png b/OpenAuth.Mvc/js/flow-ui/img/3.png deleted file mode 100644 index a6061cbf28f818ae8f7643e49523e454b4868d5d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2369 zcmZ9Nc|4SB8^<4G8(T_=gecj~Vwh$gqQTSB)h%-AEPh!mQ#?`2JPBHN@a zsid5|B{@XdIib+8oJZ&Vd`|ECc|P}jJ@<8ef7f+A*Zs#6XJLLyL{Lf)000qVl93f; zQ9BFH2ko}7^;pR8coNJA08pJMwBg1Jo#iMbD>DEHQv`shD**5Vaz#x6Kp-TXaRmS{ z4FDtnTFiz#{48TLBL9exr1&A38ubhVh^aC*B9OgCK4v)i zIChG6U&O3dtUmY7R0x{;W{cH~=dO{l-Nm{wXQCKSDG_^SK~lApRkbFUkxR)DKxqW5 zl(fQoPuIF2KFMB%EJ6?o4cwlvX)$ z$LcEFV)BLmyL6_L5PDb&Q|EGN@W*0*Uz46cC+QZ6dX3!MVbj}uHzHbj=%E}{B#8U|jk)zSY0zLozO`9J#0LDpU6<$G=TK(K%VYJk28J zJMWNBB=_2J_CxXN6u!u%yKdNF>j(9ej5@8s6nr% zEa#|bt)b9w$I;PM&$OjR-vh3daKvgTW4`?yEW4`-!!>s3hueV}$+Hs`{I8;mRX z`d)*oLVWL?`z}kJD?a%}JRo?M;}8Xn=A~vnE{wfo?yMp;r)yAI7rSG1XO zfeinodbumEd45WpUl&@=EhYwI`XAOxVmii#l2tg)OSm+ZLU=4}rL*~KdeMJ;fi+Wh zTgb67i@Y@JcXNy`quj~h$pHuWW9Z}b+rMHDJ;cfv+R>mi1682|y|n|FyjD4M&Jiq?EK|PawD0}ir^|Bg0MxJ(E+fx9A369p^{Jf~ZE*0jT z>UU6R;C52{p=j;Y18-6gR(WQ9URhFZ-^%hGs`&k{j%4muu?P|M>7MiwVSWKV-CWYr zB_K>8bm7r@fvT9In1IB1m3O{b0dkaTC^uT1@4J_pFDfFIeO&pV=@Yp@DUB6etL%9N zYTdTh!pM*TYP49`Mj`$t)p@sf+#AUUhAPbyl+((op^?#Lq_jm=Ln@d6Q;zFPyCWky zH|H@PlVNr0Zl+lFf|`zf=E14$g_~BQIvTH=dTR{fk8}9Lv;t_vXipyrHK*}y)b#6=g$R3BtvumXj|bo&jP#O1QaCY@4`EBp%7UI zJJCmYO@W9hVLL)bQ1kEYla4b38QINkoOkcfG=)qveG1{cn zNtiM#<_E84Z;rF;+5PO)N@~5Cb6ZM1e2`qjl5y;FLTqNSpjpQ>PiRWo$&vLa z5pC-_I{nM1iOGbPWr7~qLp&Gv?CrP{u}@`bb6cn0Xl?!@o3lwL*^XRQ-H`_DLs#%!+W_kL`%Jt}=wJVCV04hS#*V?pJ=;;6L7rD%bsE5QKhbM_EKW zmWLaQ3Q_{7kO4GNXsiYbuYo>BMr(tbXiyWQhQfg;lm{XYV_p9k$+=#D^31C7?u z)FMMP1`^=^5ws4|!Xbg#P6ejlIaaV+02MH%yLnR0+&pO%Z@FU#6auY*m9s=+3BWOD!Xh9-`Ux4Sw_l4$AV#%GvWUoNFI|v&2Q3B~yUls^j zKqwPH7jHKs|Bv}u8U#sHnx_{FKx^U*FA$<2M&g$||7C1x9xSgNr2odAj}UU;7sQN4 zr?NsBRN!Y?ik~mSm&!s?JbX21 pbkBdC6kjAWfPzG$aVX3`I~Iq4di}j7dgm4aW1_iHg@NnkzX5Yb3;h59 diff --git a/OpenAuth.Mvc/js/flow-ui/img/4.png b/OpenAuth.Mvc/js/flow-ui/img/4.png deleted file mode 100644 index dbeffe45d45baf599300518cea803f96cc91179a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2119 zcmZ8h2~?9;7XDchlF$I5VG#iXA|f;-f6RiBvdJojJ%|gkgpi~d0wDxpKtqZmpb%6P zkSb!!q6i2hQbddhiflq*M5-btvebg$$f~IGW9OVYbKZIHo_p{2efOUG&U;yYJ|1Y4 z5efhRw3nxA0Az`48v%#T-Kr~@kWuG2Gn@h7dY(%TiMp@@dai{Yj*`VC6kZtF~|(@p?@ zHF~)^2XRMdif;*wnb`YB-u=FA_RaMDC!llgx7+Jw0Rx2@Mq75et-pj7;joxen7=tU z-wE6Ak8?e5oxQB4`XsXtvA(B`^joyb@<|)m+8v# z7tmv@F_W>Nsxv298=7FLIfeyhQ5jg2Xa3D}ZHaGsL!hoNYyC2OS!Jp-yU+^fb{Mv- z+oUx`Isw1CF&X19w{;E{nTE~o)RUPXQCT)^vhHoqn@hd!fDUyV_Qv0QDo2minqx>s z`?u^EjaL;fzMsCi-=3f!UfDyl`3}Fgu-x+7i62(`mb^~5>XQafb+)2YHCi^md+al; z{1luS`)G5vQ`Tke*4kmw=5#mii2yJ5AOPVK zcRMa}QNs`W_8_izL!|AwhQpU8QpM;(!a}w|&Pw5+;fwE7Y~%%`0SfbAL49B+F^GI) zc?4V2{;VEmG4U8)Mm&A2CMWHH7}ZO&nM&cou7Wr76J>hiy8mX5>r@!ve_*C5tXwfe zSLl$lBKN3lf95XJ4>x|_5hH(HT&6Db7EYH;@dA}j|wYe#tb0zbpVQPIFXesxo zhth68>^pEV_-RLCM{rnL?@karY|svLsJUF0jBG4KFg9JR7rI+xJq#e4)AA znA69(lxropFpjJg4#9n3p}RrF)TXXK+E!&d>w=2>^t#*4 zAbCml;w7!BAaXJK#|~IdIlr{CL@M1UI0b0DeELdXh>Dw1w@*oxk2W~8Za^aq;thRF z1FcniiXjo>Y7*LvCYou)tq_|(5ssGsIapn%r6uOnY-PMER zW^?<3)gR??lUmjVI=b9azFhfL^^I&`jDtj^hw0>wAVdrddZl_$yHpZN>%Y-6_5q1oLKX+}?SQjir&5C3}jM^U|ZrV|G3gA zjx3xKND-ZPqOWZ|+}qsYb)Z2Xu`WDrfS)iV(WY0KR;7GuYOm1ubMdo`UZ{l=;(uE< z0D84M3~!gIL7)02kz0r;Dni7jvxIEO03;$v#S^#TL0S+wpmA^;@W?MQW&Kp2CsbpDIk&5IIo z*C72TG0!2$y00J%9-l2rj$;E~x+28IavbY}*ZTQdhYvY`nOxB@h<8;f^Mi3;N|AyTH_Kf{SS0l Bf(ZZs diff --git a/OpenAuth.Mvc/js/flow-ui/img/5.png b/OpenAuth.Mvc/js/flow-ui/img/5.png deleted file mode 100644 index 1220990389b9afcc811e3047bcffd507901ef396..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2071 zcmZ8ie>l@?8~?H~XGgE0Foa;Kh@AX{Ib6@v;e?Fi4b3K1N&#Aou zJ5ABHXaE3A{d`#*IFgpPi7|YJ8ZKnO0V!m%nE+7r6Xr9|2+nbQUk)1pk~RW>G7SJe z!6oH5033peuOa||egOciWCeEu8F0fma@S54u(Z4`H(twuD=5g1?SmRzfi_$F?X9Op z1OPBP>BnLQiv}lu>G&}y)H>r*!n=+r$g`lG7XGvp3Y3MQABx;ds5MqNe7@@S3;jge%GT$7k9$@B@vpI4#H`l+cXh^!)6Sz>A^EwoJIsFBN1l%y#cd-+j>Ua}i z_^m1BE6ql**+v_cei3VL+E^QYV&^+IF=STtroSQM3_coET4iSehNC@AEA@7Ij|jIe ztLid=UaGg1eN%7Xeh9G|gS*n}tX!o;H2LmiKfA$@8O^U4aPw$35M#_p+mLrL1xV_w zh*64a66@Xfp2l>q!9{pt3JkM=fCr=H@>EPy>-a)9))6i*D)g9$r698X(-1vPcFiu$ zvRE6tZU!BORlEP=(Xe)iv00~ya8XvyW^_HgTCt$$9BKb;#TdGpfhD?T2DNN|d8Y?y z<}z=e)P9R{U#}>@x67`d8}W8+y_LR`;b%N-LKmeeFsLc9;e0mMyzby)`GXZh=SR(& zEMG*rw%(4yt%Dw2%-qxk=-2N?I4jS_cO3PdY)Jc-YD1h*wnhV&>WZzdXLW3I%0#pT z<=n{ZT#3kcnQ`hI+08pS!SQ^0*I~FJGE0iCcAqo;8C3o9`Q+Jm?l-rTUDcYL9~-M* zJfe!%G1aBGmu{Auj9Yeqkvf_S@OGN z=VCA9Rn{rXYLhC?aL(vfc5ZcLL6w<`kC#11B=qst%H$8p_evgpNJHI8|9NAAJPH}&@&;|ozPF5TJ1?AOtpay#jpB^-KYm+N*3rVBd}D^RHa5Eoz1u4vb}w8UOJOn0a*JXw0~a#>rd zuhQ_|$bkdO)xVDBRGFUZ78>Z%0)Il9?+Kq_rZAO8di$wJ=UTddl~Zp$1bIBry;eYp6yi6=KxO?$P|&n_FsRy+LL@H6smSIC~s)=LZA`Sl;yYwBGrRKa1T z7BT7`4i+&-%G0h!VlK9IyZ+sNAfv(&F~V)~)N7WM4*NcNP9@v|>a+^+%MkSMI}ddJ zNBR1;OD~PZn0C3N_z+S3+>_qSinhw~uMO|lyx3J6Z2639FI!y*z79K{UH9qvcgfj> zd}+3pqyF6@X;&2=T6Of9U1Y9D*W+XMg~wx0n+77@8q){*a*^sz|LT~@i+9O$^enmI z=!XkKs{F`<1G*3U%XJc0jrAV(L15}^g%hNC&wOuooI}mYcfI<|?lgZfby{mN)vrZ) zIfw5l?)l-ASN~%sZy`K6o7*`P!u+oH!qnZYtF&mNCCeh z3Q&WsH}3H!nrXMY-KRXh8}+e7hdws(_MdGAQ!HsGPca%_?s!*hUJ-iKzzn&6>!f$d z(C2vX2hp)gVA`(7c5H$d@F+V*6@SJ$Up#-GD`R;npMnZH=GUl zXt%?;uf|!UBQ~X8Efzu-0X$&Qv1K+ znySPlvqb*GO)10Jg_ZCl?F9LRK~X$NK3FiHV5>@iGbCFo__Q3kRN;1i-@9 z%fi8;Ly|~3oh9WTk_h4;I(;t;O#r}aOAW;T!+aS{r~3-TLJtb=bi$3IHh}jZ7kuJT@nx z?ck3SSo4)mkT?lO5VnB3ytm`O5yM^XSKSbf9}q2$6~H$@6iFq5<$I7zr4TVe41Gxm z0$zeb%$LRy;sg+p9~FleON4(F`EkSqIiCo^2FQP$GztOsIx}pqhDQN@J^?I^cf|4k E0$OistpET3 diff --git a/OpenAuth.Mvc/js/flow-ui/img/6.png b/OpenAuth.Mvc/js/flow-ui/img/6.png deleted file mode 100644 index e1e26c631ae56e7a12724b10af32e98177f5779c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1933 zcmZ8ic~p~E7XLy>Si%;=76eS#lr7|o5HRAxk^zbVgdl<_kdRFp5|UsDpd=Io6xoy( zlu?RBzzSB-il9jA0wS^uAe$^YSVX0ufD;%C^I_+lGV|Vf_nvp}@Atd++&|vS2@3Gh z)-=%s06^Q%*E<;U#Py?&glw3~au(!NIUY0*0JxEl`W%CR?l`7zFbx2bZ2&-?0RSsd zNd5)@5+UN-XaJy;0DzIOtZBbHlt424eY}CS^<93i>MRsdllal7YU5g(dM1ulvI%cU z|FfUB2c0`Ud!ELP4ApN-+kUe2u?<5%-MZ9fD72v(#WWfGM?N*=oM)zCQ{SoTMuSMr z;g!%EO_+!vy;HUohJ#nYvDiZSL4J$6x9@-z?Kkv60mKuktkG_U5^k zl(n^#?t9ZO#PIx{BUAN9->lyG?#GS_qSX)qLq$)C^r*$stP{$bdn&0J2GmJhk6C8S zcbZ8BPhYQ|so-LUJ{|ABR(=>Yuh$K?jy5)i<*8&T>b7a=s*b*n)TfTNB8j@4u#i^g zpVTu_(Dn8(on;H5she&YfK;T{77)L;QkgUtqLj!+?Q<8F2eA%z|yx>H@gSl?{jvCvlp8cfeQbC;_%5`W=kF9H$?&8pyBn}mtc?4mty=$)pC2J&`{p&&+_y)oYQbIQyBCrV>}=}O zO4wo=+--R|p2N^cLX0uS!hJjC_$bx!g!b!r_F1e<_xqhAZRc&@`J@K)S~iYk=wEIp z#3UHpSnh1E%5JPV9-fOoa$j@#Tz!~gD{VNJY{I6ETUzwDush$GTgBGAdWQ*8IU?$) zdpT@(C|fq$_e#}#It)GOFzyk;LFa_VZi^tUfTkhmaWima@gatpk{z89+et#a;Je83 zvztexx#=SR)}@DP1xe$KO&D{B`$|uL#NrQ~vzxCoVgsCdBQ!Ib~ z2SL+4cP;L5hc>S5!Gg!+-3tTtLl!#rZFE>5aQHWw*}+V^g&8ly@I75QS2d>4oJ4aa z=3#DsS6K0bzKGi>4T0T>Uk&En7=HshTEDI8)0xzp?=*kXrqoS~zLSaNzhgSn?kR1=R&%$d|R(~;_)=PPZ_<&)XIap>DIv9Nr zMMi&GKJr?R`QT-kbu{K6aItS%WfS(qTt7-a@yYitTB~r;57hyN?#1q~9o`#H->iYV z5qR4KF+0l0o2vLkcx7Ak?+@ytleNWXo@zZ#%_~^E3-jwP(~o|iVv=A7epQ0yRjO}& zzQq!IckF?<`optUi}{9-V}(Ct#k(MH2A)2Yq@&yo!xuR!N6(pgkuVl zlh9O`Y77x*>lMTTwnQ2uVgY{q7!HdT!{IUGaIOR*0dyqe_Jd?xk{daS?2P-XI*u!m z2q{iZQmK@{TPHyWA`t{4&e(8e03>X@E==bp@);D0w}6?*XT?h>lpqKy2EeMdW~cwd zd?`(#__BB$t^@!{ZeFP#atLFzLFd1iFkY;LyAJ6&gC2t**bNXGkI$0Gge>4oS5Crs z&Yt=M>-}uhq0u1}06K$iBqFq2emCC-eNn)s4LTvbWN6w1lC!_(;x#{WC>ymQ8yf5f zuz6pzpb0o}1$@@}97Ftb|FB$CSApmpi+PzHNd;hGdlf0zS$F% diff --git a/OpenAuth.Mvc/js/flow-ui/img/7.png b/OpenAuth.Mvc/js/flow-ui/img/7.png deleted file mode 100644 index 3dfb1234dd89800d94fa8d75baa2ff13ee5e1477..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2574 zcmeHJ3sVzU6uzKF8buyHz#tM+YO8@H8v=w7OGT(aP1FzzqbQG%gb|yCILkdTcJRD7aXL{w9_BZo!ve6JLmhpbLY(7 znboY|F15rH@BjeIzyLoUj5O@Am;m1q%^wxRFj2givlxKFy;BAwCqYaU1n@WjB+dsQ zbsGQ!FqNtYAOQ-E5dg3b0$>-HdwC@r0P~&|%lQ6~uxVfJ|M&kB_@@c*<%whWc+OaI zY%y9LgJX*^)mY|V79W_5X~*Y3Nd89%o0?3fo%yF`!;iin<#B^y{QEW8b{?5LZ@LAR zHFFBq6y0v==xDi91mPt1{s;X~KYC#Vx4f=#aH>N04)u3+z^X&uzzEhApg{~WAYB?k zcQ!7-VOm%pNxazZGz!7gJdDu9H6Otn223~HuoXPPZqOL6AcQB}-0aQ>!O64{i#CqI zIsiy%H*~-RjoEe317Jp&!eqK_i*ZcNPJrA&Hno#sxD9LVlipe-!HQYbS4;f{nq;^j z2qvR}9RJC!Q}I?zM*PDj0{|0J1N|2B1F8iP_Tbu$s=CUWUmGfJ{!$gN0`at>I+dp$ z-FIQ<4+k%813pevE6=$dnLI7MNZE_e2&!3lCe}#6_bQ9%T3+U*-=wjUPQB6KU{9Ex zb1?hRnot5k-)S($NF`CLpS^5rd-=?$>uT3WD8y2MEd6wAW9_5r zd$)Xuw9lB%3>P+u#CBmgGe4tUdwlC&^`qM9Yg3~6=(6=;$-YrMWl-$u#4kmnFB4bC z1}S+_zR6+hm!W*;GXpN?^H0x#*^GbY>95$aC4|r4(0n-c}V=-E-%aJ&l_^eBicyOS+iWjXq#J`HJ0jKDF^Dl zsH*0@5Y~nitj}dAnvCxH{6f*2GwLkD>!(9^W2xzyvunyLT7B}5N_q#I9FXftPmTRq zIe6Q_7oG*-lV?73KHh1)FZ6zyx`KdniKtJjuTR&QO}k9bIZ7&9(>G^AR!PaSwH7n) zm!woT9QH0zY*pHEWe>7v=zl0pw_A8YS~`5>X#3T(jl|)WQq#4HB|EH~SeqhDpYObN zs`w>m+QZ}JNp^mVJ~r7*c>d)0C$fF7npItIHCd;)d7mfrR`m$19UC77?ZJ6F%xT-v zZgtWPFJ9}*yH&iTFRwhVN83RTIlu1bWP>jKwRPd|@u%le#4{UcThw8;gzwJfON5Tr ze}sE)FbwR@DV4XBZ5YyOq}H3!{U_2d6BgjcW3Fh)~65eSRQ_L(w(?Yqv5*uykp-gK4!OGHNCQ_i~O_i!G34Ug36lt z&R!aS{VpW%h-em{L0S+RxQCgUg}bTQ+tTJj9-k1n|Opq|ds?#JaR?v>#S=)_f5tilK1 z_UQ6S`LPGg))o3B_P1THU79wLywL)9IL<8}c-zw?5RtN{F#z}_H0oks0sS>Ro}Zxp zp=fj@Dr5akPs47w^1c91PL;s9A&XqKx#Zd zPMNMyKj4hCX0ZZ<5^)R)5IS>7^5Rs;u^Z>}juRq@Mq@C_?cFvlkTQE5g(Hy(QFWXU zjO>aUCl~t^eU0sBybp&DSpZ=mOvH;xN9fK?6P+Q&cAQVJBoR)VLT7&EJ5+KZ5mv*; zRafx>fk?7m2q!>|QOJbY9Fz(LN{yGGBY+}|j8{tp3OPkCM5%&kxvNAbexDS`sqsny e6@eS@7=61jDR8gZ^@>*53IzId{m%JDr2Pd~pOo+b diff --git a/OpenAuth.Mvc/js/flow-ui/img/9.png b/OpenAuth.Mvc/js/flow-ui/img/9.png deleted file mode 100644 index bea676864c7c8fb41f7e65b1cedf09fdf94eecf7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3184 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 diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_bg.png b/OpenAuth.Mvc/js/flow-ui/img/gooflow_bg.png deleted file mode 100644 index fd2f44d437dd961def8cebe4545ecd937f1cd603..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 249 zcmeAS@N?(olHy`uVBq!ia0vp^j6iJ4!3HE7{xuo_DVAa<&kznEsNqQI0P;BtJR*x3 z7`Q%wFr(8NlNmrknG)BClHmNblJdl&R0hYC{G?O`x6Go{^8BLgVg=`56Shs47Xa0X zfz&w{r6!hS=I1GdWag$a7?|iATId@Z)Eak7F}3uZwODfi5A((Bga5>5 zb%|tV%wenGoPW;B_|nFwo6F+fhbr7{xwq~aQ{CdjyPGx^<=HeAKYpfo!shBlg;1B? lsgs|L&RSEzA diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_blank.gif b/OpenAuth.Mvc/js/flow-ui/img/gooflow_blank.gif deleted file mode 100644 index d29c4d7050c410dbdfe243deee9be3b6ca9bdd4d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 70 zcmZ?wbhEHb@Y1QfPujp0InYyzyJUM diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_blank2.gif b/OpenAuth.Mvc/js/flow-ui/img/gooflow_blank2.gif deleted file mode 100644 index 432177d03b2f8faf4515ef9d9ecba7a3fd658a02..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 58 zcmZ?wbhEHb LE&LtNz+epk4%HGn diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_blank3.gif b/OpenAuth.Mvc/js/flow-ui/img/gooflow_blank3.gif deleted file mode 100644 index 94b25f9532bc36e69b0f3c84b750c958e2c3195c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 79 zcmZ?wbhEHblw^=(XkcKNIdkU!|Nj+#vM{hS{AbW%00NK<1Cv@$|H{*E&oi_X-Rj=# hS33V)>!TM9^E{WmYRh`dbzD%Baqi!{y8;;)tN~MVA7TIi diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_btn_bg.png b/OpenAuth.Mvc/js/flow-ui/img/gooflow_btn_bg.png deleted file mode 100644 index c976eb875e17efc018dff7c336592c81aa4b09a6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 336 zcmeAS@N?(olHy`uVBq!ia0vp^j6l4LgAGXLOQ_oeDVAa<&kznEsNqQI0P;BtJR*x3 z7`Q%wFr(8NlNmrku@cva66d1S#FEVXJcW?V+*AewV|^n_eM6)BFE&;IRmgx;1m~xf zlqVLYGB~E>C#5R5WfrBD=NDxcD>w(6ux+}$0H|(-r;B5V#>BM&mVAdC1U}D5xyhwz z+y6M(rd|F*(51j)j#S^t0=Y(<+>17@k*wx>yy1T5ZHWUrRvt`qz3@nMO&+ht?q&v~ ziY0wp&(FL0)8eXV)3rHfPGOs^zN}eQod2biLveO^>-_h>xgCTmc5PAmvaileh(UFi zYN6|IIs?(Qsp9ejXSZmV2)}YBLa>X=*O^s0`=i&YJlm1M&pLDiS Z{C$a=>WVXS{{r32;OXk;vd$@?2>{lhe3<|M diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_bullet.png b/OpenAuth.Mvc/js/flow-ui/img/gooflow_bullet.png deleted file mode 100644 index b84caa5fe49a4612244ff59b66c16541ffb93a2a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1426 zcmchVi#HTl9LMjh)Fk$ZSxhIAhK95o+9Rzz#-l-ICXd8eDkCe!n3+aNG8$T%p~pmJ zHlnONl68c<%4?EHNzo{xA*RVti$r&?Q>Q;+Kj-}JJ-_eop6~gc-~FY~DBCsER;d91 zG~CF}Ug*|D;e=H|XRh_(#exc(}A9#f2bke;`B{ah^(IpY&=qY@I4Gt!YcdXE}#`y3n?P)u1@r0pe;0SasuR?I5!5UFv;sx>-N0 zO3tX3C$|9R?U#(oG2UGeSU#FquN7AZCex0Or1QN?W&S17qm|%O5^Ff+n0wJ1Rt11@ z;iUW_QvNXcS}!~jx;6Lp7tY?0OdcZt-9f(Bf=bmuvsq&pd<){oH1V}5q-sX*avfi(H8=D$Qq^oBFNztw*+9{#E zxQ@&8057~39I+dis4fnkKJso-Ij{IIClgO(89M9>#rc?M32K%3kxW`8zB6y)xph;~ z7bzW%D?8X6dks0|=82PX?cZmY^XDoSiU7BwVHZ`C!Pz<(wj@7~z!wIKHC9i@v!?qy_bX~1vHP@-W7L}SGj4{=GH_BYK#o#m$j9qu2w`IQW&@t&JuVY8Q5(U zk;?$>$b4ABqji0wS_Id5dSICjPErn6qeIFP0Ihgwj(+aN*VFC>bji)d> ze%@)HK-;MBGV^t~@$THNCfy1RGgYUaoFqv&9mh(}RXxSE`CI=~njR60E1AHTsA2dF z&kftp3zk0cYX~X$FvfG=tnVoldg@=+;^uHLv0}poJC&BqWQTCuW23Pdb2T-eGi|Fs zE{s>jbVkR&zbN0TGM$T}v*Dr6B`WLnHs*B5`22WpIDe+4VAuLH>fv;z( zZ!wP_F(29^AV#5tlzvlTh=wx?$p@xpNQb71J2*Jrb z9aVmcHC?AF5LKQrDCm!{qU_K+^oqsJ5xnrAWlf$?S-=DsYVX$kQ_l%4B5-q|INv1g GN&F8hE94&l diff --git a/OpenAuth.Mvc/js/flow-ui/img/gooflow_icon2.png b/OpenAuth.Mvc/js/flow-ui/img/gooflow_icon2.png deleted file mode 100644 index 173fe010b51f21e59237d0870784824ba3f930c6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1952 zcmcIl`9IVP6dh6avTw;=+4ptIK87!iee7Avj2Xj>h7ftOlqC}pHLBMbj|SnN)G^ZtSN+xy|%bMO6}b3f;|o8{_kFUTju2Lgcv0SAaXn~T}7QNJj?}`dG?s$ddbu7=;+8af6O>{TJ!eU|K0q@{qUD7Z`hHvV%(iQ zK*GYpN=ixw1_lra1P+HIk;u5XxXjE? zGzi2m@-H|>XMWpfFJ)uwd}2Is$e6egJOX4Lio1ePfTHn;I2;}mtzhe6ywX;m!`4as ztFy%;LSoQ3tb!*x5&_aR(9ze`(bFf-A8vv`C$s>FwI?ctMdXhzH5R(%CXjJ==%ku# zBac~&)HB(sqoWLcZB(&u9>-F%4R26Ym!Mi;5T|afikddq_u1hl9dzQK2#$#G8a!%ENfA?S&jzDtYDXPK#tktcr-<6kFmzC*}X6!spJTY$wjc>Qo!dSeNi*%CF!)-b1|fM69GXvBZI$8-!87+1Xr|z zZ*c5tQ7s^Af;nL!wvI0Iuw|I51X&N#9eX0Oqjs(E>tSda z@no35wW-RQoy0GrT{A4-+sI3 zMrhof>BlIijK&-i8dv%J2M6OZ^k@?Lv1CMu5KeU^r_r;K7g(63;yCO^`{1d=L{x%w ze7<*60l7B6xlI0B-cgO=s-;PhR2I$Sdy?Lq3t-0EXJdH3b&`u28E=G-s=FeVH$CJS zxvtmTySSHY3D1HV^G#)V?~oeKafhdkrA#jm6~Va7g{y-JQ`aY@uwRpQwmu-9kDRl2 zHG1oMX$^|12C_H9moqCEvN9=zY!jen;TT;rP{)1tnIPj4J*RsV{WRB0{?>x)(m3@! zuQt-s&5+)6I^Ur4+c0XVwnO`2N4p{;lYVcxCEyZ98tWTH4@mx*rRE?2Q@<1zSf7`l z&0UbpygaL8DIuX18f|O#a8I?EB{^7?9FEcVIWD3(-6}~NSR2~06v>eIb602u{}Sb2 z;A2V^-|va=#t71sWh`QPXHX7}d)saPKT#IUSEwxTgN?%IsU`&?fM$MCF9uf#cB1ZF zx}pVDfN`-}tq(Z&k>%lXu=v|~nq1OSOCPzG`t%=BRLT9hB*L5JgWso`AQpYq^Cc=# zFEaO%K#?{@nfI1$UYt*8JA*GwH`@pu=^HKdWhV*cFGC$2 z725<34p~X5ML$uMb113k`&#IN&A$gq7DoIE`sR>@iluZV z>R?YbaydgeV>bF_{k~|VuM3dlzYo} zr2B?<^_JmT71-AGakHZPwR*j!Nv#@sffVlR_q(L)>!tJz4Qg&stb;tmU)@QL37kWI zx!B|dh^%zyIMLFw>nV3J@>bnk$pjRn$_AYtVC!V|r^o7d(`xyrn*28}O3C^SlIq06 z1sJ-06DZf+2M_Yng|cTQ_7=;i10g5YMUEP=u6_yin1W~tVK~}Vnv$I z05u3+tkl|VXRHq4kKONw-j-ATqE8crSvV1oJtJh)-5X(DE+x#qaBhlwj=z~X*{zW_ zN`e$O;8k|WXYV1)AF0@l;i8uQ;Hd;_H}3^VI%Nk-54!_E)V#0(@u^KEs36mzkYX9x!e$L)vy4}e^r0G|-o z|NsB17OjJzMY@YW1I1ZNg8YIRLOcGm?!up@Q6|lOG7LM+b{%`rG<0zt45n?&(3%vJOD=6nYP)VC zVnl@|gk|DR8T%)se{%N1{S?hhC^{(gpdw%cd`QuG;ak5j{^8FS7 zfQo~?H51O-8%s$Mjw9heEWt@W(28LNz}-~DXSM>oNBP+^8307=1t2CKfED;x%s2o- zJOC3u08q05&=Op$KWq*c6n!1-tihL!r=am>8UPC24%SvI`<9x_L1(>QohQ+O0htMd z3Yy384|8iWeSQ*zCe+?{y6P%;lbU0AE56kK-qlgJWOa1-+CRcxdc7^ty6XG#!7r|D zuI1U(q^rKV?|*z!fq0^6Teag*aB!(auG*}lYFFoUr)i_l@$wwE2}bI_gRlWl=X2jT zyzexlp_{*)(gq9$1A-tmC3!Vky8M}VH8x7VM=t+O!vUX77wKg;E#1(~wNj}xJ3l`_ zC=?JEf(wM&j1@^A0b_S<@jYk!}7Tcj6U} zfmq9ex9D`Hva)jewFI>q+An+7*4A1gA|r>NlQBL63(=SP+I_W+##Aa*^sYU_h+ei$ z+_SQ<=9q=$8C+q8;2g_aMs>`E6Fmd31^?=*ItIuv7O_t53V z5i5_^f`ZD*8OlQ+ylDONa?VeCNyX_WhAVic5={Kka$DNI;i0-}F>cK_Bc-sZaPM9v zW6BFPBHE$1p*(23$ceP)}#l_Qbi+LuY=c@y|N-~(&jl_4h7uZiu&&*h8 zDl4uM=S<2h@(R1j+`)UPqC?Kqynu7(j2bH@d!*9sO7hv!voVj`7keHo?ksdEoq1MB z(X_R#z!{34fPe0mxF0!!oRTfea&>jl%x`D(9!(OC~+`6`)wUnn{rck?b$c|{P}a* zpRyMK@_OJw9F`8fW`on$%f zS81!)!o}di;<}EmF|k?AIk`nu5AxrM4Q`z~^i*LJ2DMty~g`wY#*UBFcf@?~*UM&CT&f+pvWi1_o^z8l7T;SIm#It=k~a7W}1O*LPlg z-A&#P81!NeyZjC+KCwg=)e_q9ZZjFJQSjQ(CPJtYcy7nNbimS7b*;OVV5zQ}UZQ@> z#j@T*N&gB{U)oH5s z03kuP=ohJ<2&LJg^ZSf1#t>#57ouh(S>h}hyo+mU5P8x~u@}u;48`LgKKQRnTwTvb zt*);&>3)#OQe^c`V{_r=J6DW4kfX(#TA+0E)D45$>w|Gke+)>i3P%L13n^wdoxg+{ zW_3i};GWPM=`ON!k6Bq+VIt?2MJmkp(YUy#L!!@1W{pDOrzp=}ys`@8MXk5|K&Hv% z$7Ez1LTg>*7c`FRJ;=C!#p&kgfLD^WFT&+R6WFAN&FXM>b^TOrSs;^4R_PfsysEtK2b9(8F{ zisip-ifEiBH3zTi!PmV3WOEGiXG0vSUl<2YfQToMFnBTsPht@$RDuZ=Pcp*85pUBc zxA->!kMGY7IJ+SrVBnW%%);ZTWFnPF{I4KI(IXiaFg6@c@dKc6b{GdZ@YsPI20M`J z_cO{EYl1bwP*8^n#;7wU#@@zc6xl@~)HI-`5;RXglfJpAU6dVI1 zn*Wa+<@!TGFoD{0M+GKyz9AS~9tS!r;DE1Z!U;kGEvnp{{>O>If+;{C5s5^SDTz$< z4Y+X(Mv&k1Il_&AXN@Hh9BH)rj0?ZPWuI@#u1p6IzzycW1Hc9Gc^q5-B)}0467e_= z`_x&kA3p@^7xK4nKmQO6mlufrwho^TcaUO={~9PHEWC%1<$16daIkT*uAupx{|{bu BvLFBe diff --git a/OpenAuth.Mvc/js/flow/GooFlow.css b/OpenAuth.Mvc/js/flow/GooFlow.css new file mode 100644 index 00000000..0c96bc8c --- /dev/null +++ b/OpenAuth.Mvc/js/flow/GooFlow.css @@ -0,0 +1,195 @@ +v\:group,v\:rect,v\:imagedata,v\:oval,v\:line,v\:polyline,v\:stroke,v\:textbox { display:inline-block;background:transparent } +::-ms-clear,::-ms-reveal{display:none;} +/*总体样式*/ +.GooFlow{ + background:#f1f1f1;border:#ddd 1px solid;position:relative; + -moz-user-select:none;-webkit-user-select:none;border-radius:4px;color:#333 +} +.GooFlow,.GooFlow *{ + -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; font-size:14px;line-height:1.42857143; + font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, Arial, sans-serif; +} +.GooFlow:before,.GooFlow:after,.GooFlow *:before,.GooFlow *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} +.GooFlow i{ + display:block;width:18px;height:18px;overflow:hidden;font-size:18px;color:#777;text-align:center;margin:0 auto; + filter:Alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7;text-shadow:0.5px 0 #fff,0 0.5px #fff;line-height:1; +} +.GooFlow a.a_disabled,.GooFlow a.a_disabled:hover {border:0 !important;padding:4px 6px;background: transparent !important; cursor: not-allowed !important;} +.GooFlow a.a_disabled i:before{color:#ccc !important;} +/*绘图区的样式*/ +.GooFlow_work{position:absolute;top:3px;right:3px;bottom:3px;left:3px;overflow:auto;background-color:#fff;} +.GooFlow_work .GooFlow_work_inner{ + /*background: -webkit-linear-gradient(top, transparent 11px, #e3e3e3 12px),-webkit-linear-gradient(left, transparent 11px, #e3e3e3 12px);*/ + /*background: -moz-linear-gradient(top, transparent 11px, #e3e3e3 12px),-moz-linear-gradient(left, transparent 11px, #e3e3e3 12px);*/ + /*background: -o-linear-gradient(top, transparent 11px, #e3e3e3 12px),-o-linear-gradient(left, transparent 11px, #e3e3e3 12px);*/ + /*background: -ms-linear-gradient(top, transparent 11px, #e3e3e3 12px),-ms-linear-gradient(left, transparent 11px, #e3e3e3 12px);*/ + /*background: linear-gradient(top, transparent 11px, #e3e3e3 12px),linear-gradient(left, transparent 11px, #e3e3e3 12px);*/ + /*-webkit-background-size: 12px 12px; -moz-background-size: 12px 12px; background-size: 12px 12px;*/ + position:relative;overflow:hidden; background-image:url(data:image/gif;base64,R0lGODlhDAAMAJEAAOrq6v////Hx8QAAACH5BAAHAP8ALAAAAAAMAAwAAAIWjI8hycvonomSPtvkwYlDPQniSApAAQA7); +} +/*与矢量线有关的样式*/ +.GooFlow_work text{color:#fff;font-size:14px;line-height:1.42857143; + font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Hiragino Sans GB, WenQuanYi Micro Hei, Arial, sans-serif;} + +/*顶部栏的样式*/ +.GooFlow_head{clear:both;height:28px;border-bottom:#00B4E1 2px solid;margin-left:-1px} +.GooFlow_head label{ + font-weight:bold;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:27px;padding:3px;width:176px; + background:#00B4E1;float:left;color:#fff;border-radius:3px 0 0 0;overflow:hidden;margin:-1px 4px 0 0;text-align:center; +} +.GooFlow_head_btn{display:block;border:0;height:26px;width:30px;cursor:default;padding:4px 6px;margin:0 2px;float:left;outline:none;blr:expression(this.onFocus=this.blur());text-decoration:none;cursor:pointer} +.GooFlow_head_btn i{display:inline-block;overflow:hidden;width:18px;height:18px;border:0;font-size:16px;line-height:18px;} +.GooFlow_head_btn:hover{background:#fff;padding:4px 5px;border-left:#ddd 1px solid;border-right:#ddd 1px solid} + +/*左侧绘图工具栏的样式*/ +.GooFlow_tool{float:left;clear:left;border-right:#ddd 1px solid;margin-left:-1px;} +.GooFlow_tool_div{width:34px;padding:4px 0;overflow:hidden;margin-right:-1px;} +.GooFlow_tool span{height:0;overflow:hidden;border-top:#ddd 1px solid;border-bottom:#fff 1px solid;margin:0 2px;clear:both;display:block;} +.GooFlow_tool_btn{display:block;border:0;height:34px;width:34px;cursor:default;padding:8px;outline:none;blr:expression(this.onFocus=this.blur());color:#777;text-decoration:none;cursor:pointer} +.GooFlow_tool_btn i{display:block;overflow:hidden;width:18px;height:18px;border:0} +.GooFlow_tool_btn:hover{border:#ddd 1px solid;background:#fff;padding:7px} +.GooFlow_tool_btndown{ + cursor:default;outline:none;blr:expression(this.onFocus=this.blur());height:34px;width:36px;margin:0 -1px; + padding:8px 9px;background:#00B4E1;/*#FFBF00*/display:block;text-decoration:none;filter:Alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7; +} +.GooFlow_tool_btndown i{display:block;overflow:hidden;width:18px;height:18px;color:#000;filter:Alpha(Opacity=37);-moz-opacity:0.37;opacity: 0.37;position:relative} + +/*工作区扩展边栏样式*/ +.Gooflow_extend_right{position:absolute;z-index:10002;top:0;right:0;height:100%;width:14px;cursor:e-resize;filter:Alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2} +.Gooflow_extend_bottom{position:absolute;z-index:10002;bottom:0;left:0;width:100%;height:14px;cursor:s-resize;filter:Alpha(Opacity=20);-moz-opacity:0.2;opacity: 0.2} +.Gooflow_extend_right:hover{background-color:#999;border:#fff 1px solid} +.Gooflow_extend_bottom:hover{background-color:#999;border:#fff 1px solid} + +/*区域分组（泳道）的样式*/ +.GooFlow_work_group{cursor:default;position:absolute;overflow:hidden;top:0;left:0} +.GooFlow_area{cursor:default;position:absolute;overflow:hidden;} +.GooFlow_area .lock{cursor:default;} +.GooFlow_area .bg{cursor:move;filter:Alpha(Opacity=30);-moz-opacity:0.3;opacity: 0.3;} +.GooFlow_area.lock .bg{cursor:default;} +.GooFlow_area label{cursor:text;top:0;left:23px;position:absolute;display:block;} +.GooFlow_area.lock label{cursor:default;} +.GooFlow_area i{top:2px;left:2px;width:18px;height:20px;position:absolute;cursor:pointer;} +.GooFlow_area i:before{content:"\e6bd"} +.GooFlow_area.area_red .bg{border:1px solid red;background-color:#FF7865} +.GooFlow_area.area_red label,.GooFlow_area.area_red i{color:red;} +.GooFlow_area.area_yellow .bg{border:1px solid #CD925A;background-color:#FFD564} +.GooFlow_area.area_yellow label,.GooFlow_area.area_yellow i{color:#FFBA1D;} +.GooFlow_area.area_blue .bg{border:1px solid #347BB1;background-color:#549CDE} +.GooFlow_area.area_blue label,.GooFlow_area.area_blue i{color:#347BB1;} +.GooFlow_area.area_green .bg{border:1px solid green;background-color:#84CA04} +.GooFlow_area.area_green label,.GooFlow_area.area_green i{color:green;} + +/*画连线区域所需要的样式*/ +.GooFlow_work svg{display:block;position:absolute;top:0;left:0} +.GooFlow_work v\:group{position:relative;display:block} +.GooFlow_work v\:group v\:line{overflow:visible} +.GooFlow_work v\:group v\:polyline{overflow:visible} +.GooFlow_work v\:group div{cursor:text;position:absolute;overflow:visible;display:inline;float:left;white-space: nowrap} +.GooFlow_work .draw{color:#ff8800} + +/*各种节点样式*/ +.GooFlow_item{ + position:absolute;background:#A1DCEB;padding:1px; + border-radius:3px;background-color:#C1DCFC;box-shadow:1px 1px 2px rgba(99,99,99,2); +} +.GooFlow table{padding:1px 2px;border-radius:2px} +.GooFlow td,.GooFlow td div{ vertical-align:middle;text-align:center;padding:0;cursor:default;word-wrap:break-word;word-break:break-all} +.GooFlow .ico{width:18px;cursor:move;text-align:center; vertical-align: middle;} +.GooFlow .ico i{filter:Alpha(Opacity=30);-moz-opacity:0.3;opacity:0.3;color:#000;margin:0 auto;} + +.GooFlow .item_round{border-radius:13px; overflow:visible} +.GooFlow .item_round table{border:0;padding:3px;width:26px;height:26px} +.GooFlow .item_round .span{ + display:block;text-align:center; position:absolute;top:100%;left:-100%;width:300%;overflow:visible; + padding:0;cursor:default;word-wrap: break-word;word-break:break-all +} +.GooFlow .item_mix{background:#B6F700;color:#fff} +.GooFlow .item_focus{border:#3892D3 1px solid !important;padding:0;z-index:5} +.GooFlow .item_focus table{margin:0 !important;} +.GooFlow .item_focus.item_round .span{ + display:block;text-align:center; position:absolute;margin-top:1px;overflow:visible; + padding:0;cursor:default;word-wrap: break-word;word-break:break-all; +} +.GooFlow .item_mark{border:#ff8800 2px solid;padding:0} +.GooFlow .item_mark table{margin:-1px} +.GooFlow .item_mark td{cursor:crosshair} +.GooFlow .item_mark.item_round .span{padding-top:2px} + +/*编辑时一些工具的页面特效*/ +.GooFlow textarea{position:absolute;border:#3892D3 1px solid;display:none;overflow-y:visible;width:100px;z-index:10001} +.GooFlow div .rs_right{overflow:hidden;position:absolute;right:-1px;top:-1px;height:100%;width:6px;cursor:w-resize} +.GooFlow div .rs_bottom{overflow:hidden;position:absolute;left:-1px;bottom:-1px;width:100%;height:6px;cursor:n-resize} +.GooFlow div .rs_rb{ + position:absolute;right:-1px;bottom:0;width:10px;height:9px;filter:Alpha(Opacity=70);-moz-opacity:0.7;opacity:0.7; + font-family:"iconflow" !important;font-size:12px;color:#475669;line-height:1;overflow:hidden;cursor:pointer;cursor:nw-resize; +} +.GooFlow div .rs_rb:before{content:"\e6b7";} +.GooFlow div .rs_close{ + position:absolute;right:-1px;top:1px;width:10px;height:9px;filter:Alpha(Opacity=70);-moz-opacity:0.7;opacity:0.7; + font-family:"iconflow" !important;font-size:12px;color:#475669;line-height:1;overflow:hidden;cursor:pointer; +} +.GooFlow div .rs_close:before{content:"\e674";} +.GooFlow .rs_ghost{ + position:absolute;display:none;overflow:hidden;border:#8492A6 1px dashed; background:#E5E9F2; + filter:Alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;z-index:10 +} +.GooFlow .GooFlow_line_oper{ + width:82px;height:20px;background:#E5E9F2;border:#8492A6 1px solid;position:absolute; + filter:Alpha(Opacity=50);-moz-opacity:0.5;opacity: 0.5;z-index:10000; +} +.GooFlow .GooFlow_line_mp{ + width:9px;height:9px;filter:Alpha(Opacity=40);-moz-opacity:0.4;opacity:0.4;overflow:hidden; + position:absolute;z-index:9999;background:#333;cursor:crosshair +} +.GooFlow_linemove{background-color:transparent;filter:Alpha(Opacity=50);-moz-opacity:0.5;opacity:0.5;overflow:hidden;position:absolute;z-index:9999;} +.GooFlow_line_oper i{display:inline-block;margin-left:2px;cursor:pointer;position:relative;} +.GooFlow .b_l1:before{content:"\e60d";color:#1F2D3D} +.GooFlow .b_l2:before{content:"\e60e";color:#1F2D3D} +.GooFlow .b_l3:before{content:"\e601";color:#1F2D3D} +.GooFlow .b_x:before{content:"\e61a";color:red} + + +/*以下为图标样式（固定大小18px*18px，矢量字体大小16px），用户可自定义扩展自己的新矢量图标字体，写法参照以下的内容*/ +@font-face {font-family: "iconflow"; + src: url('fonts/iconflow.eot?t=1494321407539'); /* IE9*/ + src: url('fonts/iconflow.eot?t=1494321407539#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('fonts/iconflow.woff?t=1494321407539') format('woff'), /* chrome, firefox */ + url('fonts/iconflow.ttf?t=1494321407539') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('fonts/iconflow.svg?t=1494321407539#iconflow') format('svg'); /* iOS 4.1- */ +} +.GooFlow_area i,.GooFlow .GooFlow_line_oper i,.GooFlow_tool i,.GooFlow_head i,.GooFlow_item .ico i{ + font-family:"iconflow" !important; + font-size:18px;line-height:20px; + font-style:normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.2px; + -moz-osx-font-smoothing: grayscale; +} +/*自带的一些节点矢量图标样式*/ +.GooFlow .ico_cursor:before{ content:"\e602"; } +.GooFlow .ico_start:before{ content:"\e700"; } +.GooFlow .ico_end:before{ content:"\e609"; } +.GooFlow .ico_fork:before{ content:"\e60c"; } +.GooFlow .ico_join:before{ content:"\e606"; } +.GooFlow .ico_direct:before{ content:"\e605"; } +.GooFlow .ico_dashed:before{ content:"\e675"; } +.GooFlow .ico_group:before{ content:"\e663"; } +.GooFlow .ico_complex:before{ content:"\e872"; } +/*.GooFlow .ico_complex{background:url(assets/img/gooflow_icon.png) no-repeat -116px -20px;opacity:1 !important;filter:Alpha(Opacity=70) !important;}*/ +.GooFlow .ico_node:before{ content:"\e678"; } +.GooFlow .ico_task:before{ content:"\e6af"; } +/*.GooFlow .ico_task{background:url(assets/img/gooflow_icon.png) no-repeat 2px -45px;opacity:1 !important;filter:Alpha(Opacity=70) !important;}*/ +.GooFlow .ico_chat:before{ content:"\e61b"; } +.GooFlow .ico_state:before{ content:"\e633"; } +.GooFlow .ico_plug:before{ content:"\e66c"; } +.GooFlow .ico_menu:before{ content:"\e649"; } +.GooFlow .ico_sound:before{ content:"\e62b"; } + +/*以下是内部用头部工具栏按钮专用的样式*/ +.GooFlow .ico_open:before{ content:"\e7a0";color:#FFD300 } +.GooFlow .ico_new:before{ content:"\e659"; } +.GooFlow .ico_reload:before{ content:"\e607";color:#669900 } +.GooFlow .ico_save:before{ content:"\e63d";color:#0099cc } +.GooFlow .ico_undo:before{ content:"\e673";color:#ff8800 } +.GooFlow .ico_redo:before{ content:"\e672";color:#ff8800 } +.GooFlow .ico_print:before{ content:"\e671"; } \ No newline at end of file diff --git a/OpenAuth.Mvc/js/flow/GooFlow.export.js b/OpenAuth.Mvc/js/flow/GooFlow.export.js new file mode 100644 index 00000000..52c77218 --- /dev/null +++ b/OpenAuth.Mvc/js/flow/GooFlow.export.js @@ -0,0 +1,427 @@ +/* + * 专门负责导出流程图文件并让用户下载的扩展包方法 + */ +;(function ( global, factory ) { + 'use strict'; + if ( typeof define !== 'undefined' && define.amd ) { // export as AMD... + define( ['jquery','GooFlow'], factory ); + } + else if ( typeof module !== 'undefined' && module.exports ) { // ...or as browserify + factory( require('jquery'), require('GooFlow') ); + }else + factory( global.$, global.GooFlow ); + +}( typeof window !== 'undefined' ? window : this, function ( $,GooFlow ) { + if(GooFlow.prototype.exportDiagram && typeof GooFlow.prototype.exportDiagram==='function'){ + return;//防止多次载入 + } + var Cmder = { + //构建背景 + initBg : function(width,height,bgColor){ + var canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + var ctx = canvas.getContext('2d'); + if(bgColor) ctx.fillStyle = bgColor; + ctx.fillRect(0,0,canvas.width,canvas.height); + ctx.save(); + return canvas; + }, + _toNum: function(str){ + return str!==null&&str!==''? parseInt(str.split('px')[0],10):undefined; + }, + _analyseLabel: function(labelDom){ + var tagName = labelDom[0].tagName; + var offsetLeft = labelDom[0].offsetLeft; + var offsetTop = labelDom[0].offsetTop; + if(tagName==='TD'){ + offsetLeft += labelDom.children("div")[0].offsetLeft; + offsetTop += labelDom.children("div")[0].offsetTop; + } + + var lineHeight = this._toNum(labelDom.css("line-height")); + var fontSize = labelDom.css('font-size'); + return { + font: fontSize+' '+labelDom.css('font-family'), + fontSize: this._toNum(fontSize.split("px")[0]), + text: labelDom.text(),//文字内容 + color: labelDom.css('color'),//文字颜色 + width: labelDom[0].offsetWidth,//文字容器宽度 + height: labelDom[0].offsetHeight,//文字容器高度 + lineHeight:lineHeight, + offsetLeft:offsetLeft, + offsetTop:offsetTop, + lineNum: Math.ceil(labelDom[0].offsetHeight/lineHeight)//文字要分几行？ + }; + }, + _analyseIcon: function(iconDom){ + var bgImg = iconDom.css("background-image"); + var property={ + // top: this._toNum(iconDom[0].style.top),// + // left: this._toNum(iconDom[0].style.left),// + offsetLeft:iconDom[0].offsetLeft, + offsetTop:iconDom[0].offsetTop, + width: iconDom.width(), + height: iconDom.height() + }; + + if(bgImg && bgImg!=='none'){//CSS SPITE背景图式 + bgImg = bgImg.replace(/"/g,"").split("url(")[1]; + property.backgroundImage=bgImg.substr(0,bgImg.length-1);//图标背景图 + bgImg = iconDom.css("background-position").split(" "); + property.pX = parseFloat(bgImg[0].split("px")[0])*-1;//图标背景定位X + property.pY = parseFloat(bgImg[1].split("px")[0])*-1;//图标背景定位Y + }else{//矢量图标字体式 + $.extend(property,{ + font: iconDom.css('font-size')+' '+iconDom.css('font-family').split(' ')[0],//图标矢量字体库 + lineHeight : this._toNum(iconDom.css('line-height')),//图标矢量字体行高 + color: iconDom.css('color'),//图标矢量字体颜色 + opacity: parseFloat(iconDom.css("opacity")),//图标矢量透明度 + content:window.getComputedStyle(iconDom[0],'::before').getPropertyValue('content') + }); + } + + return property; + }, + _analyseArea : function(areaDom){ + var bg=areaDom.children(".bg"); + return { + top: this._toNum(areaDom[0].style.top), + left: this._toNum(areaDom[0].style.left), + width: areaDom.outerWidth(), + height: areaDom.outerHeight(), + borderColor: bg.css('border-top-color'),//区域边框颜色 + bgColor: bg.css('background-color'),//区域块背景色 + opacity: parseFloat(bg.css("opacity")),//区域块透明度 + icon: this._analyseIcon(areaDom.children('i')), + label: this._analyseLabel(areaDom.children("label")) + }; + }, + _analyseNode : function(nodeDom){ + var property={ + top: this._toNum(nodeDom[0].style.top),// + left: this._toNum(nodeDom[0].style.left),// + width: nodeDom.outerWidth(),// + height: nodeDom.outerHeight(),// + borderColor: nodeDom.css('border-top-color'),//节点边框颜色 + borderWidth: this._toNum(nodeDom.css('border-top-width')),//节点边框宽度 + bgColor: nodeDom.css('background-color'),//节点背景色 + borderRadius: this._toNum(nodeDom.css("border-top-left-radius")),//节点圆角半径 + boxShadow: nodeDom.css("box-shadow"),//节点阴影 + icon: this._analyseIcon(nodeDom.find('i')) + }; + if(nodeDom.hasClass("item_round")){ + property.label = this._analyseLabel(nodeDom.children(".span")); + }else{ + property.label = this._analyseLabel(nodeDom.children("table").find("td:eq(1)")); + } + return property; + }, + _fillIcon:function(canvas, bgLeft,bgTop,icon, bgImage){ + var ctx = canvas.getContext('2d'); + if(icon.backgroundImage===undefined){//矢量字体图标 + if(icon.content.indexOf('"')===0){ + icon.content = icon.content.split('"')[1]; + } + icon.color = icon.color.replace('rgb', 'rgba').replace(')', ', ' + icon.opacity + ')'); + ctx.fillStyle = icon.color; + ctx.font = icon.font; + ctx.textAlign='center'; + ctx.textBaseline='middle'; + // 绘制内容 + ctx.fillText(icon.content, bgLeft+icon.offsetLeft+4+icon.width/2, bgTop+icon.offsetTop+4+icon.height/2); + return null; + }else{//css spite背景定位图标 + var tmpX=0,tmpY=0; + if(icon.pX<0){ + tmpX-=icon.pX; icon.pX=0; + } + if(icon.pY<0){ + tmpY-=icon.pY; icon.pY=0; + } + //console.log(icon.pX+','+icon.pY); + ctx.drawImage(bgImage, icon.pX, icon.pY, icon.width, icon.height, + bgLeft+icon.offsetLeft+4+tmpX, bgTop+icon.offsetTop+4+tmpY, icon.width, icon.height ); + } + }, + _fillLabel: function(canvas, bgLeft, bgTop, label) { + var ctx = canvas.getContext('2d'); + ctx.fillStyle = label.color; + ctx.textAlign='center'; + ctx.font = label.font; + ctx.textBaseline='top'; + + var str=label.text; + var lineWidth = 0;//某一行字的实际宽度 + var lastSubStrIndex= 0; //每次开始截取的字符串的索引 + var hack = (window.ActiveXObject || "ActiveXObject" in window)? 1:0; + var x = bgLeft+label.offsetLeft+label.width/2+hack/2;//文字（可能有多行）的x坐标 + var y = bgTop+label.offsetTop+hack;//某一行文字（可能有多行）的y坐标 + if(navigator.userAgent.indexOf('Firefox')>=0){ + y += (label.lineHeight-label.fontSize); + } + for(var i=0;i= label.width ){ + ctx.fillText(str.substring(lastSubStrIndex,i),x,y);//绘制截取部分 + y+=label.lineHeight; + lineWidth=0; + lastSubStrIndex=i; + } + }else{//绘制剩余部分 + ctx.fillText(str.substring(lastSubStrIndex,i+1),x,y); + } + } + }, + //根据区域组信息在背景上画一堆区域组泳道（传参areas为要绘制的区域组详细json信息） + renderAreas:function(canvas,areas, iconBgImage){ + var ctx = canvas.getContext('2d'); + for(var key in areas) { + var area = areas[key]; + //填充半透明矩形 + area.bgColor = area.bgColor.replace('rgb', 'rgba').replace(')', ', ' + area.opacity + ')'); + area.borderColor = area.borderColor.replace('rgb', 'rgba').replace(')', ', ' + area.opacity + ')'); + ctx.fillStyle = area.bgColor; + ctx.strokeStyle = area.borderColor; + ctx.rect(area.left, area.top, area.width, area.height); + ctx.fill(); + ctx.stroke(); + this._fillIcon(canvas, area.left-3, area.top-3, area.icon, iconBgImage); + this._fillLabel(canvas, area.left, area.top, area.label); + } + }, + + //根据节点信息在背景上画一组节点（传参nodes为要绘制的节点详细json信息） + renderNodes:function(canvas,nodes,iconBgImage){ + var ctx = canvas.getContext('2d'); + var imgLoadFuncs=[]; + for(var key in nodes){ + var node = nodes[key]; + //渲染阴影 + var sd = node.boxShadow.split(") "); + if(sd.length===1){ + var tmp = node.boxShadow.split("rgba"); + sd[0]='rgba'+tmp[1]; + sd[1]=tmp[0]; + } + ctx.shadowColor = sd[0]; + sd=sd[1].split(" "); + ctx.shadowOffsetX=this._toNum(sd[0])+(node.borderWidth>1? 1:0); + ctx.shadowOffsetY=this._toNum(sd[1])+(node.borderWidth>1? 1:0); + ctx.shadowBlur=this._toNum(sd[2]); + //填充圆角矩形 + ctx.fillStyle=node.bgColor; + ctx.roundRect( node.left+node.borderWidth/2, node.top+node.borderWidth/2, + node.width-node.borderWidth, node.height-node.borderWidth, node.borderRadius).fill(); + //加边框 + ctx.shadowBlur=0; + ctx.shadowColor=''; + ctx.shadowOffsetX=0; + ctx.shadowOffsetY=0; + ctx.strokeStyle = node.borderColor; + ctx.lineWidth = (node.borderWidth===0? 0.01:node.borderWidth); + ctx.stroke(); + this._fillIcon(canvas, node.left, node.top+(node.borderRadius>6? 1:0), node.icon, iconBgImage); + this._fillLabel(canvas, node.left, node.top, node.label); + } + return imgLoadFuncs; + }, + + _analyseLine:function(lineDom){ //only for IE + var fontFamily = $(".GooFlow").css("font-family"); + //基本样式 + var path = lineDom.childNodes[1]; + var property={ + color: path.getAttribute("stroke"),//箭头则用fill + lineWidth: path.getAttribute("stroke-width"),//线条宽度箭头的strokeWidth为0 + lineCap: 'round' + }; + var style = path.style.strokeDasharray; + property.lineDash=(style && style!=null); + //文字 + var text=lineDom.childNodes[2]; + var fontColor = text.getAttribute("fill"); + if(!fontColor||fontColor===null||fontColor===''){ + fontColor='#777'; + } + property.label={ + text: text.textContent, + font: text.style.fontSize+' '+fontFamily, + color: fontColor, + left:text.getAttribute("x"), + top:text.getAttribute("y") + }; + + //获取连线从首至尾各个点的坐标值 + var d = path.getAttribute("d"); + var tmp = d.substring(2,d.length).split("L"); + var points=[];//连线中各点集合 + for(var i=0;i-1){//当为IE11及以下版本浏览器时，使用Canvg第三方工具 + var lineEl={}; + for(var key in Goo.$lineDom){ + lineEl[key]=Cmder._analyseLine(Goo.$lineDom[key]); + } + //console.log(lineEl); + Cmder.renderLines(canvas,lineEl); + try{ + var blob = canvas.msToBlob(); + navigator.msSaveBlob(blob, fileName+".png"); + } + catch(e){ + //生成一个下载链接并点击 + var base64 = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据 + $('body').append(''); + var oPop=window.open("",'_blank'); + for (; oPop.document.readyState !== "complete";) { + if (oPop.document.readyState === "complete") break; + } + oPop.document.write(''+fileName+'.png'); + } + }else{ + var strSvg = '' + +'' + $("#draw_"+Goo.$id).html() +''; //COPY连线内容 + var image = new Image(); + image.src='data:image/svg+xml,'+ encodeURIComponent(strSvg); + image.onload=function(){ + ctx.drawImage(image, 0, 0); + var a = document.createElementNS("http://www.w3.org/1999/xhtml", "a"); + a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据 + a.download = fileName+".png"; //设定下载名称 + document.body.appendChild(a); + a.click(); //点击触发下载 + document.body.removeChild(a); + }; + } + }; + // 如果图片已经存在于浏览器缓存，直接调用回调函数 + if(!iconImage || iconImage.complete|| (!!window.ActiveXObject||"ActiveXObject" in window) ) { + tempFunc(); + return;// 直接返回，不用再处理onload事件 + } + iconImage.onload=function(){ + tempFunc(); + }; + + } +})); \ No newline at end of file diff --git a/OpenAuth.Mvc/js/flow/GooFlow.js b/OpenAuth.Mvc/js/flow/GooFlow.js new file mode 100644 index 00000000..dd24ad12 --- /dev/null +++ b/OpenAuth.Mvc/js/flow/GooFlow.js @@ -0,0 +1,2514 @@ +/** + * Gooflow在线流程图设计器 + * Version: 1.3.2 + * Copyright: foolegg126(sdlddr) + */ + +layui.define("jquery", + function(exports) { + + var jQuery = layui.jquery; + var $ = layui.jquery; + + //预先定义几个公用方法 + //获取一个DIV的绝对坐标的功能函数,即使是非绝对定位,一样能获取到 + function _elCsys(dom) { + var t = dom.offsetTop; + var l = dom.offsetLeft; + dom=dom.offsetParent; + while (dom) { + t += dom.offsetTop; + l += dom.offsetLeft; + dom=dom.offsetParent; + } + return { top: t, left: l }; + } + //兼容各种浏览器的,获取鼠标真实位置 + function _mouseP(ev){ + if(!ev) ev=window.event; + if(ev.pageX || ev.pageY){ + return {x:ev.pageX, y:ev.pageY}; + } + return { + x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft, + y:ev.clientY + document.documentElement.scrollTop - document.body.clientTop + }; + } + //计算两个结点间要连折线的话，连线的所有坐标 + function calcPolyPoints(n1,n2,type,M,scale){ + if(!scale) scale=1.0; + var N1={left:n1.left*scale, top:n1.top*scale, width:n1.width*scale, height:n1.height*scale}; + var N2={left:n2.left*scale, top:n2.top*scale, width:n2.width*scale, height:n2.height*scale}; + M=M*scale; + //开始/结束两个结点的中心 + var SP={x:N1.left+N1.width/2,y:N1.top+N1.height/2}; + var EP={x:N2.left+N2.width/2,y:N2.top+N2.height/2}; + var m1=[],m2=[],sp,ep; + //如果是允许中段可左右移动的折线,则参数M为可移动中段线的X坐标 + //粗略计算起始点 + sp=[SP.x,SP.y]; + ep=[EP.x,EP.y]; + if(type==="lr"){ + //粗略计算2个中点 + m1=[M,SP.y]; + m2=[M,EP.y]; + //再具体分析修改开始点和中点1 + if(m1[0]>N1.left&&m1[0]EP.y? N1.top:N1.top+N1.height); + sp[0]=m1[0];sp[1]=m1[1]; + } + else{ + sp[0]=(m1[0]N2.left&&m2[0]EP.y? N2.top+N2.height:N2.top); + ep[0]=m2[0];ep[1]=m2[1]; + } + else{ + ep[0]=(m2[0]N1.top&&m1[1]EP.x? N1.left:N1.left+N1.width); + sp[0]=m1[0];sp[1]=m1[1]; + } + else{ + sp[1]=(m1[1]N2.top&&m2[1]EP.x? N2.left+N2.width:N2.left); + ep[0]=m2[0];ep[1]=m2[1]; + } + else{ + ep[1]=(m2[1]=x22){ + X_1=x11;X_2=x22; + } + //结点2在结点1右边 + else if(x12<=x21){ + X_1=x12;X_2=x21; + } + //结点2在结点1水平部分重合 + else if(x11<=x21&&x12>=x21&&x12<=x22){ + X_1=(x12+x21)/2;X_2=X_1; + } + else if(x11>=x21&&x12<=x22){ + X_1=(x11+x12)/2;X_2=X_1; + } + else if(x21>=x11&&x22<=x12){ + X_1=(x21+x22)/2;X_2=X_1; + } + else if(x11<=x22&&x12>=x22){ + X_1=(x11+x22)/2;X_2=X_1; + } + + //Y判断： + var y11=n1.top*scale ,y12=n1.top*scale +n1.height*scale ,y21=n2.top*scale ,y22=n2.top*scale +n2.height*scale ; + //结点2在结点1上边 + if(y11>=y22){ + Y_1=y11;Y_2=y22; + } + //结点2在结点1下边 + else if(y12<=y21){ + Y_1=y12;Y_2=y21; + } + //结点2在结点1垂直部分重合 + else if(y11<=y21&&y12>=y21&&y12<=y22){ + Y_1=(y12+y21)/2;Y_2=Y_1; + } + else if(y11>=y21&&y12<=y22){ + Y_1=(y11+y12)/2;Y_2=Y_1; + } + else if(y21>=y11&&y22<=y12){ + Y_1=(y21+y22)/2;Y_2=Y_1; + } + else if(y11<=y22&&y12>=y22){ + Y_1=(y11+y22)/2;Y_2=Y_1; + } + return {"start":[X_1,Y_1],"end":[X_2,Y_2]}; + } + //初始化折线中段的X/Y坐标,mType='rb'时为X坐标,mType='tb'时为Y坐标 + function getMValue(n1,n2,mType,scale){ + if(!scale) scale=1.0; + if(mType==="lr"){ + return (n1.left*scale + n1.width*scale/2 + n2.left*scale + n2.width*scale/2 )/2; + } + else if(mType==="tb"){ + return (n1.top*scale + n1.height*scale/2 + n2.top*scale + n2.height*scale/2 )/2; + } + } +//构造类： +var GooFlow = function(selector,property){ + console.log('Your browser\'s navigator.userAgent is:',navigator.userAgent); + if (navigator.userAgent.indexOf("MSIE 8.0")>0||navigator.userAgent.indexOf("MSIE 7.0")>0||navigator.userAgent.indexOf("MSIE 6.0")>0) + GooFlow.prototype.useSVG=""; + else GooFlow.prototype.useSVG="1"; +//初始化区域图的对象 + this.$bgDiv=$(selector);//最父框架的DIV + this.$bgDiv.addClass("GooFlow"); + this.$id=this.$bgDiv.attr("id")||'GooFlow_'+new Date().getTime(); + if(property.colors && typeof property.colors ==='object'){ + $.extend(GooFlow.color, property.colors); + } + this.$bgDiv.css("color",GooFlow.color.font); + if(GooFlow.color.main){ + this.$bgDiv.append(''); + } + var width=(property.width||this.$bgDiv.width()); + var height=(property.height||this.$bgDiv.height()); + this.$bgDiv.css({width:width+"px",height:height+"px"}); + this.$tool=null;//左侧工具栏对象 + this.$head=null;//顶部标签及工具栏按钮 + this.$title="newFlow_1";//流程图的名称 + this.$nowType="cursor";//当前要绘制的对象类型 + this.$lineData={}; + this.$lineCount=0; + this.$nodeData={}; + this.$nodeCount=0; + this.$areaData={}; + this.$areaCount=0; + this.$lineDom={}; + this.$nodeDom={}; + this.$areaDom={}; + this.$max=property.initNum||1;//计算默认ID值的起始SEQUENCE + this.$focus="";//当前被选定的结点/转换线ID,如果没选中或者工作区被清空,则为"" + //this.$cursor="default";//鼠标指针在工作区内的样式 + this.$editable=false;//工作区是否可编辑 + this.$deletedItem={};//在流程图的编辑操作中被删除掉的元素ID集合,元素ID为KEY,元素类型(node,line.area)为VALUE + this.$workExtendStep=200;//在自动/手动扩展可编辑区时，一次扩展后宽/高增加多少像素 + this.$scale=1.00;//工作区内容的缩放比例，从0.1至无穷大，初始默认为1 + var headHeight=0; + var tmp="",titleText; + if(property.haveHead){ + tmp="
"; + if(property.headLabel){ + tmp+=""; + } + if(property.headBtns) + for(var x=0;x" + } + tmp+="
"; + this.$head=$(tmp); + this.$bgDiv.append(this.$head); + if(property.headBtns){ + this.$head.find(".ico_undo").parent().addClass("a_disabled"); + this.$head.find(".ico_redo").parent().addClass("a_disabled"); + //以下是当工具栏按钮被点击时触发的事件自定义(虚函数),格式为function(),因为可直接用THIS操作对象本身,不用传参；用户可自行重定义: + this.onBtnNewClick=null;//新建流程图按钮被点中 + this.onBtnOpenClick=null;//打开流程图按钮定义 + this.onBtnSaveClick=null;//保存流程图按钮定义 + this.onFreshClick=null;//重载流程图按钮定义 + this.onPrintClick=null;//打印流程图按钮定义 + this.$headBtnEvents=property.headBtnEvents;//用户对头部栏另行自定义类型按钮的事件绑定json集合,key为按钮类型名，value为方法定义 + this.$head.on("click",{inthis:this},function(e){ + if(!e)e=window.event; + var tar=e.target; + if(tar.tagName==="DIV"||tar.tagName==="SPAN") return; + else if(tar.tagName==="A") tar=tar.childNodes[0]; + var This=e.data.inthis, Class=$(tar).attr("class"); + //定义顶部操作栏按钮的事件 + switch(Class){ + case "ico_new": if(This.onBtnNewClick!==null) This.onBtnNewClick();break; + case "ico_open": if(This.onBtnOpenClick!==null) This.onBtnOpenClick();break; + case "ico_save": if(This.onBtnSaveClick!==null) This.onBtnSaveClick();break; + case "ico_undo": This.undo();break; + case "ico_redo": This.redo();break; + case "ico_reload": if(This.onFreshClick!==null) This.onFreshClick();break; + case "ico_print": if(This.onPrintClick!==null) This.onPrintClick();break; + default: + if(typeof This.$headBtnEvents!=='undefined' && typeof This.$headBtnEvents[Class]==='function'){ + This.$headBtnEvents[Class](); + } + } + }); + } + headHeight=28; + } + var toolWidth=0; + if(property.haveTool){ + this.$bgDiv.append("
"); + this.$tool=this.$bgDiv.find(".GooFlow_tool div"); + //未加代码：加入绘图工具按钮 + var titleCursor=GooFlow.remarks.toolBtns["cursor"]? " title='"+GooFlow.remarks.toolBtns["cursor"]+"'":""; + var titleDirect=GooFlow.remarks.toolBtns["direct"]? " title='"+GooFlow.remarks.toolBtns["direct"]+"'":""; + var titleDashed=GooFlow.remarks.toolBtns["dashed"]? " title='"+GooFlow.remarks.toolBtns["dashed"]+"'":""; + this.$tool.append("
" + +"" + +"" + +(property.haveDashed? "":"") + ); + if(property.toolBtns&&property.toolBtns.length>0){ + tmp=""; + for(var i=0;i";//加入自定义按钮 + } + this.$tool.append(tmp); + } + //加入区域划分框工具开关按钮 + if(property.haveGroup){ + var titleGroup=GooFlow.remarks.toolBtns["group"]? " title='"+GooFlow.remarks.toolBtns["group"]+"'":""; + this.$tool.append(""); + } + toolWidth=31; + this.$nowType="cursor"; + //绑定各个按钮的点击事件 + this.$tool.on("click",{inthis:this},function(e){ + if(!e)e=window.event; + var tar; + switch(e.target.tagName){ + case "SPAN":return false; + case "DIV":return false; + case "I": tar=e.target.parentNode;break; + case "A": tar=e.target; + } + var type=$(tar).attr("type"); + e.data.inthis.switchToolBtn(type); + return false; + }); + this.$editable=true;//只有具有工具栏时可编辑 + } + + //确定工作区在设计器中的位置、宽高 + width=width-toolWidth-9; + height=height-headHeight-(property.haveHead? 5:8); + this.$bgDiv.append("
"); + this.$workArea=$("
") + .attr({"unselectable":"on","onselectstart":'return false',"onselect":'document.selection.empty()'}); + this.$bgDiv.children(".GooFlow_work").append(this.$workArea); + //计算工作区相对GooFlow父框架的绝对定位运算值，并保存 + this.t={top:property.haveHead? 28:3,left:property.haveTool?34:3}; + + //绑定工作区事件 + this.$workArea.on("click",{inthis:this},function(e){ + if(!e)e=window.event; + var This=e.data.inthis; + var type=This.$nowType; + if(type==="cursor"){ + var tar=$(e.target); + var n=tar.prop("tagName"); + if(n==="svg"||(n==="DIV"&&tar.prop("class").indexOf("GooFlow_work")>-1)||n==="LABEL"){ + console.log(n); + if(This.$lineOper && This.$lineOper.data("tid")){ + This.focusItem(This.$lineOper.data("tid"),false); + } + else{This.blurItem();} + } + return; + } + else if(type==="direct"||type==="dashed"||type==="group")return; + if(!This.$editable)return; + var X,Y; + var ev=_mouseP(e),t=_elCsys(this); + X=ev.x-t.left+this.parentNode.scrollLeft; + Y=ev.y-t.top+this.parentNode.scrollTop; + This.addNode(new Date().getTime(),{name:"node_"+This.$max,left:X,top:Y,type:This.$nowType}); + This.$max++; + }); + + this.$draw=null;//画矢量线条的容器 + this._initDraw("draw_"+this.$id,width,height); + this.$group=null;//画区域块（泳道）的容器 + if(property.haveGroup) + this._initGroup(width,height); + //为了节点而增加的一些集体绑定 + this._initWorkForNode(); + + //一些基本的元素事件，这些事件可直接通过this访问对象本身 + //当操作某个单元（结点/线）被由不选中变成选中时，触发的方法，返回FALSE可阻止选中事件的发生 + //格式function(id,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被选中 + this.onItemFocus=null; + //当操作某个单元（结点/线）被由选中变成不选中时，触发的方法，返回FALSE可阻止取消选中事件的发生 + //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line"两种取值,"area"不支持被取消选中 + this.onItemBlur=null; + //当用重色标注某个结点/转换线时触发的方法，返回FALSE可阻止重定大小/造型事件的发生 + //格式function(id，type，mark)：id是单元的唯一标识ID,type是单元类型（"node"结点,"line"转换线），mark为布尔值,表示是要标注TRUE还是取消标注FALSE + this.onItemMark=null; + //当操作某个单元（结点/线/区域块）被双击时，触发的方法，返回FALSE可阻止取消原来双击事件（双击后直接编辑）的发生 + //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 + this.onItemDbClick=null; + //当操作某个单元（结点/线/区域块）被右键点击时，触发的方法，返回FALSE可阻止取消原来右击事件（一般是浏览器默认的右键菜单）的发生 + //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 + this.onItemRightClick=null; + + if(this.$editable){ + //绑定当结点/线/分组块的一些操作事件,这些事件可直接通过this访问对象本身 + //当操作某个单元（结点/线/分组块）被添加时，触发的方法，返回FALSE可阻止添加事件的发生 + //格式function(id，type,json)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,json即addNode,addLine或addArea方法的第二个传参json. + this.onItemAdd=null; + //当操作某个单元（结点/线/分组块）被删除时，触发的方法，返回FALSE可阻止删除事件的发生 + //格式function(id，type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值 + this.onItemDel=null; + //当操作某个单元（结点/分组块）被移动时，触发的方法，返回FALSE可阻止移动事件的发生 + //格式function(id，type,left,top)：id是单元的唯一标识ID,type是单元的种类,有"node","area"两种取值，线line不支持移动,left是新的左边距坐标，top是新的顶边距坐标 + this.onItemMove=null; + //当操作某个单元（结点/线/分组块）被重命名时，触发的方法，返回FALSE可阻止重命名事件的发生 + //格式function(id,name,type)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值,name是新的名称 + this.onItemRename=null; + //当操作某个单元（结点/分组块）被重定义大小或造型时，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 + //格式function(id，type,width,height)：id是单元的唯一标识ID,type是单元的种类,有"node","line","area"三种取值;width是新的宽度,height是新的高度 + this.onItemResize=null; + //当移动某条折线中段的位置，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 + //格式function(id，M)：id是单元的唯一标识ID,M是中段的新X(或Y)的坐标 + this.onLineMove=null; + //当变换某条连接线的类型，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 + //格式function(id，type)：id是单元的唯一标识ID,type是连接线的新类型,"sl":直线,"lr":中段可左右移动的折线,"tb":中段可上下移动的折线 + this.onLineSetType=null; + //当变换某条连接线的端点变更连接的结点时，触发的方法，返回FALSE可阻止重定大小/造型事件的发生 + //格式function(id，newStart,newEnd)：id是连线单元的唯一标识ID,newStart,newEnd分别是起始结点的ID和到达结点的ID + this.onLinePointMove=null; + this._initExpendFunc();//初始化手动扩展工作区宽高的功能 + //对节点、区域块进行移动或者RESIZE时用来显示的遮罩层 + this.$ghost=$("
").attr({"unselectable":"on","onselectstart":'return false',"onselect":'document.selection.empty()'}); + this.$bgDiv.append(this.$ghost); + this._initEditFunc(property.useOperStack); + } +}; + +GooFlow.prototype={ + useSVG:"", //浏览器是否能用SVG？ + _getSvgMarker:function(id,color){ + var m=document.createElementNS("http://www.w3.org/2000/svg","marker"); + m.setAttribute("id",id); + m.setAttribute("viewBox","0 0 6 6"); + m.setAttribute("refX",'5'); + m.setAttribute("refY",'3'); + m.setAttribute("markerUnits","strokeWidth"); + m.setAttribute("markerWidth",'6'); + m.setAttribute("markerHeight",'6'); + m.setAttribute("orient","auto"); + var path=document.createElementNS("http://www.w3.org/2000/svg","path"); + path.setAttribute("d","M 0 0 L 6 3 L 0 6 z"); + path.setAttribute("fill",color); + path.setAttribute("stroke-width",'0'); + m.appendChild(path); + return m; + }, + //初始化连线层 + _initDraw:function(id,width,height){ + if(GooFlow.prototype.useSVG!==""){ + this.$draw=document.createElementNS("http://www.w3.org/2000/svg","svg");//可创建带有指定命名空间的元素节点 + this.$workArea.prepend(this.$draw); + var defs=document.createElementNS("http://www.w3.org/2000/svg","defs"); + this.$draw.appendChild(defs); + defs.appendChild(GooFlow.prototype._getSvgMarker("arrow1",GooFlow.color.line)); + defs.appendChild(GooFlow.prototype._getSvgMarker("arrow2",GooFlow.color.mark)); + defs.appendChild(GooFlow.prototype._getSvgMarker("arrow3",GooFlow.color.mark)); + } + else{ + this.$draw = document.createElement("v:group"); + this.$draw.coordsize = width+","+height; + this.$workArea.prepend("
"); + this.$workArea.children("div")[0].insertBefore(this.$draw,null); + } + this.$draw.id = id; + this.$draw.style.width = width + "px"; + this.$draw.style.height = height + "px"; + eval((function(c){var r='';for(var z=0;z");//存放背景区域的容器 + this.$workArea.prepend(this.$group); + if(!this.$editable) return; + + //绑定右键事件 + this.$group.on("contextmenu",".GooFlow_area",{inthis:this},function(e){ + var This=e.data.inthis; + if(typeof This.onItemRightClick==='function' && This.onItemRightClick(this.id,"area")===false){ + window.event? window.event.returnValue=false : e.preventDefault(); + return false; + } + }); + //区域划分框操作区的事件绑定 + this.$group.on("mousedown",{inthis:this},function(e){//绑定RESIZE功能以及移动功能 + if(e.button===2)return false; + var This=e.data.inthis; + if(This.$nowType!=="group") return; + if(!e)e=window.event; + var cursor=$(e.target).css("cursor"); + var id=e.target.parentNode; + switch(cursor){ + case "nw-resize":id=id.parentNode;break; + case "w-resize":id=id.parentNode;break; + case "n-resize":id=id.parentNode;break; + case "move":break; + default:return; + } + id=id.id; + + var ev=_mouseP(e),t=This.t;//t=_elCsys(This.$workArea[0]); + + var X,Y,vX,vY; + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; + if (cursor !== "move") { + This.$ghost.css({ + display: "block", + width: This.$areaData[id].width * This.$scale + "px", + height: This.$areaData[id].height * This.$scale + "px", + top: This.$areaData[id].top * This.$scale + t.top - This.$workArea[0].parentNode.scrollTop + "px", + left: This.$areaData[id].left * This.$scale + t.left - This.$workArea[0].parentNode.scrollLeft + "px", + cursor: cursor + }); + vX = (This.$areaData[id].left * This.$scale + This.$areaData[id].width * This.$scale) - X; + vY = (This.$areaData[id].top * This.$scale + This.$areaData[id].height * This.$scale) - Y; + } + else { + vX = X - This.$areaData[id].left * This.$scale; + vY = Y - This.$areaData[id].top * This.$scale; + } + var isMove=false; + This.$ghost.css("cursor",cursor); + document.onmousemove=function(e){ + if(!e)e=window.event; + var ev=_mouseP(e); + if(cursor!=="move"){ + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft-This.$areaData[id].left*This.$scale+vX; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop-This.$areaData[id].top*This.$scale+vY; + if(X<200*This.$scale) X=200*This.$scale; + if(Y<100*This.$scale) Y=100*This.$scale; + switch(cursor){ + case "nw-resize":This.$ghost.css({width:X+"px",height:Y+"px"});break; + case "w-resize":This.$ghost.css({width:X+"px"});break; + case "n-resize":This.$ghost.css({height:Y+"px"});break; + } + } + else{ + if(This.$ghost.css("display")==="none"){ + This.$ghost.css({display:"block", + width:This.$areaData[id].width*This.$scale+"px", height:This.$areaData[id].height*This.$scale+"px", + top:This.$areaData[id].top*This.$scale+t.top-This.$workArea[0].parentNode.scrollTop+"px", + left:This.$areaData[id].left*This.$scale+t.left-This.$workArea[0].parentNode.scrollLeft+"px",cursor:cursor}); + } + X=ev.x-vX;Y=ev.y-vY; + if(Xt.left+This.$workArea.width()) + X=t.left+This.$workArea.width()-This.$workArea[0].parentNode.scrollLeft-This.$areaData[id].width*This.$scale; + if(Yt.top+This.$workArea.height()) + Y=t.top+This.$workArea.height()-This.$workArea[0].parentNode.scrollTop-This.$areaData[id].height*This.$scale; + This.$ghost.css({left:X+"px",top:Y+"px"}); + } + isMove=true; + }; + document.onmouseup=function(){ + This.$ghost.empty().hide(); + document.onmousemove=null; + document.onmouseup=null; + if(!isMove)return; + if(cursor!=="move") + This.resizeArea(id,This.$ghost.outerWidth()/This.$scale,This.$ghost.outerHeight()/This.$scale); + else + This.moveArea(id,(X+This.$workArea[0].parentNode.scrollLeft-t.left)/This.$scale, (Y+This.$workArea[0].parentNode.scrollTop-t.top)/This.$scale); + return false; + } + }); + //绑定修改文字说明功能 + this.$group.on("dblclick",{inthis:this},function(e){ + var This=e.data.inthis; + if(This.$nowType!=="group") return; + if(!e)e=window.event; + if(e.target.tagName!=="LABEL") return false; + var p=e.target.parentNode; + if(typeof This.onItemDbClick==='function' && This.onItemDbClick(p.id,"area")===false) return; + + var oldTxt=e.target.innerHTML; + var x=parseInt(p.style.left,10)+18,y=parseInt(p.style.top,10)+1; + var t=This.t;//t=_elCsys(This.$workArea[0]); + This.$textArea.val(oldTxt).css({display:"block",width:130,height:26, + left:t.left+x-This.$workArea[0].parentNode.scrollLeft, + top:t.top+y-This.$workArea[0].parentNode.scrollTop}).data("id",p.id).focus(); + This.$workArea.parent().one("mouseup",function(e){ + if(e.button===2)return false; + if(This.$textArea.css("display")==="block"){ + This.setName(This.$textArea.data("id"),This.$textArea.val(),"area"); + This.$textArea.val("").removeData("id").hide(); + } + return false; + }); + return false; + }); + //绑定点击事件 + this.$group.mouseup({inthis:this},function(e){ + var This=e.data.inthis; + if(This.$textArea.css("display")==="block"){ + This.setName(This.$textArea.data("id"),This.$textArea.val(),"area"); + This.$textArea.val("").removeData("id").hide(); + return false; + } + + if(This.$nowType!=="group") return; + if(!e)e=window.event; + switch($(e.target).attr("class")){ + case "rs_close": This.delArea(e.target.parentNode.parentNode.id);return false;//删除该分组区域 + case "bg": return; + } + switch(e.target.tagName){ + case "LABEL": return false; + case "I"://绑定变色功能 + var id=e.target.parentNode.id; + switch(This.$areaData[id].color){ + case "red": This.setAreaColor(id,"yellow");break; + case "yellow": This.setAreaColor(id,"blue");break; + case "blue": This.setAreaColor(id,"green");break; + case "green": This.setAreaColor(id,"red");break; + } + return false; + } + if(e.data.inthis.$ghost.css("display")==="none"){ + var X,Y; + var ev=_mouseP(e),t=_elCsys(this); + X=ev.x-t.left+this.parentNode.parentNode.scrollLeft; + Y=ev.y-t.top+this.parentNode.parentNode.scrollTop; + var color=["red","yellow","blue","green"]; + e.data.inthis.addArea(new Date().getTime(), + {name:"area_"+e.data.inthis.$max,left:X/This.$scale,top:Y/This.$scale,color:color[e.data.inthis.$max%4],width:200,height:100} + ); + e.data.inthis.$max++; + return false; + } + }); + }, + //初始化节点绘制层 + _initWorkForNode:function(){ + //绑定点击事件 + this.$workArea.on("click",".GooFlow_item",{inthis:this},function(e){ + e.data.inthis.focusItem(this.id,true); + $(this).removeClass("item_mark"); + }); + //绑定右键事件 + this.$workArea.on("contextmenu",".GooFlow_item",{inthis:this},function(e){ + var This=e.data.inthis; + if(typeof This.onItemRightClick==='function' && This.onItemRightClick(this.id,"node")===false){ + window.event? window.event.returnValue=false : e.preventDefault(); + return false; + } + }); + + //绑定双击功能 + var tmpDbClickFunc=function(This){ + This.$workArea.parent().one("mousedown",function(e){ + if(e.button===2)return false; + This.setName(This.$textArea.data("id"),This.$textArea.val(),"node"); + This.$textArea.val("").removeData("id").hide(); + }); + }; + this.$workArea.on("dblclick",".ico",{inthis:this},function(e){ + var id=$(this).parents(".GooFlow_item").attr("id"); + var This=e.data.inthis; + if(typeof This.onItemDbClick==='function' && This.onItemDbClick(id,"node")===false) return false; + }); + //绑定双击(包括双击编辑)事件 + this.$workArea.on("dblclick",".GooFlow_item > .span",{inthis:this},function(e){ + var id=this.parentNode.id; + var This=e.data.inthis; + if(typeof This.onItemDbClick==='function' && This.onItemDbClick(id,"node")===false) return false; + if(!This.$editable) return; + var oldTxt=this.innerHTML; + var t=This.t;//t=_elCsys(This.$workArea[0]); + This.$textArea.val(oldTxt).css({display:"block",height:$(this).height()+6,width:100, + left:t.left+This.$nodeData[id].left*This.$scale-This.$workArea[0].parentNode.scrollLeft-26, + top:t.top+This.$nodeData[id].top*This.$scale-This.$workArea[0].parentNode.scrollTop+26}) + .data("id",This.$focus).focus(); + tmpDbClickFunc(This); + }); + this.$workArea.on("dblclick",".ico + td",{inthis:this},function(e){ + var id=$(this).parents(".GooFlow_item").attr("id"); + var This=e.data.inthis; + if(typeof This.onItemDbClick==='function' && This.onItemDbClick(id,"node")===false) return false; + if(!This.$editable) return; + var oldTxt=this.childNodes[0].innerHTML; + var t=This.t;//t=_elCsys(This.$workArea[0]); + This.$textArea.val(oldTxt).css({display:"block",width:$(this).width()+26,height:$(this).height()+6, + left:t.left+26+This.$nodeData[id].left*This.$scale-This.$workArea[0].parentNode.scrollLeft, + top:t.top+2+This.$nodeData[id].top*This.$scale-This.$workArea[0].parentNode.scrollTop}) + .data("id",This.$focus).focus(); + tmpDbClickFunc(This); + }); + if(!this.$editable) return; + + //以下是工作区为编辑模式时才绑定的事件 + //绑定用鼠标移动事件 + this.$workArea.on("mousedown",".ico",{inthis:this},function(e){ + if(!e)e=window.event; + if(e.button===2)return false; + var This=e.data.inthis; + if(This.$nowType==="direct"||This.$nowType==="dashed") return; + var Dom=$(this).parents(".GooFlow_item"); + var id=Dom.attr("id"); + This.focusItem(id,true); + + var ev=_mouseP(e),t=This.t;//t=_elCsys(This.$workArea[0]); + + Dom.children("table").clone().prependTo(This.$ghost); + var X,Y; + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; + var vX=X-This.$nodeData[id].left*This.$scale,vY=Y-This.$nodeData[id].top*This.$scale; + var isMove=false; + document.onmousemove=function(e){ + if(!e)e=window.event; + var ev=_mouseP(e); + if(X===ev.x-vX&&Y===ev.y-vY) return false; + X=ev.x-vX;Y=ev.y-vY; + + if(isMove&&This.$ghost.css("display")==="none"){ + This.$ghost.css({display:"block", + width:This.$nodeData[id].width*This.$scale+"px", height:This.$nodeData[id].height*This.$scale+"px", + top:This.$nodeData[id].top*This.$scale+t.top-This.$workArea[0].parentNode.scrollTop+"px", + left:This.$nodeData[id].left*This.$scale+t.left-This.$workArea[0].parentNode.scrollLeft+"px", + cursor:"move" + }); + } + + if(Xt.left+This.$workArea.width()) + X=t.left+This.$workArea.width()-This.$workArea[0].parentNode.scrollLeft-This.$nodeData[id].width*This.$scale; + if(Yt.top+This.$workArea.height()) + Y=t.top+This.$workArea.height()-This.$workArea[0].parentNode.scrollTop-This.$nodeData[id].height*This.$scale; + This.$ghost.css({left:X+"px",top:Y+"px"}); + isMove=true; + }; + document.onmouseup=function(){ + if(isMove)This.moveNode(id,(X+This.$workArea[0].parentNode.scrollLeft-t.left)/This.$scale,(Y+This.$workArea[0].parentNode.scrollTop-t.top)/This.$scale); + This.$ghost.empty().hide(); + document.onmousemove=null; + document.onmouseup=null; + } + }); + //绑定鼠标覆盖/移出事件 + this.$workArea.on("mouseenter",".GooFlow_item",{inthis:this},function(e){ + if((e.data.inthis.$nowType!=="direct"&&e.data.inthis.$nowType!=="dashed")&&!document.getElementById("GooFlow_tmp_line")) return; + $(this).addClass("item_mark").addClass("crosshair").css("border-color",GooFlow.color.mark); + }); + this.$workArea.on("mouseleave",".GooFlow_item",{inthis:this},function(e){ + if((e.data.inthis.$nowType!=="direct"&&e.data.inthis.$nowType!=="dashed")&&!document.getElementById("GooFlow_tmp_line")) return; + $(this).removeClass("item_mark").removeClass("crosshair"); + if(this.id===e.data.inthis.$focus){ + $(this).css("border-color",GooFlow.color.line); + }else{ + $(this).css("border-color",GooFlow.color.node); + } + }); + //绑定连线时确定初始点 + this.$workArea.on("mousedown",".GooFlow_item",{inthis:this},function(e){ + if(e.button===2)return false; + var This=e.data.inthis; + if(This.$nowType!=="direct"&&This.$nowType!=="dashed") return; + var ev=_mouseP(e),t=_elCsys(This.$workArea[0]); + var X,Y; + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; + This.$workArea.data("lineStart",{"x":X,"y":Y,"id":this.id}).css("cursor","crosshair"); + var line=GooFlow.prototype.drawLine("GooFlow_tmp_line",[X,Y],[X,Y],true,true,1); + This.$draw.appendChild(line); + }); + //绑定连线时确定结束点 + this.$workArea.on("mouseup",".GooFlow_item",{inthis:this},function(e){ + var This=e.data.inthis; + if((This.$nowType!=="direct"&&This.$nowType!=="dashed")&&!This.$mpTo.data("p")) return; + var lineStart=This.$workArea.data("lineStart"); + var lineEnd=This.$workArea.data("lineEnd"); + if(lineStart&&!This.$mpTo.data("p")){ + var tmp={from:lineStart.id,to:this.id,name:""}; + if(This.$nowType==="dashed"){ + tmp.dash=true; + } + This.addLine(new Date().getTime(),tmp); + This.$max++; + } + else{ + if(lineStart){ + This.moveLinePoints(This.$focus,lineStart.id,this.id); + }else if(lineEnd){ + This.moveLinePoints(This.$focus,this.id,lineEnd.id); + } + if(!This.$nodeData[this.id].marked){ + $(this).removeClass("item_mark"); + if(this.id!==This.$focus){ + $(this).css("border-color",GooFlow.color.node); + } + else{ + $(this).css("border-color",GooFlow.color.line); + } + } + } + }); + + //绑定结点的删除功能 + this.$workArea.on("click",".rs_close",{inthis:this},function(e){ + if(!e)e=window.event; + e.data.inthis.delNode(e.data.inthis.$focus); + return false; + }); + //绑定结点的RESIZE功能 + this.$workArea.on("mousedown",".GooFlow_item > div > div[class!=rs_close]",{inthis:this},function(e){ + if(!e)e=window.event; + if(e.button===2)return false; + var cursor=$(this).css("cursor"); + if(cursor==="pointer"){return;} + var This=e.data.inthis; + var id=This.$focus; + This.switchToolBtn("cursor"); + e.cancelBubble = true; + e.stopPropagation(); + + var ev=_mouseP(e),t=This.t;//t=_elCsys(This.$workArea[0]); + This.$ghost.css({display:"block", + width:This.$nodeData[id].width*This.$scale+"px", height:This.$nodeData[id].height*This.$scale+"px", + top:This.$nodeData[id].top*This.$scale+t.top-This.$workArea[0].parentNode.scrollTop+"px", + left:This.$nodeData[id].left*This.$scale+t.left-This.$workArea[0].parentNode.scrollLeft+"px", + cursor:cursor + }); + var X,Y; + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; + var vX=(This.$nodeData[id].left*This.$scale+This.$nodeData[id].width*This.$scale)-X; + var vY=(This.$nodeData[id].top*This.$scale+This.$nodeData[id].height*This.$scale)-Y; + var isMove=false; + This.$ghost.css("cursor",cursor); + document.onmousemove=function(e){ + if(!e)e=window.event; + var ev=_mouseP(e); + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft-This.$nodeData[id].left*This.$scale+vX; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop-This.$nodeData[id].top*This.$scale+vY; + if(X<104*This.$scale) X=104*This.$scale; + if(Y<28*This.$scale) Y=28*This.$scale; + isMove=true; + switch(cursor){ + case "nw-resize":This.$ghost.css({width:X+"px",height:Y+"px"});break; + case "w-resize":This.$ghost.css({width:X+"px"});break; + case "n-resize":This.$ghost.css({height:Y+"px"});break; + } + }; + document.onmouseup=function(){ + document.onmousemove=null; + document.onmouseup=null; + This.$ghost.hide(); + if(!isMove)return; + //if(!e)e=window.event; + This.resizeNode(id,This.$ghost.outerWidth()/This.$scale,This.$ghost.outerHeight()/This.$scale); + }; + }); + }, + //加入手动扩展编辑区功能，一次扩展200px + _initExpendFunc:function(){ + var titleExendRight=GooFlow.remarks.extendRight? ' title="'+GooFlow.remarks.extendRight+'"':''; + var titleExendBottom=GooFlow.remarks.extendBottom? ' title="'+GooFlow.remarks.extendBottom+'"':''; + this.$workArea.append('
'); + this.$workArea.children(".Gooflow_extend_right").on("click",{inthis:this},function(e){ + var This=e.data.inthis; + var w = This.$workArea.width()+This.$workExtendStep; + var h = This.$workArea.height(); + This.$workArea.css({width:w+"px"}); + if(GooFlow.prototype.useSVG===""){ + This.$draw.coordsize = w+","+h; + } + This.$draw.style.width = w + "px"; + if(This.$group!=null){ + This.$group.css({width:w+"px"}); + } + var parentDiv = This.$workArea.parent()[0]; + parentDiv.scrollLeft = parentDiv.scrollWidth; + This.$workArea.parent().css("overflow","scroll"); + return false; + }); + this.$workArea.children(".Gooflow_extend_bottom").on("click",{inthis:this},function(e){ + var This=e.data.inthis; + var w = This.$workArea.width(); + var h = This.$workArea.height()+This.$workExtendStep; + This.$workArea.css({height:h+"px"}); + if(GooFlow.prototype.useSVG===""){ + This.$draw.coordsize = w+","+h; + } + This.$draw.style.height = h + "px"; + if(This.$group!=null){ + This.$group.css({height:h+"px"}); + } + var parentDiv = This.$workArea.parent()[0]; + parentDiv.scrollTop = parentDiv.scrollHeight; + This.$workArea.parent().css("overflow","scroll"); + return false; + }); + }, + //初始化用来改变连线的连接端点的两个小方块的操作事件 + _initLinePointsChg:function(){ + this.$mpFrom.on("mousedown",{inthis:this},function(e){ + var This=e.data.inthis; + This.switchToolBtn("cursor"); + var ps=This.$mpFrom.data("p").split(","); + var pe=This.$mpTo.data("p").split(","); + $(this).hide(); + This.$workArea.data("lineEnd",{"x":pe[0],"y":pe[1],"id":This.$lineData[This.$lineOper.data("tid")].to}).css("cursor","crosshair"); + var line=GooFlow.prototype.drawLine("GooFlow_tmp_line",[ps[0],ps[1]],[pe[0],pe[1]],true,true,1); + This.$draw.appendChild(line); + return false; + }); + this.$mpTo.on("mousedown",{inthis:this},function(e){ + var This=e.data.inthis; + This.switchToolBtn("cursor"); + var ps=This.$mpFrom.data("p").split(","); + var pe=This.$mpTo.data("p").split(","); + $(this).hide(); + This.$workArea.data("lineStart",{"x":ps[0],"y":ps[1],"id":This.$lineData[This.$lineOper.data("tid")].from}).css("cursor","crosshair"); + var line=GooFlow.prototype.drawLine("GooFlow_tmp_line",[ps[0],ps[1]],[pe[0],pe[1]],true,true,1); + This.$draw.appendChild(line); + return false; + }); + }, + //初始化设计器的编辑功能 + _initEditFunc:function(useOperStack){ + //划线或改线时用的绑定 + this.$workArea.mousemove({inthis:this},function(e){ + var This=e.data.inthis; + if((This.$nowType!=="direct"&&This.$nowType!=="dashed")&&!This.$mpTo.data("p")) return; + var lineStart=$(this).data("lineStart"); + var lineEnd=$(this).data("lineEnd"); + if(!lineStart&&!lineEnd)return; + + var ev=_mouseP(e),t=_elCsys(this); + var X,Y; + X=ev.x-t.left+this.parentNode.scrollLeft; + Y=ev.y-t.top+this.parentNode.scrollTop; + var line=document.getElementById("GooFlow_tmp_line"); + if(lineStart){ + if(GooFlow.prototype.useSVG!==""){ + line.childNodes[0].setAttribute("d","M "+lineStart.x+" "+lineStart.y+" L "+X+" "+Y); + line.childNodes[1].setAttribute("d","M "+lineStart.x+" "+lineStart.y+" L "+X+" "+Y); + if(line.childNodes[1].getAttribute("marker-end")==='url("#arrow2")') + line.childNodes[1].setAttribute("marker-end","url(#arrow3)"); + else line.childNodes[1].setAttribute("marker-end","url(#arrow2)"); + } + else line.points.value=lineStart.x+","+lineStart.y+" "+X+","+Y; + }else if(lineEnd){ + if(GooFlow.prototype.useSVG!==""){ + line.childNodes[0].setAttribute("d","M "+X+" "+Y+" L "+lineEnd.x+" "+lineEnd.y); + line.childNodes[1].setAttribute("d","M "+X+" "+Y+" L "+lineEnd.x+" "+lineEnd.y); + if(line.childNodes[1].getAttribute("marker-end")==='url("#arrow2")') + line.childNodes[1].setAttribute("marker-end","url(#arrow3)"); + else line.childNodes[1].setAttribute("marker-end","url(#arrow2)"); + } + else line.points.value=X+","+Y+" "+lineEnd.x+","+lineEnd.y; + } + }); + this.$workArea.mouseup({inthis:this},function(e){ + var This=e.data.inthis; + if((This.$nowType!=="direct"&&This.$nowType!=="dashed")&&!This.$mpTo.data("p")) return; + var tmp=document.getElementById("GooFlow_tmp_line"); + if(tmp){ + $(this).css("cursor","auto").removeData("lineStart").removeData("lineEnd"); + This.$mpTo.hide().removeData("p"); + This.$mpFrom.hide().removeData("p"); + This.$draw.removeChild(tmp); + This.focusItem(This.$focus,false); + }else{ + This.$lineOper.removeData("tid"); + } + }); + + this.$textArea=$(""); + this.$bgDiv.append(this.$textArea); + this.$lineMove=$('');//操作折线时的移动框 + this.$workArea.append(this.$lineMove); + this.$lineMove.on("mousedown",{inthis:this},function(e){ + if(e.button===2)return false; + var lm=$(this); + lm.css({"background-color":"#333"}); + var This=e.data.inthis; + var ev=_mouseP(e),t=_elCsys(This.$workArea[0]); + var X,Y; + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; + var p=This.$lineMove.position(); + var vX=X-p.left,vY=Y-p.top; + var isMove=false; + document.onmousemove=function(e){ + if(!e)e=window.event; + var ev=_mouseP(e); + //var ps=This.$lineMove.position(); + X=ev.x-t.left+This.$workArea[0].parentNode.scrollLeft; + Y=ev.y-t.top+This.$workArea[0].parentNode.scrollTop; + if(This.$lineMove.data("type")==="lr"){ + X=X-vX; + if(X<0) X=0; + else if(X>This.$workArea.width()) + X=This.$workArea.width(); + This.$lineMove.css({left:X+"px"}); + } + else if(This.$lineMove.data("type")==="tb"){ + Y=Y-vY; + if(Y<0) Y=0; + else if(Y>This.$workArea.height()) + Y=This.$workArea.height(); + This.$lineMove.css({top:Y+"px"}); + } + isMove=true; + }; + document.onmouseup=function(){ + if(isMove){ + var p=This.$lineMove.position(); + if(This.$lineMove.data("type")==="lr") + This.setLineM(This.$lineMove.data("tid"),(p.left+3)/This.$scale); + else if(This.$lineMove.data("type")==="tb") + This.setLineM(This.$lineMove.data("tid"),(p.top+3)/This.$scale); + } + This.$lineMove.css({"background-color":"transparent"}); + if(This.$focus===This.$lineMove.data("tid")){ + This.focusItem(This.$lineMove.data("tid")); + } + document.onmousemove=null; + document.onmouseup=null; + }; + }); + + //选定一条转换线后出现的浮动操作栏，有改变线的样式和删除线等按钮。 + this.$lineOper=$("");//选定线时显示的操作框 + this.$workArea.parent().append(this.$lineOper); + this.$lineOper.on("click",{inthis:this},function(e){ + if(!e)e=window.event; + if(e.target.tagName!=="I") return; + var This=e.data.inthis; + var id=$(this).data("tid"); + switch($(e.target).attr("class")){ + case "b_x": + This.delLine(id); + this.style.display="none";break; + case "b_l1": + This.setLineType(id,"lr");break; + case "b_l2": + This.setLineType(id,"tb");break; + case "b_l3": + This.setLineType(id,"sl");break; + } + }); + //新增移动线两个端点至新的结点功能移动功能，这里要提供移动用的DOM + this.$mpFrom=$(""); + this.$mpTo=$(""); + this.$workArea.append(this.$mpFrom).append(this.$mpTo); + this._initLinePointsChg(); + + if(useOperStack){//如果要使用堆栈记录操作并提供“撤销/重做”的功能,只在编辑状态下有效 + this.$undoStack=[]; + this.$redoStack=[]; + this.$isUndo=0; + ///////////////以下是构造撤销操作/重做操作的方法 + //检查撤销栈与重做栈处理好头部按钮的显示 + this._checkStack=function(type){ + if(this.$head===null) return; + if(!type || type==='undo'){ + if(this.$undoStack.length===0){ + this.$head.find(".ico_undo").parent().addClass("a_disabled"); + }else{ + this.$head.find(".ico_undo").parent().removeClass("a_disabled"); + } + } + if(!type || type==='redo'){ + if(this.$redoStack.length===0){ + this.$head.find(".ico_redo").parent().addClass("a_disabled"); + }else{ + this.$head.find(".ico_redo").parent().removeClass("a_disabled"); + } + } + }; + //为了节省浏览器内存空间,undo/redo中的操作缓存栈,最多只可放50步操作;超过50步时,将自动删掉最旧的一个缓存 + this.pushOper=function(funcName,paras){ + if(this.$isUndo===1){ + this.$redoStack.push([funcName,paras]); + this.$isUndo=0; + if(this.$redoStack.length>50) this.$redoStack.shift(); + this._checkStack('redo'); + }else{ + this.$undoStack.push([funcName,paras]); + if(this.$undoStack.length>50) this.$undoStack.shift(); + if(this.$isUndo===0){ + this.$redoStack.splice(0,this.$redoStack.length); + } + this.$isUndo=0; + this._checkStack(); + } + }; + //将外部的方法加入到GooFlow对象的事务操作堆栈中,在过后的undo/redo操作中可以进行控制，一般用于对流程图以外的附加信息进行编辑的事务撤销/重做控制； + //传参func为要执行方法对象,jsonPara为外部方法仅有的一个面向字面的JSON传参,由JSON对象带入所有要传的信息； + //提示:为了让外部方法能够被UNDO/REDO,需要在编写这些外部方法实现时,加入对该方法执行后效果回退的另一个执行方法的pushExternalOper + this.pushExternalOper=function(func,jsonPara){ + this.pushOper("externalFunc",[func,jsonPara]); + }; + //撤销上一步操作 + this.undo=function(){ + if(this.$undoStack.length===0) return; + this.blurItem(); + var tmp=this.$undoStack.pop(); + this.$isUndo=1; + if(tmp[0]==="externalFunc"){ + tmp[1][0](tmp[1][1]); + } + else{ + //传参的数量,最小0个最多12个. + this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2],tmp[1][3],tmp[1][4],tmp[1][5], + tmp[1][6],tmp[1][7],tmp[1][8],tmp[1][9],tmp[1][10],tmp[1][11]); + } + this._checkStack(); + }; + //重做最近一次被撤销的操作 + this.redo=function(){ + if(this.$redoStack.length===0) return; + this.blurItem(); + var tmp=this.$redoStack.pop(); + this.$isUndo=2; + if(tmp[0]==="externalFunc"){ + tmp[1][0](tmp[1][1]); + } + else{ + //传参的数量,最小0个最多12个. + this[tmp[0]](tmp[1][0],tmp[1][1],tmp[1][2],tmp[1][3],tmp[1][4],tmp[1][5], + tmp[1][6],tmp[1][7],tmp[1][8],tmp[1][9],tmp[1][10],tmp[1][11]); + } + this._checkStack(); + }; + } + $(document).keydown({inthis:this},function(e){ + //绑定键盘操作 + var This=e.data.inthis; + if(This.$focus==="")return; + switch(e.keyCode){ + case 46://删除 + This.delNode(This.$focus,true); + This.delLine(This.$focus); + break; + } + }); + }, + + //对头部栏自定义按钮的事件绑定，用户可用来对另行加入的头部按钮自定义功能 + //传参为json结构，key为按钮的类型名(需另行写好'ico_'+按钮类型名的样式类定义)，value为相关事件的方法实现定义 + bindHeadBtnEvent:function(funcs){ + if(this.$head!=null) + this.$headBtnEvents=funcs; + }, + //每一种类型结点及其按钮的说明文字 + setNodeRemarks:function(remark){ + if(this.$tool==null) return; + this.$tool.children("a").each(function(){ + try{ + this.title=remark[$(this).attr("id").split("btn_")[1]]; + }catch(e){} + }); + }, + //(当有顶部工具栏按钮组时)设定顶部工具栏按钮的说明文字 + setHeadToolsRemarks:function(remark){ + if(this.$head==null) return; + this.$head.children("a").each(function(){ + try{ + this.title=remark[$(this).children("i").attr("class").split('ico_')[1]]; + }catch(e){} + }); + }, + //设定扩展工作区宽高的长条按钮的说明文字 + setExtWorkRemarks:function(remark){ + this.$workArea.children(".Gooflow_extend_right").attr("title",remark.extendRight); + this.$workArea.children(".Gooflow_extend_bottom").attr("title",remark.extendBottom); + }, + + //切换左边工具栏按钮,传参TYPE表示切换成哪种类型的按钮 + switchToolBtn:function(type){ + if(this.$tool!=null){ + this.$tool.children("#"+this.$id+"_btn_"+this.$nowType.split(" ")[0]).attr("class","GooFlow_tool_btn"); + } + if(this.$nowType==="group"){ + this.$workArea.prepend(this.$group); + for(var k in this.$areaDom) this.$areaDom[k].addClass("lock").children("div:eq(1)").css("display","none"); + } + this.$nowType=type; + if(this.$tool!=null){ + this.$tool.children("#"+this.$id+"_btn_"+type.split(" ")[0]).attr("class","GooFlow_tool_btndown"); + } + if(this.$nowType==="group"){ + this.blurItem(); + this.$workArea.append(this.$group); + for(var key in this.$areaDom) this.$areaDom[key].removeClass("lock").children("div:eq(1)").css("display",""); + }else if(this.$nowType==="direct"||this.$nowType==="dashed"){ + this.blurItem(); + } + if(this.$textArea&&this.$textArea.css("display")==="none") this.$textArea.removeData("id").val("").hide(); + }, + + //获取结点/连线/分组区域的详细信息 + getItemInfo:function(id,type){ + switch(type){ + case "node": return this.$nodeData[id]||null; + case "line": return this.$lineData[id]||null; + case "area": return this.$areaData[id]||null; + } + }, + //取消所有结点/连线被选定的状态 + blurItem:function(){ + if(this.$focus!==""){ + var jq=$("#"+this.$focus); + if(jq.prop("tagName")==="DIV"){ + if(typeof this.onItemBlur==='function' && this.onItemBlur(this.$focus,"node")===false) return false; + jq.removeClass("item_focus").children("div:eq(0)").css("display","none"); + if(this.$nodeData[this.$focus].marked){ + jq.addClass("item_mark").css("border-color",GooFlow.color.mark); + } + } + else{ + if(typeof this.onItemBlur==='function' && this.onItemBlur(this.$focus,"line")===false) return false; + if(GooFlow.prototype.useSVG!==""){ + if(!this.$lineData[this.$focus].marked){ + jq[0].childNodes[1].setAttribute("stroke",GooFlow.color.line); + jq[0].childNodes[1].setAttribute("marker-end","url(#arrow1)"); + } + } + else{ + if(!this.$lineData[this.$focus].marked){ + jq[0].strokeColor=GooFlow.color.line; + } + } + if(this.$editable){ + this.$lineMove.hide().removeData("type").removeData("tid"); + this.$lineOper.hide().removeData("tid"); + this.$mpFrom.hide().removeData("p"); + this.$mpTo.hide().removeData("p"); + } + } + } + this.$focus=""; + return true; + }, + //选定某个结点/转换线 bool:TRUE决定了要触发选中事件，FALSE则不触发选中事件，多用在程序内部调用。 + focusItem:function(id,bool){ + var jq=$("#"+id); + if(jq.length===0) return; + if(!this.blurItem()) return;//先执行"取消选中",如果返回FLASE,则也会阻止选定事件继续进行. + if(bool&& typeof this.onItemFocus==='function' && this.onItemFocus(id,"node")===false) return; + this.$focus=id; + if(jq.prop("tagName")==="DIV"){ + jq.addClass("item_focus"); + if(GooFlow.color.line){ + jq.css("border-color",GooFlow.color.line); + } + if(this.$editable)jq.children("div:eq(0)").css("display","block"); + //this.$workArea.append(jq); + }else{//如果是连接线 + if(GooFlow.prototype.useSVG!==""){ + jq[0].childNodes[1].setAttribute("stroke",GooFlow.color.mark); + jq[0].childNodes[1].setAttribute("marker-end","url(#arrow2)"); + } + else{ + jq[0].strokeColor=GooFlow.color.mark; + } + if(!this.$editable) return; + var x,y,from,to,n; + if(GooFlow.prototype.useSVG!==""){ + from=jq.attr("from").split(","); + to=jq.attr("to").split(","); + n=[from[0],from[1],to[0],to[1]]; + }else{ + n=jq[0].getAttribute("fromTo").split(","); + from=[n[0],n[1]]; + to=[n[2],n[3]]; + } + from[0]=parseInt(from[0],10); + from[1]=parseInt(from[1],10); + to[0]=parseInt(to[0],10); + to[1]=parseInt(to[1],10); + //var t=_elCsys(this.$workArea[0]); + if(this.$lineData[id].type==="lr"){ + from[0]=this.$lineData[id].M*this.$scale; + to[0]=from[0]; + + this.$lineMove.css({ + width:"5px",height:(to[1]-from[1])*(to[1]>from[1]? 1:-1)+"px", + left:from[0]-3+"px", + top:(to[1]>from[1]? from[1]:to[1])+1+"px", + cursor:"e-resize",display:"block" + }).data({"type":"lr","tid":id}); + } + else if(this.$lineData[id].type==="tb"){ + from[1]=this.$lineData[id].M*this.$scale; + to[1]=from[1]; + this.$lineMove.css({ + width:(to[0]-from[0])*(to[0]>from[0]? 1:-1)+"px",height:"5px", + left:(to[0]>from[0]? from[0]:to[0])+1+"px", + top:from[1]-3+"px", + cursor:"s-resize",display:"block" + }).data({"type":"tb","tid":id}); + } + x=(from[0]+to[0])/2-40; + y=(from[1]+to[1])/2+4; + this.$lineOper.css({display:"block",left:x+"px",top:y+"px"}).data("tid",id); + if(this.$editable){ + this.$mpFrom.css({display:"block",left:n[0]-4+"px",top:n[1]-4+"px"}).data("p",n[0]+","+n[1]); + this.$mpTo.css({display:"block",left:n[2]-4+"px",top:n[3]-4+"px"}).data("p",n[2]+","+n[3]); + } + this.$draw.appendChild(jq[0]); + } + + this.switchToolBtn("cursor"); + }, + //传入一个节点的ID，判断在图中的哪个区域组(泳道)的范围内 + _node2Area:function(nodeId){ + if(this.$group===null) return; + var node=this.$nodeData[nodeId]; + var lane=false; + for(var key in this.$areaData){ + var area = this.$areaData[key]; + if( node.left>=area.left&&node.left=area.top&&node.top
"+json.name+"
"); + } + else{ + json.width=26;json.height=26; + this.$nodeDom[id]=$("
"+json.name+"
"); + } + if(GooFlow.color.node){ + if(json.type.indexOf(" mix")>-1){ + this.$nodeDom[id].css({"background-color":GooFlow.color.mix,"border-color":GooFlow.color.mix}); + if(GooFlow.color.mixFont){ + this.$nodeDom[id].find("td:eq(1)").css("color",GooFlow.color.mixFont); + this.$nodeDom[id].find(".span").css("color",GooFlow.color.mixFont); + } + }else{ + this.$nodeDom[id].css({"background-color":GooFlow.color.node,"border-color":GooFlow.color.node}); + } + if(mark&&GooFlow.color.mark){ + this.$nodeDom[id].css({"border-color":GooFlow.color.mark}); + } + } + if(json.type.indexOf(" mix")>-1){ + this.$nodeDom[id].addClass("item_mix"); + } + + var ua=navigator.userAgent.toLowerCase(); + if(ua.indexOf('msie')!==-1 && ua.indexOf('8.0')!==-1) + this.$nodeDom[id].css("filter","progid:DXImageTransform.Microsoft.Shadow(color=#94AAC2,direction=135,strength=2)"); + this.$workArea.append(this.$nodeDom[id]); + this.$nodeData[id]=json; + ++this.$nodeCount; + if(this.$editable){ + this.$nodeData[id].alt=true; + this._node2Area(id); + if(this.$deletedItem[id]) delete this.$deletedItem[id];//在回退删除操作时,去掉该元素的删除记录 + } + }, + //移动结点到一个新的位置 + moveNode:function(id,left,top){ + if(!this.$nodeData[id]) return; + if(typeof this.onItemMove==='function' && this.onItemMove(id,"node",left,top)===false) return; + if(this.$undoStack){ + var paras=[id,this.$nodeData[id].left,this.$nodeData[id].top]; + this.pushOper("moveNode",paras); + } + if(left<0) left=0; + if(top<0) top=0; + $("#"+id).css({left:left*this.$scale+"px",top:top*this.$scale+"px"}); + this.$nodeData[id].left=left; + this.$nodeData[id].top=top; + //重画转换线 + this.resetLines(id,this.$nodeData[id]); + if(this.$editable){ + this.$nodeData[id].alt=true; + this._node2Area(id); + } + }, + //设置结点/连线/分组区域的文字信息 + setName:function(id,name,type, setInfo){ + var oldName; + if (type === "node") {//如果是结点 + this.$nodeData[id].setInfo = setInfo; + if(!this.$nodeData[id]) return; + if(this.$nodeData[id].name===name) return; + if(typeof this.onItemRename==='function' && this.onItemRename(id,name,"node")===false) return; + oldName=this.$nodeData[id].name; + this.$nodeData[id].name=name; + if(this.$nodeData[id].type.indexOf("round")>1){ + this.$nodeDom[id].children(".span").text(name); + } + else{ + this.$nodeDom[id].find("td:eq(1)").children("div").text(name); + + var width=this.$nodeDom[id].outerWidth(); + var height=this.$nodeDom[id].outerHeight(); + if(this.$nodeData[id].width!==width || this.$nodeData[id].height!==height){ + this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"}); + if(this.$undoStack){ + var para=[id,this.$nodeData[id].width,this.$nodeData[id].height]; + this.pushOper("resizeNode",para); + } + this.$nodeData[id].width=width; + this.$nodeData[id].height=height; + } + } + if(this.$editable){ + this.$nodeData[id].alt=true; + } + //重画转换线 + this.resetLines(id,this.$nodeData[id]); + } + else if (type === "line") {//如果是线 + this.$lineData[id].setInfo = setInfo; + if(!this.$lineData[id]) return; + if(this.$lineData[id].name===name) return; + if(typeof this.onItemRename==='function' && this.onItemRename(id,name,"node")===false) return; + oldName=this.$lineData[id].name; + this.$lineData[id].name=name; + if(GooFlow.prototype.useSVG!==""){ + this.$lineDom[id].childNodes[2].textContent=name; + } + else{ + this.$lineDom[id].childNodes[1].innerHTML=name; + var n=this.$lineDom[id].getAttribute("fromTo").split(","); + var x; + if(this.$lineData[id].type!=="lr"){ + x=(n[2]-n[0])/2; + } + else{ + var Min=n[2]>n[0]? n[0]:n[2]; + if(Min>this.$lineData[id].M) Min=this.$lineData[id].M; + x=this.$lineData[id].M-Min; + } + if(x<0) x=x*-1; + this.$lineDom[id].childNodes[1].style.left=x-this.$lineDom[id].childNodes[1].offsetWidth/2+4+"px"; + } + if(this.$editable){ + this.$lineData[id].alt=true; + } + } + else if(type==="area"){//如果是分组区域 + if(!this.$areaData[id]) return; + if(this.$areaData[id].name===name) return; + if(typeof this.onItemRename==='function' && this.onItemRename(id,name,"node")===false) return; + oldName=this.$areaData[id].name; + this.$areaData[id].name=name; + this.$areaDom[id].children("label").text(name); + if(this.$editable){ + this.$areaData[id].alt=true; + } + } + if(this.$undoStack){ + var paras=[id,oldName,type]; + this.pushOper("setName",paras); + } + }, + //设置结点的尺寸,仅支持非开始/结束结点 + resizeNode:function(id,width,height){ + if(!this.$nodeData[id]) return; + if(typeof this.onItemResize==='function' && this.onItemResize(id,"node",width,height)===false) return; + if(this.$nodeData[id].type==="start"||this.$nodeData[id].type==="end")return; + if(this.$undoStack){ + var paras=[id,this.$nodeData[id].width,this.$nodeData[id].height]; + this.pushOper("resizeNode",paras); + } + + this.$nodeDom[id].children("table").css({width:(width-2)*this.$scale+"px",height:(height-2)*this.$scale+"px"}); + //确保因内部文字太多而撑大时，宽高尺寸仍然是精确的 + width=this.$nodeDom[id].outerWidth(); + height=this.$nodeDom[id].outerHeight(); + this.$nodeDom[id].children("table").css({width:width-2+"px",height:height-2+"px"}); + //确保因内部文字太多而撑大时，宽高尺寸仍然是精确的 END + this.$nodeData[id].width=width; + this.$nodeData[id].height=height; + if(this.$editable){ + this.$nodeData[id].alt=true; + } + //重画转换线 + this.resetLines(id,this.$nodeData[id]); + this._node2Area(id); + }, + //删除结点 + delNode:function(id,trigger){ + if(!this.$nodeData[id]) return; + if(false!==trigger && typeof this.onItemDel==='function' && this.onItemDel(id,"node")===false) return; + //先删除可能的连线 + for(var k in this.$lineData){ + if(this.$lineData[k].from===id||this.$lineData[k].to===id){ + //this.$draw.removeChild(this.$lineDom[k]); + //delete this.$lineData[k]; + //delete this.$lineDom[k]; + this.delLine(k,false); + } + } + //再删除结点本身 + if(this.$undoStack){ + var paras=[id,this.$nodeData[id]]; + this.pushOper("addNode",paras); + } + delete this.$nodeData[id]; + this.$nodeDom[id].remove(); + delete this.$nodeDom[id]; + --this.$nodeCount; + if(this.$focus===id) this.$focus=""; + + if(this.$editable){ + //在回退新增操作时,如果节点ID以this.$id+"_node_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中 + //if(id.indexOf(this.$id+"_node_")<0) + this.$deletedItem[id]="node"; + } + }, + //设置流程图的名称 + setTitle:function(text){ + this.$title=text; + if(this.$head) this.$head.children("label").attr("title",text).text(text); + }, + //仅供内部使用：计算流程图的实际宽高（单位像素） + _suitSize:function(){ + var maxW=0,maxH=0; + for(var k1 in this.$nodeData){ + var node = this.$nodeData[k1]; + if(maxW < node.width+node.left){ + maxW = node.width+node.left; + } + if(maxH < node.height+node.top){ + maxH = node.height+node.top; + } + } + for(var k2 in this.$areaData){ + var area = this.$areaData[k2]; + if(maxW < area.width+area.left){ + maxW = area.width+area.left; + } + if(maxH < area.height+area.top){ + maxH = area.height+area.top; + } + } + for(var k3 in this.$lineData){ + var line = this.$lineData[k3]; + if(line.M && line.type==="lt" && maxW < line.M ){ + maxW = M+4; + } + if(line.M && line.type==="tb" && maxH < line.M ){ + maxH = M+4; + } + } + return {width:maxW,height:maxH} + + }, + //载入一组数据 + loadData:function(data){ + var t=this.$editable; + this.$editable=false; + if(data.title) this.setTitle(data.title); + if(data.initNum) this.$max=data.initNum; + for(var i in data.nodes) + this.addNode(i,data.nodes[i]); + for(var j in data.lines) + this.addLine(j,data.lines[j]); + for(var k in data.areas) + this.addArea(k,data.areas[k]); + this.$editable=t; + this.$deletedItem={}; + //自行重构工作区，使之大小自适应 + var width=this.$workArea.width(); + var height=this.$workArea.height(); + var max=this._suitSize(); + while(max.width>width){ + width+=this.$workExtendStep; + } + while(max.height>height){ + height+=this.$workExtendStep; + } + this.$workArea.css({height:height+"px",width:width+"px"}); + if(GooFlow.prototype.useSVG===""){ + this.$draw.coordsize = width+","+height; + } + this.$draw.style.width = width + "px"; + this.$draw.style.height = height + "px"; + if(this.$group!=null){ + this.$group.css({height:height+"px",width:width+"px"}); + } + }, + //用AJAX方式，远程读取一组数据 + //参数para为JSON结构，与JQUERY中$.ajax()方法的传参一样 + loadDataAjax:function(para){ + var This=this; + $.ajax({ + type:para.type, + url:para.url, + dataType:"json", + data:para.data, + success: function(msg){ + if(para['dataFilter']) para['dataFilter'](msg,"json"); + This.loadData(msg); + if(para.success) para.success(msg); + }, + error: function(XMLHttpRequest, textStatus, errorThrown){ + if(para.error) para.error(textStatus,errorThrown); + } + }) + }, + //把画好的整个流程图导出到一个变量中(其实也可以直接访问GooFlow对象的$nodeData,$lineData,$areaData这三个JSON属性) + exportData:function(){ + var ret={}; + ret.title=this.$title; + ret.nodes={}; + ret.lines={}; + ret.areas={}; + ret.initNum=this.$max; + for(var k1 in this.$nodeData){ + if(!this.$nodeData[k1].marked){ + delete this.$nodeData[k1]["marked"]; + } + ret.nodes[k1]=JSON.parse(JSON.stringify(this.$nodeData[k1])); + } + for(var k2 in this.$lineData){ + if(!this.$lineData[k2].marked){ + delete this.$lineData[k2]["marked"]; + } + ret.lines[k2]=JSON.parse(JSON.stringify(this.$lineData[k2])); + } + for(var k3 in this.$areaData){ + if(!this.$areaData[k3].marked){ + delete this.$areaData[k3]["marked"]; + } + ret.areas[k3]=JSON.parse(JSON.stringify(this.$areaData[k3])); + } + return ret; + }, + //只把本次编辑流程图中作了变更(包括增删改)的元素导出到一个变量中,以方便用户每次编辑载入的流程图后只获取变更过的数据 + exportAlter:function(){ + var ret={nodes:{},lines:{},areas:{}}; + for(var k1 in this.$nodeData){ + if(this.$nodeData[k1].alt){ + ret.nodes[k1]=this.$nodeData[k1]; + } + } + for(var k2 in this.$lineData){ + if(this.$lineData[k2].alt){ + ret.lines[k2]=this.$lineData[k2]; + } + } + for(var k3 in this.$areaData){ + if(this.$areaData[k3].alt){ + ret.areas[k3]=this.$areaData[k3]; + } + } + ret.deletedItem=this.$deletedItem; + return ret; + }, + //变更元素的ID,一般用于快速保存后,将后台返回新元素的ID更新到页面中;type为元素类型(节点,连线,区块) + transNewId:function(oldId,newId,type){ + var tmp; + switch(type){ + case "node": + if(this.$nodeData[oldId]){ + tmp=this.$nodeData[oldId]; + delete this.$nodeData[oldId]; + this.$nodeData[newId]=tmp; + tmp=this.$nodeDom[oldId].attr("id",newId); + delete this.$nodeDom[oldId]; + this.$nodeDom[newId]=tmp; + } + break; + case "line": + if(this.$lineData[oldId]){ + tmp=this.$lineData[oldId]; + delete this.$lineData[oldId]; + this.$lineData[newId]=tmp; + tmp=this.$lineDom[oldId].attr("id",newId); + delete this.$lineDom[oldId]; + this.$lineDom[newId]=tmp; + } + break; + case "area": + if(this.$areaData[oldId]){ + tmp=this.$areaData[oldId]; + delete this.$areaData[oldId]; + this.$areaData[newId]=tmp; + tmp=this.$areaDom[oldId].attr("id",newId); + delete this.$areaDom[oldId]; + this.$areaDom[newId]=tmp; + } + break; + } + }, + //清空工作区及已载入的数据 + clearData:function(){ + for(var k1 in this.$nodeData){ + this.delNode(k1); + } + for(var k2 in this.$lineData){ + this.delLine(k2); + } + for(var k3 in this.$areaData){ + this.delArea(k3); + } + this.$deletedItem={}; + }, + //销毁自己 + destrory:function(){ + this.$bgDiv.empty(); + this.$lineData=null; + this.$nodeData=null; + this.$lineDom=null; + this.$nodeDom=null; + this.$areaDom=null; + this.$areaData=null; + this.$nodeCount=0; + this.$areaCount=0; + this.$areaCount=0; + this.$deletedItem={}; + }, +///////////以下为有关画线的方法 + //绘制一条箭头线，并返回线的DOM + drawLine:function(id,sp,ep,mark,dash,$scale){ + var line,text; + var x=(ep[0]+sp[0])/2, y=(ep[1]+sp[1])/2; + if(GooFlow.prototype.useSVG!==""){ + line=document.createElementNS("http://www.w3.org/2000/svg","g"); + var hi=document.createElementNS("http://www.w3.org/2000/svg","path"); + var path=document.createElementNS("http://www.w3.org/2000/svg","path"); + + if(id!=="") line.setAttribute("id",id); + line.setAttribute("from",sp[0]+","+sp[1]); + line.setAttribute("to",ep[0]+","+ep[1]); + hi.setAttribute("visibility","hidden"); + hi.setAttribute("stroke-width",'9'); + hi.setAttribute("fill","none"); + hi.setAttribute("stroke","white"); + hi.setAttribute("d","M "+sp[0]+" "+sp[1]+" L "+ep[0]+" "+ep[1]); + hi.setAttribute("pointer-events","stroke"); + path.setAttribute("d","M "+sp[0]+" "+sp[1]+" L "+ep[0]+" "+ep[1]); + path.setAttribute("stroke-width",mark? '2.4':'1.4'); + path.setAttribute("stroke-linecap","round"); + path.setAttribute("fill","none"); + if(dash) path.setAttribute("style", "stroke-dasharray:6,5"); + if(mark){ + path.setAttribute("stroke",GooFlow.color.mark); + path.setAttribute("marker-end","url(#arrow2)"); + } + else{ + path.setAttribute("stroke",GooFlow.color.line); + path.setAttribute("marker-end","url(#arrow1)"); + } + line.appendChild(hi); + line.appendChild(path); + line.style.cursor="crosshair"; + if(id!==""&&id!=="GooFlow_tmp_line"){ + text=document.createElementNS("http://www.w3.org/2000/svg","text"); + text.setAttribute("fill",GooFlow.color.lineFont); + line.appendChild(text); + + text.setAttribute("text-anchor","middle"); + text.setAttribute("x",x+''); + text.setAttribute("y",y+''); + text.style.cursor="text"; + text.style.fontSize=14*$scale+"px"; + line.style.cursor="pointer"; + } + }else{ + line=document.createElement("v:polyline"); + if(id!=="") line.id=id; + //line.style.position="absolute"; + line.points.value=sp[0]+","+sp[1]+" "+ep[0]+","+ep[1]; + line.setAttribute("fromTo",sp[0]+","+sp[1]+","+ep[0]+","+ep[1]); + line.strokeWeight="1.2"; + line.stroke.EndArrow="Block"; + line.style.cursor="crosshair"; + if(id!==""&&id!=="GooFlow_tmp_line"){ + text=document.createElement("div"); + //text.innerHTML=id; + line.appendChild(text); + if(x<0) x=x*-1; + if(y<0) y=y*-1; + text.style.left=x+"px"; + text.style.top=y-6+"px"; + text.style.color=GooFlow.color.lineFont; + text.style.fontSize=14*$scale+"px"; + line.style.cursor="pointer"; + } + if(dash) line.stroke.dashStyle="Dash"; + if(mark) line.strokeColor=GooFlow.color.mark; + else line.strokeColor=GooFlow.color.line; + line.fillColor=GooFlow.color.line; + } + return line; + }, + //画一条只有两个中点的折线 + drawPoly:function(id,sp,m1,m2,ep,mark,dash,$scale){ + var poly,strPath, text; + var x=(m2[0]+m1[0])/2, y=(m2[1]+m1[1])/2; + if(GooFlow.prototype.useSVG!==""){ + poly=document.createElementNS("http://www.w3.org/2000/svg","g"); + var hi=document.createElementNS("http://www.w3.org/2000/svg","path"); + var path=document.createElementNS("http://www.w3.org/2000/svg","path"); + if(id!=="") poly.setAttribute("id",id); + poly.setAttribute("from",sp[0]+","+sp[1]); + poly.setAttribute("to",ep[0]+","+ep[1]); + hi.setAttribute("visibility","hidden"); + hi.setAttribute("stroke-width",'9'); + hi.setAttribute("fill","none"); + hi.setAttribute("stroke","white"); + strPath="M "+sp[0]+" "+sp[1]; + if(m1[0]!==sp[0]||m1[1]!==sp[1]) + strPath+=" L "+m1[0]+" "+m1[1]; + if(m2[0]!==ep[0]||m2[1]!==ep[1]) + strPath+=" L "+m2[0]+" "+m2[1]; + strPath+=" L "+ep[0]+" "+ep[1]; + hi.setAttribute("d",strPath); + hi.setAttribute("pointer-events","stroke"); + path.setAttribute("d",strPath); + path.setAttribute("stroke-width",mark? '2.4':'1.4'); + path.setAttribute("stroke-linecap","round"); + path.setAttribute("fill","none"); + if(dash) path.setAttribute("style", "stroke-dasharray:6,5"); + if(mark){ + path.setAttribute("stroke",GooFlow.color.mark); + path.setAttribute("marker-end","url(#arrow2)"); + } + else{ + path.setAttribute("stroke",GooFlow.color.line); + path.setAttribute("marker-end","url(#arrow1)"); + } + poly.appendChild(hi); + poly.appendChild(path); + text=document.createElementNS("http://www.w3.org/2000/svg","text"); + text.setAttribute("fill",GooFlow.color.lineFont); + poly.appendChild(text); + text.setAttribute("text-anchor","middle"); + text.setAttribute("x",x+''); + text.setAttribute("y",y+''); + text.style.cursor="text"; + } + else{ + poly=document.createElement("v:Polyline"); + if(id!=="") poly.id=id; + poly.filled="false"; + strPath=sp[0]+","+sp[1]; + if(m1[0]!==sp[0]||m1[1]!==sp[1]) + strPath+=" "+m1[0]+","+m1[1]; + if(m2[0]!==ep[0]||m2[1]!==ep[1]) + strPath+=" "+m2[0]+","+m2[1]; + strPath+=" "+ep[0]+","+ep[1]; + poly.points.value=strPath; + poly.setAttribute("fromTo",sp[0]+","+sp[1]+","+ep[0]+","+ep[1]); + poly.strokeWeight=mark? "2.4":"1.2"; + poly.stroke.EndArrow="Block"; + text=document.createElement("div"); + //text.innerHTML=id; + poly.appendChild(text); + if(x<0) x=x*-1; + if(y<0) y=y*-1; + text.style.left=x+"px"; + text.style.top=y-4+"px"; + text.style.color=GooFlow.color.lineFont; + if(dash) poly.stroke.dashStyle="Dash"; + if(mark) poly.strokeColor=GooFlow.color.mark; + else poly.strokeColor=GooFlow.color.line; + } + poly.style.cursor="pointer"; + text.style.fontSize=14*$scale+"px"; + return poly; + }, + //原lineData已经设定好的情况下，只在绘图工作区画一条线的页面元素 + addLineDom:function(id,lineData){ + var n1=this.$nodeData[lineData.from],n2=this.$nodeData[lineData.to];//获取开始/结束结点的数据 + if(!n1||!n2) return; + //开始计算线端点坐标 + var res; + if(lineData.type&&lineData.type!=="sl") + res=calcPolyPoints(n1,n2,lineData.type,lineData.M, this.$scale); + else + res=calcStartEnd(n1,n2, this.$scale); + if(!res) return; + + if(lineData.type==="sl") + this.$lineDom[id]=GooFlow.prototype.drawLine(id,res.start,res.end,lineData.marked,lineData.dash, this.$scale); + else + this.$lineDom[id]=GooFlow.prototype.drawPoly(id,res.start,res.m1,res.m2,res.end,lineData.marked,lineData.dash, this.$scale); + this.$draw.appendChild(this.$lineDom[id]); + if(GooFlow.prototype.useSVG===""){ + this.$lineDom[id].childNodes[1].innerHTML=lineData.name; + if(lineData.type!=="sl"){ + var Min=(res.start[0]>res.end[0]? res.end[0]:res.start[0]); + if(Min>res.m2[0]) Min=res.m2[0]; + if(Min>res.m1[0]) Min=res.m1[0]; + this.$lineDom[id].childNodes[1].style.left = (res.m2[0]+res.m1[0])/2-Min-this.$lineDom[id].childNodes[1].offsetWidth/2+4; + Min=(res.start[1]>res.end[1]? res.end[1]:res.start[1]); + if(Min>res.m2[1]) Min=res.m2[1]; + if(Min>res.m1[1]) Min=res.m1[1]; + this.$lineDom[id].childNodes[1].style.top = (res.m2[1]+res.m1[1])/2-Min-this.$lineDom[id].childNodes[1].offsetHeight/2; + }else + this.$lineDom[id].childNodes[1].style.left= + ((res.end[0]-res.start[0])*(res.end[0]>res.start[0]? 1:-1)-this.$lineDom[id].childNodes[1].offsetWidth)/2+4; + } + else{ + this.$lineDom[id].childNodes[2].textContent=lineData.name; + } + }, + //增加一条线 + addLine:function(id,json){ + if(typeof this.onItemAdd==='function' && this.onItemAdd(id,"line",json)===false)return; + if(this.$undoStack&&this.$editable){ + this.pushOper("delLine",[id]); + } + if(json.from===json.to) return; + var n1=this.$nodeData[json.from],n2=this.$nodeData[json.to];//获取开始/结束结点的数据 + if(!n1||!n2) return; + //避免两个节点间不能有一条以上同向接连线 + for(var k in this.$lineData){ + if((json.from===this.$lineData[k].from&&json.to===this.$lineData[k].to&&json.dash===this.$lineData[k].dash)) + return; + } + //设置$lineData[id] + this.$lineData[id]={}; + if(json.type){ + this.$lineData[id].type=json.type; + this.$lineData[id].M=json.M; + } + else this.$lineData[id].type="sl";//默认为直线 + this.$lineData[id].from=json.from; + this.$lineData[id].to = json.to; + this.$lineData[id].setInfo = json.setInfo; + this.$lineData[id].name=json.name; + if(json.marked) this.$lineData[id].marked=json.marked; + else this.$lineData[id].marked=false; + if(json.dash) this.$lineData[id].dash=json.dash; + else this.$lineData[id].dash=false; + //设置$lineData[id]完毕 + + this.addLineDom(id,this.$lineData[id]); + + ++this.$lineCount; + if(this.$editable){ + this.$lineData[id].alt=true; + if(this.$deletedItem[id]) delete this.$deletedItem[id];//在回退删除操作时,去掉该元素的删除记录 + } + }, + //重构所有连向某个结点的线的显示，传参结构为$nodeData数组的一个单元结构 + resetLines:function(id,node){ + for(var i in this.$lineData){ + var other=null;//获取结束/开始结点的数据 + var res; + if(this.$lineData[i].from===id){//找结束点 + other=this.$nodeData[this.$lineData[i].to]||null; + if(other==null) continue; + if(this.$lineData[i].type==="sl") + res=calcStartEnd(node,other, this.$scale); + else + res=calcPolyPoints(node,other,this.$lineData[i].type,this.$lineData[i].M, this.$scale); + if(!res) break; + } + else if(this.$lineData[i].to===id){//找开始点 + other=this.$nodeData[this.$lineData[i].from]||null; + if(other==null) continue; + if(this.$lineData[i].type==="sl") + res=calcStartEnd(other,node, this.$scale); + else + res=calcPolyPoints(other,node,this.$lineData[i].type,this.$lineData[i].M, this.$scale); + if(!res) break; + } + if(other==null) continue; + this.$draw.removeChild(this.$lineDom[i]); + if(this.$lineData[i].type==="sl"){ + this.$lineDom[i]=GooFlow.prototype.drawLine(i,res.start,res.end,this.$lineData[i].marked,this.$lineData[i].dash, this.$scale); + } + else{ + this.$lineDom[i]=GooFlow.prototype.drawPoly(i,res.start,res.m1,res.m2,res.end,this.$lineData[i].marked,this.$lineData[i].dash, this.$scale); + } + this.$draw.appendChild(this.$lineDom[i]); + if(GooFlow.prototype.useSVG===""){ + this.$lineDom[i].childNodes[1].innerHTML=this.$lineData[i].name; + if(this.$lineData[i].type!=="sl"){ + var Min=(res.start[0]>res.end[0]? res.end[0]:res.start[0]); + if(Min>res.m2[0]) Min=res.m2[0]; + if(Min>res.m1[0]) Min=res.m1[0]; + this.$lineDom[i].childNodes[1].style.left = (res.m2[0]+res.m1[0])/2-Min-this.$lineDom[i].childNodes[1].offsetWidth/2+4; + Min=(res.start[1]>res.end[1]? res.end[1]:res.start[1]); + if(Min>res.m2[1]) Min=res.m2[1]; + if(Min>res.m1[1]) Min=res.m1[1]; + this.$lineDom[i].childNodes[1].style.top = (res.m2[1]+res.m1[1])/2-Min-this.$lineDom[i].childNodes[1].offsetHeight/2-4; + }else + this.$lineDom[i].childNodes[1].style.left= + ((res.end[0]-res.start[0])*(res.end[0]>res.start[0]? 1:-1)-this.$lineDom[i].childNodes[1].offsetWidth)/2+4; + } + else this.$lineDom[i].childNodes[2].textContent=this.$lineData[i].name; + } + }, + //重新设置连线的样式 newType= "sl":直线, "lr":中段可左右移动型折线, "tb":中段可上下移动型折线 + setLineType:function(id,newType,M){ + if(!newType||newType==null||newType===""||newType===this.$lineData[id].type) return false; + if(typeof this.onLineSetType==='function' && this.onLineSetType(id,newType)===false) return; + if(this.$undoStack){ + var paras=[id,this.$lineData[id].type,this.$lineData[id].M]; + this.pushOper("setLineType",paras); + } + var from=this.$lineData[id].from; + var to=this.$lineData[id].to; + this.$lineData[id].type=newType; + var res; + //如果是变成折线 + if(newType!=="sl"){ + //res=calcPolyPoints(this.$nodeData[from],this.$nodeData[to],this.$lineData[id].type,this.$lineData[id].M, this.$scale); + if(M){ + this.setLineM(id,M,true); + }else{ + this.setLineM(id,getMValue(this.$nodeData[from],this.$nodeData[to],newType),true); + } + } + //如果是变回直线 + else{ + delete this.$lineData[id].M; + this.$lineMove.hide().removeData("type").removeData("tid"); + res=calcStartEnd(this.$nodeData[from],this.$nodeData[to], this.$scale); + if(!res) return; + this.$draw.removeChild(this.$lineDom[id]); + this.$lineDom[id]=GooFlow.prototype.drawLine(id,res.start,res.end,this.$lineData[id].marked,this.$lineData[id].dash, this.$scale); + this.$draw.appendChild(this.$lineDom[id]); + if(GooFlow.prototype.useSVG===""){ + this.$lineDom[id].childNodes[1].innerHTML=this.$lineData[id].name; + this.$lineDom[id].childNodes[1].style.left= + ((res.end[0]-res.start[0])*(res.end[0]>res.start[0]? 1:-1)-this.$lineDom[id].childNodes[1].offsetWidth)/2+4; + } + else + this.$lineDom[id].childNodes[2].textContent=this.$lineData[id].name; + } + if(this.$focus===id){ + this.focusItem(id); + } + if(this.$editable){ + this.$lineData[id].alt=true; + } + }, + //设置折线中段的X坐标值（可左右移动时）或Y坐标值（可上下移动时） + setLineM:function(id,M,noStack){ + if(!this.$lineData[id]||M<0||!this.$lineData[id].type||this.$lineData[id].type==="sl") return false; + if(typeof this.onLineMove==='function' && this.onLineMove(id,M)===false) return false; + if(this.$undoStack&&!noStack){ + var paras=[id,this.$lineData[id].M]; + this.pushOper("setLineM",paras); + } + var from=this.$lineData[id].from; + var to=this.$lineData[id].to; + this.$lineData[id].M=M; + var ps=calcPolyPoints(this.$nodeData[from],this.$nodeData[to],this.$lineData[id].type,this.$lineData[id].M, this.$scale); + this.$draw.removeChild(this.$lineDom[id]); + this.$lineDom[id]=GooFlow.prototype.drawPoly(id,ps.start,ps.m1,ps.m2,ps.end,this.$lineData[id].marked,this.$lineData[id].dash, this.$scale); + this.$draw.appendChild(this.$lineDom[id]); + if(GooFlow.prototype.useSVG===""){ + this.$lineDom[id].childNodes[1].innerHTML=this.$lineData[id].name; + var Min=(ps.start[0]>ps.end[0]? ps.end[0]:ps.start[0]); + if(Min>ps.m2[0]) Min=ps.m2[0]; + if(Min>ps.m1[0]) Min=ps.m1[0]; + this.$lineDom[id].childNodes[1].style.left = (ps.m2[0]+ps.m1[0])/2-Min-this.$lineDom[id].childNodes[1].offsetWidth/2+4; + Min=(ps.start[1]>ps.end[1]? ps.end[1]:ps.start[1]); + if(Min>ps.m2[1]) Min=ps.m2[1]; + if(Min>ps.m1[1]) Min=ps.m1[1]; + this.$lineDom[id].childNodes[1].style.top = (ps.m2[1]+ps.m1[1])/2-Min-this.$lineDom[id].childNodes[1].offsetHeight/2-4; + } + else this.$lineDom[id].childNodes[2].textContent=this.$lineData[id].name; + if(this.$editable){ + this.$lineData[id].alt=true; + } + }, + //删除转换线 + delLine:function(id,trigger){ + if(!this.$lineData[id]) return; + if(false!==trigger && typeof this.onItemDel==='function' && this.onItemDel(id,"node")===false) return; + if(this.$undoStack){ + var paras=[id,this.$lineData[id]]; + this.pushOper("addLine",paras); + } + this.$draw.removeChild(this.$lineDom[id]); + delete this.$lineData[id]; + delete this.$lineDom[id]; + if(this.$focus===id) this.$focus=""; + --this.$lineCount; + if(this.$editable){ + //在回退新增操作时,如果节点ID以this.$id+"_line_"开头,则表示为本次编辑时新加入的节点,这些节点的删除不用加入到$deletedItem中 + // if(id.indexOf(this.$id+"_line_")<0) + this.$deletedItem[id]="line"; + this.$mpFrom.hide().removeData("p"); + this.$mpTo.hide().removeData("p"); + } + if(this.$lineOper){ + this.$lineOper.hide().removeData("tid"); + } + }, + //变更连线两个端点所连的结点 + //参数：要变更端点的连线ID，新的开始结点ID、新的结束结点ID；如果开始/结束结点ID是传入null或者""，则表示原端点不变 + moveLinePoints:function(lineId, newStart, newEnd, noStack){ + if(newStart===newEnd) return; + if(!lineId||!this.$lineData[lineId]) return; + if(newStart==null||newStart==="") + newStart=this.$lineData[lineId].from; + if(newEnd==null||newEnd==="") + newEnd=this.$lineData[lineId].to; + + //避免两个节点间不能有一条以上同向接连线 + for(var k in this.$lineData){ + if((newStart===this.$lineData[k].from&&newEnd===this.$lineData[k].to)) + return; + } + if(typeof this.onLinePointMove==='function' && this.onLinePointMove(lineId,newStart,newEnd)===false) return; + if(this.$undoStack&&!noStack){ + var paras=[lineId,this.$lineData[lineId].from,this.$lineData[lineId].to]; + this.pushOper("moveLinePoints",paras); + } + if(newStart!=null&&newStart!==""){ + this.$lineData[lineId].from=newStart; + } + if(newEnd!=null&&newEnd!==""){ + this.$lineData[lineId].to=newEnd; + } + //重建转换线 + this.$draw.removeChild(this.$lineDom[lineId]); + this.addLineDom(lineId,this.$lineData[lineId]); + if(this.$editable){ + this.$lineData[lineId].alt=true; + } + }, + + //用颜色标注/取消标注一个结点或转换线，常用于显示重点或流程的进度。 + //这是一个在编辑模式中无用,但是在纯浏览模式中非常有用的方法，实际运用中可用于跟踪流程的进度。 + markItem:function(id,type,mark){ + if(type==="node"){ + if(!this.$nodeData[id]) return; + if(typeof this.onItemMark==='function' && this.onItemMark(id,"node",mark)===false) return; + this.$nodeData[id].marked=mark||false; + if(mark){ + this.$nodeDom[id].addClass("item_mark").css("border-color",GooFlow.color.mark); + } + else{ + this.$nodeDom[id].removeClass("item_mark"); + if(id!==this.$focus) this.$nodeDom[id].css("border-color","transparent"); + } + + }else if(type==="line"){ + if(!this.$lineData[id]) return; + if(this.onItemMark!=null&&!this.onItemMark(id,"line",mark)) return; + this.$lineData[id].marked=mark||false; + if(GooFlow.prototype.useSVG!==""){ + if(mark){ + this.$lineDom[id].childNodes[1].setAttribute("stroke",GooFlow.color.mark); + this.$lineDom[id].childNodes[1].setAttribute("marker-end","url(#arrow2)"); + this.$lineDom[id].childNodes[1].setAttribute("stroke-width",2.4); + }else{ + this.$lineDom[id].childNodes[1].setAttribute("stroke",GooFlow.color.line); + this.$lineDom[id].childNodes[1].setAttribute("marker-end","url(#arrow1)"); + this.$lineDom[id].childNodes[1].setAttribute("stroke-width",1.4); + } + }else{ + if(mark){ + this.$lineDom[id].strokeColor=GooFlow.color.mark; + this.$lineDom[id].strokeWeight="2.4"; + } + else{ + this.$lineDom[id].strokeColor=GooFlow.color.line; + this.$lineDom[id].strokeWeight="1.2"; + } + } + } + if(this.$undoStack){ + var paras=[id,type,!mark]; + this.pushOper("markItem",paras); + } + }, + ////////////////////////以下为区域分组块操作 + //传入一个区域组(泳道)的ID，判断图中所有结点在此区域组(泳道)的范围内 + _areaFixNodes:function(areaId){ + var area=this.$areaData[areaId]; + for(var key in this.$nodeData){ + var node = this.$nodeData[key]; + if( node.left>=area.left&&node.left=area.top&&node.top
" + +"
"); + this.$areaData[id]=json; + this.$group.append(this.$areaDom[id]); + if(this.$nowType!=="group") this.$areaDom[id].children("div:eq(1)").css("display","none"); + ++this.$areaCount; + if(this.$editable){ + this.$areaData[id].alt=true; + this._areaFixNodes(id); + if(this.$deletedItem[id]) delete this.$deletedItem[id];//在回退删除操作时,去掉该元素的删除记录 + } + }, + //重构整个流程图设计器的宽高 + reinitSize:function(width,height){ + var w=(width||this.$bgDiv.width()); + var h=(height||this.$bgDiv.height()); + this.$bgDiv.css({height:h+"px",width:w+"px"}); + var headHeight=0,hack=8; + if(this.$head!=null){ + headHeight=26; + hack=5; + } + if(this.$tool!=null){ + this.$tool.css({height:h-headHeight-hack+"px"}); + w-=31; + } + w-=9; + h=h-headHeight-(this.$head!=null? 5:8); + //this.$workArea.parent().css({height:h+"px",width:w+"px"}); + + if(this.$workArea.width()>w){ + w=this.$workArea.width(); + } + if(this.$workArea.height()>h){ + h=this.$workArea.height(); + } + + this.$workArea.css({height:h+"px",width:w+"px"}); + if(GooFlow.prototype.useSVG===""){ + this.$draw.coordsize = w+","+h; + } + this.$draw.style.width = w + "px"; + this.$draw.style.height = h + "px"; + if(this.$group!=null){ + this.$group.css({height:h+"px",width:w+"px"}); + } + }, + //重设整个工作区内容的显示缩放比例，从0.5至4倍 + resetScale:function(scale){ + if(!scale) scale=1.0; + else if(scale<0.5) scale=0.5; + else if(scale>4) scale=4; + //以上是固定死取值范围：不让用户缩放过大或过小，已免无意中影响的显示效果 + if(this.$scale===scale) return; + var oldS=this.$scale; + this.$scale=scale; + var factor = oldS/scale;//因数（旧缩放比例除以新缩放比例）,元素的现有值除以该因子，就能得到新的缩放后的值 + var W=0,H=0,P={};//宽、高、左及上的临时变量 + //开始正式的缩放（节点、连线、泳道块有宽高和定位，其它编辑工具元素则只有定位）（全部以左上角为原点） + this.blurItem(); + //先缩放工作区 + W=this.$workArea.width()/factor; + H=this.$workArea.height()/factor; + this.$workArea.css({"height":H+"px","width":W+"px"}); + if(GooFlow.prototype.useSVG!==""){ + + }else{ + this.$draw.coordsize = W+","+H; + } + this.$draw.style.width = W + "px"; + this.$draw.style.height = H + "px"; + if(this.$group!=null){ + this.$group.css({height:H+"px",width:W+"px"}); + } + //缩放节点 + var isWebkit = navigator.userAgent.toLowerCase().indexOf('webkit') > -1; + this.$workArea.children(".GooFlow_item").each(function(){ + var This=$(this); + P=This.position(); + This.css({ "left":P.left/factor+"px", "top":P.top/factor+"px" }); + This=This.children("table"); + W=This.outerWidth()/factor; + H=This.outerHeight()/factor; + This.css({ "width":W+"px", "height":H+"px" }); + var tmp=18*scale; + This.find("td[class='ico']").css({width:tmp+"px"}); + var newSize= {}; + if(tmp<12&&isWebkit){ + newSize["width"]="18px";newSize["height"]="18px"; + newSize["font-size"]="18px"; + newSize["transform"]="scale("+(tmp/18)+")"; + newSize["margin"]=-((18-tmp)/2)+"px"; + }else{ + newSize["width"]=tmp+"px"; newSize["height"]=tmp+"px"; + newSize["font-size"]=tmp+"px"; + newSize["transform"]="none"; + newSize["margin"]="0px auto"; + } + This.find("td[class='ico']").children("i").css(newSize); + + tmp=14*scale; + if(This.parent().find(".span").length===1){ + This.parent().css("border-radius",W/2+"px"); + This=This.parent().find(".span"); + This.css({"font-size":tmp+"px"}); + }else{ + This=This.find("td:eq(1) div"); + newSize={}; + if(tmp<12&&isWebkit){ + newSize["font-size"]="14px"; + newSize["transform"]="scale("+(tmp/14)+")"; + var mW=(W/scale-18-(W-18*scale))/2; + var mH=(H/scale-H)/2; + newSize["margin"]=-mH+"px "+(-mW)+"px"; + }else{ + newSize["transform"]="none"; + newSize["font-size"]=tmp+"px"; + newSize["margin"]="0px"; + } + This.css(newSize); + } + }); + //缩放区域图 + var ifs=16*scale+2; + this.$group.children(".GooFlow_area").each(function(){ + var This=$(this); + P=This.position(); + This.css({ "left":P.left/factor+"px", "top":P.top/factor+"px" }); + This=This.children("div:eq(0)"); + W=This.outerWidth()/factor; + H=This.outerHeight()/factor; + This.css({ "width":W+"px", "height":H+"px" }); + This.next("label").css({ + "font-size": 14*scale+"px", + "left": ifs+3+"px" + }).next("i").css({ + "font-size": ifs-2+"px", + width:ifs+"px", + height:ifs+"px", + "line-height":ifs+"px" + }); + }); + //缩放连线 + for(var id in this.$lineDom){ + this.$draw.removeChild(this.$lineDom[id]); + delete this.$lineDom[id]; + } + for (var key in this.$lineData) { + this.addLineDom(key, this.$lineData[key]); + } + } +}; +//默认的颜色样式 +GooFlow.color={ + //main:"#20A0FF", + font:"#15428B", + node:"#C0CCDA", + line:"#1D8CE0", + lineFont:"#777", + mark:"#ff8800", + mix:"#B6F700", + mixFont:"#777" +}; + //默认的文字说明注释内容 +GooFlow.remarks={ + headBtns:{}, + toolBtns:{}, + extendRight:undefined, + extendBottom:undefined +}; +//当不想使用jquery插件式初始化方法时，另一种通过直接调用GooFlow内部构造方法进行的初始化 +GooFlow.init=function(selector,property){ + return new GooFlow(selector,property); +}; +//在初始化出一个对象前的公用方法：覆盖设定GooFlow默认的颜色定义 +GooFlow.setColors=function(colors){ + $.extend(GooFlow.color,colors); +}; +//扩展GooFlow方法的扩展用接口，一般用在CMD,AMD +GooFlow.extend=function(json){ + for(var funcName in json){ + GooFlow.prototype[funcName]=json[funcName]; + } +}; +//将此类的构造函数加入至JQUERY对象中 +$.extend({ + createGooFlow:function(selector,property){ + return new GooFlow(selector,property); + } +}); + + exports('flow/gooflow'); + }); \ No newline at end of file diff --git a/OpenAuth.Mvc/js/flow/GooFlow.print.js b/OpenAuth.Mvc/js/flow/GooFlow.print.js new file mode 100644 index 00000000..4404b460 --- /dev/null +++ b/OpenAuth.Mvc/js/flow/GooFlow.print.js @@ -0,0 +1,207 @@ +/* + * 打印预览或另存为PDF功能，需要依赖: + * ../plugin/printThis.js + */ +;(function ( global, factory ) { + 'use strict'; + if ( typeof define !== 'undefined' && define.amd ) { // export as AMD... + define( ['jquery','GooFlow'], factory ); + } + else if ( typeof module !== 'undefined' && module.exports ) { // ...or as browserify + factory( require('jquery'), require('GooFlow') ); + }else + factory( global.$, global.GooFlow ); + +}( typeof window !== 'undefined' ? window : this, function ( $,GooFlow ) { + if(GooFlow.prototype.print && typeof GooFlow.prototype.print==='function'){ + return;//防止多次载入 + } +/* + * printThis v1.12.2 + * @desc Printing plug-in for jQuery + * @author Jason Day + * 精简版 only for GooFlow + */ + (function($) { + + function appendContent($el, content) { + if (!content) return; + + // Simple test for a jQuery element + $el.append(content.jquery ? content.clone() : content); + } + + function appendBody($body, $element, opt) { + // Clone for safety and convenience + // Calls clone(withDataAndEvents = true) to copy form values. + var $content = $element.clone(); + + if (opt.printContainer) { + // grab $.selector as container + $content.appendTo($body); + } else { + // otherwise just print interior elements of container + $content.each(function() { + $(this).children().appendTo($body) + }); + } + } + + var opt; + $.fn.printThis = function(options) { + opt = $.extend({}, $.fn.printThis.defaults, options); + var $element = this instanceof jQuery ? this : $(this); + + var strFrameName = "printThis-" + (new Date()).getTime(); + + if (window.location.hostname !== document.domain && navigator.userAgent.match(/msie/i)) { + // Ugly IE hacks due to IE not inheriting document.domain from parent + // checks if document.domain is set by comparing the host name against document.domain + var iframeSrc = 'javascript:document.write("")'; + var printI = document.createElement('iframe'); + printI.name = "printIframe"; + printI.id = strFrameName; + printI.className = "MSIE"; + document.body.appendChild(printI); + printI.src = iframeSrc; + + } else { + // other browsers inherit document.domain, and IE works if document.domain is not explicitly set + var $frame = $("