@broberg/bodymap 0.4.0 → 0.6.0

package/README.md

@@ -211,6 +211,83 @@ had *arrived* on a device that never *showed* it.)
 `VIBRATION_PATTERNS.ignore` is empty on purpose: a tap that changed nothing must
 not feel like it did.
 
+## Fullscreen — fill the viewport with the body
+
+```tsx
+// built-in control (default)
+<BodyMap3D models={models} />
+
+// your own button — you own the state
+const [big, setBig] = useState(false);
+<BodyMap3D models={models} fullscreen={big} onFullscreenChange={setBig} showFullscreenButton={false} />
+<button onClick={() => setBig(true)}>Se stor</button>
+```
+
+`Escape` leaves it. The pain report is untouched by entering or leaving.
+
+**It is a viewport fill, not the browser Fullscreen API — deliberately.** iOS
+Safari does not support fullscreen on an arbitrary element at all, and a phone is
+this component's primary surface. A `position: fixed; inset: 0` overlay behaves
+identically on every platform, needs no user-gesture dance, and cannot leave you
+with a control that silently does nothing on the one device that matters most.
+
+### It ships with a `ResizeObserver`, and that is not incidental
+
+Before 0.6.0 the canvas measured the element **once at mount** and only re-measured
+on a **window** resize. Everything below changes the ELEMENT without touching the
+window, and each one left the picture at its old size — a body that renders small,
+off-centre, or clipped, with nothing wrong in the code because the camera maths is
+correct and the numbers it was handed are stale:
+
+- entering or leaving fullscreen
+- switching `canvasHeight` at your own breakpoint
+- a container animating open, or a wizard step revealing the panel
+- **a phone's URL bar collapsing, which changes what `vh` means**
+
+If you saw a badly framed body on a phone before 0.6.0, this is the first thing to
+retest.
+
+## `seam` — soft region edges are OPT-IN, and here is why
+
+```tsx
+<BodyMap3D seam />          // soft colour transition between regions
+<BodyMap3D />               // default: flat, full-contrast regions
+```
+
+**Default off, because the default has to be the accessible one.** The blend mixes
+the *body* colour into a marked region near its boundary — and on a **small** mark,
+the boundary is most of the mark.
+
+Measured on a phone (`iphone-15`), a consumer's real palette, one knee marked,
+averaged over every pixel of the mark:
+
+| | mark colour | contrast vs body |
+|---|---|---|
+| `seam` on | `rgb(114, 58, 79)` | **3.59:1** — fails WCAG AA |
+| `seam` off (default) | `rgb(111, 22, 56)` | **4.71:1** — passes |
+
+At the single strongest pixel the cost is small (5.12 → 4.78), which is why a
+spot-check misses it. The average is what a person sees.
+
+**Turn it on** when marked areas are large and you have no accessibility duty — it
+genuinely looks better there. **Leave it off** for anything a public authority,
+a clinician or a partially-sighted user will read.
+
+## Smooth skin: we do not recompute the model's normals
+
+If your `.glb` ships normals, the renderer uses them. It only calls
+`computeVertexNormals()` when the file has none.
+
+This matters more than it sounds. `computeVertexNormals()` averages face normals
+**per vertex index**, and a body mesh has split vertices along its UV seams — two
+copies at the same position averaging different faces. The two sides then light
+differently, drawing a visible crease along every seam: a line down the torso, and
+across the chest, waist, shoulders, knees, elbows and ankles. The figure looks
+assembled from parts. Measured side by side: with the call, every line is there;
+without it, none are.
+
+If you supply your own model, **ship it with normals.**
+
 ## Colour control — `BodymapPalette`
 
 Both renderers theme off one palette (consumer-defined):

package/dist/three.cjs

@@ -221,8 +221,8 @@ var LABELS_EN = {
   zoomOut: "Zoom out",
   zoomReset: "Reset zoom"
 };
