Add deletion and duplication of selection

client-data/tools/hand/delete.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Instagram icon</title>
+ <g transform="matrix(2.3668 2.3668 -2.3668 2.3668 13.98 -131.11)" fill="#ff002d">
+  <g transform="translate(-.5821 .16648)" fill="#f00">
+   <rect transform="scale(1,-1)" x="30.056" y="-33.755" width=".6819" height="6.5387" ry=".34186"/>
+   <rect transform="matrix(0,1,1,0,0,0)" x="30.145" y="27.128" width=".6819" height="6.5387" ry=".34186"/>
+  </g>
+ </g>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:title>Delete icon</dc:title>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+</svg>

client-data/tools/hand/duplicate.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg role="img" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <title>Instagram icon</title>
+ <path d="m7.1549 7.1542v-3.5315c0-0.65725 0.52912-1.1864 1.1864-1.1864h11.991c0.65725 0 1.1864 0.52912 1.1864 1.1864v12.036c0 0.65725-0.52912 1.1864-1.1864 1.1864h-3.4867" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".3"/>
+ <rect x="2.481" y="7.155" width="14.364" height="14.409" ry="1.1864" fill="none" stroke="#000" stroke-linejoin="round" stroke-width=".3"/>
+ <g transform="translate(-20.734 -16.126)">
+  <rect transform="scale(1,-1)" x="30.056" y="-33.755" width=".6819" height="6.5387" ry=".34186"/>
+  <rect transform="matrix(0,1,1,0,0,0)" x="30.145" y="27.128" width=".6819" height="6.5387" ry=".34186"/>
+ </g>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:title>Duplicate icon</dc:title>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+</svg>

client-data/tools/hand/hand.js

@@ -55,6 +55,40 @@
 		return target || el;
 	}
 
+	function deleteSelection() {
+		var msgs = selected_els.map(function(el) {
+                return ({
+                    "type": "delete",
+                    "id": el.id
+                });
+            });
+		var data = {
+			_children: msgs
+		}
+		Tools.drawAndSend(data);
+		selected_els = [];
+	}
+
+	function duplicateSelection() {
+		if (!(selectorState == selectorStates.pointing)
+			|| (selected_els.length == 0)) return;
+		var msgs = [];
+		var newids = [];
+		for (var i=0; i<selected_els.length; i++) {
+			var id = selected_els[i].id;
+			msgs[i] = {
+				type: "copy",
+				id: id,
+				newid: Tools.generateUID(id[0])
+			};
+			newids[i] = id;
+		}
+		Tools.drawAndSend({_children: msgs});
+		selected_els = newids.map(function(id) {
+                return Tools.svg.getElementById(id);
+            });
+	}
+
 	function createSelectorRect() {
 		var shape = Tools.createSVGElement("rect");
 		shape.id = "selectionRect";
@@ -181,6 +215,15 @@
 					tmatrix.e = data.deltax || 0;
 					tmatrix.f = data.deltay || 0;
 					break;
+				case "copy":
+					var newElement = Tools.svg.getElementById(data.id).cloneNode(true);
+					newElement.id = data.newid;
+					Tools.drawingArea.appendChild(newElement);
+				    break;
+				case "delete":
+					data.tool = "Eraser";
+					messageForTool(data);
+					break;
 				default:
 					throw new Error("Mover: 'move' instruction with unknown type. ", data);
 			}
@@ -251,8 +294,28 @@
 		selected = null;
 	}
 
+	function deleteShortcut(e) {
+		if (e.key == "Delete" &&
+			!e.target.matches("input[type=text], textarea"))
+			deleteSelection();
+	}
+
+	function duplicateShortcut(e) {
+		if (e.key == "d" &&
+			!e.target.matches("input[type=text], textarea"))
+			duplicateSelection();
+	}
+
 	function switchTool() {
 		selected = null;
+		if (handTool.secondary.active) {
+			window.addEventListener("keydown", deleteShortcut);
+			window.addEventListener("keydown", duplicateShortcut);
+		}
+		else {
+			window.removeEventListener("keydown", deleteShortcut);
+			window.removeEventListener("keydown", duplicateShortcut);
+		}
 	}
 
 	var handTool = { //The new tool

server/boardData.js

@@ -100,6 +100,28 @@ class BoardData {
     this.delaySave();
   }
 
+  /** Copy elements in the board
+   * @param {string} id - Identifier of the data to copy.
+   * @param {BoardElem} data - Object containing the id of the new copied element.
+   */
+  copy(id, data) {
+    var obj = this.board[id];
+    var newid = data.newid;
+    if (obj) {
+      var newobj = JSON.parse(JSON.stringify(obj));
+      newobj.id = newid;
+      if (newobj._children) {
+	for (var child of newobj._children) {
+	    child.parent = newid;
+	}
+      }
+      this.board[newid] = newobj;
+    } else  {
+      log("Copied object does not exist in board.", {object: id});
+    }
+    this.delaySave();
+  }
+
   /** Removes data from the board
    * @param {string} id - Identifier of the data to delete.
    */
@@ -137,6 +159,9 @@ class BoardData {
       case "update":
         if (id) this.update(id, message);
         break;
+      case "copy":
+        if (id) this.copy(id, message);
+        break;
       case "child":
         this.addChild(message.parent, message);
         break;