@broberg/bodymap 0.2.8 → 0.3.0

package/dist/three.d.ts

@@ -138,6 +138,21 @@ interface BodyMap3DUiLabels {
     female: string;
     hoverHint: string;
 }
+/**
+ * How much of the RUNNER-UP region bleeds into this vertex (F052.21).
+ *
+ * Takes SQUARED distances — what the assignment loop already has.
+ *
+ *   ratio = d1 / (d1 + d2)   → 0 at the anchor · 0.5 where two anchors are equidistant
+ *
+ * Returns 0 well inside a region and rises to 0.5 exactly at the seam, so the
+ * nearest region ALWAYS dominates and a vertex can never be painted mostly as
+ * its neighbour. Smoothstepped, so the fade has no visible start line of its own.
+ *
+ * This is a look, not a contract: hit-testing never sees this number, and the
+ * PainReport is unchanged.
+ */
+declare function seamBlend(nearestSq: number, secondSq: number): number;
 interface BodyMap3DProps {
     /** URLs of the male/female body GLBs (you host them; reference GLBs ship under `@broberg/bodymap/models/`). */
     models: BodyMap3DModels;
@@ -171,4 +186,4 @@ interface BodyMap3DProps {
 }
 declare function BodyMap3D(props: BodyMap3DProps): react.JSX.Element;
 
-export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, serializeReport };
+export { BodyMap3D, type BodyMap3DModels, type BodyMap3DProps, type BodyMap3DSex, type BodyMap3DUiLabels, seamBlend, serializeReport };

package/dist/three.js

@@ -214,6 +214,17 @@ var ANCHORS = {
   foot_left: [-0.1, 0.02, 0.11],
   foot_right: [0.1, 0.02, 0.11]
 };
+var SEAM = 0.18;
+function seamBlend(nearestSq, secondSq) {
+  const d1 = Math.sqrt(nearestSq), d2 = Math.sqrt(secondSq);
+  const sum = d1 + d2;
+  if (!(sum > 0)) return 0;
+  const ratio = d1 / sum;
+  const t = (ratio - (0.5 - SEAM)) / SEAM;
+  if (t <= 0) return 0;
+  if (t >= 1) return 0.5;
+  return t * t * (3 - 2 * t) * 0.5;
+}
 var ANCHOR_KEYS = Object.keys(ANCHORS);
 for (const k of ANCHOR_KEYS) ANCHORS[k][0] = -ANCHORS[k][0];
 function mergeLabels(locale, overrides) {
@@ -356,6 +367,8 @@ function BodyMap3D(props) {
     let modelRoot = null;
     let bodyMesh = null;
     let vertexRegion = [];
+    let vertexNeighbour = [];
+    let vertexBlend = new Float32Array(0);
     let colorAttr = null;
     let hovered = null;
     const loader = new GLTFLoader();
@@ -367,14 +380,32 @@ function BodyMap3D(props) {
       if (selectedRef.current === key) return paletteRef.current.selected;
       return baseColorFor(key, paletteRef.current);
     };
-    const colorRegion = (key, hex) => {
+    const tmp2 = new THREE.Color();
+    const colourOf = (key) => hovered === key ? paletteRef.current.hover : restingHex(key);
+    const paint = () => {
       if (!colorAttr) return;
-      tmp.set(hex);
-      for (let i = 0; i < vertexRegion.length; i++) if (vertexRegion[i] === key) colorAttr.setXYZ(i, tmp.r, tmp.g, tmp.b);
+      const cache = /* @__PURE__ */ new Map();
+      const col = (k) => {
+        let c = cache.get(k);
+        if (!c) {
+          c = new THREE.Color(colourOf(k));
+          cache.set(k, c);
+        }
+        return c;
+      };
+      for (let i = 0; i < vertexRegion.length; i++) {
+        tmp.copy(col(vertexRegion[i]));
+        const w = vertexBlend[i];
+        if (w > 0) {
+          tmp2.copy(col(vertexNeighbour[i]));
+          tmp.lerp(tmp2, w);
+        }
+        colorAttr.setXYZ(i, tmp.r, tmp.g, tmp.b);
+      }
       colorAttr.needsUpdate = true;
     };
     const refresh = () => {
-      for (const k of ANCHOR_KEYS) colorRegion(k, hovered === k ? paletteRef.current.hover : restingHex(k));
+      paint();
       renderFrame();
     };
     const loadModel = (which) => {
@@ -403,18 +434,27 @@ function BodyMap3D(props) {
           const n = pos.count;
           const cols = new Float32Array(n * 3);
           vertexRegion = new Array(n);
+          vertexNeighbour = new Array(n);
+          vertexBlend = new Float32Array(n);
           const v = new THREE.Vector3();
           for (let i = 0; i < n; i++) {
             v.fromBufferAttribute(pos, i).applyMatrix4(bodyMesh.matrixWorld);
-            let best = 0, bd = Infinity;
+            let best = 0, second = 0, bd = Infinity, sd = Infinity;
             for (let a = 0; a < anchorVecs.length; a++) {
               const d = v.distanceToSquared(anchorVecs[a]);
               if (d < bd) {
+                sd = bd;
+                second = best;
                 bd = d;
                 best = a;
+              } else if (d < sd) {
+                sd = d;
+                second = a;
               }
             }
             vertexRegion[i] = ANCHOR_KEYS[best];
+            vertexNeighbour[i] = ANCHOR_KEYS[second];
+            vertexBlend[i] = seamBlend(bd, sd);
           }
           colorAttr = new THREE.BufferAttribute(cols, 3);
           geo.setAttribute("color", colorAttr);
@@ -474,10 +514,8 @@ function BodyMap3D(props) {
       if ((e.buttons || 0) !== 0) return;
       const k = pick(e.clientX, e.clientY);
       if (k === hovered) return;
-      const prev = hovered;
       hovered = k;
-      if (prev) colorRegion(prev, restingHex(prev));
-      if (k) colorRegion(k, paletteRef.current.hover);
+      paint();
       canvas.style.cursor = k ? "pointer" : "default";
       renderFrame();
     };
@@ -586,6 +624,6 @@ function BodyMap3D(props) {
   ] });
 }
 
-export { BodyMap3D, serializeReport };
+export { BodyMap3D, seamBlend, serializeReport };
 //# sourceMappingURL=three.js.map
 //# sourceMappingURL=three.js.map