@fusion.dev/helix-graph 0.125.0 → 0.127.0

package/dist/model/model.js

@@ -0,0 +1,50 @@
+import { shapeFromTriangles } from '../shapes/triangles.js';
+export const shapeFromModel = async (source, options = {}) => {
+    const which = typeof source === 'string' ? `The model ${source}` : 'The model given as bytes';
+    const [{ GLTFLoader }, { Mesh, Vector3 }] = await Promise.all([
+        import('three/addons/loaders/GLTFLoader.js'),
+        import('three'),
+    ]).catch((cause) => {
+        throw new Error(`${which} could not be read, because three.js could not be loaded. Install three alongside @fusion.dev/helix-graph.`, { cause });
+    });
+    const loader = new GLTFLoader();
+    const model = await (typeof source === 'string'
+        ? loader.loadAsync(source)
+        : loader.parseAsync(source, '')).catch((cause) => {
+        throw new Error(`${which} could not be read as a glTF model: ${String(cause)}`, { cause });
+    });
+    model.scene.updateMatrixWorld(true);
+    const corners = [];
+    const names = [];
+    const ofTriangle = [];
+    const point = new Vector3();
+    model.scene.traverse((object) => {
+        if (!(object instanceof Mesh)) {
+            return;
+        }
+        const geometry = object.geometry;
+        const place = geometry.getAttribute('position');
+        if (!place) {
+            return;
+        }
+        const name = object.name || geometry.name || '';
+        let part = names.indexOf(name);
+        if (name && part < 0) {
+            part = names.push(name) - 1;
+        }
+        const index = geometry.getIndex();
+        const count = index ? index.count : place.count;
+        for (let at = 0; at < count; at++) {
+            point.fromBufferAttribute(place, index ? index.getX(at) : at).applyMatrix4(object.matrixWorld);
+            corners.push(point.x, point.y, point.z);
+        }
+        for (let triangle = 0; triangle < Math.floor(count / 3); triangle++) {
+            ofTriangle.push(part);
+        }
+    });
+    const named = names.length > 1 && !ofTriangle.includes(-1);
+    return shapeFromTriangles(corners, null, {
+        ...options,
+        ...(named ? { regions: { names, ofTriangle } } : {}),
+    });
+};

package/dist/overlay/overlay.d.ts

@@ -7,11 +7,6 @@ export type OnScreen = (id: string) => {
     x: number;
     y: number;
 } | undefined;
-/** A point and how to bend toward it: the control point of a curve on screen. */
-export type Bend = (from: string, to: string) => {
-    x: number;
-    y: number;
-} | undefined;
 /** Whether an `rgb()` color is light, which a light ink says the ground is dark. */
 export declare const isLight: (color: string) => boolean;
 /** Eases in and out, so a signal leaves and arrives gently. */
@@ -23,13 +18,19 @@ export interface Box {
     right: number;
     top: number;
 }
+/**
+ * How many pixels a layer has for each of the page's: the screen's own, and
+ * never fewer than two, so on a screen of one a name's edges and a signal's
+ * tail are drawn twice as finely and smoothed down. At most three.
+ */
+export declare const overlayDensity: () => number;
 /**
  * **Signals are drawn on a canvas of the driver's own**, over the renderer's,
  * so a signal never makes the renderer redraw the graph: ten signals a second
  * over ten thousand notes draw ten dots. It draws only while something is in
  * flight, and takes no pointer, so a press reaches the note under it.
  */
