@heyramzi/ui 2.8.0 → 2.10.0

package/dist/canvas/editor/layout-actions.js

@@ -0,0 +1,170 @@
+import { alignNodesHorizontally, alignNodesVertically } from "../headless/alignment.js";
+const DEFAULT_GROUP_MIN = {
+    width: 250,
+    height: 150
+};
+function setX(nodes, x) {
+    for (const n of nodes)n.position.x = x;
+}
+function setY(nodes, y) {
+    for (const n of nodes)n.position.y = y;
+}
+const ALIGNERS = {
+    left: (nodes)=>setX(nodes, Math.min(...nodes.map((n)=>n.position.x))),
+    right: (nodes)=>setX(nodes, Math.max(...nodes.map((n)=>n.position.x))),
+    top: (nodes)=>alignNodesHorizontally(nodes),
+    bottom: (nodes)=>setY(nodes, Math.max(...nodes.map((n)=>n.position.y))),
+    "center-h": (nodes)=>alignNodesVertically(nodes),
+    "center-v": (nodes)=>setY(nodes, nodes.reduce((sum, n)=>sum + n.position.y, 0) / nodes.length)
+};
+export function alignNodes(selected, direction) {
+    if (selected.length < 2) return new Map();
+    const mutableNodes = selected.map((n)=>({
+            id: n.id,
+            position: {
+                ...n.position
+            }
+        }));
+    ALIGNERS[direction](mutableNodes);
+    return new Map(mutableNodes.map((n)=>[
+            n.id,
+            n.position
+        ]));
+}
+const TIDY_GAP = 40;
+export function tidySelectedNodes(selected) {
+    if (selected.length < 2) return new Map();
+    const xs = selected.map((n)=>n.position.x);
+    const ys = selected.map((n)=>n.position.y);
+    const xSpread = Math.max(...xs) - Math.min(...xs);
+    const ySpread = Math.max(...ys) - Math.min(...ys);
+    const horizontal = xSpread >= ySpread;
+    const sorted = [
+        ...selected
+    ].sort((a, b)=>horizontal ? a.position.x - b.position.x : a.position.y - b.position.y);
+    return horizontal ? stackAlongX(sorted) : stackAlongY(sorted);
+}
+function stackAlongX(sorted) {
+    const result = new Map();
+    let cursorX = sorted[0].position.x;
+    for (const node of sorted){
+        result.set(node.id, {
+            x: cursorX,
+            y: node.position.y
+        });
+        cursorX += (node.measured?.width ?? node.width ?? 200) + TIDY_GAP;
+    }
+    return result;
+}
+function stackAlongY(sorted) {
+    const result = new Map();
+    let cursorY = sorted[0].position.y;
+    for (const node of sorted){
+        result.set(node.id, {
+            x: node.position.x,
+            y: cursorY
+        });
+        cursorY += (node.measured?.height ?? node.height ?? 100) + TIDY_GAP;
+    }
+    return result;
+}
+const GROUP_PADDING = 32;
+const GROUP_HEADER = 36;
+const GROUP_GAP = 24;
+const ROW_TOLERANCE = 8;
+export function tidyGroup(children, min = DEFAULT_GROUP_MIN) {
+    if (children.length === 0) return null;
+    const width = (n)=>n.measured?.width ?? n.width ?? 200;
+    const height = (n)=>n.measured?.height ?? n.height ?? 100;
+    const rows = [];
+    for (const n of [
+        ...children
+    ].sort((a, b)=>a.position.y - b.position.y)){
+        const row = rows.at(-1);
+        if (row && n.position.y < row.bottom - ROW_TOLERANCE) {
+            row.items.push(n);
+            row.bottom = Math.max(row.bottom, n.position.y + height(n));
+        } else {
+            rows.push({
+                bottom: n.position.y + height(n),
+                items: [
+                    n
+                ]
+            });
+        }
+    }
+    const positions = new Map();
+    let y = GROUP_PADDING + GROUP_HEADER;
+    let right = 0;
+    for (const row of rows){
+        let x = GROUP_PADDING;
+        for (const n of row.items.sort((a, b)=>a.position.x - b.position.x)){
+            positions.set(n.id, {
+                x,
+                y
+            });
+            x += width(n) + GROUP_GAP;
+        }
+        right = Math.max(right, x - GROUP_GAP);
+        y += Math.max(...row.items.map(height)) + GROUP_GAP;
+    }
+    return {
+        positions,
+        size: {
+            width: Math.max(min.width, right + GROUP_PADDING),
+            height: Math.max(min.height, y - GROUP_GAP + GROUP_PADDING)
+        }
+    };
+}
+export function groupSelectionOps(selected, groupLabel, { type = "group", data = {} } = {}) {
+    if (selected.length < 2) return [];
+    const parentId = selected[0].parentId;
+    const members = selected.filter((n)=>n.parentId === parentId);
+    if (members.length < 2) return [];
+    const width = (n)=>n.measured?.width ?? n.width ?? 200;
+    const height = (n)=>n.measured?.height ?? n.height ?? 100;
+    const minX = Math.min(...members.map((n)=>n.position.x));
+    const minY = Math.min(...members.map((n)=>n.position.y));
+    const maxX = Math.max(...members.map((n)=>n.position.x + width(n)));
+    const maxY = Math.max(...members.map((n)=>n.position.y + height(n)));
+    const origin = {
+        x: minX - GROUP_PADDING,
+        y: minY - GROUP_PADDING - GROUP_HEADER
+    };
+    const groupId = crypto.randomUUID();
+    return [
+        {
+            kind: "addNode",
+            node: {
+                id: groupId,
+                type,
+                position: origin,
+                data: {
+                    ...data,
+                    label: groupLabel
+                },
+                width: maxX - minX + GROUP_PADDING * 2,
+                height: maxY - minY + GROUP_PADDING * 2 + GROUP_HEADER,
+                ...parentId ? {
+                    parentId
+                } : {}
+            }
+        },
+        ...members.flatMap((n)=>[
+                {
+                    kind: "setParent",
+                    nodeId: n.id,
+                    parentId: groupId,
+                    extent: "parent"
+                },
+                {
+                    kind: "moveNode",
+                    nodeId: n.id,
+                    position: {
+                        x: n.position.x - origin.x,
+                        y: n.position.y - origin.y
+                    }
+                }
+            ])
+    ];
+}

