@broberg/bodymap 0.1.1 → 0.1.2

package/dist/react.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { z } from 'zod';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -165,48 +165,83 @@ var FILL_BACK = {
   hip_left: "#c99bd6",
   hip_right: "#c99bd6"
 };
+var VBW = 260;
+var VBH = 470;
+var MIN_HIT = 18;
 function center(s) {
   if (s.el === "rect") return { x: s.x + s.width / 2, y: s.y + s.height / 2 };
   return { x: s.cx, y: s.cy };
 }
+function hitShape(s) {
+  if (s.el === "circle") return { el: "circle", cx: s.cx, cy: s.cy, r: Math.max(s.r, MIN_HIT) };
+  if (s.el === "ellipse")
+    return { el: "ellipse", cx: s.cx, cy: s.cy, rx: Math.max(s.rx, MIN_HIT), ry: Math.max(s.ry, MIN_HIT) };
+  const c = center(s);
+  const w = Math.max(s.width, MIN_HIT * 2);
+  const h = Math.max(s.height, MIN_HIT * 2);
+  return { el: "rect", x: c.x - w / 2, y: c.y - h / 2, width: w, height: h, rx: s.rx };
+}
 function heat(v) {
   return v >= 7 ? "#ef4444" : v >= 4 ? "#fb923c" : "#fcd34d";
 }
