@cnvx/nodal 0.0.5 → 0.1.0

package/dist/Diagram.svelte

@@ -1,29 +1,19 @@
 <script lang="ts" module>
-    const browser = !!globalThis?.window;
-    const dev =
-        (globalThis as any)?.process?.env?.NODE_ENV &&
-        !(globalThis as any)?.process.env.NODE_ENV.toLowerCase().startsWith(
-            "prod",
-        );
-
-    console.debug({ browser, dev });
-
     import { onMount, setContext, type Snippet } from "svelte";
     import { SvelteMap } from "svelte/reactivity";
     import {
-        debugSide,
         eq,
         getBezierPath,
         getSmoothStepPath,
         normaliseAngle,
         Side,
         sideForAngle,
-        unitVectorFromAngle,
         vector2,
         type Vector2,
         Anchor,
+        browser,
+        dev,
     } from "./diagram-lib.js";
-    import { draw } from "svelte/transition";
 
     export interface DiagramNodeDef {
         id: string;
@@ -160,7 +150,7 @@
     }
 
     function calculateDimensions(_nodes: typeof nodes) {
-        console.time("dim");
+        // console.time("dim");
         let newMin = vector2(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER);
         let newMax = vector2(Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER);
 
@@ -183,7 +173,7 @@
             );
         }
 
-        console.timeEnd("dim");
+        // console.timeEnd("dim");
         return { min: newMin, max: newMax };
     }
 

package/dist/DiagramController.svelte

@@ -13,42 +13,93 @@
     } from "svelte";
     import type { HTMLAttributes } from "svelte/elements";
     import PrerenderDiagram from "./PrerenderDiagram.svelte";
+    import { browser } from "./diagram-lib.js";
 
     let {
         children,
+        eagerLoad = false,
+        rootMargin = "100px", // start a bit before it enters the viewport
         ...rest
     }: {
         children: Snippet;
+        eagerLoad: boolean;
+        rootMargin?: string;
     } & HTMLAttributes<HTMLDivElement> = $props();
 
     const nodes = new SvelteMap<string, DiagramNodeDef>();
-
     const layers = new SvelteMap<number, Record<string, DiagramNodeDef>>();
     setContext("layerNodeMap", () => layers);
-
     const edges = new SvelteMap<string, DiagramEdgeDef>();
 
-    // let initialDiagramContainer: HTMLElement;
+    let containerEl: HTMLDivElement | undefined;
 
-    // onMount(() => {
-    // 	initialDiagramContainer.remove();
-    // });
+    // If we're SSR (not browser), or eagerLoad is false, render immediately.
+    // Otherwise wait until after load + idle + intersection.
+    let shouldRender = $derived(!eagerLoad);
 
     const initialTime = performance.now();
+
+    onMount(() => {
+        if (!eagerLoad || !containerEl) return;
+
+        let io: IntersectionObserver | null = null;
+
+        const idle = (fn: () => void) => {
+            const ric = (window as any).requestIdleCallback as
+                | ((cb: () => void) => number)
+                | undefined;
+            if (ric) ric(fn);
+            else setTimeout(fn, 0);
+        };
+
+        const startObserving = () => {
+            // In case the element is already visible at this moment
+            io = new IntersectionObserver(
+                (entries) => {
+                    if (entries.some((e) => e.isIntersecting)) {
+                        shouldRender = true;
+                        io?.disconnect();
+                        io = null;
+                    }
+                },
+                { root: null, rootMargin, threshold: 0 },
+            );
+            io.observe(containerEl!);
+        };
+
+        if (document.readyState === "complete") {
+            idle(startObserving);
+        } else {
+            // Wait until the whole document (including images) has loaded
+            window.addEventListener("load", () => idle(startObserving), {
+                once: true,
+            });
+        }
+
+        return () => {
+            io?.disconnect();
+            io = null;
+        };
+    });
 </script>
 
-<!-- first time to register all the nodes and edges -->
-<PrerenderDiagram {nodes} {edges} {children} />
-
-<!-- second time to actually render it after we calculate all the relative positions and total widths and heights -->
-<!-- this is necessary because we need to calculate the relative positions of the nodes and edges -->
-<!-- TODO: Investigate how to do this properly with hydrate and mount and render https://svelte.dev/docs/svelte/imperative-component-api#hydrate -->
-<div {...rest}>
-    <Diagram {nodes} {edges}>
-        {@render children()}
-    </Diagram>
-</div>
+{#if shouldRender}
+    <!-- first pass: register all the nodes and edges -->
+    <PrerenderDiagram {nodes} {edges} {children} />
+
+    <!-- second pass: render with computed positions -->
+    <div {...rest}>
+        <Diagram {nodes} {edges}>
+            {@render children()}
+        </Diagram>
+    </div>
+{:else}
+    <!-- Lightweight placeholder / container used for intersection observation. -->
+    <div bind:this={containerEl} {...rest}></div>
+{/if}
+
 <!--
 <svelte:boundary>
 	{@const _ = console.log('Finished rendering diagram in', performance.now() - initialTime, 'ms')}
-</svelte:boundary> -->
+</svelte:boundary>
+-->

package/dist/DiagramController.svelte.d.ts

@@ -2,6 +2,8 @@ import { type Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = {
     children: Snippet;
+    eagerLoad: boolean;
+    rootMargin?: string;
 } & HTMLAttributes<HTMLDivElement>;
 declare const DiagramController: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiagramController = ReturnType<typeof DiagramController>;

package/dist/DiagramNode.svelte

@@ -187,6 +187,5 @@ top:${top}px;left:${left}px;${nodeDef.clientOnly && !mounted ? "opacity:0" : ""}
             bind:clientHeight
         ></div>
     {/if}
-    <!-- <div class="absolute top-0 left-0 w-full h-full bg-red-500"> {nodeDef.clientOnly} {mounted}</div> -->
     {@render children?.()}
 </div>

package/dist/diagram-lib.d.ts

@@ -1,3 +1,5 @@
+export declare const browser = true;
+export declare const dev: any;
 export interface Vector2 {
     x: number;
     y: number;

package/dist/diagram-lib.js

@@ -1,3 +1,6 @@
+export const browser = !!globalThis?.window;
+export const dev = globalThis?.process?.env?.NODE_ENV &&
+    !globalThis?.process.env.NODE_ENV.toLowerCase().startsWith("prod");
 export const vector2 = (x, y) => ({ x, y });
 export const eq = (a, b) => a.x === b.x && a.y === b.y;
 export const Anchor = {

package/package.json

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