@cnvx/nodal 0.4.0 → 0.5.1

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

@@ -17,6 +17,7 @@
         getNodeAnchorWithBoundingClientRect,
     } from "./layout-utils.js";
     import { fade } from "svelte/transition";
+    import type { ComponentProps } from "svelte";
 
     type PathGenParams =
         | {
@@ -30,12 +31,13 @@
               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 = {
 
@@ -253,9 +255,14 @@
     {#if svg}
         <g in:fade={{ duration: fadeInDuration }}>
             {#each edges.values() as edge}
-                {#each generateEdgePath(edge) as path}
+                {#each generateEdgePath(edge) as d}
                     {@const EdgeComponent = edge.component ?? BaseEdge}
-                    <EdgeComponent {path} {edge} />
+                    {#if Array.isArray(EdgeComponent)}
+                        {@const [EdgeComp, edgeProps] = EdgeComponent}
+                        <EdgeComp {d} {edge} {...edgeProps} />
+                    {:else}
+                        <EdgeComponent {d} {edge} />
+                    {/if}
                 {/each}
             {/each}
         </g>

package/dist/Surface.svelte.d.ts

@@ -4,6 +4,7 @@ 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;
@@ -13,8 +14,8 @@ 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>;

package/dist/index.d.ts

@@ -1,3 +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/svelte-actions.js

@@ -2,6 +2,22 @@ import { mount } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { writable } from "svelte/store";
 import Surface from "./Surface.svelte";
+let elementIdCounter = 0;
+function getElementId(el) {
+    if (el.id)
+        return `#${el.id}`;
+    if (!el.dataset.nodalUid) {
+        el.dataset.nodalUid = `nodal-${elementIdCounter++}`;
+    }
+    return `[data-nodal-uid="${el.dataset.nodalUid}"]`;
+}
+function getEdgeEndpointKey(endpoint) {
+    if (typeof endpoint === "string")
+        return endpoint;
+    if (endpoint instanceof HTMLElement)
+        return getElementId(endpoint);
+    return endpoint.map(e => typeof e === "string" ? e : getElementId(e)).join(",");
+}
 function drawCall(surface) {
     // console.debug("Drawing nodal surface edges...");
     const connections = surface.querySelectorAll("[data-nodal-connected='true']");
@@ -28,7 +44,9 @@ function drawCall(surface) {
                     ...edge,
                 };
             }
-            surface._nodalSurface.internals.edges.set(`${edgeDef.source}->${edgeDef.target}`, edgeDef);
+            const sourceKey = getEdgeEndpointKey(edgeDef.source);
+            const targetKey = getEdgeEndpointKey(edgeDef.target);
+            surface._nodalSurface.internals.edges.set(`${sourceKey}->${targetKey}`, edgeDef);
         });
     });
 }

package/package.json

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