@multiplekex/shallot 0.1.12 → 0.2.0

package/src/extras/text/sdf.ts

@@ -0,0 +1,429 @@
+interface LineSegment {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+
+function pointOnQuadraticBezier(
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    t: number
+): { x: number; y: number } {
+    const t2 = 1 - t;
+    return {
+        x: t2 * t2 * x0 + 2 * t2 * t * x1 + t * t * x2,
+        y: t2 * t2 * y0 + 2 * t2 * t * y1 + t * t * y2,
+    };
+}
+
+function pointOnCubicBezier(
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
+    x3: number,
+    y3: number,
+    t: number
+): { x: number; y: number } {
+    const t2 = 1 - t;
+    return {
+        x: t2 * t2 * t2 * x0 + 3 * t2 * t2 * t * x1 + 3 * t2 * t * t * x2 + t * t * t * x3,
+        y: t2 * t2 * t2 * y0 + 3 * t2 * t2 * t * y1 + 3 * t2 * t * t * y2 + t * t * t * y3,
+    };
+}
+
+export function segmentPath(pathString: string, curvePoints = 16): LineSegment[] {
+    const segments: LineSegment[] = [];
+    const segmentRE = /([MLQCZ])([^MLQCZ]*)/g;
+    let match: RegExpExecArray | null;
+    let firstX = 0,
+        firstY = 0,
+        prevX = 0,
+        prevY = 0;
+
+    while ((match = segmentRE.exec(pathString))) {
+        const args = match[2]
+            .trim()
+            .split(/[,\s]+/)
+            .filter((s) => s)
+            .map((v) => parseFloat(v));
+
+        switch (match[1]) {
+            case "M":
+                prevX = firstX = args[0];
+                prevY = firstY = args[1];
+                break;
+            case "L":
+                if (args[0] !== prevX || args[1] !== prevY) {
+                    segments.push({ x1: prevX, y1: prevY, x2: args[0], y2: args[1] });
+                }
+                prevX = args[0];
+                prevY = args[1];
+                break;
+            case "Q": {
+                let curveX = prevX;
+                let curveY = prevY;
+                for (let i = 1; i < curvePoints; i++) {
+                    const pt = pointOnQuadraticBezier(
+                        prevX,
+                        prevY,
+                        args[0],
+                        args[1],
+                        args[2],
+                        args[3],
+                        i / (curvePoints - 1)
+                    );
+                    segments.push({ x1: curveX, y1: curveY, x2: pt.x, y2: pt.y });
+                    curveX = pt.x;
+                    curveY = pt.y;
+                }
+                prevX = args[2];
+                prevY = args[3];
+                break;
+            }
+            case "C": {
+                let curveX = prevX;
+                let curveY = prevY;
+                for (let i = 1; i < curvePoints; i++) {
+                    const pt = pointOnCubicBezier(
+                        prevX,
+                        prevY,
+                        args[0],
+                        args[1],
+                        args[2],
+                        args[3],
+                        args[4],
+                        args[5],
+                        i / (curvePoints - 1)
+                    );
+                    segments.push({ x1: curveX, y1: curveY, x2: pt.x, y2: pt.y });
+                    curveX = pt.x;
+                    curveY = pt.y;
+                }
+                prevX = args[4];
+                prevY = args[5];
+                break;
+            }
+            case "Z":
+                if (prevX !== firstX || prevY !== firstY) {
+                    segments.push({ x1: prevX, y1: prevY, x2: firstX, y2: firstY });
+                }
+                prevX = firstX;
+                prevY = firstY;
+                break;
+        }
+    }
+
+    return segments;
+}
+
+const distanceShader = /* wgsl */ `
+struct Uniforms {
+    glyphBounds: vec4<f32>,
+    maxDistance: f32,
+    exponent: f32,
+    _pad: vec2<f32>,
+}
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(0) @binding(1) var<storage, read> segments: array<vec4<f32>>;
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) glyphXY: vec2<f32>,
+    @location(1) @interpolate(flat) segmentIdx: u32,
+}
+
+@vertex
+fn vs_distance(
+    @builtin(vertex_index) vid: u32,
+    @builtin(instance_index) segmentIdx: u32
+) -> VertexOutput {
+    let uv = vec2<f32>(
+        f32((vid << 1u) & 2u),
+        f32(vid & 2u)
+    );
+
+    var out: VertexOutput;
+    out.position = vec4<f32>(uv * 2.0 - 1.0, 0.0, 1.0);
+    out.glyphXY = mix(uniforms.glyphBounds.xy, uniforms.glyphBounds.zw, uv);
+    out.segmentIdx = segmentIdx;
+    return out;
+}
+
+@fragment
+fn fs_distance(input: VertexOutput) -> @location(0) vec4<f32> {
+    let seg = segments[input.segmentIdx];
+    let p = input.glyphXY;
+
+    let lineDir = seg.zw - seg.xy;
+    let lenSq = dot(lineDir, lineDir);
+    let t = select(0.0, clamp(dot(p - seg.xy, lineDir) / lenSq, 0.0, 1.0), lenSq > 0.0);
+    let closest = seg.xy + t * lineDir;
+    let dist = distance(p, closest);
+
+    let val = pow(1.0 - clamp(dist / uniforms.maxDistance, 0.0, 1.0), uniforms.exponent) * 0.5;
+
+    let crosses = (seg.y > p.y) != (seg.w > p.y);
+    let crossX = (seg.z - seg.x) * (p.y - seg.y) / (seg.w - seg.y) + seg.x;
+    let crossingUp = crosses && (p.x < crossX) && (seg.y < seg.w);
+    let crossingDown = crosses && (p.x < crossX) && (seg.y > seg.w);
+
+    return vec4<f32>(
+        select(0.0, 1.0/255.0, crossingUp),
+        select(0.0, 1.0/255.0, crossingDown),
+        0.0,
+        val
+    );
+}
+`;
+
+const finalizeShader = /* wgsl */ `
+@group(0) @binding(0) var intermediate: texture_2d<f32>;
+@group(0) @binding(1) var samp: sampler;
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+}
+
+@vertex
+fn vs_finalize(@builtin(vertex_index) vid: u32) -> VertexOutput {
+    let uv = vec2<f32>(
+        f32((vid << 1u) & 2u),
+        f32(vid & 2u)
+    );
+
+    var out: VertexOutput;
+    out.position = vec4<f32>(uv * 2.0 - 1.0, 0.0, 1.0);
+    out.uv = uv;
+    return out;
+}
+
+@fragment
+fn fs_finalize(input: VertexOutput) -> @location(0) vec4<f32> {
+    let color = textureSample(intermediate, samp, input.uv);
+    let inside = color.r != color.g;
+    let val = select(color.a, 1.0 - color.a, inside);
+    return vec4<f32>(val, val, val, val);
+}
+`;
+
+export interface SDFGeneratorConfig {
+    device: GPUDevice;
+    sdfSize?: number;
+    exponent?: number;
+    curveSubdivisions?: number;
+}
+
+export class SDFGenerator {
+    private device: GPUDevice;
+    private sdfSize: number;
+    private exponent: number;
+    private curveSubdivisions: number;
+
+    private distancePipeline: GPURenderPipeline | null = null;
+    private finalizePipeline: GPURenderPipeline | null = null;
+
+    private uniformBuffer: GPUBuffer;
+    private segmentBuffer: GPUBuffer;
+    private intermediateTexture: GPUTexture | null = null;
+    private sampler: GPUSampler;
+
+    private maxSegments = 4096;
+
+    constructor(config: SDFGeneratorConfig) {
+        this.device = config.device;
+        this.sdfSize = config.sdfSize ?? 64;
+        this.exponent = config.exponent ?? 9;
+        this.curveSubdivisions = config.curveSubdivisions ?? 16;
+
+        this.uniformBuffer = this.device.createBuffer({
+            size: 32,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+
+        this.segmentBuffer = this.device.createBuffer({
+            size: this.maxSegments * 16,
+            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+        });
+
+        this.sampler = this.device.createSampler({
+            magFilter: "nearest",
+            minFilter: "nearest",
+        });
+    }
+
+    private ensurePipelines(): void {
+        if (this.distancePipeline) return;
+
+        const distanceModule = this.device.createShaderModule({ code: distanceShader });
+
+        this.distancePipeline = this.device.createRenderPipeline({
+            layout: "auto",
+            vertex: {
+                module: distanceModule,
+                entryPoint: "vs_distance",
+            },
+            fragment: {
+                module: distanceModule,
+                entryPoint: "fs_distance",
+                targets: [
+                    {
+                        format: "rgba8unorm",
+                        blend: {
+                            color: {
+                                srcFactor: "one",
+                                dstFactor: "one",
+                                operation: "add",
+                            },
+                            alpha: {
+                                srcFactor: "one",
+                                dstFactor: "one",
+                                operation: "max",
+                            },
+                        },
+                    },
+                ],
+            },
+            primitive: {
+                topology: "triangle-list",
+            },
+        });
+
+        const finalizeModule = this.device.createShaderModule({ code: finalizeShader });
+
+        this.finalizePipeline = this.device.createRenderPipeline({
+            layout: "auto",
+            vertex: {
+                module: finalizeModule,
+                entryPoint: "vs_finalize",
+            },
+            fragment: {
+                module: finalizeModule,
+                entryPoint: "fs_finalize",
+                targets: [{ format: "r8unorm" }],
+            },
+            primitive: {
+                topology: "triangle-list",
+            },
+        });
+    }
+
+    private ensureIntermediateTexture(): void {
+        if (this.intermediateTexture) return;
+
+        this.intermediateTexture = this.device.createTexture({
+            size: { width: this.sdfSize, height: this.sdfSize },
+            format: "rgba8unorm",
+            usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
+        });
+    }
+
+    generate(
+        path: string,
+        bounds: [number, number, number, number],
+        outputTexture: GPUTexture,
+        outputX: number,
+        outputY: number
+    ): void {
+        this.ensurePipelines();
+        this.ensureIntermediateTexture();
+
+        const segments = segmentPath(path, this.curveSubdivisions);
+        if (segments.length === 0) return;
+        if (segments.length > this.maxSegments) {
+            console.warn(`Too many segments (${segments.length}), truncating to ${this.maxSegments}`);
+            segments.length = this.maxSegments;
+        }
+
+        const [xMin, yMin, xMax, yMax] = bounds;
+        const maxDist = Math.max(xMax - xMin, yMax - yMin) / 2;
+
+        const uniformData = new Float32Array([xMin, yMin, xMax, yMax, maxDist, this.exponent, 0, 0]);
+        this.device.queue.writeBuffer(this.uniformBuffer, 0, uniformData);
+
+        const segmentData = new Float32Array(segments.length * 4);
+        for (let i = 0; i < segments.length; i++) {
+            const seg = segments[i];
+            segmentData[i * 4 + 0] = seg.x1;
+            segmentData[i * 4 + 1] = seg.y1;
+            segmentData[i * 4 + 2] = seg.x2;
+            segmentData[i * 4 + 3] = seg.y2;
+        }
+        this.device.queue.writeBuffer(this.segmentBuffer, 0, segmentData);
+
+        const encoder = this.device.createCommandEncoder();
+
+        const distanceBindGroup = this.device.createBindGroup({
+            layout: this.distancePipeline!.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: { buffer: this.uniformBuffer } },
+                { binding: 1, resource: { buffer: this.segmentBuffer } },
+            ],
+        });
+
+        const distancePass = encoder.beginRenderPass({
+            colorAttachments: [
+                {
+                    view: this.intermediateTexture!.createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: "clear",
+                    storeOp: "store",
+                },
+            ],
+        });
+
+        distancePass.setPipeline(this.distancePipeline!);
+        distancePass.setBindGroup(0, distanceBindGroup);
+        distancePass.draw(3, segments.length);
+        distancePass.end();
+
+        const finalizeBindGroup = this.device.createBindGroup({
+            layout: this.finalizePipeline!.getBindGroupLayout(0),
+            entries: [
+                { binding: 0, resource: this.intermediateTexture!.createView() },
+                { binding: 1, resource: this.sampler },
+            ],
+        });
+
+        const outputView = outputTexture.createView({
+            baseMipLevel: 0,
+            mipLevelCount: 1,
+            baseArrayLayer: 0,
+            arrayLayerCount: 1,
+        });
+
+        const finalizePass = encoder.beginRenderPass({
+            colorAttachments: [
+                {
+                    view: outputView,
+                    loadOp: "load",
+                    storeOp: "store",
+                },
+            ],
+        });
+
+        finalizePass.setViewport(outputX, outputY, this.sdfSize, this.sdfSize, 0, 1);
+        finalizePass.setScissorRect(outputX, outputY, this.sdfSize, this.sdfSize);
+        finalizePass.setPipeline(this.finalizePipeline!);
+        finalizePass.setBindGroup(0, finalizeBindGroup);
+        finalizePass.draw(3);
+        finalizePass.end();
+
+        this.device.queue.submit([encoder.finish()]);
+    }
+
+    destroy(): void {
+        this.uniformBuffer.destroy();
+        this.segmentBuffer.destroy();
+        this.intermediateTexture?.destroy();
+    }
+}

package/src/standard/activity/index.ts

@@ -0,0 +1,172 @@
+import type { Plugin, State } from "../../core";
+import { resource } from "../../core";
+import { Canvas } from "../compute";
+
+export interface Spinner {
+    show(message?: string): (() => void) | void;
+}
+
+export type SpinnerFactory = (canvas: HTMLCanvasElement) => Spinner;
+
+export interface Activity {
+    active: boolean;
+    message: string | undefined;
+    acquire(message?: string): () => void;
+}
+
+export const Activity = resource<Activity>("activity");
+
+export function createActivity(spinner: Spinner | null): Activity {
+    const messages: (string | undefined)[] = [];
+    let cleanup: (() => void) | void = undefined;
+    let displayedMessage: string | undefined = undefined;
+
+    const updateSpinner = () => {
+        const currentMessage = messages[messages.length - 1];
+
+        if (messages.length > 0 && spinner) {
+            if (cleanup && displayedMessage !== currentMessage) {
+                cleanup();
+                cleanup = undefined;
+            }
+            if (!cleanup) {
+                cleanup = spinner.show(currentMessage);
+                displayedMessage = currentMessage;
+            }
+        } else if (messages.length === 0 && cleanup) {
+            cleanup();
+            cleanup = undefined;
+            displayedMessage = undefined;
+        }
+    };
+
+    return {
+        get active() {
+            return messages.length > 0;
+        },
+
+        get message() {
+            return messages[messages.length - 1];
+        },
+
+        acquire(message?: string) {
+            messages.push(message);
+            updateSpinner();
+
+            let released = false;
+            return () => {
+                if (released) return;
+                released = true;
+                const idx = messages.lastIndexOf(message);
+                if (idx !== -1) messages.splice(idx, 1);
+                updateSpinner();
+            };
+        },
+    };
+}
+
+interface Theme {
+    track: string;
+    accent: string;
+}
+
+const dark: Theme = { track: "rgba(51, 51, 51, 0.5)", accent: "#c0b8b0" };
+const light: Theme = { track: "rgba(200, 200, 200, 0.5)", accent: "#505050" };
+
+function createSpinner(canvas: HTMLCanvasElement, theme: Theme): Spinner {
+    return {
+        show(message?: string) {
+            const container = document.createElement("div");
+            const spinnerEl = document.createElement("div");
+
+            const updatePosition = () => {
+                const rect = canvas.getBoundingClientRect();
+                const parentRect = canvas.parentElement?.getBoundingClientRect();
+                if (!parentRect) return;
+
+                const bottom = parentRect.bottom - rect.bottom + 12;
+                const right = parentRect.right - rect.right + 12;
+
+                container.style.cssText = `
+                    position: absolute;
+                    bottom: ${bottom}px;
+                    right: ${right}px;
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    gap: 8px;
+                    z-index: 1000;
+                    pointer-events: none;
+                `;
+
+                spinnerEl.style.cssText = `
+                    width: 20px;
+                    height: 20px;
+                    border: 2px solid ${theme.track};
+                    border-top-color: ${theme.accent};
+                    border-radius: 50%;
+                    animation: shallot-activity-spin 0.8s linear infinite;
+                `;
+            };
+
+            updatePosition();
+
+            if (message) {
+                const label = document.createElement("div");
+                label.textContent = message;
+                label.style.cssText = `
+                    font-family: system-ui, sans-serif;
+                    font-size: 12px;
+                    color: ${theme.accent};
+                    white-space: nowrap;
+                    text-align: right;
+                `;
+                container.appendChild(label);
+            }
+
+            container.appendChild(spinnerEl);
+
+            if (!document.getElementById("shallot-activity-style")) {
+                const style = document.createElement("style");
+                style.id = "shallot-activity-style";
+                style.textContent = `
+                    @keyframes shallot-activity-spin {
+                        to { transform: rotate(360deg); }
+                    }
+                `;
+                document.head.appendChild(style);
+            }
+
+            const parent = canvas.parentElement;
+            if (parent) {
+                if (getComputedStyle(parent).position === "static") {
+                    parent.style.position = "relative";
+                }
+                parent.appendChild(container);
+            }
+
+            const observer = new ResizeObserver(updatePosition);
+            observer.observe(canvas);
+
+            return () => {
+                observer.disconnect();
+                container.remove();
+            };
+        },
+    };
+}
+
+export const spinnerDark = (canvas: HTMLCanvasElement): Spinner => createSpinner(canvas, dark);
+
+export const spinnerLight = (canvas: HTMLCanvasElement): Spinner => createSpinner(canvas, light);
+
+export const ActivityPlugin: Plugin & { spinner: SpinnerFactory | null } = {
+    spinner: null,
+
+    initialize(state: State) {
+        const canvas = Canvas.from(state);
+        const spinner =
+            canvas && ActivityPlugin.spinner ? ActivityPlugin.spinner(canvas.element) : null;
+        state.setResource(Activity, createActivity(spinner));
+    },
+};

package/src/standard/compute/graph.ts

@@ -1,6 +1,4 @@
 import { CycleError } from "../../core";
-import { inspect as inspectGraph, type GraphInspection } from "./inspect";
-import { Pass, PASS_ORDER } from "./pass";
 
 export type ResourceId = string;
 export type NodeId = string;
@@ -27,10 +25,11 @@ export interface ExecutionContext {
 
 export interface ComputeNode {
     readonly id: NodeId;
-    readonly pass?: Pass;
     readonly inputs: readonly ResourceRef[];
     readonly outputs: readonly ResourceRef[];
+    readonly sync?: boolean;
     readonly execute: (ctx: ExecutionContext) => void;
+    readonly prepare?: (device: GPUDevice) => Promise<void>;
 }
 
 export interface ExecutionPlan {
@@ -50,7 +49,7 @@ function buildEdges(nodes: ComputeNode[]): [ComputeNode, ComputeNode][] {
     for (const node of nodes) {
         for (const input of node.inputs) {
             const producer = producers.get(input.id);
-            if (producer) {
+            if (producer && producer !== node) {
                 edges.push([producer, node]);
             }
         }
@@ -111,29 +110,17 @@ function compile(nodes: ComputeNode[]): ExecutionPlan {
         return { sorted: [] };
     }
 
-    const byPass = new Map<Pass, ComputeNode[]>();
-    for (const pass of PASS_ORDER) {
-        byPass.set(pass, []);
-    }
-
-    for (const node of nodes) {
-        const pass = node.pass ?? Pass.Opaque;
-        byPass.get(pass)!.push(node);
-    }
-
-    const sorted: ComputeNode[] = [];
-    for (const pass of PASS_ORDER) {
-        const passNodes = byPass.get(pass)!;
-        sorted.push(...topoSort(passNodes));
-    }
-
-    return { sorted };
+    return { sorted: topoSort(nodes) };
 }
 
 export class ComputeGraph {
     readonly nodes = new Map<NodeId, ComputeNode>();
     private _plan: ExecutionPlan | null = null;
 
+    get planCached(): boolean {
+        return this._plan !== null;
+    }
+
     add(node: ComputeNode): void {
         if (this.nodes.has(node.id)) {
             throw new Error(`Node '${node.id}' already exists`);
@@ -165,7 +152,20 @@ export class ComputeGraph {
         return this._plan;
     }
 
-    inspect(): GraphInspection {
-        return inspectGraph(Array.from(this.nodes.values()));
+    async prepare(
+        device: GPUDevice,
+        onProgress?: (done: number, total: number) => void
+    ): Promise<void> {
+        const preparable = Array.from(this.nodes.values()).filter((n) => n.prepare);
+        const total = preparable.length;
+        let done = 0;
+
+        const promises = preparable.map(async (node) => {
+            await node.prepare!(device);
+            done++;
+            onProgress?.(done, total);
+        });
+
+        await Promise.all(promises);
     }
 }