@cnvx/nodal 0.1.2 → 0.1.4

package/dist/Diagram.svelte

@@ -14,6 +14,7 @@
         browser,
         dev,
     } from "./diagram-lib.js";
+    import type { HTMLAttributes } from "svelte/elements";
 
     export interface DiagramNodeDef {
         id: string;
@@ -60,6 +61,8 @@
         nodes: SvelteMap<string, DiagramNodeDef>;
         edges: SvelteMap<string, DiagramEdgeDef>;
         children: Snippet;
+        scaleToFit?: boolean;
+        figureAttributes: HTMLAttributes<HTMLElement>;
     };
 
     // const getNodeOrigin = (node: DiagramNode) => node.origin ?? vector2(0.0, 0.5);
@@ -73,7 +76,8 @@
 </script>
 
 <script lang="ts">
-    let { nodes, edges, children }: DiagramProps = $props();
+    let { nodes, edges, children, scaleToFit, figureAttributes }: DiagramProps =
+        $props();
     export function generateCurvePath(
         x1: number,
         y1: number,
@@ -94,7 +98,7 @@
             return normaliseAngle(raw);
         }
 
-        // CRUCIAL TO INVEST THE Y DIRECTION SINCE IT GOES FROM
+        // CRUCIAL TO INVERT THE Y DIRECTION SINCE IT GOES FROM
         // NEGATIVE TO POSITIVE!!!!!!!!!!!!!
         const leaveAngle = Math.atan2(y1 - y2, x2 - x1);
         const arriveAngle = leaveAngle + Math.PI;
@@ -255,7 +259,20 @@
     // 	}
     // });
 
+    let diagramContainer: HTMLElement | null = null;
+    let scale = $state(1);
     onMount(() => {
+        if (scaleToFit) {
+            console.log(diagramContainer?.parentElement);
+            const scaleY = diagramContainer?.parentElement?.clientHeight
+                ? diagramContainer.parentElement?.clientHeight / height
+                : 1;
+            const scaleX = diagramContainer?.parentElement?.clientWidth
+                ? diagramContainer?.parentElement?.clientWidth / width
+                : 1;
+
+            scale = Math.min(scaleX, scaleY);
+        }
         dimensions = calculateDimensions(nodes);
     });
 </script>
@@ -275,11 +292,13 @@
 {/snippet}
 
 <figure
+    bind:this={diagramContainer}
     aria-label="Diagram"
     aria-hidden={!dev}
     inert={!dev}
+    {...figureAttributes}
     role="img"
-    style="position:relative;width:{width}px;height:{height}px;overflow:show;user-select:none;"
+    style="position:relative;width:{width}px;height:{height}px;overflow:visible;user-select:none;transform:scale({scale});transform-origin:center center;"
 >
     <!-- <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}

package/dist/Diagram.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Snippet } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { type Vector2 } from "./diagram-lib.js";
+import type { HTMLAttributes } from "svelte/elements";
 export interface DiagramNodeDef {
     id: string;
     x: number;
@@ -35,6 +36,8 @@ export type DiagramProps = {
     nodes: SvelteMap<string, DiagramNodeDef>;
     edges: SvelteMap<string, DiagramEdgeDef>;
     children: Snippet;
+    scaleToFit?: boolean;
+    figureAttributes: HTMLAttributes<HTMLElement>;
 };
 declare const Diagram: import("svelte").Component<DiagramProps, {
     generateCurvePath: (x1: number, y1: number, x2: number, y2: number, edge: DiagramEdgeDef) => string;

package/dist/DiagramController.svelte

@@ -18,12 +18,16 @@
     let {
         children,
         eagerLoad = false,
+        scaleToFit = false,
         rootMargin = "100px", // start a bit before it enters the viewport
+        figureAttributes = { inert: true, "aria-hidden": true },
         ...rest
     }: {
         children: Snippet;
         eagerLoad?: boolean;
+        scaleToFit?: boolean;
         rootMargin?: string;
+        figureAttributes: HTMLAttributes<HTMLElement>;
     } & HTMLAttributes<HTMLDivElement> = $props();
 
     const nodes = new SvelteMap<string, DiagramNodeDef>();
@@ -85,11 +89,11 @@
 
 {#if shouldRender}
     <!-- first pass: register all the nodes and edges -->
-    <PrerenderDiagram {nodes} {edges} {children} />
+    <PrerenderDiagram {nodes} {edges} {children} {figureAttributes} />
 
     <!-- second pass: render with computed positions -->
     <div {...rest}>
-        <Diagram {nodes} {edges}>
+        <Diagram {nodes} {edges} {scaleToFit} {figureAttributes}>
             {@render children()}
         </Diagram>
     </div>

package/dist/DiagramController.svelte.d.ts

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

package/package.json

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