@cnvx/nodal 0.1.4 → 0.2.0

package/dist/Diagram.svelte

@@ -62,6 +62,8 @@
         edges: SvelteMap<string, DiagramEdgeDef>;
         children: Snippet;
         scaleToFit?: boolean;
+        width?: number;
+        height?: number;
         figureAttributes: HTMLAttributes<HTMLElement>;
     };
 
@@ -76,8 +78,15 @@
 </script>
 
 <script lang="ts">
-    let { nodes, edges, children, scaleToFit, figureAttributes }: DiagramProps =
-        $props();
+    let {
+        nodes,
+        edges,
+        children,
+        scaleToFit,
+        figureAttributes,
+        width: userDefinedDiagramWidth,
+        height: userDefinedDiagramHeight,
+    }: DiagramProps = $props();
     export function generateCurvePath(
         x1: number,
         y1: number,
@@ -154,6 +163,13 @@
     }
 
     function calculateDimensions(_nodes: typeof nodes) {
+        if (userDefinedDiagramHeight && userDefinedDiagramWidth) {
+            return {
+                min: vector2(0, 0),
+                max: vector2(userDefinedDiagramWidth, userDefinedDiagramHeight),
+            };
+        }
+
         // 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);
@@ -189,6 +205,8 @@
         dimensions.min = newDimensions.min;
         dimensions.max = newDimensions.max;
     });
+
+    $inspect({ dimensions });
     // let dimensions = calculateDimensions(nodes);
     // onMount(() => (dimensions = calculateDimensions(nodes)));
 
@@ -197,8 +215,14 @@
     setContext("dimensions", () => dimensions);
     setContext("prerendering", false);
 
-    let width = $derived(Math.max(dimensions.max.x - dimensions.min.x, 1));
-    let height = $derived(Math.max(dimensions.max.y - dimensions.min.y, 1));
+    let width = $derived(
+        // userDefinedDiagramWidth ??
+        Math.max(dimensions.max.x - dimensions.min.x, 1),
+    );
+    let height = $derived(
+        // userDefinedDiagramHeight ??
+        Math.max(dimensions.max.y - dimensions.min.y, 1),
+    );
 
     function generateEdgePath(edge: DiagramEdgeDef) {
         const sourceNode = nodes.get(edge.source)!;
@@ -263,6 +287,12 @@
     let scale = $state(1);
     onMount(() => {
         if (scaleToFit) {
+            if (userDefinedDiagramHeight || userDefinedDiagramWidth) {
+                throw new Error(
+                    "Cannot use user defined width/height with scaleToFit",
+                );
+            }
+
             console.log(diagramContainer?.parentElement);
             const scaleY = diagramContainer?.parentElement?.clientHeight
                 ? diagramContainer.parentElement?.clientHeight / height

package/dist/Diagram.svelte.d.ts

@@ -37,6 +37,8 @@ export type DiagramProps = {
     edges: SvelteMap<string, DiagramEdgeDef>;
     children: Snippet;
     scaleToFit?: boolean;
+    width?: number;
+    height?: number;
     figureAttributes: HTMLAttributes<HTMLElement>;
 };
 declare const Diagram: import("svelte").Component<DiagramProps, {

package/dist/DiagramController.svelte

@@ -18,17 +18,30 @@
     let {
         children,
         eagerLoad = false,
-        scaleToFit = false,
+        scaleToFit,
+        width,
+        height,
         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();
+        figureAttributes?: HTMLAttributes<HTMLElement>;
+    } & (
+        | {
+              scaleToFit?: boolean;
+              width?: never;
+              height?: never;
+          }
+        | {
+              scaleToFit?: never;
+              width: number;
+              height: number;
+          }
+    )) &
+        Omit<HTMLAttributes<HTMLDivElement>, "width" | "height"> = $props();
 
     const nodes = new SvelteMap<string, DiagramNodeDef>();
     const layers = new SvelteMap<number, Record<string, DiagramNodeDef>>();
@@ -93,7 +106,14 @@
 
     <!-- second pass: render with computed positions -->
     <div {...rest}>
-        <Diagram {nodes} {edges} {scaleToFit} {figureAttributes}>
+        <Diagram
+            {nodes}
+            {edges}
+            {scaleToFit}
+            {width}
+            {height}
+            {figureAttributes}
+        >
             {@render children()}
         </Diagram>
     </div>

package/dist/DiagramController.svelte.d.ts

@@ -1,12 +1,19 @@
 import { type Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = {
+type $$ComponentProps = ({
     children: Snippet;
     eagerLoad?: boolean;
-    scaleToFit?: boolean;
     rootMargin?: string;
-    figureAttributes: HTMLAttributes<HTMLElement>;
-} & HTMLAttributes<HTMLDivElement>;
+    figureAttributes?: HTMLAttributes<HTMLElement>;
+} & ({
+    scaleToFit?: boolean;
+    width?: never;
+    height?: never;
+} | {
+    scaleToFit?: never;
+    width: number;
+    height: number;
+})) & Omit<HTMLAttributes<HTMLDivElement>, "width" | "height">;
 declare const DiagramController: import("svelte").Component<$$ComponentProps, {}, "">;
 type DiagramController = ReturnType<typeof DiagramController>;
 export default DiagramController;

package/package.json

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