307 lines
12 KiB
JavaScript
307 lines
12 KiB
JavaScript
|
|
|
|
var mainpage;
|
|
var result;
|
|
var mousedownx;
|
|
var mousedowny;
|
|
var mouseDownWidth;
|
|
var mouseDownHeight;
|
|
var ismousedown = false;
|
|
var dragobject;
|
|
var dragHint = "move";
|
|
var data;
|
|
var showGrid = false;
|
|
var snapToGrid = false;
|
|
var gridSize = 10;
|
|
var selected;
|
|
var itemparameters;
|
|
|
|
function init() {
|
|
mainpage = document.getElementById("mainpage");
|
|
data = document.getElementById("data");
|
|
itemparameters = document.getElementById("itemparameters");
|
|
var gridsize = document.getElementById("gridsize");
|
|
gridsize.value = gridSize;
|
|
drawGrid();
|
|
}
|
|
|
|
function drawGrid() {
|
|
var grid = document.getElementById("grid");
|
|
var context = grid.getContext("2d");
|
|
if(showGrid == true) {
|
|
context.clearRect(0,0,grid.width,grid.height);
|
|
context.globalAlpha = 0.2;
|
|
context.lineWidth = 0.5;
|
|
for(ix = 0; ix < grid.width; ix += gridSize) {
|
|
context.beginPath();
|
|
context.moveTo(ix, 0);
|
|
context.lineTo(ix, grid.height);
|
|
context.stroke();
|
|
context.beginPath();
|
|
context.moveTo(0, ix);
|
|
context.lineTo(grid.width, ix);
|
|
context.stroke();
|
|
}
|
|
} else {
|
|
context.clearRect(0,0,grid.width,grid.height);
|
|
}
|
|
}
|
|
|
|
function setDragHint(hint) {
|
|
dragHint = hint;
|
|
}
|
|
|
|
function getMouseX(e) {
|
|
return e.clientX - mainpage.offsetLeft - parseFloat(mainpage.style.borderWidth);
|
|
}
|
|
|
|
function getMouseY(e) {
|
|
return e.clientY - mainpage.offsetTop - parseFloat(mainpage.style.borderWidth);
|
|
}
|
|
|
|
function mousedown(obj, e) {
|
|
var mouseX = getMouseX(e);
|
|
var mouseY = getMouseY(e);
|
|
mousedownx = mouseX - obj.offsetLeft;
|
|
mousedowny = mouseY - obj.offsetTop;
|
|
mouseDownLeft = parseFloat(obj.style.left);
|
|
mouseDownTop = parseFloat(obj.style.top);
|
|
mouseDownWidth = parseFloat(obj.style.width);
|
|
mouseDownHeight = parseFloat(obj.style.height);
|
|
dragobject = obj;
|
|
selected = obj;
|
|
ismousedown = true;
|
|
displayParameters();
|
|
}
|
|
|
|
function mouseup() {
|
|
ismousedown = false;
|
|
dragobject = null;
|
|
console.log(mainpage.innerHTML);
|
|
}
|
|
|
|
function mousemove(e) {
|
|
var mouseX = getMouseX(e);
|
|
var mouseY = getMouseY(e);
|
|
if(ismousedown) {
|
|
|
|
if(dragHint == "move") {
|
|
if(snapToGrid == false) {
|
|
dragobject.style.left = (mouseX - mousedownx) + "px";
|
|
dragobject.style.top = (mouseY - mousedowny) + "px";
|
|
} else {
|
|
dragobject.style.left = (Math.round((mouseX - mousedownx) / gridSize) * gridSize) + "px";
|
|
dragobject.style.top = (Math.round((mouseY - mousedowny) / gridSize) * gridSize) + "px";
|
|
}
|
|
if((mouseX - mousedownx) < 0)
|
|
dragobject.style.left = "0px";
|
|
if((mouseY - mousedowny) < 0)
|
|
dragobject.style.top = "0px";
|
|
if((mouseX - mousedownx + parseFloat(dragobject.style.width)) > parseFloat(mainpage.style.width))
|
|
dragobject.style.left = (mouseX - mousedownx) + "px";
|
|
} else if(dragHint == "rightbottomresize") {
|
|
dragobject.style.width = (mouseX - mouseDownLeft) + "px";
|
|
dragobject.style.height = (mouseY - mouseDownTop) + "px";
|
|
} else if(dragHint == "rightresize") {
|
|
if(snapToGrid == false) {
|
|
dragobject.style.width = (mouseX - mouseDownLeft) + "px";
|
|
} else {
|
|
dragobject.style.width = (Math.round((mouseX - mouseDownLeft) / gridSize) * gridSize) + "px";
|
|
}
|
|
} else if(dragHint == "bottomresize") {
|
|
if(snapToGrid == false) {
|
|
dragobject.style.height = (mouseY - mouseDownTop) + "px";
|
|
} else {
|
|
dragobject.style.height = (Math.round((mouseY - mouseDownTop) / gridSize) * gridSize) + "px";
|
|
}
|
|
} else if(dragHint == "leftresize") {
|
|
dragobject.style.left = mouseX + "px";
|
|
dragobject.style.width = (mouseDownWidth + (mouseDownLeft - mouseX)) + "px";
|
|
} else if(dragHint == "topresize") {
|
|
dragobject.style.top = mouseY + "px";
|
|
dragobject.style.height = (mouseDownHeight + (mouseDownTop - mouseY)) + "px";
|
|
}
|
|
|
|
data.innerHTML = "<p>" + dragobject.nodeName + "<br>" +
|
|
"Action: " + dragHint + "<br>" +
|
|
"MouseLocation: " + mouseX + ":" + mouseY + "<br>" +
|
|
"MouseOver Location: " + (mouseX - dragobject.offsetLeft) + ":" + (mouseY - dragobject.offsetTop) + "<br>" +
|
|
"Location: " + dragobject.style.left + ":" + dragobject.style.top + "<br>" +
|
|
"Size: " + dragobject.style.width + ":" + dragobject.style.height + "<br>" +
|
|
"</p>";
|
|
|
|
|
|
} else {
|
|
var mouseabove = document.elementFromPoint(mouseX + mainpage.offsetLeft, mouseY + mainpage.offsetTop);
|
|
|
|
if((mouseabove.id != "mainpage") && (mouseabove.id != "grid")) {
|
|
|
|
data.innerHTML = "<p>" + mouseabove.nodeName + "<br>" +
|
|
"Action: " + dragHint + "<br>" +
|
|
"MouseLocation: " + mouseX + ":" + mouseY + "<br>" +
|
|
"MouseOver Location: " + (mouseX - mouseabove.offsetLeft) + ":" + (mouseY - mouseabove.offsetTop) + "<br>" +
|
|
"Location: " + mouseabove.style.left + ":" + mouseabove.style.top + "<br>" +
|
|
"Size: " + mouseabove.style.width + ":" + mouseabove.style.height + "<br>" +
|
|
"</p>";
|
|
|
|
if((mouseabove.nodeName == "DIV") ||
|
|
(mouseabove.nodeName == "IMG") ||
|
|
(mouseabove.nodeName == "BUTTON") ||
|
|
(mouseabove.nodeName == "INPUT") ||
|
|
(mouseabove.nodeName == "SPAN")) {
|
|
|
|
if((parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) &&
|
|
(parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {
|
|
mouseabove.style.cursor = "nwse-resize";
|
|
dragHint = "rightbottomresize";
|
|
} else if((parseFloat(mouseabove.style.left) <= (mouseX - mouseabove.offsetLeft)) &&
|
|
((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop))) {
|
|
mouseabove.style.cursor = "nesw-resize";
|
|
dragHint = "righttopresize";
|
|
} else if(((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) &&
|
|
(parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {
|
|
mouseabove.style.cursor = "nesw-resize";
|
|
dragHint = "leftbottomresize";
|
|
} else if(parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) {
|
|
mouseabove.style.cursor = "ew-resize";
|
|
dragHint = "rightresize";
|
|
} else if(parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop)) {
|
|
mouseabove.style.cursor = "ns-resize";
|
|
dragHint = "bottomresize";
|
|
} else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) {
|
|
mouseabove.style.cursor = "ew-resize";
|
|
dragHint = "leftresize";
|
|
} else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop)) {
|
|
mouseabove.style.cursor = "ns-resize";
|
|
dragHint = "topresize";
|
|
} else {
|
|
mouseabove.style.cursor = "move";
|
|
dragHint = "move";
|
|
}
|
|
} else {
|
|
mouseabove.style.cursor = "default";
|
|
}
|
|
} else {
|
|
mouseabove.style.cursor = "default";
|
|
dragHint = "";
|
|
data.innerHTML = "<p></p>";
|
|
}
|
|
}
|
|
displayParameters();
|
|
}
|
|
|
|
function displayParameters() {
|
|
|
|
itemparameters.innerHTML = "<p>" + selected.nodeName + ": " + selected.id + "<br>" +
|
|
"Location: " + selected.style.left + ":" + selected.style.top + "<br>" +
|
|
"Size: " + selected.style.width + ":" + selected.style.height + "<br>" +
|
|
"</p>";
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@font-face {
|
|
font-family: bebasneue;
|
|
src: url('http://68.108.72.78:8080/fonts/BebasNeue.otf');
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body ondragstart="return false;"
|
|
ondrop="return false;"
|
|
onload="init(); return true;">
|
|
|
|
<div style="position: relative;">
|
|
|
|
<div id="window1" style="position: absolute; left: 0px; top: 0px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;">
|
|
|
|
<span style="font: 20px bebasneue;">View Editor</span>
|
|
|
|
<div id="mainpage"
|
|
style="width: 600px; height: 600px; border: 1px solid black; position: relative; background: #ffffff;"
|
|
onmousemove="mousemove(event); return true;"
|
|
onmouseup="mouseup(); return true;">
|
|
|
|
<canvas id="grid" width="600px" height="600px" style="position: absolute; left: 0px; top: 0px; alpha: 0.5; cursor: normal;"></canvas>
|
|
|
|
<img id="img1" style="position: absolute; user-select: none;" onmousedown="mousedown(this, event); return true;" src="images/barant_web_logo.png" width="336" height="69">
|
|
|
|
<img id="img2" style="position: absolute; user-select: none;" onmousedown="mousedown(this, event); return true;" src="images/barant_web_logo.png" width="336" height="69">
|
|
|
|
<button id="button1"
|
|
style="width: 100px; height: 50px; border: 2px solid green; position: absolute;"
|
|
onmousedown="mousedown(this, event); return true;">Press</button>
|
|
|
|
<div id="div1"
|
|
style="width: 100px; height: 50px; border: 2px solid green; position: absolute;"
|
|
onmousedown="mousedown(this, event); return true;">
|
|
</div>
|
|
|
|
<div id="div2"
|
|
style="width: 100px; height: 50px; border: 0px; position: absolute; background: #404040;"
|
|
onmousedown="mousedown(this, event); return true;">
|
|
</div>
|
|
|
|
<div id="div3"
|
|
style="width: 100px; height: 100px; border: 10px solid red; position: absolute; background: #ffff80;"
|
|
onmousedown="mousedown(this, event); return true;">
|
|
</div>
|
|
|
|
<span id="text1" onmousedown="mousedown(this, event); return true;"
|
|
style="position: absolute; user-select: none; border: 1pt solid black; background: #8080c0;">This is a text label</span>
|
|
|
|
<input id="input1" style="position: absolute;" onmousedown="mousedown(this, event); return true;" type="input" name="drag5" size="50">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="window3" style="position:absolute; top: 235px; left: 610px;
|
|
border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;">
|
|
|
|
<span style="font: 20px bebasneue;">OPTIONS</span>
|
|
|
|
<div style="width: 150px; height: 300px; color: #000000; border: 1px solid black; position: relative; background: #ffffff;"
|
|
onmousemove="mousemove(event); return true;"
|
|
onmouseup="mouseup(); return true;">
|
|
|
|
<div id="controls">
|
|
<input type="checkbox" name="grid" onchange="showGrid = this.checked; drawGrid(); return true;"><span style="font: 12px bebasneue; margin-bottom: 2px;">Show Grid</span><br>
|
|
<input type="checkbox" name="snaptogrid" onchange="snapToGrid = this.checked; return true;"><span style="font: 12px bebasneue; margin-bottom: 2px;">Snap To Grid</span><br>
|
|
<span style="font: 12px bebasneue; margin-bottom: 2px;">Grid Size: </span><input type="text" name="gridsize" id="gridsize" style="width: 20px;" size="3" onchange="gridSize = parseInt(this.value); drawGrid(); return true;"><br>
|
|
</div>
|
|
|
|
<div id="itemparameters" style="font: 12px bebasneue;"></div>
|
|
|
|
<div id="data" style="font: 12px bebasneue;">
|
|
<p>NO DATA</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="window2" style="position:absolute; top: 0px; left: 610px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;">
|
|
|
|
<span style="font: 20px bebasneue;">Toolbar</span>
|
|
|
|
<div id="toolbar"
|
|
style="width: 80px; height: 200px; border: 1px solid black; position: relative; background: #ffffff;"
|
|
onmousemove="mousemove(event); return true;"
|
|
onmouseup="mouseup(); return true;">
|
|
<button id="button1"
|
|
style="width: 40px; height: 40px; border: 2px solid green; position: absolute;"
|
|
onmousedown="mousedown(this, event); return true;">Press</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
</html> |