#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 = \"\" + dragobject.nodeName + \"
\" + "
" \"Action: \" + dragHint + \"
\" +"
" \"MouseLocation: \" + mouseX + \":\" + mouseY + \"
\" +"
" \"MouseOver Location: \" + (mouseX - dragobject.offsetLeft) + \":\" + (mouseY - dragobject.offsetTop) + \"
\" + "
" \"Location: \" + dragobject.style.left + \":\" + dragobject.style.top + \"
\" + "
" \"Size: \" + dragobject.style.width + \":\" + dragobject.style.height + \"
\" + "
" \"
\";"
" "
""
" } else {"
" var mouseabove = document.elementFromPoint(mouseX + mainpage.offsetLeft, mouseY + mainpage.offsetTop);"
""
" if((mouseabove.id != \"mainpage\") && (mouseabove.id != \"grid\")) {"
" "
" data.innerHTML = \"\" + mouseabove.nodeName + \"
\" + "
" \"Action: \" + dragHint + \"
\" +"
" \"MouseLocation: \" + mouseX + \":\" + mouseY + \"
\" +"
" \"MouseOver Location: \" + (mouseX - mouseabove.offsetLeft) + \":\" + (mouseY - mouseabove.offsetTop) + \"
\" + "
" \"Location: \" + mouseabove.style.left + \":\" + mouseabove.style.top + \"
\" + "
" \"Size: \" + mouseabove.style.width + \":\" + mouseabove.style.height + \"
\" + "
" \"
\";"
" "
" 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 = \"\";"
" mouseabove.style.cursor = \"default\";"
" dragHint = \"\";"
" }"
" }"
" displayParameters();"
" }"
" "
" function displayParameters() {"
""
" itemparameters.innerHTML = \"\" + selected.nodeName + \": \" + selected.id + \"
\" + "
" \"Location: \" + selected.style.left + \":\" + selected.style.top + \"
\" + "
" \"Size: \" + selected.style.width + \":\" + selected.style.height + \"
\" + "
" \"
\";"
""
" }";
p.httpRequest.response.addHeader(coreutils::IMFHeader("Content-Type", "script/javascript"));
return 1;
}
};
}
#endif