@broberg/bodymap 0.5.0 → 0.6.0

package/dist/three.d.cts

@@ -168,6 +168,10 @@ interface BodyMap3DModels {
 }
 /** The 3D-only control strings (the shared labels come from `locale`/`labels`). */
 interface BodyMap3DUiLabels {
+    /** Label for the built-in fullscreen control (F052.24). */
+    expand?: string;
+    /** Label for the same control while fullscreen. */
+    collapse?: string;
     male: string;
     female: string;
     hoverHint: string;
@@ -216,6 +220,19 @@ interface BodyMap3DProps {
      *  (default true). Set false for a patient/employee-facing flow where the code is
      *  internal jargon and the readable region name is enough. */
     showRegionCode?: boolean;
+    /** Fill the viewport with the body (F052.24). Controlled: pass it and you own
+     *  it; `onFullscreenChange` still fires so your own button can drive it.
+     *
+     *  This is a VIEWPORT FILL, not the browser Fullscreen API. iOS Safari does not
+     *  support fullscreen on an arbitrary element at all, and the iPhone is this
+     *  component's primary surface — so the mechanism that works everywhere is the
+     *  one that ships, and it behaves identically on every platform. */
+    fullscreen?: boolean;
+    /** Fired when the built-in control or the Escape key changes it. */
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    /** Show the built-in expand/collapse control (default true). Set false and
+     *  drive `fullscreen` from your own button. */
+    showFullscreenButton?: boolean;
     /** Soften the colour transition between neighbouring regions (F052.21).
      *
      *  DEFAULT FALSE, and the default is the accessible one (F052.23). The blend

package/dist/three.d.ts

@@ -168,6 +168,10 @@ interface BodyMap3DModels {
 }
 /** The 3D-only control strings (the shared labels come from `locale`/`labels`). */
 interface BodyMap3DUiLabels {
+    /** Label for the built-in fullscreen control (F052.24). */
+    expand?: string;
+    /** Label for the same control while fullscreen. */
+    collapse?: string;
     male: string;
     female: string;
     hoverHint: string;
@@ -216,6 +220,19 @@ interface BodyMap3DProps {
      *  (default true). Set false for a patient/employee-facing flow where the code is
      *  internal jargon and the readable region name is enough. */
     showRegionCode?: boolean;
+    /** Fill the viewport with the body (F052.24). Controlled: pass it and you own
+     *  it; `onFullscreenChange` still fires so your own button can drive it.
+     *
+     *  This is a VIEWPORT FILL, not the browser Fullscreen API. iOS Safari does not
+     *  support fullscreen on an arbitrary element at all, and the iPhone is this
+     *  component's primary surface — so the mechanism that works everywhere is the
+     *  one that ships, and it behaves identically on every platform. */
+    fullscreen?: boolean;
+    /** Fired when the built-in control or the Escape key changes it. */
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    /** Show the built-in expand/collapse control (default true). Set false and
+     *  drive `fullscreen` from your own button. */
+    showFullscreenButton?: boolean;
     /** Soften the colour transition between neighbouring regions (F052.21).
      *
      *  DEFAULT FALSE, and the default is the accessible one (F052.23). The blend

package/dist/three.js

@@ -199,8 +199,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],
@@ -287,6 +287,9 @@ function BodyMap3D(props) {
     onFeedback,
     haptics,
     seam = false,
+    fullscreen: fullscreenProp,
+    onFullscreenChange,
+    showFullscreenButton = true,
     className
   } = props;
   const chrome = uiColors(palette);
@@ -326,6 +329,12 @@ function BodyMap3D(props) {
   setReadyRef.current = setReady;
   const seamRef = useRef(seam);
   seamRef.current = seam;
+  const [internalFs, setInternalFs] = useState(false);
+  const isFullscreen = fullscreenProp ?? internalFs;
+  const setFullscreen = (v) => {
+    if (fullscreenProp === void 0) setInternalFs(v);
+    onFullscreenChange?.(v);
+  };
   const apiRef = useRef(null);
   useEffect(() => {
     if (!webglAvailable()) {
@@ -575,8 +584,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);
@@ -588,6 +600,14 @@ function BodyMap3D(props) {
       if (canvas.parentNode) canvas.parentNode.removeChild(canvas);
     };
   }, []);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setFullscreen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
   useEffect(() => {
     apiRef.current?.refresh();
   }, [selected, report, palette, seam]);
@@ -622,31 +642,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__ */ jsxs("div", { "data-testid": "bodymap3d-root", className, style: { fontFamily: "system-ui, sans-serif", color: "#1e293b" }, children: [
-    showSexToggle && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 12, fontSize: 13 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(sex === "male"), children: UI.male }),
-      /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(sex === "female"), children: UI.female })
-    ] }) }),
-    /* @__PURE__ */ jsx("span", { ref: loadedRef, "data-testid": "bodymap3d-loaded", style: { display: "none" } }),
-    ready && /* @__PURE__ */ jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap" }, children: [
-      unsupported ? /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
-          /* @__PURE__ */ jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
-          showRegionCode && /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.intensity }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ 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__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: chrome.danger, borderColor: "#f6c9c9" }, children: L.remove })
-      ] }) : showEmptyHint ? /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap", marginBottom: 12, fontSize: 13 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-male", onClick: () => changeSex("male"), style: seg(sex === "male"), children: UI.male }),
+          /* @__PURE__ */ jsx("button", { "data-testid": "bodymap3d-sex-female", onClick: () => changeSex("female"), style: seg(sex === "female"), children: UI.female })
+        ] }) }),
+        /* @__PURE__ */ jsx("span", { ref: loadedRef, "data-testid": "bodymap3d-loaded", style: { display: "none" } }),
+        ready && /* @__PURE__ */ jsx("span", { "data-testid": "bodymap3d-ready", style: { position: "absolute", width: 1, height: 1, opacity: 0, pointerEvents: "none" } }),
+        showFullscreenButton && !unsupported && /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: 8 }, children: /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", gap: 18, alignItems: "flex-start", flexWrap: "wrap", ...isFullscreen ? { flex: "1 1 auto", minHeight: 0 } : null }, children: [
+          unsupported ? /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { flex: "1 1 300px", minWidth: 260 }, children: region ? /* @__PURE__ */ jsxs("div", { style: { border: `1px solid ${chrome.border}`, borderRadius: 14, padding: 16, background: chrome.panelBg }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
+              /* @__PURE__ */ jsx("b", { style: { fontSize: 16 }, children: nameOf(region.key) }),
+              showRegionCode && /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.intensity }),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 12 }, children: Array.from({ length: 11 }, (_, i) => /* @__PURE__ */ 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__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: chrome.mutedText, marginBottom: 7 }, children: L.quality }),
+            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 }, children: PAIN_TYPES.map((t) => /* @__PURE__ */ 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__ */ jsx("button", { "data-testid": "bodymap3d-remove", onClick: () => removePain(region.key), style: { ...btn, color: chrome.danger, borderColor: "#f6c9c9" }, children: L.remove })
+          ] }) : showEmptyHint ? /* @__PURE__ */ 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 })
+        ] })
+      ]
+    }
+  );
 }
 
 export { BodyMap3D, seamBlend, serializeReport };