@dou-ui/flow 0.0.0-stage → 0.1.0-alpha.1

package/dist/kit.js

@@ -0,0 +1,234 @@
+import { defaultNode } from "./components/default-node2.js";
+import { bezierEdge, stepEdge, straightEdge } from "./core/edge-types.js";
+import { defineFlowExtension } from "./core/extension.js";
+import { groupNode } from "./components/group-node2.js";
+import { layers, stacking } from "./layers.js";
+import { ClipboardPasteIcon, CopyIcon, CopyPlusIcon, EditIcon, FocusIcon, GroupIcon, HierarchyHorizontalIcon, MoreHorizontalIcon, ScissorsIcon, SquareDashedIcon, TrashIcon, UngroupIcon } from "@dou-ui/icons";
+// src/kit.ts
+/** Copy, paste, delete and the rest, on right click. */
+var editMenu = defineFlowExtension({
+	name: "edit-menu",
+	priority: 0,
+	contextMenu(ctx, target) {
+		const t = ctx.messages.value;
+		const editable = !ctx.readonly.value;
+		const items = [];
+		if (target.kind === "canvas") {
+			if (editable) items.push({
+				key: "paste",
+				label: t.paste,
+				icon: ClipboardPasteIcon,
+				shortcut: "mod+v",
+				run: () => void ctx.paste(target.point)
+			});
+			items.push({
+				key: "select-all",
+				label: t.selectAll,
+				icon: SquareDashedIcon,
+				shortcut: "mod+a",
+				disabled: !ctx.doc.value.nodes.length,
+				run: ctx.selectAll
+			});
+			if (editable) items.push({
+				key: "tidy",
+				label: t.tidy,
+				icon: HierarchyHorizontalIcon,
+				divided: true,
+				disabled: !ctx.doc.value.nodes.length,
+				run: () => ctx.tidy()
+			});
+			items.push({
+				key: "fit",
+				label: t.fit,
+				icon: FocusIcon,
+				divided: !editable,
+				disabled: !ctx.doc.value.nodes.length,
+				run: () => ctx.fit()
+			});
+			return items;
+		}
+		if (target.kind === "node") {
+			items.push({
+				key: "copy",
+				label: t.copy,
+				icon: CopyIcon,
+				shortcut: "mod+c",
+				run: ctx.copy
+			});
+			if (!editable) return items;
+			const selected = ctx.selection.value.nodes;
+			const locked = (selected.includes(target.node.id) ? selected : [target.node.id]).every((id) => ctx.doc.value.nodes.find((n) => n.id === id)?.locked);
+			items.push({
+				key: "cut",
+				label: t.cut,
+				icon: ScissorsIcon,
+				shortcut: "mod+x",
+				disabled: locked,
+				run: ctx.cut
+			}, {
+				key: "duplicate",
+				label: t.duplicate,
+				icon: CopyPlusIcon,
+				shortcut: "mod+d",
+				run: ctx.duplicate
+			}, {
+				key: "delete",
+				label: t.delete,
+				icon: TrashIcon,
+				shortcut: "delete",
+				tone: "danger",
+				divided: true,
+				disabled: locked,
+				run: ctx.deleteSelection
+			});
+			return items;
+		}
+		if (!editable) return items;
+		const edge = target.edge;
+		items.push({
+			key: "edit-label",
+			label: t.editLabel,
+			icon: EditIcon,
+			shortcut: "enter",
+			run: () => ctx.editLabel(edge.id)
+		}, {
+			key: "delete",
+			label: t.delete,
+			icon: TrashIcon,
+			shortcut: "delete",
+			tone: "danger",
+			divided: true,
+			run: ctx.deleteSelection
+		});
+		return items;
+	}
+});
+/** Duplicate, delete and the node menu, over the selected nodes; delete over selected edges. */
+var editToolbar = defineFlowExtension({
+	name: "edit-toolbar",
+	priority: 0,
+	edgeToolbarItems(ctx) {
+		return [{
+			key: "delete",
+			label: ctx.messages.value.delete,
+			icon: TrashIcon,
+			shortcut: "delete",
+			run: ctx.deleteSelection
+		}];
+	},
+	toolbarItems(ctx, nodes) {
+		const t = ctx.messages.value;
+		const first = nodes[0];
+		const more = ctx.menuItems({
+			kind: "node",
+			node: first,
+			point: {
+				x: first.x,
+				y: first.y
+			}
+		});
+		return [
+			{
+				key: "duplicate",
+				label: t.duplicate,
+				icon: CopyPlusIcon,
+				shortcut: "mod+d",
+				run: ctx.duplicate
+			},
+			{
+				key: "delete",
+				label: t.delete,
+				icon: TrashIcon,
+				shortcut: "delete",
+				disabled: nodes.every((node) => node.locked),
+				run: ctx.deleteSelection
+			},
+			...more.length ? [{
+				key: "more",
+				label: t.more,
+				icon: MoreHorizontalIcon,
+				children: more
+			}] : []
+		];
+	}
+});
+/** Group nodes: the type, Ctrl / ⌘ + G to group the selection, with Shift to ungroup. */
+var groups = defineFlowExtension({
+	name: "groups",
+	priority: 0,
+	nodeTypes: [groupNode],
+	keymap: (ctx) => ({
+		"mod+g": () => ctx.groupNodes() !== null,
+		"mod+shift+g": () => {
+			const ids = ctx.selection.value.nodes;
+			const containers = ids.filter((id) => {
+				const node = ctx.doc.value.nodes.find((n) => n.id === id);
+				return node && ctx.isContainer(node);
+			});
+			if (containers.length) return containers.filter((id) => ctx.ungroupNode(id)).length > 0;
+			return ctx.leaveGroup(ids) > 0;
+		}
+	}),
+	contextMenu(ctx, target) {
+		if (target.kind !== "node" || ctx.readonly.value) return [];
+		const t = ctx.messages.value;
+		const tree = ctx.tree.value;
+		const parents = new Set(tree.topmost(ctx.selection.value.nodes).map((id) => tree.parentOf(id)));
+		const items = [{
+			key: "group",
+			label: t.makeGroup,
+			icon: GroupIcon,
+			shortcut: "mod+g",
+			disabled: parents.size > 1,
+			run: () => void ctx.groupNodes()
+		}];
+		if (ctx.isContainer(target.node)) items.push({
+			key: "ungroup",
+			label: t.ungroup,
+			icon: UngroupIcon,
+			shortcut: "mod+shift+g",
+			run: () => void ctx.ungroupNode(target.node.id)
+		});
+		if (tree.parentOf(target.node.id)) items.push({
+			key: "leave-group",
+			label: t.leaveGroup,
+			icon: UngroupIcon,
+			shortcut: ctx.isContainer(target.node) ? void 0 : "mod+shift+g",
+			run: () => void ctx.leaveGroup()
+		});
+		return items;
+	}
+});
+/**
+* The editor's built-in parts as extensions: the default node type, the
+* `bezier`, `step` and `straight` edge types, group nodes, stacking order,
+* the context menu and the toolbar over selected nodes. Pass it along with
+* your own extensions, e.g. `[flowKit(), aiNodes]`; without `extensions`
+* the editor uses it alone.
+*/
+function flowKit(options = {}) {
+	const { menu = true, toolbar = true, group = true, layers: layered = true } = options;
+	const kit = [
+		defineFlowExtension({
+			name: "default-node",
+			nodeTypes: [defaultNode]
+		}),
+		defineFlowExtension({
+			name: "default-edges",
+			edgeTypes: [
+				bezierEdge,
+				stepEdge,
+				straightEdge
+			]
+		}),
+		stacking
+	];
+	if (menu) kit.push(editMenu);
+	if (toolbar) kit.push(editToolbar);
+	if (group) kit.push(groups);
+	if (layered) kit.push(layers);
+	return kit;
+}
+export { flowKit };
+
+//# sourceMappingURL=kit.js.map

