@heyramzi/ui 2.11.1 → 2.11.2

package/dist/canvas/editor/dispatch.svelte.js

@@ -2,156 +2,159 @@ import { applyOps } from "../ops/ops.js";
 import { tryCatch } from "../../lib/result.js";
 import { applyHistoryEntry, diffFlowState, mergeHistoryEntries } from "./history-core.js";
 const MAX_ENTRIES = 200;
-const COALESCE_WINDOW_MS = 1000;
-const STUCK_TRANSACTION_MS = 10_000;
+/** Keystrokes under this far apart share one undo step. */
+const COALESCE_WINDOW_MS = 1e3;
+// A drag whose stop never fires (pointer lost, node unmounted) leaves its transaction open,
+// and drag frames never reach the dispatcher, so this counts from the last begin or commit.
+const STUCK_TRANSACTION_MS = 1e4;
+/** `Op` is the union of op shapes the caller dispatches: the canvas's own plus its plugins'. */
 export function createCanvasDispatcher(io) {
-    const now = io.now ?? Date.now;
-    let undoStack = $state.raw([]);
-    let redoStack = $state.raw([]);
-    let depth = 0;
-    let baseline = null;
-    let lastActivityAt = 0;
-    let session = null;
-    function snapshot() {
-        const state = io.getState();
-        return {
-            nodes: [
-                ...state.nodes
-            ],
-            edges: [
-                ...state.edges
-            ]
-        };
-    }
-    function isStale() {
-        return depth > 0 && now() - lastActivityAt > STUCK_TRANSACTION_MS;
-    }
-    function finish(coalesceKey) {
-        depth = 0;
-        const before = baseline;
-        baseline = null;
-        const entry = before && diffFlowState(before, io.getState());
-        if (!entry) return;
-        const at = now();
-        const top = undoStack.at(-1);
-        if (coalesceKey && top && session?.key === coalesceKey && at - session.at < COALESCE_WINDOW_MS) {
-            undoStack = [
-                ...undoStack.slice(0, -1),
-                mergeHistoryEntries(top, entry)
-            ];
-            session = {
-                key: coalesceKey,
-                at
-            };
-        } else {
-            undoStack = [
-                ...undoStack.slice(-(MAX_ENTRIES - 1)),
-                entry
-            ];
-            session = coalesceKey ? {
-                key: coalesceKey,
-                at
-            } : null;
-        }
-        redoStack = [];
-        io.onMutated();
-    }
-    function recoverStuck() {
-        if (isStale()) finish();
-    }
-    function begin() {
-        recoverStuck();
-        lastActivityAt = now();
-        if (depth === 0) baseline = snapshot();
-        depth += 1;
-    }
-    function commit(coalesceKey) {
-        lastActivityAt = now();
-        if (depth > 1) {
-            depth -= 1;
-            return;
-        }
-        if (depth === 1) finish(coalesceKey);
-    }
-    function run(fn, coalesceKey) {
-        begin();
-        const res = tryCatch(fn);
-        commit(coalesceKey);
-        if (!res.ok) throw res.error;
-        return res.value;
-    }
-    function dispatch(ops, options) {
-        const asked = Array.isArray(ops) ? ops : [
-            ops
-        ];
-        const list = io.guard ? io.guard(io.getState().nodes, asked) : asked;
-        if (list.length === 0) return true;
-        return run(()=>{
-            const state = io.getState();
-            const res = tryCatch(()=>applyOps({
-                    nodes: state.nodes,
-                    edges: state.edges
-                }, list, io.opDefinitions));
-            if (!res.ok) return false;
-            io.setState({
-                nodes: res.value.nodes,
-                edges: res.value.edges
-            });
-            return true;
-        }, options?.coalesceKey);
-    }
-    function undo() {
-        recoverStuck();
-        session = null;
-        const entry = undoStack.at(-1);
-        if (!entry || depth > 0) return;
-        undoStack = undoStack.slice(0, -1);
-        redoStack = [
-            ...redoStack,
-            entry
-        ];
-        io.setState(applyHistoryEntry(io.getState(), entry, "undo"));
-        io.onMutated();
-    }
-    function redo() {
-        recoverStuck();
-        session = null;
-        const entry = redoStack.at(-1);
-        if (!entry || depth > 0) return;
-        redoStack = redoStack.slice(0, -1);
-        undoStack = [
-            ...undoStack,
-            entry
-        ];
-        io.setState(applyHistoryEntry(io.getState(), entry, "redo"));
-        io.onMutated();
-    }
-    return {
-        get canUndo () {
-            return undoStack.length > 0;
-        },
-        get canRedo () {
-            return redoStack.length > 0;
-        },
-        get isOpen () {
-            return depth > 0 && !isStale();
-        },
-        begin,
-        touch () {
-            if (depth > 0) lastActivityAt = now();
-        },
-        commit: ()=>commit(),
-        run: (fn)=>run(fn),
-        dispatch,
-        endCoalesce () {
-            session = null;
-        },
-        undo,
-        redo,
-        clear () {
-            undoStack = [];
-            redoStack = [];
-            session = null;
-        }
-    };
+	const now = io.now ?? Date.now;
+	let undoStack = $state.raw([]);
+	let redoStack = $state.raw([]);
+	let depth = 0;
+	let baseline = null;
+	let lastActivityAt = 0;
+	// The text session the top undo entry belongs to, while keystrokes keep merging into it.
+	let session = null;
+	// Cards are replaced, never edited in place, so holding the objects equals a deep copy for a pointer each.
+	function snapshot() {
+		const state = io.getState();
+		return {
+			nodes: [...state.nodes],
+			edges: [...state.edges]
+		};
+	}
+	function isStale() {
+		return depth > 0 && now() - lastActivityAt > STUCK_TRANSACTION_MS;
+	}
+	/** Record the open transaction's diff as one history entry, merged into the text session it continues. */
+	function finish(coalesceKey) {
+		depth = 0;
+		const before = baseline;
+		baseline = null;
+		const entry = before && diffFlowState(before, io.getState());
+		if (!entry) return;
+		const at = now();
+		const top = undoStack.at(-1);
+		if (coalesceKey && top && session?.key === coalesceKey && at - session.at < COALESCE_WINDOW_MS) {
+			undoStack = [...undoStack.slice(0, -1), mergeHistoryEntries(top, entry)];
+			session = {
+				key: coalesceKey,
+				at
+			};
+		} else {
+			undoStack = [...undoStack.slice(-(MAX_ENTRIES - 1)), entry];
+			session = coalesceKey ? {
+				key: coalesceKey,
+				at
+			} : null;
+		}
+		redoStack = [];
+		io.onMutated();
+	}
+	/** Force-close a transaction nobody closed, so undo and the next gesture work again. */
+	function recoverStuck() {
+		if (isStale()) finish();
+	}
+	/** Open a transaction. Nested calls join the outermost one. */
+	function begin() {
+		recoverStuck();
+		lastActivityAt = now();
+		if (depth === 0) baseline = snapshot();
+		depth += 1;
+	}
+	/** Close a transaction. The outermost close diffs and records the entry. */
+	function commit(coalesceKey) {
+		lastActivityAt = now();
+		if (depth > 1) {
+			depth -= 1;
+			return;
+		}
+		// A commit with no begin has nothing to record.
+		if (depth === 1) finish(coalesceKey);
+	}
+	function run(fn, coalesceKey) {
+		begin();
+		const res = tryCatch(fn);
+		commit(coalesceKey);
+		if (!res.ok) throw res.error;
+		return res.value;
+	}
+	/**
+	* Apply granular ops to the flow state inside a transaction. A `coalesceKey` folds the
+	* step into the top undo entry while that key keeps committing under a second apart.
+	*/
+	function dispatch(ops, options) {
+		const asked = Array.isArray(ops) ? ops : [ops];
+		const list = io.guard ? io.guard(io.getState().nodes, asked) : asked;
+		if (list.length === 0) return true;
+		return run(() => {
+			const state = io.getState();
+			const res = tryCatch(() => applyOps({
+				// `applyOps` patches plain records so one op log replays over xyflow
+				// and persisted shapes. Widening in and narrowing out is that seam.
+				nodes: state.nodes,
+				edges: state.edges
+			}, list, io.opDefinitions));
+			if (!res.ok) return false;
+			io.setState({
+				nodes: res.value.nodes,
+				edges: res.value.edges
+			});
+			return true;
+		}, options?.coalesceKey);
+	}
+	// An open gesture owns the baseline, so a replay under it would fold into its entry.
+	function undo() {
+		recoverStuck();
+		session = null;
+		const entry = undoStack.at(-1);
+		if (!entry || depth > 0) return;
+		undoStack = undoStack.slice(0, -1);
+		redoStack = [...redoStack, entry];
+		io.setState(applyHistoryEntry(io.getState(), entry, "undo"));
+		io.onMutated();
+	}
+	function redo() {
+		recoverStuck();
+		session = null;
+		const entry = redoStack.at(-1);
+		if (!entry || depth > 0) return;
+		redoStack = redoStack.slice(0, -1);
+		undoStack = [...undoStack, entry];
+		io.setState(applyHistoryEntry(io.getState(), entry, "redo"));
+		io.onMutated();
+	}
+	return {
+		get canUndo() {
+			return undoStack.length > 0;
+		},
+		get canRedo() {
+			return redoStack.length > 0;
+		},
+		/** True while a gesture holds a transaction open. A stuck one reads false. */
+		get isOpen() {
+			return depth > 0 && !isStale();
+		},
+		begin,
+		/** A long gesture calls this on every frame, so a slow drag isn't mistaken for a stuck one. */
+		touch() {
+			if (depth > 0) lastActivityAt = now();
+		},
+		commit: () => commit(),
+		run: (fn) => run(fn),
+		dispatch,
+		/** End the text session, so the next keystroke starts a new undo step. Call it on blur. */
+		endCoalesce() {
+			session = null;
+		},
+		undo,
+		redo,
+		clear() {
+			undoStack = [];
+			redoStack = [];
+			session = null;
+		}
+	};
 }

