@yurialvesbordin/graphium 0.0.0-stage → 2.0.1

package/dist/render/TextureAtlas.js

@@ -0,0 +1,160 @@
+/**
+ * Manages a GPU texture atlas that packs node images into a fixed grid.
+ * Images load asynchronously, are drawn into an offscreen canvas using cover
+ * or contain framing, and are uploaded in a single texture update per frame.
+ */
+export class TextureAtlas {
+    constructor(gl, size = 1024, grid = 8) {
+        this.revision = 0;
+        this.loadedCount = 0;
+        this.entries = new Map();
+        this.pending = new Set();
+        this.nextSlot = 0;
+        this.onEvent = null;
+        this.uploadedRevision = -1;
+        this.gl = gl;
+        this.size = size;
+        this.grid = grid;
+        this.cellSize = size / grid;
+        this.maxSlots = grid * grid;
+        if (typeof OffscreenCanvas !== 'undefined') {
+            this.canvas = new OffscreenCanvas(size, size);
+            this.context = this.canvas.getContext('2d');
+        }
+        else {
+            this.canvas = document.createElement('canvas');
+            this.canvas.width = size;
+            this.canvas.height = size;
+            this.context = this.canvas.getContext('2d');
+        }
+        this.texture = gl.createTexture();
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+    }
+    /** Returns the GPU texture handle for binding during node rendering. */
+    getTexture() {
+        return this.texture;
+    }
+    /** Returns the slot for a URL, requesting the image if it is new. */
+    request(url, mode = 'cover') {
+        const entry = this.entries.get(url);
+        if (entry) {
+            entry.used = true;
+            entry.mode = mode;
+            return entry.slot;
+        }
+        if (this.nextSlot >= this.maxSlots || typeof Image === 'undefined') {
+            return -1;
+        }
+        const record = {
+            slot: this.nextSlot++,
+            ready: false,
+            failed: false,
+            used: true,
+            mode,
+            image: null,
+        };
+        this.entries.set(url, record);
+        this.pending.add(url);
+        const image = new Image();
+        image.crossOrigin = 'anonymous';
+        image.onload = () => {
+            if (!this.entries.has(url)) {
+                return;
+            }
+            record.ready = true;
+            record.image = image;
+            this.pending.delete(url);
+            this.drawEntry(record);
+            this.loadedCount++;
+            if (this.onEvent) {
+                this.onEvent({ type: 'imageload', url, slot: record.slot });
+            }
+        };
+        image.onerror = () => {
+            record.failed = true;
+            this.pending.delete(url);
+            if (this.onEvent) {
+                this.onEvent({ type: 'imageerror', url, slot: record.slot });
+            }
+        };
+        image.src = url;
+        return record.slot;
+    }
+    /** Paints one entry into its atlas cell respecting the framing mode. */
+    drawEntry(record) {
+        const context = this.context;
+        const image = record.image;
+        if (!context || !image) {
+            return;
+        }
+        const cell = this.cellSize;
+        const x = (record.slot % this.grid) * cell;
+        const y = Math.floor(record.slot / this.grid) * cell;
+        const naturalWidth = image.naturalWidth || image.width;
+        const naturalHeight = image.naturalHeight || image.height;
+        const scale = record.mode === 'contain' ? Math.min(cell / naturalWidth, cell / naturalHeight) : Math.max(cell / naturalWidth, cell / naturalHeight);
+        const width = naturalWidth * scale;
+        const height = naturalHeight * scale;
+        context.clearRect(x, y, cell, cell);
+        context.drawImage(image, x + (cell - width) * 0.5, y + (cell - height) * 0.5, width, height);
+        this.revision++;
+    }
+    /** Uploads the atlas canvas to the GPU when new images arrived. */
+    update() {
+        if (this.revision === this.uploadedRevision) {
+            return false;
+        }
+        this.uploadedRevision = this.revision;
+        const gl = this.gl;
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.texture);
+        if (this.canvas) {
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.canvas);
+        }
+        return true;
+    }
+    /** Marks all entries unused and drops the ones ignored for a full frame. */
+    sweep() {
+        for (const [url, entry] of this.entries) {
+            if (!entry.used) {
+                this.entries.delete(url);
+            }
+            else {
+                entry.used = false;
+            }
+        }
+    }
+    /** Resolves once every pending image finished loading or failed. */
+    loadAll() {
+        if (this.pending.size === 0) {
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            const check = () => {
+                if (this.pending.size === 0) {
+                    resolve();
+                    return true;
+                }
+                return false;
+            };
+            const previous = this.onEvent;
+            this.onEvent = event => {
+                if (previous) {
+                    previous(event);
+                }
+                check();
+            };
+        });
+    }
+    /** Reports whether a URL finished loading successfully. */
+    isReady(url) {
+        return this.entries.get(url)?.ready ?? false;
+    }
+}
+//# sourceMappingURL=TextureAtlas.js.map

