@statelyai/layout 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statelyai/layout",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Extensible, graph-native layout algorithms for @statelyai/graph",
   "license": "EPL-2.0 OR GPL-3.0-or-later",
   "repository": {
@@ -15,25 +15,49 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
   "exports": {
     ".": {
       "types": "./src/index.ts",
-      "default": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./elkjs": {
       "types": "./src/elkjs/index.ts",
-      "default": "./dist/elkjs/index.mjs"
+      "import": "./dist/elkjs/index.mjs",
+      "require": "./dist/elkjs/index.cjs"
+    },
+    "./lib/elk-api.js": {
+      "types": "./src/elkjs/worker-api.ts",
+      "import": "./dist/elkjs/worker-api.mjs",
+      "require": "./dist/elkjs/worker-api.cjs"
     },
     "./lib/elk.bundled.js": {
-      "types": "./src/elkjs/index.ts",
-      "default": "./dist/elkjs/index.mjs"
+      "types": "./src/elkjs/main.ts",
+      "import": "./dist/elkjs/main.mjs",
+      "require": "./dist/elkjs/main.cjs"
+    },
+    "./lib/elk-worker.js": {
+      "types": "./src/elkjs/worker.ts",
+      "import": "./dist/elkjs/worker.mjs",
+      "require": "./dist/elkjs/worker.cjs"
+    },
+    "./lib/elk-worker.min.js": {
+      "types": "./src/elkjs/worker.ts",
+      "import": "./dist/elkjs/worker.mjs",
+      "require": "./dist/elkjs/worker.cjs"
+    },
+    "./lib/main.js": {
+      "types": "./src/elkjs/main.ts",
+      "import": "./dist/elkjs/main.mjs",
+      "require": "./dist/elkjs/main.cjs"
     },
     "./layered": {
       "types": "./src/layered/index.ts",
-      "default": "./dist/layered/index.mjs"
+      "import": "./dist/layered/index.mjs",
+      "require": "./dist/layered/index.cjs"
     },
     "./package.json": "./package.json"
   },
@@ -41,6 +65,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@lume/kiwi": "^0.4.4",
     "@statelyai/graph": "^2.1.0"
   },
   "devDependencies": {
@@ -48,6 +73,7 @@
     "@codemirror/lang-javascript": "^6.2.5",
     "@codemirror/lint": "^6.9.7",
     "@statelyai/layout-pre-exterior-label-separation": "npm:@statelyai/layout@0.0.4",
+    "@storybook/react-vite": "^10.6.0",
     "@types/node": "^25.0.3",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
@@ -63,6 +89,7 @@
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-resizable-panels": "^4.12.2",
+    "storybook": "^10.6.0",
     "tsdown": "^0.18.1",
     "tsx": "^4.22.4",
     "typescript": "^5.9.3",
@@ -93,7 +120,10 @@
     "test": "vitest",
     "typecheck": "tsc --noEmit",
     "typecheck:repo": "tsc --project tsconfig.repo.json",
-    "verify": "oxfmt --check . && oxlint && tsc --noEmit && tsc --project tsconfig.repo.json && tsc --project demo/tsconfig.json && tsx scripts/generate-elk-layered-options.ts --check && tsx scripts/generate-demo-corpus.ts --check && vitest --run && tsdown && vite build --config demo/vite.config.ts && publint --pack npm && tsx scripts/smoke-package.ts",
-    "validate:package": "publint --pack npm && tsx scripts/smoke-package.ts"
+    "verify": "oxfmt --check . && oxlint && tsc --noEmit && tsc --project tsconfig.repo.json && tsc --project demo/tsconfig.json && tsc --project stories/tsconfig.json && tsx scripts/generate-elk-layered-options.ts --check && tsx scripts/generate-demo-corpus.ts --check && vitest --run && tsdown && vite build --config demo/vite.config.ts && storybook build -o dist-storybook --quiet && publint --pack npm && tsx scripts/smoke-package.ts",
+    "validate:package": "publint --pack npm && tsx scripts/smoke-package.ts",
+    "storybook": "storybook dev -p 6018 --host 127.0.0.1 --no-open",
+    "storybook:build": "storybook build -o dist-storybook",
+    "storybook:typecheck": "tsc --project stories/tsconfig.json"
   }
 }

package/src/authoring/coordinates.ts

