@fusion.dev/helix-graph 0.121.0 → 0.123.0

package/dist/shapes/flat.js

@@ -0,0 +1,63 @@
+import { FLAT, fieldFromCells, fieldFromPath, } from '../connect-graph/shape-field.js';
+const pathOf = (element) => {
+    const number = (name) => Number(element.getAttribute(name) ?? 0);
+    switch (element.localName) {
+        case 'path':
+            return element.getAttribute('d') ?? '';
+        case 'rect': {
+            const [x, y, width, height] = [number('x'), number('y'), number('width'), number('height')];
+            return `M${x} ${y}h${width}v${height}h${-width}Z`;
+        }
+        case 'circle':
+        case 'ellipse': {
+            const [cx, cy] = [number('cx'), number('cy')];
+            const rx = element.localName === 'circle' ? number('r') : number('rx');
+            const ry = element.localName === 'circle' ? number('r') : number('ry');
+            return `M${cx - rx} ${cy}a${rx} ${ry} 0 1 0 ${rx * 2} 0a${rx} ${ry} 0 1 0 ${-rx * 2} 0Z`;
+        }
+        case 'polygon': {
+            const points = element.getAttribute('points')?.trim() ?? '';
+            return points ? `M${points}Z` : '';
+        }
+        default:
+            return '';
+    }
+};
+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') ?? '')
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    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);
+};
+export const shapeFromImage = (image, { resolution = FLAT, threshold = 0.5 } = {}) => {
+    const size = (value) => typeof value === 'number' ? value : value.baseVal.value;
+    const width = Math.max(size(image.width), 1);
+    const height = Math.max(size(image.height), 1);
+    const cell = Math.max(width, height) / resolution;
+    const nx = Math.max(1, Math.ceil(width / cell));
+    const ny = Math.max(1, Math.ceil(height / cell));
+    const canvas = document.createElement('canvas');
+    canvas.width = nx;
+    canvas.height = ny;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    const cells = new Uint8Array(nx * ny);
+    if (context) {
+        context.drawImage(image, 0, 0, nx, ny);
+        const alpha = context.getImageData(0, 0, nx, ny).data;
+        for (let at = 0; at < cells.length; at++) {
+            cells[at] = (alpha[at * 4 + 3] ?? 0) / 255 >= threshold ? 1 : 0;
+        }
+    }
+    return fieldFromCells(cells, [nx, ny, 1], cell, { depth: 0, height, width });
+};

package/dist/shapes/index.d.ts

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

package/dist/shapes/index.js

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

package/dist/shapes/model.d.ts

@@ -0,0 +1,12 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+import { type TriangleOptions } from './triangles.js';
+/**
+ * A solid field from a glTF model, the web's standard format for one: a
+ * URL to a `.glb` or `.gltf` file, or the file's bytes. Every mesh in it is
+ * read, placed as the model places it.
+ *
+ * **three.js reads the file**, imported when this is first called, so a page
+ * that draws no model never downloads a loader. It is an optional peer of
+ * this package.
+ */
+export declare const shapeFromModel: (source: string | ArrayBuffer, options?: TriangleOptions) => Promise<ShapeField>;

package/dist/shapes/model.js

@@ -0,0 +1,31 @@
+import { shapeFromTriangles } from './triangles.js';
+export const shapeFromModel = async (source, options = {}) => {
+    const [{ GLTFLoader }, { Mesh, Vector3 }] = await Promise.all([
+        import('three/addons/loaders/GLTFLoader.js'),
+        import('three'),
+    ]);
+    const loader = new GLTFLoader();
+    const model = typeof source === 'string'
+        ? await loader.loadAsync(source)
+        : await loader.parseAsync(source, '');
+    model.scene.updateMatrixWorld(true);
+    const corners = [];
+    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 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);
+        }
+    });
+    return shapeFromTriangles(corners, null, options);
+};

package/dist/shapes/solids.d.ts

@@ -0,0 +1,28 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+/** A ball `radius` across from its middle. */
+export declare const sphere: ({ radius }?: {
+    radius?: number;
+}) => ShapeField;
+/** A ring: `radius` from its middle to the middle of its tube, which is `tube` thick from its own middle out. */
+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, }?: {
+    depth?: number;
+    height?: number;
+    round?: number;
+    width?: number;
+}) => ShapeField;
+/**
+ * A flat shape wrapped round a ball, as a map of the world is round a globe:
+ * the flat shape's width is the way round and its height pole to pole, as an
+ * equirectangular map is drawn. The solid is a shell `thickness` deep at the
+ * ball's surface, wherever the flat shape is, so notes placed in it draw the
+ * map in three dimensions.
+ */
+export declare const onSphere: (flat: ShapeField, { radius, thickness }?: {
+    radius?: number;
+    thickness?: number;
+}) => ShapeField;

