220 lines
12 KiB
C++
220 lines
12 KiB
C++
#ifndef ____editview_js_h__
|
|
#define ____editview_js_h__
|
|
|
|
#include "HTTPPage.h"
|
|
|
|
namespace http {
|
|
|
|
class __editview_js : public HTTPPage {
|
|
|
|
int page(HTTPParameters &p) override {
|
|
|
|
p.data << " 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;"
|
|
""
|
|
" mainpage = document.getElementById(\"mainpage\");"
|
|
" workspace = document.getElementById(\"__workspace__\");"
|
|
" 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(workspace.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 {"
|
|
" data.innerHTML = \"<p></p>\";"
|
|
" mouseabove.style.cursor = \"default\";"
|
|
" dragHint = \"\";"
|
|
" }"
|
|
" }"
|
|
" 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>\";"
|
|
""
|
|
" }";
|
|
|
|
p.httpRequest.response.addHeader(coreutils::IMFHeader("Content-Type", "script/javascript"));
|
|
|
|
return 1;
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
#endif
|