+function shapeEl(s, props) {
+  if (s.el === "circle") return /* @__PURE__ */ jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, ...props });
+  if (s.el === "ellipse") return /* @__PURE__ */ jsx("ellipse", { cx: s.cx, cy: s.cy, rx: s.rx, ry: s.ry, ...props });
+  return /* @__PURE__ */ jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, rx: s.rx, ...props });
+}
 var STYLE_ID = "broberg-bodymap-styles";
 var STYLE = `
 .bmap{--bmap-accent:var(--primary,#0e8f8a);--bmap-line:#e2e8f0;--bmap-panel:#fff;--bmap-ink:#1e293b;--bmap-muted:#64748b;
   display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--bmap-ink)}
-.bmap__svg{flex:0 0 auto}
-.bmap__stage{display:flex;flex-direction:column;gap:12px;flex:0 0 auto}
-.bmap__viewtoggle{display:inline-flex;align-self:flex-start;background:#f1f5f9;border:1px solid var(--bmap-line);border-radius:10px;padding:3px;gap:2px}
-.bmap__vbtn{font:inherit;font-size:13px;font-weight:600;color:var(--bmap-muted);background:none;border:0;border-radius:7px;padding:6px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
+.bmap__stage{display:flex;flex-direction:column;gap:10px;flex:0 1 340px;min-width:0;max-width:360px}
+.bmap__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.bmap__viewtoggle{display:inline-flex;background:#f1f5f9;border:1px solid var(--bmap-line);border-radius:10px;padding:3px;gap:2px}
+.bmap__vbtn{font:inherit;font-size:13px;font-weight:600;color:var(--bmap-muted);background:none;border:0;border-radius:7px;padding:8px 16px;cursor:pointer;transition:color .12s,background .12s,transform .1s}
 .bmap__vbtn:hover{color:var(--bmap-ink)}
 .bmap__vbtn:active{transform:scale(.97)}
 .bmap__vbtn--on{background:#fff;color:var(--bmap-ink);box-shadow:0 1px 2px rgba(15,23,42,.14)}
-.bmap__region{cursor:pointer;stroke:#fff;stroke-width:2.4;transition:filter .12s}
-.bmap__region:hover{filter:brightness(1.08) saturate(1.15)}
-.bmap__region--locked{cursor:default;opacity:.4}
-.bmap__region--sel{stroke:var(--bmap-accent);stroke-width:3.6}
-.bmap__heatn{font:700 11px ui-sans-serif;fill:#fff;pointer-events:none}
-.bmap__panel{flex:1 1 220px;min-width:220px;border:1px solid var(--bmap-line);border-radius:14px;padding:16px 18px;background:var(--bmap-panel)}
+.bmap__zoom{display:inline-flex;gap:4px;margin-left:auto}
+.bmap__zoom button{font:inherit;font-weight:700;font-size:16px;line-height:1;width:36px;height:36px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);border-radius:8px;cursor:pointer;transition:border-color .12s,transform .1s;display:flex;align-items:center;justify-content:center}
+.bmap__zoom button:hover{border-color:var(--bmap-accent)}
+.bmap__zoom button:active{transform:scale(.9)}
+.bmap__zoom button:disabled{opacity:.4;cursor:default}
+.bmap__svg{width:100%;height:auto;display:block;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:transparent;border-radius:14px}
+.bmap__vis{stroke:#fff;stroke-width:2.4;pointer-events:none;transition:filter .12s,stroke .12s,stroke-width .12s}
+.bmap__vis--sel{stroke:var(--bmap-accent);stroke-width:3.6}
+.bmap__hit{fill:transparent;cursor:pointer;outline:none}
+.bmap__hit--locked{cursor:default}
+.bmap__hit:hover + .bmap__vis{filter:brightness(1.08) saturate(1.15)}
+.bmap__hit:focus-visible + .bmap__vis{stroke:var(--bmap-accent);stroke-width:4;stroke-dasharray:4 2.5}
+.bmap__heatn{font:700 12px ui-sans-serif;fill:#fff;pointer-events:none}
+.bmap__panel{flex:1 1 240px;min-width:220px;border:1px solid var(--bmap-line);border-radius:14px;padding:16px 18px;background:var(--bmap-panel)}
 .bmap__panel--empty{color:var(--bmap-muted);font-size:13.5px}
 .bmap__ph{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
 .bmap__ph b{font-size:16px}
 .bmap__code{font:11px ui-monospace,monospace;color:var(--bmap-muted);background:#f1f5f9;border-radius:6px;padding:2px 7px}
 .bmap__lbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bmap-muted);margin:0 0 7px}
-.bmap__scale{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
-.bmap__i{font:inherit;font-size:13px;font-weight:600;width:30px;height:30px;border-radius:8px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);cursor:pointer;transition:.1s}
+.bmap__scale{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
+.bmap__i{font:inherit;font-size:14px;font-weight:600;width:38px;height:38px;border-radius:9px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-ink);cursor:pointer;transition:border-color .1s,background .1s,transform .1s}
 .bmap__i:hover{border-color:var(--bmap-accent)}
 .bmap__i:active{transform:scale(.9)}
 .bmap__i--on{background:var(--bmap-accent);border-color:var(--bmap-accent);color:#fff}
-.bmap__chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
-.bmap__chip{font:inherit;font-size:12.5px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-muted);border-radius:999px;padding:6px 12px;cursor:pointer;transition:.1s}
+.bmap__chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
+.bmap__chip{font:inherit;font-size:13px;border:1px solid var(--bmap-line);background:#fff;color:var(--bmap-muted);border-radius:999px;padding:9px 15px;cursor:pointer;transition:.1s}
 .bmap__chip:hover{border-color:var(--bmap-accent);color:var(--bmap-accent)}
 .bmap__chip:active{transform:scale(.96)}
 .bmap__chip--on{background:var(--bmap-ink);border-color:var(--bmap-ink);color:#fff}
-.bmap__rm{font:inherit;font-size:13px;font-weight:600;border:1px solid #f6c9c9;background:#fff;color:#ef4444;border-radius:9px;padding:8px 13px;cursor:pointer;transition:.1s}
+.bmap__rm{font:inherit;font-size:14px;font-weight:600;border:1px solid #f6c9c9;background:#fff;color:#ef4444;border-radius:9px;padding:10px 15px;cursor:pointer;transition:.1s}
 .bmap__rm:hover{background:#fef2f2}
 .bmap__rm:active{transform:scale(.97)}
+.bmap__i:focus-visible,.bmap__chip:focus-visible,.bmap__vbtn:focus-visible,.bmap__rm:focus-visible,.bmap__zoom button:focus-visible{outline:2px solid var(--bmap-accent);outline-offset:2px}
+@media (max-width:560px){
+  .bmap{flex-direction:column;gap:14px}
+  .bmap__stage{max-width:100%;width:100%;flex-basis:auto}
+  .bmap__panel{width:100%}
+  .bmap__i{width:46px;height:46px;font-size:16px}
+  .bmap__chip{padding:11px 17px;font-size:15px}
+  .bmap__vbtn{padding:10px 18px;font-size:15px}
+}
+@media (prefers-reduced-motion:reduce){.bmap *{transition:none !important}}
 `;
 function ensureStyles() {
   if (typeof document === "undefined") return;
@@ -216,6 +251,12 @@ function ensureStyles() {
   el.textContent = STYLE;
   document.head.appendChild(el);
 }
+var ZMIN = 1;
+var ZMAX = 4;
+var clampPan = (p, z2) => ({
+  x: Math.min(0, Math.max(VBW * (1 - z2), p.x)),
+  y: Math.min(0, Math.max(VBH * (1 - z2), p.y))
+});
 function BodyMap({
   value,
   defaultValue,
@@ -229,9 +270,81 @@ function BodyMap({
   const [internal, setInternal] = useState(defaultValue ?? []);
   const [selected, setSelected] = useState(null);
   const [view, setView] = useState(defaultView);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
   const report = value ?? internal;
   const shapes = view === "back" ? SHAPES_BACK : SHAPES;
   const fills = view === "back" ? FILL_BACK : FILL;
+  const svgRef = useRef(null);
+  const zoomRef = useRef(1);
+  const panRef = useRef({ x: 0, y: 0 });
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef({ startDist: 0, startZoom: 1, midVB: { x: 0, y: 0 }, start: { x: 0, y: 0 }, moved: false });
+  const suppressClick = useRef(false);
+  const setZP = (z2, p) => {
+    const cz = Math.max(ZMIN, Math.min(ZMAX, z2));
+    const cp = clampPan(p, cz);
+    zoomRef.current = cz;
+    panRef.current = cp;
+    setZoom(cz);
+    setPan(cp);
+  };
+  const screenToVB = (cx, cy) => {
+    const el = svgRef.current;
+    if (!el) return { x: VBW / 2, y: VBH / 2 };
+    const r = el.getBoundingClientRect();
+    if (!r.width || !r.height) return { x: VBW / 2, y: VBH / 2 };
+    return { x: (cx - r.left) / r.width * VBW, y: (cy - r.top) / r.height * VBH };
+  };
+  const zoomTo = (nz, focalVB) => {
+    const z2 = Math.max(ZMIN, Math.min(ZMAX, nz));
+    const p = panRef.current;
+    setZP(z2, { x: focalVB.x - (focalVB.x - p.x) * (z2 / zoomRef.current), y: focalVB.y - (focalVB.y - p.y) * (z2 / zoomRef.current) });
+  };
+  const zoomBtn = (factor) => zoomTo(zoomRef.current * factor, { x: VBW / 2, y: VBH / 2 });
+  const resetZoom = () => setZP(1, { x: 0, y: 0 });
+  const onPointerDown = (e) => {
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pts = [...pointers.current.values()];
+    if (pts.length === 2) {
+      gesture.current.startDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+      gesture.current.startZoom = zoomRef.current;
+      gesture.current.midVB = screenToVB((pts[0].x + pts[1].x) / 2, (pts[0].y + pts[1].y) / 2);
+      gesture.current.moved = true;
+      suppressClick.current = true;
+    } else {
+      gesture.current.start = { x: e.clientX, y: e.clientY };
+      gesture.current.moved = false;
+    }
+  };
+  const onPointerMove = (e) => {
+    const prev = pointers.current.get(e.pointerId);
+    if (!prev) return;
+    pointers.current.set(e.pointerId, { x: e.clientX, y: e.clientY });
+    const pts = [...pointers.current.values()];
+    if (pts.length >= 2) {
+      const dist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+      if (gesture.current.startDist > 0) zoomTo(gesture.current.startZoom * (dist / gesture.current.startDist), gesture.current.midVB);
+      return;
+    }
+    const el = svgRef.current;
+    const rect = el?.getBoundingClientRect();
+    if (Math.hypot(e.clientX - gesture.current.start.x, e.clientY - gesture.current.start.y) > 6) {
+      gesture.current.moved = true;
+      suppressClick.current = true;
+    }
+    if (zoomRef.current > 1 && rect && rect.width) {
+      const dxVB = (e.clientX - prev.x) / rect.width * VBW;
+      const dyVB = (e.clientY - prev.y) / rect.height * VBH;
+      setZP(zoomRef.current, { x: panRef.current.x + dxVB, y: panRef.current.y + dyVB });
+    }
+  };
+  const onPointerUp = (e) => {
+    pointers.current.delete(e.pointerId);
+    if (pointers.current.size === 0) window.setTimeout(() => {
+      suppressClick.current = false;
+    }, 60);
+  };
   const changeView = (v) => {
     if (v === view) return;
     setView(v);
@@ -252,68 +365,96 @@ function BodyMap({
     commit(report.filter((p) => p.region !== key));
     setSelected(null);
   };
+  const pickRegion = (key) => {
+    if (suppressClick.current) {
+      suppressClick.current = false;
+      return;
+    }
+    setSelected(key);
+  };
   const regions = resolveRegions(config);
   const region = selected ? REGIONS.find((r) => r.key === selected) : void 0;
   const current = selected ? pointOf(selected) : void 0;
   const rootCls = ["bmap", className].filter(Boolean).join(" ");
+  const ariaFor = (r, marked, selectable = true) => {
+    if (marked) return `${r.label}, smerte ${marked.intensity} af 10${marked.type ? ", " + marked.type : ""}`;
+    return selectable ? `${r.label}, ikke markeret. Aktiv\xE9r for at markere smerte.` : r.label;
+  };
   return /* @__PURE__ */ jsxs("div", { className: rootCls, "data-testid": "bodymap-root", children: [
     /* @__PURE__ */ jsxs("div", { className: "bmap__stage", children: [
-      /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": "Visning", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""),
-            "data-testid": "bodymap-view-front",
-            "aria-pressed": view === "front",
-            onClick: () => changeView("front"),
-            children: "Forfra"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""),
-            "data-testid": "bodymap-view-back",
-            "aria-pressed": view === "back",
-            onClick: () => changeView("back"),
-            children: "Bagfra"
-          }
-        )
+      /* @__PURE__ */ jsxs("div", { className: "bmap__bar", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bmap__viewtoggle", role: "group", "aria-label": "Visning", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bmap__vbtn" + (view === "front" ? " bmap__vbtn--on" : ""),
+              "data-testid": "bodymap-view-front",
+              "aria-pressed": view === "front",
+              onClick: () => changeView("front"),
+              children: "Forfra"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "bmap__vbtn" + (view === "back" ? " bmap__vbtn--on" : ""),
+              "data-testid": "bodymap-view-back",
+              "aria-pressed": view === "back",
+              onClick: () => changeView("back"),
+              children: "Bagfra"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bmap__zoom", role: "group", "aria-label": "Zoom", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-out", "aria-label": "Zoom ud", disabled: zoom <= ZMIN, onClick: () => zoomBtn(1 / 1.4), children: "\u2212" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-reset", "aria-label": "Nulstil zoom", disabled: zoom === 1 && pan.x === 0 && pan.y === 0, onClick: resetZoom, children: "\u2922" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "bodymap-zoom-in", "aria-label": "Zoom ind", disabled: zoom >= ZMAX, onClick: () => zoomBtn(1.4), children: "+" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         "svg",
         {
+          ref: svgRef,
           className: "bmap__svg",
           viewBox: "0 0 260 470",
-          width: 230,
-          height: 416,
           role: "group",
           "aria-label": "Kropskort \u2014 v\xE6lg hvor det g\xF8r ondt",
-          children: [
+          onPointerDown,
+          onPointerMove,
+          onPointerUp,
+          onPointerCancel: onPointerUp,
+          onWheel: (e) => zoomTo(zoomRef.current * (e.deltaY < 0 ? 1.12 : 1 / 1.12), screenToVB(e.clientX, e.clientY)),
+          children: /* @__PURE__ */ jsxs("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
             regions.map((r) => {
               const s = shapes[r.key];
               if (!s) return null;
               const marked = pointOf(r.key);
               const selectable = isSelectable(r.key, config);
-              const cls = [
-                "bmap__region",
-                !selectable && "bmap__region--locked",
-                selected === r.key && "bmap__region--sel"
-              ].filter(Boolean).join(" ");
+              const visCls = ["bmap__vis", selected === r.key && "bmap__vis--sel"].filter(Boolean).join(" ");
               const fill = marked ? heat(marked.intensity) : fills[r.key] ?? "#cbd5e1";
-              const common = {
-                className: cls,
-                fill,
-                "data-testid": `bodymap-region-${r.key}`,
-                role: selectable ? "button" : void 0,
-                "aria-label": r.label,
-                onClick: selectable ? () => setSelected(r.key) : void 0
-              };
-              if (s.el === "circle") return /* @__PURE__ */ jsx("circle", { cx: s.cx, cy: s.cy, r: s.r, ...common }, r.key);
-              if (s.el === "ellipse") return /* @__PURE__ */ jsx("ellipse", { cx: s.cx, cy: s.cy, rx: s.rx, ry: s.ry, ...common }, r.key);
-              return /* @__PURE__ */ jsx("rect", { x: s.x, y: s.y, width: s.width, height: s.height, rx: s.rx, ...common }, r.key);
+              const hs = hitShape(s);
+              const act = () => selectable ? pickRegion(r.key) : void 0;
+              return /* @__PURE__ */ jsxs("g", { children: [
+                shapeEl(hs, {
+                  className: "bmap__hit" + (selectable ? "" : " bmap__hit--locked"),
+                  "data-testid": `bodymap-region-${r.key}`,
+                  role: selectable ? "button" : "img",
+                  tabIndex: selectable ? 0 : -1,
+                  "aria-label": ariaFor(r, marked, selectable),
+                  "aria-pressed": selectable ? selected === r.key : void 0,
+                  onClick: act,
+                  onKeyDown: selectable ? (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      suppressClick.current = false;
+                      setSelected(r.key);
+                    }
+                  } : void 0
+                }),
+                shapeEl(s, { className: visCls, fill, opacity: selectable ? 1 : 0.4 })
+              ] }, r.key);
             }),
             report.map((p) => {
               const s = shapes[p.region];
@@ -321,7 +462,7 @@ function BodyMap({
               const c = center(s);
               return /* @__PURE__ */ jsx("text", { x: c.x, y: c.y + 4, textAnchor: "middle", className: "bmap__heatn", children: p.intensity }, p.region);
             })
-          ]
+          ] })
         }
       )
     ] }),
@@ -330,21 +471,22 @@ function BodyMap({
         /* @__PURE__ */ jsx("b", { children: region.label }),
         /* @__PURE__ */ jsx("span", { className: "bmap__code", children: region.code })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", children: "Intensitet (0-10)" }),
-      /* @__PURE__ */ jsx("div", { className: "bmap__scale", role: "group", "aria-label": "Intensitet", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", id: "bmap-intensity-lbl", children: "Intensitet (0-10)" }),
+      /* @__PURE__ */ jsx("div", { className: "bmap__scale", role: "group", "aria-labelledby": "bmap-intensity-lbl", children: Array.from({ length: 11 }, (_, n) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: "bmap__i" + (current?.intensity === n ? " bmap__i--on" : ""),
           "data-testid": `bodymap-intensity-${n}`,
+          "aria-label": `Intensitet ${n}`,
           "aria-pressed": current?.intensity === n,
           onClick: () => setPain(region.key, n, current?.type),
           children: n
         },
         n
       )) }),
-      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", children: "Kvalitet" }),
-      /* @__PURE__ */ jsx("div", { className: "bmap__chips", role: "group", "aria-label": "Kvalitet", children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("p", { className: "bmap__lbl", id: "bmap-quality-lbl", children: "Kvalitet" }),
+      /* @__PURE__ */ jsx("div", { className: "bmap__chips", role: "group", "aria-labelledby": "bmap-quality-lbl", children: PAIN_TYPES.map((t) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -357,7 +499,7 @@ function BodyMap({
         t
       )) }),
       current && /* @__PURE__ */ jsx("button", { type: "button", className: "bmap__rm", "data-testid": "bodymap-remove", onClick: () => removePain(region.key), children: "Fjern punkt" })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: "Klik en kropsdel for at markere smerte." })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "bmap__panel bmap__panel--empty", "data-testid": "bodymap-panel", children: "V\xE6lg en kropsdel for at markere smerte." })
   ] });
 }