package/dist/canvas/editor/lock.js

@@ -0,0 +1,65 @@
+export function isLocked(node) {
+    const data = node?.data;
+    return data?.locked === true;
+}
+export const LOCK_FLAGS = {
+    draggable: false,
+    deletable: false
+};
+export function withLockFlags(node) {
+    if (node.data?.syncedCopy) return node;
+    if (isLocked(node)) return {
+        ...node,
+        ...LOCK_FLAGS
+    };
+    if (node.draggable !== false && node.deletable !== false) return node;
+    const { draggable: _drag, deletable: _delete, ...rest } = node;
+    return rest;
+}
+function onlyUnlocks(op) {
+    if (op.kind !== "patchNode") return false;
+    const patch = op;
+    return patch.data !== undefined && patch.style === undefined && patch.width === undefined && patch.height === undefined && Object.keys(patch.data).every((key)=>key === "locked");
+}
+export function refuseLockedOps(nodes, ops) {
+    const locked = new Set(nodes.filter(isLocked).map((node)=>node.id));
+    if (locked.size === 0) return [
+        ...ops
+    ];
+    return ops.filter((op)=>{
+        const nodeId = op.nodeId;
+        return typeof nodeId !== "string" || !locked.has(nodeId) || onlyUnlocks(op);
+    });
+}
+export function deletableIds(nodes, ids) {
+    const parentOf = new Map(nodes.map((node)=>[
+            node.id,
+            node.parentId
+        ]));
+    const holdsLocked = new Set();
+    for (const node of nodes){
+        if (!isLocked(node)) continue;
+        for(let up = node.parentId; up; up = parentOf.get(up))holdsLocked.add(up);
+    }
+    const byId = new Map(nodes.map((node)=>[
+            node.id,
+            node
+        ]));
+    return ids.filter((id)=>!isLocked(byId.get(id)) && !holdsLocked.has(id));
+}
+export function toggleLock(nodes, picked) {
+    const targets = nodes.filter((node)=>picked.has(node.id) && !node.data.syncedCopy);
+    if (targets.length === 0) return null;
+    const locked = !targets.every(isLocked);
+    const ids = new Set(targets.map((node)=>node.id));
+    return {
+        locked,
+        nodes: nodes.map((node)=>ids.has(node.id) ? withLockFlags({
+                ...node,
+                data: {
+                    ...node.data,
+                    locked
+                }
+            }) : node)
+    };
+}