package/dist/render/TextureAtlas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextureAtlas.js","sourceRoot":"","sources":["../../src/render/TextureAtlas.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAiBH,MAAM,OAAO,YAAY;IAiBvB,YAAY,EAA0B,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,CAAC;QAZ7D,aAAQ,GAAG,CAAC,CAAC;QACb,gBAAW,GAAG,CAAC,CAAC;QAMR,YAAO,GAAG,IAAI,GAAG,EAAsB,CAAC;QACxC,YAAO,GAAG,IAAI,GAAG,EAAU,CAAC;QAC5B,aAAQ,GAAG,CAAC,CAAC;QACrB,YAAO,GAAyC,IAAI,CAAC;QAyJ7C,qBAAgB,GAAG,CAAC,CAAC,CAAC;QAtJ5B,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;QAC5B,IAAI,OAAO,eAAe,KAAK,WAAW,EAAE,CAAC;YAC3C,IAAI,CAAC,MAAM,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,IAAI,CAAC,OAAO,GAAI,IAAI,CAAC,MAA0B,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC/C,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,OAAO,GAAI,IAAI,CAAC,MAA4B,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACrE,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,aAAa,EAAkB,CAAC;QAClD,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;QAC9B,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5C,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QAClE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,kBAAkB,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC;QAClE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC;QACrE,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,cAAc,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC;QACrE,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAC3F,CAAC;IAED,wEAAwE;IACxE,UAAU;QACR,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,qEAAqE;IACrE,OAAO,CAAC,GAAW,EAAE,OAA4B,OAAO;QACtD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACpC,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;YAClB,OAAO,KAAK,CAAC,IAAI,CAAC;QACpB,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE,CAAC;YACnE,OAAO,CAAC,CAAC,CAAC;QACZ,CAAC;QACD,MAAM,MAAM,GAAe;YACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,IAAI,EAAE,IAAI;YACV,IAAI;YACJ,KAAK,EAAE,IAAI;SACZ,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;QAC9B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACtB,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;QAC1B,KAAK,CAAC,WAAW,GAAG,WAAW,CAAC;QAChC,KAAK,CAAC,MAAM,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;YACpB,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;YACvB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;YAC9D,CAAC;QACH,CAAC,CAAC;QACF,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;YACnB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACzB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC;QACF,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;QAChB,OAAO,MAAM,CAAC,IAAI,CAAC;IACrB,CAAC;IAED,wEAAwE;IAChE,SAAS,CAAC,MAAkB;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC3B,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QAC3C,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;QACrD,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,KAAK,CAAC;QACvD,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,MAAM,CAAC;QAC1D,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,EAAE,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,YAAY,EAAE,IAAI,GAAG,aAAa,CAAC,CAAC;QACpJ,MAAM,KAAK,GAAG,YAAY,GAAG,KAAK,CAAC;QACnC,MAAM,MAAM,GAAG,aAAa,GAAG,KAAK,CAAC;QACrC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QACpC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,MAAM,CAAC,GAAG,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;QAC7F,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,mEAAmE;IACnE,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC5C,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;QACtC,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;QAC9B,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC5C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,MAAwB,CAAC,CAAC;QACrG,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,4EAA4E;IAC5E,KAAK;QACH,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACN,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;YACrB,CAAC;QACH,CAAC;IACH,CAAC;IAED,oEAAoE;IACpE,OAAO;QACL,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;YAC5B,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC3B,CAAC;QACD,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;YAC3B,MAAM,KAAK,GAAG,GAAG,EAAE;gBACjB,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,EAAE,CAAC;oBAC5B,OAAO,EAAE,CAAC;oBACV,OAAO,IAAI,CAAC;gBACd,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC,CAAC;YACF,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC;YAC9B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,EAAE;gBACrB,IAAI,QAAQ,EAAE,CAAC;oBACb,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAClB,CAAC;gBACD,KAAK,EAAE,CAAC;YACV,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,2DAA2D;IAC3D,OAAO,CAAC,GAAW;QACjB,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,KAAK,CAAC;IAC/C,CAAC;CAGF"}

