@fusion.dev/helix-plot 0.191.0 → 0.193.0

package/dist/three/stage.js

@@ -145,7 +145,11 @@ export const createStage = (container, options) => {
             }
             const mark = document.createElement('span');
             mark.textContent = text;
-            mark.style.cssText = `position:absolute;left:${((on.x + 1) / 2) * width}px;top:${((1 - on.y) / 2) * height}px;translate:-50% -50%;white-space:nowrap;font:${strong ? 600 : 500} ${strong ? 13 : 11}px ${font};color:${strong ? colors?.ink : colors?.quiet};text-shadow:0 0 3px ${colors?.ground},0 0 3px ${colors?.ground}`;
+            const size = strong ? 'var(--helix-text-sm, 13px)' : 'var(--helix-text-xs, 11px)';
+            const weight = strong
+                ? 'var(--helix-weight-semibold, 600)'
+                : 'var(--helix-weight-medium, 500)';
+            mark.style.cssText = `position:absolute;left:${((on.x + 1) / 2) * width}px;top:${((1 - on.y) / 2) * height}px;translate:-50% -50%;white-space:nowrap;font-family:${font};font-size:${size};font-weight:${weight};line-height:1;color:${strong ? colors?.ink : colors?.quiet};text-shadow:0 0 3px ${colors?.ground},0 0 3px ${colors?.ground}`;
             marks.push(mark);
         };
         const h = HALF;
@@ -226,22 +230,47 @@ export const createStage = (container, options) => {
             return;
         }
         const { high, low } = framed;
-        const center = low.clone().add(high).multiplyScalar(0.5);
         const toward = camera.position.clone().sub(controls.target).normalize();
         const right = new Vector3(0, 1, 0).cross(toward).normalize();
         const up = toward.clone().cross(right).normalize();
         const tanUp = Math.tan((camera.fov * Math.PI) / 360);
         const tanAcross = tanUp * camera.aspect;
-        let distance = 0;
+        const corners = [];
         for (const x of [low.x, high.x]) {
             for (const y of [low.y, high.y]) {
                 for (const z of [low.z, high.z]) {
-                    const corner = new Vector3(x, y, z).sub(center);
-                    const ahead = corner.dot(toward);
-                    distance = Math.max(distance, ahead + Math.abs(corner.dot(right)) / tanAcross, ahead + Math.abs(corner.dot(up)) / tanUp);
+                    corners.push(new Vector3(x, y, z));
                 }
             }
         }
+        const distanceFrom = (center) => {
+            let far = 0;
+            for (const corner of corners) {
+                const off = corner.clone().sub(center);
+                const ahead = off.dot(toward);
+                far = Math.max(far, ahead + Math.abs(off.dot(right)) / tanAcross, ahead + Math.abs(off.dot(up)) / tanUp);
+            }
+            return far;
+        };
+        const center = low.clone().add(high).multiplyScalar(0.5);
+        let distance = distanceFrom(center);
+        for (let round = 0; round < 4; round++) {
+            let [left, rightmost, bottom, top] = [Infinity, -Infinity, Infinity, -Infinity];
+            for (const corner of corners) {
+                const off = corner.clone().sub(center);
+                const depth = Math.max(distance - off.dot(toward), 1e-6);
+                const across = off.dot(right) / depth / tanAcross;
+                const rise = off.dot(up) / depth / tanUp;
+                left = Math.min(left, across);
+                rightmost = Math.max(rightmost, across);
+                bottom = Math.min(bottom, rise);
+                top = Math.max(top, rise);
+            }
+            center
+                .add(right.clone().multiplyScalar(((left + rightmost) / 2) * tanAcross * distance))
+                .add(up.clone().multiplyScalar(((bottom + top) / 2) * tanUp * distance));
+            distance = distanceFrom(center);
+        }
         distance *= 1.06;
         controls.target.copy(center);
         camera.position.copy(center).add(toward.multiplyScalar(distance));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-plot",
   "description": "Connects the Helix Spatial Heatmap, Spatial Scatter Chart, and Spatial Surface Chart to three.js, which draws them in three dimensions.",
-  "version": "0.191.0",
+  "version": "0.193.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -35,11 +35,11 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.191.0"
+    "@fusion.dev/helix-core": "0.193.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-headless": "0.191.0",
-    "@fusion.dev/helix-testing": "0.191.0",
+    "@fusion.dev/helix-headless": "0.193.0",
+    "@fusion.dev/helix-testing": "0.193.0",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "three": "^0.186.1"