@@ -0,0 +1,106 @@
+import { LayoutError } from "../errors";
+import type { VisualGraph, Point } from "@statelyai/graph";
+
+/** Native compound nodes and sibling edges are parent-relative; crossing edges are world-relative. */
+function frames<N, E, G, P>(graph: VisualGraph<N, E, G, P>) {
+  const nodes = new Map(graph.nodes.map((n) => [n.id, n]));
+  const offsets = new Map<string, Point>();
+  const visiting = new Set<string>();
+  function offset(id: string): Point {
+    const cached = offsets.get(id);
+    if (cached) return cached;
+    if (visiting.has(id))
+      throw new LayoutError(`Cyclic parent hierarchy at ${id}`, "INVALID_GRAPH");
+    visiting.add(id);
+    const parentId = nodes.get(id)?.parentId;
+    if (parentId == null) {
+      const origin = { x: 0, y: 0 };
+      visiting.delete(id);
+      offsets.set(id, origin);
+      return origin;
+    }
+    const parent = nodes.get(parentId)!;
+    const ancestor = offset(parentId);
+    const result = { x: ancestor.x + parent.x, y: ancestor.y + parent.y };
+    visiting.delete(id);
+    offsets.set(id, result);
+    return result;
+  }
+  for (const node of graph.nodes) offsets.set(node.id, offset(node.id));
+  const edgeOffsets = new Map(
+    graph.edges.map((edge) => {
+      const source = nodes.get(edge.sourceId)!;
+      const target = nodes.get(edge.targetId)!;
+      return [
+        edge.id,
+        (source.parentId ?? null) === (target.parentId ?? null)
+          ? offset(source.id)
+          : { x: 0, y: 0 },
+      ] as const;
+    }),
+  );
+  return { nodes: offsets, edges: edgeOffsets };
+}
+
+export function worldGeometry<N, E, G, P>(graph: VisualGraph<N, E, G, P>): VisualGraph<N, E, G, P> {
+  const offsets = frames(graph);
+  return {
+    ...graph,
+    nodes: graph.nodes.map((n) => {
+      const p = offsets.nodes.get(n.id)!;
+      return p.x === 0 && p.y === 0 ? n : { ...n, x: n.x + p.x, y: n.y + p.y };
+    }),
+    edges: graph.edges.map((e) => {
+      const p = offsets.edges.get(e.id)!;
+      return p.x === 0 && p.y === 0
+        ? e
+        : {
+            ...e,
+            x: e.x + p.x,
+            y: e.y + p.y,
+            ...(e.points ? { points: e.points.map((v) => ({ x: v.x + p.x, y: v.y + p.y })) } : {}),
+          };
+    }),
+  };
+}
+
+/** Ancestor frames stay fixed during authoring. Preserve untouched coordinates exactly. */
+export function nativeGeometry<N, E, G, P>(
+  graph: VisualGraph<N, E, G, P>,
+  original: VisualGraph<N, E, G, P>,
+): VisualGraph<N, E, G, P> {
+  const offsets = frames(original);
+  const world = worldGeometry(original);
+  const originalNodes = new Map(original.nodes.map((n) => [n.id, n]));
+  const originalEdges = new Map(original.edges.map((e) => [e.id, e]));
+  const worldNodes = new Map(world.nodes.map((n) => [n.id, n]));
+  const worldEdges = new Map(world.edges.map((e) => [e.id, e]));
+  return {
+    ...graph,
+    nodes: graph.nodes.map((n) => {
+      const p = offsets.nodes.get(n.id)!,
+        before = originalNodes.get(n.id)!,
+        prior = worldNodes.get(n.id)!;
+      return {
+        ...n,
+        x: n.x === prior.x ? before.x : n.x - p.x,
+        y: n.y === prior.y ? before.y : n.y - p.y,
+      };
+    }),
+    edges: graph.edges.map((e) => {
+      const p = offsets.edges.get(e.id)!,
+        before = originalEdges.get(e.id)!,
+        prior = worldEdges.get(e.id)!;
+      const points =
+        JSON.stringify(e.points) === JSON.stringify(prior.points)
+          ? before.points
+          : e.points?.map((v) => ({ x: v.x - p.x, y: v.y - p.y }));
+      return {
+        ...e,
+        x: e.x === prior.x ? before.x : e.x - p.x,
+        y: e.y === prior.y ? before.y : e.y - p.y,
+        ...(points === undefined ? {} : { points }),
+      };
+    }),
+  };
+}