1.借鉴自：
http://www.codefans.net/soft/3061.shtml 来源于网上。
flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG创建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具 ，支持各种交互式图表的创建。有免费版和收费版
joint.js http://www.jointjs.com/ joint.js 是另一个创建图标库的工具，也提供免费版和商业版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套开源的流程图创建工具 ，小巧精悍，使用简单
d3 http://d3js.org 在html5领域，d3可谓是最好的可视化基础库，提供方面的DOM操作，非常强大。
====================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WEB流程图制作_Demo:http://www.codefans.net</title>
<style type="text/css">
v\:*{BEHAVIOR:url(#default#VML)}body{margin:0,0,0,0;}#group{position:absolute;top:0px;left:0px;height:100%;width:100%;z-index:-1000;}#menu table{font-size:11px;background-image:url(img/menubg.gif);z-index:1000;height:100%;}#menu td{white-space:nowrap;}#movebar{font-size:11px;z-index:1000;cursor:move;height:30;width:8;}#movebar div{height:30;width:8;background-image:url(img/grid-blue-split.gif);}#menu img{vertical-align:middle;height:16px;}#menu span{vertical-align:bottom;cursor:hand;padding-left:3px;padding-top:5px;padding-bottom:2px;padding-right:5;}.x-window{}.x-window-tc{background:transparent url(img/window/top-bottom.png) repeat-x 0 0;overflow:hidden;zoom:1;height:25px;padding-top:5px;font-size:12px;cursor:move;}.x-window-tl{background:transparent url(img/window/left-corners.png) no-repeat 0 0;padding-left:6px;zoom:1;z-index:1;position:relative;}.x-window-tr{background:transparent url(img/window/right-corners.png) no-repeat right 0;padding-right:6px;}.x-window-bc{background:transparent url(img/window/top-bottom.png) repeat-x 0 bottom;zoom:1;text-align:center;height:30px;padding-top:4px;}.x-window-bl{background:transparent url(img/window/left-corners.png) no-repeat 0 bottom;padding-left:6px;zoom:1;}.x-window-br{background:transparent url(img/window/right-corners.png) no-repeat right bottom;padding-right:6px;zoom:1;}.x-window-mc{border:1px solid #99bbe8;padding:0;margin:0;font:normal 11px tahoma,arial,helvetica,sans-serif;background:#dfe8f6;width:384px;height:231px;}.x-window-ml{background:transparent url(img/window/left-right.png) repeat-y 0 0;padding-left:6px;zoom:1;}.x-window-mr{background:transparent url(img/window/left-right.png) repeat-y right 0;padding-right:6px;zoom:1;}.x-tool-close{overflow:hidden;width:15px;height:15px;float:right;cursor:pointer;background:transparent url(img/window/tool-sprites.gif) no-repeat;background-position:0 -0;margin-left:2px;}.x-tab-panel-header{border:1px solid #8db2e3;padding-bottom:2px;border-top-width:0;border-left-width:0;border-right-width:0;height:26px;}.x-tab-panel-body{overflow-y:auto;height:200px;display:none;}.x-tab-panel-body-show{overflow-y:auto;height:200px;padding-top:3px;}.x-tab-strip-top{float:left;width:100%;height:27px;padding-top:1px;background:url(img/window/tab-strip-bg.gif) #cedff5 repeat-x top;}.x-tab-strip-wrap{width:100%;border-bottom:1px solid #8db2e3;}.x-tab-strip-top ul{list-style:none;margin:0px;padding:0px;}.x-tab-strip-top li{float:left;display:block;width:60px;padding-left:3px;text-align:center;font-size:11px;}.x-tab-strip-top .x-tab-left{background:transparent url(img/window/tabs-sprite.gif) no-repeat 0 -51px;padding-left:10px;}.x-tab-strip-top .x-tab-right{background:transparent url(img/window/tabs-sprite.gif) no-repeat right -351px;padding-right:10px;}.x-tab-strip-top .x-tab-middle{background:transparent url(img/window/tabs-sprite.gif) repeat-x 0 -201px;height:25px;overflow:hidden;padding-top:5px;cursor:hand;}.x-tab-strip-top .x-tab-strip-active .x-tab-left{background:transparent url(img/window/tabs-sprite.gif) no-repeat 0 0px;padding-left:10px;}.x-tab-strip-top .x-tab-strip-active .x-tab-right{background:transparent url(img/window/tabs-sprite.gif) no-repeat right -301px;padding-right:10px;}.x-tab-strip-top .x-tab-strip-active .x-tab-middle{background:transparent url(img/window/tabs-sprite.gif) repeat-x 0 -151px;height:25px;overflow:hidden;padding-top:5px;font-weight:bold;cursor:hand;}.x-form-field{font-family:tahoma,arial,helvetica,sans-serif;font-size:12px;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;margin:0;background:#FFFFFF url(../images/default/form/text-bg.gif) repeat-x scroll 0 0;border:1px solid #B5B8C8;padding:1px 3px;width:200;overflow:hidden;}.btn{BORDER-RIGHT:#7b9ebd 1px solid;PADDING-RIGHT:2px;BORDER-TOP:#7b9ebd 1px solid;PADDING-LEFT:2px;FONT-SIZE:12px;FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);BORDER-LEFT:#7b9ebd 1px solid;CURSOR:hand;COLOR:black;PADDING-TOP:2px;BORDER-BOTTOM:#7b9ebd 1px solid} </style>
<script language="javascript">
function Group() {
this.id = null;
this.name = null;
this.count = 0;
this.nodes = [];
this.lines = [];
this.selectedObj = [];
this.selectedLineFrom = [];
this.selectedLineTo = [];
this.mouseX = -1;
this.mouseY = -1;
this.mouseEndX = -1;
this.mouseEndY = -1;
this.action = null;
this.lineFlag = null;
this.multiSelect = false;
this.ctrlKey = false;
this.nodeMirror = null;
this.lineMirror = null;
this.bottomHeight = 10;
this.rightWidth = 10;
this.init = function() {
var obj = document.getElementById('group');
obj.setAttribute('bindClass', this);
obj.onmousedown = GroupEvent.mouseDown;
obj.onmousemove = GroupEvent.mouseMove;
obj.onmouseup = GroupEvent.mouseUp;
obj.onkeydown = GroupEvent.keyDown;
obj.onkeyup = GroupEvent.keyUp;
this.lineMirror = new Line();
this.lineMirror.textFlag = false;
this.lineMirror.mirrorFlag = true;
this.lineMirror.init();
this.lineMirror.setDisplay('none');
this.lineMirror.strokeObj.dashStyle = 'dashdot';
this.lineMirror.obj.strokecolor = '#000000';
this.nodeMirror = new Node();
this.nodeMirror.strokeFlag = true;
this.nodeMirror.shadowFlag = false;
this.nodeMirror.textFlag = false;
this.nodeMirror.mirrorFlag = true;
this.nodeMirror.init();
this.nodeMirror.setDisplay('none');
this.nodeMirror.obj.strokecolor = 'black';
this.nodeMirror.obj.style.zIndex = '100';
this.nodeMirror.obj.filled = false;
this.nodeMirror.strokeObj.dashstyle = 'dot';
};
this.getObjectNum = function() {
this.count++;
return this.count;
};
this.point = function(flag) {
if (flag == 'down') {
this.mouseX = GroupEvent.getMouseX();
this.mouseY = GroupEvent.getMouseY();
} else if (flag == 'up') {
this.mouseEndX = GroupEvent.getMouseX();
this.mouseEndY = GroupEvent.getMouseY();
}
};
this.getEventNode = function(flag) {
var res = null;
var nodeNum = this.nodes.length;
var node = null;
var x;
var y;
if (flag == 'down') {
x = this.mouseX;
y = this.mouseY;
} else if (flag == 'up') {
x = this.mouseEndX;
y = this.mouseEndY;
}
for (var i = (nodeNum - 1); i >= 0; i--) {
node = this.nodes[i];
if (node.pointInObj(x, y)) {
res = node;
break;
}
}
return res;
};
this.getEventLine = function() {
var res = null;
var lineNum = this.lines.length;
var line = null;
var x = this.mouseX;
var y = this.mouseY;
var isStroke = -1;
for (var i = (lineNum - 1); i >= 0; i--) {
line = this.lines[i];
if (line.pointInObj(x, y)) {
if (res == null || line.obj.style.zIndex == '22') {
res = null;
res = GroupEvent.insertObjInArr(res, line);
isStroke = line.pointInStroke(x, y);
if (isStroke == 0) {
this.selectedLineTo = [];
this.selectedLineFrom = [];
this.selectedLineTo = GroupEvent.insertObjInArr(this.selectedLineTo, line);
} else if (isStroke == 1) {
this.selectedLineTo = [];
this.selectedLineFrom = [];
this.selectedLineFrom = GroupEvent.insertObjInArr(this.selectedLineFrom, line);
}
}
}
}
return res;
};
this.moveSelectedObj = function() {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
var num = this.selectedObj.length;
var lineNum = this.lines.length;
var line = null;
for (var i = 0; i < num; i++) {
this.selectedObj[i].move(x, y, this.mouseX, this.mouseY);
for (var j = 0; j < lineNum; j++) {
line = this.lines[j];
if ((line.fromObj == this.selectedObj[i]) || (line.toObj == this.selectedObj[i])) {
line.relink();
}
}
}
};
this.moveSelectedObjEnd = function() {
var num = this.selectedObj.length;
for (var i = 0; i < num; i++) {
this.selectedObj[i].moveEnd();
}
};
this.moveLine = function() {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
var num = this.selectedLineTo.length;
for (var i = 0; i < num; i++) {
this.selectedLineTo[i].setTo(x, y, null);
}
num = this.selectedLineFrom.length;
for (var i = 0; i < num; i++) {
this.selectedLineFrom[i].setFrom(x, y, null);
}
};
this.moveLineEnd = function(selNode) {
var num = this.selectedLineTo.length;
if (selNode != null) {
for (var i = 0; i < num; i++) {
if (this.fuckyou(this.selectedLineTo[i].fromObj, selNode)) {
this.selectedLineTo[i].setTo(this.mouseEndX, this.mouseEndY, selNode);
this.selectedLineTo[i].relink();
} else {
this.selectedLineTo[i].relink();
}
}
} else {
for (var i = 0; i < num; i++) {
this.selectedLineTo[i].relink();
}
}
this.selectedLineTo = [];
num = this.selectedLineFrom.length;
if (selNode != null) {
for (var i = 0; i < num; i++) {
if (this.fuckyou(selNode, this.selectedLineFrom[i].toObj)) {
this.selectedLineFrom[i].setFrom(this.mouseEndX, this.mouseEndY, selNode);
this.selectedLineFrom[i].relink();
} else {
this.selectedLineFrom[i].relink();
}
}
} else {
for (var i = 0; i < num; i++) {
this.selectedLineFrom[i].relink();
}
}
this.selectedLineFrom = [];
};
this.drawLineEnd = function(selNode) {
if (selNode != null) {
this.drawMirrorLineTo(selNode);
if (this.fuckyou(this.lineMirror.fromObj, this.lineMirror.toObj)) {
var line = new PolyLine();
line.init();
line.setShape(this.lineFlag);
line.link(this.lineMirror);
this.clearSelected();
}
}
this.lineMirror.setDisplay('none');
};
this.drawMirrorLineFrom = function(selObj) {
this.lineMirror.setFrom(this.mouseX, this.mouseY, selObj);
this.lineMirror.setTo(this.mouseX, this.mouseY, selObj);
this.lineMirror.setDisplay('');
};
this.drawMirrorLineTo = function(selObj) {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
this.lineMirror.setTo(x, y, selObj);
};
this.drawMirrorNodeStart = function() {
this.multiSelect = false;
this.nodeMirror.setLeft(GroupEvent.getX(this.mouseX));
this.nodeMirror.setTop(GroupEvent.getY(this.mouseY));
this.nodeMirror.setHeight(0);
this.nodeMirror.setWidth(0);
};
this.drawMirrorNode = function() {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
this.nodeMirror.setWidth(Math.abs(GroupEvent.getX(x) - GroupEvent.getX(this.mouseX)));
this.nodeMirror.setHeight(Math.abs(GroupEvent.getY(y) - GroupEvent.getY(this.mouseY)));
if (GroupEvent.getX(x) < GroupEvent.getX(this.mouseX)) {
this.nodeMirror.setLeft(GroupEvent.getX(x));
}
if (GroupEvent.getY(y) < GroupEvent.getY(this.mouseY)) {
this.nodeMirror.setTop(GroupEvent.getY(y));
}
this.nodeMirror.setDisplay('');
};
this.drawMirrorNodeEnd = function() {
this.nodeMirror.setDisplay('none');
if (this.embodyObj()) this.multiSelect = true;
};
this.embodyObj = function() {
var res = false;
var x1 = this.nodeMirror.left;
var x2 = this.nodeMirror.left + this.nodeMirror.width;
var y1 = this.nodeMirror.top;
var y2 = this.nodeMirror.top + this.nodeMirror.height;
var nodeNum = this.nodes.length;
var lineNum = this.lines.length;
var node = null;
var line = null;
for (var i = 0; i < nodeNum; i++) {
node = this.nodes[i];
if ((x1 <= node.left) && (x2 >= (node.left + node.width)) && (y1 <= node.top) && (y2 >= (node.top + node.height))) {
node.setSelected();
this.selectedObj = GroupEvent.insertObjInArr(this.selectedObj, node);
node.x = 0;
node.y = 0;
node.mouseX = node.left;
node.mouseY = node.top;
res = true;
}
}
for (var i = 0; i < lineNum; i++) {
line = this.lines[i];
if ((x1 <= Math.min(line.fromX, line.toX)) && (x2 >= Math.max(line.fromX, line.toX)) && (y1 <= Math.min(line.fromY, line.toY)) && (y2 >= Math.max(line.fromY, line.toY))) {
line.setSelected();
this.selectedObj = GroupEvent.insertObjInArr(this.selectedObj, line);
res = true;
}
}
return res;
};
this.fuckyou = function(fromObj, toObj) {
var res = true;
if (fromObj == toObj) {
res = false;
}
var len = this.lines.length;
var line = null;
for (var i = 0; i < len; i++) {
line = this.lines[i];
if ((line.fromObj == fromObj) && (line.toObj == toObj)) {
res = false;
alert("两点之间已经存在连接！");
break;
}
}
return res;
};
this.clearSelected = function() {
var num = this.selectedObj.length;
for (var i = 0; i < num; i++) {
this.selectedObj[i].clearSelected();
}
this.selectedObj = [];
};
this.selectAll = function() {
this.selectedObj = [];
var num = this.nodes.length;
var obj = null;
for (var i = 0; i < num; i++) {
obj = this.nodes[i];
obj.setSelected();
this.selectedObj = GroupEvent.insertObjInArr(this.selectedObj, obj);
obj.x = 0;
obj.y = 0;
obj.mouseX = obj.left;
obj.mouseY = obj.top;
}
num = this.lines.length;
obj = null;
for (var i = 0; i < num; i++) {
obj = this.lines[i];
obj.setSelected();
this.selectedObj = GroupEvent.insertObjInArr(this.selectedObj, obj);
}
};
this.removeSelected = function() {
var num = this.nodes.length;
var obj = null;
var arr = new Array();
var count = 0;
for (var i = 0; i < num; i++) {
obj = this.nodes[i];
if (obj.selected) {
obj.remove();
} else {
arr[count] = obj;
count++;
}
}
this.nodes = arr;
num = this.lines.length;
obj = null;
arr = new Array();
var count = 0;
for (var i = 0; i < num; i++) {
obj = this.lines[i];
if (obj.selected) {
obj.remove();
} else {
arr[count] = obj;
count++;
}
}
this.lines = arr;
this.selectedObj = [];
};
this.setGroupArea = function() {
var obj = document.getElementById('group');
var maxWidth = -1;
var maxHeight = -1;
var num = this.nodes.length;
var node = null;
for (var i = 0; i < num; i++) {
node = this.nodes[i];
if (maxWidth < (node.left + node.width)) {
maxWidth = node.left + node.width;
}
if (maxHeight < (node.top + node.height)) {
maxHeight = node.top + node.height;
}
}
if (maxHeight > document.body.clientHeight) {
obj.style.height = (maxHeight + this.bottomHeight) + 'px';
} else {
obj.style.height = '100%'
}
if (maxWidth > document.body.clientWidth) {
obj.style.width = (maxWidth + this.rightWidth) + 'px';
} else {
obj.style.width = '100%'
}
};
this.toJson = function() {
var jNodes = [];
var nodeNum = this.nodes.length;
for (var i = 0; i < nodeNum; i++) {
GroupEvent.insertObjInArr(jNodes, this.nodes[i].toJson());
}
var jLines = [];
var lineNum = this.lines.length;
for (var i = 0; i < lineNum; i++) {
GroupEvent.insertObjInArr(jLines, this.lines[i].toJson());
}
var json = {
id: this.id,
name: this.name,
count: this.count,
nodes: jNodes,
lines: jLines
};
return JSON.encode(json);
};
this.jsonTo = function(json) {
this.id = json.id;
this.name = json.name;
this.count = json.count;
var jNodes = json.nodes;
var nodeNum = jNodes.length;
var node = null;
for (var i = 0; i < nodeNum; i++) {
switch (jNodes[i].shape) {
case 'img':
{
node = new NodeImg();
break;
}
case 'oval':
{
node = new NodeOval();
break;
}
default:
node = new Node();
break;
}
node.jsonTo(jNodes[i]);
node.init();
}
var jLines = json.lines;
var lineNum = jLines.length;
var line = null;
for (var i = 0; i < lineNum; i++) {
switch (jLines[i].shape) {
default:
line = new PolyLine();
break;
}
line.jsonTo(jLines[i]);
line.init();
line.relink();
}
};
this.setProp = function(selObj, flag) {
var win = document.getElementById('propWin');
win.setAttribute('selected', selObj);
win.setAttribute('type', flag);
for (var i = 0; i < Prop.panels.length; i++) {
var panel = document.getElementById(Prop.panels[i].id);
if (flag == Prop.panels[i].flag) {
win.t.innerHTML = Prop.panels[i].title;
panel.style.display = '';
var tabs = panel.getAttribute('tabs');
if (tabs) tabs.setSelected();
if (selObj) selObj.setProperty(flag);
} else {
panel.style.display = 'none';
}
}
};
this.eventStart = function() {
if (this.ctrlKey) {
this.multiSelect = true;
}
var selNode = this.getEventNode('down');
var selLine = this.getEventLine();
if (!this.multiSelect) {
this.clearSelected();
}
if (selNode != null) {
this.setProp(selNode, 'n');
if (!GroupEvent.isInArr(this.selectedObj, selNode)) {
if (!this.ctrlKey) {
this.multiSelect = false;
this.clearSelected();
}
selNode.setSelected();
this.selectedObj = GroupEvent.insertObjInArr(this.selectedObj, selNode);
} else {
if (this.ctrlKey) {
selNode.clearSelected();
this.selectedObj = GroupEvent.removeObjInArr(this.selectedObj, selNode);
}
}
if (this.lineFlag == null) {
this.action = 'nodedown';
} else if (this.lineFlag != null) {
this.action = 'drawline';
this.drawMirrorLineFrom(selNode);
}
} else if (selLine != null) {
this.setProp(selLine[selLine.length - 1], 'l');
for (var i = 0; i < selLine.length; i++) {
if (!GroupEvent.isInArr(this.selectedObj, selLine[i])) {
if (!this.ctrlKey) {
this.multiSelect = false;
}
selLine[i].setSelected();
this.selectedObj = GroupEvent.insertObjInArr(this.selectedObj, selLine[i]);
} else {
if (this.ctrlKey) {
selLine[i].clearSelected();
this.selectedObj = GroupEvent.removeObjInArr(this.selectedObj, selLine[i]);
}
}
}
if (this.selectedLineTo.length > 0) {
this.action = 'moveline';
for (var i = 0; i < this.selectedLineTo.length; i++) {
this.selectedLineTo[i].setMoveSelected();
}
}
if (this.selectedLineFrom.length > 0) {
this.action = 'moveline';
for (var i = 0; i < this.selectedLineFrom.length; i++) {
this.selectedLineFrom[i].setMoveSelected();
}
}
} else {
this.setProp(null, 'help');
this.action = 'blankdown';
if (!this.ctrlKey) {
this.clearSelected();
this.drawMirrorNodeStart();
}
}
}
};
var GroupEvent = {
mouseDown: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
document.selection.empty();
Love.point('down');
Love.eventStart();
return false;
},
mouseMove: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
if (Love.action != null) {
switch (Love.action) {
case "nodedown":
Love.moveSelectedObj();
break;
case "drawline":
Love.drawMirrorLineTo(null);
break;
case "moveline":
Love.moveLine(null);
break;
case "blankdown":
Love.drawMirrorNode();
break;
default:
}
}
return false;
},
mouseUp: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
if (Love.action != null) {
Love.point('up');
var selNode = Love.getEventNode('up');
switch (Love.action) {
case "nodedown":
Love.moveSelectedObjEnd();
break;
case "drawline":
Love.drawLineEnd(selNode);
break;
case "moveline":
Love.moveLineEnd(selNode);
break;
case "blankdown":
Love.drawMirrorNodeEnd();
break;
default:
}
}
Love.setGroupArea();
Love.action = null;
return false;
},
keyDown: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
if (window.event.ctrlKey) Love.ctrlKey = true;
switch (window.event.keyCode) {
case 46:
Love.removeSelected();
break;
case 65:
if (window.event.ctrlKey) {
Love.selectAll();
Love.multiSelect = true;
window.event.returnValue = false;
}
break;
default:
}
},
keyUp: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
Love.ctrlKey = false;
},
getX: function(x) {
return (x + document.body.scrollLeft);
},
getY: function(y) {
return (y + document.body.scrollTop);
},
getMouseX: function() {
return window.event.clientX
},
getMouseY: function() {
return window.event.clientY
},
insertObjInArr: function(arr, s) {
if (arr == null) arr = [];
arr[arr.length] = s;
return arr;
},
removeObjInArr: function(arr, s) {
var tArr = null;
var count = 0;
if (arr != null) {
tArr = [];
var num = arr.length;
for (var i = 0; i < num; i++) {
if (arr[i] != s) {
tArr[count] = arr[i];
count++;
}
}
}
return tArr;
},
isInArr: function(arr, s) {
var res = false;
if (arr != null) {
var num = arr.length;
for (var i = 0; i < num; i++) {
if (arr[i] == s) {
res = true;
break;
}
}
}
return res;
}
} function Line() {
this.id = 'line_';
this.name = 'New Line';
this.number = -1;
this.type = 'line';
this.shape = 'line';
this.selected = false;
this.fromX = -1;
this.fromY = -1;
this.toX = -1;
this.toY = -1;
this.textFlag = false;
this.mirrorFlag = false;
this.obj = null;
this.strokeObj = null;
this.textObj = null;
this.fromObj = null;
this.toObj = null;
this.init = function() {
var groupObj = document.getElementById('group');
var obj = document.createElement('v:line');
groupObj.appendChild(obj);
obj.title = this.name;
obj.from = '0,0';
obj.to = '0,0';
obj.strokecolor = 'blue';
obj.strokeweight = '3';
obj.filled = 'false';
obj.style.position = 'absolute';
obj.style.zIndex = '2';
obj.style.cursor = 'hand';
this.obj = obj;
var strokeObj = document.createElement('v:stroke');
obj.appendChild(strokeObj);
strokeObj.endArrow = "Classic";
this.strokeObj = strokeObj;
if (this.textFlag) {
var textObj = document.createElement('v:textbox');
textObj.inset = '10pt,1pt,5pt,5pt';
textObj.style.textAlign = 'center';
textObj.style.verticalAlign = 'bottom';
textObj.style.color = 'blue';
textObj.style.fontSize = '9pt';
textObj.innerHTML = this.name;
obj.appendChild(textObj);
this.textObj = textObj;
}
if (!this.mirrorFlag) {
var Love = groupObj.getAttribute('bindClass');
this.number = Love.getObjectNum();
this.id = this.id + this.number;
obj.id = this.id;
Love.lines[Love.lines.length] = this;
}
};
this.setFrom = function(x, y, obj) {
this.fromX = GroupEvent.getX(x);
this.fromY = GroupEvent.getY(y);
if (obj) this.fromObj = obj;
this.obj.from = this.fromX + ',' + this.fromY;
};
this.setTo = function(x, y, obj) {
this.toX = GroupEvent.getX(x);
this.toY = GroupEvent.getY(y);
if (obj) this.toObj = obj;
this.obj.to = this.toX + ',' + this.toY;
};
this.setDisplay = function(flag) {
this.obj.style.display = flag;
};
this.link = function(lineMirror) {
this.fromObj = lineMirror.fromObj;
this.toObj = lineMirror.toObj;
this.relink();
this.fromObj.clearSelected();
};
this.relink = function() {
var fromDots = this.fromObj.getDots();
var toDots = this.toObj.getDots();
var fromDotNum = fromDots.length;
var toDotNum = toDots.length;
var lineLen = -1;
var fromDot;
var toDot;
for (var i = 0; i < fromDotNum; i++) {
for (var j = 0; j < toDotNum; j++) {
if (lineLen < 0) {
lineLen = this.getLineLength(fromDots[i].x, fromDots[i].y, toDots[j].x, toDots[j].y);
fromDot = fromDots[i];
toDot = toDots[j];
} else if (lineLen > this.getLineLength(fromDots[i].x, fromDots[i].y, toDots[j].x, toDots[j].y)) {
lineLen = this.getLineLength(fromDots[i].x, fromDots[i].y, toDots[j].x, toDots[j].y);
fromDot = fromDots[i];
toDot = toDots[j];
}
}
}
this.fromX = fromDot.x;
this.fromY = fromDot.y;
this.toX = toDot.x;
this.toY = toDot.y;
this.obj.from = this.fromX + ',' + this.fromY;
this.obj.to = this.toX + ',' + this.toY;
};
this.getLineLength = function(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
};
this.pointInObj = function(x, y) {
var res = false;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.fromX;
var x2 = this.toX;
var y1 = this.fromY;
var y2 = this.toY;
var x21 = x2 - x1;
var y21 = y2 - y1;
if (x21 == 0) {
res = (Math.abs(x - x1) < 5) && (Math.min(y1, y2) <= y) && (Math.max(y1, y2) >= y);
} else if (y21 == 0) {
res = (Math.abs(y - y1) < 5) && (Math.min(x1, x2) <= x) && (Math.max(x1, x2) >= x);
} else {
res = (Math.min(y1, y2) <= y) && (Math.max(y1, y2) >= y) && (Math.min(x1, x2) <= x) && (Math.max(x1, x2) >= x) && ((Math.abs(Math.floor((x21 / y21) * (y - y1) + x1 - x)) < 5) || (Math.abs(Math.floor((y21 / x21) * (x - x1) + y1 - y)) < 5));
}
return res;
};
this.pointInStroke = function(x, y) {
var res = -1;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.fromX;
var x2 = this.toX;
var y1 = this.fromY;
var y2 = this.toY;
if ((Math.abs(x2 - x) < 6) && (Math.abs(y2 - y) < 6)) res = 0;
if ((Math.abs(x1 - x) < 6) && (Math.abs(y1 - y) < 6)) res = 1;
return res;
};
this.setSelected = function() {
this.obj.strokecolor = 'green';
if (this.textObj) this.textObj.style.color = 'green';
this.selected = true;
this.obj.style.zIndex = '22';
};
this.move = function() {};
this.moveEnd = function() {};
this.setMoveSelected = function() {
this.obj.strokecolor = 'red';
if (this.textObj) this.textObj.style.color = 'green';
this.selected = true;
this.obj.style.zIndex = '22';
};
this.clearSelected = function() {
this.obj.strokecolor = 'blue';
if (this.textObj) this.textObj.style.color = 'blue';
this.selected = false;
this.obj.style.zIndex = '2';
};
this.remove = function() {
var group = document.getElementById('group');
group.removeChild(this.obj);
}
} function Menu() {
this.id = 'menu';
this.left = 10;
this.top = 3;
this.height = 30;
this.width = 300;
this.selected = false;
this.obj = null;
this.menuObj = null;
this.x = -1;
this.y = -1;
this.img = new Array('folder.gif', 'save.gif', 'start.gif', 'end.gif', 'node.gif', 'member.gif', 'forward.gif', 'drop-yes.gif', 'delete.gif', 'grid.gif');
this.text = new Array('打开', '保存', '开始环节', '结束环节', '环节（长方形）', '环节（图片）', '路径（直线）', '路径（折线）', '删除', '网格');
this.action = new Array('MenuAction.open()', 'MenuAction.save()', 'MenuAction.start()', 'MenuAction.end()', 'MenuAction.nodeRect()', 'MenuAction.nodeImg()', 'if(MenuAction.line()) MenuAction.changeStyle(this)', 'if(MenuAction.polyline()) MenuAction.changeStyle(this)', 'MenuAction.remove()', 'MenuAction.grid()');
this.init = function() {
var toolObj = document.getElementById('tool');
var obj = document.createElement('div');
toolObj.appendChild(obj);
toolObj.appendChild(this.createMenu());
obj.id = 'movebar';
obj.setAttribute('bindClass', this);
this.obj = obj;
obj.onmousedown = MenuEvent.mouseDown;
obj.onmousemove = MenuEvent.mouseMove;
obj.onmouseup = MenuEvent.mouseUp;
obj.style.position = 'absolute';
obj.style.left = this.left;
obj.style.top = this.top;
var td = document.createElement('div');
td.innerHTML = ' ';
obj.appendChild(td);
};
this.createMenu = function() {
var obj = document.createElement('div');
this.menuObj = obj;
obj.id = this.id;
obj.style.position = 'absolute';
obj.style.height = this.height;
obj.style.left = this.left + 8;
obj.style.top = this.top;
var tobj = document.createElement('table');
obj.appendChild(tobj);
var tb = document.createElement('tbody');
tobj.appendChild(tb);
var tr = document.createElement('tr');
tb.appendChild(tr);
var td = null;
for (var i = 0; i < this.img.length; i++) {
td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = '<img src="img/' + this.img[i] + '"><span onmousemove="MenuAction.over(this)" onmouseout="MenuAction.out(this)" onclick="' + this.action[i] + '">' + this.text[i] + '</span><img src="img/grid-blue-split.gif">';
}
return obj;
};
this.down = function() {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
this.x = x - this.obj.offsetLeft;
this.y = y - this.obj.offsetTop;
this.selected = true;
};
this.move = function() {
if (this.selected) {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
this.left = GroupEvent.getX(x) - this.x;
this.top = GroupEvent.getY(y) - this.y;
this.obj.style.left = this.left + 'px';
this.obj.style.top = this.top + 'px';
this.menuObj.style.left = (this.left + 8) + 'px';
this.menuObj.style.top = this.top + 'px';
}
};
this.up = function() {
this.selected = false;
if (this.left < 10) {
this.left = 10;
this.obj.style.left = this.left + 'px';
this.menuObj.style.left = (this.left + 8) + 'px';
}
if (this.top < 3) {
this.top = 3;
this.obj.style.top = this.top + 'px';
this.menuObj.style.top = this.top + 'px';
}
}
};
var MenuEvent = {
mouseDown: function() {
var menu = document.getElementById('movebar');
var menuClass = menu.getAttribute('bindClass');
menu.setCapture();
menuClass.down();
},
mouseMove: function() {
var menu = document.getElementById('movebar');
var menuClass = menu.getAttribute('bindClass');
menuClass.move();
return false;
},
mouseUp: function() {
var menu = document.getElementById('movebar');
var menuClass = menu.getAttribute('bindClass');
menuClass.up();
menu.releaseCapture();
document.getElementById('group').focus();
}
};
var MenuAction = {
open: function() {
alert("打开");
},
save: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
clipboardData.setData("Text", Love.toJson()); document.getElementById("a").innerHTML=Love.toJson(); },
start: function() {
var n = new NodeOval();
n.init();
},
end: function() {
var n = new NodeOval();
n.setType('end');
n.init();
},
nodeRect: function() {
var n = new Node();
n.init();
},
nodeImg: function() {
var n = new NodeImg();
n.init();
},
line: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
if (Love.lineFlag == null) {
Love.lineFlag = 'line';
} else if (Love.lineFlag == 'line') {
Love.lineFlag = null;
} else {
return false;
}
return true;
},
polyline: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
if (Love.lineFlag == null) {
Love.lineFlag = 'polyline';
} else if (Love.lineFlag == 'polyline') {
Love.lineFlag = null;
} else {
return false;
}
return true;
},
remove: function() {
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
Love.removeSelected();
},
grid: function() {
var obj = document.body.style.backgroundImage;
if (obj == '') document.body.style.backgroundImage = 'url(img/bg.jpg)';
else document.body.style.backgroundImage = '';
},
changeStyle: function(obj) {
if (obj.style.color == '') obj.style.color = '#ffffff';
else obj.style.color = '';
},
over: function(obj) {
obj.style.backgroundColor = '#A8D0F9';
},
out: function(obj) {
obj.style.backgroundColor = '';
}
} function Node() {
this.id = 'node_';
this.name = 'New Node';
this.number = -1;
this.type = 'node';
this.shape = 'rect';
this.property = null;
this.selected = false;
this.left = 100;
this.top = 80;
this.width = 100;
this.height = 40;
this.mouseX = -1;
this.mouseY = -1;
this.x = -1;
this.y = -1;
this.strokeFlag = false;
this.shadowFlag = true;
this.textFlag = true;
this.mirrorFlag = false;
this.obj = null;
this.shadowObj = null;
this.textObj = null;
this.strokeObj = null;
this.init = function() {
var groupObj = document.getElementById('group');
var obj = document.createElement('v:roundrect');
groupObj.appendChild(obj);
obj.title = this.name;
obj.style.position = 'absolute';
obj.style.left = this.left;
obj.style.top = this.top;
obj.style.width = this.width;
obj.style.height = this.height;
obj.style.cursor = 'hand';
obj.style.zIndex = '1';
obj.strokecolor = 'blue';
obj.background='red';
obj.strokeweight = '1';
this.obj = obj;
if (this.shadowFlag) {
var shadowObj = document.createElement('v:shadow');
shadowObj.on = 'T';
shadowObj.type = 'single';
shadowObj.color = '#b3b3b3';
shadowObj.offset = '5px,5px';
obj.appendChild(shadowObj);
this.shadowObj = shadowObj;
}
if (this.strokeFlag) {
var strokeObj = document.createElement('v:stroke');
obj.appendChild(strokeObj);
this.strokeObj = strokeObj;
}
if (this.textFlag) {
var textObj = document.createElement('v:textbox');
textObj.inset = '2pt,5pt,2pt,5pt';
textObj.style.textAlign = 'center';
textObj.style.color = 'blue';
textObj.style.fontSize = '9pt';
textObj.innerHTML = this.name;
obj.appendChild(textObj);
this.textObj = textObj;
}
if (!this.mirrorFlag) {
var Love = groupObj.getAttribute('bindClass');
if (this.number < 0) {
this.number = Love.getObjectNum();
this.id = this.id + this.number;
obj.id = this.id;
this.name = this.id;
this.obj.title = this.id;
this.textObj.innerHTML = this.id;
}
Love.nodes[Love.nodes.length] = this;
}
};
this.setDisplay = function(flag) {
this.obj.style.display = flag;
};
this.pointInObj = function(x, y) {
var res = false;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.left;
var x2 = x1 + this.width;
var y1 = this.top;
var y2 = y1 + this.height;
if ((x >= x1) && (x <= x2) && (y >= y1) && (y <= y2)) {
this.mouseX = x;
this.mouseY = y;
this.x = x - this.obj.offsetLeft;
this.y = y - this.obj.offsetTop;
res = true;
}
return res;
};
this.move = function(x, y, mouseX, mouseY) {
this.left = GroupEvent.getX(x) - this.x - GroupEvent.getX(mouseX) + this.mouseX;
this.top = GroupEvent.getY(y) - this.y - GroupEvent.getY(mouseY) + this.mouseY;
this.obj.style.left = this.left + 'px';
this.obj.style.top = this.top + 'px';
};
this.moveEnd = function() {
this.x = 0;
this.y = 0;
this.mouseX = this.left;
this.mouseY = this.top
};
this.setSelected = function() {
this.shadowObj.color = 'green';
this.obj.strokecolor = 'green';
this.textObj.style.color = 'green';
this.selected = true;
};
this.clearSelected = function() {
this.shadowObj.color = '#b3b3b3';
this.obj.strokecolor = 'blue';
this.textObj.style.color = 'blue';
this.selected = false;
};
this.remove = function() {
var group = document.getElementById('group');
group.removeChild(this.obj);
};
this.setLeft = function(n) {
this.left = n;
this.obj.style.left = n;
};
this.setTop = function(n) {
this.top = n;
this.obj.style.top = n;
};
this.setWidth = function(n) {
this.width = n;
this.obj.style.width = n;
};
this.setHeight = function(n) {
this.height = n;
this.obj.style.height = n;
};
this.getDots = function() {
var l = this.left;
var t = this.top;
var w = this.width;
var h = this.height;
var dots = new Array();
var dot;
dots[dots.length] = {
x: l,
y: t + h / 2
};
dots[dots.length] = {
x: l + w,
y: t + h / 2
};
dots[dots.length] = {
x: l + w / 2,
y: t
};
dots[dots.length] = {
x: l + w / 2,
y: t + h
};
dots[dots.length] = {
x: l,
y: t
};
dots[dots.length] = {
x: l + w,
y: t
};
dots[dots.length] = {
x: l,
y: t + h
};
dots[dots.length] = {
x: l + w,
y: t + h
};
return dots;
};
this.setProperty = function(type) {
Prop.clear();
document.getElementById(type + '_p_id').innerHTML = this.id;
document.getElementById(type + '_p_name').value = this.name;
if (this.property) {
var num = this.property.length;
for (var i = 0; i < num; i++) {
switch (this.property[i].text) {
case 'span':
document.getElementById(this.property[i].id).innerHTML = this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value = this.property[i].value;
break;
}
}
}
};
this.getProperty = function(property) {
this.property = property;
this.name = property.n_p_name;
this.title = this.name;
};
this.toJson = function() {
var json = {
id: this.id,
name: this.name,
type: this.type,
shape: this.shape,
number: this.number,
left: this.left,
top: this.top,
width: this.width,
height: this.height,
property: this.property
};
return json;
};
this.jsonTo = function(json) {
this.id = json.id;
this.name = json.name;
this.type = json.type;
this.shape = json.shape;
this.number = json.number;
this.left = json.left;
this.top = json.top;
this.width = json.width;
this.height = json.height;
this.property = json.property;
}
}
function test() {
alert('测试');
};
function clickCheckBox() {};
var Prop = {
nodes: [[{
subject: '环节ID',
id: 'n_p_id',
text: 'span'
},
{
subject: '环节名称',
id: 'n_p_name',
text: 'input'
},
{
subject: '环节描述',
id: 'n_p_desc',
text: 'textarea'
}], [{
subject: '群组',
id: 'n_p_group',
text: 'input',
btn: {
click: test,
hide: true
}
},
{
subject: '处理人',
id: 'n_p_role',
text: 'input',
btn: {
click: test,
hide: true
}
},
{
subject: '1',
id: 'n_p_node',
text: 'input'
},
{
subject: '2',
id: 'n_p_dgroup',
text: 'input',
btn: {
click: test,
hide: true
}
},
{
subject: '3',
id: 'n_p_dnode',
text: 'input',
btn: {
click: test,
hide: true
}
},
{
subject: '4',
id: 'n_p_dcur',
text: 'select',
options: [{
id: '0',
text: '否'
},
{
id: '1',
text: '是'
}]
},
{
subject: '5',
id: 'n_p_num',
text: 'input'
},
{
subject: '6',
id: 'n_p_other',
text: 'input'
}], [{
subject: '1',
id: 'n_p_in',
text: 'input'
},
{
subject: '2',
id: 'n_p_out',
text: 'input'
}], [{
subject: '环节办理时限',
id: 'n_p_time',
text: 'input'
},
{
subject: '通知方式',
id: 'n_p_timetype',
text: 'input'
},
{
subject: '1',
id: 'n_p_timeedit',
text: 'input'
},
{
subject: '2',
id: 'n_p_timesend',
text: 'input'
}], [{
subject: '启动前调用',
id: 'n_p_call1',
text: 'input'
},
{
subject: '启动后调用',
id: 'n_p_call2',
text: 'input'
},
{
subject: '进行中调用',
id: 'n_p_call3',
text: 'input'
},
{
subject: '完成前调用',
id: 'n_p_call4',
text: 'input'
},
{
subject: '完成后调用',
id: 'n_p_call5',
text: 'input'
}]],
lines: [[{
subject: 'ID',
id: 'l_p_id',
text: 'span'
},
{
subject: '名称',
id: 'l_p_name',
text: 'input'
},
{
subject: '描述',
id: 'l_p_desc',
text: 'textarea'
},
{
subject: '上一环节',
id: 'l_p_pre',
text: 'span'
},
{
subject: '下一环节',
id: 'l_p_next',
text: 'span'
},
{
subject: '1',
id: 'l_p_type',
text: 'input'
},
{
subject: '2',
id: 'l_p_mp',
text: 'input'
},
{
subject: '3',
id: 'l_p_mpsel',
text: 'input'
},
{
subject: '4',
id: 'l_p_mptype',
text: 'input'
},
{
subject: '5',
id: 'l_p_mplx',
text: 'input'
}], [{
subject: '可使用群组',
id: 'l_p_group',
text: 'input'
},
{
subject: '可使用角色',
id: 'l_p_role',
text: 'input'
},
{
subject: '不可使用群组',
id: 'l_p_dgroup',
text: 'input'
},
{
subject: '可使用角色',
id: 'l_p_drole',
text: 'input'
}]],
panels: [{
flag: 'help',
id: 'help',
type: 0,
title: '帮助',
body: '1.环节可用鼠标拖拽<br> 鼠标选中环节后不释放，拖拽鼠标，环节将随鼠标移动，释放鼠标后，环节不再移动。<br>' + '2.路径的两个端点可以通过鼠标拖拽，改变路径指向的环节<br> 鼠标选中路径的端点后不释放，拖拽鼠标，路径被选中的端点将鼠标移动，在选中的环节释放鼠标后，路径被选中的端点将指向该选中的环节。<br>' + '3.ctrl+a，全选。<br>4.按住ctrl，鼠标选中对象，可以多选。<br>5.delete，删除选中对象。<br>6.使用鼠标多选<br> 鼠标点击空白处不释放，拖拽鼠标，会出现一个长方形虚框，虚框的范围随着鼠标移动而变化，虚框范围内的对象将被选中。' + '<br>'
},
{
flag: 'n',
id: 'n_prop_panel',
type: 1,
title: '环节',
tabs: [{
id: '常规',
val: 0,
type: 'nodes'
},
{
id: '候选人',
val: 1,
type: 'nodes'
},
{
id: '控制',
val: 2,
type: 'nodes'
},
{
id: '时限',
val: 3,
type: 'nodes'
},
{
id: '调用',
val: 4,
type: 'nodes'
}]
},
{
flag: 'l',
id: 'l_prop_panel',
type: 1,
title: '路径',
tabs: [{
id: '基本',
val: 0,
type: 'lines'
},
{
id: '人员',
val: 1,
type: 'lines'
}]
}],
clear: function() {
for (var i = 0; i < this.nodes.length; i++) {
var obj = this.nodes[i];
for (var j = 0; j < obj.length; j++) {
switch (obj[j].text) {
case 'span':
document.getElementById(obj[j].id).innerHTML = '';
break;
default:
document.getElementById(obj[j].id).value = '';
break;
}
}
}
for (var i = 0; i < this.lines.length; i++) {
var obj = this.lines[i];
for (var j = 0; j < obj.length; j++) {
switch (obj[j].text) {
case 'span':
document.getElementById(obj[j].id).innerHTML = '';
break;
default:
document.getElementById(obj[j].id).value = '';
break;
}
}
}
},
setProperty: function(type) {
var objs = null;
if (type == 'n') objs = this.nodes;
else objs = this.lines;
var arr = [];
for (var i = 0; i < objs.length; i++) {
var obj = objs[i];
for (var j = 0; j < obj.length; j++) {
var v = null;
switch (obj[j].text) {
case 'span':
v = document.getElementById(obj[j].id).innerHTML;
break;
default:
v = document.getElementById(obj[j].id).value;
break;
}
var json = {
id: obj[j].id,
text: obj[j].text,
value: v
};
arr[arr.length] = json;
}
}
return arr;
}
} function NodeImg() {
this.id = 'node_';
this.name = 'New Node';
this.number = -1;
this.type = 'node';
this.shape = 'img';
this.property = null;
this.selected = false;
this.left = 100;
this.top = 80;
this.width = 75;
this.height = 70;
this.imgHeight = 35;
this.imgWidth = 35;
this.textHeight = 35;
this.textWidth = 75;
this.imgDLeft = 20;
this.textDTop = 40;
this.mouseX = -1;
this.mouseY = -1;
this.x = -1;
this.y = -1;
this.strokeFlag = false;
this.shadowFlag = true;
this.textFlag = true;
this.mirrorFlag = false;
this.obj = null;
this.shadowObj = null;
this.textObj = null;
this.strokeObj = null;
this.init = function() {
var groupObj = document.getElementById('group');
var obj = document.createElement('img');
obj.src = 'img/img_1.gif';
groupObj.appendChild(obj);
obj.title = this.name;
obj.style.position = 'absolute';
obj.style.left = this.left + this.imgDLeft;
obj.style.top = this.top;
obj.style.width = this.imgWidth;
obj.style.height = this.imgHeight;
obj.style.cursor = 'hand';
obj.style.zIndex = '1';
this.obj = obj;
if (this.textFlag) {
var textObj = document.createElement('div');
textObj.style.backgroundColor = '#CEDEF0';
textObj.style.position = 'absolute';
textObj.style.left = this.left;
textObj.style.top = this.top + this.textDTop;
textObj.style.width = this.textWidth;
textObj.style.height = this.textHeight;
textObj.style.textAlign = 'center';
textObj.style.fontSize = '9pt';
textObj.style.wordBreak = 'break-all';
textObj.style.overflow = 'hidden';
textObj.style.zIndex = '0';
textObj.innerHTML = this.name;
textObj.style.zIndex = '1';
groupObj.appendChild(textObj);
this.textObj = textObj;
}
if (!this.mirrorFlag) {
var Love = groupObj.getAttribute('bindClass');
if (this.number < 0) {
this.number = Love.getObjectNum();
this.id = this.id + this.number;
obj.id = this.id;
this.name = this.id;
this.obj.title = this.id;
if (this.textObj) this.textObj.innerHTML = this.id;
}
Love.nodes[Love.nodes.length] = this;
}
};
this.setDisplay = function(flag) {
this.obj.style.display = flag;
this.textObj.style.display = flag;
};
this.pointInObj = function(x, y) {
var res = false;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.left + this.imgDLeft;
var x2 = x1 + this.imgWidth;
var y1 = this.top;
var y2 = y1 + this.imgHeight;
if ((x >= x1) && (x <= x2) && (y >= y1) && (y <= y2)) {
this.mouseX = x;
this.mouseY = y;
this.x = x - this.obj.offsetLeft + this.imgDLeft;
this.y = y - this.obj.offsetTop;
res = true;
}
return res;
};
this.move = function(x, y, mouseX, mouseY) {
this.left = GroupEvent.getX(x) - this.x - GroupEvent.getX(mouseX) + this.mouseX;
this.top = GroupEvent.getY(y) - this.y - GroupEvent.getY(mouseY) + this.mouseY;
this.obj.style.left = this.left + this.imgDLeft;
this.obj.style.top = this.top;
this.textObj.style.left = this.left;
this.textObj.style.top = this.top + this.textDTop;
};
this.moveEnd = function() {
this.x = 0;
this.y = 0;
this.mouseX = this.left;
this.mouseY = this.top
};
this.setSelected = function() {
this.textObj.style.backgroundColor = 'green';
this.textObj.style.color = '#ffffff';
this.selected = true;
};
this.clearSelected = function() {
this.textObj.style.backgroundColor = '#CEDEF0';
this.textObj.style.color = '';
this.selected = false;
};
this.remove = function() {
var group = document.getElementById('group');
group.removeChild(this.obj);
group.removeChild(this.textObj);
};
this.setLeft = function(n) {
this.left = n;
this.obj.style.left = this.left + this.imgDLeft;
this.textObj.style.left = this.left;
};
this.setTop = function(n) {
this.top = n;
this.obj.style.top = this.top;
this.textObj.style.top = this.top + this.textDTop;
};
this.setWidth = function(n) {
this.width = n;
this.obj.style.width = n;
};
this.setHeight = function(n) {
this.height = n;
this.obj.style.height = n;
};
this.getDots = function() {
var l = this.left;
var t = this.top;
var w = this.width;
var h = this.height;
var dots = new Array();
var dot;
dots[dots.length] = {
x: l + this.imgDLeft,
y: t + this.imgHeight / 2
};
dots[dots.length] = {
x: l + this.imgDLeft + this.imgWidth,
y: t + this.imgHeight / 2
};
dots[dots.length] = {
x: l + w / 2,
y: t
};
dots[dots.length] = {
x: l + w / 2,
y: t + h
};
return dots;
};
this.setProperty = function(type) {
Prop.clear();
document.getElementById(type + '_p_id').innerHTML = this.id;
document.getElementById(type + '_p_name').value = this.name;
if (this.property) {
var num = this.property.length;
for (var i = 0; i < num; i++) {
switch (this.property[i].text) {
case 'span':
document.getElementById(this.property[i].id).innerHTML = this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value = this.property[i].value;
break;
}
}
}
};
this.getProperty = function(property) {
this.property = property;
this.name = property.n_p_name;
this.title = this.name;
};
this.toJson = function() {
var json = {
id: this.id,
name: this.name,
type: this.type,
shape: this.shape,
number: this.number,
left: this.left,
top: this.top,
width: this.width,
height: this.height,
property: this.property
};
return json;
};
this.jsonTo = function(json) {
this.id = json.id;
this.name = json.name;
this.type = json.type;
this.shape = json.shape;
this.number = json.number;
this.left = json.left;
this.top = json.top;
this.width = json.width;
this.height = json.height;
this.property = json.property;
}
} JSON = new
function() {
this.decode = function() {
var filter, result, self, tmp;
if ($$("toString")) {
switch (arguments.length) {
case 2:
self = arguments[0];
filter = arguments[1];
break;
case 1:
if ($[typeof arguments[0]](arguments[0]) === Function) {
self = this;
filter = arguments[0];
} else self = arguments[0];
break;
default:
self = this;
break;
};
if (rc.test(self)) {
try {
result = e("(".concat(self, ")"));
if (filter && result !== null && (tmp = $[typeof result](result)) && (tmp === Array || tmp === Object)) {
for (self in result) result[self] = v(self, result) ? filter(self, result[self]) : result[self];
}
} catch(z) {}
} else {
throw new JSONError("bad data");
}
};
return result;
};
this.encode = function() {
var self = arguments.length ? arguments[0] : this,
result,
tmp;
if (self === null) result = "null";
else if (self !== undefined && (tmp = $[typeof self](self))) {
switch (tmp) {
case Array:
result = [];
for (var i = 0,
j = 0,
k = self.length; j < k; j++) {
if (self[j] !== undefined && (tmp = JSON.encode(self[j]))) result[i++] = tmp;
};
result = "[".concat(result.join(","), "]");
break;
case Boolean:
result = String(self);
break;
case Date:
result = '"'.concat(self.getFullYear(), '-', d(self.getMonth() + 1), '-', d(self.getDate()), 'T', d(self.getHours()), ':', d(self.getMinutes()), ':', d(self.getSeconds()), '"');
break;
case Function:
break;
case Number:
result = isFinite(self) ? String(self) : "null";
break;
case String:
result = '"'.concat(self.replace(rs, s).replace(ru, u), '"');
break;
default:
var i = 0,
key;
result = [];
for (key in self) {
if (self[key] !== undefined && (tmp = JSON.encode(self[key]))) result[i++] = '"'.concat(key.replace(rs, s).replace(ru, u), '":', tmp);
};
result = "{".concat(result.join(","), "}");
break;
}
};
return result;
};
this.toDate = function() {
var self = arguments.length ? arguments[0] : this,
result;
if (rd.test(self)) {
result = new Date;
result.setHours(i(self, 11, 2));
result.setMinutes(i(self, 14, 2));
result.setSeconds(i(self, 17, 2));
result.setMonth(i(self, 5, 2) - 1);
result.setDate(i(self, 8, 2));
result.setFullYear(i(self, 0, 4));
} else if (rt.test(self)) result = new Date(self * 1000);
return result;
};
var c = {
"\b": "b",
"\t": "t",
"\n": "n",
"\f": "f",
"\r": "r",
'"': '"',
"\\": "\\",
"/": "/"
},
d = function(n) {
return n < 10 ? "0".concat(n) : n
},
e = function(c, f, e) {
e = eval;
delete eval;
if (typeof eval === "undefined") eval = e;
f = eval("" + c);
eval = e;
return f
},
i = function(e, p, l) {
return 1 * e.substr(p, l)
},
p = ["", "000", "00", "0", ""],
rc = null,
rd = /^[0-9]{4}\-[0-9]{2}\-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}$/,
rs = /(\x5c|\x2F|\x22|[\x0c-\x0d]|[\x08-\x0a])/g,
rt = /^([0-9]+|[0-9]+[,\.][0-9]{1,3})$/,
ru = /([\x00-\x07]|\x0b|[\x0e-\x1f])/g,
s = function(i, d) {
return "\\".concat(c[d])
},
u = function(i, d) {
var n = d.charCodeAt(0).toString(16);
return "\\u".concat(p[n.length], n)
},
v = function(k, v) {
return $[typeof result](result) !== Function && (v.hasOwnProperty ? v.hasOwnProperty(k) : v.constructor.prototype[k] !== v[k])
},
$ = {
"boolean": function() {
return Boolean
},
"function": function() {
return Function
},
"number": function() {
return Number
},
"object": function(o) {
return o instanceof o.constructor ? o.constructor: null
},
"string": function() {
return String
},
"undefined": function() {
return null
}
},
$$ = function(m) {
function $(c, t) {
t = c[m];
delete c[m];
try {
e(c)
} catch(z) {
c[m] = t;
return 1
}
};
return $(Array) && $(Object)
};
try {
rc = new RegExp('^("(\\\\.|[^"\\\\\\n\\r])*?"|[,:{}\\[\\]0-9.\\-+Eaeflnr-u \\n\\r\\t])+?$')
} catch(z) {
rc = /^(true|false|null|\[.*\]|\{.*\}|".*"|\d+|\d+\.\d+)$/
}
}; function NodeOval() {
this.id = 'node_';
this.name = 'New Node';
this.number = -1;
this.type = 'start';
this.shape = 'oval';
this.property = null;
this.selected = false;
this.left = 100;
this.top = 80;
this.width = 20;
this.height = 20;
this.mouseX = -1;
this.mouseY = -1;
this.x = -1;
this.y = -1;
this.strokeFlag = false;
this.shadowFlag = true;
this.textFlag = false;
this.mirrorFlag = false;
this.obj = null;
this.shadowObj = null;
this.textObj = null;
this.strokeObj = null;
this.init = function() {
var groupObj = document.getElementById('group');
var obj = document.createElement('v:oval');
groupObj.appendChild(obj);
obj.title = this.name;
obj.style.position = 'absolute';
obj.style.left = this.left;
obj.style.top = this.top;
obj.style.width = this.width;
obj.style.height = this.height;
obj.style.cursor = 'hand';
obj.style.zIndex = '1';
if (this.type == 'start') {
obj.fillcolor = '#33CC00';
obj.strokecolor = '#33CC00';
} else {
obj.fillcolor = 'red';
obj.strokecolor = 'red';
}
obj.strokeweight = '3';
this.obj = obj;
if (this.shadowFlag) {
var shadowObj = document.createElement('v:shadow');
shadowObj.on = false;
shadowObj.type = 'single';
shadowObj.color = '#b3b3b3';
shadowObj.offset = '3px,3px';
obj.appendChild(shadowObj);
this.shadowObj = shadowObj;
}
if (this.strokeFlag) {
var strokeObj = document.createElement('v:stroke');
obj.appendChild(strokeObj);
this.strokeObj = strokeObj;
}
if (this.textFlag) {
var textObj = document.createElement('v:textbox');
textObj.inset = '2pt,5pt,2pt,5pt';
textObj.style.textAlign = 'center';
textObj.style.color = 'blue';
textObj.style.fontSize = '9pt';
textObj.innerHTML = this.name;
obj.appendChild(textObj);
this.textObj = textObj;
}
if (!this.mirrorFlag) {
var Love = groupObj.getAttribute('bindClass');
if (this.number < 0) {
this.number = Love.getObjectNum();
this.id = this.id + this.number;
obj.id = this.id;
this.name = this.id;
this.obj.title = this.id;
if (this.textObj) this.textObj.innerHTML = this.id;
}
Love.nodes[Love.nodes.length] = this;
}
};
this.setType = function(type) {
if (type) this.type = type;
};
this.setDisplay = function(flag) {
this.obj.style.display = flag;
};
this.pointInObj = function(x, y) {
var res = false;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.left;
var x2 = x1 + this.width;
var y1 = this.top;
var y2 = y1 + this.height;
var centerX = x1 + this.width / 2;
var centerY = y1 + this.height / 2;
var radius = this.width / 2;
var d = (x - centerX) * (x - centerX) + (y - centerY) * (y - centerY);
if ((radius * radius) > d) {
this.mouseX = x;
this.mouseY = y;
this.x = x - this.obj.offsetLeft;
this.y = y - this.obj.offsetTop;
res = true;
}
return res;
};
this.move = function(x, y, mouseX, mouseY) {
this.obj.style.left = GroupEvent.getX(x) - this.x - GroupEvent.getX(mouseX) + this.mouseX;
this.obj.style.top = GroupEvent.getY(y) - this.y - GroupEvent.getY(mouseY) + this.mouseY;
this.left = parseInt(this.obj.style.left);
this.top = parseInt(this.obj.style.top);
};
this.moveEnd = function() {
this.x = 0;
this.y = 0;
this.mouseX = this.left;
this.mouseY = this.top
};
this.setSelected = function() {
this.shadowObj.on = 'T';
if (this.textObj) this.textObj.style.color = 'green';
this.selected = true;
};
this.clearSelected = function() {
this.shadowObj.on = false;
if (this.textObj) this.textObj.style.color = 'blue';
this.selected = false;
};
this.remove = function() {
var group = document.getElementById('group');
group.removeChild(this.obj);
};
this.setLeft = function(n) {
this.left = n;
this.obj.style.left = n;
};
this.setTop = function(n) {
this.top = n;
this.obj.style.top = n;
};
this.setWidth = function(n) {
this.width = n;
this.obj.style.width = n;
};
this.setHeight = function(n) {
this.height = n;
this.obj.style.height = n;
};
this.getDots = function() {
var l = this.left;
var t = this.top;
var w = this.width;
var h = this.height;
var dots = new Array();
var dot;
dots[dots.length] = {
x: l,
y: t + h / 2
};
dots[dots.length] = {
x: l + w,
y: t + h / 2
};
dots[dots.length] = {
x: l + w / 2,
y: t
};
dots[dots.length] = {
x: l + w / 2,
y: t + h
};
return dots;
};
this.setProperty = function(type) {
Prop.clear();
document.getElementById(type + '_p_id').innerHTML = this.id;
document.getElementById(type + '_p_name').value = this.name;
if (this.property) {
var num = this.property.length;
for (var i = 0; i < num; i++) {
switch (this.property[i].text) {
case 'span':
document.getElementById(this.property[i].id).innerHTML = this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value = this.property[i].value;
break;
}
}
}
};
this.getProperty = function(property) {
this.property = property;
this.name = property.n_p_name;
this.title = this.name;
};
this.toJson = function() {
var json = {
id: this.id,
name: this.name,
type: this.type,
shape: this.shape,
number: this.number,
left: this.left,
top: this.top,
width: this.width,
height: this.height,
property: this.property
};
return json;
};
this.jsonTo = function(json) {
this.id = json.id;
this.name = json.name;
this.type = json.type;
this.shape = json.shape;
this.number = json.number;
this.left = json.left;
this.top = json.top;
this.width = json.width;
this.height = json.height;
this.property = json.property;
}
} function PolyLine() {
this.id = 'line_';
this.name = 'New Line';
this.number = -1;
this.type = 'line';
this.shape = 'polyline';
this.property = null;
this.selected = false;
this.fromX = -1;
this.fromY = -1;
this.toX = -1;
this.toY = -1;
this.polyDot = [];
this.textFlag = false;
this.mirrorFlag = false;
this.obj = null;
this.strokeObj = null;
this.textObj = null;
this.fromObj = null;
this.toObj = null;
this.init = function() {
var groupObj = document.getElementById('group');
var obj = document.createElement('v:polyline');
groupObj.appendChild(obj);
obj.title = this.name;
obj.points.value = '0,20 50,0 100,20';
obj.strokecolor = 'blue';
obj.strokeweight = '3';
obj.filled = 'false';
obj.style.position = 'absolute';
obj.style.zIndex = '2';
obj.style.cursor = 'hand';
this.obj = obj;
var strokeObj = document.createElement('v:stroke');
obj.appendChild(strokeObj);
strokeObj.endArrow = "Classic";
this.strokeObj = strokeObj;
if (this.textFlag) {
var textObj = document.createElement('v:textbox');
textObj.inset = '10pt,1pt,5pt,5pt';
textObj.style.textAlign = 'center';
textObj.style.verticalAlign = 'bottom';
textObj.style.color = 'blue';
textObj.style.fontSize = '9pt';
textObj.innerHTML = this.name;
obj.appendChild(textObj);
this.textObj = textObj;
}
if (!this.mirrorFlag) {
var Love = groupObj.getAttribute('bindClass');
if (this.number < 0) {
this.number = Love.getObjectNum();
this.id = this.id + this.number;
obj.id = this.id;
this.name = this.id;
this.obj.title = this.id;
}
Love.lines[Love.lines.length] = this;
}
};
this.setFrom = function(x, y, obj) {
this.fromX = GroupEvent.getX(x);
this.fromY = GroupEvent.getY(y);
if (obj) this.fromObj = obj;
this.polyDot = [];
this.obj.points.value = this.getPointsValue();
};
this.setTo = function(x, y, obj) {
this.toX = GroupEvent.getX(x);
this.toY = GroupEvent.getY(y);
if (obj) this.toObj = obj;
this.polyDot = [];
this.obj.points.value = this.getPointsValue();
};
this.setDisplay = function(flag) {
this.obj.style.display = flag;
};
this.setShape = function(shape) {
if (shape) this.shape = shape;
};
this.link = function(lineMirror) {
this.fromObj = lineMirror.fromObj;
this.toObj = lineMirror.toObj;
this.relink();
this.fromObj.clearSelected();
};
this.relink = function() {
var fromDots = this.fromObj.getDots();
var toDots = this.toObj.getDots();
switch (this.shape) {
case 'polyline':
this.relinkPolyline(fromDots, toDots);
break;
case 'line':
this.relinkLine(fromDots, toDots);
break;
default:
}
};
this.relinkLine = function(fromDots, toDots) {
var fromDotNum = fromDots.length;
var toDotNum = toDots.length;
var lineLen = -1;
var fromDot;
var toDot;
for (var i = 0; i < fromDotNum; i++) {
for (var j = 0; j < toDotNum; j++) {
if (lineLen < 0) {
lineLen = this.getLineLength(fromDots[i].x, fromDots[i].y, toDots[j].x, toDots[j].y);
fromDot = fromDots[i];
toDot = toDots[j];
} else if (lineLen > this.getLineLength(fromDots[i].x, fromDots[i].y, toDots[j].x, toDots[j].y)) {
lineLen = this.getLineLength(fromDots[i].x, fromDots[i].y, toDots[j].x, toDots[j].y);
fromDot = fromDots[i];
toDot = toDots[j];
}
}
}
this.fromX = fromDot.x;
this.fromY = fromDot.y;
this.toX = toDot.x;
this.toY = toDot.y;
this.obj.points.value = this.getPointsValue();
};
this.relinkPolyline = function(fromDots, toDots) {
var fromDot;
var toDot;
this.polyDot = [];
var xflag = -1;
var yflag = -1;
if ((this.fromObj.left + this.fromObj.width) < toDots[2].x) {
fromDot = fromDots[1];
toDot = toDots[0];
xflag = 0;
} else if (this.fromObj.left > toDots[2].x) {
fromDot = fromDots[0];
toDot = toDots[1];
xflag = 1;
} else {
fromDot = fromDots[1];
toDot = toDots[1];
xflag = 2;
}
if (fromDots[0].y > toDots[3].y) {
if (xflag == 2) {
fromDot = fromDots[0];
toDot = toDots[0];
this.polyDot[0] = {
x: Math.min(fromDot.x, toDot.x) - 30,
y: fromDot.y
};
this.polyDot[1] = {
x: Math.min(fromDot.x, toDot.x) - 30,
y: toDot.y
};
} else {
toDot = toDots[3];
this.polyDot[0] = {
x: toDot.x,
y: fromDot.y
};
}
} else if (fromDots[0].y < toDots[2].y) {
if (xflag == 2) {
this.polyDot[0] = {
x: Math.max(fromDot.x, toDot.x) + 30,
y: fromDot.y
};
this.polyDot[1] = {
x: Math.max(fromDot.x, toDot.x) + 30,
y: toDot.y
};
} else {
toDot = toDots[2];
this.polyDot[0] = {
x: toDot.x,
y: fromDot.y
};
}
} else {
if (xflag == 0) {
fromDot = fromDots[2];
toDot = toDots[2];
this.polyDot[0] = {
x: fromDot.x,
y: Math.min(fromDot.y, toDot.y) - 10
};
this.polyDot[1] = {
x: toDot.x,
y: Math.min(fromDot.y, toDot.y) - 10
};
} else if (xflag == 1) {
fromDot = fromDots[3];
toDot = toDots[3];
this.polyDot[0] = {
x: fromDot.x,
y: Math.max(fromDot.y, toDot.y) + 10
};
this.polyDot[1] = {
x: toDot.x,
y: Math.max(fromDot.y, toDot.y) + 10
};
}
}
this.fromX = fromDot.x;
this.fromY = fromDot.y;
this.toX = toDot.x;
this.toY = toDot.y;
this.obj.points.value = this.getPointsValue();
};
this.getPointsValue = function() {
var res = this.fromX + ',' + this.fromY;
for (var i = 0; i < this.polyDot.length; i++) {
res += ' ' + this.polyDot[i].x + ',' + this.polyDot[i].y;
}
res += ' ' + this.toX + ',' + this.toY;
return res;
};
this.getLineLength = function(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
};
this.pointInObj = function(x, y) {
var res = false;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.fromX;
var y1 = this.fromY;
var x2 = this.toX;
var y2 = this.toY;
var x21 = x2 - x1;
var y21 = y2 - y1;
switch (this.shape) {
case 'polyline':
for (var i = 0; i < this.polyDot.length; i++) {
x2 = this.polyDot[i].x;
y2 = this.polyDot[i].y;
x21 = x2 - x1;
y21 = y2 - y1;
if (x21 == 0) {
res = (Math.abs(x - x1) < 5) && (Math.min(y1, y2) <= y) && (Math.max(y1, y2) >= y);
} else if (y21 == 0) {
res = (Math.abs(y - y1) < 5) && (Math.min(x1, x2) <= x) && (Math.max(x1, x2) >= x);
}
if (res) break;
x1 = x2;
y1 = y2;
}
if (!res) {
x2 = this.toX;
y2 = this.toY;
x21 = x2 - x1;
y21 = y2 - y1;
if (x21 == 0) {
res = (Math.abs(x - x1) < 5) && (Math.min(y1, y2) <= y) && (Math.max(y1, y2) >= y);
} else if (y21 == 0) {
res = (Math.abs(y - y1) < 5) && (Math.min(x1, x2) <= x) && (Math.max(x1, x2) >= x);
}
}
break;
case 'line':
if (x21 == 0) {
res = (Math.abs(x - x1) < 5) && (Math.min(y1, y2) <= y) && (Math.max(y1, y2) >= y);
} else if (y21 == 0) {
res = (Math.abs(y - y1) < 5) && (Math.min(x1, x2) <= x) && (Math.max(x1, x2) >= x);
} else {
res = (Math.min(y1, y2) <= y) && (Math.max(y1, y2) >= y) && (Math.min(x1, x2) <= x) && (Math.max(x1, x2) >= x) && ((Math.abs(Math.floor((x21 / y21) * (y - y1) + x1 - x)) < 5) || (Math.abs(Math.floor((y21 / x21) * (x - x1) + y1 - y)) < 5));
}
break;
default:
}
return res;
};
this.pointInStroke = function(x, y) {
var res = -1;
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
var x1 = this.fromX;
var x2 = this.toX;
var y1 = this.fromY;
var y2 = this.toY;
if ((Math.abs(x2 - x) < 6) && (Math.abs(y2 - y) < 6)) res = 0;
if ((Math.abs(x1 - x) < 6) && (Math.abs(y1 - y) < 6)) res = 1;
return res;
};
this.setSelected = function() {
this.obj.strokecolor = 'green';
if (this.textObj) this.textObj.style.color = 'green';
this.selected = true;
this.obj.style.zIndex = '22';
};
this.move = function() {};
this.moveEnd = function() {};
this.setMoveSelected = function() {
this.obj.strokecolor = 'red';
if (this.textObj) this.textObj.style.color = 'green';
this.selected = true;
this.obj.style.zIndex = '22';
};
this.clearSelected = function() {
this.obj.strokecolor = 'blue';
if (this.textObj) this.textObj.style.color = 'blue';
this.selected = false;
this.obj.style.zIndex = '2';
};
this.remove = function() {
var group = document.getElementById('group');
group.removeChild(this.obj);
};
this.setProperty = function(type) {
Prop.clear();
document.getElementById(type + '_p_id').innerHTML = this.id;
document.getElementById(type + '_p_name').value = this.name;
document.getElementById(type + '_p_pre').innerHTML = this.fromObj.name;
document.getElementById(type + '_p_next').innerHTML = this.toObj.name;
if (this.property) {
var num = this.property.length;
for (var i = 0; i < num; i++) {
switch (this.property[i].text) {
case 'span':
document.getElementById(this.property[i].id).innerHTML = this.property[i].value;
break;
default:
document.getElementById(this.property[i].id).value = this.property[i].value;
break;
}
}
}
};
this.getProperty = function(property) {
this.property = property;
this.name = property.l_p_name;
this.title = this.name;
};
this.toJson = function() {
var json = {
id: this.id,
name: this.name,
type: this.type,
shape: this.shape,
number: this.number,
from: this.fromObj.id,
to: this.toObj.id,
fromx: this.fromX,
fromy: this.fromY,
tox: this.toX,
toy: this.toY,
polydot: this.polyDot,
property: this.property
};
return json;
};
this.jsonTo = function(json) {
this.id = json.id;
this.name = json.name;
this.type = json.type;
this.shape = json.shape;
this.number = json.number;
this.fromX = json.fromx;
this.fromY = json.fromy;
this.toX = json.tox;
this.toY = json.toy;
this.polyDot = json.polydot;
this.property = json.property;
var group = document.getElementById('group');
var Love = group.getAttribute('bindClass');
var nodes = Love.nodes;
var nodeNum = nodes.length;
var node = null;
for (var i = 0; i < nodeNum; i++) {
node = nodes[i];
if (node.id == json.from) {
this.fromObj = node;
} else if (node.id == json.to) {
this.toObj = node;
}
}
}
} function Window() {
this.id = 'propWin';
this.left = 100;
this.top = 3;
this.height = 300;
this.width = 400;
this.title = '帮助';
this.selected = false;
this.x = -1;
this.y = -1;
this.obj = null;
this.objBody = null;
this.init = function() {
var toolObj = document.getElementById('tool');
var win = document.createElement('div');
toolObj.appendChild(win);
this.obj = win;
win.setAttribute('bindClass', this);
win.id = this.id;
win.style.position = 'absolute';
win.style.left = this.left;
win.style.top = this.top;
win.style.width = this.width;
win.className = 'x-window';
var s = '<div class="x-window-tl">';
s += '<div class="x-window-tr"> ';
s += '<div id="a1" class="x-window-tc"><div class="x-tool-close"></div><span>标题</span>';
s += '</div> ';
s += ' </div> ';
s += '</div> ';
s += '<div class="x-window-ml"> ';
s += ' <div class="x-window-mr"> ';
s += ' <div class="x-window-mc"> ';
s += ' </div> ';
s += ' </div> ';
s += '</div> ';
s += '<div class="x-window-bl"> ';
s += '<div class="x-window-br"> ';
s += '<div class="x-window-bc"> ';
s += '</div> ';
s += '</div> ';
s += '</div>';
win.appendChild(this.createTop());
win.appendChild(this.createMiddle());
win.appendChild(this.createBottom());
};
this.createTop = function() {
var l = document.createElement('div');
l.className = 'x-window-tl';
var r = document.createElement('div');
r.className = 'x-window-tr';
l.appendChild(r);
var c = document.createElement('div');
c.className = 'x-window-tc';
r.appendChild(c);
c.setAttribute('pid', this.id);
c.onmousedown = WindowEvent.mouseDown;
c.onmousemove = WindowEvent.mouseMove;
c.onmouseup = WindowEvent.mouseUp;
var closeObj = document.createElement('div');
closeObj.className = 'x-tool-close';
c.appendChild(closeObj);
closeObj.setAttribute('pid', this.id);
closeObj.onclick = function() {
var p = document.getElementById(this.pid);
p.style.display = 'none';
};
var title = document.createElement('span');
title.innerHTML = this.title;
this.obj.t = title;
c.appendChild(title);
return l;
};
this.createMiddle = function() {
var l = document.createElement('div');
l.className = 'x-window-ml';
var r = document.createElement('div');
r.className = 'x-window-mr';
l.appendChild(r);
var c = document.createElement('div');
c.className = 'x-window-mc';
r.appendChild(c);
for (var i = 0; i < Prop.panels.length; i++) {
var panel = document.createElement('div');
panel.id = Prop.panels[i].id;
if (i > 0) panel.style.display = 'none';
c.appendChild(panel);
if (Prop.panels[i].type == 1) {
var tabs = new TabPanel();
tabs.init();
panel.appendChild(tabs.obj);
panel.setAttribute('tabs', tabs);
for (var j = 0; j < Prop.panels[i].tabs.length; j++) {
var tab = new Tab();
tab.init(Prop.panels[i].tabs[j].id, Prop[Prop.panels[i].tabs[j].type][Prop.panels[i].tabs[j].val]);
tabs.appendFuck(tab);
panel.appendChild(tab.bObj);
if (j == 0) tabs.setSelected(tab);
}
} else {
panel.innerHTML = Prop.panels[i].body;
}
}
return l;
};
this.createBottom = function() {
var l = document.createElement('div');
l.className = 'x-window-bl';
var r = document.createElement('div');
r.className = 'x-window-br';
l.appendChild(r);
var c = document.createElement('div');
c.className = 'x-window-bc';
r.appendChild(c);
var ba = document.createElement('button');
ba.setAttribute('pid', this.id);
c.appendChild(ba);
ba.className = 'btn';
ba.value = '应用';
ba.onclick = function() {
var win = document.getElementById('propWin');
var obj = win.selected;
if (obj) {
var type = win.type;
if (obj) {
obj.property = Prop.setProperty(type);
}
obj.name = document.getElementById(type + '_p_name').value;
if (obj.textObj) obj.textObj.innerHTML = obj.name;
obj.obj.title = obj.name;
}
};
var b = document.createElement('button');
b.setAttribute('pid', this.id);
c.appendChild(b);
b.className = 'btn';
b.value = '关闭';
b.onclick = function() {
var p = document.getElementById(this.pid);
p.style.display = 'none';
};
return l;
};
this.down = function() {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
x = GroupEvent.getX(x);
y = GroupEvent.getY(y);
this.x = x - this.obj.offsetLeft;
this.y = y - this.obj.offsetTop;
this.selected = true;
};
this.move = function() {
if (this.selected) {
var x = GroupEvent.getMouseX();
var y = GroupEvent.getMouseY();
this.left = GroupEvent.getX(x) - this.x;
this.top = GroupEvent.getY(y) - this.y;
this.obj.style.left = this.left + 'px';
this.obj.style.top = this.top + 'px';
}
};
this.up = function() {
this.selected = false;
if (this.left < 3) {
this.left = 10;
this.obj.style.left = this.left + 'px';
}
if (this.top < 3) {
this.top = 3;
this.obj.style.top = this.top + 'px';
}
}
};
var WindowEvent = {
mouseDown: function() {
var win = document.getElementById(this.pid);
this.setCapture();
var winClass = win.getAttribute('bindClass');
winClass.down();
},
mouseMove: function() {
var win = document.getElementById(this.pid);
var winClass = win.getAttribute('bindClass');
winClass.move();
return false;
},
mouseUp: function() {
var win = document.getElementById(this.pid);
var winClass = win.getAttribute('bindClass');
winClass.up();
this.releaseCapture();
document.getElementById('group').focus();
}
} function TabPanel() {
this.tabs = [];
this.obj = null;
this.ulObj = null;
this.selected = null;
this.init = function() {
var obj = document.createElement('div');
obj.className = 'x-tab-panel-header';
obj.setAttribute('bindClass', this);
var wrapObj = document.createElement('div');
wrapObj.className = 'x-tab-strip-top';
obj.appendChild(wrapObj);
var topObj = document.createElement('div');
topObj.className = 'x-tab-strip-wrap';
wrapObj.appendChild(topObj);
var ulObj = document.createElement('ul');
topObj.appendChild(ulObj);
this.obj = obj;
this.ulObj = ulObj;
};
this.appendFuck = function(tab) {
this.ulObj.appendChild(tab.obj);
tab.obj.pObj = this.obj;
this.tabs[this.tabs.length] = tab;
};
this.setSelected = function(tab) {
if (!tab) {
tab = this.tabs[0];
}
if (this.selected) {
this.selected.obj.className = '';
this.selected.bObj.className = 'x-tab-panel-body';
}
this.selected = tab;
tab.obj.className = 'x-tab-strip-active';
tab.bObj.className = 'x-tab-panel-body-show';
}
};
function Tab() {
this.obj = null;
this.bObj = null;
this.init = function(title, content) {
var obj = document.createElement('li');
obj.setAttribute('bindClass', this);
this.obj = obj;
obj.onclick = function() {
var tabsClass = this.pObj.getAttribute('bindClass');
tabsClass.selected.obj.className = '';
tabsClass.selected.bObj.className = 'x-tab-panel-body';
tabsClass.selected = this.getAttribute('bindClass');
this.className = 'x-tab-strip-active';
this.bObj.className = 'x-tab-panel-body-show';
};
var l = document.createElement('div');
l.className = 'x-tab-left';
obj.appendChild(l);
var r = document.createElement('div');
r.className = 'x-tab-right';
l.appendChild(r);
var c = document.createElement('div');
c.className = 'x-tab-middle';
r.appendChild(c);
c.innerHTML = title;
var bObj = document.createElement('div');
bObj.className = 'x-tab-panel-body';
this.bObj = bObj;
this.obj.bObj = bObj;
this.createBody(bObj, content);
};
this.createBody = function(pobj, content) {
for (var i = 0; i < content.length; i++) {
var json = content[i];
var obj = document.createElement('div');
pobj.appendChild(obj);
var hObj = document.createElement('span');
obj.appendChild(hObj);
hObj.innerHTML = json.subject + '：';
hObj.style.width = '120px';
hObj.style.textAlign = 'center';
var bObj = document.createElement(json.text);
obj.appendChild(bObj);
bObj.id = json.id;
bObj.className = 'x-form-field';
switch (json.text) {
case 'select':
for (var j = 0; j < json.options.length; j++) {
bObj.options[j] = new Option(json.options[j].text, json.options[j].id);
}
break;
case 'textarea':
bObj.rows = 10;
break;
default:
}
if (json.btn) {
var btn = document.createElement('img');
btn.src = 'img/drop-add.gif';
btn.style.cursor = 'hand';
btn.onclick = json.btn.click;
obj.appendChild(btn);
}
}
}
} </script>
</head>
<body class='btype' onload="Prop.clear();document.getElementById('group').focus();">
<div id="tool">
</div>
<div id="group" onselectstart="return false;">
</div>
<script>
var g = new Group();
g.init(); g.setGroupArea(); var m = new Menu();
m.init();
var w = new Window();
w.left = screen.availWidth - 450;
w.init(); var jsonStr = '{"id":null,"name":null,"count":37,"nodes":[{"id":"node_1","name":"开始","type":"start","shape":"oval","number":1,"left":258,"top":63,"width":20,"height":20,"property":[{"id":"n_p_id","text":"span","value":"node_1"},{"id":"n_p_name","text":"input","value":"开始"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_2","name":"结束","type":"end","shape":"oval","number":2,"left":612,"top":708,"width":20,"height":20,"property":[{"id":"n_p_id","text":"span","value":"node_2"},{"id":"n_p_name","text":"input","value":"结束"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_3","name":"部门主任审批","type":"node","shape":"img","number":3,"left":230,"top":140,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_3"},{"id":"n_p_name","text":"input","value":"部门主任审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_4","name":"办公室主任审批","type":"node","shape":"img","number":4,"left":230,"top":255,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_4"},{"id":"n_p_name","text":"input","value":"办公室主任审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_5","name":"公司副总审批","type":"node","shape":"img","number":5,"left":230,"top":364,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_5"},{"id":"n_p_name","text":"input","value":"公司副总审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_9","name":"公司老总审批","type":"node","shape":"img","number":9,"left":384,"top":367,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_9"},{"id":"n_p_name","text":"input","value":"公司老总审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_11","name":"部门人员办理","type":"node","shape":"rect","number":11,"left":368,"top":177,"width":100,"height":40,"property":[{"id":"n_p_id","text":"span","value":"node_11"},{"id":"n_p_name","text":"input","value":"部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_13","name":"相关部门领导办理","type":"node","shape":"img","number":13,"left":230,"top":501,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_13"},{"id":"n_p_name","text":"input","value":"相关部门领导办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_14","name":"相关部门人员办理","type":"node","shape":"img","number":14,"left":384,"top":504,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_14"},{"id":"n_p_name","text":"input","value":"相关部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_15","name":"部门人员办理","type":"node","shape":"img","number":15,"left":505,"top":213,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_15"},{"id":"n_p_name","text":"input","value":"部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_23","name":"相关人员办理","type":"node","shape":"img","number":23,"left":72,"top":277,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_23"},{"id":"n_p_name","text":"input","value":"相关人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_28","name":"财务部领导审批","type":"node","shape":"rect","number":28,"left":527,"top":437,"width":100,"height":40,"property":[{"id":"n_p_id","text":"span","value":"node_28"},{"id":"n_p_name","text":"input","value":"财务部领导审批"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_30","name":"相关部门人员办理","type":"node","shape":"img","number":30,"left":309,"top":660,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_30"},{"id":"n_p_name","text":"input","value":"相关部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]},{"id":"node_31","name":"相关部门人员办理","type":"node","shape":"img","number":31,"left":526,"top":578,"width":75,"height":70,"property":[{"id":"n_p_id","text":"span","value":"node_31"},{"id":"n_p_name","text":"input","value":"相关部门人员办理"},{"id":"n_p_desc","text":"textarea","value":""},{"id":"n_p_group","text":"input","value":""},{"id":"n_p_role","text":"input","value":""},{"id":"n_p_node","text":"input","value":""},{"id":"n_p_num","text":"input","value":""},{"id":"n_p_other","text":"input","value":""}]}],"lines":[{"id":"line_6","name":"line_6","type":"line","shape":"line","number":6,"from":"node_1","to":"node_3","fromx":268,"fromy":83,"tox":267.5,"toy":140,"polydot":[],"property":null},{"id":"line_7","name":"line_7","type":"line","shape":"line","number":7,"from":"node_3","to":"node_4","fromx":267.5,"fromy":210,"tox":267.5,"toy":255,"polydot":[],"property":null},{"id":"line_10","name":"line_10","type":"line","shape":"polyline","number":10,"from":"node_4","to":"node_9","fromx":285,"fromy":272.5,"tox":421.5,"toy":367,"polydot":[{"x":421.5,"y":272.5}],"property":null},{"id":"line_12","name":"送办理","type":"line","shape":"polyline","number":12,"from":"node_3","to":"node_11","fromx":285,"fromy":157.5,"tox":418,"toy":177,"polydot":[{"x":418,"y":157.5}],"property":[{"id":"l_p_id","text":"span","value":"line_12"},{"id":"l_p_name","text":"input","value":"送办理"},{"id":"l_p_desc","text":"textarea","value":""},{"id":"l_p_pre","text":"span","value":"部门主任审批"},{"id":"l_p_next","text":"span","value":"部门人员办理"},{"id":"l_p_type","text":"select","value":"1"},{"id":"l_p_mp","text":"select","value":"0"},{"id":"l_p_mpsel","text":"select","value":"0"},{"id":"l_p_mptype","text":"select","value":"1"},{"id":"l_p_mplx","text":"select","value":"0"},{"id":"l_p_group","text":"input","value":""},{"id":"l_p_role","text":"input","value":""},{"id":"l_p_dgroup","text":"input","value":""},{"id":"l_p_drole","text":"input","value":""}]},{"id":"line_16","name":"line_16","type":"line","shape":"line","number":16,"from":"node_5","to":"node_13","fromx":267.5,"fromy":434,"tox":267.5,"toy":501,"polydot":[],"property":null},{"id":"line_17","name":"line_17","type":"line","shape":"line","number":17,"from":"node_13","to":"node_14","fromx":285,"fromy":518.5,"tox":404,"toy":521.5,"polydot":[],"property":null},{"id":"line_18","name":"line_18","type":"line","shape":"line","number":18,"from":"node_13","to":"node_9","fromx":285,"fromy":518.5,"tox":421.5,"toy":437,"polydot":[],"property":null},{"id":"line_19","name":"line_19","type":"line","shape":"line","number":19,"from":"node_9","to":"node_5","fromx":404,"fromy":384.5,"tox":285,"toy":381.5,"polydot":[],"property":null},{"id":"line_21","name":"line_21","type":"line","shape":"line","number":21,"from":"node_4","to":"node_5","fromx":267.5,"fromy":325,"tox":267.5,"toy":364,"polydot":[],"property":null},{"id":"line_22","name":"line_22","type":"line","shape":"polyline","number":22,"from":"node_5","to":"node_4","fromx":250,"fromy":381.5,"tox":250,"toy":272.5,"polydot":[{"x":220,"y":381.5},{"x":220,"y":272.5}],"property":null},{"id":"line_24","name":"line_24","type":"line","shape":"polyline","number":24,"from":"node_3","to":"node_23","fromx":250,"fromy":157.5,"tox":109.5,"toy":277,"polydot":[{"x":109.5,"y":157.5}],"property":null},{"id":"line_26","name":"line_26","type":"line","shape":"polyline","number":26,"from":"node_13","to":"node_23","fromx":250,"fromy":518.5,"tox":109.5,"toy":347,"polydot":[{"x":109.5,"y":518.5}],"property":null},{"id":"line_27","name":"line_27","type":"line","shape":"polyline","number":27,"from":"node_9","to":"node_15","fromx":439,"fromy":384.5,"tox":542.5,"toy":283,"polydot":[{"x":542.5,"y":384.5}],"property":null},{"id":"line_29","name":"line_29","type":"line","shape":"polyline","number":29,"from":"node_9","to":"node_28","fromx":439,"fromy":384.5,"tox":577,"toy":437,"polydot":[{"x":577,"y":384.5}],"property":null},{"id":"line_32","name":"line_32","type":"line","shape":"line","number":32,"from":"node_13","to":"node_30","fromx":267.5,"fromy":571,"tox":346.5,"toy":660,"polydot":[],"property":null},{"id":"line_33","name":"line_33","type":"line","shape":"line","number":33,"from":"node_14","to":"node_30","fromx":421.5,"fromy":574,"tox":346.5,"toy":660,"polydot":[],"property":null},{"id":"line_34","name":"line_34","type":"line","shape":"line","number":34,"from":"node_31","to":"node_30","fromx":546,"fromy":595.5,"tox":364,"toy":677.5,"polydot":[],"property":null},{"id":"line_36","name":"line_36","type":"line","shape":"polyline","number":36,"from":"node_14","to":"node_31","fromx":439,"fromy":521.5,"tox":563.5,"toy":578,"polydot":[{"x":563.5,"y":521.5}],"property":null},{"id":"line_37","name":"line_37","type":"line","shape":"polyline","number":37,"from":"node_30","to":"node_2","fromx":364,"fromy":677.5,"tox":622,"toy":708,"polydot":[{"x":622,"y":677.5}],"property":null}]}';
var j = JSON.decode(jsonStr);
g.jsonTo(j);
</script> <div id="a"> </div>
</body>
</html> //解析成BPM流程定义文件
function parseJSON(json) {
var startNode = "<start-state name='{0}'>{1}</start-state>" ;
var endNode = "<end-state name='{0}'></state>" ;
var stateNode = "<state name='{0}'>{1}</state>" ;
var nodes = json.nodes;
var lines = json.lines;
var definistationXML = "";
for(var i = 0 ; i < nodes.length ; i ++ ){
var node = nodes[i];
var temp = "";
if(node.type == "start"){
temp = startNode;
}
if(node.type == "node"){
temp = stateNode;
}
if(node.type == "end"){
temp = endNode;
}
temp = temp.replace("{0}",node.name);
var xtemp = "";
for(var j = 0 ; j < lines.length ; j ++ ){
if(lines[j].from == node.id){
xtemp = xtemp + "<transition to='"+lines[j].to+"'/>" ;
}
}
temp = temp.replace("{1}",xtemp);
definistationXML = definistationXML + temp;
}
return "<process-definition>" + definistationXML + "</process-definition>";
}