package/dist/render/ViewportController.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Owns view framing and navigation: fitting the graph, centering, zooming,
+ * resizing the renderer to the canvas and screen to world conversion.
+ */
+import type { GraphModel } from '../core/GraphModel.js';
+import type { Camera } from './Camera.js';
+import type { Renderer } from './Renderer.js';
+/** Collaborators the viewport control needs from the main facade. */
+export interface ViewportDeps {
+    model: GraphModel;
+    camera: Camera;
+    renderer: Renderer;
+    invalidate: () => void;
+}
+export declare class ViewportController {
+    private readonly deps;
+    constructor(deps: ViewportDeps);
+    /** Scales the view so the whole graph fits with padding. */
+    fit(padding?: number): void;
+    /** Centers the view on a world point. */
+    centerOn(x: number, y: number): void;
+    /** Multiplies the current zoom level. */
+    zoomBy(factor: number): void;
+    /** Sets an absolute zoom level. */
+    zoomTo(zoom: number): void;
+    /** Resizes the renderer to the canvas client size. */
+    resize(): void;
+    /** Returns the world position under a screen position. */
+    screenToWorld(screenX: number, screenY: number): {
+        x: number;
+        y: number;
+    };
+}
+//# sourceMappingURL=ViewportController.d.ts.map

package/dist/render/ViewportController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportController.d.ts","sourceRoot":"","sources":["../../src/render/ViewportController.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,qEAAqE;AACrE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,qBAAa,kBAAkB;IACjB,OAAO,CAAC,QAAQ,CAAC,IAAI;gBAAJ,IAAI,EAAE,YAAY;IAE/C,4DAA4D;IAC5D,GAAG,CAAC,OAAO,SAAK,GAAG,IAAI;IAoBvB,yCAAyC;IACzC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI;IAKpC,yCAAyC;IACzC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAK5B,mCAAmC;IACnC,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAK1B,sDAAsD;IACtD,MAAM,IAAI,IAAI;IAQd,0DAA0D;IAC1D,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;CAG1E"}

package/dist/render/ViewportController.js

