@cnvx/nodal 0.3.3 → 0.5.0

package/dist/BaseEdge.svelte

@@ -3,16 +3,16 @@
 
     export interface NodalEdgeProps {
         edge: SurfaceEdge;
-        path: string;
+        d: string;
     }
 </script>
 
 <script lang="ts">
-    const { edge, path }: NodalEdgeProps = $props();
+    const { edge, d }: NodalEdgeProps = $props();
 </script>
 
 <path
-    d={path}
+    {d}
     fill="none"
     stroke-width="2"
     stroke="currentColor"

package/dist/BaseEdge.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { SurfaceEdge } from "./Surface.svelte";
 export interface NodalEdgeProps {
     edge: SurfaceEdge;
-    path: string;
+    d: string;
 }
 declare const BaseEdge: import("svelte").Component<NodalEdgeProps, {}, "">;
 type BaseEdge = ReturnType<typeof BaseEdge>;

package/dist/Surface.svelte

@@ -12,6 +12,12 @@
     } from "./diagram-lib.js";
     import type { HTMLAttributes } from "svelte/elements";
     import type { Writable } from "svelte/store";
+    import {
+        getNodeAnchorFast,
+        getNodeAnchorWithBoundingClientRect,
+    } from "./layout-utils.js";
+    import { fade } from "svelte/transition";
+    import type { ComponentProps } from "svelte";
 
     type PathGenParams =
         | {
@@ -25,32 +31,52 @@
               center?: Vector2;
           };
 
-    export type SurfaceEdgeParams = {
-        component?: typeof BaseEdge;
-        sourceAnchor?: Vector2;
-        targetAnchor?: Vector2;
-        svgPathAttributes?: HTMLAttributes<SVGPathElement>;
-    } & PathGenParams;
+    export type SurfaceEdgeParams<C extends typeof BaseEdge = typeof BaseEdge> =
+        {
+            component?: C | [C, Omit<ComponentProps<C>, "d" | "edge">];
+            sourceAnchor?: Vector2;
+            targetAnchor?: Vector2;
+            svgPathAttributes?: HTMLAttributes<SVGPathElement>;
+        } & PathGenParams;
+
+    // export type SurfaceEdge = {
+
+    // } & SurfaceEdgeParams;
+
+    export interface PrecalculatedEdge {
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+    }
 
     export type SurfaceEdge = {
         source: string | HTMLElement | string[] | HTMLElement[];
         target: string | HTMLElement | string[] | HTMLElement[];
+
+        precalculated?: PrecalculatedEdge;
     } & SurfaceEdgeParams;
 </script>
 
 <script lang="ts">
+    let svg: SVGSVGElement | undefined = $state();
+
     const {
         hostElement,
         edges: _edges,
         svgAttributes,
         width: _width,
         height: _height,
+        fadeInDuration = 80,
+        getNodeAnchor = getNodeAnchorWithBoundingClientRect,
     }: {
         hostElement: Element;
         edges: SvelteMap<string, SurfaceEdge>;
         width?: Writable<number>;
         height?: Writable<number>;
         svgAttributes?: HTMLAttributes<SVGElement>;
+        getNodeAnchor?: typeof getNodeAnchorFast;
+        fadeInDuration?: number;
     } = $props();
 
     export const width = _width;
