@fusion.dev/helix-graph 0.187.0 → 0.189.0

package/dist/isometric/geometry.d.ts

@@ -1,97 +1,19 @@
 /**
  * Where an isometric diagram puts each note, link, and group, as SVG path
- * data, seen from a camera that can turn and tilt. Pure, so the arithmetic a
- * picture hides is held by a spec: a solid painted in the wrong order is
- * covered by the one it should cover, and a face turned away is drawn over
- * the faces in front of it.
+ * data, seen from a camera that can turn and tilt.
+ *
+ * **The projection and the solids are `helix-core`'s**, which every spatial
+ * drawing shares, and are exported again here for the driver. What is here
+ * is the graph's own: which solid a shape is, its links, its groups' plates,
+ * and its layouts. Pure, so a spec holds the arithmetic a picture hides.
  *
  * **The floor is measured in cells.** A note at `x: 2, y: 1` stands two cells
- * across and one back, and a solid's height is in the same unit. From the
- * isometric camera, across runs down to the right on the page and back runs
- * up to the right, as a plan is seen from its front left corner.
- */
-/** A point on the page, in cells. */
-export interface Point {
-    x: number;
-    y: number;
-}
-/**
- * Where the diagram is seen from, in degrees: `turn`, the compass bearing
- * the camera looks from, and `tilt`, its height above the floor, from a low
- * angle to 90, a plan seen straight down.
- */
-export interface Camera {
-    tilt: number;
-    turn: number;
-}
-/**
- * The isometric camera: from the front left corner, at the height where the
- * floor's two axes and the vertical are drawn the same length, 35.26 degrees.
- */
-export declare const ISOMETRIC: Camera;
-/** The lowest a camera may tilt, below which the floor folds to a line. */
-export declare const LOWEST_TILT = 15;
-/** A camera's view of the floor. */
-export interface Projection {
-    /** A place on the floor and a height, on the page. */
-    at(x: number, y: number, z?: number): Point;
-    /** How near the camera a place on the floor stands: the larger, the nearer. */
-    depth(x: number, y: number): number;
-    /** The place on the floor drawn at a point on the page. */
-    floorAt(point: Point): Point;
-    /** Toward the camera from the floor, a unit length: across, back, and up. */
-    toward: readonly [number, number, number];
-    /** Across the page, in floor directions: how far a step across or back goes to the right. */
-    across: readonly [number, number];
-}
-/**
- * The view from `camera`, an orthographic one: the floor turned by `turn`
- * and seen from `tilt` above it, with no perspective, so a cell is the same
- * size wherever it stands.
+ * across and one back, and a solid's height is in the same unit.
  */
-export declare const projectionOf: (camera: Camera) => Projection;
-/** The solids a note can be drawn as, one for each of the frame's shapes. */
-export type Solid = 'block' | 'cylinder' | 'pyramid';
+import { type Camera, type Drawn, depthOrder, type Face, ISOMETRIC, LOWEST_TILT, type PagePoint as Point, type Projection, projectionOf, type Solid, solid } from '@fusion.dev/helix-core';
+export { type Camera, type Drawn, depthOrder, type Face, ISOMETRIC, LOWEST_TILT, type Point, type Projection, projectionOf, type Solid, solid, };
 /** A note's shape, as the frame names it, and the solid that stands for it. */
 export declare const solidOf: (shape: string | undefined) => Solid;
