@broberg/bodymap 0.2.4 → 0.2.6

package/dist/three.cjs

@@ -75,11 +75,26 @@ var painPointSchema = zod.z.object({
   timestamp: zod.z.string()
 });
 zod.z.array(painPointSchema);
+function decidePick(region, report, config = {}) {
+  if (!isSelectable(region, config)) return "ignore";
+  return report.some((p) => p.region === region) ? "clear" : "select";
+}
 function isSelectable(key, config = {}) {
   const s = config[key];
   if (s?.visible === false) return false;
   return s?.selectable ?? true;
 }
+var defaultUi = {
+  text: "#1e293b",
+  mutedText: "#475569",
+  panelBg: "#fff",
+  border: "#e2e8f0",
+  badgeBg: "#f1f5f9",
+  danger: "#dc2626"
+};
+function uiColors(palette) {
+  return { ...defaultUi, ...palette?.ui ?? {} };
+}
 var defaultPalette = {
   body: "#d2d7de",
   hover: "#8fd0cd",
@@ -263,6 +278,7 @@ function BodyMap3D(props) {
     showRegionCode = true,
     className
   } = props;
+  const chrome = uiColors(palette);
   const L = mergeLabels(locale, labels);
   const UI = { ...locale === "en" ? UI_EN : UI_DA, ...ui };
   const nameOf = (key) => L.regions[key] ?? getRegion(key)?.label ?? key;
@@ -294,6 +310,7 @@ function BodyMap3D(props) {
   sexRef.current = sex;
   const setSelectedRef = react.useRef(setSelected);
   setSelectedRef.current = setSelected;
+  const pickRef = react.useRef(() => "ignore");
   const setReadyRef = react.useRef(setReady);
   setReadyRef.current = setReady;
   const apiRef = react.useRef(null);
@@ -489,7 +506,12 @@ function BodyMap3D(props) {
     const onUp = (e) => {
       if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6 || Date.now() - downT > 450) return;
       const k = pick(e.clientX, e.clientY);
-      if (k) setSelectedRef.current(k);
+      if (!k) return;
+      const outcome = pickRef.current(k);
+      if (outcome === "clear") {
+        hovered = null;
+        canvas.style.cursor = "default";
+      }
     };
     canvas.addEventListener("pointerdown", onDown);
     canvas.addEventListener("pointermove", onMove);
@@ -545,6 +567,12 @@ function BodyMap3D(props) {
     commit(report.filter((p) => p.region !== k));
     setSelected(null);
   };
+  pickRef.current = (k) => {
+    const what = decidePick(k, reportRef.current, configRef.current ?? {});
+    if (what === "clear") removePain(k);
+    else if (what === "select") setSelected(k);
+    return what;
+  };
   const changeSex = (s) => {
     if (sexProp === void 0) setInternalSex(s);
     onSexChange?.(s);
@@ -562,20 +590,20 @@ function BodyMap3D(props) {
     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 #e2e8f0", borderRadius: 14, padding: 16, background: "#fff" }, children: [
+      /* @__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: "#64748b", background: "#f1f5f9", borderRadius: 6, padding: "2px 7px" }, children: [
+          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: "#94a3b8", marginBottom: 7 }, children: L.intensity }),
+        /* @__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: "#94a3b8", marginBottom: 7 }, children: L.quality }),
+        /* @__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: "#ef4444", borderColor: "#f6c9c9" }, children: L.remove })
-      ] }) : showEmptyHint ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "bodymap3d-empty", style: { border: "1px solid #e2e8f0", borderRadius: 14, padding: 16, background: "#fff", color: "#94a3b8", fontSize: 13.5 }, children: UI.hoverHint }) : null })
+        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 })
     ] })
   ] });
 }