@@ -0,0 +1,57 @@
+/**
+ * Owns view framing and navigation: fitting the graph, centering, zooming,
+ * resizing the renderer to the canvas and screen to world conversion.
+ */
+export class ViewportController {
+    constructor(deps) {
+        this.deps = deps;
+    }
+    /** Scales the view so the whole graph fits with padding. */
+    fit(padding = 60) {
+        const model = this.deps.model;
+        if (model.nodeCount === 0) {
+            return;
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (let index = 0; index < model.nodeCount; index++) {
+            const radius = model.visualRadius[index];
+            minX = Math.min(minX, model.x[index] - radius);
+            minY = Math.min(minY, model.y[index] - radius);
+            maxX = Math.max(maxX, model.x[index] + radius);
+            maxY = Math.max(maxY, model.y[index] + radius);
+        }
+        this.deps.camera.fit(minX, minY, maxX, maxY, padding);
+        this.deps.invalidate();
+    }
+    /** Centers the view on a world point. */
+    centerOn(x, y) {
+        this.deps.camera.setPosition(x, y);
+        this.deps.invalidate();
+    }
+    /** Multiplies the current zoom level. */
+    zoomBy(factor) {
+        this.deps.camera.setZoom(this.deps.camera.zoom * factor);
+        this.deps.invalidate();
+    }
+    /** Sets an absolute zoom level. */
+    zoomTo(zoom) {
+        this.deps.camera.setZoom(zoom);
+        this.deps.invalidate();
+    }
+    /** Resizes the renderer to the canvas client size. */
+    resize() {
+        const canvas = this.deps.renderer.canvas;
+        const width = canvas.clientWidth || canvas.width || 1;
+        const height = canvas.clientHeight || canvas.height || 1;
+        this.deps.renderer.resize(width, height, window.devicePixelRatio || 1);
+        this.deps.invalidate();
+    }
+    /** Returns the world position under a screen position. */
+    screenToWorld(screenX, screenY) {
+        return this.deps.camera.screenToWorld(screenX, screenY, { x: 0, y: 0 });
+    }
+}
+//# sourceMappingURL=ViewportController.js.map

package/dist/render/ViewportController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportController.js","sourceRoot":"","sources":["../../src/render/ViewportController.ts"],"names":[],"mappings":"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"}

package/dist/render/geometry.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Hosts the quadratic bezier geometry helpers shared by the renderer and the
+ * picking code so curved edges look and hit test exactly the same way.
+ */
+export interface Point2D {
+    x: number;
+    y: number;
+}
+/** Computes the quadratic bezier control point for an edge with curvature. */
+export declare function controlPoint(ax: number, ay: number, bx: number, by: number, curvature: number, out: Point2D): Point2D;
+/** Evaluates a point on the quadratic bezier defined by an edge. */
+export declare function bezierPoint(ax: number, ay: number, cx: number, cy: number, bx: number, by: number, t: number, out: Point2D): Point2D;
+/** Estimates the arc length of a curved edge using fixed sampling. */
+export declare function bezierLength(ax: number, ay: number, cx: number, cy: number, bx: number, by: number, samples?: number): number;
+/** Computes the shortest distance from a point to a quadratic bezier edge. */
+export declare function distanceToEdge(px: number, py: number, ax: number, ay: number, bx: number, by: number, curvature: number): number;
+/** Computes the shortest distance from a point to a straight segment. */
+export declare function distanceToSegment(px: number, py: number, ax: number, ay: number, bx: number, by: number): number;
+//# sourceMappingURL=geometry.d.ts.map

package/dist/render/geometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.d.ts","sourceRoot":"","sources":["../../src/render/geometry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,OAAO;IACtB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,8EAA8E;AAC9E,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAarH;AAED,oEAAoE;AACpE,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,GAAG,OAAO,CAKpI;AAED,sEAAsE;AACtE,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,SAAK,GAAG,MAAM,CAYzH;AAED,8EAA8E;AAC9E,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAkBhI;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAQhH"}

package/dist/render/geometry.js

@@ -0,0 +1,71 @@
+/**
+ * Hosts the quadratic bezier geometry helpers shared by the renderer and the
+ * picking code so curved edges look and hit test exactly the same way.
+ */
+/** Computes the quadratic bezier control point for an edge with curvature. */
+export function controlPoint(ax, ay, bx, by, curvature, out) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const length = Math.hypot(dx, dy);
+    if (curvature === 0 || length < 0.0001) {
+        out.x = (ax + bx) * 0.5;
+        out.y = (ay + by) * 0.5;
+        return out;
+    }
+    const offset = curvature * length * 0.35;
+    out.x = (ax + bx) * 0.5 - (dy / length) * offset;
+    out.y = (ay + by) * 0.5 + (dx / length) * offset;
+    return out;
+}
+/** Evaluates a point on the quadratic bezier defined by an edge. */
+export function bezierPoint(ax, ay, cx, cy, bx, by, t, out) {
+    const u = 1 - t;
+    out.x = u * u * ax + 2 * u * t * cx + t * t * bx;
+    out.y = u * u * ay + 2 * u * t * cy + t * t * by;
+    return out;
+}
+/** Estimates the arc length of a curved edge using fixed sampling. */
+export function bezierLength(ax, ay, cx, cy, bx, by, samples = 10) {
+    let length = 0;
+    let prevX = ax;
+    let prevY = ay;
+    const point = { x: 0, y: 0 };
+    for (let index = 1; index <= samples; index++) {
+        bezierPoint(ax, ay, cx, cy, bx, by, index / samples, point);
+        length += Math.hypot(point.x - prevX, point.y - prevY);
+        prevX = point.x;
+        prevY = point.y;
+    }
+    return length;
+}
+/** Computes the shortest distance from a point to a quadratic bezier edge. */
+export function distanceToEdge(px, py, ax, ay, bx, by, curvature) {
+    const control = { x: 0, y: 0 };
+    controlPoint(ax, ay, bx, by, curvature, control);
+    if (curvature === 0) {
+        return distanceToSegment(px, py, ax, ay, bx, by);
+    }
+    const point = { x: 0, y: 0 };
+    let best = Infinity;
+    const steps = 12;
+    let prevX = ax;
+    let prevY = ay;
+    for (let index = 1; index <= steps; index++) {
+        bezierPoint(ax, ay, control.x, control.y, bx, by, index / steps, point);
+        best = Math.min(best, distanceToSegment(px, py, prevX, prevY, point.x, point.y));
+        prevX = point.x;
+        prevY = point.y;
+    }
+    return best;
+}
+/** Computes the shortest distance from a point to a straight segment. */
+export function distanceToSegment(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const lengthSq = dx * dx + dy * dy;
+    const t = lengthSq > 0 ? Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lengthSq)) : 0;
+    const cx = ax + dx * t;
+    const cy = ay + dy * t;
+    return Math.hypot(px - cx, py - cy);
+}
+//# sourceMappingURL=geometry.js.map

package/dist/render/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../../src/render/geometry.ts"],"names":[],"mappings":"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"}

