@fusion.dev/helix-graph 0.120.0 → 0.121.0

package/dist/overlay/overlay.js

@@ -0,0 +1,296 @@
+import { mixRgb } from '../connect-graph/looks.js';
+const SPEED = 340;
+const QUICKEST = 450;
+const SLOWEST = 1400;
+const ARRIVAL = 380;
+const FLYING = 400;
+const withAlpha = (color, alpha) => {
+    const [red = 128, green = 128, blue = 128] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+};
+const TAIL = 110;
+const pulse = (context, leaves, arrives, from, to, along, through, glowing) => {
+    const strength = glowing ? 1.3 : 1;
+    const color = mixRgb(leaves, arrives, along);
+    const length = Math.hypot(to.x - from.x, to.y - from.y) || 1;
+    const head = { x: from.x + (to.x - from.x) * along, y: from.y + (to.y - from.y) * along };
+    const behind = Math.max(along - TAIL / length, 0);
+    const tail = { x: from.x + (to.x - from.x) * behind, y: from.y + (to.y - from.y) * behind };
+    context.lineCap = 'round';
+    context.globalAlpha = 0.14 * Math.sin(Math.PI * through);
+    const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
+    line.addColorStop(0, leaves);
+    line.addColorStop(1, arrives);
+    context.strokeStyle = line;
+    context.lineWidth = 1;
+    context.beginPath();
+    context.moveTo(from.x, from.y);
+    context.lineTo(to.x, to.y);
+    context.stroke();
+    const fade = context.createLinearGradient(tail.x, tail.y, head.x, head.y);
+    const back = mixRgb(leaves, arrives, behind);
+    fade.addColorStop(0, withAlpha(back, 0));
+    fade.addColorStop(0.6, withAlpha(mixRgb(back, color, 0.6), 0.25));
+    fade.addColorStop(1, withAlpha(color, 0.95));
+    context.strokeStyle = fade;
+    context.shadowColor = color;
+    context.shadowBlur = 8;
+    context.globalAlpha = Math.min(0.35 * strength, 1);
+    context.lineWidth = 3.5;
+    context.beginPath();
+    context.moveTo(tail.x, tail.y);
+    context.lineTo(head.x, head.y);
+    context.stroke();
+    context.shadowBlur = 0;
+    context.globalAlpha = 1;
+    context.lineWidth = 1.4 * strength;
+    context.stroke();
+    const reach = 5 * strength;
+    const light = context.createRadialGradient(head.x, head.y, 0, head.x, head.y, reach);
+    light.addColorStop(0, 'rgba(255, 255, 255, 0.9)');
+    light.addColorStop(0.4, withAlpha(color, 0.75));
+    light.addColorStop(1, withAlpha(color, 0));
+    context.fillStyle = light;
+    context.beginPath();
+    context.arc(head.x, head.y, reach, 0, Math.PI * 2);
+    context.fill();
+};
+const arrive = (context, color, at, gone) => {
+    const reach = at.radius + 6;
+    const glow = context.createRadialGradient(at.x, at.y, at.radius * 0.4, at.x, at.y, reach);
+    glow.addColorStop(0, withAlpha(color, 0.5 * (1 - gone) ** 2));
+    glow.addColorStop(1, withAlpha(color, 0));
+    context.fillStyle = glow;
+    context.beginPath();
+    context.arc(at.x, at.y, reach, 0, Math.PI * 2);
+    context.fill();
+};
+const isLight = (color) => {
+    const [red = 0, green = 0, blue = 0] = color.match(/[\d.]+/g)?.map(Number) ?? [];
+    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) => {
+    context.font = `650 11px ${looks.font}`;
+    context.letterSpacing = '0.14em';
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.shadowColor = looks.ground;
+    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);
+            if (point) {
+                x += point.x;
+                y += point.y;
+                count += 1;
+                points.push(point);
+            }
+        }
+        if (count < 2) {
+            continue;
+        }
+        x /= count;
+        y /= count;
+        const spread = points.reduce((sum, point) => sum + Math.hypot(point.x - x, point.y - y), 0) / count;
+        if (spread < 12) {
+            continue;
+        }
+        const name = group.name.toLocaleUpperCase();
+        context.globalAlpha = group.faded ? 0.3 : 0.92;
+        context.fillStyle = mixRgb(group.color, looks.ink, 0.6);
+        context.shadowBlur = 10;
+        context.fillText(name, x, y);
+        context.shadowBlur = 3;
+        context.fillText(name, x, y);
+    }
+    context.shadowBlur = 0;
+    context.letterSpacing = '0px';
+    context.globalAlpha = 1;
+};
+const layer = (container, kind) => {
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('aria-hidden', 'true');
+    canvas.dataset.helixGraphLayer = kind;
+    canvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none';
+    const signals = container.querySelector('canvas[data-helix-graph-layer="signals"]');
+    if (kind === 'groups' && signals) {
+        container.insertBefore(canvas, signals);
+    }
+    else {
+        container.append(canvas);
+    }
+    return canvas;
+};
+const fresh = (canvas, container) => {
+    const context = canvas.getContext('2d');
+    if (!context) {
+        return null;
+    }
+    const ratio = window.devicePixelRatio || 1;
+    const width = Math.round(container.clientWidth * ratio);
+    const height = Math.round(container.clientHeight * ratio);
+    if (canvas.width !== width || canvas.height !== height) {
+        canvas.width = width;
+        canvas.height = height;
+    }
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.clearRect(0, 0, width, height);
+    return context;
+};
+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;
+        if (!context) {
+            flights = [];
+            return;
+        }
+        context.globalCompositeOperation = glowing ? 'lighter' : 'source-over';
+        flights = flights.filter((flight) => {
+            const from = onScreen(flight.from);
+            const to = onScreen(flight.to);
+            if (!from || !to) {
+                return false;
+            }
+            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;
+            }
+            context.save();
+            if (gone < 1) {
+                if (flight.animate) {
+                    pulse(context, flight.leaves, flight.arrives, from, to, ease(gone), gone, glowing);
+                }
+                else {
+                    const line = context.createLinearGradient(from.x, from.y, to.x, to.y);
+                    line.addColorStop(0, flight.leaves);
+                    line.addColorStop(1, flight.arrives);
+                    context.globalAlpha = 1 - gone;
+                    context.strokeStyle = line;
+                    context.lineWidth = 2;
+                    context.beginPath();
+                    context.moveTo(from.x, from.y);
+                    context.lineTo(to.x, to.y);
+                    context.stroke();
+                }
+            }
+            else if (flight.animate) {
+                arrive(context, flight.arrives, to, (gone - 1) / (ARRIVAL / crossing));
+            }
+            context.restore();
+            return true;
+        });
+        flying = flights.length > 0 ? requestAnimationFrame(fly) : 0;
+    };
+    return {
+        look: (looks) => {
+            ink = looks.ink;
+            glowing = isLight(looks.ink);
+        },
+        signal: (from, to, colors, animate) => {
+            overlay ??= layer(container, 'signals');
+            flights.push({
+                animate,
+                arrives: colors?.to ?? ink,
+                from,
+                leaves: colors?.from ?? ink,
+                started: performance.now(),
+                to,
+            });
+            if (flights.length > FLYING) {
+                flights = flights.slice(-FLYING);
+            }
+            if (!flying) {
+                flying = requestAnimationFrame(fly);
+            }
+        },
+        stop: () => {
+            cancelAnimationFrame(flying);
+            flying = 0;
+            flights = [];
+            overlay?.remove();
+            overlay = undefined;
+        },
+    };
+};
+export const groupsOver = (container, onScreen) => {
+    let canvas;
+    let groups = [];
+    let looks;
+    const draw = () => {
+        const context = canvas && looks ? fresh(canvas, container) : null;
+        if (context && looks) {
+            nameGroups(context, groups, looks, onScreen);
+        }
+    };
+    return {
+        draw,
+        look: (next) => {
+            looks = next;
+            draw();
+        },
+        set: (next) => {
+            canvas ??= layer(container, 'groups');
+            groups = next;
+            draw();
+        },
+        stop: () => {
+            canvas?.remove();
+            canvas = undefined;
+        },
+    };
+};
+export const gesturesHeld = (container) => {
+    let mode = 'free';
+    const touchAction = container.style.touchAction;
+    const hold = (event) => {
+        if (mode === 'free') {
+            return;
+        }
+        if (mode === 'off') {
+            event.stopImmediatePropagation();
+            return;
+        }
+        if (event instanceof WheelEvent) {
+            if (!(event.ctrlKey || event.metaKey)) {
+                event.stopImmediatePropagation();
+            }
+            return;
+        }
+        if (typeof TouchEvent !== 'undefined' && event instanceof TouchEvent) {
+            if (event.touches.length < 2) {
+                event.stopImmediatePropagation();
+            }
+            else if (event.type === 'touchstart' && event.cancelable) {
+                event.preventDefault();
+            }
+        }
+    };
+    const held = ['wheel', 'touchstart', 'touchmove', 'mousedown'];
+    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';
+        },
+        stop: () => {
+            for (const type of held) {
+                container.removeEventListener(type, hold, { capture: true });
+            }
+            container.style.touchAction = touchAction;
+        },
+    };
+};

