92 lines
12 KiB
HTML
92 lines
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>testDomDepth</title>
|
|
<link href="../css/app.css" rel="stylesheet" type="text/css"/>
|
|
<script type="text/javascript" src="../js/base.js"></script>
|
|
<script type="text/javascript">
|
|
kampfer.require('events');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="map" node-type="map" class="map" style="width: 2000px; height: 2000px; left: -318px; top: -665px; "><div id="aa3a8bc0-6ecb-cf5d-851f-3a3878cd0be7" class="node" node-type="node" style="left: 950px; top: 981px; "><div class="node-caption" id="caption-aa3a8bc0-6ecb-cf5d-851f-3a3878cd0be7" node-type="caption" style="left: -62px; top: -21px; ">Class</div><div id="8612a3d6-9da5-7dec-b95a-8a7d1ab54220" class="node" node-type="node" style="left: -222px; top: 75px; "><div class="node-caption" id="caption-8612a3d6-9da5-7dec-b95a-8a7d1ab54220" node-type="caption" style="left: -62px; top: -21px; ">Composition</div><canvas style="left: 0px; top: -75px; " width="222" height="75" id="branch-8612a3d6-9da5-7dec-b95a-8a7d1ab54220" node-type="branch"></canvas><div id="df82e79b-f5dd-258d-5a78-ad6153d44b2c" class="node" node-type="node" style="left: -165px; top: 65px; "><div class="node-caption" id="caption-df82e79b-f5dd-258d-5a78-ad6153d44b2c" node-type="caption" style="left: -62px; top: -21px; ">Component</div><canvas style="left: 0px; top: -65px; " width="165" height="65" id="branch-df82e79b-f5dd-258d-5a78-ad6153d44b2c" node-type="branch"></canvas><div id="6875866c-77b5-7f8d-c97c-de2365685001" class="node" node-type="node" style="left: -153px; top: 90px; "><div class="node-caption" id="caption-6875866c-77b5-7f8d-c97c-de2365685001" node-type="caption" style="left: -62px; top: -21px; ">Node</div><canvas style="left: 0px; top: -90px; " width="153" height="90" id="branch-6875866c-77b5-7f8d-c97c-de2365685001" node-type="branch"></canvas></div><div id="4fe27643-3b97-7b2c-955d-49f4956dd880" class="node" node-type="node" style="left: 154px; top: 85px; "><div class="node-caption" id="caption-4fe27643-3b97-7b2c-955d-49f4956dd880" node-type="caption" style="left: -62px; top: -21px; ">Caption</div><canvas style="left: -154px; top: -85px; " width="154" height="85" id="branch-4fe27643-3b97-7b2c-955d-49f4956dd880" node-type="branch"></canvas></div><div id="b2d56426-46fc-88ae-c1b1-04d9382bced4" class="node" node-type="node" style="left: -162px; top: -11px; "><div class="node-caption" id="caption-b2d56426-46fc-88ae-c1b1-04d9382bced4" node-type="caption" style="left: -62px; top: -21px; ">Map</div><canvas style="left: 0px; top: 0px; " width="162" height="11" id="branch-b2d56426-46fc-88ae-c1b1-04d9382bced4" node-type="branch"></canvas></div><div id="b5e6dd89-442f-d7e2-3b14-c9f39dc24e63" class="node" node-type="node" style="left: 6px; top: 110px; "><div class="node-caption" id="caption-b5e6dd89-442f-d7e2-3b14-c9f39dc24e63" node-type="caption" style="left: -62px; top: -21px; ">Branch</div><canvas style="left: -6px; top: -110px; " width="6" height="110" id="branch-b5e6dd89-442f-d7e2-3b14-c9f39dc24e63" node-type="branch"></canvas></div><div id="2cdd0a44-fee7-0358-457d-3cc2a9758a9e" class="node" node-type="node" style="left: -29px; top: -106px; "><div class="node-caption" id="caption-2cdd0a44-fee7-0358-457d-3cc2a9758a9e" node-type="caption" style="left: -62px; top: -30px; ">Menu && MenuItem</div><canvas style="left: 0px; top: 0px; " width="29" height="106" id="branch-2cdd0a44-fee7-0358-457d-3cc2a9758a9e" node-type="branch"></canvas></div></div></div><div id="6b0b179d-3339-5c93-caa7-7e1cf9c4f59b" class="node" node-type="node" style="left: -52px; top: 127px; "><div class="node-caption" id="caption-6b0b179d-3339-5c93-caa7-7e1cf9c4f59b" node-type="caption" style="left: -62px; top: -21px; ">MapController</div><canvas style="left: 0px; top: -127px; " width="52" height="127" id="branch-6b0b179d-3339-5c93-caa7-7e1cf9c4f59b" node-type="branch"></canvas></div><div id="b5c989de-9d4f-9901-b9a7-cbedcfaa7e9e" class="node" node-type="node" style="left: 117px; top: 72px; "><div class="node-caption" id="caption-b5c989de-9d4f-9901-b9a7-cbedcfaa7e9e" node-type="caption" style="left: -62px; top: -21px; ">MapManager</div><canvas style="left: -117px; top: -72px; " width="117" height="72" id="branch-b5c989de-9d4f-9901-b9a7-cbedcfaa7e9e" node-type="branch"></canvas></div><div id="c81b85ae-31a5-8ff3-932b-d5bb4648676d" class="node" node-type="node" style="left: 58px; top: -111px; "><div class="node-caption" id="caption-c81b85ae-31a5-8ff3-932b-d5bb4648676d" node-type="caption" style="left: -62px; top: -21px; ">MapsManager</div><canvas style="left: -58px; top: 0px; " width="58" height="111" id="branch-c81b85ae-31a5-8ff3-932b-d5bb4648676d" node-type="branch"></canvas></div><div id="0fde86b8-5305-4d73-746e-f36123aac315" class="node" node-type="node" style="left: -173px; top: -50px; "><div class="node-caption" id="caption-0fde86b8-5305-4d73-746e-f36123aac315" node-type="caption" style="left: -62px; top: -21px; ">node</div><canvas style="left: 0px; top: 0px; " width="173" height="50" id="branch-0fde86b8-5305-4d73-746e-f36123aac315" node-type="branch"></canvas></div><div id="e7571d31-f05a-857d-a633-91b2e7452674" class="node" node-type="node" style="left: 416px; top: -53px; "><div class="node-caption" id="caption-e7571d31-f05a-857d-a633-91b2e7452674" node-type="caption" style="left: -62px; top: -21px; ">command.Base</div><canvas style="left: -416px; top: 0px; " width="416" height="53" id="branch-e7571d31-f05a-857d-a633-91b2e7452674" node-type="branch"></canvas><div id="f8f34914-a033-ddc7-8640-efa218a275ee" class="node" node-type="node" style="left: -53px; top: 112px; "><div class="node-caption" id="caption-f8f34914-a033-ddc7-8640-efa218a275ee" node-type="caption" style="left: -62px; top: -21px; ">SaveMap</div><canvas style="left: 0px; top: -112px; " width="53" height="112" id="branch-f8f34914-a033-ddc7-8640-efa218a275ee" node-type="branch"></canvas></div><div id="b6a71ea3-6779-4255-6c2f-7142cfb63cd8" class="node" node-type="node" style="left: 159px; top: 12px; "><div class="node-caption" id="caption-b6a71ea3-6779-4255-6c2f-7142cfb63cd8" node-type="caption" style="left: -62px; top: -21px; ">SaveNodePosition</div><canvas style="left: -159px; top: -12px; " width="159" height="12" id="branch-b6a71ea3-6779-4255-6c2f-7142cfb63cd8" node-type="branch"></canvas></div><div id="29da8843-01d8-9337-47d5-70e073607925" class="node" node-type="node" style="left: 159px; top: -74px; "><div class="node-caption" id="caption-29da8843-01d8-9337-47d5-70e073607925" node-type="caption" style="left: -62px; top: -21px; ">DeleteNode</div><canvas style="left: -159px; top: 0px; " width="159" height="74" id="branch-29da8843-01d8-9337-47d5-70e073607925" node-type="branch"></canvas></div><div id="3f592451-ce7b-1b13-0b2c-3afb759ea345" class="node" node-type="node" style="left: 121px; top: 140px; "><div class="node-caption" id="caption-3f592451-ce7b-1b13-0b2c-3afb759ea345" node-type="caption" style="left: -62px; top: -21px; ">SaveNodeContent</div><canvas style="left: -121px; top: -140px; " width="121" height="140" id="branch-3f592451-ce7b-1b13-0b2c-3afb759ea345" node-type="branch"></canvas></div><div id="ff4f51f1-f154-92c3-5f7a-d9cd46a38440" class="node" node-type="node" style="left: 9px; top: -110px; "><div class="node-caption" id="caption-ff4f51f1-f154-92c3-5f7a-d9cd46a38440" node-type="caption" style="left: -62px; top: -21px; ">CreateNode</div><canvas style="left: -9px; top: 0px; " width="9" height="110" id="branch-ff4f51f1-f154-92c3-5f7a-d9cd46a38440" node-type="branch"></canvas></div><div id="b26f4e68-90a8-35bf-4026-389e1d930020" class="node" node-type="node" style="left: -158px; top: 41px; "><div class="node-caption" id="caption-b26f4e68-90a8-35bf-4026-389e1d930020" node-type="caption" style="left: -62px; top: -21px; ">Undo</div><canvas style="left: 0px; top: -41px; " width="158" height="41" id="branch-b26f4e68-90a8-35bf-4026-389e1d930020" node-type="branch"></canvas></div><div id="3425fd15-d978-ca5e-13e3-5f7c244a785d" class="node" node-type="node" style="left: -154px; top: -114px; "><div class="node-caption" id="caption-3425fd15-d978-ca5e-13e3-5f7c244a785d" node-type="caption" style="left: -62px; top: -21px; ">Redo</div><canvas style="left: 0px; top: 0px; " width="154" height="114" id="branch-3425fd15-d978-ca5e-13e3-5f7c244a785d" node-type="branch"></canvas></div><div id="ec188717-600c-8c12-9fc3-af986769ecd3" class="node" node-type="node" style="left: 152px; top: 74px; "><div class="node-caption" id="caption-ec188717-600c-8c12-9fc3-af986769ecd3" node-type="caption" style="left: -62px; top: -21px; ">CreateNewMap</div><canvas style="left: -152px; top: -74px; " width="152" height="74" id="branch-ec188717-600c-8c12-9fc3-af986769ecd3" node-type="branch"></canvas></div><div id="94a13a8b-eacc-2cb1-5673-52cd030095d6" class="node" node-type="node" style="left: -138px; top: -22px; "><div class="node-caption" id="caption-94a13a8b-eacc-2cb1-5673-52cd030095d6" node-type="caption" style="left: -62px; top: -21px; ">SaveAsText</div><canvas style="left: 0px; top: 0px; " width="138" height="22" id="branch-94a13a8b-eacc-2cb1-5673-52cd030095d6" node-type="branch"></canvas></div><div id="bc1ea121-627c-7852-38d4-549fd9700760" class="node" node-type="node" style="left: 38px; top: 200px; "><div class="node-caption" id="caption-bc1ea121-627c-7852-38d4-549fd9700760" node-type="caption" style="left: -62px; top: -21px; ">RenameMap</div><canvas style="left: -38px; top: -200px; " width="38" height="200" id="branch-bc1ea121-627c-7852-38d4-549fd9700760" node-type="branch"></canvas></div><div id="a78faed0-00cd-8e10-3e8b-b300e33c46ec" class="node" node-type="node" style="left: -129px; top: 171px; "><div class="node-caption" id="caption-a78faed0-00cd-8e10-3e8b-b300e33c46ec" node-type="caption" style="left: -62px; top: -21px; ">Copy</div><canvas style="left: 0px; top: -171px; " width="129" height="171" id="branch-a78faed0-00cd-8e10-3e8b-b300e33c46ec" node-type="branch"></canvas></div><div id="4b302fac-479b-873d-9ccc-b2e65060abfe" class="node" node-type="node" style="left: 146px; top: -200px; "><div class="node-caption" id="caption-4b302fac-479b-873d-9ccc-b2e65060abfe" node-type="caption" style="left: -62px; top: -21px; ">Cut</div><canvas style="left: -146px; top: 0px; " width="146" height="200" id="branch-4b302fac-479b-873d-9ccc-b2e65060abfe" node-type="branch"></canvas></div><div id="72bdfb8b-d730-a45c-fa44-2ae2e724d3c0" class="node" node-type="node" style="left: -13px; top: -199px; "><div class="node-caption" id="caption-72bdfb8b-d730-a45c-fa44-2ae2e724d3c0" node-type="caption" style="left: -62px; top: -21px; ">Paste</div><canvas style="left: 0px; top: 0px; " width="13" height="199" id="branch-72bdfb8b-d730-a45c-fa44-2ae2e724d3c0" node-type="branch"></canvas></div></div></div></div>
|
|
<script type="text/javascript">
|
|
var map = document.getElementById('map'),
|
|
drag, cursorX, cursorY;
|
|
|
|
function DragableObject(obj) {
|
|
this.obj = obj;
|
|
this.drag = false;
|
|
this.lastCusorX = null;
|
|
this.lastCusorY = null;
|
|
this.init();
|
|
}
|
|
|
|
DragableObject.prototype.init = function() {};
|
|
|
|
function getWinSize() {
|
|
return {
|
|
width : Math.max(document.documentElement.clientWidth,
|
|
document.documentElement.clientWidth),
|
|
height : Math.max(document.documentElement.clientHeight,
|
|
document.documentElement.clientHeight)
|
|
};
|
|
}
|
|
|
|
kampfer.events.addEvent(map, 'mousedown', function(event) {
|
|
//标记drag开始
|
|
drag = true;
|
|
|
|
//map坐标
|
|
//var x = parseInt(map.style.left),
|
|
// y = parseInt(map.style.top);
|
|
var x = map.offsetLeft,
|
|
y = map.offsetTop;
|
|
|
|
//光标到map边缘的距离
|
|
cursorX = event.pageX - x;
|
|
cursorY = event.pageY - y;
|
|
});
|
|
|
|
kampfer.events.addEvent(map, 'mousemove', function(event) {
|
|
if(drag) {
|
|
//计算新位置
|
|
var x = event.pageX - cursorX,
|
|
y = event.pageY - cursorY,
|
|
winSize = getWinSize();
|
|
|
|
//fix坐标
|
|
if(x > 0) {
|
|
x = 0;
|
|
} else if(x < winSize.width - 2000) {
|
|
x = winSize.width - 2000;
|
|
}
|
|
if(y > 0) {
|
|
y = 0;
|
|
} else if(y < winSize.height - 2000) {
|
|
y = winSize.height - 2000;
|
|
}
|
|
|
|
//设置map坐标
|
|
map.style.left = x + 'px';
|
|
map.style.top = y + 'px';
|
|
}
|
|
});
|
|
|
|
kampfer.events.addEvent(map, 'mouseup', function() {
|
|
drag = false;
|
|
});
|
|
|
|
/*
|
|
map.onmousedown = function(event) {};
|
|
|
|
map.onmousemove = function(event) {};
|
|
|
|
map.onmouseup = function() {};
|
|
*/
|
|
</script>
|
|
</body>
|
|
</html>
|