package/dist/render/shaders.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Stores the GLSL program sources. Nodes render as instanced quads with
+ * signed distance circles, atlas images and state rings. Edges render as
+ * instanced quads bent along a quadratic bezier defined by per link
+ * curvature, with dashes measured along the true curve arc length.
+ */
+export declare const NODE_VERTEX = "#version 300 es\nprecision highp float;\nlayout(location=0) in vec2 aCorner;\nlayout(location=1) in vec4 aNode;\nlayout(location=2) in vec4 aFill;\nlayout(location=3) in vec4 aBorder;\nlayout(location=4) in vec4 aStyle;\nlayout(location=5) in vec4 aImage;\nuniform mat3 uCamera;\nout vec2 vLocal;\nout vec2 vAtlasUv;\nout vec4 vFill;\nout vec4 vBorder;\nout vec4 vStyle;\nflat out float vImageActive;\nvoid main() {\n  vec2 world = aNode.xy + aCorner * aNode.w;\n  gl_Position = vec4((uCamera * vec3(world, 1.0)).xy, 0.0, 1.0);\n  vLocal = aCorner;\n  vAtlasUv = (aCorner * 0.5 + 0.5 + vec2(mod(aImage.x, 8.0), floor(aImage.x / 8.0))) / 8.0;\n  vFill = aFill;\n  vBorder = aBorder;\n  vStyle = aStyle;\n  vImageActive = aImage.y;\n}";
+export declare const NODE_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vLocal;\nin vec2 vAtlasUv;\nin vec4 vFill;\nin vec4 vBorder;\nin vec4 vStyle;\nflat in float vImageActive;\nuniform sampler2D uAtlas;\nuniform float uZoom;\nuniform vec4 uHoverRing;\nuniform vec4 uSelectedRing;\nuniform vec4 uFixedRing;\nuniform float uHoverRingWidth;\nuniform float uSelectedRingWidth;\nuniform float uFixedRingWidth;\nuniform float uDisabledOpacity;\nout vec4 outColor;\nfloat band(float d, float inner, float outer, float aa) {\n  return smoothstep(inner - aa, inner + aa, d) * (1.0 - smoothstep(outer - aa, outer + aa, d));\n}\nvoid main() {\n  float d = length(vLocal);\n  float aa = max(fwidth(d), 0.0008);\n  float discRadius = vStyle.x / max(vStyle.w, 0.0001);\n  float discAlpha = 1.0 - smoothstep(discRadius - aa, discRadius + aa, d);\n  int state = int(vStyle.z + 0.5);\n  vec4 ringColor = vec4(0.0);\n  float ringWidth = 0.0;\n  if (state == 1) { ringColor = uHoverRing; ringWidth = uHoverRingWidth; }\n  else if (state == 2 || state == 3) { ringColor = uSelectedRing; ringWidth = uSelectedRingWidth; }\n  else if (state == 4) { ringColor = uFixedRing; ringWidth = uFixedRingWidth; }\n  float ringOuter = discRadius + ringWidth / max(uZoom * vStyle.w, 0.0001);\n  float ring = ringWidth > 0.0 ? band(d, discRadius, ringOuter, aa) : 0.0;\n  if (discAlpha <= 0.0 && ring <= 0.0) discard;\n  vec4 fill = vFill;\n  if (vImageActive > 0.5) {\n    vec4 image = texture(uAtlas, vAtlasUv);\n    fill.rgb = mix(fill.rgb, image.rgb, image.a);\n  }\n  float borderSize = vStyle.y / max(uZoom * vStyle.w, 0.0001);\n  float border = vStyle.y > 0.0 ? band(d, max(0.0, discRadius - borderSize), discRadius, aa) : 0.0;\n  vec4 core = mix(fill, vec4(vBorder.rgb, vBorder.a * vStyle.y), border);\n  core.a *= discAlpha * (state == 5 ? uDisabledOpacity : 1.0);\n  vec4 halo = vec4(ringColor.rgb, ringColor.a * ring);\n  outColor = vec4(mix(halo.rgb, core.rgb, core.a), core.a + halo.a * (1.0 - core.a));\n}";
+export declare const EDGE_VERTEX = "#version 300 es\nprecision highp float;\nlayout(location=0) in vec2 aCorner;\nlayout(location=1) in vec4 aSegment;\nlayout(location=2) in vec4 aColor;\nlayout(location=3) in vec4 aStyle;\nlayout(location=4) in vec4 aMeta;\nuniform mat3 uCamera;\nuniform float uZoom;\nout float vSide;\nout float vDashPosition;\nout vec4 vColor;\nout vec2 vDashPattern;\nflat out float vDashed;\nvoid main() {\n  vec2 p0 = aSegment.xy;\n  vec2 p1 = aSegment.zw;\n  vec2 chord = p1 - p0;\n  float chordLength = max(length(chord), 0.00001);\n  float curvature = aMeta.x;\n  vec2 mid = (p0 + p1) * 0.5;\n  vec2 control = mid + vec2(-chord.y, chord.x) / chordLength * (curvature * chordLength * 0.35);\n  float t = (aCorner.x + 1.0) * 0.5;\n  float u = 1.0 - t;\n  vec2 point = u * u * p0 + 2.0 * u * t * control + t * t * p1;\n  vec2 tangent = 2.0 * u * (control - p0) + 2.0 * t * (p1 - control);\n  float tangentLength = max(length(tangent), 0.00001);\n  vec2 normal = vec2(-tangent.y, tangent.x) / tangentLength;\n  float widthWorld = aStyle.x / max(uZoom, 0.0001);\n  vec2 world = point + normal * aCorner.y * widthWorld * 0.5;\n  gl_Position = vec4((uCamera * vec3(world, 1.0)).xy, 0.0, 1.0);\n  vSide = aCorner.y;\n  float dashScale = aMeta.z > 0.5 ? 1.0 : uZoom;\n  vDashPosition = (t * aMeta.w) * dashScale + aStyle.w;\n  vColor = aColor;\n  vDashPattern = aStyle.yz;\n  vDashed = aMeta.y;\n}";
+export declare const EDGE_FRAGMENT = "#version 300 es\nprecision highp float;\nin float vSide;\nin float vDashPosition;\nin vec4 vColor;\nin vec2 vDashPattern;\nflat in float vDashed;\nout vec4 outColor;\nvoid main() {\n  float edgeAA = max(fwidth(vSide), 0.002);\n  float alpha = 1.0 - smoothstep(1.0 - edgeAA, 1.0 + edgeAA, abs(vSide));\n  if (vDashed > 0.5) {\n    float cycle = max(0.5, vDashPattern.x + vDashPattern.y);\n    float phase = mod(vDashPosition, cycle);\n    float dashAA = max(fwidth(vDashPosition), 0.3);\n    alpha *= 1.0 - smoothstep(vDashPattern.x - dashAA, vDashPattern.x + dashAA, phase);\n  }\n  if (alpha <= 0.0) discard;\n  outColor = vec4(vColor.rgb, vColor.a * alpha);\n}";
+export declare const ARROW_VERTEX = "#version 300 es\nprecision highp float;\nlayout(location=0) in vec2 aCorner;\nlayout(location=1) in vec4 aArrow;\nlayout(location=2) in vec4 aColor;\nlayout(location=3) in float aHalfWidth;\nuniform mat3 uCamera;\nout vec2 vLocal;\nflat out float vLength;\nflat out float vHalfWidth;\nout vec4 vColor;\nvoid main() {\n  vec2 base = aArrow.xy;\n  vec2 tip = aArrow.zw;\n  vec2 direction = tip - base;\n  float worldLength = max(length(direction), 0.00001);\n  vec2 dirNorm = direction / worldLength;\n  vec2 normal = vec2(-dirNorm.y, dirNorm.x);\n  float t = (aCorner.x + 1.0) * 0.5;\n  vec2 world = base + dirNorm * (t * worldLength) + normal * aCorner.y * aHalfWidth * (1.0 - t);\n  gl_Position = vec4((uCamera * vec3(world, 1.0)).xy, 0.0, 1.0);\n  vLocal = vec2(t * worldLength, aCorner.y * aHalfWidth * (1.0 - t));\n  vLength = worldLength;\n  vHalfWidth = aHalfWidth;\n  vColor = aColor;\n}";
+export declare const ARROW_FRAGMENT = "#version 300 es\nprecision highp float;\nin vec2 vLocal;\nflat in float vLength;\nflat in float vHalfWidth;\nin vec4 vColor;\nout vec4 outColor;\nvoid main() {\n  float u = vLocal.x;\n  float v = vLocal.y;\n  float L = vLength;\n  float W = vHalfWidth;\n  if (L <= 0.00001) discard;\n  float dEdges = (W * L - W * u - abs(v) * L) / length(vec2(L, W));\n  float d = min(u, dEdges);\n  float aa = max(fwidth(d), 0.002);\n  float alpha = smoothstep(-aa, aa, d);\n  if (alpha <= 0.0) discard;\n  outColor = vec4(vColor.rgb, vColor.a * alpha);\n}";
+//# sourceMappingURL=shaders.d.ts.map