package/dist/sigma/node-program.d.ts

@@ -0,0 +1,71 @@
+import { NodeProgram } from 'sigma/rendering';
+import type { NodeDisplayData, RenderParams } from 'sigma/types';
+/** The shapes a note is drawn in, numbered as the shader reads them. */
+export declare const SHAPES: {
+    readonly circle: 0;
+    readonly diamond: 2;
+    readonly ring: 3;
+    readonly square: 1;
+};
+/** How heavily a note is drawn, numbered as the shader reads them. */
+export declare const EMPHASES: {
+    readonly outlined: 1;
+    readonly solid: 0;
+    readonly subtle: 2;
+};
+/** What a note is made of, numbered as the shader reads them. */
+export declare const MATERIALS: {
+    readonly flat: 0;
+    readonly frosted: 2;
+    readonly glass: 1;
+};
+/** What the node program reads off a note, beyond what Sigma gives every note. */
+export interface HelixNodeData {
+    /** `EMPHASES`. */
+    emphasisCode?: number;
+    /** How strongly the note glows, from 0 to 1: the selected note's halo. */
+    glow?: number;
+    /** `MATERIALS`. */
+    materialCode?: number;
+    /** `SHAPES`. */
+    shapeCode?: number;
+}
+declare const UNIFORMS: readonly ['u_sizeRatio', 'u_correctionRatio', 'u_matrix'];
+/**
+ * Draws a note in its shape, its emphasis and its material, with a glow where
+ * it is selected: one triangle a note, as Sigma's own circle is, cut to the
+ * shape where it is drawn. Pressing reads the shape and not the glow, so a
+ * press beside a note is not a press on it.
+ */
+export declare class HelixNodeProgram extends NodeProgram<(typeof UNIFORMS)[number]> {
+    getDefinition(): {
+        ATTRIBUTES: ({
+            name: string;
+            size: number;
+            type: 5126;
+            normalized?: never;
+        } | {
+            name: string;
+            normalized: boolean;
+            size: number;
+            type: 5121;
+        })[];
+        CONSTANT_ATTRIBUTES: {
+            name: string;
+            size: number;
+            type: 5126;
+        }[];
+        CONSTANT_DATA: number[][];
+        FRAGMENT_SHADER_SOURCE: string;
+        METHOD: 4;
+        UNIFORMS: readonly ["u_sizeRatio", "u_correctionRatio", "u_matrix"];
+        VERTEX_SHADER_SOURCE: string;
+        VERTICES: number;
+    };
+    processVisibleItem(nodeIndex: number, startIndex: number, data: NodeDisplayData & HelixNodeData): void;
+    setUniforms(params: RenderParams, { gl, uniformLocations, }: {
+        gl: WebGLRenderingContext;
+        uniformLocations: Record<string, WebGLUniformLocation>;
+    }): void;
+}
+export {};