package/dist/kit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kit.js","names":[],"sources":["../src/kit.ts"],"sourcesContent":["import type { ContextMenuItem } from 'dou-ui'\nimport {\n  ClipboardPasteIcon,\n  CopyIcon,\n  CopyPlusIcon,\n  EditIcon,\n  GroupIcon,\n  FocusIcon,\n  HierarchyHorizontalIcon,\n  MoreHorizontalIcon,\n  ScissorsIcon,\n  SquareDashedIcon,\n  TrashIcon,\n  UngroupIcon,\n} from '@dou-ui/icons'\nimport { defaultNode } from './components/default-node'\nimport { groupNode } from './components/group-node'\nimport { bezierEdge, stepEdge, straightEdge } from './core/edge-types'\nimport { defineFlowExtension, type FlowExtension } from './core/extension'\nimport { layers, stacking } from './layers'\n\nexport interface FlowKitOptions {\n  /** The built-in context menu items: copy, paste, delete and so on. */\n  menu?: boolean\n  /** The toolbar over the selected nodes: duplicate, delete and more. */\n  toolbar?: boolean\n  /** The `group` node type, with its menu items and `mod+g` / `mod+shift+g`. */\n  group?: boolean\n  /**\n   * Moving nodes up and down the stack: menu items and `mod+]` / `mod+[`,\n   * with Shift for the very top or bottom.\n   */\n  layers?: boolean\n}\n\n/** Copy, paste, delete and the rest, on right click. */\nconst editMenu = defineFlowExtension({\n  name: 'edit-menu',\n  // Last, so extensions' own items come first.\n  priority: 0,\n  contextMenu(ctx, target) {\n    const t = ctx.messages.value\n    const editable = !ctx.readonly.value\n    const items: ContextMenuItem[] = []\n    if (target.kind === 'canvas') {\n      if (editable)\n        items.push({\n          key: 'paste',\n          label: t.paste,\n          icon: ClipboardPasteIcon,\n          shortcut: 'mod+v',\n          run: () => void ctx.paste(target.point),\n        })\n      items.push({\n        key: 'select-all',\n        label: t.selectAll,\n        icon: SquareDashedIcon,\n        shortcut: 'mod+a',\n        disabled: !ctx.doc.value.nodes.length,\n        run: ctx.selectAll,\n      })\n      if (editable)\n        items.push({\n          key: 'tidy',\n          label: t.tidy,\n          icon: HierarchyHorizontalIcon,\n          divided: true,\n          disabled: !ctx.doc.value.nodes.length,\n          run: () => ctx.tidy(),\n        })\n      items.push({\n        key: 'fit',\n        label: t.fit,\n        icon: FocusIcon,\n        divided: !editable,\n        disabled: !ctx.doc.value.nodes.length,\n        run: () => ctx.fit(),\n      })\n      return items\n    }\n    if (target.kind === 'node') {\n      items.push({ key: 'copy', label: t.copy, icon: CopyIcon, shortcut: 'mod+c', run: ctx.copy })\n      if (!editable) return items\n      // The menu acts on the selection, which the node just joined if it wasn't in it.\n      const selected = ctx.selection.value.nodes\n      const ids = selected.includes(target.node.id) ? selected : [target.node.id]\n      const locked = ids.every((id) => ctx.doc.value.nodes.find((n) => n.id === id)?.locked)\n      items.push(\n        {\n          key: 'cut',\n          label: t.cut,\n          icon: ScissorsIcon,\n          shortcut: 'mod+x',\n          disabled: locked,\n          run: ctx.cut,\n        },\n        {\n          key: 'duplicate',\n          label: t.duplicate,\n          icon: CopyPlusIcon,\n          shortcut: 'mod+d',\n          run: ctx.duplicate,\n        },\n        {\n          key: 'delete',\n          label: t.delete,\n          icon: TrashIcon,\n          shortcut: 'delete',\n          tone: 'danger',\n          divided: true,\n          disabled: locked,\n          run: ctx.deleteSelection,\n        },\n      )\n      return items\n    }\n    if (!editable) return items\n    const edge = target.edge\n    items.push(\n      {\n        key: 'edit-label',\n        label: t.editLabel,\n        icon: EditIcon,\n        shortcut: 'enter',\n        run: () => ctx.editLabel(edge.id),\n      },\n      {\n        key: 'delete',\n        label: t.delete,\n        icon: TrashIcon,\n        shortcut: 'delete',\n        tone: 'danger',\n        divided: true,\n        run: ctx.deleteSelection,\n      },\n    )\n    return items\n  },\n})\n\n/** Duplicate, delete and the node menu, over the selected nodes; delete over selected edges. */\nconst editToolbar = defineFlowExtension({\n  name: 'edit-toolbar',\n  priority: 0,\n  edgeToolbarItems(ctx) {\n    const t = ctx.messages.value\n    return [\n      {\n        key: 'delete',\n        label: t.delete,\n        icon: TrashIcon,\n        shortcut: 'delete',\n        run: ctx.deleteSelection,\n      },\n    ]\n  },\n  toolbarItems(ctx, nodes) {\n    const t = ctx.messages.value\n    // the node menu, as a right click on the first selected node opens it\n    const first = nodes[0]!\n    const more = ctx.menuItems({ kind: 'node', node: first, point: { x: first.x, y: first.y } })\n    return [\n      {\n        key: 'duplicate',\n        label: t.duplicate,\n        icon: CopyPlusIcon,\n        shortcut: 'mod+d',\n        run: ctx.duplicate,\n      },\n      {\n        key: 'delete',\n        label: t.delete,\n        icon: TrashIcon,\n        shortcut: 'delete',\n        disabled: nodes.every((node) => node.locked),\n        run: ctx.deleteSelection,\n      },\n      ...(more.length\n        ? [{ key: 'more', label: t.more, icon: MoreHorizontalIcon, children: more }]\n        : []),\n    ]\n  },\n})\n\n/** Group nodes: the type, Ctrl / ⌘ + G to group the selection, with Shift to ungroup. */\nconst groups = defineFlowExtension({\n  name: 'groups',\n  priority: 0,\n  nodeTypes: [groupNode],\n  keymap: (ctx) => ({\n    'mod+g': () => ctx.groupNodes() !== null,\n    // A group goes away; a node inside one comes out of it.\n    'mod+shift+g': () => {\n      const ids = ctx.selection.value.nodes\n      const containers = ids.filter((id) => {\n        const node = ctx.doc.value.nodes.find((n) => n.id === id)\n        return node && ctx.isContainer(node)\n      })\n      if (containers.length) return containers.filter((id) => ctx.ungroupNode(id)).length > 0\n      return ctx.leaveGroup(ids) > 0\n    },\n  }),\n  contextMenu(ctx, target) {\n    if (target.kind !== 'node' || ctx.readonly.value) return []\n    const t = ctx.messages.value\n    const tree = ctx.tree.value\n    const parents = new Set(tree.topmost(ctx.selection.value.nodes).map((id) => tree.parentOf(id)))\n    const items: ContextMenuItem[] = [\n      {\n        key: 'group',\n        label: t.makeGroup,\n        icon: GroupIcon,\n        shortcut: 'mod+g',\n        // Nodes from different groups can't share a new frame.\n        disabled: parents.size > 1,\n        run: () => void ctx.groupNodes(),\n      },\n    ]\n    if (ctx.isContainer(target.node))\n      items.push({\n        key: 'ungroup',\n        label: t.ungroup,\n        icon: UngroupIcon,\n        shortcut: 'mod+shift+g',\n        run: () => void ctx.ungroupNode(target.node.id),\n      })\n    // A group inside another can be ungrouped or taken out; the shortcut ungroups.\n    if (tree.parentOf(target.node.id))\n      items.push({\n        key: 'leave-group',\n        label: t.leaveGroup,\n        icon: UngroupIcon,\n        shortcut: ctx.isContainer(target.node) ? undefined : 'mod+shift+g',\n        run: () => void ctx.leaveGroup(),\n      })\n    return items\n  },\n})\n\n/**\n * The editor's built-in parts as extensions: the default node type, the\n * `bezier`, `step` and `straight` edge types, group nodes, stacking order,\n * the context menu and the toolbar over selected nodes. Pass it along with\n * your own extensions, e.g. `[flowKit(), aiNodes]`; without `extensions`\n * the editor uses it alone.\n */\nexport function flowKit(options: FlowKitOptions = {}): FlowExtension[] {\n  const { menu = true, toolbar = true, group = true, layers: layered = true } = options\n  const kit = [\n    defineFlowExtension({ name: 'default-node', nodeTypes: [defaultNode] }),\n    defineFlowExtension({ name: 'default-edges', edgeTypes: [bezierEdge, stepEdge, straightEdge] }),\n    stacking,\n  ]\n  if (menu) kit.push(editMenu)\n  if (toolbar) kit.push(editToolbar)\n  if (group) kit.push(groups)\n  if (layered) kit.push(layers)\n  return kit\n}\n"],"mappings":"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"}

package/dist/layers.js

@@ -0,0 +1,150 @@
+import { intersects } from "./core/geometry.js";
+import { defineFlowExtension } from "./core/extension.js";
+import { ChevronDownIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsUpIcon } from "@dou-ui/icons";
+// src/layers.ts
+/** The nodes that stack, bottom first: what the editor draws in that order. */
+function stack(ctx) {
+	const nodes = ctx.doc.value.nodes.filter((node) => !ctx.isContainer(node));
+	const index = new Map(nodes.map((node, i) => [node.id, i]));
+	return nodes.sort((a, b) => (a.z ?? 0) - (b.z ?? 0) || index.get(a.id) - index.get(b.id));
+}
+/**
+* The selected nodes moved in the stack: to the top or bottom of everything,
+* or one step past the nearest node each overlaps, so the step can be seen.
+* Returns the `z` of every node whose place changed, numbering the stack
+* from 0 at the bottom; nothing when nothing would change.
+*/
+function layerChanges(ctx, move) {
+	const selected = new Set(ctx.selection.value.nodes);
+	const order = stack(ctx);
+	const moving = order.filter((node) => selected.has(node.id));
+	const others = order.filter((node) => !selected.has(node.id));
+	let next;
+	if (move === "front") next = [...others, ...moving];
+	else if (move === "back") next = [...moving, ...others];
+	else {
+		const up = move === "forward";
+		next = [...order];
+		const rect = (node) => ctx.getNodeRect(node.id);
+		for (let k = 0; k < moving.length; k++) {
+			const node = moving[up ? moving.length - 1 - k : k];
+			const at = next.indexOf(node);
+			const box = rect(node);
+			let past;
+			for (let i = up ? at + 1 : at - 1; i >= 0 && i < next.length; i += up ? 1 : -1) {
+				const other = next[i];
+				const r = rect(other);
+				if (!selected.has(other.id) && box && r && intersects(box, r)) {
+					past = other;
+					break;
+				}
+			}
+			if (!past) continue;
+			next.splice(at, 1);
+			next.splice(next.indexOf(past) + (up ? 1 : 0), 0, node);
+		}
+	}
+	const out = /* @__PURE__ */ new Map();
+	if (next.every((node, i) => node === order[i])) return out;
+	next.forEach((node, i) => {
+		if ((node.z ?? 0) !== i) out.set(node.id, i);
+	});
+	return out;
+}
+/**
+* Moves the selected nodes in the stack, as one undo step, and says so to
+* screen readers. Returns `false` when nothing moved, e.g. when they already
+* are at the top; that is said too, unless `announce` is `false`.
+*/
+function moveLayer(ctx, move, options = {}) {
+	const t = ctx.messages.value.layers;
+	const changes = layerChanges(ctx, move);
+	const say = (text) => options.announce !== false && ctx.announce(text);
+	if (!changes.size) {
+		if (ctx.selection.value.nodes.length) say({
+			front: t.top,
+			back: t.bottom,
+			forward: atEnd(ctx, "forward") ? t.top : t.noneAbove,
+			backward: atEnd(ctx, "backward") ? t.bottom : t.noneBelow
+		}[move]);
+		return false;
+	}
+	ctx.transact((tr) => {
+		for (const [id, z] of changes) tr.updateNode(id, { z });
+	});
+	say(t[move]);
+	return true;
+}
+/** Whether the selected nodes already are at the top (or bottom) of the whole stack. */
+function atEnd(ctx, way) {
+	return !layerChanges(ctx, way === "forward" ? "front" : "back").size;
+}
+var LAYER_KEYS = [
+	[
+		"front",
+		"mod+shift+]",
+		ChevronsUpIcon
+	],
+	[
+		"forward",
+		"mod+]",
+		ChevronUpIcon
+	],
+	[
+		"backward",
+		"mod+[",
+		ChevronDownIcon
+	],
+	[
+		"back",
+		"mod+shift+[",
+		ChevronsDownIcon
+	]
+];
+/**
+* Stacking order: what is added lands on top, also once nodes have been
+* moved in the stack.
+*/
+var stacking = defineFlowExtension({
+	name: "stacking",
+	priority: 0,
+	transaction(tr) {
+		const ids = /* @__PURE__ */ new Set();
+		for (const step of tr.steps) if (step.type === "addNode" && step.node.z === void 0) ids.add(step.node.id);
+		if (!ids.size) return;
+		let top = 0;
+		for (const node of tr.doc.nodes) if (!ids.has(node.id)) top = Math.max(top, node.z ?? 0);
+		if (!top) return;
+		for (const id of ids) tr.updateNode(id, { z: ++top });
+	}
+});
+/** Moving nodes up and down the stack from the node menu and with Ctrl / ⌘ + [ and ]. */
+var layers = defineFlowExtension({
+	name: "layers",
+	priority: 0,
+	contextMenu(ctx, target) {
+		if (target.kind !== "node" || ctx.readonly.value) return [];
+		const t = ctx.messages.value.layers;
+		return LAYER_KEYS.map(([move, shortcut, icon], i) => ({
+			key: `layer-${move}`,
+			label: t[move],
+			icon,
+			shortcut,
+			divided: i === 0,
+			disabled: !layerChanges(ctx, move).size,
+			run: () => void moveLayer(ctx, move)
+		}));
+	},
+	keymap(ctx) {
+		const keys = {};
+		const order = [...LAYER_KEYS.filter(([, key]) => key.includes("shift")), ...LAYER_KEYS];
+		for (const [move, key] of order) if (!keys[key]) keys[key] = () => {
+			if (ctx.readonly.value || !ctx.selection.value.nodes.length) return false;
+			moveLayer(ctx, move);
+		};
+		return keys;
+	}
+});
+export { layerChanges, layers, moveLayer, stacking };
+
+//# sourceMappingURL=layers.js.map

package/dist/layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.js","names":[],"sources":["../src/layers.ts"],"sourcesContent":["import type { ContextMenuItem } from 'dou-ui'\nimport { ChevronDownIcon, ChevronsDownIcon, ChevronsUpIcon, ChevronUpIcon } from '@dou-ui/icons'\nimport type { FlowEditorContext } from './context'\nimport { defineFlowExtension } from './core/extension'\nimport { intersects } from './core/geometry'\nimport type { FlowNode } from './core/model'\n\nexport type LayerMove = 'front' | 'forward' | 'backward' | 'back'\n\n/** The nodes that stack, bottom first: what the editor draws in that order. */\nfunction stack(ctx: FlowEditorContext): FlowNode[] {\n  const nodes = ctx.doc.value.nodes.filter((node) => !ctx.isContainer(node))\n  const index = new Map(nodes.map((node, i) => [node.id, i]))\n  // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh array\n  return nodes.sort((a, b) => (a.z ?? 0) - (b.z ?? 0) || index.get(a.id)! - index.get(b.id)!)\n}\n\n/**\n * The selected nodes moved in the stack: to the top or bottom of everything,\n * or one step past the nearest node each overlaps, so the step can be seen.\n * Returns the `z` of every node whose place changed, numbering the stack\n * from 0 at the bottom; nothing when nothing would change.\n */\nexport function layerChanges(ctx: FlowEditorContext, move: LayerMove): Map<string, number> {\n  const selected = new Set(ctx.selection.value.nodes)\n  const order = stack(ctx)\n  const moving = order.filter((node) => selected.has(node.id))\n  const others = order.filter((node) => !selected.has(node.id))\n  let next: FlowNode[]\n  if (move === 'front') next = [...others, ...moving]\n  else if (move === 'back') next = [...moving, ...others]\n  else {\n    const up = move === 'forward'\n    next = [...order]\n    const rect = (node: FlowNode) => ctx.getNodeRect(node.id)\n    // from the end it moves towards, so the moved nodes don't pass each other\n    for (let k = 0; k < moving.length; k++) {\n      const node = moving[up ? moving.length - 1 - k : k]!\n      const at = next.indexOf(node)\n      const box = rect(node)\n      // the nearest unselected node it overlaps, walking the way it moves\n      let past: FlowNode | undefined\n      for (let i = up ? at + 1 : at - 1; i >= 0 && i < next.length; i += up ? 1 : -1) {\n        const other = next[i]!\n        const r = rect(other)\n        if (!selected.has(other.id) && box && r && intersects(box, r)) {\n          past = other\n          break\n        }\n      }\n      if (!past) continue\n      next.splice(at, 1)\n      next.splice(next.indexOf(past) + (up ? 1 : 0), 0, node)\n    }\n  }\n  const out = new Map<string, number>()\n  if (next.every((node, i) => node === order[i])) return out\n  next.forEach((node, i) => {\n    if ((node.z ?? 0) !== i) out.set(node.id, i)\n  })\n  return out\n}\n\n/**\n * Moves the selected nodes in the stack, as one undo step, and says so to\n * screen readers. Returns `false` when nothing moved, e.g. when they already\n * are at the top; that is said too, unless `announce` is `false`.\n */\nexport function moveLayer(\n  ctx: FlowEditorContext,\n  move: LayerMove,\n  options: { announce?: boolean } = {},\n): boolean {\n  const t = ctx.messages.value.layers\n  const changes = layerChanges(ctx, move)\n  const say = (text: string) => options.announce !== false && ctx.announce(text)\n  if (!changes.size) {\n    if (ctx.selection.value.nodes.length)\n      say(\n        {\n          front: t.top,\n          back: t.bottom,\n          forward: atEnd(ctx, 'forward') ? t.top : t.noneAbove,\n          backward: atEnd(ctx, 'backward') ? t.bottom : t.noneBelow,\n        }[move],\n      )\n    return false\n  }\n  ctx.transact((tr) => {\n    for (const [id, z] of changes) tr.updateNode(id, { z })\n  })\n  say(t[move])\n  return true\n}\n\n/** Whether the selected nodes already are at the top (or bottom) of the whole stack. */\nfunction atEnd(ctx: FlowEditorContext, way: 'forward' | 'backward') {\n  return !layerChanges(ctx, way === 'forward' ? 'front' : 'back').size\n}\n\nconst LAYER_KEYS: [LayerMove, string, typeof ChevronsUpIcon][] = [\n  ['front', 'mod+shift+]', ChevronsUpIcon],\n  ['forward', 'mod+]', ChevronUpIcon],\n  ['backward', 'mod+[', ChevronDownIcon],\n  ['back', 'mod+shift+[', ChevronsDownIcon],\n]\n\n/**\n * Stacking order: what is added lands on top, also once nodes have been\n * moved in the stack.\n */\nexport const stacking = defineFlowExtension({\n  name: 'stacking',\n  priority: 0,\n  transaction(tr) {\n    const ids = new Set<string>()\n    for (const step of tr.steps)\n      if (step.type === 'addNode' && step.node.z === undefined) ids.add(step.node.id)\n    if (!ids.size) return\n    let top = 0\n    for (const node of tr.doc.nodes) if (!ids.has(node.id)) top = Math.max(top, node.z ?? 0)\n    if (!top) return\n    for (const id of ids) tr.updateNode(id, { z: ++top })\n  },\n})\n\n/** Moving nodes up and down the stack from the node menu and with Ctrl / ⌘ + [ and ]. */\nexport const layers = defineFlowExtension({\n  name: 'layers',\n  priority: 0,\n  contextMenu(ctx, target) {\n    if (target.kind !== 'node' || ctx.readonly.value) return []\n    const t = ctx.messages.value.layers\n    return LAYER_KEYS.map(([move, shortcut, icon], i): ContextMenuItem => ({\n      key: `layer-${move}`,\n      label: t[move],\n      icon,\n      shortcut,\n      divided: i === 0,\n      disabled: !layerChanges(ctx, move).size,\n      run: () => void moveLayer(ctx, move),\n    }))\n  },\n  keymap(ctx) {\n    const keys: Record<string, () => boolean | void> = {}\n    // with Shift first: without it, `mod+[` would match either\n    const order = [...LAYER_KEYS.filter(([, key]) => key.includes('shift')), ...LAYER_KEYS]\n    for (const [move, key] of order)\n      if (!keys[key])\n        keys[key] = () => {\n          if (ctx.readonly.value || !ctx.selection.value.nodes.length) return false\n          moveLayer(ctx, move)\n        }\n    return keys\n  },\n})\n"],"mappings":"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"}