package/dist/canvas/editor/rebase.js

@@ -0,0 +1,279 @@
+import { tryCatch } from "../../lib/result.js";
+import { applyOps } from "../ops/ops.js";
+import { sortParentsFirst } from "../headless/canvas-cleanup.js";
+const EDGE_PATCH_FIELDS = [
+    "source",
+    "target",
+    "label",
+    "animated",
+    "type",
+    "style",
+    "sourceHandle",
+    "targetHandle"
+];
+function json(value) {
+    return JSON.stringify(value ?? null);
+}
+function objectStyle(node) {
+    return node.style && typeof node.style === "object" ? node.style : undefined;
+}
+function numberOrUndefined(value) {
+    return typeof value === "number" ? value : undefined;
+}
+function addNodeOp(node) {
+    const style = objectStyle(node);
+    const width = numberOrUndefined(node.width);
+    const height = numberOrUndefined(node.height);
+    return {
+        kind: "addNode",
+        node: {
+            id: node.id,
+            type: String(node.type ?? "node"),
+            position: node.position ?? {
+                x: 0,
+                y: 0
+            },
+            data: node.data ?? {},
+            ...style ? {
+                style
+            } : {},
+            ...width !== undefined ? {
+                width
+            } : {},
+            ...height !== undefined ? {
+                height
+            } : {},
+            ...node.parentId ? {
+                parentId: node.parentId
+            } : {}
+        }
+    };
+}
+function sizePatchOf(before, node) {
+    const patch = {};
+    const style = objectStyle(node);
+    if (style && json(before.style) !== json(node.style)) patch.style = style;
+    const width = numberOrUndefined(node.width);
+    if (width !== undefined && before.width !== node.width) patch.width = width;
+    const height = numberOrUndefined(node.height);
+    if (height !== undefined && before.height !== node.height) patch.height = height;
+    return patch;
+}
+function changedData(before, data) {
+    if (!data) return undefined;
+    const changed = Object.entries(data).filter(([key, value])=>json(before?.[key]) !== json(value));
+    return changed.length > 0 ? Object.fromEntries(changed) : undefined;
+}
+function changedNodeOps(before, node) {
+    const ops = [];
+    if (node.position && json(before.position) !== json(node.position)) {
+        ops.push({
+            kind: "moveNode",
+            nodeId: node.id,
+            position: node.position
+        });
+    }
+    const parentId = node.parentId ?? null;
+    if ((before.parentId ?? null) !== parentId) {
+        ops.push({
+            kind: "setParent",
+            nodeId: node.id,
+            parentId
+        });
+    }
+    const data = changedData(before.data, node.data);
+    if (data) ops.push({
+        kind: "patchNode",
+        nodeId: node.id,
+        data
+    });
+    const sizePatch = sizePatchOf(before, node);
+    if (Object.keys(sizePatch).length > 0) {
+        ops.push({
+            kind: "patchNode",
+            nodeId: node.id,
+            ...sizePatch
+        });
+    }
+    return ops;
+}
+function nodeOps(base, current) {
+    const baseNodes = new Map(base.nodes.map((n)=>[
+            n.id,
+            n
+        ]));
+    const currentIds = new Set(current.nodes.map((n)=>n.id));
+    const removed = base.nodes.filter((n)=>!currentIds.has(n.id)).map((n)=>({
+            kind: "removeNode",
+            nodeId: n.id
+        }));
+    const added = sortParentsFirst(current.nodes.filter((n)=>!baseNodes.has(n.id))).map(addNodeOp);
+    const changed = current.nodes.flatMap((node)=>{
+        const before = baseNodes.get(node.id);
+        return before ? changedNodeOps(before, node) : [];
+    });
+    return [
+        ...removed,
+        ...added,
+        ...changed
+    ];
+}
+function addEdgeOp(edge) {
+    const optional = (key)=>typeof edge[key] === "string" ? {
+            [key]: edge[key]
+        } : {};
+    const record = (key)=>{
+        const value = edge[key];
+        return value && typeof value === "object" && !Array.isArray(value) ? {
+            [key]: value
+        } : {};
+    };
+    return {
+        kind: "addEdge",
+        edge: {
+            id: edge.id,
+            source: String(edge.source),
+            target: String(edge.target),
+            ...optional("sourceHandle"),
+            ...optional("targetHandle"),
+            ...optional("type"),
+            ...optional("label"),
+            ...typeof edge.animated === "boolean" ? {
+                animated: edge.animated
+            } : {},
+            ...record("style"),
+            ...record("data")
+        }
+    };
+}
+function patchEdgeOps(before, edge) {
+    const patch = {};
+    for (const field of EDGE_PATCH_FIELDS){
+        if (edge[field] !== undefined && json(before[field]) !== json(edge[field])) {
+            patch[field] = edge[field];
+        }
+    }
+    if (Object.keys(patch).length === 0) return [];
+    return [
+        {
+            kind: "patchEdge",
+            edgeId: edge.id,
+            patch
+        }
+    ];
+}
+function edgeOps(base, current) {
+    const baseEdges = new Map(base.edges.map((e)=>[
+            e.id,
+            e
+        ]));
+    const currentIds = new Set(current.edges.map((e)=>e.id));
+    const removed = base.edges.filter((e)=>!currentIds.has(e.id)).map((e)=>({
+            kind: "removeEdge",
+            edgeId: e.id
+        }));
+    const upserted = current.edges.flatMap((edge)=>{
+        const before = baseEdges.get(edge.id);
+        return before ? patchEdgeOps(before, edge) : [
+            addEdgeOp(edge)
+        ];
+    });
+    return [
+        ...removed,
+        ...upserted
+    ];
+}
+export function diffToOps(base, current) {
+    return [
+        ...nodeOps(base, current),
+        ...edgeOps(base, current)
+    ];
+}
+const NODE_FIELDS = [
+    "type",
+    "zIndex"
+];
+function nodeFieldPatches(base, current) {
+    const baseNodes = new Map(base.nodes.map((n)=>[
+            n.id,
+            n
+        ]));
+    const patches = [];
+    for (const node of current.nodes){
+        const before = baseNodes.get(node.id);
+        if (!before) continue;
+        const set = {};
+        const unset = [];
+        for (const field of NODE_FIELDS){
+            if (json(before[field]) === json(node[field])) continue;
+            if (node[field] === undefined) unset.push(field);
+            else set[field] = node[field];
+        }
+        const unsetData = Object.keys(before.data ?? {}).filter((key)=>!(key in (node.data ?? {})));
+        if (unset.length + unsetData.length + Object.keys(set).length > 0) {
+            patches.push({
+                nodeId: node.id,
+                set,
+                unset,
+                unsetData
+            });
+        }
+    }
+    return patches;
+}
+function withoutKeys(record, keys) {
+    return Object.fromEntries(Object.entries(record).filter(([key])=>!keys.includes(key)));
+}
+function applyNodeFieldPatches(nodes, patches) {
+    const byId = new Map(patches.map((patch)=>[
+            patch.nodeId,
+            patch
+        ]));
+    const seen = new Set();
+    const next = nodes.map((node)=>{
+        const patch = typeof node.id === "string" ? byId.get(node.id) : undefined;
+        if (!patch) return node;
+        seen.add(patch.nodeId);
+        const patched = withoutKeys({
+            ...node,
+            ...patch.set
+        }, patch.unset);
+        if (patch.unsetData.length === 0 || typeof node.data !== "object" || node.data === null) {
+            return patched;
+        }
+        return {
+            ...patched,
+            data: withoutKeys(node.data, patch.unsetData)
+        };
+    });
+    return seen.size === byId.size ? next : null;
+}
+function parentsFirst(nodes) {
+    const ids = new Set(nodes.map((node)=>node.id));
+    const seen = new Set();
+    const misordered = nodes.some((node)=>{
+        const early = ids.has(node.parentId) && !seen.has(node.parentId);
+        seen.add(node.id);
+        return early;
+    });
+    if (!misordered) return nodes;
+    const wrapped = nodes.map((node)=>({
+            id: String(node.id),
+            parentId: typeof node.parentId === "string" ? node.parentId : undefined,
+            node
+        }));
+    return sortParentsFirst(wrapped).map(({ node })=>node);
+}
+export function rebaseDiagram(serverDoc, lastSaved, local) {
+    const ops = diffToOps(lastSaved, local);
+    const res = tryCatch(()=>applyOps({
+            nodes: serverDoc.nodes,
+            edges: serverDoc.edges
+        }, ops));
+    if (!res.ok) return null;
+    const nodes = applyNodeFieldPatches(res.value.nodes, nodeFieldPatches(lastSaved, local));
+    return nodes ? {
+        ...res.value,
+        nodes: parentsFirst(nodes)
+    } : null;
+}