package/dist/canvas/editor/editor-context.js

@@ -1,8 +1,13 @@
+// Typed Svelte context between the editor and the node and edge components inside it,
+// so every component edit lands on the dispatcher (undoable, autosaved).
+// Components must tolerate a missing context: read-only hosts like a slide's embedded
+// canvas provide none.
 import { getContext, setContext } from "svelte";
 const KEY = Symbol("diagram-editor-context");
+/** An app widens the context with its own members: pass its type as `T`. */
 export function setDiagramEditorContext(context) {
-    setContext(KEY, context);
+	setContext(KEY, context);
 }
 export function getDiagramEditorContext() {
-    return getContext(KEY) ?? null;
+	return getContext(KEY) ?? null;
 }

package/dist/canvas/editor/editor-mode.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/editor/frame.js

@@ -1,87 +1,84 @@
+/** A drag shorter than this on both sides was a click. */
 const CLICK_DRAG = 8;
 const DEFAULT_FRAME = {
-    width: 480,
-    height: 300
+	width: 480,
+	height: 300
 };
 const MIN_FRAME = {
-    width: 80,
-    height: 60
+	width: 80,
+	height: 60
 };
+/** The box a drag from one corner to the other covers, or the default size for a click. */
 export function frameRect(from, to) {
-    const width = Math.abs(to.x - from.x);
-    const height = Math.abs(to.y - from.y);
-    if (width < CLICK_DRAG && height < CLICK_DRAG) {
-        return {
-            x: Math.round(from.x),
-            y: Math.round(from.y),
-            ...DEFAULT_FRAME
-        };
-    }
-    return {
-        x: Math.round(Math.min(from.x, to.x)),
-        y: Math.round(Math.min(from.y, to.y)),
-        width: Math.round(Math.max(width, MIN_FRAME.width)),
-        height: Math.round(Math.max(height, MIN_FRAME.height))
-    };
+	const width = Math.abs(to.x - from.x);
+	const height = Math.abs(to.y - from.y);
+	if (width < CLICK_DRAG && height < CLICK_DRAG) {
+		return {
+			x: Math.round(from.x),
+			y: Math.round(from.y),
+			...DEFAULT_FRAME
+		};
+	}
+	return {
+		x: Math.round(Math.min(from.x, to.x)),
+		y: Math.round(Math.min(from.y, to.y)),
+		width: Math.round(Math.max(width, MIN_FRAME.width)),
+		height: Math.round(Math.max(height, MIN_FRAME.height))
+	};
 }
 function sizeOf(node) {
-    const width = node.measured?.width ?? node.width;
-    const height = node.measured?.height ?? node.height;
-    return width && height ? {
-        width,
-        height
-    } : null;
+	const width = node.measured?.width ?? node.width;
+	const height = node.measured?.height ?? node.height;
+	return width && height ? {
+		width,
+		height
+	} : null;
 }