package/dist/sigma/node-program.js

@@ -0,0 +1,170 @@
+import { NodeProgram } from 'sigma/rendering';
+import { floatColor } from 'sigma/utils';
+export const SHAPES = { circle: 0, diamond: 2, ring: 3, square: 1 };
+export const EMPHASES = { outlined: 1, solid: 0, subtle: 2 };
+export const MATERIALS = { flat: 0, frosted: 2, glass: 1 };
+const REACH = 2.6;
+const VERTEX = `
+attribute vec4 a_id;
+attribute vec4 a_color;
+attribute vec2 a_position;
+attribute float a_size;
+attribute float a_shape;
+attribute float a_emphasis;
+attribute float a_material;
+attribute float a_glow;
+attribute float a_angle;
+
+uniform mat3 u_matrix;
+uniform float u_sizeRatio;
+uniform float u_correctionRatio;
+
+varying vec4 v_color;
+varying vec2 v_diffVector;
+varying float v_radius;
+varying float v_shape;
+varying float v_emphasis;
+varying float v_material;
+varying float v_glow;
+
+const float bias = 255.0 / 254.0;
+
+void main() {
+  float size = a_size * u_correctionRatio / u_sizeRatio * 4.0;
+  vec2 diffVector = size * ${REACH.toFixed(2)} * vec2(cos(a_angle), sin(a_angle));
+  gl_Position = vec4((u_matrix * vec3(a_position + diffVector, 1)).xy, 0, 1);
+  v_diffVector = diffVector;
+  v_radius = size / 2.0;
+  v_shape = a_shape;
+  v_emphasis = a_emphasis;
+  v_material = a_material;
+  v_glow = a_glow;
+  #ifdef PICKING_MODE
+  v_color = a_id;
+  #else
+  v_color = a_color;
+  #endif
+  v_color.a *= bias;
+}
+`;
+const FRAGMENT = `
+precision highp float;
+
+varying vec4 v_color;
+varying vec2 v_diffVector;
+varying float v_radius;
+varying float v_shape;
+varying float v_emphasis;
+varying float v_material;
+varying float v_glow;
+
+uniform float u_correctionRatio;
+
+/* How far a point is outside the note's shape, in radii: below zero inside. */
+float outside(vec2 p, float shape) {
+  if (shape > 0.5 && shape < 1.5) {
+    vec2 q = abs(p) - vec2(0.7);
+    return length(max(q, 0.0)) + min(max(q.x, q.y), 0.0) - 0.18;
+  }
+  if (shape > 1.5 && shape < 2.5) {
+    return (abs(p.x) + abs(p.y)) * 0.7071 - 0.86;
+  }
+  return length(p) - 1.0;
+}
+
+void main(void) {
+  vec2 p = v_diffVector / v_radius;
+  float d = outside(p, v_shape);
+
+  #ifdef PICKING_MODE
+  if (d > 0.0) discard;
+  gl_FragColor = v_color;
+  #else
+  float aa = u_correctionRatio * 2.0 / v_radius;
+  float inside = 1.0 - smoothstep(-aa, 0.0, d);
+
+  /* A ring is a circle drawn outlined, whatever its emphasis says. */
+  float emphasis = v_shape > 2.5 ? 1.0 : v_emphasis;
+  float edge = smoothstep(-0.32 - aa, -0.32, d);
+  float fill = emphasis > 1.5 ? mix(0.3, 1.0, edge) : emphasis > 0.5 ? edge : 1.0;
+
+  vec3 color = v_color.rgb;
+  float alpha = 1.0;
+  /* How large the note is drawn, in pixels: a highlight that suits a hub is
+     a speck of noise on a leaf, so the detail grows in with the size. */
+  float drawn = smoothstep(4.0, 14.0, v_radius / u_correctionRatio);
+  /* Lit from above on the left, as every surface here is. */
+  float lit = clamp(0.5 + 0.5 * dot(normalize(vec2(-0.45, 0.9)), p), 0.0, 1.0);
+  /* A fine rim a shade darker, so notes that touch stay two. */
+  float rim = smoothstep(-0.2 - aa, -0.2, d);
+  if (v_material > 0.5 && v_material < 1.5) {
+    /* Glass: shaded like a sphere, a highlight, and light at its rim. */
+    color *= mix(0.72, 1.12, lit);
+    float highlight = exp(-pow(length(p - vec2(-0.32, 0.38)) / 0.26, 2.0));
+    color = mix(color, vec3(1.0), highlight * mix(0.25, 0.6, drawn));
+    color = mix(color, vec3(1.0), rim * 0.22 * drawn);
+    alpha = 0.94;
+  } else if (v_material > 1.5) {
+    /* Frosted: a milky body, a soft fall of light, and no sharp highlight. */
+    color = mix(color * mix(0.86, 1.06, lit), vec3(1.0), 0.16);
+    color = mix(color, vec3(1.0), rim * 0.14);
+    alpha = 0.86;
+  } else {
+    color = mix(color, color * 0.72, rim * 0.6);
+  }
+
+  float body = inside * fill * alpha * v_color.a;
+  /* The glow, outside the shape: a crisp ring just clear of the edge and a
+     soft light falling away beyond it, both in the note's own color. */
+  float reach = ${(REACH - 1).toFixed(2)};
+  float ring = 1.0 - smoothstep(0.0, 0.07 + aa, abs(d - 0.32));
+  float falloff = exp(-d * 2.4) * (1.0 - smoothstep(reach * 0.8, reach, d));
+  float halo = v_glow * step(0.0, d) * clamp(ring * 0.95 + falloff * 0.55, 0.0, 1.0) * v_color.a;
+  /* Premultiplied, as Sigma blends: the body over its glow. */
+  gl_FragColor = vec4(color * body + v_color.rgb * halo * (1.0 - body), body + halo * (1.0 - body));
+  #endif
+}
+`;
+const { FLOAT, UNSIGNED_BYTE } = WebGLRenderingContext;
+const UNIFORMS = ['u_sizeRatio', 'u_correctionRatio', 'u_matrix'];
+export class HelixNodeProgram extends NodeProgram {
+    getDefinition() {
+        return {
+            ATTRIBUTES: [
+                { name: 'a_position', size: 2, type: FLOAT },
+                { name: 'a_size', size: 1, type: FLOAT },
+                { name: 'a_color', normalized: true, size: 4, type: UNSIGNED_BYTE },
+                { name: 'a_id', normalized: true, size: 4, type: UNSIGNED_BYTE },
+                { name: 'a_shape', size: 1, type: FLOAT },
+                { name: 'a_emphasis', size: 1, type: FLOAT },
+                { name: 'a_material', size: 1, type: FLOAT },
+                { name: 'a_glow', size: 1, type: FLOAT },
+            ],
+            CONSTANT_ATTRIBUTES: [{ name: 'a_angle', size: 1, type: FLOAT }],
+            CONSTANT_DATA: [[0], [(2 * Math.PI) / 3], [(4 * Math.PI) / 3]],
+            FRAGMENT_SHADER_SOURCE: FRAGMENT,
+            METHOD: WebGLRenderingContext.TRIANGLES,
+            UNIFORMS,
+            VERTEX_SHADER_SOURCE: VERTEX,
+            VERTICES: 3,
+        };
+    }
+    processVisibleItem(nodeIndex, startIndex, data) {
+        const array = this.array;
+        let at = startIndex;
+        array[at++] = data.x;
+        array[at++] = data.y;
+        array[at++] = data.size;
+        array[at++] = floatColor(data.color);
+        array[at++] = nodeIndex;
+        array[at++] = data.shapeCode ?? SHAPES.circle;
+        array[at++] = data.emphasisCode ?? EMPHASES.solid;
+        array[at++] = data.materialCode ?? MATERIALS.flat;
+        array[at] = data.glow ?? 0;
+    }
+    setUniforms(params, { gl, uniformLocations, }) {
+        gl.uniform1f(uniformLocations.u_correctionRatio, params.correctionRatio);
+        gl.uniform1f(uniformLocations.u_sizeRatio, params.sizeRatio);
+        gl.uniformMatrix3fv(uniformLocations.u_matrix, false, params.matrix);
+    }
+}

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

