@heyramzi/ui 2.8.0 → 2.10.0

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

@@ -0,0 +1,157 @@
+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;
+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;
+        }
+    };
+}

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

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("diagram-editor-context");
+export function setDiagramEditorContext(context) {
+    setContext(KEY, context);
+}
+export function getDiagramEditorContext() {
+    return getContext(KEY) ?? null;
+}

package/dist/canvas/editor/frame.js

@@ -0,0 +1,87 @@
+const CLICK_DRAG = 8;
+const DEFAULT_FRAME = {
+    width: 480,
+    height: 300
+};
+const MIN_FRAME = {
+    width: 80,
+    height: 60
+};
+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))
+    };
+}
+function sizeOf(node) {
+    const width = node.measured?.width ?? node.width;
+    const height = node.measured?.height ?? node.height;
+    return width && height ? {
+        width,
+        height
+    } : null;
+}
+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
+    };
+}

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

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("canvas-hand-drawn");
+export function setHandDrawn(read) {
+    setContext(KEY, read);
+}
+export function useHandDrawn() {
+    return getContext(KEY) ?? (()=>false);
+}

package/dist/canvas/editor/history-core.js

@@ -0,0 +1,221 @@
+import { sortParentsFirst } from "../headless/canvas-cleanup.js";
+const VOLATILE_NODE_FIELDS = new Set([
+    "selected",
+    "dragging",
+    "measured",
+    "resizing"
+]);
+const VOLATILE_EDGE_FIELDS = new Set([
+    "selected"
+]);
+function stripVolatile(record, volatile) {
+    const out = {};
+    for (const [key, value] of Object.entries(record)){
+        if (volatile.has(key) || value === undefined) continue;
+        out[key] = value;
+    }
+    return out;
+}
+function clone(value) {
+    return JSON.parse(JSON.stringify(value));
+}
+function signature(record, volatile) {
+    return JSON.stringify(stripVolatile(record, volatile));
+}
+export function isSameNode(a, b) {
+    return a === b || signature(a, VOLATILE_NODE_FIELDS) === signature(b, VOLATILE_NODE_FIELDS);
+}
+export function isSameEdge(a, b) {
+    return a === b || signature(a, VOLATILE_EDGE_FIELDS) === signature(b, VOLATILE_EDGE_FIELDS);
+}
+function diffOrder(base, current) {
+    const before = base.map((item)=>item.id);
+    const after = current.map((item)=>item.id);
+    const same = before.length === after.length && before.every((id, i)=>id === after[i]);
+    return same ? undefined : {
+        before,
+        after
+    };
+}
+function diffCollection(base, current, volatile) {
+    const baseById = new Map(base.map((item)=>[
+            item.id,
+            item
+        ]));
+    const currentById = new Map(current.map((item)=>[
+            item.id,
+            item
+        ]));
+    const before = [];
+    const after = [];
+    for (const item of base){
+        const counterpart = currentById.get(item.id);
+        if (!counterpart) {
+            before.push(clone(stripVolatile(item, volatile)));
+            continue;
+        }
+        if (item !== counterpart && signature(item, volatile) !== signature(counterpart, volatile)) {
+            before.push(clone(stripVolatile(item, volatile)));
+            after.push(clone(stripVolatile(counterpart, volatile)));
+        }
+    }
+    for (const item of current){
+        if (!baseById.has(item.id)) {
+            after.push(clone(stripVolatile(item, volatile)));
+        }
+    }
+    return {
+        before,
+        after
+    };
+}
+export function diffFlowState(base, current) {
+    const nodes = diffCollection(base.nodes, current.nodes, VOLATILE_NODE_FIELDS);
+    const edges = diffCollection(base.edges, current.edges, VOLATILE_EDGE_FIELDS);
+    if (nodes.before.length === 0 && nodes.after.length === 0 && edges.before.length === 0 && edges.after.length === 0) {
+        return null;
+    }
+    const nodeOrder = diffOrder(base.nodes, current.nodes);
+    const edgeOrder = diffOrder(base.edges, current.edges);
+    return {
+        nodesBefore: nodes.before,
+        nodesAfter: nodes.after,
+        edgesBefore: edges.before,
+        edgesAfter: edges.after,
+        ...nodeOrder && {
+            nodeOrder
+        },
+        ...edgeOrder && {
+            edgeOrder
+        }
+    };
+}
+function sortByOrder(items, order) {
+    if (!order) return items;
+    const rank = new Map(order.map((id, index)=>[
+            id,
+            index
+        ]));
+    const at = (item)=>rank.get(item.id) ?? order.length;
+    return items.toSorted((a, b)=>at(a) - at(b));
+}
+function parentsFirst(nodes) {
+    const seen = new Set();
+    const ids = new Set(nodes.map((node)=>node.id));
+    for (const node of nodes){
+        if (node.parentId && ids.has(node.parentId) && !seen.has(node.parentId)) {
+            return sortParentsFirst(nodes);
+        }
+        seen.add(node.id);
+    }
+    return nodes;
+}
+function applyCollection(items, restore, discard) {
+    const restoreById = new Map(restore.map((item)=>[
+            item.id,
+            item
+        ]));
+    const discardIds = new Set(discard.map((item)=>item.id));
+    let next = items.filter((item)=>!(discardIds.has(item.id) && !restoreById.has(item.id)));
+    const present = new Set(next.map((item)=>item.id));
+    next = next.map((item)=>{
+        const restored = restoreById.get(item.id);
+        if (!restored) return item;
+        const selected = item.selected;
+        return {
+            ...clone(restored),
+            ...selected !== undefined && {
+                selected
+            }
+        };
+    });
+    for (const item of restore){
+        if (!present.has(item.id)) next.push(clone(item));
+    }
+    return next;
+}
+export function applyHistoryEntry(state, entry, direction) {
+    const [restoreNodes, discardNodes] = direction === "undo" ? [
+        entry.nodesBefore,
+        entry.nodesAfter
+    ] : [
+        entry.nodesAfter,
+        entry.nodesBefore
+    ];
+    const [restoreEdges, discardEdges] = direction === "undo" ? [
+        entry.edgesBefore,
+        entry.edgesAfter
+    ] : [
+        entry.edgesAfter,
+        entry.edgesBefore
+    ];
+    const side = direction === "undo" ? "before" : "after";
+    return {
+        nodes: parentsFirst(sortByOrder(applyCollection(state.nodes, restoreNodes, discardNodes), entry.nodeOrder?.[side])),
+        edges: sortByOrder(applyCollection(state.edges, restoreEdges, discardEdges), entry.edgeOrder?.[side])
+    };
+}
+function mergeSides(first, second) {
+    const firstTouched = new Set([
+        ...first.before,
+        ...first.after
+    ].map((item)=>item.id));
+    const secondTouched = new Set([
+        ...second.before,
+        ...second.after
+    ].map((item)=>item.id));
+    const before = [
+        ...first.before,
+        ...second.before.filter((item)=>!firstTouched.has(item.id))
+    ];
+    const after = [
+        ...first.after.filter((item)=>!secondTouched.has(item.id)),
+        ...second.after
+    ];
+    return {
+        before,
+        after
+    };
+}
+function sameIds(a, b) {
+    return a.length === b.length && a.every((id, i)=>id === b[i]);
+}
+function mergeOrder(first, second) {
+    const before = first?.before ?? second?.before;
+    const after = second?.after ?? first?.after;
+    if (!before || !after) return undefined;
+    return sameIds(before, after) ? undefined : {
+        before,
+        after
+    };
+}
+export function mergeHistoryEntries(first, second) {
+    const nodes = mergeSides({
+        before: first.nodesBefore,
+        after: first.nodesAfter
+    }, {
+        before: second.nodesBefore,
+        after: second.nodesAfter
+    });
+    const edges = mergeSides({
+        before: first.edgesBefore,
+        after: first.edgesAfter
+    }, {
+        before: second.edgesBefore,
+        after: second.edgesAfter
+    });
+    const nodeOrder = mergeOrder(first.nodeOrder, second.nodeOrder);
+    const edgeOrder = mergeOrder(first.edgeOrder, second.edgeOrder);
+    return {
+        nodesBefore: nodes.before,
+        nodesAfter: nodes.after,
+        edgesBefore: edges.before,
+        edgesAfter: edges.after,
+        ...nodeOrder && {
+            nodeOrder
+        },
+        ...edgeOrder && {
+            edgeOrder
+        }
+    };
+}

