280 lines
19 KiB
C++
280 lines
19 KiB
C++
#ifndef ____editview_h__
|
|
#define ____editview_h__
|
|
|
|
#include "HTTPPage.h"
|
|
|
|
namespace http {
|
|
|
|
class __editview : public HTTPPage {
|
|
|
|
int processCommand(std::string request, core::TCPSession *session, HTTPSession *httpSession, HTTPRequest &httpRequest, std::stringstream &data) override {
|
|
|
|
data << " <div style=\"position: relative;\">" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"window1\" style=\"position: absolute; left: 0px; top: 0px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;\">" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <span style=\"font: 20px bebasneue;\">View Editor</span>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"mainpage\" " << std::endl;
|
|
data << " style=\"width: 600px; height: 600px; border: 1px solid black; position: relative; background: #ffffff;\" " << std::endl;
|
|
data << " onmousemove=\"mousemove(event); return true;\" " << std::endl;
|
|
data << " onmouseup=\"mouseup(); return true;\">" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <canvas id=\"grid\" width=\"600px\" height=\"600px\" style=\"position: absolute; left: 0px; top: 0px; alpha: 0.5; cursor: normal;\"></canvas>" << std::endl;
|
|
data << "" << std::endl;
|
|
|
|
data << "<div id=\"__workspace__\"></div>" << std::endl;
|
|
|
|
data << "" << std::endl;
|
|
data << " <div id=\"window3\" style=\"position:absolute; top: 235px; left: 610px;" << std::endl;
|
|
data << " border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;\">" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <span style=\"font: 20px bebasneue;\">OPTIONS</span>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div style=\"width: 150px; height: 300px; color: #000000; border: 1px solid black; position: relative; background: #ffffff;\" " << std::endl;
|
|
data << " onmousemove=\"mousemove(event); return true;\" " << std::endl;
|
|
data << " onmouseup=\"mouseup(); return true;\"> " << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"controls\">" << std::endl;
|
|
data << " <input type=\"checkbox\" name=\"grid\" onchange=\"showGrid = this.checked; drawGrid(); return true;\"><span style=\"font: 12px bebasneue; margin-bottom: 2px;\">Show Grid</span><br>" << std::endl;
|
|
data << " <input type=\"checkbox\" name=\"snaptogrid\" onchange=\"snapToGrid = this.checked; return true;\"><span style=\"font: 12px bebasneue; margin-bottom: 2px;\">Snap To Grid</span><br>" << std::endl;
|
|
data << " <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>" << std::endl;
|
|
data << " </div>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"itemparameters\" style=\"font: 12px bebasneue;\"></div>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"data\" style=\"font: 12px bebasneue;\">" << std::endl;
|
|
data << " <p>NO DATA</p>" << std::endl;
|
|
data << " </div>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " </div>" << std::endl;
|
|
data << " </div>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"window2\" style=\"position:absolute; top: 0px; left: 610px; border: 1pt solid black; display: inline-block; padding: 2px; background: #808080; color: #ffffff;\">" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <span style=\"font: 20px bebasneue;\">Toolbar</span>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <div id=\"toolbar\" " << std::endl;
|
|
data << " style=\"width: 80px; height: 200px; border: 1px solid black; position: relative; background: #ffffff;\" " << std::endl;
|
|
data << " onmousemove=\"mousemove(event); return true;\" " << std::endl;
|
|
data << " onmouseup=\"mouseup(); return true;\">" << std::endl;
|
|
data << " <button id=\"button1\" " << std::endl;
|
|
data << " style=\"width: 40px; height: 40px; border: 2px solid green; position: absolute;\"" << std::endl;
|
|
data << " onmousedown=\"mousedown(this, event); return true;\">Press</button>" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " </div>" << std::endl;
|
|
data << " </div>" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " </div> " << std::endl;
|
|
data << "" << std::endl;
|
|
data << " <script>" << std::endl;
|
|
data << " var mainpage;" << std::endl;
|
|
data << " var result;" << std::endl;
|
|
data << " var mousedownx;" << std::endl;
|
|
data << " var mousedowny;" << std::endl;
|
|
data << " var mouseDownWidth;" << std::endl;
|
|
data << " var mouseDownHeight;" << std::endl;
|
|
data << " var ismousedown = false;" << std::endl;
|
|
data << " var dragobject;" << std::endl;
|
|
data << " var dragHint = \"move\";" << std::endl;
|
|
data << " var data;" << std::endl;
|
|
data << " var showGrid = false;" << std::endl;
|
|
data << " var snapToGrid = false;" << std::endl;
|
|
data << " var gridSize = 10;" << std::endl;
|
|
data << " var selected;" << std::endl;
|
|
data << " var itemparameters;" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " mainpage = document.getElementById(\"mainpage\");" << std::endl;
|
|
data << " data = document.getElementById(\"data\");" << std::endl;
|
|
data << " itemparameters = document.getElementById(\"itemparameters\");" << std::endl;
|
|
data << " var gridsize = document.getElementById(\"gridsize\");" << std::endl;
|
|
data << " gridsize.value = gridSize;" << std::endl;
|
|
data << " drawGrid();" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " function drawGrid() {" << std::endl;
|
|
data << " var grid = document.getElementById(\"grid\");" << std::endl;
|
|
data << " var context = grid.getContext(\"2d\");" << std::endl;
|
|
data << " if(showGrid == true) {" << std::endl;
|
|
data << " context.clearRect(0,0,grid.width,grid.height);" << std::endl;
|
|
data << " context.globalAlpha = 0.2;" << std::endl;
|
|
data << " context.lineWidth = 0.5; " << std::endl;
|
|
data << " for(ix = 0; ix < grid.width; ix += gridSize) {" << std::endl;
|
|
data << " context.beginPath();" << std::endl;
|
|
data << " context.moveTo(ix, 0);" << std::endl;
|
|
data << " context.lineTo(ix, grid.height);" << std::endl;
|
|
data << " context.stroke();" << std::endl;
|
|
data << " context.beginPath();" << std::endl;
|
|
data << " context.moveTo(0, ix);" << std::endl;
|
|
data << " context.lineTo(grid.width, ix);" << std::endl;
|
|
data << " context.stroke(); " << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " context.clearRect(0,0,grid.width,grid.height);" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " function setDragHint(hint) {" << std::endl;
|
|
data << " dragHint = hint;" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " function getMouseX(e) {" << std::endl;
|
|
data << " return e.clientX - mainpage.offsetLeft - parseFloat(mainpage.style.borderWidth);" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " function getMouseY(e) {" << std::endl;
|
|
data << " return e.clientY - mainpage.offsetTop - parseFloat(mainpage.style.borderWidth);" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " function mousedown(obj, e) {" << std::endl;
|
|
data << " var mouseX = getMouseX(e);" << std::endl;
|
|
data << " var mouseY = getMouseY(e);" << std::endl;
|
|
data << " mousedownx = mouseX - obj.offsetLeft;" << std::endl;
|
|
data << " mousedowny = mouseY - obj.offsetTop;" << std::endl;
|
|
data << " mouseDownLeft = parseFloat(obj.style.left);" << std::endl;
|
|
data << " mouseDownTop = parseFloat(obj.style.top);" << std::endl;
|
|
data << " mouseDownWidth = parseFloat(obj.style.width);" << std::endl;
|
|
data << " mouseDownHeight = parseFloat(obj.style.height);" << std::endl;
|
|
data << " dragobject = obj;" << std::endl;
|
|
data << " selected = obj;" << std::endl;
|
|
data << " ismousedown = true;" << std::endl;
|
|
data << " displayParameters();" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " function mouseup() {" << std::endl;
|
|
data << " ismousedown = false;" << std::endl;
|
|
data << " dragobject = null;" << std::endl;
|
|
data << " console.log(mainpage.innerHTML);" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " function mousemove(e) {" << std::endl;
|
|
data << " var mouseX = getMouseX(e);" << std::endl;
|
|
data << " var mouseY = getMouseY(e);" << std::endl;
|
|
data << " if(ismousedown) {" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " if(dragHint == \"move\") {" << std::endl;
|
|
data << " if(snapToGrid == false) {" << std::endl;
|
|
data << " dragobject.style.left = (mouseX - mousedownx) + \"px\";" << std::endl;
|
|
data << " dragobject.style.top = (mouseY - mousedowny) + \"px\";" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " dragobject.style.left = (Math.round((mouseX - mousedownx) / gridSize) * gridSize) + \"px\";" << std::endl;
|
|
data << " dragobject.style.top = (Math.round((mouseY - mousedowny) / gridSize) * gridSize) + \"px\";" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " if((mouseX - mousedownx) < 0)" << std::endl;
|
|
data << " dragobject.style.left = \"0px\";" << std::endl;
|
|
data << " if((mouseY - mousedowny) < 0)" << std::endl;
|
|
data << " dragobject.style.top = \"0px\";" << std::endl;
|
|
data << " if((mouseX - mousedownx + parseFloat(dragobject.style.width)) > parseFloat(mainpage.style.width)) " << std::endl;
|
|
data << " dragobject.style.left = (mouseX - mousedownx) + \"px\"; " << std::endl;
|
|
data << " } else if(dragHint == \"rightbottomresize\") { " << std::endl;
|
|
data << " dragobject.style.width = (mouseX - mouseDownLeft) + \"px\";" << std::endl;
|
|
data << " dragobject.style.height = (mouseY - mouseDownTop) + \"px\";" << std::endl;
|
|
data << " } else if(dragHint == \"rightresize\") { " << std::endl;
|
|
data << " if(snapToGrid == false) {" << std::endl;
|
|
data << " dragobject.style.width = (mouseX - mouseDownLeft) + \"px\"; " << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " dragobject.style.width = (Math.round((mouseX - mouseDownLeft) / gridSize) * gridSize) + \"px\"; " << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " } else if(dragHint == \"bottomresize\") { " << std::endl;
|
|
data << " if(snapToGrid == false) {" << std::endl;
|
|
data << " dragobject.style.height = (mouseY - mouseDownTop) + \"px\";" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " dragobject.style.height = (Math.round((mouseY - mouseDownTop) / gridSize) * gridSize) + \"px\";" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " } else if(dragHint == \"leftresize\") { " << std::endl;
|
|
data << " dragobject.style.left = mouseX + \"px\";" << std::endl;
|
|
data << " dragobject.style.width = (mouseDownWidth + (mouseDownLeft - mouseX)) + \"px\";" << std::endl;
|
|
data << " } else if(dragHint == \"topresize\") { " << std::endl;
|
|
data << " dragobject.style.top = mouseY + \"px\";" << std::endl;
|
|
data << " dragobject.style.height = (mouseDownHeight + (mouseDownTop - mouseY)) + \"px\";" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " data.innerHTML = \"<p>\" + dragobject.nodeName + \"<br>\" + " << std::endl;
|
|
data << " \"Action: \" + dragHint + \"<br>\" +" << std::endl;
|
|
data << " \"MouseLocation: \" + mouseX + \":\" + mouseY + \"<br>\" +" << std::endl;
|
|
data << " \"MouseOver Location: \" + (mouseX - dragobject.offsetLeft) + \":\" + (mouseY - dragobject.offsetTop) + \"<br>\" + " << std::endl;
|
|
data << " \"Location: \" + dragobject.style.left + \":\" + dragobject.style.top + \"<br>\" + " << std::endl;
|
|
data << " \"Size: \" + dragobject.style.width + \":\" + dragobject.style.height + \"<br>\" + " << std::endl;
|
|
data << " \"</p>\";" << std::endl;
|
|
data << " " << std::endl;
|
|
data << "" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " var mouseabove = document.elementFromPoint(mouseX + mainpage.offsetLeft, mouseY + mainpage.offsetTop);" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " if((mouseabove.id != \"mainpage\") && (mouseabove.id != \"grid\")) {" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " data.innerHTML = \"<p>\" + mouseabove.nodeName + \"<br>\" + " << std::endl;
|
|
data << " \"Action: \" + dragHint + \"<br>\" +" << std::endl;
|
|
data << " \"MouseLocation: \" + mouseX + \":\" + mouseY + \"<br>\" +" << std::endl;
|
|
data << " \"MouseOver Location: \" + (mouseX - mouseabove.offsetLeft) + \":\" + (mouseY - mouseabove.offsetTop) + \"<br>\" + " << std::endl;
|
|
data << " \"Location: \" + mouseabove.style.left + \":\" + mouseabove.style.top + \"<br>\" + " << std::endl;
|
|
data << " \"Size: \" + mouseabove.style.width + \":\" + mouseabove.style.height + \"<br>\" + " << std::endl;
|
|
data << " \"</p>\";" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " if((mouseabove.nodeName == \"DIV\") || " << std::endl;
|
|
data << " (mouseabove.nodeName == \"IMG\") || " << std::endl;
|
|
data << " (mouseabove.nodeName == \"BUTTON\") ||" << std::endl;
|
|
data << " (mouseabove.nodeName == \"INPUT\") ||" << std::endl;
|
|
data << " (mouseabove.nodeName == \"SPAN\")) {" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " if((parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) && " << std::endl;
|
|
data << " (parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"nwse-resize\";" << std::endl;
|
|
data << " dragHint = \"rightbottomresize\"; " << std::endl;
|
|
data << " } else if((parseFloat(mouseabove.style.left) <= (mouseX - mouseabove.offsetLeft)) && " << std::endl;
|
|
data << " ((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop))) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"nesw-resize\";" << std::endl;
|
|
data << " dragHint = \"righttopresize\"; " << std::endl;
|
|
data << " } else if(((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) && " << std::endl;
|
|
data << " (parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop))) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"nesw-resize\";" << std::endl;
|
|
data << " dragHint = \"leftbottomresize\"; " << std::endl;
|
|
data << " } else if(parseFloat(mouseabove.style.width) <= (mouseX - mouseabove.offsetLeft)) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"ew-resize\";" << std::endl;
|
|
data << " dragHint = \"rightresize\";" << std::endl;
|
|
data << " } else if(parseFloat(mouseabove.style.height) <= (mouseY - mouseabove.offsetTop)) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"ns-resize\";" << std::endl;
|
|
data << " dragHint = \"bottomresize\";" << std::endl;
|
|
data << " } else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseX - mouseabove.offsetLeft)) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"ew-resize\";" << std::endl;
|
|
data << " dragHint = \"leftresize\";" << std::endl;
|
|
data << " } else if((parseFloat(mouseabove.style.borderWidth) + 2) >= (mouseY - mouseabove.offsetTop)) {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"ns-resize\";" << std::endl;
|
|
data << " dragHint = \"topresize\";" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"move\";" << std::endl;
|
|
data << " dragHint = \"move\";" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"default\";" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " } else {" << std::endl;
|
|
data << " mouseabove.style.cursor = \"default\";" << std::endl;
|
|
data << " dragHint = \"\";" << std::endl;
|
|
data << " data.innerHTML = \"<p></p>\";" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " displayParameters();" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << " " << std::endl;
|
|
data << " function displayParameters() {" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " itemparameters.innerHTML = \"<p>\" + selected.nodeName + \": \" + selected.id + \"<br>\" + " << std::endl;
|
|
data << " \"Location: \" + selected.style.left + \":\" + selected.style.top + \"<br>\" + " << std::endl;
|
|
data << " \"Size: \" + selected.style.width + \":\" + selected.style.height + \"<br>\" + " << std::endl;
|
|
data << " \"</p>\";" << std::endl;
|
|
data << "" << std::endl;
|
|
data << " }" << std::endl;
|
|
data << "</script>" << std::endl;
|
|
|
|
httpRequest.response.addHeader("Content-Type", "script/javascript");
|
|
|
|
return 0;
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
#endif
|