lines around it when we pick it up

diff --git a/src/bin/server.rs b/src/bin/server.rs
index 1fbb5c461e8e1a33ca6582af1aa4251987a1c02f..7aa106373d43eed6f184b2914362f98d91284a4a 100644 (file)
--- a/src/bin/server.rs
+++ b/src/bin/server.rs
@@ -91,7 +91,7 @@ fn session(form : Json<SessionForm>) -> Result<Template,RE> {
                            {}
                           </g>
                         "##,
-                        pri.id_piece(),
+                        pri.id_select(),
                         pr.p.svg_select(&pri)));
       defs.push(pr.p.svg_x_defs(&pri));
 

diff --git a/templates/script.js b/templates/script.js
index 4fdef4b49335a4b9f2942399476c8eec06c89476..d0837436dd393e5d5a835ffad2ae7a9414319a70 100644 (file)
--- a/templates/script.js
+++ b/templates/script.js
@@ -105,10 +105,22 @@ function drag_mousedown(e) {
 
 function set_grab(elt, owner) {
   elt.dataset.g = owner;
+  var [p, piece] = piece_cleanup_grab(elt);
+  var nelem = document.createElementNS(svg_ns,'use');
+  nelem.setAttributeNS(null,'href','#select'+p);
+  piece.appendChild(nelem);
 }
-
 function set_ungrab(elt) {
   elt.dataset.g = "";
+  piece_cleanup_grab(elt);
+}
+function piece_cleanup_grab(elt) {
+  var p = elt.dataset.p;
+  var piece = document.getElementById('piece'+p);
+  while (piece.children.length > 1) {
+    piece.lastElementChild.remove();
+  }
+  return [p, piece];
 }
 
 function drag_mousemove(e) {
@@ -172,6 +184,7 @@ function startup() {
   status_node.innerHTML = 'js-done'
   dragthresh = 5;
   space = document.getElementById('space');
+  svg_ns = space.getAttribute('xmlns');
 
   es = new EventSource("/_/updates/"+token+"/"+clientid);
   es.onmessage = function(event) {