dashboard: double-click & drag also toggles pin

1 files changed, 18 insertions, 4 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index db11345..7ac33fe 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -1359,16 +1359,23 @@ graph.addEventListener("pointerdown", event => {
 graph.addEventListener("dragstart", event => event.preventDefault());
 // A node: dragged, it moves, held where the pointer is (`grabbed`) until let go; a click,
 // it is in focus; a second one soon after pins it where it is (`pinned`: the layout
-// leaves it there), or lets it go if pinned (`unpin`). Told apart here: the map holds
-// the pointer while pressed (`pressing`), so the browser's clicks and double-clicks
-// go to the map, not the node.
+// leaves it there), or lets it go if pinned (`unpin`), and so does a second press soon
+// after that drags it (pinned where it's dropped). Told apart here: the map holds the
+// pointer while pressed (`pressing`), so the browser's clicks and double-clicks go to
+// the map, not the node.
 let lastNodeClick = { id: null, at: 0 };
 const DOUBLE_CLICK_MS = 400;
 let grabbed = null;
+// Of the press under way on a node: whether it's the second of a double-click, and
+// whether it moved the node.
+let secondPress = false, dragMoved = false;
 function drag(event, id) {
   const p = positions.get(id), from = { x: p.x, y: p.y };
   grabbed = id;
+  secondPress = lastNodeClick.id === id && performance.now() - lastNodeClick.at < DOUBLE_CLICK_MS;
+  dragMoved = false;
   pressing(event, (dx, dy) => {
+    dragMoved = true;
     // The pointer's move, on the map (unturned and unscaled).
     const [x, y] = turned(dx, dy, -view.turn);
     p.x = from.x + x / view.k;
@@ -1387,10 +1394,17 @@ function drag(event, id) {
     }
   });
 }
-// A dragged node let go of: dynamic, it moves to its place among the others again.
+// A dragged node let go of: dynamic, it moves to its place among the others again;
+// dragged by a double-click's second press, its pin toggled.
 function dropped() {
   if (grabbed === null) return;
+  const id = grabbed;
   grabbed = null;
+  if (dragMoved && secondPress) {
+    lastNodeClick = { id: null, at: 0 };
+    if (pinned.has(id)) unpin(id); else pin(id);
+    return;
+  }
   if (byRtt) settle();
 }
 // A node pinned where it is: the layout leaves it there.