+/** The op list for one frame, and the id it was given. Top-level cards wholly inside the box become its children. */
 export function frameOps(rect, nodes, { type, title, data = {} }) {
-    const id = crypto.randomUUID();
-    const inside = nodes.filter((node)=>{
-        const size = sizeOf(node);
-        if (!size || node.parentId || node.type === type) return false;
-        const { x, y } = node.position;
-        return x >= rect.x && y >= rect.y && x + size.width <= rect.x + rect.width && y + size.height <= rect.y + rect.height;
-    });
-    const ops = [
-        {
-            kind: "addNode",
-            node: {
-                id,
-                type,
-                position: {
-                    x: rect.x,
-                    y: rect.y
-                },
-                data: {
-                    ...data,
-                    label: title,
-                    frame: true
-                },
-                width: rect.width,
-                height: rect.height,
-                style: {
-                    width: rect.width,
-                    height: rect.height
-                }
-            }
-        },
-        ...inside.flatMap((node)=>[
-                {
-                    kind: "setParent",
-                    nodeId: node.id,
-                    parentId: id,
-                    extent: "parent"
-                },
-                {
-                    kind: "moveNode",
-                    nodeId: node.id,
-                    position: {
-                        x: node.position.x - rect.x,
-                        y: node.position.y - rect.y
-                    }
-                }
-            ])
-    ];
-    return {
-        id,
-        ops
-    };
+	const id = crypto.randomUUID();
+	const inside = nodes.filter((node) => {
+		const size = sizeOf(node);
+		if (!size || node.parentId || node.type === type) return false;
+		const { x, y } = node.position;
+		return x >= rect.x && y >= rect.y && x + size.width <= rect.x + rect.width && y + size.height <= rect.y + rect.height;
+	});
+	const ops = [{
+		kind: "addNode",
+		node: {
+			id,
+			type,
+			position: {
+				x: rect.x,
+				y: rect.y
+			},
+			data: {
+				...data,
+				label: title,
+				frame: true
+			},
+			width: rect.width,
+			height: rect.height,
+			style: {
+				width: rect.width,
+				height: rect.height
+			}
+		}
+	}, ...inside.flatMap((node) => [{
+		kind: "setParent",
+		nodeId: node.id,
+		parentId: id,
+		extent: "parent"
+	}, {
+		kind: "moveNode",
+		nodeId: node.id,
+		position: {
+			x: node.position.x - rect.x,
+			y: node.position.y - rect.y
+		}
+	}])];
+	return {
+		id,
+		ops
+	};
 }

package/dist/canvas/editor/hand-context.js

@@ -1,8 +1,11 @@
+// Whether the host page is drawn by hand. The host sets it once and the pen's
+// text and shapes read it. With no host, they keep the app's look.
 import { getContext, setContext } from "svelte";
 const KEY = Symbol("canvas-hand-drawn");
+/** Call during component init. `read` is a getter, so a toggle reaches mounted nodes. */
 export function setHandDrawn(read) {
-    setContext(KEY, read);
+	setContext(KEY, read);
 }
 export function useHandDrawn() {
-    return getContext(KEY) ?? (()=>false);
+	return getContext(KEY) ?? (() => false);
 }