@broberg/bodymap 0.10.0 → 0.12.0

package/README.md

@@ -382,6 +382,23 @@ is invisible on a desktop monitor and obvious on a phone.
 
 3D only — the 2D renderer has no canvas and no fullscreen, so it ignores it.
 
+### A slow tap is still a tap (0.11.0)
+
+Until 0.11.0 a press held longer than **450 ms** was discarded — silently. No
+pick, no clear, no `onFeedback`, no repaint.
+
+Distance already separates a tap from a drag: a drag moves. The time ceiling did
+not help with that; what it did was rule that a **slow** press is not a tap. And a
+slow press is exactly what a **careful** tap is — aiming at a small body part on a
+phone, at a mark you are trying to hit again, takes longer than a casual poke.
+
+The owner reported it twice, as *"the remove button is gone"* and as *"the sound
+doesn't work"*. Both were the same swallowed tap, and each was explained away
+separately. **A tap that is silently discarded is indistinguishable from a broken
+component.**
+
+`isTap(dx, dy)` is exported if you need the same rule.
+
 ### `hint` — turn the help note off, or move it (0.10.0)
 
 ```tsx

package/dist/three.cjs

@@ -282,6 +282,10 @@ function seamBlend(nearestSq, secondSq) {
 function seamWeight(seamEnabled, blend) {
   return seamEnabled ? blend : 0;
 }
+function isTap(dx, dy, maxDistance = TAP_MAX_DISTANCE) {
+  return Math.hypot(dx, dy) <= maxDistance;
+}
+var TAP_MAX_DISTANCE = 6;
 function ensureNormals(geo) {
   if (geo.getAttribute("normal")) return false;
   geo.computeVertexNormals();
@@ -307,6 +311,12 @@ function webglAvailable() {
     return false;
   }
 }
+var INTENSITY_SIZE = 46;
+function shouldShowHint(opts) {
+  if (opts.openRegion) return false;
+  if (opts.hint === false) return false;
+  return opts.anySelectable || opts.hasExplicitHoverHint;
+}
 var btn = (c) => ({
   font: "inherit",
   cursor: "pointer",
@@ -595,12 +605,11 @@ function BodyMap3D(props) {
       }
       return best;
     };
-    let downX = 0, downY = 0, downT = 0;
+    let downX = 0, downY = 0;
     const canvas = renderer.domElement;
     const onDown = (e) => {
       downX = e.clientX;
       downY = e.clientY;
-      downT = Date.now();
     };
     const onMove = (e) => {
       if ((e.buttons || 0) !== 0) return;
@@ -612,7 +621,7 @@ function BodyMap3D(props) {
       renderFrame();
     };
     const onUp = (e) => {
-      if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6 || Date.now() - downT > 450) return;
+      if (!isTap(e.clientX - downX, e.clientY - downY)) return;
       const k = pick(e.clientX, e.clientY);
       if (!k) return;
       const outcome = pickRef.current(k);
@@ -702,7 +711,12 @@ function BodyMap3D(props) {
   const region = selected ? REGIONS.find((r) => r.key === selected) : null;
   const current = selected ? pointOf(selected) : void 0;
   const anySelectable = REGIONS.some((r) => isSelectable(r.key, config ?? {}));
-  const showEmptyHint = hint === false ? false : anySelectable || ui?.hoverHint !== void 0;
+  const showEmptyHint = shouldShowHint({
+    openRegion: selected,
+    hint,
+    anySelectable,
+    hasExplicitHoverHint: ui?.hoverHint !== void 0
+  });
   const hintText = (hint ? hint.text : void 0) ?? UI.hoverHint;
   const hintAtStage = isFullscreen && !!hint && hint.placement === "stage-bottom";
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -810,13 +824,23 @@ function BodyMap3D(props) {
                   "data-testid": "bodymap3d-close",
                   "aria-label": L.close,
                   onClick: () => setSelected(null),
-                  style: { ...btn(chrome), width: 32, height: 32, padding: 0, fontSize: 20, lineHeight: 1, color: chrome.mutedText, borderColor: chrome.border, background: chrome.panelBg },
+                  style: { ...btn(chrome), width: 40, height: 40, minWidth: 40, padding: 0, borderRadius: "50%", fontSize: 20, lineHeight: 1, color: chrome.mutedText, borderColor: chrome.border, background: chrome.panelBg },
                   children: "\xD7"
                 }
               )
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.intensity }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": `bodymap3d-intensity-${i}`, onClick: () => setPain(region.key, i, current?.type), style: { ...btn(chrome), display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 30, height: 30, padding: 0, background: current?.intensity === i ? chrome.accent : chrome.panelBg, color: current?.intensity === i ? chrome.accentText : chrome.text }, children: i }, i)) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => (
+              /* F052.34 — CIRCLES, and all eleven the same size.
+                 Dimensioned by «10», the widest label: sizing by the average
+                 would make the two-digit one an ellipse among circles, which
+                 is worse than eleven rounded squares because the odd one out
+                 becomes a different SHAPE rather than slightly wider.
+                 46px is the SIBLING's touch size, not a new number: the 2D
+                 renderer already used it and this one was on 30px, under the
+                 >=44px floor F052.8 set. See INTENSITY_SIZE. */
+              /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": `bodymap3d-intensity-${i}`, onClick: () => setPain(region.key, i, current?.type), style: { ...btn(chrome), display: "inline-flex", alignItems: "center", justifyContent: "center", width: INTENSITY_SIZE, height: INTENSITY_SIZE, minWidth: INTENSITY_SIZE, padding: 0, borderRadius: "50%", background: current?.intensity === i ? chrome.accent : chrome.panelBg, color: current?.intensity === i ? chrome.accentText : chrome.text }, children: i }, i)
+            )) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": `bodymap3d-type-${t}`, onClick: () => setPain(region.key, current?.intensity ?? 5, t), style: { ...btn(chrome), borderRadius: 999, padding: "6px 12px", background: current?.type === t ? chrome.text : chrome.panelBg, color: current?.type === t ? chrome.panelBg : chrome.mutedText }, children: L.qualities[t] ?? t }, t)) }),
             current && /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn(chrome), color: chrome.danger, borderColor: chrome.dangerBorder }, children: L.remove })
@@ -853,9 +877,13 @@ function BodyMap3D(props) {
 }
 
 exports.BodyMap3D = BodyMap3D;
+exports.INTENSITY_SIZE = INTENSITY_SIZE;
+exports.TAP_MAX_DISTANCE = TAP_MAX_DISTANCE;
 exports.ensureNormals = ensureNormals;
+exports.isTap = isTap;
 exports.seamBlend = seamBlend;
 exports.seamWeight = seamWeight;
 exports.serializeReport = serializeReport;
+exports.shouldShowHint = shouldShowHint;
 //# sourceMappingURL=three.cjs.map
 //# sourceMappingURL=three.cjs.map