package/dist/shapes/solids.js

@@ -0,0 +1,47 @@
+export const sphere = ({ radius = 50 } = {}) => ({
+    depth: radius * 2,
+    distance: (x, y, z = radius) => Math.hypot(x - radius, y - radius, z - radius) - radius,
+    height: radius * 2,
+    width: radius * 2,
+});
+export const torus = ({ radius = 50, tube = 18, } = {}) => {
+    const reach = radius + tube;
+    return {
+        depth: tube * 2,
+        distance: (x, y, z = tube) => Math.hypot(Math.hypot(x - reach, y - reach) - radius, z - tube) - tube,
+        height: reach * 2,
+        width: reach * 2,
+    };
+};
+export const box = ({ 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;
+        const qy = Math.abs(y - height / 2) - height / 2 + round;
+        const qz = Math.abs(z - depth / 2) - depth / 2 + round;
+        return (Math.hypot(Math.max(qx, 0), Math.max(qy, 0), Math.max(qz, 0)) +
+            Math.min(Math.max(qx, qy, qz), 0) -
+            round);
+    },
+    height,
+    width,
+});
+export const onSphere = (flat, { radius = 50, thickness = radius * 0.08 } = {}) => {
+    const along = (Math.PI * 2 * radius) / Math.max(flat.width, 1e-9);
+    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 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);
+        },
+        height: radius * 2,
+        width: radius * 2,
+    };
+};

package/dist/shapes/triangles.d.ts

@@ -0,0 +1,20 @@
+import { type ShapeField } from '../connect-graph/shape-field.js';
+/** How a solid is read from triangles. */
+export interface TriangleOptions {
+    /** How many cells the field has along the solid's longest side. 96 by default. */
+    resolution?: number | undefined;
+}
+/**
+ * A solid field from a closed surface of triangles: `positions` three
+ * numbers a corner, and `index` three corners a triangle, or every three
+ * corners in order where there is none. Its y points up, as a model's does,
+ * and its box is the surface's own bounds, a cell of room around them.
+ *
+ * **Read a column of cells at a time**: each triangle marks where it crosses
+ * the columns under it, and a cell is inside where an odd number of
+ * crossings lie in front of it. A model of a hundred thousand triangles is
+ * read in a moment, where testing each cell against each triangle would take
+ * minutes. A surface with gaps is read as closed where it can be, and a gap
+ * shows as a column filled or emptied through.
+ */
+export declare const shapeFromTriangles: (positions: ArrayLike<number>, index?: ArrayLike<number> | null | undefined, { resolution }?: TriangleOptions) => ShapeField;

package/dist/shapes/triangles.js

@@ -0,0 +1,78 @@
+import { fieldFromCells, SOLID } from '../connect-graph/shape-field.js';
+const NUDGE = 1e-6 * Math.PI;
+export const shapeFromTriangles = (positions, index, { resolution = SOLID } = {}) => {
+    const corners = Math.floor(positions.length / 3);
+    const low = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY];
+    const high = [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
+    for (let at = 0; at < corners; at++) {
+        for (let axis = 0; axis < 3; axis++) {
+            const value = positions[at * 3 + axis];
+            low[axis] = Math.min(low[axis], value);
+            high[axis] = Math.max(high[axis], value);
+        }
+    }
+    if (corners === 0) {
+        return fieldFromCells(new Uint8Array(1), [1, 1, 1], 1, { depth: 1, height: 1, width: 1 });
+    }
+    const span = Math.max(high[0] - low[0], high[1] - low[1], high[2] - low[2], 1e-9);
+    const cell = span / Math.max(resolution - 2, 1);
+    const origin = low.map((value) => value - cell);
+    const nx = Math.ceil((high[0] - low[0]) / cell) + 2;
+    const ny = Math.ceil((high[1] - low[1]) / cell) + 2;
+    const nz = Math.ceil((high[2] - low[2]) / cell) + 2;
+    const crossings = Array.from({ length: nx * ny }, () => []);
+    const triangles = index ? Math.floor(index.length / 3) : Math.floor(corners / 3);
+    const corner = (triangle, which) => {
+        const at = index ? index[triangle * 3 + which] : triangle * 3 + which;
+        return [
+            (positions[at * 3] - origin[0]) / cell,
+            (high[1] + cell - positions[at * 3 + 1]) / cell,
+            (positions[at * 3 + 2] - origin[2]) / cell,
+        ];
+    };
+    for (let triangle = 0; triangle < triangles; triangle++) {
+        const [ax, ay, az] = corner(triangle, 0);
+        const [bx, by, bz] = corner(triangle, 1);
+        const [cx, cy, cz] = corner(triangle, 2);
+        const area = (bx - ax) * (cy - ay) - (cx - ax) * (by - ay);
+        if (Math.abs(area) < 1e-12) {
+            continue;
+        }
+        const left = Math.max(0, Math.ceil(Math.min(ax, bx, cx) - 0.5));
+        const right = Math.min(nx - 1, Math.floor(Math.max(ax, bx, cx) - 0.5));
+        const top = Math.max(0, Math.ceil(Math.min(ay, by, cy) - 0.5));
+        const bottom = Math.min(ny - 1, Math.floor(Math.max(ay, by, cy) - 0.5));
+        for (let row = top; row <= bottom; row++) {
+            for (let column = left; column <= right; column++) {
+                const px = column + 0.5 + NUDGE;
+                const py = row + 0.5 + NUDGE * Math.SQRT2;
+                const u = ((bx - px) * (cy - py) - (cx - px) * (by - py)) / area;
+                const v = ((cx - px) * (ay - py) - (ax - px) * (cy - py)) / area;
+                const w = 1 - u - v;
+                if (u < 0 || v < 0 || w < 0) {
+                    continue;
+                }
+                ;
+                crossings[row * nx + column].push(u * az + v * bz + w * cz);
+            }
+        }
+    }
+    const cells = new Uint8Array(nx * ny * nz);
+    for (let row = 0; row < ny; row++) {
+        for (let column = 0; column < nx; column++) {
+            const along = crossings[row * nx + column].sort((one, other) => one - other);
+            for (let pair = 0; pair + 1 < along.length; pair += 2) {
+                const from = Math.max(0, Math.ceil(along[pair] - 0.5));
+                const to = Math.min(nz - 1, Math.floor(along[pair + 1] - 0.5));
+                for (let layer = from; layer <= to; layer++) {
+                    cells[layer * nx * ny + row * nx + column] = 1;
+                }
+            }
+        }
+    }
+    return fieldFromCells(cells, [nx, ny, nz], cell, {
+        depth: nz * cell,
+        height: ny * cell,
+        width: nx * cell,
+    });
+};