-export declare const signalsOver: (container: HTMLElement, onScreen: OnScreen, bend?: Bend) => {
+export declare const signalsOver: (container: HTMLElement, onScreen: OnScreen) => {
     look: (looks: GraphLooks) => void;
     signal: (from: string, to: string, colors: {
         from: string;
@@ -50,14 +51,18 @@ export interface Named {
  * order given.
  */
 export declare const namesOver: (container: HTMLElement, onScreen: OnScreen) => {
+    /** The boxes the names last drawn take. */
+    boxes: () => readonly Box[];
     draw: (looks: GraphLooks | undefined, named: readonly Named[]) => void;
     stop: () => void;
 };
 /**
  * **Group names are drawn on a canvas of their own**, under the signals', and
  * drawn again whenever the driver says the view moved, so they follow it.
+ * `avoid` says where notes' names are drawn, which a group's name keeps
+ * clear of: moved a line, or left out where no line is clear.
  */
-export declare const groupsOver: (container: HTMLElement, onScreen: OnScreen) => {
+export declare const groupsOver: (container: HTMLElement, onScreen: OnScreen, avoid?: () => readonly Box[]) => {
     draw: () => void;
     look: (next: GraphLooks) => void;
     set: (next: readonly GraphGroup[]) => void;
@@ -69,7 +74,8 @@ export declare const groupsOver: (container: HTMLElement, onScreen: OnScreen) =>
  * frame's buttons stopped working with them. A listener on the container in
  * the capture phase runs before the renderer's, and keeps from it what the
  * page has: the plain wheel and one finger while cooperative, and every
- * gesture while a waiting surface is off.
+ * gesture while a waiting surface is off, a double click among them, which
+ * zooms where a renderer zooms on one. A single click still selects a note.
  */
 export declare const gesturesHeld: (container: HTMLElement) => {
     /**

package/dist/overlay/overlay.js

@@ -1,55 +1,28 @@
-import { mixRgb } from '../connect-graph/looks.js';
+import { mixRgb, rgbOf } from '../connect-graph/looks.js';
 const SPEED = 340;
 const QUICKEST = 450;
 const SLOWEST = 1400;
 const ARRIVAL = 520;
 const FLYING = 400;
 const withAlpha = (color, alpha) => {
-    const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    const [red, green, blue] = rgbOf(color);
     return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 };
 const TAIL = 120;
 const PIECES = 14;
-const BOW = 0.16;
-const BOW_MOST = 90;
 const SPARK = 0.22;
-const on = (a, c, b, t) => {
-    const u = 1 - t;
-    return {
-        x: u * u * a.x + 2 * u * t * c.x + t * t * b.x,
-        y: u * u * a.y + 2 * u * t * c.y + t * t * b.y,
-    };
-};
-const bowed = (from, to) => {
-    const dx = to.x - from.x;
-    const dy = to.y - from.y;
-    const length = Math.hypot(dx, dy) || 1;
-    const bow = Math.min(length * BOW, BOW_MOST) * 2;
-    return {
-        x: (from.x + to.x) / 2 - (dy / length) * bow,
-        y: (from.y + to.y) / 2 + (dx / length) * bow,
-    };
-};
-const bounded = (from, to, toward) => {
-    const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-    const far = Math.hypot(toward.x - middle.x, toward.y - middle.y);
-    const most = Math.max(Math.hypot(to.x - from.x, to.y - from.y) * 0.9, 12);
-    if (far <= most) {
-        return toward;
-    }
-    return {
-        x: middle.x + ((toward.x - middle.x) * most) / far,
-        y: middle.y + ((toward.y - middle.y) * most) / far,
-    };
-};
-const trace = (context, a, c, b) => {
+const on = (a, b, t) => ({
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+});
+const trace = (context, a, b) => {
     context.beginPath();
     context.moveTo(a.x, a.y);
-    context.quadraticCurveTo(c.x, c.y, b.x, b.y);
+    context.lineTo(b.x, b.y);
 };
-const comet = (context, leaves, arrives, from, bend, to, along, through, glowing) => {
+const comet = (context, leaves, arrives, from, to, along, through, glowing) => {
     const strength = glowing ? 1.25 : 1;
-    const length = Math.hypot(bend.x - from.x, bend.y - from.y) + Math.hypot(to.x - bend.x, to.y - bend.y) || 1;
+    const length = Math.hypot(to.x - from.x, to.y - from.y) || 1;
     const color = mixRgb(leaves, arrives, along);
     context.lineCap = 'round';
     const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
@@ -57,15 +30,15 @@ const comet = (context, leaves, arrives, from, bend, to, along, through, glowing
     line.addColorStop(1, withAlpha(arrives, 0.16 * Math.sin(Math.PI * through)));
     context.strokeStyle = line;
     context.lineWidth = 1;
-    trace(context, from, bend, to);
+    trace(context, from, to);
     context.stroke();
     const reach = Math.min(TAIL / length, along);
     context.lineCap = 'butt';
-    let behind = on(from, bend, to, along - reach);
+    let behind = on(from, to, along - reach);
     for (let piece = 1; piece <= PIECES; piece++) {
         const share = piece / PIECES;
         const t = along - reach * (1 - share);
-        const ahead = on(from, bend, to, t);
+        const ahead = on(from, to, t);
         context.strokeStyle = withAlpha(mixRgb(leaves, arrives, t), (glowing ? 0.85 : 1) * share * share);
         context.lineWidth = (0.4 + 2.2 * share) * strength;
         context.beginPath();
@@ -74,7 +47,7 @@ const comet = (context, leaves, arrives, from, bend, to, along, through, glowing
         context.stroke();
         behind = ahead;
     }
-    const head = on(from, bend, to, along);
+    const head = on(from, to, along);
     const bloom = 9 * strength;
     const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, bloom);
     light.addColorStop(0, glowing ? 'rgba(255, 255, 255, 0.95)' : withAlpha(color, 1));
@@ -109,24 +82,28 @@ const arrive = (context, color, at, gone) => {
     context.stroke();
 };
 export const isLight = (color) => {
-    const [red = 0, green = 0, blue = 0] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    const [red, green, blue] = rgbOf(color, 0);
     return (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255 > 0.5;
 };
 export const ease = (at) => (at < 0.5 ? 2 * at * at : 1 - (-2 * at + 2) ** 2 / 2);
-const nameGroups = (context, groups, looks, at) => {
+const SAMPLED = 96;
+const nameGroups = (context, groups, looks, at, avoid) => {
     context.font = `650 11px ${looks.font}`;
     context.letterSpacing = '0.14em';
     context.textAlign = 'center';
     context.textBaseline = 'middle';
     context.shadowColor = looks.ground;
-    const taken = [];
+    const taken = [...avoid];
     for (const group of groups) {
         let x = 0;
         let y = 0;
         let count = 0;
         const points = [];
-        for (const id of group.ids) {
-            const point = at(id);
+        const step = Math.max(1, Math.floor(group.ids.length / SAMPLED));
+        let asked = 0;
+        for (let index = 0; index < group.ids.length; index += step) {
+            asked += 1;
+            const point = at(group.ids[index]);
             if (point) {
                 x += point.x;
                 y += point.y;
@@ -134,7 +111,7 @@ const nameGroups = (context, groups, looks, at) => {
                 points.push(point);
             }
         }
-        if (count < Math.max(2, group.ids.length * 0.3)) {
+        if (count < Math.max(2, asked * 0.3)) {
             continue;
         }
         x /= count;
@@ -186,12 +163,13 @@ const layer = (container, kind) => {
     }
     return canvas;
 };
+export const overlayDensity = () => Math.min(Math.max(window.devicePixelRatio || 1, 2), 3);
 const fresh = (canvas, container) => {
     const context = canvas.getContext('2d');
     if (!context) {
         return null;
     }
-    const ratio = window.devicePixelRatio || 1;
+    const ratio = overlayDensity();
     const width = Math.round(container.clientWidth * ratio);
     const height = Math.round(container.clientHeight * ratio);
     if (canvas.width !== width || canvas.height !== height) {
@@ -202,14 +180,14 @@ const fresh = (canvas, container) => {
     context.clearRect(0, 0, width, height);
     return context;
 };
-export const signalsOver = (container, onScreen, bend) => {
+export const signalsOver = (container, onScreen) => {
     let overlay;
     let flights = [];
     let flying = 0;
     let ink = 'rgb(128, 128, 128)';
     let glowing = false;
     const fly = (now) => {
-        const context = overlay ? fresh(overlay, container) : null;
+        const context = overlay && container.isConnected ? fresh(overlay, container) : null;
         if (!context) {
             flights = [];
             return;
@@ -221,17 +199,16 @@ export const signalsOver = (container, onScreen, bend) => {
             if (!from || !to) {
                 return false;
             }
-            flight.crossing ??= Math.min(Math.max(((Math.hypot(to.x - from.x, to.y - from.y) * 1.08) / SPEED) * 1000, QUICKEST), SLOWEST);
+            flight.crossing ??= Math.min(Math.max((Math.hypot(to.x - from.x, to.y - from.y) / SPEED) * 1000, QUICKEST), SLOWEST);
             const crossing = flight.crossing;
             const gone = (now - flight.started) / crossing;
             if (gone >= 1 + ARRIVAL / crossing) {
                 return false;
             }
-            const toward = bounded(from, to, bend?.(flight.from, flight.to) ?? bowed(from, to));
             context.save();
             if (gone < 1) {
                 if (flight.animate) {
-                    comet(context, flight.leaves, flight.arrives, from, toward, to, ease(gone), gone, glowing);
+                    comet(context, flight.leaves, flight.arrives, from, to, ease(gone), gone, glowing);
                     if (gone < SPARK) {
                         spark(context, flight.leaves, from, gone / SPARK);
                     }
@@ -243,7 +220,7 @@ export const signalsOver = (container, onScreen, bend) => {
                     context.globalAlpha = 1 - gone;
                     context.strokeStyle = line;
                     context.lineWidth = 2;
-                    trace(context, from, toward, to);
+                    trace(context, from, to);
                     context.stroke();
                 }
             }
@@ -261,6 +238,9 @@ export const signalsOver = (container, onScreen, bend) => {
             glowing = isLight(looks.ink);
         },
         signal: (from, to, colors, animate) => {
+            if (!container.isConnected) {
+                return;
+            }
             overlay ??= layer(container, 'signals');
             flights.push({
                 animate,
@@ -288,13 +268,15 @@ export const signalsOver = (container, onScreen, bend) => {
 };
 export const namesOver = (container, onScreen) => {
     const canvas = layer(container, 'names');
+    let taken = [];
     return {
+        boxes: () => taken,
         draw: (looks, named) => {
             const context = looks ? fresh(canvas, container) : null;
             if (!context || !looks) {
                 return;
             }
-            const taken = [];
+            taken = [];
             for (const { id, name, strong } of named) {
                 const at = onScreen(id);
                 if (!at || looks.node(id).hidden) {
@@ -330,14 +312,14 @@ export const namesOver = (container, onScreen) => {
         },
     };
 };
-export const groupsOver = (container, onScreen) => {
+export const groupsOver = (container, onScreen, avoid = () => []) => {
     let canvas;
     let groups = [];
     let looks;
     const draw = () => {
         const context = canvas && looks ? fresh(canvas, container) : null;
         if (context && looks) {
-            nameGroups(context, groups, looks, onScreen);
+            nameGroups(context, groups, looks, onScreen, avoid());
         }
     };
     return {
@@ -357,14 +339,29 @@ export const groupsOver = (container, onScreen) => {
         },
     };
 };
+const GESTURES = 'data-helix-graph-gestures';
+const touchRule = (container) => {
+    const root = container.getRootNode();
+    const holder = root instanceof ShadowRoot ? root : document.head;
+    if (!holder || holder.querySelector(`style[${GESTURES}]`)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute(GESTURES, '');
+    style.textContent = `[${GESTURES}="cooperative"], [${GESTURES}="cooperative"] * { touch-action: pan-x pan-y !important; }
+[${GESTURES}="off"], [${GESTURES}="off"] * { touch-action: auto !important; }`;
+    holder.append(style);
+};
 export const gesturesHeld = (container) => {
     let mode = 'free';
-    const touchAction = container.style.touchAction;
     const hold = (event) => {
         if (mode === 'free') {
             return;
         }
         if (mode === 'off') {
+            if (event.type === 'click' && event.detail < 2) {
+                return;
+            }
             event.stopImmediatePropagation();
             return;
         }
@@ -383,21 +380,26 @@ export const gesturesHeld = (container) => {
             }
         }
     };
-    const held = ['wheel', 'touchstart', 'touchmove', 'mousedown'];
+    const held = ['wheel', 'touchstart', 'touchmove', 'mousedown', 'click', 'dblclick'];
     for (const type of held) {
         container.addEventListener(type, hold, { capture: true, passive: false });
     }
     return {
         set: (next) => {
             mode = next;
-            container.style.touchAction =
-                next === 'free' ? touchAction : next === 'cooperative' ? 'pan-x pan-y' : 'auto';
+            if (next === 'free') {
+                container.removeAttribute(GESTURES);
+            }
+            else {
+                touchRule(container);
+                container.setAttribute(GESTURES, next);
+            }
         },
         stop: () => {
             for (const type of held) {
                 container.removeEventListener(type, hold, { capture: true });
             }
-            container.style.touchAction = touchAction;
+            container.removeAttribute(GESTURES);
         },
     };
 };

package/dist/shapes/flat.d.ts

@@ -1,8 +1,9 @@
-import { type ShapeField } from '../connect-graph/shape-field.js';
+import { type ShapeField } from './shape-field.js';
 /**
  * A flat field from an SVG: an `<svg>` element, or its markup. Its box is
  * its `viewBox`, and its shape every path, rectangle, circle, ellipse and
- * polygon in it, together, their holes cut by the even-odd rule.
+ * polygon in it, together, their holes cut by the even-odd rule. Each shape
+ * with an `id`, or in a group with one, is a named part.
  *
  * Transforms on the shapes are not read: draw the outline in the `viewBox`'s
  * own units, as an exported icon or logo is.

package/dist/shapes/flat.js

@@ -1,4 +1,4 @@
-import { FLAT, fieldFromCells, fieldFromPath, } from '../connect-graph/shape-field.js';
+import { FLAT, fieldFromCells, fieldFromPath } from './shape-field.js';
 const pathOf = (element) => {
     const number = (name) => Number(element.getAttribute(name) ?? 0);
     switch (element.localName) {
@@ -27,18 +27,71 @@ export const shapeFromSvg = (svg, resolution = FLAT) => {
     const element = typeof svg === 'string'
         ? new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement
         : svg;
-    const [, , width = 0, height = 0] = (element.getAttribute('viewBox') ?? '')
+    const [left = 0, top = 0, width = 0, height = 0] = (element.getAttribute('viewBox') ?? '')
         .trim()
         .split(/[\s,]+/)
         .map(Number);
+    const origin = { x: Number.isFinite(left) ? left : 0, y: Number.isFinite(top) ? top : 0 };
     const box = {
         height: height || Number(element.getAttribute('height') ?? 0),
         width: width || Number(element.getAttribute('width') ?? 0),
     };
-    const path = [...element.querySelectorAll('path, rect, circle, ellipse, polygon')]
-        .map(pathOf)
-        .join(' ');
-    return fieldFromPath(path, box.width || 1, box.height || 1, resolution);
+    const shapes = [...element.querySelectorAll('path, rect, circle, ellipse, polygon')];
+    const path = shapes.map(pathOf).join(' ');
+    const field = fieldFromPath(path, box.width || 1, box.height || 1, resolution, origin);
+    const named = shapes.flatMap((shape) => {
+        const name = shape.closest('[id]')?.getAttribute('id');
+        return name && shape.closest('[id]') !== element ? [{ name, path: pathOf(shape) }] : [];
+    });
+    return named.length > 0
+        ? { ...field, regionOf: partsOf(named, field, resolution, origin) }
+        : field;
+};
+const partsOf = (named, box, resolution, origin) => {
+    const cell = Math.max(box.width, box.height, 1) / resolution;
+    const nx = Math.max(1, Math.ceil(box.width / cell));
+    const ny = Math.max(1, Math.ceil(box.height / cell));
+    const canvas = document.createElement('canvas');
+    canvas.width = nx;
+    canvas.height = ny;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const labels = new Uint16Array(nx * ny);
+    if (context) {
+        context.scale(1 / cell, 1 / cell);
+        context.translate(-origin.x, -origin.y);
+        named.forEach(({ path }, at) => {
+            const label = at + 1;
+            context.fillStyle = `rgb(${label & 255}, ${(label >> 8) & 255}, 0)`;
+            context.fill(new Path2D(path), 'evenodd');
+        });
+        const pixels = context.getImageData(0, 0, nx, ny).data;
+        for (let at = 0; at < labels.length; at++) {
+            if ((pixels[at * 4 + 3] ?? 0) === 255 && (pixels[at * 4 + 2] ?? 0) === 0) {
+                const label = (pixels[at * 4] ?? 0) + ((pixels[at * 4 + 1] ?? 0) << 8);
+                labels[at] = label <= named.length ? label : 0;
+            }
+        }
+    }
+    return (x, y) => {
+        const column = Math.floor(x / cell);
+        const row = Math.floor(y / cell);
+        for (let ring = 0; ring <= 3; ring++) {
+            for (let dy = -ring; dy <= ring; dy++) {
+                for (let dx = -ring; dx <= ring; dx++) {
+                    const c = column + dx;
+                    const r = row + dy;
+                    if (c < 0 || r < 0 || c >= nx || r >= ny) {
+                        continue;
+                    }
+                    const label = labels[r * nx + c] ?? 0;
+                    if (label > 0) {
+                        return named[label - 1]?.name;
+                    }
+                }
+            }
+        }
+        return undefined;
+    };
 };
 export const shapeFromImage = (image, { resolution = FLAT, threshold = 0.5 } = {}) => {
     const size = (value) => typeof value === 'number' ? value : value.baseVal.value;

package/dist/shapes/index.d.ts

@@ -1,6 +1,5 @@
-export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from '../connect-graph/shape-field.js';
-export { surfaceOf } from '../three/surface.js';
 export { type ImageOptions, shapeFromImage, shapeFromSvg } from './flat.js';
-export { shapeFromModel } from './model.js';
-export { box, onSphere, sphere, torus } from './solids.js';
+export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, type ShapeField, } from './shape-field.js';
+export { cuboid, onSphere, sphere, torus } from './solids.js';
+export { surfaceOf } from './surface.js';
 export { shapeFromTriangles, type TriangleOptions } from './triangles.js';

package/dist/shapes/index.js

@@ -1,6 +1,5 @@
-export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from '../connect-graph/shape-field.js';
-export { surfaceOf } from '../three/surface.js';
 export { shapeFromImage, shapeFromSvg } from './flat.js';
-export { shapeFromModel } from './model.js';
-export { box, onSphere, sphere, torus } from './solids.js';
+export { fieldFromInside as shapeFromInside, fieldFromPath as shapeFromPath, inflate, } from './shape-field.js';
+export { cuboid, onSphere, sphere, torus } from './solids.js';
+export { surfaceOf } from './surface.js';
 export { shapeFromTriangles } from './triangles.js';

package/dist/{connect-graph → shapes}/shape-field.d.ts

@@ -24,12 +24,17 @@ export interface ShapeField {
         corners: Float32Array;
         triangles: Uint32Array;
     } | undefined;
+    /**
+     * Which named part of the shape a point is in, where the shape has named
+     * parts: the part nearest it, or undefined where it has none.
+     */
+    regionOf?(x: number, y: number, z?: number): string | undefined;
     /** How wide the box is. */
     readonly width: number;
 }
 /** How many cells a field has along its longer side, flat and solid. */
 export declare const FLAT = 512;
-export declare const SOLID = 96;
+export declare const SOLID = 144;
 /**
  * A field from a grid of cells marked inside, `cell` box units a cell, x
  * fastest and z slowest: the distance to the nearest outside cell, taken
@@ -53,9 +58,13 @@ export declare const fieldFromInside: (inside: (x: number, y: number, z: number)
 /**
  * A flat field from an SVG path in a box `width` by `height`, its holes cut by
  * the even-odd rule. Drawn once to a canvas and read off it, which is what
- * lets a detailed outline become a field in a moment.
+ * lets a detailed outline become a field in a moment. A box that starts
+ * somewhere other than 0, as an SVG `viewBox` can, is given as `origin`.
  */
-export declare const fieldFromPath: (path: string, width: number, height: number, resolution?: number) => ShapeField;
+export declare const fieldFromPath: (path: string, width: number, height: number, resolution?: number, origin?: {
+    x: number;
+    y: number;
+}) => ShapeField;
 /**
  * A solid puffed out of a flat shape, as a cushion is: as thick as `depth`
  * where the shape is widest, rounding to nothing at its edge, and cut

package/dist/{connect-graph → shapes}/shape-field.js

@@ -1,5 +1,5 @@
 export const FLAT = 512;
-export const SOLID = 96;
+export const SOLID = 144;
 const FAR = 1e20;
 const line = (values, count, out) => {
     const hull = new Int32Array(count);
@@ -126,7 +126,7 @@ export const fieldFromInside = (inside, box, resolution = box.depth ? SOLID : FL
         width: box.width,
     });
 };
-export const fieldFromPath = (path, width, height, resolution = FLAT) => {
+export const fieldFromPath = (path, width, height, resolution = FLAT, origin = { x: 0, y: 0 }) => {
     const cell = Math.max(width, height, 1) / resolution;
     const nx = Math.max(1, Math.ceil(width / cell));
     const ny = Math.max(1, Math.ceil(height / cell));
@@ -137,6 +137,7 @@ export const fieldFromPath = (path, width, height, resolution = FLAT) => {
     const cells = new Uint8Array(nx * ny);
     if (context) {
         context.scale(1 / cell, 1 / cell);
+        context.translate(-origin.x, -origin.y);
         context.fill(new Path2D(path), 'evenodd');
         const alpha = context.getImageData(0, 0, nx, ny).data;
         for (let at = 0; at < cells.length; at++) {
@@ -168,5 +169,6 @@ export const inflate = (flat, { depth, roundness = 1 }) => {
         },
         height: flat.height,
         width: flat.width,
+        ...(flat.regionOf ? { regionOf: (x, y) => flat.regionOf?.(x, y) } : {}),
     };
 };

package/dist/shapes/solids.d.ts

@@ -1,4 +1,4 @@
-import type { ShapeField } from '../connect-graph/shape-field.js';
+import type { ShapeField } from './shape-field.js';
 /** A ball `radius` across from its middle. */
 export declare const sphere: ({ radius }?: {
     radius?: number;
@@ -8,8 +8,8 @@ export declare const torus: ({ radius, tube, }?: {
     radius?: number;
     tube?: number;
 }) => ShapeField;
-/** A box `width` by `height` by `depth`, its edges rounded `round` in. */
-export declare const box: ({ depth, height, round, width, }?: {
+/** A cuboid `width` by `height` by `depth`, its edges rounded `round` in. */
+export declare const cuboid: ({ depth, height, round, width, }?: {
     depth?: number;
     height?: number;
     round?: number;

package/dist/shapes/solids.js

@@ -13,7 +13,7 @@ export const torus = ({ radius = 50, tube = 18, } = {}) => {
         width: reach * 2,
     };
 };
-export const box = ({ depth = 100, height = 100, round = 0, width = 100, } = {}) => ({
+export const cuboid = ({ depth = 100, height = 100, round = 0, width = 100, } = {}) => ({
     depth,
     distance: (x, y, z = depth / 2) => {
         const qx = Math.abs(x - width / 2) - width / 2 + round;
@@ -28,20 +28,36 @@ export const box = ({ depth = 100, height = 100, round = 0, width = 100, } = {})
 });
 export const onSphere = (flat, { radius = 50, thickness = radius * 0.08 } = {}) => {
     const along = (Math.PI * 2 * radius) / Math.max(flat.width, 1e-9);
+    const onMap = (x, y, z) => {
+        const dx = x - radius;
+        const dy = y - radius;
+        const dz = z - radius;
+        const out = Math.hypot(dx, dy, dz);
+        const longitude = Math.atan2(dx, dz);
+        const latitude = Math.acos(Math.min(Math.max(dy / (out || 1), -1), 1));
+        return {
+            out,
+            u: ((longitude + Math.PI) / (Math.PI * 2)) * flat.width,
+            v: (latitude / Math.PI) * flat.height,
+        };
+    };
+    const regionOf = flat.regionOf;
     return {
         depth: radius * 2,
         distance: (x, y, z = radius) => {
-            const dx = x - radius;
-            const dy = y - radius;
-            const dz = z - radius;
-            const out = Math.hypot(dx, dy, dz);
+            const { out, u, v } = onMap(x, y, z);
             const shell = Math.abs(out - (radius - thickness / 2)) - thickness / 2;
-            const longitude = Math.atan2(dx, dz);
-            const latitude = Math.acos(Math.min(Math.max(dy / (out || 1), -1), 1));
-            const map = flat.distance(((longitude + Math.PI) / (Math.PI * 2)) * flat.width, (latitude / Math.PI) * flat.height);
-            return Math.max(shell, map * along);
+            return Math.max(shell, flat.distance(u, v) * along);
         },
         height: radius * 2,
         width: radius * 2,
+        ...(regionOf
+            ? {
+                regionOf: (x, y, z = radius) => {
+                    const { u, v } = onMap(x, y, z);
+                    return regionOf(u, v);
+                },
+            }
+            : {}),
     };
 };