-var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Hover for at fremh\xE6ve \xB7 klik en kropsdel for at markere smerte." };
-var UI_EN = { male: "Male", female: "Female", hoverHint: "Hover to highlight \xB7 tap a body part to mark pain." };
+var UI_DA = { male: "Mand", female: "Kvinde", hoverHint: "Hover for at fremh\xE6ve \xB7 klik en kropsdel for at markere smerte.", expand: "Vis stor", collapse: "Luk stor visning" };
+var UI_EN = { male: "Male", female: "Female", hoverHint: "Hover to highlight \xB7 tap a body part to mark pain.", expand: "Expand", collapse: "Close" };
 var ANCHORS = {
   head: [0, 1.79, 0.02],
   neck: [0, 1.57, 0],
@@ -308,6 +308,10 @@ function BodyMap3D(props) {
     showRegionCode = true,
     onFeedback,
     haptics,
+    seam = false,
+    fullscreen: fullscreenProp,
+    onFullscreenChange,
+    showFullscreenButton = true,
     className
   } = props;
   const chrome = uiColors(palette);
@@ -345,6 +349,14 @@ function BodyMap3D(props) {
   const pickRef = react.useRef(() => "ignore");
   const setReadyRef = react.useRef(setReady);
   setReadyRef.current = setReady;
+  const seamRef = react.useRef(seam);
+  seamRef.current = seam;
+  const [internalFs, setInternalFs] = react.useState(false);
+  const isFullscreen = fullscreenProp ?? internalFs;
+  const setFullscreen = (v) => {
+    if (fullscreenProp === void 0) setInternalFs(v);
+    onFullscreenChange?.(v);
+  };
   const apiRef = react.useRef(null);
   react.useEffect(() => {
     if (!webglAvailable()) {
@@ -438,7 +450,7 @@ function BodyMap3D(props) {
       };
       for (let i = 0; i < vertexRegion.length; i++) {
         tmp.copy(col(vertexRegion[i]));
-        const w = vertexBlend[i];
+        const w = seamRef.current ? vertexBlend[i] : 0;
         if (w > 0) {
           tmp2.copy(col(vertexNeighbour[i]));
           tmp.lerp(tmp2, w);
@@ -472,7 +484,7 @@ function BodyMap3D(props) {
         });
         if (bodyMesh) {
           const geo = bodyMesh.geometry;
-          geo.computeVertexNormals();
+          if (!geo.getAttribute("normal")) geo.computeVertexNormals();
           const pos = geo.getAttribute("position");
           const n = pos.count;
           const cols = new Float32Array(n * 3);
@@ -594,8 +606,11 @@ function BodyMap3D(props) {
       renderFrame();
     };
     window.addEventListener("resize", onResize);
+    const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => onResize()) : null;
+    ro?.observe(el);
     return () => {
       cancelAnimationFrame(raf);
+      ro?.disconnect();
       window.removeEventListener("resize", onResize);
       document.removeEventListener("visibilitychange", onVis);
       controls.removeEventListener("change", kick);
@@ -607,9 +622,17 @@ function BodyMap3D(props) {
       if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
     };
   }, []);
+  react.useEffect(() => {
+    if (!isFullscreen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setFullscreen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
   react.useEffect(() => {
     apiRef.current?.refresh();
-  }, [selected, report, palette]);
+  }, [selected, report, palette, seam]);
   const sexInited = react.useRef(false);
   react.useEffect(() => {
     if (!sexInited.current) {
@@ -641,31 +664,87 @@ function BodyMap3D(props) {
   const current = selected ? pointOf(selected) : void 0;
   const anySelectable = REGIONS.some((r) => isSelectable(r.key, config ?? {}));
   const showEmptyHint = anySelectable || ui?.hoverHint !== void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "bodymap3d-root", className, style: { fontFamily: "system-ui, sans-serif", color: "#1e293b" }, children: [
-    showSexToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 12, fontSize: 13 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(sex === "male"), children: UI.male }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(sex === "female"), children: UI.female })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { ref: loadedRef, "data-testid": "bodymap3d-loaded", style: { display: "none" } }),
-    ready && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }, children: [
-      unsupported ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-unsupported", style: { flex: "1 1 520px", minWidth: 320, height: canvasH, borderRadius: 16, background: "#0e1424", color: "#cbd5e1", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, textAlign: "center", fontSize: 14 }, children: "3D kr\xE6ver WebGL, som ikke er tilg\xE6ngeligt her." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mountRef, "data-testid": "bodymap3d-canvas", style: { flex: "1 1 520px", height: canvasH, minWidth: 320, borderRadius: 16, overflow: "hidden", background: "#0e1424", touchAction: "none" } }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
-          showRegionCode && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "bodymap3d-region-code", style: { font: "11px ui-monospace, monospace", color: chrome.mutedText, background: chrome.badgeBg, borderRadius: 6, padding: "2px 7px" }, children: [
-            region.code,
-            region.side ? " \xB7 " + region.side : ""
-          ] })
-        ] }),
-        /* @__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, display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 30, height: 30, padding: 0, background: current?.intensity === i ? "#0e8f8a" : "#fff", color: current?.intensity === i ? "#fff" : "#1e293b" }, 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, borderRadius: 999, padding: "6px 12px", background: current?.type === t ? "#1e293b" : "#fff", color: current?.type === t ? "#fff" : "#64748b" }, children: L.qualities[t] ?? t }, t)) }),
-        current && /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: chrome.danger, borderColor: "#f6c9c9" }, children: L.remove })
-      ] }) : showEmptyHint ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-empty", style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg, color: chrome.mutedText, fontSize: 13.5 }, children: UI.hoverHint }) : null })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "bodymap3d-root",
+      className,
+      "data-fullscreen": isFullscreen ? "true" : void 0,
+      style: {
+        fontFamily: "system-ui, sans-serif",
+        color: "#1e293b",
+        // A viewport fill, not the Fullscreen API — see the `fullscreen` prop.
+        // `fixed`+`inset:0` behaves the same on iOS Safari, where element
+        // fullscreen does not exist at all, as it does everywhere else.
+        ...isFullscreen ? {
+          position: "fixed",
+          inset: 0,
+          zIndex: 2147483e3,
+          background: chrome.panelBg,
+          padding: 12,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "auto"
+        } : null
+      },
+      children: [
+        showSexToggle && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 12, fontSize: 13 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(sex === "male"), children: UI.male }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(sex === "female"), children: UI.female })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ref: loadedRef, "data-testid": "bodymap3d-loaded", style: { display: "none" } }),
+        ready && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
+        showFullscreenButton && !unsupported && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": "bodymap3d-fullscreen",
+            "aria-pressed": isFullscreen,
+            "aria-label": isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand",
+            onClick: () => setFullscreen(!isFullscreen),
+            style: { ...btn, color: chrome.text, borderColor: chrome.border, background: chrome.panelBg },
+            children: isFullscreen ? UI.collapse ?? "Close" : UI.expand ?? "Expand"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap", ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null }, children: [
+          unsupported ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-unsupported", style: { flex: "1 1 520px", minWidth: 320, height: canvasH, borderRadius: 16, background: "#0e1424", color: "#cbd5e1", display: "flex", alignItems: "center", justifyContent: "center", padding: 24, textAlign: "center", fontSize: 14 }, children: "3D kr\xE6ver WebGL, som ikke er tilg\xE6ngeligt her." }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: mountRef,
+              "data-testid": "bodymap3d-canvas",
+              style: {
+                flex: "1 1 520px",
+                // In fullscreen the box takes the height it is GIVEN rather than a
+                // fixed `canvasHeight`; the ResizeObserver above is what makes the
+                // picture follow it.
+                height: isFullscreen ? "100%" : canvasH,
+                minWidth: 320,
+                minHeight: isFullscreen ? 0 : void 0,
+                borderRadius: 16,
+                overflow: "hidden",
+                background: "#0e1424",
+                touchAction: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
+              showRegionCode && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-testid": "bodymap3d-region-code", style: { font: "11px ui-monospace, monospace", color: chrome.mutedText, background: chrome.badgeBg, borderRadius: 6, padding: "2px 7px" }, children: [
+                region.code,
+                region.side ? " \xB7 " + region.side : ""
+              ] })
+            ] }),
+            /* @__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, display: "inline-flex", alignItems: "center", justifyContent: "center", minWidth: 30, height: 30, padding: 0, background: current?.intensity === i ? "#0e8f8a" : "#fff", color: current?.intensity === i ? "#fff" : "#1e293b" }, 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, borderRadius: 999, padding: "6px 12px", background: current?.type === t ? "#1e293b" : "#fff", color: current?.type === t ? "#fff" : "#64748b" }, children: L.qualities[t] ?? t }, t)) }),
+            current && /* @__PURE__ */ jsxRuntime.jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: chrome.danger, borderColor: "#f6c9c9" }, children: L.remove })
+          ] }) : showEmptyHint ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-empty", style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg, color: chrome.mutedText, fontSize: 13.5 }, children: UI.hoverHint }) : null })
+        ] })
+      ]
+    }
+  );
 }
 
 exports.BodyMap3D = BodyMap3D;