-/** One face of a solid, as path data, and how far it is darkened toward black. */
-export interface Face {
-    d: string;
-    /** From 0, the note's own color, as a top facing the light takes it. */
-    darken: number;
-}
-/** One note drawn as a solid: the faces the camera sees, in the order to paint them. */
-export interface Drawn {
-    /** How high the solid reaches on the page: the top of its outline, which its name is drawn above. */
-    crown: number;
-    /** The faces the camera sees, the sides first and the top last. */
-    faces: Face[];
-    /** The outline of the whole solid, which a ring is drawn along. */
-    outline: string;
-    /** The middle of the solid's top, which its name is centered over. */
-    peak: Point;
-}
-/**
- * A note as a solid, standing on the floor at `x` and `y`, `width` cells
- * across its footprint and `height` cells tall, as the camera sees it.
- *
- * **Each face is drawn only where it turns toward the camera**, so a block
- * shows its top and the two sides that face the viewer from any turn, and a
- * plan seen from straight above shows tops alone.
- */
-export declare const solid: (projection: Projection, kind: Solid, x: number, y: number, width: number, height: number) => Drawn;
-/**
- * The order to paint notes in, back to front: by how near the camera each
- * stands on the floor, and the taller first where two stand level.
- *
- * Exact for notes on whole cells, which do not overlap on the floor; two
- * notes placed inside one cell can still cross.
- */
-export declare const depthOrder: <T extends {
-    height: number;
-    x: number;
-    y: number;
-}>(projection: Projection, notes: readonly T[]) => T[];
 /** A link drawn on the floor from the middle of one note's footprint to the other's. */
 export declare const floorLine: (projection: Projection, from: Point, to: Point) => string;
 /**

package/dist/isometric/geometry.js

@@ -1,147 +1,6 @@
-export const ISOMETRIC = { tilt: (Math.atan(Math.SQRT1_2) * 180) / Math.PI, turn: 45 };
-export const LOWEST_TILT = 15;
-const SCALE = Math.sqrt(1.5);
-export const projectionOf = (camera) => {
-    const turn = (camera.turn * Math.PI) / 180;
-    const tilt = (Math.min(Math.max(camera.tilt, LOWEST_TILT), 90) * Math.PI) / 180;
-    const [cos, sin] = [Math.cos(turn), Math.sin(turn)];
-    const [rise, fall] = [Math.sin(tilt), Math.cos(tilt)];
-    return {
-        across: [cos, sin],
-        at: (x, y, z = 0) => ({
-            x: (x * cos + y * sin) * SCALE,
-            y: ((x * sin - y * cos) * rise - z * fall) * SCALE,
-        }),
-        depth: (x, y) => x * sin - y * cos,
-        floorAt: (point) => {
-            const u = point.x / SCALE;
-            const v = point.y / SCALE / rise;
-            return { x: u * cos + v * sin, y: u * sin - v * cos };
-        },
-        toward: [sin * fall, -cos * fall, rise],
-    };
-};
+import { depthOrder, ISOMETRIC, LOWEST_TILT, pathData as path, projectionOf, shortNumber as short, solid, } from '@fusion.dev/helix-core';
+export { depthOrder, ISOMETRIC, LOWEST_TILT, projectionOf, solid, };
 export const solidOf = (shape) => shape === 'circle' || shape === 'ring' ? 'cylinder' : shape === 'diamond' ? 'pyramid' : 'block';
-const short = (value) => String(Math.round(value * 1000) / 1000 || 0);
-const path = (points) => `M${points.map((point) => `${short(point.x)} ${short(point.y)}`).join('L')}Z`;
-const hullOf = (points) => {
-    const sorted = [...points].sort((one, other) => one.x - other.x || one.y - other.y);
-    if (sorted.length < 3) {
-        return sorted;
-    }
-    const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
-    const half = (list) => {
-        const kept = [];
-        for (const point of list) {
-            while (kept.length >= 2 && cross(kept.at(-2), kept.at(-1), point) <= 0) {
-                kept.pop();
-            }
-            kept.push(point);
-        }
-        kept.pop();
-        return kept;
-    };
-    return [...half(sorted), ...half([...sorted].reverse())];
-};
-const darkenOf = (normal, projection) => {
-    const [x, y, z] = normal;
-    const length = Math.hypot(x, y, z) || 1;
-    const level = Math.hypot(x, y) || 1;
-    const right = (x * projection.across[0] + y * projection.across[1]) / level;
-    return Math.max(0, 0.28 + 0.113 * right) * (1 - z / length);
-};
-const facing = (normal, projection) => normal[0] * projection.toward[0] +
-    normal[1] * projection.toward[1] +
-    normal[2] * projection.toward[2] >
-    1e-6;
-const ARC = 12;
-export const solid = (projection, kind, x, y, width, height) => {
-    const half = width / 2;
-    const tall = Math.max(0, height);
-    const on = (corner) => projection.at(corner[0], corner[1], corner[2]);
-    if (kind === 'cylinder') {
-        const turn = Math.atan2(projection.across[1], projection.across[0]);
-        const rim = (z, from, to) => Array.from({ length: ARC + 1 }, (_, step) => {
-            const angle = from + ((to - from) * step) / ARC;
-            return projection.at(x + Math.cos(angle) * half, y + Math.sin(angle) * half, z);
-        });
-        const near = rim(0, turn + Math.PI, turn + 2 * Math.PI);
-        const nearTop = rim(tall, turn + Math.PI, turn + 2 * Math.PI);
-        const farTop = rim(tall, turn, turn + Math.PI);
-        const top = rim(tall, 0, 2 * Math.PI).slice(0, -1);
-        const side = projection.toward[2] < 0.9999 && tall > 0;
-        const outline = hullOf([...farTop, ...nearTop, ...near]);
-        return {
-            crown: Math.min(...outline.map((point) => point.y)),
-            faces: [
-                ...(side ? [{ d: path([...nearTop, ...[...near].reverse()]), darken: 0.28 }] : []),
-                { d: path(top), darken: 0 },
-            ],
-            outline: path(outline),
-            peak: projection.at(x, y, tall),
-        };
-    }
-    const floor = [
-        [x - half, y - half, 0],
-        [x + half, y - half, 0],
-        [x + half, y + half, 0],
-        [x - half, y + half, 0],
-    ];
-    const outward = [
-        [0, -1, 0],
-        [1, 0, 0],
-        [0, 1, 0],
-        [-1, 0, 0],
-    ];
-    const faces = [];
-    let corners;
-    let peak;
-    if (kind === 'pyramid') {
-        const apex = [x, y, Math.max(tall, width)];
-        corners = [...floor, apex];
-        peak = on(apex);
-        floor.forEach((corner, at) => {
-            const next = floor[(at + 1) % 4];
-            const [ox, oy] = outward[at];
-            const normal = [ox * apex[2], oy * apex[2], half];
-            if (facing(normal, projection)) {
-                faces.push({
-                    d: path([on(corner), on(next), on(apex)]),
-                    darken: darkenOf(normal, projection),
-                });
-            }
-        });
-    }
-    else {
-        const up = (corner) => [corner[0], corner[1], tall];
-        corners = [...floor, ...floor.map(up)];
-        peak = projection.at(x, y, tall);
-        if (tall > 0) {
-            floor.forEach((corner, at) => {
-                const next = floor[(at + 1) % 4];
-                const normal = outward[at];
-                if (facing(normal, projection)) {
-                    faces.push({
-                        d: path([on(up(corner)), on(up(next)), on(next), on(corner)]),
-                        darken: darkenOf(normal, projection),
-                    });
-                }
-            });
-        }
-        faces.push({ d: path(floor.map(up).map(on)), darken: 0 });
-    }
-    const outline = hullOf(corners.map(on));
-    return {
-        crown: Math.min(...outline.map((point) => point.y)),
-        faces,
-        outline: path(outline),
-        peak,
-    };
-};
-export const depthOrder = (projection, notes) => [...notes].sort((one, other) => {
-    const nearer = projection.depth(one.x, one.y) - projection.depth(other.x, other.y);
-    return Math.abs(nearer) > 1e-9 ? nearer : other.height - one.height;
-});
 export const floorLine = (projection, from, to) => {
     const start = projection.at(from.x, from.y);
     const end = projection.at(to.x, to.y);

package/dist/three/three-driver.js

@@ -1,4 +1,4 @@
-import { reportRuntime } from '@fusion.dev/helix-core';
+import { pageBudget, reportRuntime } from '@fusion.dev/helix-core';
 import { AdditiveBlending, BoxGeometry, BufferAttribute, BufferGeometry, DoubleSide, Euler, InstancedBufferAttribute, InstancedMesh, Matrix4, Mesh, NormalBlending, OctahedronGeometry, PerspectiveCamera, Points, Quaternion, Raycaster, Scene, ShaderMaterial, TOUCH, Vector2, Vector3, WebGLRenderer, } from 'three';
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
@@ -9,7 +9,6 @@ import { linkKey } from '../connect-graph/diff.js';
 import { rgbOf } from '../connect-graph/looks.js';
 import { ease, gesturesHeld, groupsOver, isLight, namesOver, signalsOver, } from '../overlay/overlay.js';
 import { surfaceOf } from '../shapes/surface.js';
-import { pageBudget } from './budget.js';
 const SHAPES = { circle: 0, diamond: 2, ring: 0, square: 1 };
 const REACH = 100;
 const STEP = 250;
@@ -1099,14 +1098,14 @@ export const threeDriver = (container, options = {}) => {
         release: () => renderer.forceContextLoss(),
         restore: () => renderer.forceContextRestore(),
     };
-    pageBudget.join(holder);
+    pageBudget().join(holder);
     const nearby = typeof IntersectionObserver === 'function'
         ? new IntersectionObserver((entries) => {
             if (entries.at(-1)?.isIntersecting ?? true) {
-                pageBudget.near(holder);
+                pageBudget().near(holder);
             }
             else {
-                pageBudget.far(holder, performance.now());
+                pageBudget().far(holder, performance.now());
             }
         }, { rootMargin: '50%' })
         : undefined;
@@ -1381,7 +1380,7 @@ export const threeDriver = (container, options = {}) => {
             stopped = true;
             canvas.removeEventListener('webglcontextrestored', restored);
             nearby?.disconnect();
-            pageBudget.leave(holder);
+            pageBudget().leave(holder);
             cancelAnimationFrame(pending);
             cancelAnimationFrame(hovering);
             cancelAnimationFrame(resizing);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-graph",
   "description": "Connects the Helix Graph frame to a graph renderer: Sigma.js, cosmos.gl, three.js, or a driver of your own.",
-  "version": "0.187.0",
+  "version": "0.189.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -59,12 +59,12 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.187.0"
+    "@fusion.dev/helix-core": "0.189.0"
   },
   "devDependencies": {
     "@cosmos.gl/graph": "^3.4.2",
-    "@fusion.dev/helix-headless": "0.187.0",
-    "@fusion.dev/helix-testing": "0.187.0",
+    "@fusion.dev/helix-headless": "0.189.0",
+    "@fusion.dev/helix-testing": "0.189.0",
     "@types/bun": "^1.4.2",
     "@types/three": "^0.186.0",
     "d3-force-3d": "^3.0.6",

package/dist/three/budget.d.ts

@@ -1,49 +0,0 @@
-/**
- * How many WebGL contexts the three.js driver keeps live on one page.
- *
- * **A browser holds only so many, and drops the oldest without asking**:
- * Chrome about sixteen on a desktop and fewer on a phone. A page of 3D panels
- * past that lost a graph it could not get back, and the maps, Aura, and
- * Strands on the same page count against the same limit. Six leaves them
- * room.
- */
-export declare const LIVE = 6;
-/** One drawing that holds a context: it gives the context back, and takes it again. */
-export interface Holder {
-    release(): void;
-    restore(): void;
-}
-/**
- * Keeps the contexts a page's drawings hold under `cap`.
- *
- * **A drawing near the screen always keeps its context.** Past the cap, the
- * drawings off screen give theirs back, the one away longest first, and each
- * takes its context again as it comes near. So a page of any number of
- * graphs holds as many contexts as it shows at once, and never more than
- * `cap` beyond that.
- */
-export declare const contextBudget: (cap?: number) => {
-    /** A drawing far from the screen, from `now`. */
-    far(holder: Holder, now: number): void;
-    /** How many drawings hold a context now. */
-    readonly holding: number;
-    /** A new drawing, which made a context to draw with. */
-    join(holder: Holder): void;
-    /** A drawing that ended and freed its context itself. */
-    leave(holder: Holder): void;
-    /** A drawing near the screen, which takes its context again where it gave it back. */
-    near(holder: Holder): void;
-};
-/** The budget every three.js driver on the page shares. */
-export declare const pageBudget: {
-    /** A drawing far from the screen, from `now`. */
-    far(holder: Holder, now: number): void;
-    /** How many drawings hold a context now. */
-    readonly holding: number;
-    /** A new drawing, which made a context to draw with. */
-    join(holder: Holder): void;
-    /** A drawing that ended and freed its context itself. */
-    leave(holder: Holder): void;
-    /** A drawing near the screen, which takes its context again where it gave it back. */
-    near(holder: Holder): void;
-};

package/dist/three/budget.js

@@ -1,43 +0,0 @@
-export const LIVE = 6;
-export const contextBudget = (cap = LIVE) => {
-    const holding = new Set();
-    const away = new Map();
-    const balance = () => {
-        const longest = [...away]
-            .filter(([holder]) => holding.has(holder))
-            .sort((one, other) => one[1] - other[1]);
-        for (const [holder] of longest) {
-            if (holding.size <= cap) {
-                return;
-            }
-            holding.delete(holder);
-            holder.release();
-        }
-    };
-    return {
-        far(holder, now) {
-            away.set(holder, now);
-            balance();
-        },
-        get holding() {
-            return holding.size;
-        },
-        join(holder) {
-            holding.add(holder);
-            balance();
-        },
-        leave(holder) {
-            holding.delete(holder);
-            away.delete(holder);
-        },
-        near(holder) {
-            away.delete(holder);
-            if (!holding.has(holder)) {
-                holding.add(holder);
-                holder.restore();
-            }
-            balance();
-        },
-    };
-};
-export const pageBudget = contextBudget();