@fusion.dev/helix-graph 0.120.0 → 0.121.0

package/dist/connect-graph/looks.js

@@ -54,12 +54,21 @@ export const mixRgb = (from, to, amount) => {
     const channel = (at) => Math.round((one[at] ?? 0) + ((other[at] ?? 0) - (one[at] ?? 0)) * amount);
     return `rgb(${channel(0)}, ${channel(1)}, ${channel(2)})`;
 };
+export const toneColor = (colors, tone) => tone === undefined || tone === 'primary'
+    ? colors.primary
+    : tone === 'neutral'
+        ? colors.muted
+        : colors[tone];
 const FADED = 0.75;
 export const looksOf = (options) => {
-    const { colors, groupOf, near, selected, shown } = options;
+    const { colors, near, noteOf, selected, shown } = options;
     const order = new Map([...new Set(options.groups)].sort().map((group, at) => [group, at]));
     const own = (id) => {
-        const group = groupOf(id);
+        const note = noteOf(id);
+        if (note?.tone) {
+            return toneColor(colors, note.tone);
+        }
+        const group = note?.group;
         const at = group === undefined ? undefined : order.get(group);
         return at === undefined || colors.series.length === 0
             ? colors.muted
@@ -68,24 +77,30 @@ export const looksOf = (options) => {
     const focused = selected !== undefined;
     const hidden = (id) => shown !== undefined && !shown.has(id);
     return {
+        colorOf: own,
         font: options.font || 'sans-serif',
+        ground: colors.ground,
         ink: colors.ink,
         link: (source, target) => {
             const touches = focused && (source === selected || target === selected);
             return {
                 color: touches
-                    ? colors.muted
+                    ? own(selected)
                     : focused
-                        ? mixRgb(colors.line, colors.ground, 0.5)
-                        : colors.line,
+                        ? mixRgb(colors.line, colors.ground, 0.6)
+                        : mixRgb(own(source), colors.ground, 0.72),
                 hidden: hidden(source) || hidden(target),
                 raised: touches,
             };
         },
         node: (id) => {
+            const note = noteOf(id);
+            const facts = { emphasis: note?.emphasis, material: note?.material, shape: note?.shape };
             if (id === selected) {
                 return {
-                    color: colors.primary,
+                    ...facts,
+                    color: own(id),
+                    glow: 1,
                     hidden: hidden(id),
                     label: 'always',
                     raised: true,
@@ -94,7 +109,9 @@ export const looksOf = (options) => {
             }
             const neighbor = focused && near.has(id);
             return {
+                ...facts,
                 color: focused && !neighbor ? mixRgb(own(id), colors.ground, FADED) : own(id),
+                glow: 0,
                 hidden: hidden(id),
                 label: focused && !neighbor ? 'never' : 'room',
                 raised: neighbor,
@@ -102,5 +119,6 @@ export const looksOf = (options) => {
             };
         },
         overlay: colors.overlay,
+        quiet: colors.muted,
     };
 };

package/dist/connect-graph/seed.js

@@ -23,9 +23,18 @@ export const seedPositions = (nodes, links, known = new Map()) => {
         }
     }
     const neighbors = new Map();
+    const add = (from, to) => {
+        const list = neighbors.get(from);
+        if (list) {
+            list.push(to);
+        }
+        else {
+            neighbors.set(from, [to]);
+        }
+    };
     for (const { source, target } of links) {
-        neighbors.set(source, [...(neighbors.get(source) ?? []), target]);
-        neighbors.set(target, [...(neighbors.get(target) ?? []), source]);
+        add(source, target);
+        add(target, source);
     }
     let spiral = positions.size;
     for (const node of nodes) {

package/dist/connect-graph/stencil.d.ts

@@ -0,0 +1,34 @@
+import type { GraphPoint } from './seed.js';
+/**
+ * A shape the notes are fitted into once a layout settles, in a box `width`
+ * by `height`, as an SVG's `viewBox="0 0 width height"` gives one: an SVG
+ * path, whose holes are cut by the even-odd rule, or a test of whether a
+ * point in the box is inside.
+ */
+export type GraphStencil = {
+    height: number;
+    path: string;
+    width: number;
+} | {
+    height: number;
+    inside: (x: number, y: number) => boolean;
+    width: number;
+};
+/**
+ * `count` places spread evenly over the inside of a shape: a grid sized to
+ * the shape's area, each place shaken within its cell so no rows show, and
+ * the grid made finer until it holds enough.
+ */
+export declare const placesIn: (inside: (x: number, y: number) => boolean, width: number, height: number, count: number) => GraphPoint[];
+/**
+ * Places a layout put anywhere, moved into the stencil's shape and filling it
+ * evenly. **The notes keep their order**, left to right and, within each
+ * strip, top to bottom, so notes the layout put together land together, and
+ * each group takes a region of the shape.
+ *
+ * Centered where the layout was, and as large. The stencil's y points down,
+ * as an SVG's does, and the layout's up, as Sigma and cosmos.gl draw it.
+ * Places the shape cannot hold, as when it has no inside, come back as they
+ * were.
+ */
+export declare const fitToStencil: (positions: ReadonlyMap<string, GraphPoint>, stencil: GraphStencil) => Map<string, GraphPoint>;

package/dist/connect-graph/stencil.js

@@ -0,0 +1,121 @@
+const RASTER = 1024;
+const PROBE = 64;
+const WAVE = 0.07;
+const seeded = (seed) => {
+    let state = seed >>> 0 || 1;
+    return () => {
+        state = (Math.imul(state, 1664525) + 1013904223) >>> 0;
+        return state / 4294967296;
+    };
+};
+const insideOf = (stencil) => {
+    if ('inside' in stencil) {
+        return stencil.inside;
+    }
+    const scale = RASTER / Math.max(stencil.width, stencil.height, 1);
+    const width = Math.max(1, Math.ceil(stencil.width * scale));
+    const height = Math.max(1, Math.ceil(stencil.height * scale));
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d', { willReadFrequently: true });
+    if (!context) {
+        return () => true;
+    }
+    context.scale(scale, scale);
+    context.fill(new Path2D(stencil.path), 'evenodd');
+    const alpha = context.getImageData(0, 0, width, height).data;
+    return (x, y) => {
+        const column = Math.floor(x * scale);
+        const row = Math.floor(y * scale);
+        return (column >= 0 &&
+            row >= 0 &&
+            column < width &&
+            row < height &&
+            (alpha[(row * width + column) * 4 + 3] ?? 0) > 127);
+    };
+};
+export const placesIn = (inside, width, height, count) => {
+    let filled = 0;
+    for (let row = 0; row < PROBE; row++) {
+        for (let column = 0; column < PROBE; column++) {
+            if (inside(((column + 0.5) / PROBE) * width, ((row + 0.5) / PROBE) * height)) {
+                filled += 1;
+            }
+        }
+    }
+    if (count === 0 || filled === 0) {
+        return [];
+    }
+    const random = seeded(count);
+    let step = Math.sqrt(((filled / PROBE ** 2) * width * height) / count);
+    for (let tries = 0; tries < 8; tries++) {
+        const places = [];
+        for (let y = step / 2; y < height; y += step) {
+            for (let x = step / 2; x < width; x += step) {
+                const place = {
+                    x: x + (random() - 0.5) * step * 0.8,
+                    y: y + (random() - 0.5) * step * 0.8,
+                };
+                if (inside(place.x, place.y)) {
+                    places.push(place);
+                }
+            }
+        }
+        if (places.length >= count) {
+            for (let at = places.length - 1; at > 0; at--) {
+                const other = Math.floor(random() * (at + 1));
+                [places[at], places[other]] = [places[other], places[at]];
+            }
+            return places.slice(0, count);
+        }
+        step *= Math.sqrt(places.length / count) * 0.97 || 0.5;
+    }
+    return [];
+};
+export const fitToStencil = (positions, stencil) => {
+    const notes = [...positions].map(([id, at]) => ({ at, id }));
+    if (notes.length === 0) {
+        return new Map();
+    }
+    const places = placesIn(insideOf(stencil), stencil.width, stencil.height, notes.length);
+    if (places.length < notes.length) {
+        return new Map(positions);
+    }
+    let left = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let bottom = Number.POSITIVE_INFINITY;
+    let top = Number.NEGATIVE_INFINITY;
+    for (const { at } of notes) {
+        left = Math.min(left, at.x);
+        right = Math.max(right, at.x);
+        bottom = Math.min(bottom, at.y);
+        top = Math.max(top, at.y);
+    }
+    const scale = Math.max(right - left, top - bottom, 1) / Math.max(stencil.width, stencil.height);
+    const { height, width } = stencil;
+    const spots = places
+        .map((place) => ({
+        across: place.x + WAVE * width * Math.sin((place.y / height) * Math.PI * 3 + 1.3),
+        at: {
+            x: (left + right) / 2 + (place.x - width / 2) * scale,
+            y: (bottom + top) / 2 - (place.y - height / 2) * scale,
+        },
+        down: -place.y + WAVE * height * Math.sin((place.x / width) * Math.PI * 3 + 0.4),
+    }))
+        .sort((one, other) => one.across - other.across);
+    notes.sort((one, other) => one.at.x - other.at.x || one.at.y - other.at.y);
+    const strip = Math.ceil(Math.sqrt(notes.length));
+    const fitted = new Map();
+    for (let from = 0; from < notes.length; from += strip) {
+        const ours = notes.slice(from, from + strip).sort((one, other) => one.at.y - other.at.y);
+        const theirs = spots
+            .slice(from, from + strip)
+            .sort((one, other) => one.down - other.down)
+            .map((spot) => spot.at);
+        ours.forEach((note, at) => {
+            fitted.set(note.id, theirs[at]);
+        });
+    }
+    return fitted;
+};

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

@@ -0,0 +1,67 @@
+import type { GraphDriver } from '../connect-graph/connect-graph.js';
+import type { NodeLook } from '../connect-graph/looks.js';
+/** A cosmos.gl graph, as far as the driver calls it. */
+export interface CosmosGraph {
+    fitView(duration?: number, padding?: number): void;
+    fitViewByPointIndices(indices: number[], duration?: number, padding?: number): void;
+    getPointPositions(): number[];
+    getTrackedPointPositionsMap(): ReadonlyMap<number, [number, number]>;
+    getZoomLevel(): number;
+    readonly isReady: boolean;
+    readonly ready: Promise<void>;
+    pause(): void;
+    render(simulationAlpha?: number, transitionDuration?: number): void;
+    screenToSpacePosition(screenPosition: [number, number]): [number, number];
+    setConfigPartial(config: Record<string, unknown>): void;
+    setLinkColors(linkColors: Float32Array): void;
+    setLinks(links: Float32Array): void;
+    setLinkWidths(linkWidths: Float32Array): void;
+    setClusterPositions(clusterPositions: (number | undefined)[]): void;
+    setPinnedPoints(pinnedIndices: number[] | null): void;
+    setPointClusters(pointClusters: (number | undefined)[]): void;
+    setPointColors(pointColors: Float32Array): void;
+    setPointPositions(pointPositions: Float32Array, dontRescale?: boolean): void;
+    setPointShapes(pointShapes: Float32Array): void;
+    setPointSizes(pointSizes: Float32Array): void;
+    setZoomLevel(value: number, duration?: number): void;
+    setZoomTransformByPointPositions(positions: Float32Array, duration?: number, scale?: number): void;
+    spaceToScreenPosition(spacePosition: [number, number]): [number, number];
+    spaceToScreenRadius(spaceRadius: number): number;
+    start(alpha?: number): void;
+    trackPointPositionsByIndices(indices: number[]): void;
+    zoomToPointByIndex(index: number, duration?: number, scale?: number, canZoomOut?: boolean): void;
+}
+/** How the cosmos.gl driver behaves where the page does not say. */
+export interface CosmosDriverOptions {
+    /** 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. 15 seconds by
+     * default, past where twenty thousand notes settle on a laptop's GPU.
+     */
+    layoutLimit?: number | undefined;
+    /** A note's shape where it does not say: `circle` by default, `square` or `diamond`. */
+    shape?: NodeLook['shape'];
+    /** The size of cosmos.gl's space, as its own `spaceSize` says. 4096 by default. */
+    spaceSize?: number | undefined;
+}
+/**
+ * Drives cosmos.gl for a Graph frame: the layout and the drawing both run on
+ * the GPU, which is the renderer to reach for past fifty thousand notes. Make
+ * the graph in a box inside the frame and pass both here, and
+ * `connectGraph` fills it:
+ *
+ * ```js
+ * const graph = new Graph(box, { enableSimulation: true })
+ * connectGraph(frame, cosmosDriver(graph, box))
+ * ```
+ *
+ * **cosmos.gl draws notes with its own shaders**, so a note's shape is
+ * honored and its `material` and `emphasis` are not, and it names nothing:
+ * the driver names the hovered note, the selected one and its neighbors, and
+ * each group, over the drawing, as the Sigma driver does.
+ *
+ * **It is `@cosmos.gl/graph`, which is MIT**, and not Cosmograph, which is
+ * licensed for noncommercial use only.
+ */
+export declare const cosmosDriver: (graph: CosmosGraph, container: HTMLElement, options?: CosmosDriverOptions) => GraphDriver;