@@ -1,4 +1,5 @@
 import type { GraphDriver } from '../connect-graph/connect-graph.js';
+import type { NodeLook } from '../connect-graph/looks.js';
 /** A graphology graph, as far as the driver calls it. */
 export interface SigmaGraph {
     addEdge(source: string, target: string, attributes?: Record<string, unknown>): unknown;
@@ -57,16 +58,19 @@ export interface SigmaRenderer {
         x: number;
         y: number;
     } | undefined;
-    off(type: 'clickNode', listener: (payload: {
+    off(type: 'clickNode' | 'enterNode' | 'leaveNode', listener: (payload: {
         node: string;
     }) => void): unknown;
-    on(type: 'clickNode', listener: (payload: {
+    off(type: 'afterRender' | 'beforeRender', listener: () => void): unknown;
+    on(type: 'clickNode' | 'enterNode' | 'leaveNode', listener: (payload: {
         node: string;
     }) => void): unknown;
+    on(type: 'afterRender' | 'beforeRender', listener: () => void): unknown;
+    getSetting(name: 'nodeProgramClasses'): Record<string, unknown>;
     refresh(): unknown;
     resize(force?: boolean): unknown;
     scaleSize(size?: number): number;
-    setSetting(name: 'defaultDrawNodeHover' | 'edgeReducer' | 'labelColor' | 'labelFont' | 'labelRenderedSizeThreshold' | 'nodeReducer', value: unknown): unknown;
+    setSetting(name: 'defaultDrawNodeHover' | 'edgeReducer' | 'labelColor' | 'labelFont' | 'defaultDrawNodeLabel' | 'labelGridCellSize' | 'labelRenderedSizeThreshold' | 'labelSize' | 'minEdgeThickness' | 'nodeProgramClasses' | 'nodeReducer', value: unknown): unknown;
     viewportToFramedGraph(point: {
         x: number;
         y: number;
@@ -100,6 +104,30 @@ export interface SigmaDriverOptions {
      * Without one, notes stay where the connector started them.
      */
     layout?: ((graph: SigmaGraph) => SigmaLayout) | undefined;
+    /**
+     * How heavily a note is drawn where it does not say: `solid`, filled, by
+     * default; `outlined`, a ring; `subtle`, a tinted fill with a ring.
+     */
+    emphasis?: NodeLook['emphasis'];
+    /**
+     * What a note is drawn as made of where it does not say: flat by default,
+     * `glass`, a shaded sphere with a highlight and a lit rim, or `frosted`, a
+     * milky body with a soft fall of light.
+     */
+    material?: NodeLook['material'];
+    /** A note's shape where it does not say: `circle` by default, `square`, `diamond` or `ring`. */
+    shape?: NodeLook['shape'];
+    /**
+     * Whether each group's name is drawn over its notes. On by default, which
+     * is how a reader finds their way while notes are named only on hover.
+     */
+    groupLabels?: boolean | undefined;
+    /**
+     * Which notes are named. `hover`, by default: the note under the pointer,
+     * the selected note and its neighbors. `hubs`: the busiest notes as well, at
+     * rest. `all`: every note, where its name does not cover another.
+     */
+    labels?: 'all' | 'hover' | 'hubs' | undefined;
     /** The longest a layout runs, in milliseconds, settled or not. 10 seconds by default, about where 10,000 notes settle. */
     layoutLimit?: number | undefined;
 }