package/dist/three/index.d.ts

@@ -0,0 +1 @@
+export { type ThreeDriverOptions, threeDriver } from './three-driver.js';

package/dist/three/index.js

@@ -0,0 +1 @@
+export { threeDriver } from './three-driver.js';

package/dist/three/surface.d.ts

@@ -0,0 +1,13 @@
+import type { ShapeField } from '../connect-graph/shape-field.js';
+/**
+ * The surface of a solid field where its distance is `at`, as triangles:
+ * corners three numbers each in the field's box, and triangles three corners
+ * each. Surface nets: a corner in each cell the surface passes through, at
+ * the middle of where it crosses the cell's edges, and two triangles across
+ * each edge it crosses. Smooth enough to hide what is behind a shape, and
+ * made in a moment.
+ */
+export declare const surfaceOf: (field: ShapeField, at?: number) => {
+    corners: Float32Array;
+    triangles: Uint32Array;
+};

package/dist/three/surface.js

@@ -0,0 +1,112 @@
+const CELLS = 72;
+export const surfaceOf = (field, at = 0) => {
+    const { depth, height, width } = field;
+    const cell = Math.max(width, height, depth) / CELLS;
+    const nx = Math.ceil(width / cell) + 3;
+    const ny = Math.ceil(height / cell) + 3;
+    const nz = Math.ceil(depth / cell) + 3;
+    const value = new Float32Array(nx * ny * nz);
+    const spot = (x, y, z) => (z * ny + y) * nx + x;
+    for (let z = 0; z < nz; z++) {
+        for (let y = 0; y < ny; y++) {
+            for (let x = 0; x < nx; x++) {
+                value[spot(x, y, z)] = field.distance((x - 1) * cell, (y - 1) * cell, (z - 1) * cell) - at;
+            }
+        }
+    }
+    const cornerOf = new Int32Array((nx - 1) * (ny - 1) * (nz - 1)).fill(-1);
+    const cellSpot = (x, y, z) => (z * (ny - 1) + y) * (nx - 1) + x;
+    const corners = [];
+    const edges = [
+        [0, 1],
+        [2, 3],
+        [4, 5],
+        [6, 7],
+        [0, 2],
+        [1, 3],
+        [4, 6],
+        [5, 7],
+        [0, 4],
+        [1, 5],
+        [2, 6],
+        [3, 7],
+    ];
+    const offsets = [
+        [0, 0, 0],
+        [1, 0, 0],
+        [0, 1, 0],
+        [1, 1, 0],
+        [0, 0, 1],
+        [1, 0, 1],
+        [0, 1, 1],
+        [1, 1, 1],
+    ];
+    const values = new Float32Array(8);
+    for (let z = 0; z < nz - 1; z++) {
+        for (let y = 0; y < ny - 1; y++) {
+            for (let x = 0; x < nx - 1; x++) {
+                let inside = 0;
+                for (let corner = 0; corner < 8; corner++) {
+                    const [dx, dy, dz] = offsets[corner];
+                    const sample = value[spot(x + dx, y + dy, z + dz)];
+                    values[corner] = sample;
+                    if (sample < 0) {
+                        inside += 1;
+                    }
+                }
+                if (inside === 0 || inside === 8) {
+                    continue;
+                }
+                let sx = 0;
+                let sy = 0;
+                let sz = 0;
+                let crossed = 0;
+                for (const [from, to] of edges) {
+                    const a = values[from];
+                    const b = values[to];
+                    if (a < 0 === b < 0) {
+                        continue;
+                    }
+                    const t = a / (a - b);
+                    const [ax, ay, az] = offsets[from];
+                    const [bx, by, bz] = offsets[to];
+                    sx += ax + (bx - ax) * t;
+                    sy += ay + (by - ay) * t;
+                    sz += az + (bz - az) * t;
+                    crossed += 1;
+                }
+                cornerOf[cellSpot(x, y, z)] = corners.length / 3;
+                corners.push((x + sx / crossed - 1) * cell, (y + sy / crossed - 1) * cell, (z + sz / crossed - 1) * cell);
+            }
+        }
+    }
+    const triangles = [];
+    const quad = (a, b, c, d, flip) => {
+        if (a < 0 || b < 0 || c < 0 || d < 0) {
+            return;
+        }
+        if (flip) {
+            triangles.push(a, c, b, a, d, c);
+        }
+        else {
+            triangles.push(a, b, c, a, c, d);
+        }
+    };
+    for (let z = 1; z < nz - 1; z++) {
+        for (let y = 1; y < ny - 1; y++) {
+            for (let x = 1; x < nx - 1; x++) {
+                const here = value[spot(x, y, z)] < 0;
+                if (x < nx - 1 && here !== value[spot(x + 1, y, z)] < 0) {
+                    quad(cornerOf[cellSpot(x, y - 1, z - 1)], cornerOf[cellSpot(x, y, z - 1)], cornerOf[cellSpot(x, y, z)], cornerOf[cellSpot(x, y - 1, z)], here);
+                }
+                if (y < ny - 1 && here !== value[spot(x, y + 1, z)] < 0) {
+                    quad(cornerOf[cellSpot(x - 1, y, z - 1)], cornerOf[cellSpot(x - 1, y, z)], cornerOf[cellSpot(x, y, z)], cornerOf[cellSpot(x, y, z - 1)], here);
+                }
+                if (z < nz - 1 && here !== value[spot(x, y, z + 1)] < 0) {
+                    quad(cornerOf[cellSpot(x - 1, y - 1, z)], cornerOf[cellSpot(x, y - 1, z)], cornerOf[cellSpot(x, y, z)], cornerOf[cellSpot(x - 1, y, z)], here);
+                }
+            }
+        }
+    }
+    return { corners: new Float32Array(corners), triangles: new Uint32Array(triangles) };
+};

