1 files changed, 14 insertions, 7 deletions
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 7fb7ef8..4823f74 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -68,7 +68,8 @@
   #document-box { grid-area: document; }
   svg { flex: 1; min-height: 0; width: 100%; display: block; cursor: default; }
   /* Dragged to pan or to move a node, also by touch. */
-  #graph { touch-action: none; }
+  /* Dragged, not selected: neither its labels' text nor the picture itself. */
+  #graph { touch-action: none; user-select: none; -webkit-user-select: none; }
   #graph.dragging, #graph.dragging * { cursor: grabbing; }
   svg circle { cursor: pointer; }
   /* Labels on an underlay of their own shape, so they read where they lie on a line. */
@@ -668,8 +669,8 @@ function renderGraph() {
   const hit = (key, p, q, width) => {
     const line = drawing("hit " + key, "line", { x1: p.x, y1: p.y, x2: q.x, y2: q.y,
       stroke: "transparent", "stroke-width": width + 8, cursor: "pointer" }, line => {
-      // On press: the map may be drawn anew before a click would complete.
-      line.addEventListener("pointerdown", event => { event.stopPropagation(); focus(key); });
+      // Dragged, it pans, as beside the nodes; a click, it is in focus.
+      line.addEventListener("pointerdown", event => { event.stopPropagation(); pan(event, () => focus(key)); });
       hoverable(line, key);
     });
     hits.push(line);
@@ -1295,16 +1296,22 @@ graph.addEventListener("pointercancel", event => {
   press = null;
   graph.classList.remove("dragging");
 });
-// Beside the nodes: dragged, it pans; a click, back to this node.
-graph.addEventListener("pointerdown", event => {
-  if (event.target !== graph) return;
+// The map dragged: it pans; a click, `click`.
+function pan(event, click) {
   const from = { ...view };
   pressing(event, (dx, dy) => {
     view.x = from.x + dx;
     view.y = from.y + dy;
     moveView();
-  }, () => focus(null));
+  }, click);
+}
+// Beside the nodes: dragged, it pans; a click, back to this node.
+graph.addEventListener("pointerdown", event => {
+  if (event.target !== graph) return;
+  pan(event, () => focus(null));
 });
+// Not the browser's drag and drop of the picture.
+graph.addEventListener("dragstart", event => event.preventDefault());
 // A node: dragged, it stays where it is put (`pinned`), and the layout places the others
 // around it; a click, it is in focus; a second one soon after, it's let go (`unpin`).
 // Told apart here: the map holds the pointer while pressed (`pressing`), so the