📄 demo.html
字号:
<!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("涓ょ偣涔嬮棿宸茬粡瀛樺湪杩炴帴锛⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -