@cnvx/nodal 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/Diagram.svelte

@@ -0,0 +1,324 @@
+<script lang="ts" module>
+    import { browser, dev } from "$app/environment";
+    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,
+    } from "./diagram-lib";
+    import { draw } from "svelte/transition";
+
+    export interface DiagramNode {
+        id: string;
+        x: number;
+        y: number;
+        width?: number;
+        height?: number;
+
+        // this will make the node and all of its connections only client side
+        clientOnly?: boolean;
+    }
+
+    type PathGenParams =
+        | {
+              pathGen?: "bezier";
+              curvature?: number;
+              offset?: Vector2;
+          }
+        | {
+              pathGen: "smoothstep";
+              borderRadius?: number;
+              center?: Vector2;
+          };
+
+    export type DiagramEdgeParams = {
+        // target: string;
+        snippet?: Snippet<[edge: DiagramEdge, path: string, extra: any]>;
+        snippetExtraArg?: any;
+
+        sourceAnchor?: Vector2;
+        targetAnchor?: Vector2;
+
+        class?: string;
+        style?: string;
+        zIndex?: number;
+    } & PathGenParams;
+
+    export type DiagramEdge = {
+        source: string;
+        target: string;
+    } & DiagramEdgeParams;
+
+    export type DiagramProps = {
+        nodes: SvelteMap<string, DiagramNode>;
+        edges: SvelteMap<string, DiagramEdge>;
+        children: Snippet;
+    };
+
+    // const getNodeOrigin = (node: DiagramNode) => node.origin ?? vector2(0.0, 0.5);
+    // export const getNodeOrigin = (node: DiagramNode) => node.origin ?? vector2(0.5, 0.5);
+    // export const getNodeOrigin = (node: DiagramNode) => vector2(0.0, 0.0);
+
+    const getNodeSize = (node: DiagramNode) => ({
+        x: node.width ?? 0,
+        y: node.height ?? 0,
+    });
+</script>
+
+<script lang="ts">
+    let { nodes, edges, children }: DiagramProps = $props();
+    export function generateCurvePath(
+        x1: number,
+        y1: number,
+        x2: number,
+        y2: number,
+        edge: DiagramEdge,
+    ): string {
+        const {
+            sourceAnchor: source = Anchor.CENTER_CENTER,
+            targetAnchor: dest = Anchor.CENTER_CENTER,
+        } = edge;
+
+        function anchorToRads({ x, y }: Vector2) {
+            // vector from the node’s centre (0.5, 0.5)
+            const dx = x - 0.5; // + right
+            const dy = 0.5 - y; // + up   (flip screen-y for math coords)
+            const raw = Math.atan2(dy, dx); // signed angle
+            return normaliseAngle(raw);
+        }
+
+        // CRUCIAL TO INVEST THE Y DIRECTION SINCE IT GOES FROM
+        // NEGATIVE TO POSITIVE!!!!!!!!!!!!!
+        const leaveAngle = Math.atan2(y1 - y2, x2 - x1);
+        const arriveAngle = leaveAngle + Math.PI;
+
+        const sourcePosition = eq(source, Anchor.CENTER_CENTER)
+            ? sideForAngle(leaveAngle)
+            : sideForAngle(anchorToRads(source));
+
+        const targetPosition = eq(dest, Anchor.CENTER_CENTER)
+            ? sideForAngle(arriveAngle)
+            : sideForAngle(anchorToRads(dest));
+
+        const props = {
+            sourceX: x1,
+            sourceY: y1,
+            sourcePosition: sourcePosition,
+
+            targetX: x2,
+            targetY: y2,
+            targetPosition: targetPosition,
+        };
+
+        edge.pathGen ??= "bezier";
+        if (edge.pathGen == "bezier") {
+            return getBezierPath({
+                ...props,
+                curvature: edge.curvature ?? 0.25,
+            })[0];
+        } else if (edge.pathGen == "smoothstep") {
+            const pathgenParams = {
+                borderRadius: edge?.borderRadius ?? 15,
+                center: edge?.center,
+            };
+
+            // calculate the absolute center from the relative center
+            let centerX = undefined,
+                centerY = undefined;
+
+            if (pathgenParams.center) {
+                centerX = x1 + pathgenParams.center.x * (x2 - x1);
+                centerY = y1 + pathgenParams.center.y * (y2 - y1);
+            }
+
+            return getSmoothStepPath({
+                ...props,
+                borderRadius: pathgenParams.borderRadius,
+                centerX,
+                centerY,
+            })[0];
+        }
+
+        throw new Error("unreachable");
+    }
+
+    function calculateDimensions(_nodes: typeof nodes) {
+        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);
+
+        for (let node of _nodes.values()) {
+            // if (!browser && node.clientOnly) continue;
+
+            const size = getNodeSize(node);
+            // const origin = getNodeOrigin(node);
+
+            const left = node.x;
+            const top = node.y;
+
+            const right = left + size.x;
+            const bottom = top + size.y;
+
+            newMin = vector2(Math.min(newMin.x, left), Math.min(newMin.y, top));
+            newMax = vector2(
+                Math.max(newMax.x, right),
+                Math.max(newMax.y, bottom),
+            );
+        }
+
+        console.timeEnd("dim");
+        return { min: newMin, max: newMax };
+    }
+
+    // const dimensions = $derived(calculateDimensions(nodes));
+    // let dimensions = $derived(calculateDimensions(nodes));
+    let dimensions = $state(calculateDimensions(nodes));
+    $effect(() => {
+        const newDimensions = calculateDimensions(nodes);
+        dimensions.min = newDimensions.min;
+        dimensions.max = newDimensions.max;
+    });
+    // let dimensions = calculateDimensions(nodes);
+    // onMount(() => (dimensions = calculateDimensions(nodes)));
+
+    setContext("nodeMap", () => nodes);
+    setContext("edgeMap", () => edges);
+    setContext("dimensions", () => dimensions);
+
+    let width = $derived(Math.max(dimensions.max.x - dimensions.min.x, 1));
+    let height = $derived(Math.max(dimensions.max.y - dimensions.min.y, 1));
+
+    function generateEdgePath(edge: DiagramEdge) {
+        const sourceNode = nodes.get(edge.source)!;
+        const targetNode = nodes.get(edge.target)!;
+
+        const sourceAnchor = getNodeAnchor(
+            sourceNode,
+            edge.sourceAnchor ?? Anchor.CENTER_CENTER,
+        );
+        const targetAnchor = getNodeAnchor(
+            targetNode,
+            edge.targetAnchor ?? Anchor.CENTER_CENTER,
+        );
+
+        return generateCurvePath(
+            sourceAnchor.left,
+            sourceAnchor.top,
+            targetAnchor.left,
+            targetAnchor.top,
+            edge,
+        );
+    }
+
+    function getNodeAnchor(node: DiagramNode, anchor: Vector2) {
+        const size = getNodeSize(node);
+
+        // if (!browser && !eq(anchor, Anchor.CENTER_CENTER) && eq(size, vector2(0, 0))) {
+        // 	throw new Error(
+        // 		`To use anchor other than CENTER,CENTER please set the width and height of the node explicitly or set autosize to true for the node\n\nNode '${node.id}' does not have explicity width or height and thus cannot be connected with a relative anchor`
+        // 	);
+        // }
+
+        const left = node.x - dimensions.min.x + anchor.x * size.x;
+        const top = node.y - dimensions.min.y + anchor.y * size.y;
+
+        return { left, top };
+    }
+
+    let edgesByZIndexPlane = $derived(
+        edges.values().reduce((acc, edge) => {
+            const zIndex = edge.zIndex ?? 0;
+            if (!acc.has(zIndex)) {
+                acc.set(zIndex, []);
+            }
+            acc.get(zIndex)!.push(edge);
+            return acc;
+        }, new Map<number, DiagramEdge[]>()),
+    );
+
+    // let depthMap = new SvelteMap<number, [DiagramEdge[], DiagramNode[]]>();
+    // $effect(() => {
+    // 	if (nodes || edges) {
+    // 		depthMap.clear();
+    // 		for (const node of nodes.values()) {
+    // 		  // depthMap.has(node.zIndex)
+    // 		}
+    // 	}
+    // });
+
+    onMount(() => {
+        dimensions = calculateDimensions(nodes);
+    });
+</script>
+
+{#snippet defaultEdge(edge: DiagramEdge, edgePath: string)}
+    <path
+        d={edgePath}
+        fill="none"
+        stroke="currentColor"
+        class={edge.class}
+        vector-effect="non-scaling-stroke"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        shape-rendering="smooth"
+        style={edge.style}
+    />
+{/snippet}
+
+<figure
+    aria-label="Diagram"
+    aria-hidden={!dev}
+    inert={!dev}
+    role="img"
+    style="position:relative;width:{width}px;height:{height}px;overflow:show;user-select:none;"
+>
+    <!-- <svg class="absolute top-0 right-0 bottom-0 left-0 z-0 h-full w-full overflow-visible"> -->
+    <!-- {#each edges.values() as edge, i}
+		{@const sourceNode = nodes.get(edge.source)}
+		{@const targetNode = nodes.get(edge.target)}
+
+		{#if sourceNode && targetNode && !(!browser && (sourceNode.clientOnly || targetNode.clientOnly))}
+			<svg
+				class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-visible"
+				style="z-index:{edge.zIndex ?? 0};"
+			>
+				{@render (edge.snippet ? edge.snippet : defaultEdge)(
+					edge,
+					generateEdgePath(edge),
+					edge.snippetExtraArg
+				)}
+			</svg>
+		{/if}
+	{/each} -->
+    <!-- </svg> -->
+
+    {#each edgesByZIndexPlane as [zIndex, edges]}
+        <svg
+            shape-rendering="crispEdges"
+            style="z-index:{zIndex};position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%;overflow:visible;"
+        >
+            {#each edges as edge}
+                {@const sourceNode = nodes.get(edge.source)}
+                {@const targetNode = nodes.get(edge.target)}
+                {#if sourceNode && targetNode && !(!browser && (sourceNode.clientOnly || targetNode.clientOnly))}
+                    {@render (edge.snippet ? edge.snippet : defaultEdge)(
+                        edge,
+                        generateEdgePath(edge),
+                        edge.snippetExtraArg,
+                    )}
+                {/if}
+            {/each}
+        </svg>
+    {/each}
+
+    {@render children()}
+</figure>

package/dist/Diagram.svelte.d.ts

@@ -0,0 +1,43 @@
+import { type Snippet } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
+import { type Vector2 } from "./diagram-lib";
+export interface DiagramNode {
+    id: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    clientOnly?: boolean;
+}
+type PathGenParams = {
+    pathGen?: "bezier";
+    curvature?: number;
+    offset?: Vector2;
+} | {
+    pathGen: "smoothstep";
+    borderRadius?: number;
+    center?: Vector2;
+};
+export type DiagramEdgeParams = {
+    snippet?: Snippet<[edge: DiagramEdge, path: string, extra: any]>;
+    snippetExtraArg?: any;
+    sourceAnchor?: Vector2;
+    targetAnchor?: Vector2;
+    class?: string;
+    style?: string;
+    zIndex?: number;
+} & PathGenParams;
+export type DiagramEdge = {
+    source: string;
+    target: string;
+} & DiagramEdgeParams;
+export type DiagramProps = {
+    nodes: SvelteMap<string, DiagramNode>;
+    edges: SvelteMap<string, DiagramEdge>;
+    children: Snippet;
+};
+declare const Diagram: import("svelte").Component<DiagramProps, {
+    generateCurvePath: (x1: number, y1: number, x2: number, y2: number, edge: DiagramEdge) => string;
+}, "">;
+type Diagram = ReturnType<typeof Diagram>;
+export default Diagram;

package/dist/DiagramController.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { SvelteMap } from 'svelte/reactivity';
+	import Diagram, { type DiagramNode, type DiagramEdge } from './Diagram.svelte';
+	import { createRawSnippet, flushSync, onMount, setContext, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import PrerenderDiagram from './PrerenderDiagram.svelte';
+
+	let {
+		children,
+		...rest
+	}: {
+		children: Snippet;
+	} & HTMLAttributes<HTMLDivElement> = $props();
+
+	const nodes = new SvelteMap<string, DiagramNode>();
+
+	const edges = new SvelteMap<string, DiagramEdge>();
+
+	// let initialDiagramContainer: HTMLElement;
+
+	// onMount(() => {
+	// 	initialDiagramContainer.remove();
+	// });
+
+	const initialTime = performance.now();
+</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>
+<!-- 
+<svelte:boundary>
+	{@const _ = console.log('Finished rendering diagram in', performance.now() - initialTime, 'ms')}
+</svelte:boundary> -->

package/dist/DiagramController.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    children: Snippet;
+} & HTMLAttributes<HTMLDivElement>;
+declare const DiagramController: import("svelte").Component<$$ComponentProps, {}, "">;
+type DiagramController = ReturnType<typeof DiagramController>;
+export default DiagramController;

package/dist/DiagramNode.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+    import {
+        getContext,
+        onMount,
+        tick,
+        type ComponentProps,
+        type Snippet,
+    } from "svelte";
+    import type {
+        DiagramNode,
+        DiagramEdgeParams,
+        DiagramEdge,
+    } from "./Diagram.svelte";
+    import type { SvelteMap } from "svelte/reactivity";
+    import type { HTMLAttributes } from "svelte/elements";
+    import { vector2, type Vector2 } from "./diagram-lib";
+
+    // type IndividualConnectActionParam = string | Omit<DiagramEdge, 'source'>;
+    type IndividualConnectActionParam =
+        | string
+        | (DiagramEdgeParams & { target: string });
+    type IndividualConnectSourceActionParam =
+        | string
+        | (DiagramEdgeParams & { source: string });
+    type DiagramNodeConnectParam =
+        | IndividualConnectActionParam
+        | IndividualConnectActionParam[];
+    type DiagramNodeConnectSourceParam =
+        | IndividualConnectSourceActionParam
+        | IndividualConnectSourceActionParam[];
+
+    export type DiagramNodeProps = {
+        children?: Snippet;
+        connect?: DiagramNodeConnectParam;
+        connectSource?: DiagramNodeConnectSourceParam;
+        autosize?: boolean;
+        origin?: Vector2;
+    } & Omit<DiagramNode, "snippet"> &
+        HTMLAttributes<HTMLDivElement>;
+
+    let {
+        children,
+        connect,
+        connectSource: connectFrom,
+        id,
+        x,
+        y,
+        width,
+        height,
+        autosize,
+        clientOnly,
+        origin,
+        class: className,
+        style: inlineStyles,
+        ...rest
+    }: DiagramNodeProps = $props();
+
+    const nodeMap = (
+        getContext("nodeMap") as () => SvelteMap<string, DiagramNode>
+    )();
+    const edgeMap = (
+        getContext("edgeMap") as () => SvelteMap<string, DiagramEdge>
+    )();
+    let dimensions = (
+        getContext("dimensions") as () =>
+            | { min: Vector2; max: Vector2 }
+            | undefined
+    )();
+
+    if (!origin && (width || height) && !autosize) {
+        origin = vector2(0.5, 0.5);
+    }
+
+    let absolutePosition = $derived({
+        x: x - (origin?.x ?? 0.5) * (width ?? 0),
+        y: y - (origin?.y ?? 0.5) * (height ?? 0),
+    });
+
+    // const nodeDef: DiagramNode = $derived({ id, x, y, width, height, clientOnly, snippet: children });
+    const nodeDef: DiagramNode = $derived({
+        id,
+        x: absolutePosition.x,
+        y: absolutePosition.y,
+        width,
+        height,
+        clientOnly: clientOnly || autosize,
+        snippet: children,
+    });
+    const prerender = $state.snapshot(getContext("prerendering"));
+
+    // console.log('set', nodeDef.id, nodeDef);
+
+    // const source = elementNodeMap.get(element);
+    // if (!source) {
+    // 	return console.warn(`Could not find source element for`, element);
+    // }
+
+    let mounted = $state(false);
+
+    const previousEdgeIds = new Set();
+
+    // TODO: this should be done only if clientWidth is needed
+    let clientWidth: number = $state(0);
+    let clientHeight: number = $state(0);
+
+    // if (origin) {
+    // 	nodeDef.x -= (origin?.x ?? 0) * $state.snapshot(nodeDef.width ?? 0);
+    // 	nodeDef.y -= (origin?.y ?? 0) * $state.snapshot(nodeDef.height ?? 0);
+    // }
+
+    if (autosize) {
+        onMount(() => {
+            width = clientWidth;
+            height = clientHeight;
+        });
+    }
+
+    onMount(async () => {
+        if (nodeDef.clientOnly) {
+            await tick();
+            mounted = true;
+        }
+    });
+
+    function updateEdgeFrom(
+        param: IndividualConnectSourceActionParam,
+        index: number = 0,
+    ) {
+        const getEdgeId = (source: string, i: number) =>
+            `${source}:${nodeDef.id}:(${i})`;
+        // const edgeId = getEdgeId();
+        if (typeof param == "string") {
+            const source = param;
+
+            const edgeId = getEdgeId(source, index);
+            previousEdgeIds.add(edgeId);
+
+            edgeMap.set(edgeId, { target: nodeDef.id, source });
+        } else {
+            const edgeId = getEdgeId(param.source, index);
+            previousEdgeIds.add(edgeId);
+
+            (param as DiagramEdge).target = nodeDef.id;
+            edgeMap.set(edgeId, param as DiagramEdge);
+        }
+    }
+
+    function updateEdge(
+        param: IndividualConnectActionParam,
+        index: number = 0,
+    ) {
+        const getEdgeId = (target: string, i: number) =>
+            `${nodeDef.id}:${target}:(${i})`;
+        // const edgeId = getEdgeId();
+        if (typeof param == "string") {
+            const target = param;
+
+            const edgeId = getEdgeId(target, index);
+            previousEdgeIds.add(edgeId);
+
+            edgeMap.set(edgeId, { source: nodeDef.id, target });
+        } else {
+            const edgeId = getEdgeId(param.target, index);
+            previousEdgeIds.add(edgeId);
+
+            (param as DiagramEdge).source = nodeDef.id;
+            edgeMap.set(edgeId, param as DiagramEdge);
+        }
+    }
+
+    if (connect) {
+        if (!Array.isArray(connect)) {
+            updateEdge(connect);
+        } else {
+            connect.forEach(updateEdge);
+        }
+    }
+
+    if (connectFrom) {
+        if (!Array.isArray(connectFrom)) {
+            updateEdgeFrom(connectFrom);
+        } else {
+            connectFrom.forEach(updateEdgeFrom);
+        }
+    }
+
+    let left = $derived(nodeDef.x - (dimensions?.min.x ?? 0));
+    let top = $derived(nodeDef.y - (dimensions?.min.y ?? 0));
+
+    $effect(() => {
+        nodeMap.set(nodeDef.id, nodeDef);
+    });
+
+    // nodeMap.set(nodeDef.id, nodeDef);
+    $effect(() => {
+        // nodeDef.x -= (origin?.x ?? 0.5) * (nodeDef?.width ?? clientWidth ?? 0);
+        // nodeDef.y -= (origin?.y ?? 0.5) * (nodeDef?.height ?? clientHeight ?? 0);
+        nodeMap.set(nodeDef.id, nodeDef);
+    });
+
+    // $inspect(
+    // 	'mounted render diagramNode',
+    // 	nodeDef.id,
+    // 	left,
+    // 	top,
+    // 	nodeDef.width,
+    // 	nodeDef.height,
+    // 	dimensions
+    // );
+</script>
+
+<div
+    class={className?.toString() || ""}
+    style={`position:absolute;
+${!origin ? "transform:translate(-50%, -50%)" : ""};
+top:${top}px;left:${left}px;${nodeDef.clientOnly && !mounted ? "opacity:0" : ""} ${inlineStyles || ""}`}
+    style:width={nodeDef.width ? nodeDef.width + "px" : "auto"}
+    style:height={nodeDef.height ? nodeDef.height + "px" : "auto"}
+    {...rest}
+>
+    {#if autosize}
+        <div
+            class="nodal-autosize"
+            style="position:absolute;top:0;right:0;left:0;bottom:0;z-index:-50;"
+            bind:clientWidth
+            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>