@@ -158,6 +184,18 @@
     }
 
     function generateEdgePath(edge: SurfaceEdge) {
+        if (!svg) return [];
+
+        if (edge.precalculated) {
+            return generateCurvePath(
+                edge.precalculated.x1,
+                edge.precalculated.y1,
+                edge.precalculated.x2,
+                edge.precalculated.y2,
+                edge,
+            );
+        }
+
         const sourceNodes = getNodes(edge.source);
         const targetNodes = getNodes(edge.target);
 
@@ -175,10 +213,12 @@
                 const sourceAnchor = getNodeAnchor(
                     source,
                     edge.sourceAnchor ?? Anchor.CENTER_CENTER,
+                    svg!,
                 );
                 const targetAnchor = getNodeAnchor(
                     target,
                     edge.targetAnchor ?? Anchor.CENTER_CENTER,
+                    svg!,
                 );
                 paths.push(
                     generateCurvePath(
@@ -203,29 +243,28 @@
 
         return paths;
     }
-
-    function getNodeAnchor(node: HTMLElement, anchor: Vector2) {
-        return {
-            left: node.offsetLeft + anchor.x * node.clientWidth,
-            top: node.offsetTop + anchor.y * node.clientHeight,
-        };
-    }
 </script>
 
+<!-- style="position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;overflow:visible;z-index:0;" -->
 <svg
+    bind:this={svg}
     preserveAspectRatio="none"
-    style="position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;overflow:visible;z-index:0;"
+    style="position: absolute; inset: 0px; height: 1px; width: 1px; overflow: visible; z-index: 0;"
     {...svgAttributes}
 >
-    {#each edges.values() as edge}
-        {#each generateEdgePath(edge) as path}
-            {@const EdgeComponent = edge.component ?? BaseEdge}
-            <EdgeComponent {path} {edge} />
-            <!-- {@render (edge.snippet ? edge.snippet : defaultEdge)(
-                edge,
-                path,
-                edge.snippetExtraArg,
-            )} -->
-        {/each}
-    {/each}
+    {#if svg}
+        <g in:fade={{ duration: fadeInDuration }}>
+            {#each edges.values() as edge}
+                {#each generateEdgePath(edge) as d}
+                    {@const EdgeComponent = edge.component ?? BaseEdge}
+                    {#if Array.isArray(EdgeComponent)}
+                        {@const [EdgeComp, edgeProps] = EdgeComponent}
+                        <EdgeComp {d} {edge} {...edgeProps} />
+                    {:else}
+                        <EdgeComponent {d} {edge} />
+                    {/if}
+                {/each}
+            {/each}
+        </g>
+    {/if}
 </svg>

package/dist/Surface.svelte.d.ts

@@ -3,6 +3,8 @@ import { SvelteMap } from "svelte/reactivity";
 import { type Vector2 } from "./diagram-lib.js";
 import type { HTMLAttributes } from "svelte/elements";
 import type { Writable } from "svelte/store";
+import { getNodeAnchorFast } from "./layout-utils.js";
+import type { ComponentProps } from "svelte";
 type PathGenParams = {
     pathGen?: "bezier";
     curvature?: number;
@@ -12,15 +14,22 @@ type PathGenParams = {
     borderRadius?: number;
     center?: Vector2;
 };
-export type SurfaceEdgeParams = {
-    component?: typeof BaseEdge;
+export type SurfaceEdgeParams<C extends typeof BaseEdge = typeof BaseEdge> = {
+    component?: C | [C, Omit<ComponentProps<C>, "d" | "edge">];
     sourceAnchor?: Vector2;
     targetAnchor?: Vector2;
     svgPathAttributes?: HTMLAttributes<SVGPathElement>;
 } & PathGenParams;
+export interface PrecalculatedEdge {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
 export type SurfaceEdge = {
     source: string | HTMLElement | string[] | HTMLElement[];
     target: string | HTMLElement | string[] | HTMLElement[];
+    precalculated?: PrecalculatedEdge;
 } & SurfaceEdgeParams;
 type $$ComponentProps = {
     hostElement: Element;
@@ -28,6 +37,8 @@ type $$ComponentProps = {
     width?: Writable<number>;
     height?: Writable<number>;
     svgAttributes?: HTMLAttributes<SVGElement>;
+    getNodeAnchor?: typeof getNodeAnchorFast;
+    fadeInDuration?: number;
 };
 declare const Surface: import("svelte").Component<$$ComponentProps, {
     width: Writable<number> | undefined;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from './diagram-lib.js';
+export * from "./layout-utils.js";
 export { createNodal, connectTo } from "./svelte-actions.js";
+export type { NodalEdgeProps } from "./BaseEdge.svelte";

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './diagram-lib.js';
+export * from "./layout-utils.js";
 export { createNodal, connectTo } from "./svelte-actions.js";

package/dist/layout-utils.d.ts

@@ -0,0 +1,31 @@
+import type { Vector2 } from "./diagram-lib.js";
+export declare function getElementQuad(el: Element): DOMQuad | {
+    p1: {
+        x: number;
+        y: number;
+    };
+    p2: {
+        x: number;
+        y: number;
+    };
+    p3: {
+        x: number;
+        y: number;
+    };
+    p4: {
+        x: number;
+        y: number;
+    };
+};
+export declare function toSvgPoint(svg: SVGGraphicsElement, x: number, y: number): {
+    left: number;
+    top: number;
+};
+export declare function getNodeAnchorWithBoundingClientRect(el: Element, anchor: Vector2, svg: SVGGraphicsElement): {
+    left: number;
+    top: number;
+};
+export declare function getNodeAnchorFast(node: HTMLElement, anchor: Vector2, svgElement: SVGGraphicsElement): {
+    left: number;
+    top: number;
+};

package/dist/layout-utils.js

@@ -0,0 +1,44 @@
+export function getElementQuad(el) {
+    if (el.getBoxQuads) {
+        const quads = el.getBoxQuads();
+        if (quads && quads.length)
+            return quads[0];
+    }
+    // Fallback to rect -> quad
+    const r = el.getBoundingClientRect();
+    return {
+        p1: { x: r.left, y: r.top },
+        p2: { x: r.right, y: r.top },
+        p3: { x: r.right, y: r.bottom },
+        p4: { x: r.left, y: r.bottom },
+    };
+}
+export function toSvgPoint(svg, x, y) {
+    const ctm = svg.getScreenCTM();
+    if (!ctm)
+        return { left: x, top: y };
+    const inv = ctm.inverse();
+    const p = new DOMPoint(x, y).matrixTransform(inv);
+    return { left: p.x, top: p.y };
+}
+export function getNodeAnchorWithBoundingClientRect(el, anchor, svg) {
+    const q = getElementQuad(el);
+    // Clamp to [0,1] to avoid surprises.
+    const ax = Math.max(0, Math.min(1, anchor.x));
+    const ay = Math.max(0, Math.min(1, anchor.y));
+    // Bilinear interpolation across the quad:
+    // p(ax,ay) = (1-ax)(1-ay) * p1 + ax(1-ay) * p2 + ax*ay * p3 + (1-ax)ay * p4
+    const w1 = (1 - ax) * (1 - ay);
+    const w2 = ax * (1 - ay);
+    const w3 = ax * ay;
+    const w4 = (1 - ax) * ay;
+    const sx = w1 * q.p1.x + w2 * q.p2.x + w3 * q.p3.x + w4 * q.p4.x;
+    const sy = w1 * q.p1.y + w2 * q.p2.y + w3 * q.p3.y + w4 * q.p4.y;
+    return toSvgPoint(svg, sx, sy);
+}
+export function getNodeAnchorFast(node, anchor, svgElement) {
+    return {
+        left: node.offsetLeft + anchor.x * node.clientWidth,
+        top: node.offsetTop + anchor.y * node.clientHeight,
+    };
+}

package/dist/svelte-actions.d.ts

@@ -1,13 +1,32 @@
 import type { Attachment } from "svelte/attachments";
 import type { HTMLAttributes } from "svelte/elements";
-import type { SurfaceEdgeParams } from "./Surface.svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { type Writable } from "svelte/store";
+import type { SurfaceEdge, SurfaceEdgeParams } from "./Surface.svelte";
+import type { Vector2 } from "./diagram-lib.js";
 type IndividualConnectActionParam = string | (SurfaceEdgeParams & {
     target: string | string[];
 }) | (SurfaceEdgeParams & {
     source: string | string[];
 });
-export declare function createNodal({ svgAttributes, }?: Partial<{
+interface NodalSurfaceElement extends HTMLElement {
+    _nodalSurface: {
+        internals: {
+            width: Writable<number> | undefined;
+            height: Writable<number> | undefined;
+            edges: SvelteMap<string, SurfaceEdge>;
+        };
+        schedule: () => void;
+    };
+}
+export declare function createNodal({ svgAttributes, getNodeAnchor, fadeInDuration, onMount, }?: Partial<{
     svgAttributes: HTMLAttributes<SVGElement>;
+    onMount: (engine: NodalSurfaceElement["_nodalSurface"]) => void;
+    getNodeAnchor: (node: HTMLElement, anchor: Vector2, svgElement: SVGElement) => {
+        top: number;
+        left: number;
+    };
+    fadeInDuration: number;
 }>): Attachment;
 export declare function connectTo(...edges: IndividualConnectActionParam[]): Attachment;
 export {};

package/dist/svelte-actions.js

@@ -3,38 +3,36 @@ import { SvelteMap } from "svelte/reactivity";
 import { writable } from "svelte/store";
 import Surface from "./Surface.svelte";
 function drawCall(surface) {
-    requestAnimationFrame(() => {
-        console.debug("Drawing nodal surface edges...");
-        const connections = surface.querySelectorAll("[data-nodal-connected='true']");
-        connections.forEach((conn) => {
-            console.debug("Processing connection for:", conn);
-            const host = conn;
-            if (!conn._nodalEdgeConnections ||
-                conn._nodalEdgeConnections.length === 0) {
-                console.debug("No edges found for host:", host);
-                return;
+    // console.debug("Drawing nodal surface edges...");
+    const connections = surface.querySelectorAll("[data-nodal-connected='true']");
+    connections.forEach((conn) => {
+        // console.debug("Processing connection for:", conn);
+        const host = conn;
+        if (!conn._nodalEdgeConnections ||
+            conn._nodalEdgeConnections.length === 0) {
+            // console.debug("No edges found for host:", host);
+            return;
+        }
+        conn._nodalEdgeConnections.forEach((edge) => {
+            let edgeDef;
+            if (typeof edge == "string") {
+                edgeDef = {
+                    source: host,
+                    target: edge,
+                };
             }
-            conn._nodalEdgeConnections.forEach((edge) => {
-                let edgeDef;
-                if (typeof edge == "string") {
-                    edgeDef = {
-                        source: host,
-                        target: edge,
-                    };
-                }
-                else {
-                    edgeDef = {
-                        source: "source" in edge ? edge.source : host,
-                        target: "target" in edge ? edge.target : host,
-                        ...edge,
-                    };
-                }
-                surface._nodalSurface.edges.set(`${edgeDef.source}->${edgeDef.target}`, edgeDef);
-            });
+            else {
+                edgeDef = {
+                    source: "source" in edge ? edge.source : host,
+                    target: "target" in edge ? edge.target : host,
+                    ...edge,
+                };
+            }
+            surface._nodalSurface.internals.edges.set(`${edgeDef.source}->${edgeDef.target}`, edgeDef);
         });
     });
 }
-export function createNodal({ svgAttributes = {}, } = {}) {
+export function createNodal({ svgAttributes = {}, getNodeAnchor, fadeInDuration, onMount, } = {}) {
     return (element) => {
         console.debug("Creating nodal sruface..");
         if (!Object.hasOwn(element, "_nodalSurface")) {
@@ -47,23 +45,53 @@ export function createNodal({ svgAttributes = {}, } = {}) {
                     width: writable(element.clientWidth),
                     height: writable(element.clientHeight),
                     svgAttributes,
+                    getNodeAnchor,
+                    fadeInDuration,
                 },
             });
+            const engine = {
+                _isScheduled: false,
+                draw: () => drawCall(element),
+                schedule() {
+                    if (engine._isScheduled)
+                        return;
+                    engine._isScheduled = true;
+                    requestAnimationFrame(() => {
+                        this._isScheduled = false;
+                        drawCall(element);
+                    });
+                },
+                internals: exports
+            };
             Object.defineProperty(element, "_nodalSurface", {
-                value: exports,
+                value: engine,
             });
             const resizeObserver = new ResizeObserver((entries) => {
-                for (let entry of entries) {
-                    const { width, height } = entry.contentRect;
-                    console.debug("Resizing nodal surface to:", width, height);
-                    exports.width?.set(width);
-                    exports.height?.set(height);
-                    // redraw edges
-                    drawCall(element);
-                }
+                requestAnimationFrame(() => {
+                    for (let entry of entries) {
+                        const { width, height } = entry.contentRect;
+                        // console.debug(
+                        //   "Resizing nodal surface to:",
+                        //   width,
+                        //   height,
+                        // );
+                        exports.width?.set(width);
+                        exports.height?.set(height);
+                        // redraw edges
+                        // drawCall(element as NodalSurfaceElement);
+                        engine.schedule();
+                    }
+                });
             });
+            try {
+                onMount?.(engine);
+            }
+            catch (e) {
+                console.error("Error in onMount callback for nodal surface:", e);
+            }
             resizeObserver.observe(element);
-            drawCall(element);
+            engine.schedule();
+            // drawCall(element as NodalSurfaceElement);
         }
     };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@cnvx/nodal",
   "private": false,
   "license": "MIT",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "scripts": {
     "dev": "vite dev",
     "dev-lib": "svelte-package -w",