package/dist/canvas/editor/keymap.js

@@ -0,0 +1,193 @@
+export function isEditingTarget(target) {
+    const el = target;
+    const tag = el?.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || el?.isContentEditable === true;
+}
+export function resolveEditorKeyAction(event, hasSelection) {
+    const key = event.key.toLowerCase();
+    const mod = event.metaKey || event.ctrlKey;
+    const editing = isEditingTarget(event.target);
+    if (mod) return modAction(key, event.shiftKey, editing);
+    if (event.key === "Delete" || event.key === "Backspace") {
+        return hasSelection && !editing ? "delete" : null;
+    }
+    return editing || event.altKey ? null : plainAction(event);
+}
+const SHIFT_ZOOM = new Map([
+    [
+        "Digit0",
+        "zoom-100"
+    ],
+    [
+        "Digit1",
+        "zoom-fit"
+    ],
+    [
+        "Digit2",
+        "zoom-selection"
+    ]
+]);
+const PLAIN_KEYS = new Map([
+    [
+        "]",
+        "bring-forward"
+    ],
+    [
+        "[",
+        "send-backward"
+    ],
+    [
+        "+",
+        "zoom-in"
+    ],
+    [
+        "=",
+        "zoom-in"
+    ],
+    [
+        "-",
+        "zoom-out"
+    ],
+    [
+        "_",
+        "zoom-out"
+    ]
+]);
+function plainAction(event) {
+    const zoom = event.shiftKey ? SHIFT_ZOOM.get(event.code) : undefined;
+    return zoom ?? PLAIN_KEYS.get(event.key) ?? null;
+}
+export function resolveNudge(event) {
+    if (event.metaKey || event.ctrlKey || event.altKey || isEditingTarget(event.target)) return null;
+    const step = event.shiftKey ? 10 : 1;
+    switch(event.key){
+        case "ArrowLeft":
+            return {
+                dx: -step,
+                dy: 0
+            };
+        case "ArrowRight":
+            return {
+                dx: step,
+                dy: 0
+            };
+        case "ArrowUp":
+            return {
+                dx: 0,
+                dy: -step
+            };
+        case "ArrowDown":
+            return {
+                dx: 0,
+                dy: step
+            };
+        default:
+            return null;
+    }
+}
+const both = (action)=>[
+        action,
+        action
+    ];
+const CHORDS = new Map([
+    [
+        "c",
+        [
+            "copy",
+            "copy-as-png"
+        ]
+    ],
+    [
+        "v",
+        both("paste")
+    ],
+    [
+        "a",
+        both("select-all")
+    ],
+    [
+        "d",
+        [
+            "duplicate",
+            null
+        ]
+    ],
+    [
+        "g",
+        [
+            "group",
+            "ungroup"
+        ]
+    ],
+    [
+        "l",
+        [
+            null,
+            "lock"
+        ]
+    ],
+    [
+        "]",
+        both("bring-to-front")
+    ],
+    [
+        "[",
+        both("send-to-back")
+    ],
+    [
+        "enter",
+        both("present")
+    ],
+    [
+        "=",
+        both("zoom-in")
+    ],
+    [
+        "+",
+        both("zoom-in")
+    ],
+    [
+        "-",
+        both("zoom-out")
+    ],
+    [
+        "_",
+        both("zoom-out")
+    ]
+]);
+function modAction(key, shift, editing) {
+    if (key === "z") return shift ? "redo" : "undo";
+    if (key === "y") return "redo";
+    if (key === "s" && !shift) return "save";
+    if (editing) return null;
+    return CHORDS.get(key)?.[shift ? 1 : 0] ?? null;
+}
+const SPACE_OWNING_TAGS = new Set([
+    "BUTTON",
+    "A",
+    "SUMMARY",
+    "SELECT",
+    "OPTION"
+]);
+const SPACE_OWNING_ROLES = new Set([
+    "button",
+    "checkbox",
+    "switch",
+    "menuitem",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "option",
+    "radio",
+    "tab"
+]);
+export function isPanActivationKey(event) {
+    if (event.code !== "Space" && event.key !== " ") return false;
+    if (event.metaKey || event.ctrlKey || event.altKey) return false;
+    if (isEditingTarget(event.target)) return false;
+    return !ownsSpace(event.target);
+}
+function ownsSpace(el) {
+    if (el?.tagName && SPACE_OWNING_TAGS.has(el.tagName)) return true;
+    const role = el?.getAttribute?.("role");
+    return Boolean(role && SPACE_OWNING_ROLES.has(role));
+}