package/dist/render/shaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shaders.d.ts","sourceRoot":"","sources":["../../src/render/shaders.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,WAAW,iuBAwBtB,CAAC;AAEH,eAAO,MAAM,aAAa,k7DA8CxB,CAAC;AAEH,eAAO,MAAM,WAAW,w2CAqCtB,CAAC;AAEH,eAAO,MAAM,aAAa,2pBAmBxB,CAAC;AAEH,eAAO,MAAM,YAAY,m4BAyBvB,CAAC;AAEH,eAAO,MAAM,cAAc,kiBAmBzB,CAAC"}

package/dist/render/shaders.js

@@ -0,0 +1,183 @@
+/**
+ * Stores the GLSL program sources. Nodes render as instanced quads with
+ * signed distance circles, atlas images and state rings. Edges render as
+ * instanced quads bent along a quadratic bezier defined by per link
+ * curvature, with dashes measured along the true curve arc length.
+ */
+export const NODE_VERTEX = `#version 300 es
+precision highp float;
+layout(location=0) in vec2 aCorner;
+layout(location=1) in vec4 aNode;
+layout(location=2) in vec4 aFill;
+layout(location=3) in vec4 aBorder;
+layout(location=4) in vec4 aStyle;
+layout(location=5) in vec4 aImage;
+uniform mat3 uCamera;
+out vec2 vLocal;
+out vec2 vAtlasUv;
+out vec4 vFill;
+out vec4 vBorder;
+out vec4 vStyle;
+flat out float vImageActive;
+void main() {
+  vec2 world = aNode.xy + aCorner * aNode.w;
+  gl_Position = vec4((uCamera * vec3(world, 1.0)).xy, 0.0, 1.0);
+  vLocal = aCorner;
+  vAtlasUv = (aCorner * 0.5 + 0.5 + vec2(mod(aImage.x, 8.0), floor(aImage.x / 8.0))) / 8.0;
+  vFill = aFill;
+  vBorder = aBorder;
+  vStyle = aStyle;
+  vImageActive = aImage.y;
+}`;
+export const NODE_FRAGMENT = `#version 300 es
+precision highp float;
+in vec2 vLocal;
+in vec2 vAtlasUv;
+in vec4 vFill;
+in vec4 vBorder;
+in vec4 vStyle;
+flat in float vImageActive;
+uniform sampler2D uAtlas;
+uniform float uZoom;
+uniform vec4 uHoverRing;
+uniform vec4 uSelectedRing;
+uniform vec4 uFixedRing;
+uniform float uHoverRingWidth;
+uniform float uSelectedRingWidth;
+uniform float uFixedRingWidth;
+uniform float uDisabledOpacity;
+out vec4 outColor;
+float band(float d, float inner, float outer, float aa) {
+  return smoothstep(inner - aa, inner + aa, d) * (1.0 - smoothstep(outer - aa, outer + aa, d));
+}
+void main() {
+  float d = length(vLocal);
+  float aa = max(fwidth(d), 0.0008);
+  float discRadius = vStyle.x / max(vStyle.w, 0.0001);
+  float discAlpha = 1.0 - smoothstep(discRadius - aa, discRadius + aa, d);
+  int state = int(vStyle.z + 0.5);
+  vec4 ringColor = vec4(0.0);
+  float ringWidth = 0.0;
+  if (state == 1) { ringColor = uHoverRing; ringWidth = uHoverRingWidth; }
+  else if (state == 2 || state == 3) { ringColor = uSelectedRing; ringWidth = uSelectedRingWidth; }
+  else if (state == 4) { ringColor = uFixedRing; ringWidth = uFixedRingWidth; }
+  float ringOuter = discRadius + ringWidth / max(uZoom * vStyle.w, 0.0001);
+  float ring = ringWidth > 0.0 ? band(d, discRadius, ringOuter, aa) : 0.0;
+  if (discAlpha <= 0.0 && ring <= 0.0) discard;
+  vec4 fill = vFill;
+  if (vImageActive > 0.5) {
+    vec4 image = texture(uAtlas, vAtlasUv);
+    fill.rgb = mix(fill.rgb, image.rgb, image.a);
+  }
+  float borderSize = vStyle.y / max(uZoom * vStyle.w, 0.0001);
+  float border = vStyle.y > 0.0 ? band(d, max(0.0, discRadius - borderSize), discRadius, aa) : 0.0;
+  vec4 core = mix(fill, vec4(vBorder.rgb, vBorder.a * vStyle.y), border);
+  core.a *= discAlpha * (state == 5 ? uDisabledOpacity : 1.0);
+  vec4 halo = vec4(ringColor.rgb, ringColor.a * ring);
+  outColor = vec4(mix(halo.rgb, core.rgb, core.a), core.a + halo.a * (1.0 - core.a));
+}`;
+export const EDGE_VERTEX = `#version 300 es
+precision highp float;
+layout(location=0) in vec2 aCorner;
+layout(location=1) in vec4 aSegment;
+layout(location=2) in vec4 aColor;
+layout(location=3) in vec4 aStyle;
+layout(location=4) in vec4 aMeta;
+uniform mat3 uCamera;
+uniform float uZoom;
+out float vSide;
+out float vDashPosition;
+out vec4 vColor;
+out vec2 vDashPattern;
+flat out float vDashed;
+void main() {
+  vec2 p0 = aSegment.xy;
+  vec2 p1 = aSegment.zw;
+  vec2 chord = p1 - p0;
+  float chordLength = max(length(chord), 0.00001);
+  float curvature = aMeta.x;
+  vec2 mid = (p0 + p1) * 0.5;
+  vec2 control = mid + vec2(-chord.y, chord.x) / chordLength * (curvature * chordLength * 0.35);
+  float t = (aCorner.x + 1.0) * 0.5;
+  float u = 1.0 - t;
+  vec2 point = u * u * p0 + 2.0 * u * t * control + t * t * p1;
+  vec2 tangent = 2.0 * u * (control - p0) + 2.0 * t * (p1 - control);
+  float tangentLength = max(length(tangent), 0.00001);
+  vec2 normal = vec2(-tangent.y, tangent.x) / tangentLength;
+  float widthWorld = aStyle.x / max(uZoom, 0.0001);
+  vec2 world = point + normal * aCorner.y * widthWorld * 0.5;
+  gl_Position = vec4((uCamera * vec3(world, 1.0)).xy, 0.0, 1.0);
+  vSide = aCorner.y;
+  float dashScale = aMeta.z > 0.5 ? 1.0 : uZoom;
+  vDashPosition = (t * aMeta.w) * dashScale + aStyle.w;
+  vColor = aColor;
+  vDashPattern = aStyle.yz;
+  vDashed = aMeta.y;
+}`;
+export const EDGE_FRAGMENT = `#version 300 es
+precision highp float;
+in float vSide;
+in float vDashPosition;
+in vec4 vColor;
+in vec2 vDashPattern;
+flat in float vDashed;
+out vec4 outColor;
+void main() {
+  float edgeAA = max(fwidth(vSide), 0.002);
+  float alpha = 1.0 - smoothstep(1.0 - edgeAA, 1.0 + edgeAA, abs(vSide));
+  if (vDashed > 0.5) {
+    float cycle = max(0.5, vDashPattern.x + vDashPattern.y);
+    float phase = mod(vDashPosition, cycle);
+    float dashAA = max(fwidth(vDashPosition), 0.3);
+    alpha *= 1.0 - smoothstep(vDashPattern.x - dashAA, vDashPattern.x + dashAA, phase);
+  }
+  if (alpha <= 0.0) discard;
+  outColor = vec4(vColor.rgb, vColor.a * alpha);
+}`;
+export const ARROW_VERTEX = `#version 300 es
+precision highp float;
+layout(location=0) in vec2 aCorner;
+layout(location=1) in vec4 aArrow;
+layout(location=2) in vec4 aColor;
+layout(location=3) in float aHalfWidth;
+uniform mat3 uCamera;
+out vec2 vLocal;
+flat out float vLength;
+flat out float vHalfWidth;
+out vec4 vColor;
+void main() {
+  vec2 base = aArrow.xy;
+  vec2 tip = aArrow.zw;
+  vec2 direction = tip - base;
+  float worldLength = max(length(direction), 0.00001);
+  vec2 dirNorm = direction / worldLength;
+  vec2 normal = vec2(-dirNorm.y, dirNorm.x);
+  float t = (aCorner.x + 1.0) * 0.5;
+  vec2 world = base + dirNorm * (t * worldLength) + normal * aCorner.y * aHalfWidth * (1.0 - t);
+  gl_Position = vec4((uCamera * vec3(world, 1.0)).xy, 0.0, 1.0);
+  vLocal = vec2(t * worldLength, aCorner.y * aHalfWidth * (1.0 - t));
+  vLength = worldLength;
+  vHalfWidth = aHalfWidth;
+  vColor = aColor;
+}`;
+export const ARROW_FRAGMENT = `#version 300 es
+precision highp float;
+in vec2 vLocal;
+flat in float vLength;
+flat in float vHalfWidth;
+in vec4 vColor;
+out vec4 outColor;
+void main() {
+  float u = vLocal.x;
+  float v = vLocal.y;
+  float L = vLength;
+  float W = vHalfWidth;
+  if (L <= 0.00001) discard;
+  float dEdges = (W * L - W * u - abs(v) * L) / length(vec2(L, W));
+  float d = min(u, dEdges);
+  float aa = max(fwidth(d), 0.002);
+  float alpha = smoothstep(-aa, aa, d);
+  if (alpha <= 0.0) discard;
+  outColor = vec4(vColor.rgb, vColor.a * alpha);
+}`;
+//# sourceMappingURL=shaders.js.map

package/dist/render/shaders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shaders.js","sourceRoot":"","sources":["../../src/render/shaders.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EAwBzB,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8C3B,CAAC;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCzB,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;EAmB3B,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;EAyB1B,CAAC;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;EAmB5B,CAAC"}