package/dist/three/three-driver.d.ts

@@ -0,0 +1,32 @@
+import type { GraphDriver } from '../connect-graph/connect-graph.js';
+import type { NodeLook } from '../connect-graph/looks.js';
+/** How the three.js driver behaves where the page does not say. */
+export interface ThreeDriverOptions {
+    /**
+     * Whether the graph turns slowly while nobody is handling it. On by
+     * default, and never for a reader who asks for less motion.
+     */
+    autoRotate?: boolean | undefined;
+    /** Whether each group's name is drawn over its notes. On by default. */
+    groupLabels?: boolean | undefined;
+    /** The longest a layout runs, in milliseconds, settled or not. 10 seconds by default. */
+    layoutLimit?: number | undefined;
+    /** A note's shape where it does not say: `circle` by default, `square` or `diamond`. */
+    shape?: NodeLook['shape'];
+}
+/**
+ * Drives three.js for a Graph frame: the graph drawn in three dimensions, to
+ * be turned and looked into. Pass the box inside the frame the drawing goes
+ * in, and `connectGraph` fills it:
+ *
+ * ```js
+ * connectGraph(frame, threeDriver(box))
+ * ```
+ *
+ * **A layout runs in three dimensions**, with d3-force-3d, where notes have no
+ * place; with a solid `stencil`, the notes are drawn in its shape and none
+ * runs. Dragging turns the graph, the wheel and a pinch bring it nearer, and
+ * it turns slowly by itself while nobody is handling it, unless the reader
+ * asks for less motion.
+ */
+export declare const threeDriver: (container: HTMLElement, options?: ThreeDriverOptions) => GraphDriver;