WEBSITE - WIP - icon shapes - fix multi-select bug + new shape

docs/_config.yml

@@ -5,7 +5,7 @@ description: >-
 url: "https://alesimula.github.io"
 baseurl: ""
 
-version: "1.0.40" #Website version - increase to invalidate cached resources
+version: "1.0.41" #Website version - increase to invalidate cached resources
 github_repo: "alesimula/Murine-launcher"
 icon_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_browser_fullsize.svg"
 icon_freeform_url: "https://raw.githubusercontent.com/alesimula/Murine-launcher/refs/heads/main/image/app_icon/icon_freeform.svg"

docs/_data/icon_shapes.yml

@@ -119,3 +119,16 @@ shapes:
               [27.31, 38.25, 0, 0], [27.31, 11.93, 9.7, 0.33]]
         at: [1.038, 1.399, 87.73, 113.99]
         mirror: h
+  - name: Box buddy
+    shapes:
+      - pts: [[0, 0, 15.86, 1], [30, 0, 15.86, 1],
+              [49.08, 49.03, 15.86, 1], [0, 30, 15.86, 1]]
+        mirror: both
+      - pts: [[7.5, 7.5, 41.64, 0.5], [92.5, 7.5, 41.64, 0.5],
+              [92.5, 92.5, 41.64, 0.5], [7.5, 92.5, 41.64, 0.5]]
+      - pts: [[37.5, 2.5, 15.86, 1], [62.5, 2.5, 15.86, 1],
+              [57.5, 27.5, 15.86, 1], [42.5, 27.5, 15.86, 1]]
+        mirror: v
+      - pts: [[2.51, 62.5, 15.86, 1], [2.51, 37.5, 15.86, 1],
+              [27.51, 42.5, 15.86, 1], [27.51, 57.5, 15.86, 1]]
+        mirror: h

docs/assets/js/shape-editor.js

@@ -1033,8 +1033,11 @@
   svg.addEventListener('blur', () => svg.removeAttribute('data-pointer'));
   // A long press on a shape picks it too (or drops it from the group), as on the cards; one that started
   // moving the selection takes that back first.
+  // A long press is one that stays put: a mouse or pen moving past the 4px that start a drag ends it (a slow drag
+  // used to stay under a fixed 10px long enough to count as one); a finger, which wobbles, gets 10px.
   let hold = null;
   const letGo = () => { if (hold) clearTimeout(hold.timer); hold = null; };
+  const holdTol = (e) => (e.pointerType === 'touch' ? 10 : 4);
   svg.addEventListener('pointerdown', (e) => {
     const pick = e.ctrlKey || e.metaKey, g0 = grabAt(e.clientX, e.clientY, e.pointerType === 'touch'), g = pick ? null : g0;
     letGo();
@@ -1045,7 +1048,7 @@
     tap = g ? null : wholeOn ? -1 : shapeAt(e);
     const under = g ? (g.move ? shapeAt(e) : -1) : tap;
     if (!pick && !wholeOn && under >= 0 && (multi.size > 1 || under !== active)) {
-      hold = { x: e.clientX, y: e.clientY, timer: setTimeout(() => {
+      hold = { x: e.clientX, y: e.clientY, tol: holdTol(e), timer: setTimeout(() => {
         hold = null; tap = null;
         if (drag) { drag = null; restore(JSON.parse(undo.pop())); render(); }
         navigator.vibrate?.(15);
@@ -1069,7 +1072,7 @@
         // corners, moves them all), and a long press adds or drops it.
         const i = g.point, before = { sel, set: new Set(selSet) }, keep = selSet.has(i) && selSet.size > 1;
         drag = { kind: 'point', i, from: at, start: keep ? startOf() : null, pending: !selSet.has(i) };
-        hold = { x: e.clientX, y: e.clientY, timer: setTimeout(() => {
+        hold = { x: e.clientX, y: e.clientY, tol: holdTol(e), timer: setTimeout(() => {
           hold = null; drag = null;
           restore(JSON.parse(undo.pop())); // takes back the press (and any small move it made)
           sel = before.sel; selSet = before.set;
@@ -1098,7 +1101,7 @@
     render();
   });
   svg.addEventListener('pointermove', (e) => {
-    if (hold && Math.hypot(e.clientX - hold.x, e.clientY - hold.y) > 10) letGo();
+    if (hold && Math.hypot(e.clientX - hold.x, e.clientY - hold.y) > hold.tol) letGo();
     if (!drag) return;
     const p = toSvg(e);
     if (drag.kind === 'point') {