From 33236d6069b178cdd22e207d68c4a7a2c660c39c Mon Sep 17 00:00:00 2001 From: MarkG Date: Wed, 8 Apr 2020 20:40:47 +0200 Subject: [PATCH] added selector tool to move objects --- client-data/board.html | 1 + client-data/tools/selector/selector.js | 148 +++++++++++++++++++++++++ server/boardData.js | 25 +++++ server/sockets.js | 3 + 4 files changed, 177 insertions(+) create mode 100644 client-data/tools/selector/selector.js diff --git a/client-data/board.html b/client-data/board.html index 2af0f3c7..a09b969e 100644 --- a/client-data/board.html +++ b/client-data/board.html @@ -85,6 +85,7 @@ + diff --git a/client-data/tools/selector/selector.js b/client-data/tools/selector/selector.js new file mode 100644 index 00000000..88f9ab9d --- /dev/null +++ b/client-data/tools/selector/selector.js @@ -0,0 +1,148 @@ +/** + * WHITEBOPHIR + ********************************************************* + * @licstart The following is the entire license notice for the + * JavaScript code in this page. + * + * Copyright (C) 2013 Ophir LOJKINE + * + * + * The JavaScript code in this page is free software: you can + * redistribute it and/or modify it under the terms of the GNU + * General Public License (GNU GPL) as published by the Free Software + * Foundation, either version 3 of the License, or (at your option) + * any later version. The code is distributed WITHOUT ANY WARRANTY; + * without even the implied warranty of MERCHANTABILITY or FITNESS + * FOR A PARTICULAR PURPOSE. See the GNU GPL for more details. + * + * As additional permission under GNU GPL version 3 section 7, you + * may distribute non-source (e.g., minimized or compacted) forms of + * that code without the copy of the GNU GPL normally required by + * section 4, provided you include this license notice and a URL + * through which recipients can access the Corresponding Source. + * + * @licend + */ +(function selector() { //Code isolation + + var dragging = false; + let select = new Map(); + var oldX = 0; + var oldY = 0; + + var svg = Tools.svg; + + function pressed(x, y, evt) { + //Prevent the press from being interpreted by the browser + evt.preventDefault(); + dragging = true; + var target = evt.target; + if (evt.type === "touchmove") { + // ... the target of touchmove events is the element that was initially touched, + // not the one **currently** being touched + var touch = evt.touches[0]; + target = document.elementFromPoint(touch.clientX, touch.clientY); + } + if (target !== Tools.svg) { + //target.setAttribute("stroke", "#00FF00"); + //target.setAttribute("stroke-dasharray", "5.5"); + var object = svg.getElementById(target.id); + select.set(target.id, object); + } + oldX = x; + oldY = y; + move(x, y, evt); + } + function getPositionOfSvgElement(v) { + var x; + var y; + switch (v.tagName) { + case "line": + x = v.x1.baseVal.value; + y = v.y2.baseVal.value; + break; + case "rect": + x = v.x.baseVal.value; + y = v.y.baseVal.value; + break; + case "text": + x = v.x.baseVal[0].value; + y = v.y.baseVal[0].value; + break; + case "path": + break; + default: + console.log("Move not implemented for this object type: " + v.type); + break; + } + return [x, y]; + } + + function translateSvgElement(v, difX, difY) { + switch (v.tagName) { + case "line": + v.x1.baseVal.value += difX; + v.y1.baseVal.value += difY; + v.x2.baseVal.value += difX; + v.y2.baseVal.value += difY; + break; + case "rect": + v.x.baseVal.value += difX; + v.y.baseVal.value += difY; + break; + case "text": + v.x.baseVal[0].value += difX; + v.y.baseVal[0].value += difY; + break; + case "path": + break; + default: + console.log("Move not implemented for this object type: " + v.type); + break; + } + } + + + const msg = { + "type": "modify", + "id": "", + 'x': 0, + 'y': 0 + }; + function move(x, y, evt) { + const difX = x - oldX; + const difY = y - oldY; + for (let [k, v] of select) { + msg.id = k; + msg.x = difX; + msg.y = difY; + translateSvgElement(v, difX, difY); + Tools.drawAndSend(msg); + } + oldX = x; + oldY = y; + } + + function released() { + dragging = false; + select.clear(); + } + + function draw(data) { + // no need to draw + } + + Tools.add({ //The new tool + "name": "Selector", + "icon": "↖", + "shortcut": "s", + "listeners": { + "press": pressed, + "move": move, + "release": released, + }, + "draw": draw, + "mouseCursor": "auto", + }); + +})(); //End of code isolation diff --git a/server/boardData.js b/server/boardData.js index 91e9c73d..438f0b94 100644 --- a/server/boardData.js +++ b/server/boardData.js @@ -102,6 +102,31 @@ BoardData.prototype.update = function (id, data, create) { this.delaySave(); }; +BoardData.prototype.modify = function (id, data) { + // get object to modify + var obj = this.board[id]; + switch (obj.type) { + case "line": + // path + break; + case "rect": + case "straight": + obj.x += data.x; + obj.y += data.y; + obj.x2 += data.x; + obj.y2 += data.y; + break; + case "new": + // oddly this seems to be text + obj.x += data.x; + obj.y += data.y; + break; + default: + break; + } + this.delaySave(); +}; + /** Removes data from the board * @param {string} id - Identifier of the data to delete. */ diff --git a/server/sockets.js b/server/sockets.js index 0f8286a3..b1c38996 100644 --- a/server/sockets.js +++ b/server/sockets.js @@ -132,6 +132,9 @@ function saveHistory(boardName, message) { case "child": board.addChild(message.parent, message); break; + case "modify": + if (id) board.modify(id, message); + break; default: //Add data if (!id) throw new Error("Invalid message: ", message); board.set(id, message);