package/dist/canvas/editor/style.js

@@ -0,0 +1,174 @@
+import { PEN_COLORS, SHAPE_NODE, STROKE_NODE, TEXT_NODE } from "../pen/types.js";
+export const FONT_SIZES = [
+    16,
+    20,
+    28,
+    40
+];
+const SHAPE_WIDTHS = [
+    2,
+    3,
+    5
+];
+const PEN_WIDTHS = [
+    2,
+    4,
+    8
+];
+const HIGHLIGHTER_WIDTHS = [
+    12,
+    20,
+    32
+];
+const FRAME_WIDTHS = [
+    1,
+    2,
+    4
+];
+const CONTROLS = {
+    shape: [
+        "fill",
+        "stroke",
+        "width"
+    ],
+    text: [
+        "stroke",
+        "fontSize",
+        "fontWeight"
+    ],
+    stroke: [
+        "stroke",
+        "width"
+    ],
+    frame: [
+        "fill",
+        "stroke",
+        "width"
+    ]
+};
+function kindOf(node, frameType) {
+    if (node.type === SHAPE_NODE) return "shape";
+    if (node.type === TEXT_NODE) return "text";
+    if (node.type === STROKE_NODE) return "stroke";
+    return node.type === frameType && node.data.frame === true ? "frame" : null;
+}
+function widthsOf(kind, node) {
+    if (kind === "shape") return SHAPE_WIDTHS;
+    if (kind === "frame") return FRAME_WIDTHS;
+    return node.data.tool === "highlighter" ? HIGHLIGHTER_WIDTHS : PEN_WIDTHS;
+}
+function widthKey(kind) {
+    if (kind === "stroke") return "size";
+    return "strokeWidth";
+}
+function colorOf(value) {
+    return PEN_COLORS.find((color)=>color === value);
+}
+function levelOf(kind, node) {
+    const widths = widthsOf(kind, node);
+    const stored = Number(node.data[widthKey(kind)]);
+    if (!Number.isFinite(stored)) return kind === "frame" ? 0 : 1;
+    let nearest = 0;
+    for(let at = 1; at < widths.length; at += 1){
+        if (Math.abs(widths[at] - stored) < Math.abs(widths[nearest] - stored)) nearest = at;
+    }
+    return nearest;
+}
+const VALUES = {
+    shape: (node, color)=>({
+            fill: node.data.filled ? colorOf(node.data.fill) ?? color : "none",
+            stroke: color,
+            width: levelOf("shape", node)
+        }),
+    text: (node, color)=>({
+            stroke: color,
+            fontSize: Number(node.data.fontSize) || 20,
+            fontWeight: node.data.fontWeight === "bold" ? "bold" : "regular"
+        }),
+    stroke: (node, color)=>({
+            stroke: color,
+            width: levelOf("stroke", node)
+        }),
+    frame: (node)=>({
+            fill: colorOf(node.data.fill) ?? "none",
+            stroke: colorOf(node.data.stroke) ?? "ink",
+            width: levelOf("frame", node)
+        })
+};
+function valuesOf(kind, node) {
+    return VALUES[kind](node, colorOf(node.data.color) ?? "ink");
+}
+export function summarizeStyle(nodes, frameType) {
+    const controls = new Set();
+    const seen = new Map();
+    let widths = [];
+    for (const node of nodes){
+        const kind = kindOf(node, frameType);
+        if (!kind) continue;
+        const values = valuesOf(kind, node);
+        for (const control of CONTROLS[kind]){
+            controls.add(control);
+            const set = seen.get(control) ?? new Set();
+            set.add(values[control]);
+            seen.set(control, set);
+        }
+        if (widths.length === 0 && CONTROLS[kind].includes("width")) widths = widthsOf(kind, node);
+    }
+    if (controls.size === 0) return null;
+    const values = {};
+    for (const [control, set] of seen){
+        if (set.size === 1) Object.assign(values, {
+            [control]: [
+                ...set
+            ][0]
+        });
+    }
+    return {
+        controls,
+        values,
+        widths
+    };
+}
+function fillData(kind, fill) {
+    if (kind === "frame") return {
+        fill
+    };
+    return fill === "none" ? {
+        filled: false
+    } : {
+        filled: true,
+        fill
+    };
+}
+function textData(change) {
+    const data = {};
+    if (change.fontSize !== undefined) data.fontSize = change.fontSize;
+    if (change.fontWeight !== undefined) data.fontWeight = change.fontWeight;
+    return data;
+}
+function dataFor(kind, node, change) {
+    const data = {};
+    if (change.stroke) data[kind === "frame" ? "stroke" : "color"] = change.stroke;
+    if (change.fill !== undefined && (kind === "shape" || kind === "frame")) {
+        Object.assign(data, fillData(kind, change.fill));
+    }
+    if (change.width !== undefined && kind !== "text") {
+        data[widthKey(kind)] = widthsOf(kind, node)[change.width];
+    }
+    if (kind === "text") Object.assign(data, textData(change));
+    return data;
+}
+export function styleOps(nodes, change, frameType) {
+    const ops = [];
+    for (const node of nodes){
+        const kind = kindOf(node, frameType);
+        if (!kind) continue;
+        const data = dataFor(kind, node, change);
+        if (Object.keys(data).length > 0) ops.push({
+            kind: "patchNode",
+            nodeId: node.id,
+            data
+        });
+    }
+    return ops;
+}

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

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+export const TEXT_FIELD_KEY = Symbol("canvas-text-field");
+export function setTextField(component) {
+    setContext(TEXT_FIELD_KEY, component);
+}
+export function useTextField() {
+    return getContext(TEXT_FIELD_KEY) ?? null;
+}