@tinyvolt/pie 0.0.0-stage → 0.1.0

package/src/lib/nodes/functions/basic.ts

@@ -0,0 +1,298 @@
+import { Node2NodeFunc } from './Node2NodeFunc';
+import { AnyNode, PointNode, ScalarNode, TextNode } from '../state/Node';
+import { scalar, num, add, sub, mul, div, sqrt, ref } from '../jax';
+
+/**
+ * Create a scalar value from another scalar.
+ * @param value - Input scalar value
+ * @returns Scalar node
+ * @auxiliaryNodes None
+ */
+export const Scalar: Node2NodeFunc = {
+  keyword: 'scalar', outputType: 'Scalar',
+  parameters: [{ name: 'value', type: 'Scalar' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => {
+      const valueNode = ins[0] as ScalarNode;
+      const value = valueNode?.value || scalar(0);
+      return { main: { type: 'Scalar', value } };
+    };
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create a text node with a string value. It is drawn only when given both x and y.
+ * @param value - Text string value (default '')
+ * @param x - X coordinate of the center (default: not drawn)
+ * @param y - Y coordinate of the center (default: not drawn)
+ * @param fontSize - Font size in pixels (default 12)
+ * @param w - Box width: 0 with h 0 = one line, no box; above 0 = fixed; -1 = fits the text, at most 5 (default 0)
+ * @param h - Box height: 0 with w 0 = one line, no box; above 0 = fixed; -1 = fits the text, at most 5 (default 0)
+ * @returns Text node
+ * @auxiliaryNodes None
+ */
+export const Text: Node2NodeFunc = {
+  keyword: 'text', outputType: 'Text',
+  parameters: [
+    { name: 'value', type: 'Text', defaultValue: '' },
+    { name: 'x', type: 'Scalar', defaultValue: null },
+    { name: 'y', type: 'Scalar', defaultValue: null },
+    { name: 'fontSize', type: 'Scalar', defaultValue: 12 },
+    { name: 'w', type: 'Scalar', defaultValue: 0 },
+    { name: 'h', type: 'Scalar', defaultValue: 0 },
+  ],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => {
+      const textNode = ins[0] as TextNode;
+      const value = textNode?.value || '';
+      const [x, y, fontSize, w, h] = ins.slice(1) as (ScalarNode | undefined)[];
+      return { main: { type: 'Text', value, x, y, fontSize, w, h } };
+    };
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create a point from x and y coordinates.
+ * @param x - X coordinate
+ * @param y - Y coordinate
+ * @returns Point node
+ * @auxiliaryNodes None
+ */
+export const Point: Node2NodeFunc = {
+  keyword: 'point', outputType: 'Point',
+  parameters: [{ name: 'x', type: 'Scalar' }, { name: 'y', type: 'Scalar' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => {
+      const xNode = ins[0] as ScalarNode;
+      const yNode = ins[1] as ScalarNode;
+      return {
+        main: {
+          type: 'Point',
+          x: xNode.value,
+          y: yNode.value
+        }
+      };
+    };
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create a triangle from three vertex points.
+ * @param vertex1 - First vertex point
+ * @param vertex2 - Second vertex point
+ * @param vertex3 - Third vertex point
+ * @returns Triangle node
+ * @auxiliaryNodes l_0, l_1, l_2 (Line nodes)
+ */
+export const Triangle: Node2NodeFunc = {
+  keyword: 'triangle', outputType: 'Triangle',
+  parameters: [{ name: 'vertex1', type: 'Point' }, { name: 'vertex2', type: 'Point' }, { name: 'vertex3', type: 'Point' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => {
+      const nodes: Record<string, any> = {};
+      for (let i = 0; i < 3; i++) {
+        nodes[`l_${i}`] = { type: 'Line', p1: ins[i], p2: ins[(i + 1) % 3] };
+      }
+      nodes['main'] = { type: 'Triangle', vertices: ins };
+      return nodes;
+    };
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create a line from two points.
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Line node
+ * @auxiliaryNodes None
+ */
+export const Line: Node2NodeFunc = {
+  keyword: 'line', outputType: 'Line',
+  parameters: [{ name: 'point1', type: 'Point' }, { name: 'point2', type: 'Point' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => ({ main: { type: 'Line', p1: ins[0], p2: ins[1] } });
+    return inner(inputs);
+  },
+};
+
+/**
+ * Compute the distance between two points.
+ * @param point1 - First point
+ * @param point2 - Second point
+ * @returns Scalar node
+ * @auxiliaryNodes None
+ */
+export const Distance: Node2NodeFunc = {
+  keyword: 'distance', outputType: 'Scalar',
+  parameters: [{ name: 'point1', type: 'Point' }, { name: 'point2', type: 'Point' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => {
+      const p1 = ins[0] as PointNode;
+      const p2 = ins[1] as PointNode;
+      const dx = sub(ref(p2.x), ref(p1.x));
+      const dy = sub(ref(p2.y), ref(p1.y));
+      const value = sqrt(add(mul(ref(dx), ref(dx)), mul(ref(dy), ref(dy))));
+      return { main: { type: 'Scalar', value } };
+    };
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create a circle with a center point and radius.
+ * @param center - Center point of the circle
+ * @param radius - Radius of the circle
+ * @returns Circle node
+ * @auxiliaryNodes None
+ */
+export const Circle: Node2NodeFunc = {
+  keyword: 'circle', outputType: 'Circle',
+  parameters: [{ name: 'center', type: 'Point' }, { name: 'radius', type: 'Scalar' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => ({ main: { type: 'Circle', center: ins[0], radius: ins[1] } });
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create an ellipse with center, radii, and rotation.
+ * @param center - Center point of the ellipse
+ * @param radiusX - Horizontal radius
+ * @param radiusY - Vertical radius
+ * @param rotation - Rotation angle in degrees
+ * @returns Ellipse node
+ * @auxiliaryNodes None
+ */
+export const Ellipse: Node2NodeFunc = {
+  keyword: 'ellipse', outputType: 'Ellipse',
+  parameters: [
+    { name: 'center', type: 'Point' },
+    { name: 'radiusX', type: 'Scalar' },
+    { name: 'radiusY', type: 'Scalar' },
+    { name: 'rotation', type: 'Scalar' }
+  ],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => ({ main: { type: 'Ellipse', center: ins[0], radiusX: ins[1], radiusY: ins[2], rotation: ins[3] } });
+    return inner(inputs);
+  },
+};
+
+/**
+ * Create a quadratic Bezier curve from two endpoints and a control point.
+ * @param p1 - Start point
+ * @param control - Control point
+ * @param p2 - End point
+ * @returns BezierQuadratic node
+ * @auxiliaryNodes None
+ */
+export const BezierQuadratic: Node2NodeFunc = {
+  keyword: 'bezier_quadratic', outputType: 'BezierQuadratic',
+  parameters: [{ name: 'p1', type: 'Point' }, { name: 'control', type: 'Point' }, { name: 'p2', type: 'Point' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => ({ main: { type: 'BezierQuadratic', p1: ins[0], control: ins[1], p2: ins[2] } });
+    return inner(inputs);
+  }
+};
+
+/**
+ * Create a cubic Bezier curve from two endpoints and two control points.
+ * @param p1 - Start point
+ * @param control1 - First control point
+ * @param control2 - Second control point
+ * @param p2 - End point
+ * @returns BezierCubic node
+ * @auxiliaryNodes None
+ */
+export const BezierCubic: Node2NodeFunc = {
+  keyword: 'bezier_cubic', outputType: 'BezierCubic',
+  parameters: [{ name: 'p1', type: 'Point' }, { name: 'control1', type: 'Point' }, { name: 'control2', type: 'Point' }, { name: 'p2', type: 'Point' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => ({ main: { type: 'BezierCubic', p1: ins[0], control1: ins[1], control2: ins[2], p2: ins[3] } });
+    return inner(inputs);
+  }
+};
+
+/**
+ * Create an arc with center, radius, and start/end angles.
+ * @param center - Center point of the arc
+ * @param radius - Radius of the arc
+ * @param startAngle - Start angle in degrees
+ * @param endAngle - End angle in degrees
+ * @returns Arc node
+ * @auxiliaryNodes None
+ */
+export const Arc: Node2NodeFunc = {
+  keyword: 'arc', outputType: 'Arc',
+  parameters: [{ name: 'center', type: 'Point' }, { name: 'radius', type: 'Scalar' }, { name: 'startAngle', type: 'Scalar' }, { name: 'endAngle', type: 'Scalar' }],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => ({ main: { type: 'Arc', center: ins[0], radius: ins[1], startAngle: ins[2], endAngle: ins[3] } });
+    return inner(inputs);
+  }
+};
+
+/**
+ * Create an ellipse from two foci and a string length.
+ * @param focus1 - First focus point
+ * @param focus2 - Second focus point
+ * @param stringLength - Total string length (sum of distances from any point on ellipse to both foci)
+ * @returns Ellipse node
+ * @auxiliaryNodes center, radiusX, radiusY, rotation
+ */
+export const EllipseFromFociAndStringLength: Node2NodeFunc = {
+  keyword: 'ellipse_from_foci', outputType: 'Ellipse',
+  parameters: [
+    { name: 'focus1', type: 'Point' },
+    { name: 'focus2', type: 'Point' },
+    { name: 'stringLength', type: 'Scalar' }
+  ],
+  compute(inputs) {
+    const inner = (ins: AnyNode[]) => {
+      const focus1 = ins[0] as PointNode;
+      const focus2 = ins[1] as PointNode;
+      const stringLengthNode = ins[2] as ScalarNode;
+      
+      const dx = sub(ref(focus2.x), ref(focus1.x));
+      const dy = sub(ref(focus2.y), ref(focus1.y));
+      const focalDistance = sqrt(add(mul(ref(dx), ref(dx)), mul(ref(dy), ref(dy))));
+      
+      if (num(stringLengthNode.value) <= num(focalDistance)) {
+        return { main: { type: 'Dummy' } };
+      }
+      
+      const cx = div(add(ref(focus1.x), ref(focus2.x)), scalar(2));
+      const cy = div(add(ref(focus1.y), ref(focus2.y)), scalar(2));
+      const center = { type: 'Point', x: cx, y: cy };
+      
+      const c = div(ref(focalDistance), scalar(2));
+      const a = div(ref(stringLengthNode.value), scalar(2));
+      
+      const cSquared = mul(ref(c), ref(c));
+      const aSquared = mul(ref(a), ref(a));
+      const bSquared = sub(ref(aSquared), ref(cSquared));
+      const b = sqrt(ref(bSquared));
+      
+      const angleRad = scalar(Math.atan2(num(dy), num(dx)));
+      const angleDeg = div(mul(ref(angleRad), scalar(180)), scalar(Math.PI));
+      
+      const radiusX = { type: 'Scalar', value: a };
+      const radiusY = { type: 'Scalar', value: b };
+      const rotation = { type: 'Scalar', value: angleDeg };
+      
+      return {
+        center,
+        radiusX,
+        radiusY,
+        rotation,
+        main: { type: 'Ellipse', center, radiusX, radiusY, rotation }
+      };
+    };
+    return inner(inputs);
+  }
+};
+
+/** Docs category for the functions defined in this file. */
+export const category = 'Basic Figures';

package/src/lib/nodes/functions/registry.ts

@@ -0,0 +1,46 @@
+import { Node2NodeFunc, SideEffectFunc } from './Node2NodeFunc';
+import * as basicNodes from './basic';
+import * as autodiffNodes from './autodiff';
+import * as arrayNodes from './array';
+import * as sideEffects from './sideEffects';
+
+const isNode2NodeFunc = (fn: unknown): fn is Node2NodeFunc =>
+  typeof fn === 'object' && fn !== null && typeof (fn as Node2NodeFunc).compute === 'function';
+
+const isSideEffectFunc = (fn: unknown): fn is SideEffectFunc =>
+  typeof fn === 'object' && fn !== null && typeof (fn as SideEffectFunc).run === 'function';
+
+// The site's own functions: each `functions/**/*.ts` exports `Node2NodeFunc`s, like `basic.ts`.
+const customModules = import.meta.glob<Record<string, unknown>>('/functions/**/*.ts', { eager: true });
+
+// File path -> its exports. Built-ins first.
+const modules: [string, Record<string, unknown>][] = [
+  ['src/lib/nodes/functions/basic.ts', basicNodes],
+  ['src/lib/nodes/functions/autodiff.ts', autodiffNodes],
+  ['src/lib/nodes/functions/array.ts', arrayNodes],
+  ['src/lib/nodes/functions/sideEffects.ts', sideEffects],
+  ...Object.entries(customModules).map(([path, mod]): [string, Record<string, unknown>] => [path.slice(1), mod]),
+];
+
+export const functionRegistry = new Map<string, Node2NodeFunc>();
+export const sideEffectRegistry = new Map<string, SideEffectFunc>();
+const sourceFile = new Map<string, string>();
+for (const [file, mod] of modules) {
+  for (const fn of Object.values(mod).filter(fn => isNode2NodeFunc(fn) || isSideEffectFunc(fn))) {
+    const other = sourceFile.get(fn.keyword);
+    if (other !== undefined) {
+      throw new Error(`Duplicate function keyword '${fn.keyword}': ${file} and ${other}`);
+    }
+    if (isSideEffectFunc(fn)) sideEffectRegistry.set(fn.keyword, fn);
+    else functionRegistry.set(fn.keyword, fn);
+    sourceFile.set(fn.keyword, file);
+  }
+}
+
+export function getFunction(keyword: string): Node2NodeFunc | undefined {
+  return functionRegistry.get(keyword);
+}
+
+export function getSideEffect(keyword: string): SideEffectFunc | undefined {
+  return sideEffectRegistry.get(keyword);
+}

package/src/lib/nodes/functions/sideEffects.ts

@@ -0,0 +1,193 @@
+import { createMemo, createRoot, createSignal, onCleanup } from 'solid-js';
+import { SideEffectFunc } from './Node2NodeFunc';
+import { AnyNode, PointNode, ScalarNode, TextNode, checkColor, getNodeTypes } from '../state/Node';
+import { NodeStore } from '../state/NodeStore';
+import { Dtype, add, num, ref, scalar } from '../jax';
+
+/** How long an animated change takes. */
+const ANIMATION_MS = 500;
+
+/** Slow at the start and end, fast in the middle. `t` and the result go from 0 to 1. */
+const easeInOut = (t: number) => (t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) ** 2);
+
+/**
+ * Saves `node` with `changes`, new values for some of its numbers, in place of `node`.
+ * It has no inputs, so it no longer follows the old node's.
+ * With `animate`, the numbers move to their new values over `ANIMATION_MS` instead of jumping.
+ * Resolves when they arrive, or when the node is replaced or removed first.
+ */
+function replaceNode<N extends AnyNode>(store: NodeStore, node: N, changes: Partial<N>, animate: boolean): Promise<void> {
+  const { __graph_deps, ...unchanged } = node;
+  const end = { ...unchanged, ...changes } as AnyNode;
+  if (!animate) {
+    createRoot((dispose) => store.saveNode(node.id, createMemo(() => end), dispose));
+    return Promise.resolve();
+  }
+
+  // [key, start, end] for each changed number.
+  const moves = Object.entries(changes).map(([key, value]) => [key, num(node[key as keyof N] as Dtype), num(value)] as const);
+  const at = (t: number) => ({ ...end, ...Object.fromEntries(moves.map(([key, a, b]) => [key, scalar(a + (b - a) * t)])) } as AnyNode);
+
+  return new Promise((resolve) => createRoot((dispose) => {
+    const start = performance.now();
+    const [progress, setProgress] = createSignal(0);
+    store.saveNode(node.id, createMemo(() => (progress() < 1 ? at(easeInOut(progress())) : end)), dispose);
+    let frame = requestAnimationFrame(function step() {
+      setProgress(Math.min((performance.now() - start) / ANIMATION_MS, 1));
+      if (progress() < 1) frame = requestAnimationFrame(step);
+      else resolve();
+    });
+    // Another change to this node, or `clear`, disposes this one: stop moving and let the call return.
+    onCleanup(() => {
+      cancelAnimationFrame(frame);
+      resolve();
+    });
+  }));
+}
+
+// Any node, but not a whole Array: an Array is looped over, so each item is hidden or shown.
+const anyItem = getNodeTypes().filter(type => type !== 'Array');
+
+/**
+ * Hide a node: it is not drawn on the canvas.
+ * @param node - Node to hide
+ */
+export const Hide: SideEffectFunc = {
+  keyword: 'hide',
+  parameters: [{ name: 'node', type: anyItem }],
+  run(inputs, store) {
+    store.updateNode(inputs[0].id, { hidden: true });
+  },
+};
+
+/**
+ * Show a hidden node.
+ * @param node - Node to show
+ */
+export const Show: SideEffectFunc = {
+  keyword: 'show',
+  parameters: [{ name: 'node', type: anyItem }],
+  run(inputs, store) {
+    store.updateNode(inputs[0].id, { hidden: false });
+  },
+};
+
+/**
+ * Remove a node from the canvas.
+ * @param node - Node to remove
+ */
+export const Remove: SideEffectFunc = {
+  keyword: 'remove',
+  parameters: [{ name: 'node', type: anyItem }],
+  run(inputs, store) {
+    store.removeNode(inputs[0].id);
+  },
+};
+
+/**
+ * Set a node's fill.
+ * @param node - Node to change
+ * @param color - A CSS color, like 'red' or '#ff0000', or 'none'
+ */
+export const SetFill: SideEffectFunc = {
+  keyword: 'set_fill',
+  parameters: [{ name: 'node', type: anyItem }, { name: 'color', type: 'Text' }],
+  run(inputs, store) {
+    const fill = (inputs[1] as TextNode).value;
+    checkColor('set_fill', 'fill', fill);
+    store.updateNode(inputs[0].id, { fill });
+  },
+};
+
+/**
+ * Set a node's stroke.
+ * @param node - Node to change
+ * @param color - A CSS color, like 'red' or '#ff0000', or 'none'
+ */
+export const SetStroke: SideEffectFunc = {
+  keyword: 'set_stroke',
+  parameters: [{ name: 'node', type: anyItem }, { name: 'color', type: 'Text' }],
+  run(inputs, store) {
+    const stroke = (inputs[1] as TextNode).value;
+    checkColor('set_stroke', 'stroke', stroke);
+    store.updateNode(inputs[0].id, { stroke });
+  },
+};
+
+/**
+ * Clear the canvas and reset the system nodes.
+ */
+export const Clear: SideEffectFunc = {
+  keyword: 'clear',
+  parameters: [],
+  run(_inputs, store) {
+    store.clearNodes();
+  },
+};
+
+/**
+ * Move a point to (x, y). With `animate=True` it moves there over half a second.
+ * @param point - Point to move
+ * @param x - New x coordinate
+ * @param y - New y coordinate
+ */
+export const TranslatePointTo: SideEffectFunc = {
+  keyword: 'translate_point_to',
+  parameters: [{ name: 'point', type: 'Point' }, { name: 'x', type: 'Scalar' }, { name: 'y', type: 'Scalar' }],
+  animatable: true,
+  run(inputs, store, animate) {
+    const [point, x, y] = inputs as [PointNode, ScalarNode, ScalarNode];
+    return replaceNode(store, point, { x: ref(x.value), y: ref(y.value) }, animate);
+  },
+};
+
+/**
+ * Move a point by (dx, dy). With `animate=True` it moves there over half a second.
+ * @param point - Point to move
+ * @param dx - Change in x
+ * @param dy - Change in y
+ */
+export const TranslatePointBy: SideEffectFunc = {
+  keyword: 'translate_point_by',
+  parameters: [{ name: 'point', type: 'Point' }, { name: 'dx', type: 'Scalar' }, { name: 'dy', type: 'Scalar' }],
+  animatable: true,
+  run(inputs, store, animate) {
+    const [point, dx, dy] = inputs as [PointNode, ScalarNode, ScalarNode];
+    const x = add(ref(point.x), ref(dx.value));
+    const y = add(ref(point.y), ref(dy.value));
+    return replaceNode(store, point, { x, y }, animate);
+  },
+};
+
+/**
+ * Set a scalar to a new value. With `animate=True` it gets there over half a second.
+ * @param target - Scalar to change
+ * @param value - New value
+ */
+export const TranslateScalarTo: SideEffectFunc = {
+  keyword: 'translate_scalar_to',
+  parameters: [{ name: 'target', type: 'Scalar' }, { name: 'value', type: 'Scalar' }],
+  animatable: true,
+  run(inputs, store, animate) {
+    const [target, value] = inputs as [ScalarNode, ScalarNode];
+    return replaceNode(store, target, { value: ref(value.value) }, animate);
+  },
+};
+
+/**
+ * Add `delta` to a scalar. With `animate=True` it gets there over half a second.
+ * @param target - Scalar to change
+ * @param delta - Amount to add
+ */
+export const TranslateScalarBy: SideEffectFunc = {
+  keyword: 'translate_scalar_by',
+  parameters: [{ name: 'target', type: 'Scalar' }, { name: 'delta', type: 'Scalar' }],
+  animatable: true,
+  run(inputs, store, animate) {
+    const [target, delta] = inputs as [ScalarNode, ScalarNode];
+    return replaceNode(store, target, { value: add(ref(target.value), ref(delta.value)) }, animate);
+  },
+};
+
+/** Docs category for the functions defined in this file. */
+export const category = 'Side Effects';

package/src/lib/nodes/functions/vitePlugin.ts

@@ -0,0 +1,40 @@
+import path from 'node:path';
+import { runnerImport, type Plugin } from 'vite';
+import { APP_DIR } from '../../appDir';
+
+/**
+ * Loads `registry.ts` and `state/Node.ts` once at build start, so a bad `functions/**\/*.ts`
+ * (e.g. a keyword used twice) or `nodes/**\/*.{ts,tsx}` (e.g. a type used twice) fails the build.
+ * Without this, the error only stops pages from prerendering.
+ */
+export function checkFunctions(): Plugin {
+  let root = '';
+  let checked = false;
+
+  return {
+    name: 'check-functions',
+    apply: 'build',
+    configResolved(config) {
+      root = config.root;
+    },
+    // Runs once per build environment (client, ssr, ...); one check is enough.
+    async buildStart() {
+      if (checked) return;
+      checked = true;
+      try {
+        const options = {
+          configFile: false as const,
+          root,
+          logLevel: 'silent' as const,
+          resolve: { alias: { '~': APP_DIR } },
+          // Render functions use JSX. They never run here, so any JSX runtime that loads will do.
+          oxc: { jsx: { runtime: 'automatic' as const, importSource: 'solid-js/h' } },
+        };
+        await runnerImport(path.join(APP_DIR, 'lib/nodes/functions/registry.ts'), options);
+        await runnerImport(path.join(APP_DIR, 'lib/nodes/state/Node.ts'), options);
+      } catch (e) {
+        this.error((e as Error).message);
+      }
+    },
+  };
+}

package/src/lib/nodes/hooks/useCanvasResize.ts

@@ -0,0 +1,38 @@
+import { onMount, onCleanup } from 'solid-js';
+import { NodeStore } from '../state/NodeStore';
+
+export function useCanvasResize(svgContainerRef: () => HTMLDivElement | undefined, store: NodeStore) {
+  let resizeObserver: ResizeObserver | undefined;
+
+  const updateCanvasSize = () => {
+    const container = svgContainerRef();
+    if (container) {
+      store.setCanvasBounds({
+        width: container.clientWidth,
+        height: container.clientHeight
+      });
+    }
+  };
+
+  onMount(() => {
+    updateCanvasSize();
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', updateCanvasSize);
+    }
+    // Observe the container directly so the canvas re-fits on any layout change
+    // (e.g. dragging the split pane), not just window resizes.
+    const container = svgContainerRef();
+    if (container && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => updateCanvasSize());
+      resizeObserver.observe(container);
+    }
+  });
+
+  onCleanup(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('resize', updateCanvasSize);
+    }
+    resizeObserver?.disconnect();
+  });
+  return updateCanvasSize;
+}