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

package/dist/core/geometry.js

@@ -0,0 +1,232 @@
+// src/core/geometry.ts
+function boundsOf(rects) {
+	if (!rects.length) return null;
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const rect of rects) {
+		left = Math.min(left, rect.x);
+		top = Math.min(top, rect.y);
+		right = Math.max(right, rect.x + rect.width);
+		bottom = Math.max(bottom, rect.y + rect.height);
+	}
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function intersects(a, b) {
+	return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+}
+/** The rectangle spanned by two corners, in any order. */
+function rectFrom(a, b) {
+	return {
+		x: Math.min(a.x, b.x),
+		y: Math.min(a.y, b.y),
+		width: Math.abs(a.x - b.x),
+		height: Math.abs(a.y - b.y)
+	};
+}
+var snapTo = (value, step) => step > 0 ? Math.round(value / step) * step : value;
+var linesX = (r) => [
+	r.x,
+	r.x + r.width / 2,
+	r.x + r.width
+];
+var linesY = (r) => [
+	r.y,
+	r.y + r.height / 2,
+	r.y + r.height
+];
+/**
+* Lines the moving box up, on each axis separately, when it is within
+* `threshold`: first a port with the port it is connected to, then the
+* nearest edge or centre of another box. Without a match on an axis, the
+* box's top left corner snaps to `grid` instead.
+*/
+function snapBox(box, others, { threshold, grid, links = [] }) {
+	const best = {
+		x: null,
+		y: null
+	};
+	const consider = (axis, d, at, link) => {
+		const current = best[axis];
+		if (Math.abs(d) > threshold) return;
+		if (current?.link && !link) return;
+		if (!current || link && !current.link || Math.abs(d) < Math.abs(current.d)) best[axis] = {
+			d,
+			at,
+			link
+		};
+	};
+	for (const link of links) consider(link.axis, link.to[link.axis] - link.from[link.axis], link.to[link.axis], link);
+	for (const other of others) {
+		for (const from of linesX(box)) for (const to of linesX(other)) consider("x", to - from, to);
+		for (const from of linesY(box)) for (const to of linesY(other)) consider("y", to - from, to);
+	}
+	const dx = best.x ? best.x.d : snapTo(box.x, grid) - box.x;
+	const dy = best.y ? best.y.d : snapTo(box.y, grid) - box.y;
+	const moved = {
+		...box,
+		x: box.x + dx,
+		y: box.y + dy
+	};
+	const guides = [];
+	for (const axis of ["x", "y"]) {
+		const match = best[axis];
+		if (!match) continue;
+		const across = axis === "x" ? "y" : "x";
+		if (match.link) {
+			const a = match.link.from[across] + (axis === "x" ? dy : dx);
+			const b = match.link.to[across];
+			guides.push({
+				axis,
+				at: match.at,
+				from: Math.min(a, b),
+				to: Math.max(a, b)
+			});
+			continue;
+		}
+		const lines = axis === "x" ? linesX : linesY;
+		const span = [moved, ...others.filter((r) => lines(r).some((v) => Math.abs(v - match.at) < .5))];
+		const start = (r) => axis === "x" ? r.y : r.x;
+		const length = (r) => axis === "x" ? r.height : r.width;
+		guides.push({
+			axis,
+			at: match.at,
+			from: Math.min(...span.map(start)),
+			to: Math.max(...span.map((r) => start(r) + length(r)))
+		});
+	}
+	return {
+		dx,
+		dy,
+		guides
+	};
+}
+/** Turns `point` by `degrees` around `centre`. */
+function turn(point, centre, degrees) {
+	if (!degrees) return point;
+	const a = degrees * Math.PI / 180;
+	const dx = point.x - centre.x;
+	const dy = point.y - centre.y;
+	return {
+		x: centre.x + dx * Math.cos(a) - dy * Math.sin(a),
+		y: centre.y + dx * Math.sin(a) + dy * Math.cos(a)
+	};
+}
+/** The box around `rect` turned by `degrees` about its centre. */
+function turnedBox(rect, degrees) {
+	if (!degrees) return rect;
+	const centre = {
+		x: rect.x + rect.width / 2,
+		y: rect.y + rect.height / 2
+	};
+	return boundsOf([
+		{
+			x: rect.x,
+			y: rect.y
+		},
+		{
+			x: rect.x + rect.width,
+			y: rect.y
+		},
+		{
+			x: rect.x,
+			y: rect.y + rect.height
+		},
+		{
+			x: rect.x + rect.width,
+			y: rect.y + rect.height
+		}
+	].map((corner) => turn(corner, centre, degrees)).map((p) => ({
+		...p,
+		width: 0,
+		height: 0
+	})));
+}
+/** Whether `box` and `rect` turned by `degrees` about its centre overlap. */
+function intersectsTurned(box, rect, degrees) {
+	if (!degrees) return intersects(box, rect);
+	if (!intersects(box, turnedBox(rect, degrees))) return false;
+	const centre = {
+		x: rect.x + rect.width / 2,
+		y: rect.y + rect.height / 2
+	};
+	const corners = [
+		{
+			x: box.x,
+			y: box.y
+		},
+		{
+			x: box.x + box.width,
+			y: box.y
+		},
+		{
+			x: box.x,
+			y: box.y + box.height
+		},
+		{
+			x: box.x + box.width,
+			y: box.y + box.height
+		}
+	].map((corner) => turn(corner, centre, -degrees));
+	const xs = corners.map((p) => p.x);
+	const ys = corners.map((p) => p.y);
+	return Math.min(...xs) < rect.x + rect.width && Math.max(...xs) > rect.x && Math.min(...ys) < rect.y + rect.height && Math.max(...ys) > rect.y;
+}
+/** The part of the canvas a viewport shows on a screen of `size`. */
+function viewOf(view, size) {
+	return {
+		x: -view.x / view.zoom,
+		y: -view.y / view.zoom,
+		width: size.width / view.zoom,
+		height: size.height / view.zoom
+	};
+}
+/** Whether `inner` lies in `outer`, give or take rounding. */
+function within(inner, outer) {
+	const e = 1e-6 * Math.max(1, outer.width, outer.height);
+	return inner.x >= outer.x - e && inner.y >= outer.y - e && inner.x + inner.width <= outer.x + outer.width + e && inner.y + inner.height <= outer.y + outer.height + e;
+}
+/**
+* Keeps a pan within reach of the nodes: the view may go as far as having
+* the nodes just leave it on the opposite side, a screen of room to draw in,
+* and no further, so the canvas never runs off to coordinates the browser
+* can't draw (it clamps lengths at about 3.3e7 px, and the layer and the
+* nodes stop lining up long before). With no nodes, the origin is kept in
+* view. A view already outside, e.g. set through `v-model:viewport` or left
+* there when nodes were removed, isn't pulled back: it can only move closer.
+* Zooming in is left as it is: it stays inside the view, so it never goes
+* further out.
+*/
+function clampPan(next, current, content, size) {
+	if (!size.width || !size.height) return next;
+	if (next.zoom > current.zoom && within(viewOf(next, size), viewOf(current, size))) return next;
+	const area = content ?? {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	const before = {
+		x: size.width / 2 - (size.width / 2 - current.x) / current.zoom * next.zoom,
+		y: size.height / 2 - (size.height / 2 - current.y) / current.zoom * next.zoom
+	};
+	const axis = (value, now, start, length, screen) => {
+		const lo = 0 - (start + length) * next.zoom;
+		const hi = screen - start * next.zoom;
+		return Math.min(Math.max(value, Math.min(lo, now)), Math.max(hi, now));
+	};
+	return {
+		x: axis(next.x, before.x, area.x, area.width, size.width),
+		y: axis(next.y, before.y, area.y, area.height, size.height),
+		zoom: next.zoom
+	};
+}
+export { boundsOf, clampPan, intersects, intersectsTurned, rectFrom, snapBox, snapTo, turn, turnedBox };
+
+//# sourceMappingURL=geometry.js.map

package/dist/core/geometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"geometry.js","names":[],"sources":["../../src/core/geometry.ts"],"sourcesContent":["import type { FlowViewport, Point, Rect } from './model'\n\nexport function boundsOf(rects: readonly Rect[]): Rect | null {\n  if (!rects.length) return null\n  let left = Infinity\n  let top = Infinity\n  let right = -Infinity\n  let bottom = -Infinity\n  for (const rect of rects) {\n    left = Math.min(left, rect.x)\n    top = Math.min(top, rect.y)\n    right = Math.max(right, rect.x + rect.width)\n    bottom = Math.max(bottom, rect.y + rect.height)\n  }\n  return { x: left, y: top, width: right - left, height: bottom - top }\n}\n\nexport function intersects(a: Rect, b: Rect) {\n  return a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height\n}\n\n/** The rectangle spanned by two corners, in any order. */\nexport function rectFrom(a: Point, b: Point): Rect {\n  return {\n    x: Math.min(a.x, b.x),\n    y: Math.min(a.y, b.y),\n    width: Math.abs(a.x - b.x),\n    height: Math.abs(a.y - b.y),\n  }\n}\n\nexport const snapTo = (value: number, step: number) =>\n  step > 0 ? Math.round(value / step) * step : value\n\n// Alignment guides ------------------------------------------------------------\n\nexport interface Guide {\n  axis: 'x' | 'y'\n  /** The canvas coordinate of the line. */\n  at: number\n  /** Where the line starts and ends along the other axis. */\n  from: number\n  to: number\n}\n\nexport interface SnapResult {\n  /** How far to shift the moving box so it lines up. */\n  dx: number\n  dy: number\n  guides: Guide[]\n}\n\nconst linesX = (r: Rect) => [r.x, r.x + r.width / 2, r.x + r.width]\nconst linesY = (r: Rect) => [r.y, r.y + r.height / 2, r.y + r.height]\n\n/**\n * A port on a moving node and the port it is connected to. Lining them up\n * makes the edge between them a straight line.\n */\nexport interface SnapLink {\n  /** Where the moving port is before the snap. */\n  from: Point\n  to: Point\n  /** `y` levels ports on the left or right; `x` ports on the top or bottom. */\n  axis: 'x' | 'y'\n}\n\n/**\n * Lines the moving box up, on each axis separately, when it is within\n * `threshold`: first a port with the port it is connected to, then the\n * nearest edge or centre of another box. Without a match on an axis, the\n * box's top left corner snaps to `grid` instead.\n */\nexport function snapBox(\n  box: Rect,\n  others: readonly Rect[],\n  { threshold, grid, links = [] }: { threshold: number; grid: number; links?: readonly SnapLink[] },\n): SnapResult {\n  type Match = { d: number; at: number; link?: SnapLink }\n  const best: Record<'x' | 'y', Match | null> = { x: null, y: null }\n  const consider = (axis: 'x' | 'y', d: number, at: number, link?: SnapLink) => {\n    const current = best[axis]\n    if (Math.abs(d) > threshold) return\n    // A port lined up with its partner wins over boxes lining up.\n    if (current?.link && !link) return\n    if (!current || (link && !current.link) || Math.abs(d) < Math.abs(current.d))\n      best[axis] = { d, at, link }\n  }\n  for (const link of links)\n    consider(link.axis, link.to[link.axis] - link.from[link.axis], link.to[link.axis], link)\n  for (const other of others) {\n    for (const from of linesX(box)) for (const to of linesX(other)) consider('x', to - from, to)\n    for (const from of linesY(box)) for (const to of linesY(other)) consider('y', to - from, to)\n  }\n  const dx = best.x ? best.x.d : snapTo(box.x, grid) - box.x\n  const dy = best.y ? best.y.d : snapTo(box.y, grid) - box.y\n  const moved = { ...box, x: box.x + dx, y: box.y + dy }\n\n  const guides: Guide[] = []\n  for (const axis of ['x', 'y'] as const) {\n    const match = best[axis]\n    if (!match) continue\n    const across = axis === 'x' ? 'y' : 'x'\n    if (match.link) {\n      // From the moved port to its partner.\n      const a = match.link.from[across] + (axis === 'x' ? dy : dx)\n      const b = match.link.to[across]\n      guides.push({ axis, at: match.at, from: Math.min(a, b), to: Math.max(a, b) })\n      continue\n    }\n    // Spanning the moved box and every box it lines up with.\n    const lines = axis === 'x' ? linesX : linesY\n    const span = [\n      moved,\n      ...others.filter((r) => lines(r).some((v) => Math.abs(v - match.at) < 0.5)),\n    ]\n    const start = (r: Rect) => (axis === 'x' ? r.y : r.x)\n    const length = (r: Rect) => (axis === 'x' ? r.height : r.width)\n    guides.push({\n      axis,\n      at: match.at,\n      from: Math.min(...span.map(start)),\n      to: Math.max(...span.map((r) => start(r) + length(r))),\n    })\n  }\n  return { dx, dy, guides }\n}\n\n/** Turns `point` by `degrees` around `centre`. */\nexport function turn(point: Point, centre: Point, degrees: number): Point {\n  if (!degrees) return point\n  const a = (degrees * Math.PI) / 180\n  const dx = point.x - centre.x\n  const dy = point.y - centre.y\n  return {\n    x: centre.x + dx * Math.cos(a) - dy * Math.sin(a),\n    y: centre.y + dx * Math.sin(a) + dy * Math.cos(a),\n  }\n}\n\n/** The box around `rect` turned by `degrees` about its centre. */\nexport function turnedBox(rect: Rect, degrees: number): Rect {\n  if (!degrees) return rect\n  const centre = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }\n  const corners = [\n    { x: rect.x, y: rect.y },\n    { x: rect.x + rect.width, y: rect.y },\n    { x: rect.x, y: rect.y + rect.height },\n    { x: rect.x + rect.width, y: rect.y + rect.height },\n  ].map((corner) => turn(corner, centre, degrees))\n  return boundsOf(corners.map((p) => ({ ...p, width: 0, height: 0 })))!\n}\n\n/** Whether `box` and `rect` turned by `degrees` about its centre overlap. */\nexport function intersectsTurned(box: Rect, rect: Rect, degrees: number): boolean {\n  if (!degrees) return intersects(box, rect)\n  if (!intersects(box, turnedBox(rect, degrees))) return false\n  // Upright, the box's axes already part them if they can; the turned\n  // rectangle's own axes are the only others that can.\n  const centre = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }\n  const corners = [\n    { x: box.x, y: box.y },\n    { x: box.x + box.width, y: box.y },\n    { x: box.x, y: box.y + box.height },\n    { x: box.x + box.width, y: box.y + box.height },\n  ].map((corner) => turn(corner, centre, -degrees))\n  const xs = corners.map((p) => p.x)\n  const ys = corners.map((p) => p.y)\n  return (\n    Math.min(...xs) < rect.x + rect.width &&\n    Math.max(...xs) > rect.x &&\n    Math.min(...ys) < rect.y + rect.height &&\n    Math.max(...ys) > rect.y\n  )\n}\n\n/** The part of the canvas a viewport shows on a screen of `size`. */\nfunction viewOf(view: FlowViewport, size: { width: number; height: number }): Rect {\n  return {\n    x: -view.x / view.zoom,\n    y: -view.y / view.zoom,\n    width: size.width / view.zoom,\n    height: size.height / view.zoom,\n  }\n}\n\n/** Whether `inner` lies in `outer`, give or take rounding. */\nfunction within(inner: Rect, outer: Rect) {\n  const e = 1e-6 * Math.max(1, outer.width, outer.height)\n  return (\n    inner.x >= outer.x - e &&\n    inner.y >= outer.y - e &&\n    inner.x + inner.width <= outer.x + outer.width + e &&\n    inner.y + inner.height <= outer.y + outer.height + e\n  )\n}\n\n/**\n * Keeps a pan within reach of the nodes: the view may go as far as having\n * the nodes just leave it on the opposite side, a screen of room to draw in,\n * and no further, so the canvas never runs off to coordinates the browser\n * can't draw (it clamps lengths at about 3.3e7 px, and the layer and the\n * nodes stop lining up long before). With no nodes, the origin is kept in\n * view. A view already outside, e.g. set through `v-model:viewport` or left\n * there when nodes were removed, isn't pulled back: it can only move closer.\n * Zooming in is left as it is: it stays inside the view, so it never goes\n * further out.\n */\nexport function clampPan(\n  next: FlowViewport,\n  current: FlowViewport,\n  content: Rect | null,\n  size: { width: number; height: number },\n): FlowViewport {\n  if (!size.width || !size.height) return next\n  // Zooming in shows part of what is already on screen; keep it as asked,\n  // so the point under the pointer or fingers stays put even at the edge.\n  if (next.zoom > current.zoom && within(viewOf(next, size), viewOf(current, size))) return next\n  const area = content ?? { x: 0, y: 0, width: 0, height: 0 }\n  // How far out the view is now, at the new zoom: the same centre.\n  const before = {\n    x: size.width / 2 - ((size.width / 2 - current.x) / current.zoom) * next.zoom,\n    y: size.height / 2 - ((size.height / 2 - current.y) / current.zoom) * next.zoom,\n  }\n  const axis = (value: number, now: number, start: number, length: number, screen: number) => {\n    // `value` is the screen offset of the canvas origin, so the view's near\n    // edge on the canvas is -value / zoom: kept between start - screen / zoom\n    // (the nodes touch the far edge) and start + length (they touch the near one).\n    const lo = 0 - (start + length) * next.zoom\n    const hi = screen - start * next.zoom\n    return Math.min(Math.max(value, Math.min(lo, now)), Math.max(hi, now))\n  }\n  return {\n    x: axis(next.x, before.x, area.x, area.width, size.width),\n    y: axis(next.y, before.y, area.y, area.height, size.height),\n    zoom: next.zoom,\n  }\n}\n"],"mappings":"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"}

package/dist/core/groups.js

@@ -0,0 +1,76 @@
+// src/core/groups.ts
+/**
+* Parent links between nodes, worked out once per document. A `parent`
+* naming a missing node, or one that would close a loop, is ignored.
+*/
+var FlowTree = class {
+	parents = /* @__PURE__ */ new Map();
+	children = /* @__PURE__ */ new Map();
+	constructor(nodes) {
+		const ids = new Set(nodes.map((n) => n.id));
+		for (const node of nodes) if (node.parent && node.parent !== node.id && ids.has(node.parent)) this.parents.set(node.id, node.parent);
+		for (const id of this.parents.keys()) {
+			const seen = /* @__PURE__ */ new Set([id]);
+			let at = this.parents.get(id);
+			while (at) {
+				if (seen.has(at)) {
+					this.parents.delete(id);
+					break;
+				}
+				seen.add(at);
+				at = this.parents.get(at);
+			}
+		}
+		for (const [child, parent] of this.parents) {
+			const list = this.children.get(parent);
+			if (list) list.push(child);
+			else this.children.set(parent, [child]);
+		}
+	}
+	parentOf(id) {
+		return this.parents.get(id);
+	}
+	/** The node's ancestors, nearest first. */
+	ancestors(id) {
+		const out = [];
+		for (let at = this.parents.get(id); at; at = this.parents.get(at)) out.push(at);
+		return out;
+	}
+	/** All nodes inside, at any depth. */
+	descendants(id) {
+		const out = [];
+		const visit = (at) => {
+			for (const child of this.children.get(at) ?? []) {
+				out.push(child);
+				visit(child);
+			}
+		};
+		visit(id);
+		return out;
+	}
+	depth(id) {
+		return this.ancestors(id).length;
+	}
+	/** `ids` without the ones inside another of them. */
+	topmost(ids) {
+		const set = new Set(ids);
+		return [...set].filter((id) => !this.ancestors(id).some((a) => set.has(a)));
+	}
+};
+var contains = (rect, p) => p.x >= rect.x && p.x <= rect.x + rect.width && p.y >= rect.y && p.y <= rect.y + rect.height;
+/** The innermost of `containers` whose rect holds `point`. */
+function containerAt(point, containers) {
+	let best = null;
+	for (const { id, rect } of containers) {
+		if (!contains(rect, point)) continue;
+		const area = rect.width * rect.height;
+		if (!best || area < best.area) best = {
+			id,
+			area
+		};
+	}
+	return best?.id;
+}
+export { FlowTree, containerAt };
+
+//# sourceMappingURL=groups.js.map

package/dist/core/groups.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups.js","names":[],"sources":["../../src/core/groups.ts"],"sourcesContent":["import type { FlowNode, Point, Rect } from './model'\n\n/**\n * Parent links between nodes, worked out once per document. A `parent`\n * naming a missing node, or one that would close a loop, is ignored.\n */\nexport class FlowTree {\n  readonly parents = new Map<string, string>()\n  readonly children = new Map<string, string[]>()\n\n  constructor(nodes: readonly FlowNode[]) {\n    const ids = new Set(nodes.map((n) => n.id))\n    for (const node of nodes)\n      if (node.parent && node.parent !== node.id && ids.has(node.parent))\n        this.parents.set(node.id, node.parent)\n    // Break loops: walk up from each node and drop the link that comes back.\n    for (const id of this.parents.keys()) {\n      const seen = new Set([id])\n      let at = this.parents.get(id)\n      while (at) {\n        if (seen.has(at)) {\n          this.parents.delete(id)\n          break\n        }\n        seen.add(at)\n        at = this.parents.get(at)\n      }\n    }\n    for (const [child, parent] of this.parents) {\n      const list = this.children.get(parent)\n      if (list) list.push(child)\n      else this.children.set(parent, [child])\n    }\n  }\n\n  parentOf(id: string) {\n    return this.parents.get(id)\n  }\n\n  /** The node's ancestors, nearest first. */\n  ancestors(id: string) {\n    const out: string[] = []\n    for (let at = this.parents.get(id); at; at = this.parents.get(at)) out.push(at)\n    return out\n  }\n\n  /** All nodes inside, at any depth. */\n  descendants(id: string) {\n    const out: string[] = []\n    const visit = (at: string) => {\n      for (const child of this.children.get(at) ?? []) {\n        out.push(child)\n        visit(child)\n      }\n    }\n    visit(id)\n    return out\n  }\n\n  depth(id: string) {\n    return this.ancestors(id).length\n  }\n\n  /** `ids` without the ones inside another of them. */\n  topmost(ids: Iterable<string>) {\n    const set = new Set(ids)\n    return [...set].filter((id) => !this.ancestors(id).some((a) => set.has(a)))\n  }\n}\n\nconst contains = (rect: Rect, p: Point) =>\n  p.x >= rect.x && p.x <= rect.x + rect.width && p.y >= rect.y && p.y <= rect.y + rect.height\n\n/** The innermost of `containers` whose rect holds `point`. */\nexport function containerAt(point: Point, containers: { id: string; rect: Rect }[]) {\n  let best: { id: string; area: number } | null = null\n  for (const { id, rect } of containers) {\n    if (!contains(rect, point)) continue\n    const area = rect.width * rect.height\n    if (!best || area < best.area) best = { id, area }\n  }\n  return best?.id\n}\n"],"mappings":";;;;;AAMA,IAAa,WAAb,MAAsB;CACpB,0BAAmB,IAAI,IAAoB;CAC3C,2BAAoB,IAAI,IAAsB;CAE9C,YAAY,OAA4B;EACtC,MAAM,MAAM,IAAI,IAAI,MAAM,KAAK,MAAM,EAAE,EAAE,CAAC;EAC1C,KAAK,MAAM,QAAQ,OACjB,IAAI,KAAK,UAAU,KAAK,WAAW,KAAK,MAAM,IAAI,IAAI,KAAK,MAAM,GAC/D,KAAK,QAAQ,IAAI,KAAK,IAAI,KAAK,MAAM;EAEzC,KAAK,MAAM,MAAM,KAAK,QAAQ,KAAK,GAAG;GACpC,MAAM,uBAAO,IAAI,IAAI,CAAC,EAAE,CAAC;GACzB,IAAI,KAAK,KAAK,QAAQ,IAAI,EAAE;GAC5B,OAAO,IAAI;IACT,IAAI,KAAK,IAAI,EAAE,GAAG;KAChB,KAAK,QAAQ,OAAO,EAAE;KACtB;IACF;IACA,KAAK,IAAI,EAAE;IACX,KAAK,KAAK,QAAQ,IAAI,EAAE;GAC1B;EACF;EACA,KAAK,MAAM,CAAC,OAAO,WAAW,KAAK,SAAS;GAC1C,MAAM,OAAO,KAAK,SAAS,IAAI,MAAM;GACrC,IAAI,MAAM,KAAK,KAAK,KAAK;QACpB,KAAK,SAAS,IAAI,QAAQ,CAAC,KAAK,CAAC;EACxC;CACF;CAEA,SAAS,IAAY;EACnB,OAAO,KAAK,QAAQ,IAAI,EAAE;CAC5B;;CAGA,UAAU,IAAY;EACpB,MAAM,MAAgB,CAAC;EACvB,KAAK,IAAI,KAAK,KAAK,QAAQ,IAAI,EAAE,GAAG,IAAI,KAAK,KAAK,QAAQ,IAAI,EAAE,GAAG,IAAI,KAAK,EAAE;EAC9E,OAAO;CACT;;CAGA,YAAY,IAAY;EACtB,MAAM,MAAgB,CAAC;EACvB,MAAM,SAAS,OAAe;GAC5B,KAAK,MAAM,SAAS,KAAK,SAAS,IAAI,EAAE,KAAK,CAAC,GAAG;IAC/C,IAAI,KAAK,KAAK;IACd,MAAM,KAAK;GACb;EACF;EACA,MAAM,EAAE;EACR,OAAO;CACT;CAEA,MAAM,IAAY;EAChB,OAAO,KAAK,UAAU,EAAE,CAAC,CAAC;CAC5B;;CAGA,QAAQ,KAAuB;EAC7B,MAAM,MAAM,IAAI,IAAI,GAAG;EACvB,OAAO,CAAC,GAAG,GAAG,CAAC,CAAC,QAAQ,OAAO,CAAC,KAAK,UAAU,EAAE,CAAC,CAAC,MAAM,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC;CAC5E;AACF;AAEA,IAAM,YAAY,MAAY,MAC5B,EAAE,KAAK,KAAK,KAAK,EAAE,KAAK,KAAK,IAAI,KAAK,SAAS,EAAE,KAAK,KAAK,KAAK,EAAE,KAAK,KAAK,IAAI,KAAK;;AAGvF,SAAgB,YAAY,OAAc,YAA0C;CAClF,IAAI,OAA4C;CAChD,KAAK,MAAM,EAAE,IAAI,UAAU,YAAY;EACrC,IAAI,CAAC,SAAS,MAAM,KAAK,GAAG;EAC5B,MAAM,OAAO,KAAK,QAAQ,KAAK;EAC/B,IAAI,CAAC,QAAQ,OAAO,KAAK,MAAM,OAAO;GAAE;GAAI;EAAK;CACnD;CACA,OAAO,MAAM;AACf"}

package/dist/core/history.js

@@ -0,0 +1,79 @@
+import { applyFlowSteps, compactFlowSteps } from "./transaction.js";
+// src/core/history.ts
+/** Transactions in one group merge when they come within this many ms. */
+var GROUP_WINDOW = 1e3;
+var FlowHistory = class {
+	depth;
+	done = [];
+	undone = [];
+	constructor(depth = 100) {
+		this.depth = depth;
+	}
+	get canUndo() {
+		return this.done.length > 0;
+	}
+	get canRedo() {
+		return this.undone.length > 0;
+	}
+	record(tr, selectionBefore, selectionAfter, now = Date.now()) {
+		if (!tr.changed || tr.meta.history === false) return;
+		this.undone = [];
+		const last = this.done[this.done.length - 1];
+		const group = tr.meta.group;
+		if (last && group && last.group === group && now - last.time < GROUP_WINDOW) {
+			last.steps = compactFlowSteps([...last.steps, ...tr.steps]);
+			last.inverse = compactFlowSteps([...tr.inverse, ...last.inverse]);
+			last.time = now;
+			last.selectionAfter = selectionAfter;
+			return;
+		}
+		this.done.push({
+			steps: tr.steps.slice(),
+			inverse: tr.inverse.slice(),
+			group,
+			time: now,
+			selectionBefore,
+			selectionAfter
+		});
+		if (this.done.length > this.depth) this.done.shift();
+	}
+	/** Ends the current group, so the next change starts a new undo step. */
+	close() {
+		const last = this.done[this.done.length - 1];
+		if (last) last.group = void 0;
+	}
+	/** Forgets the last entry if it belongs to `group`, e.g. after a cancelled drag. */
+	drop(group) {
+		if (this.done[this.done.length - 1]?.group === group) this.done.pop();
+	}
+	undo(doc) {
+		const entry = this.done.pop();
+		if (!entry) return null;
+		const tr = applyFlowSteps(doc, entry.inverse);
+		this.undone.push(entry);
+		return {
+			tr,
+			selection: entry.selectionBefore
+		};
+	}
+	redo(doc) {
+		const entry = this.undone.pop();
+		if (!entry) return null;
+		const tr = applyFlowSteps(doc, entry.steps);
+		this.done.push({
+			...entry,
+			group: void 0
+		});
+		return {
+			tr,
+			selection: entry.selectionAfter
+		};
+	}
+	clear() {
+		this.done = [];
+		this.undone = [];
+	}
+};
+export { FlowHistory };
+
+//# sourceMappingURL=history.js.map

package/dist/core/history.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"history.js","names":[],"sources":["../../src/core/history.ts"],"sourcesContent":["import type { FlowDocument, FlowSelection } from './model'\nimport {\n  applyFlowSteps,\n  compactFlowSteps,\n  type FlowStep,\n  type FlowTransaction,\n} from './transaction'\n\ninterface Entry {\n  steps: FlowStep[]\n  inverse: FlowStep[]\n  group?: string\n  time: number\n  selectionBefore: FlowSelection\n  selectionAfter: FlowSelection\n}\n\n/** Transactions in one group merge when they come within this many ms. */\nconst GROUP_WINDOW = 1000\n\nexport class FlowHistory {\n  private done: Entry[] = []\n  private undone: Entry[] = []\n\n  constructor(private depth = 100) {}\n\n  get canUndo() {\n    return this.done.length > 0\n  }\n\n  get canRedo() {\n    return this.undone.length > 0\n  }\n\n  record(\n    tr: FlowTransaction,\n    selectionBefore: FlowSelection,\n    selectionAfter: FlowSelection,\n    now = Date.now(),\n  ) {\n    if (!tr.changed || tr.meta.history === false) return\n    this.undone = []\n    const last = this.done[this.done.length - 1]\n    const group = tr.meta.group\n    if (last && group && last.group === group && now - last.time < GROUP_WINDOW) {\n      last.steps = compactFlowSteps([...last.steps, ...tr.steps])\n      last.inverse = compactFlowSteps([...tr.inverse, ...last.inverse])\n      last.time = now\n      last.selectionAfter = selectionAfter\n      return\n    }\n    this.done.push({\n      steps: tr.steps.slice(),\n      inverse: tr.inverse.slice(),\n      group,\n      time: now,\n      selectionBefore,\n      selectionAfter,\n    })\n    if (this.done.length > this.depth) this.done.shift()\n  }\n\n  /** Ends the current group, so the next change starts a new undo step. */\n  close() {\n    const last = this.done[this.done.length - 1]\n    if (last) last.group = undefined\n  }\n\n  /** Forgets the last entry if it belongs to `group`, e.g. after a cancelled drag. */\n  drop(group: string) {\n    const last = this.done[this.done.length - 1]\n    if (last?.group === group) this.done.pop()\n  }\n\n  undo(doc: FlowDocument) {\n    const entry = this.done.pop()\n    if (!entry) return null\n    const tr = applyFlowSteps(doc, entry.inverse)\n    this.undone.push(entry)\n    return { tr, selection: entry.selectionBefore }\n  }\n\n  redo(doc: FlowDocument) {\n    const entry = this.undone.pop()\n    if (!entry) return null\n    const tr = applyFlowSteps(doc, entry.steps)\n    this.done.push({ ...entry, group: undefined })\n    return { tr, selection: entry.selectionAfter }\n  }\n\n  clear() {\n    this.done = []\n    this.undone = []\n  }\n}\n"],"mappings":";;;AAkBA,IAAM,eAAe;AAErB,IAAa,cAAb,MAAyB;CAIH;CAHpB,OAAwB,CAAC;CACzB,SAA0B,CAAC;CAE3B,YAAY,QAAgB,KAAK;EAAb,KAAA,QAAA;CAAc;CAElC,IAAI,UAAU;EACZ,OAAO,KAAK,KAAK,SAAS;CAC5B;CAEA,IAAI,UAAU;EACZ,OAAO,KAAK,OAAO,SAAS;CAC9B;CAEA,OACE,IACA,iBACA,gBACA,MAAM,KAAK,IAAI,GACf;EACA,IAAI,CAAC,GAAG,WAAW,GAAG,KAAK,YAAY,OAAO;EAC9C,KAAK,SAAS,CAAC;EACf,MAAM,OAAO,KAAK,KAAK,KAAK,KAAK,SAAS;EAC1C,MAAM,QAAQ,GAAG,KAAK;EACtB,IAAI,QAAQ,SAAS,KAAK,UAAU,SAAS,MAAM,KAAK,OAAO,cAAc;GAC3E,KAAK,QAAQ,iBAAiB,CAAC,GAAG,KAAK,OAAO,GAAG,GAAG,KAAK,CAAC;GAC1D,KAAK,UAAU,iBAAiB,CAAC,GAAG,GAAG,SAAS,GAAG,KAAK,OAAO,CAAC;GAChE,KAAK,OAAO;GACZ,KAAK,iBAAiB;GACtB;EACF;EACA,KAAK,KAAK,KAAK;GACb,OAAO,GAAG,MAAM,MAAM;GACtB,SAAS,GAAG,QAAQ,MAAM;GAC1B;GACA,MAAM;GACN;GACA;EACF,CAAC;EACD,IAAI,KAAK,KAAK,SAAS,KAAK,OAAO,KAAK,KAAK,MAAM;CACrD;;CAGA,QAAQ;EACN,MAAM,OAAO,KAAK,KAAK,KAAK,KAAK,SAAS;EAC1C,IAAI,MAAM,KAAK,QAAQ,KAAA;CACzB;;CAGA,KAAK,OAAe;EAElB,IADa,KAAK,KAAK,KAAK,KAAK,SAAS,EACtC,EAAM,UAAU,OAAO,KAAK,KAAK,IAAI;CAC3C;CAEA,KAAK,KAAmB;EACtB,MAAM,QAAQ,KAAK,KAAK,IAAI;EAC5B,IAAI,CAAC,OAAO,OAAO;EACnB,MAAM,KAAK,eAAe,KAAK,MAAM,OAAO;EAC5C,KAAK,OAAO,KAAK,KAAK;EACtB,OAAO;GAAE;GAAI,WAAW,MAAM;EAAgB;CAChD;CAEA,KAAK,KAAmB;EACtB,MAAM,QAAQ,KAAK,OAAO,IAAI;EAC9B,IAAI,CAAC,OAAO,OAAO;EACnB,MAAM,KAAK,eAAe,KAAK,MAAM,KAAK;EAC1C,KAAK,KAAK,KAAK;GAAE,GAAG;GAAO,OAAO,KAAA;EAAU,CAAC;EAC7C,OAAO;GAAE;GAAI,WAAW,MAAM;EAAe;CAC/C;CAEA,QAAQ;EACN,KAAK,OAAO,CAAC;EACb,KAAK,SAAS,CAAC;CACjB;AACF"}

package/dist/core/model.js

@@ -0,0 +1,21 @@
+// src/core/model.ts
+var emptyDocument = () => ({
+	version: 1,
+	nodes: [],
+	edges: []
+});
+var emptySelection = () => ({
+	nodes: [],
+	edges: []
+});
+var counter = 0;
+/** A short id, unique within this page and very likely across clients. */
+function createId(prefix = "n") {
+	counter = (counter + 1) % 1296;
+	const time = Date.now().toString(36).slice(-5);
+	const random = Math.random().toString(36).slice(2, 6);
+	return `${prefix}${time}${counter.toString(36).padStart(2, "0")}${random}`;
+}
+export { createId, emptyDocument, emptySelection };
+
+//# sourceMappingURL=model.js.map

package/dist/core/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","names":[],"sources":["../../src/core/model.ts"],"sourcesContent":["/*\n * The document a flow editor edits: plain, serialisable data, bound with\n * `v-model`. Positions are canvas coordinates in px, from the top left of a\n * node. Ports are not stored; a node type declares them, and edges refer to\n * them by id.\n */\n\nexport type FlowData = Record<string, unknown>\n\nexport interface FlowNode<Data extends FlowData = FlowData> {\n  id: string\n  /** A registered node type; `'default'` when left out. */\n  type?: string\n  x: number\n  y: number\n  /** Only stored for nodes that can be resized; otherwise the content decides. */\n  width?: number\n  height?: number\n  data?: Data\n  /** A locked node cannot be moved or deleted. */\n  locked?: boolean\n  /**\n   * The container node, e.g. a group, this node sits in. Its `x` and `y`\n   * stay canvas coordinates; moving the container moves it along.\n   */\n  parent?: string\n  /**\n   * Stacking order among nodes that aren't containers: higher is drawn on\n   * top. Nodes without it count as `0`; equal ones keep the document order.\n   */\n  z?: number\n}\n\nexport interface FlowEndpoint {\n  node: string\n  /** Leave out to attach to the node itself. */\n  port?: string\n}\n\nexport interface FlowEdge<Data extends FlowData = FlowData> {\n  id: string\n  source: FlowEndpoint\n  target: FlowEndpoint\n  /** The edge type: `bezier`, `step`, `straight` or one added by an extension. The editor's `edge-type` when left out. */\n  type?: string\n  /** Text shown on the edge. */\n  label?: string\n  /** Dashes run along the edge in its direction, e.g. while data flows through it. */\n  animated?: boolean\n  data?: Data\n}\n\nexport interface FlowDocument {\n  /** The version of the format; see `migrateDocument`. */\n  version: 1\n  nodes: FlowNode[]\n  edges: FlowEdge[]\n}\n\nexport type PortSide = 'left' | 'right' | 'top' | 'bottom'\n\nexport interface FlowPortSpec {\n  id: string\n  /** Inputs receive edges, outputs start them. */\n  kind: 'input' | 'output'\n  /** Where the port sits; inputs default to the left, outputs to the right. */\n  side?: PortSide\n  label?: string\n  /** What the port carries. Two ports connect when they share a type, or either is `'any'`. */\n  dataType?: string | string[]\n  /**\n   * The most edges the port takes. Inputs take one by default, outputs any\n   * number. A new edge on a full port replaces its oldest edge.\n   */\n  max?: number\n}\n\n/** Where the canvas is shown: `x` and `y` are the screen offset of the canvas origin. */\nexport interface FlowViewport {\n  x: number\n  y: number\n  zoom: number\n}\n\nexport interface FlowSelection {\n  nodes: string[]\n  edges: string[]\n}\n\nexport interface Point {\n  x: number\n  y: number\n}\n\nexport interface Rect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\nexport const emptyDocument = (): FlowDocument => ({ version: 1, nodes: [], edges: [] })\nexport const emptySelection = (): FlowSelection => ({ nodes: [], edges: [] })\n\nlet counter = 0\n\n/** A short id, unique within this page and very likely across clients. */\nexport function createId(prefix = 'n') {\n  counter = (counter + 1) % 1296\n  const time = Date.now().toString(36).slice(-5)\n  const random = Math.random().toString(36).slice(2, 6)\n  return `${prefix}${time}${counter.toString(36).padStart(2, '0')}${random}`\n}\n"],"mappings":";AAqGA,IAAa,uBAAqC;CAAE,SAAS;CAAG,OAAO,CAAC;CAAG,OAAO,CAAC;AAAE;AACrF,IAAa,wBAAuC;CAAE,OAAO,CAAC;CAAG,OAAO,CAAC;AAAE;AAE3E,IAAI,UAAU;;AAGd,SAAgB,SAAS,SAAS,KAAK;CACrC,WAAW,UAAU,KAAK;CAC1B,MAAM,OAAO,KAAK,IAAI,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,EAAE;CAC7C,MAAM,SAAS,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC;CACpD,OAAO,GAAG,SAAS,OAAO,QAAQ,SAAS,EAAE,CAAC,CAAC,SAAS,GAAG,GAAG,IAAI;AACpE"}

package/dist/core/node-types.js

@@ -0,0 +1,32 @@
+import { turnedBox } from "./geometry.js";
+// src/core/node-types.ts
+/** Declares a node type, with the data type checked against its component. */
+function defineNodeType(spec) {
+	if (process.env.NODE_ENV !== "production" && spec.rotation && spec.frame !== false) console.warn(`[@dou-ui/flow] the node type "${spec.type}" has rotation but not frame: false: the card the editor draws around it does not turn`);
+	return spec;
+}
+var portSide = (port) => port.side ?? (port.kind === "input" ? "left" : "right");
+function portsOf(spec, node) {
+	const ports = spec?.ports;
+	if (!ports) return [];
+	return typeof ports === "function" ? ports(node) : ports;
+}
+/** Whether a node can be resized, and its smallest size; `null` when it can't. */
+function resizeOf(spec, node) {
+	if (spec?.rotation?.(node)) return null;
+	const value = typeof spec?.resizable === "function" ? spec.resizable(node) : spec?.resizable;
+	if (!value) return null;
+	return value === true ? {} : value;
+}
+function labelOf(spec, node, messages) {
+	if (spec?.label) return spec.label(node, messages);
+	const label = node.data?.label;
+	return typeof label === "string" ? label : node.id;
+}
+/** The box `node` covers on screen, drawn at `rect`. */
+function nodeBounds(spec, node, rect) {
+	return spec.bounds?.(node, rect) ?? turnedBox(rect, spec.rotation?.(node) ?? 0);
+}
+export { defineNodeType, labelOf, nodeBounds, portSide, portsOf, resizeOf };
+
+//# sourceMappingURL=node-types.js.map

package/dist/core/node-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-types.js","names":[],"sources":["../../src/core/node-types.ts"],"sourcesContent":["import type { FlowDrawContext } from '../export/context'\nimport type { Component } from 'vue'\nimport type { FlowMessages } from '../locale'\nimport { turnedBox } from './geometry'\nimport type { FlowData, FlowNode, FlowPortSpec, PortSide, Rect } from './model'\n\n/** What a node type's component receives. */\nexport interface NodeViewProps<Data extends FlowData = FlowData> {\n  node: FlowNode<Data>\n  data: Data\n  ports: FlowPortSpec[]\n  selected: boolean\n  readonly: boolean\n  /** Merges `patch` into the node's data, as one undo step. */\n  updateData: (patch: Partial<Data>) => void\n}\n\nexport interface NodeTypeSpec<Data extends FlowData = FlowData> {\n  type: string\n  /**\n   * Renders the node's content. The editor draws the frame, selection and\n   * focus ring around it. Place ports with `<DouFlowPort>`; ports the\n   * component does not place are spread along their sides.\n   */\n  component?: Component\n  /** The node's ports, fixed or worked out from its data. */\n  ports?: FlowPortSpec[] | ((node: FlowNode<Data>) => FlowPortSpec[])\n  /** Data for a new node of this type. */\n  defaults?: () => Data\n  /**\n   * The node's accessible name; `data.label` by default. `messages` are the\n   * editor's current strings, for names that follow the locale.\n   */\n  label?: (node: FlowNode<Data>, messages: FlowMessages) => string\n  /**\n   * How the type is offered by `paletteTypes` and in the list that opens\n   * when an edge is dropped on the empty canvas. Types without it aren't offered.\n   */\n  palette?: NodePaletteSpec\n  /**\n   * Nodes dropped inside become its children (`parent`) and move with it;\n   * with `data.collapsed` they are hidden and their edges end on it.\n   * Containers are drawn under edges and other nodes.\n   */\n  container?: boolean\n  /**\n   * A handle on the selected node changes its stored `width` and `height`.\n   * A function decides per node, e.g. not while it is turned.\n   */\n  resizable?: NodeResize | ((node: FlowNode<Data>) => NodeResize)\n  /** The `width` and `height` a new node starts with. */\n  size?: { width: number; height: number }\n  /**\n   * `false` leaves out the card the editor draws around the component (its\n   * border, background and shadow), for nodes that draw their own outline,\n   * e.g. a circle. Selection then shows as a thin outline around the box.\n   */\n  frame?: boolean\n  /**\n   * How far the node is drawn turned about its centre, in degrees clockwise;\n   * `0` by default. The component turns what it draws, and `draw` turns its\n   * export; the editor follows: the selection outline, picking with a box,\n   * what is drawn in view, the toolbar and other people's outlines. For\n   * nodes with `frame: false`. A turned node has no editor resize handle.\n   */\n  rotation?: (node: FlowNode<Data>) => number\n  /**\n   * The box the node covers on screen when it draws outside its own `rect`.\n   * The toolbar over the selection floats above it. By default the box\n   * around `rect` turned by `rotation`.\n   */\n  bounds?: (node: FlowNode<Data>, rect: Rect) => Rect\n  /**\n   * Draws the node as SVG markup for `exportSVG` and `exportPNG`, in its\n   * own coordinates. Without it the node is drawn as a card with its name.\n   */\n  draw?: (node: FlowNode<Data>, draw: FlowDrawContext) => string\n}\n\nexport interface NodePaletteSpec {\n  label: string\n  icon?: Component\n  /** Types with the same group are listed together under its name. */\n  group?: string\n  description?: string\n  /** Other words the search should find the type by. */\n  keywords?: string[]\n}\n\n/** Declares a node type, with the data type checked against its component. */\nexport function defineNodeType<Data extends FlowData = FlowData>(\n  spec: NodeTypeSpec<Data>,\n): NodeTypeSpec<Data> {\n  if (process.env.NODE_ENV !== 'production' && spec.rotation && spec.frame !== false)\n    console.warn(\n      `[@dou-ui/flow] the node type \"${spec.type}\" has rotation but not frame: false: the card the editor draws around it does not turn`,\n    )\n  return spec\n}\n\nexport const portSide = (port: FlowPortSpec): PortSide =>\n  port.side ?? (port.kind === 'input' ? 'left' : 'right')\n\nexport function portsOf(spec: NodeTypeSpec | undefined, node: FlowNode): FlowPortSpec[] {\n  const ports = spec?.ports\n  if (!ports) return []\n  return typeof ports === 'function' ? ports(node) : ports\n}\n\nexport type NodeResize = boolean | { minWidth?: number; minHeight?: number }\n\n/** Whether a node can be resized, and its smallest size; `null` when it can't. */\nexport function resizeOf(\n  spec: NodeTypeSpec | undefined,\n  node: FlowNode,\n): { minWidth?: number; minHeight?: number } | null {\n  // the editor's handle grows a node along the page, not along a turned node's sides\n  if (spec?.rotation?.(node)) return null\n  const value = typeof spec?.resizable === 'function' ? spec.resizable(node) : spec?.resizable\n  if (!value) return null\n  return value === true ? {} : value\n}\n\nexport function labelOf(\n  spec: NodeTypeSpec | undefined,\n  node: FlowNode,\n  messages: FlowMessages,\n): string {\n  if (spec?.label) return spec.label(node, messages)\n  const label = node.data?.label\n  return typeof label === 'string' ? label : node.id\n}\n\n/** The box `node` covers on screen, drawn at `rect`. */\nexport function nodeBounds(spec: NodeTypeSpec, node: FlowNode, rect: Rect): Rect {\n  return spec.bounds?.(node, rect) ?? turnedBox(rect, spec.rotation?.(node) ?? 0)\n}\n"],"mappings":";;;AA0FA,SAAgB,eACd,MACoB;CACpB,IAAA,QAAA,IAAA,aAA6B,gBAAgB,KAAK,YAAY,KAAK,UAAU,OAC3E,QAAQ,KACN,iCAAiC,KAAK,KAAK,uFAC7C;CACF,OAAO;AACT;AAEA,IAAa,YAAY,SACvB,KAAK,SAAS,KAAK,SAAS,UAAU,SAAS;AAEjD,SAAgB,QAAQ,MAAgC,MAAgC;CACtF,MAAM,QAAQ,MAAM;CACpB,IAAI,CAAC,OAAO,OAAO,CAAC;CACpB,OAAO,OAAO,UAAU,aAAa,MAAM,IAAI,IAAI;AACrD;;AAKA,SAAgB,SACd,MACA,MACkD;CAElD,IAAI,MAAM,WAAW,IAAI,GAAG,OAAO;CACnC,MAAM,QAAQ,OAAO,MAAM,cAAc,aAAa,KAAK,UAAU,IAAI,IAAI,MAAM;CACnF,IAAI,CAAC,OAAO,OAAO;CACnB,OAAO,UAAU,OAAO,CAAC,IAAI;AAC/B;AAEA,SAAgB,QACd,MACA,MACA,UACQ;CACR,IAAI,MAAM,OAAO,OAAO,KAAK,MAAM,MAAM,QAAQ;CACjD,MAAM,QAAQ,KAAK,MAAM;CACzB,OAAO,OAAO,UAAU,WAAW,QAAQ,KAAK;AAClD;;AAGA,SAAgB,WAAW,MAAoB,MAAgB,MAAkB;CAC/E,OAAO,KAAK,SAAS,MAAM,IAAI,KAAK,UAAU,MAAM,KAAK,WAAW,IAAI,KAAK,CAAC;AAChF"}

package/dist/core/order.js

@@ -0,0 +1,42 @@
+// src/core/order.ts
+var before = (a, b) => a.x - b.x || a.y - b.y;
+/**
+* Nodes in the order a flow reads: every node after the ones it depends on,
+* and among nodes that are ready, the leftmost (then topmost) first. Nodes
+* on a cycle follow the rest, left to right.
+*/
+function flowOrder(doc) {
+	const byId = new Map(doc.nodes.map((node) => [node.id, node]));
+	const waiting = new Map(doc.nodes.map((node) => [node.id, 0]));
+	const next = /* @__PURE__ */ new Map();
+	for (const edge of doc.edges) {
+		const { node: from } = edge.source;
+		const { node: to } = edge.target;
+		if (from === to || !byId.has(from) || !byId.has(to)) continue;
+		waiting.set(to, waiting.get(to) + 1);
+		const list = next.get(from);
+		if (list) list.push(to);
+		else next.set(from, [to]);
+	}
+	const ready = doc.nodes.filter((node) => waiting.get(node.id) === 0);
+	const out = [];
+	while (ready.length) {
+		let pick = 0;
+		for (let i = 1; i < ready.length; i++) if (before(ready[i], ready[pick]) < 0) pick = i;
+		const [node] = ready.splice(pick, 1);
+		out.push(node);
+		for (const id of next.get(node.id) ?? []) {
+			const left = waiting.get(id) - 1;
+			waiting.set(id, left);
+			if (left === 0) ready.push(byId.get(id));
+		}
+	}
+	if (out.length < doc.nodes.length) {
+		const placed = new Set(out);
+		out.push(...doc.nodes.filter((node) => !placed.has(node)).sort(before));
+	}
+	return out;
+}
+export { flowOrder };
+
+//# sourceMappingURL=order.js.map

package/dist/core/order.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order.js","names":[],"sources":["../../src/core/order.ts"],"sourcesContent":["import type { FlowDocument, FlowNode } from './model'\n\nconst before = (a: FlowNode, b: FlowNode) => a.x - b.x || a.y - b.y\n\n/**\n * Nodes in the order a flow reads: every node after the ones it depends on,\n * and among nodes that are ready, the leftmost (then topmost) first. Nodes\n * on a cycle follow the rest, left to right.\n */\nexport function flowOrder(doc: FlowDocument): FlowNode[] {\n  const byId = new Map(doc.nodes.map((node) => [node.id, node]))\n  const waiting = new Map(doc.nodes.map((node) => [node.id, 0]))\n  const next = new Map<string, string[]>()\n  for (const edge of doc.edges) {\n    const { node: from } = edge.source\n    const { node: to } = edge.target\n    if (from === to || !byId.has(from) || !byId.has(to)) continue\n    waiting.set(to, waiting.get(to)! + 1)\n    const list = next.get(from)\n    if (list) list.push(to)\n    else next.set(from, [to])\n  }\n  const ready = doc.nodes.filter((node) => waiting.get(node.id) === 0)\n  const out: FlowNode[] = []\n  while (ready.length) {\n    let pick = 0\n    for (let i = 1; i < ready.length; i++) if (before(ready[i]!, ready[pick]!) < 0) pick = i\n    const [node] = ready.splice(pick, 1)\n    out.push(node!)\n    for (const id of next.get(node!.id) ?? []) {\n      const left = waiting.get(id)! - 1\n      waiting.set(id, left)\n      if (left === 0) ready.push(byId.get(id)!)\n    }\n  }\n  if (out.length < doc.nodes.length) {\n    const placed = new Set(out)\n    // oxlint-disable-next-line unicorn/no-array-sort -- sorts a fresh list\n    out.push(...doc.nodes.filter((node) => !placed.has(node)).sort(before))\n  }\n  return out\n}\n"],"mappings":";AAEA,IAAM,UAAU,GAAa,MAAgB,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;;;;;;AAOlE,SAAgB,UAAU,KAA+B;CACvD,MAAM,OAAO,IAAI,IAAI,IAAI,MAAM,KAAK,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;CAC7D,MAAM,UAAU,IAAI,IAAI,IAAI,MAAM,KAAK,SAAS,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;CAC7D,MAAM,uBAAO,IAAI,IAAsB;CACvC,KAAK,MAAM,QAAQ,IAAI,OAAO;EAC5B,MAAM,EAAE,MAAM,SAAS,KAAK;EAC5B,MAAM,EAAE,MAAM,OAAO,KAAK;EAC1B,IAAI,SAAS,MAAM,CAAC,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE,GAAG;EACrD,QAAQ,IAAI,IAAI,QAAQ,IAAI,EAAE,IAAK,CAAC;EACpC,MAAM,OAAO,KAAK,IAAI,IAAI;EAC1B,IAAI,MAAM,KAAK,KAAK,EAAE;OACjB,KAAK,IAAI,MAAM,CAAC,EAAE,CAAC;CAC1B;CACA,MAAM,QAAQ,IAAI,MAAM,QAAQ,SAAS,QAAQ,IAAI,KAAK,EAAE,MAAM,CAAC;CACnE,MAAM,MAAkB,CAAC;CACzB,OAAO,MAAM,QAAQ;EACnB,IAAI,OAAO;EACX,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,IAAI,OAAO,MAAM,IAAK,MAAM,KAAM,IAAI,GAAG,OAAO;EACvF,MAAM,CAAC,QAAQ,MAAM,OAAO,MAAM,CAAC;EACnC,IAAI,KAAK,IAAK;EACd,KAAK,MAAM,MAAM,KAAK,IAAI,KAAM,EAAE,KAAK,CAAC,GAAG;GACzC,MAAM,OAAO,QAAQ,IAAI,EAAE,IAAK;GAChC,QAAQ,IAAI,IAAI,IAAI;GACpB,IAAI,SAAS,GAAG,MAAM,KAAK,KAAK,IAAI,EAAE,CAAE;EAC1C;CACF;CACA,IAAI,IAAI,SAAS,IAAI,MAAM,QAAQ;EACjC,MAAM,SAAS,IAAI,IAAI,GAAG;EAE1B,IAAI,KAAK,GAAG,IAAI,MAAM,QAAQ,SAAS,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;CACxE;CACA,OAAO;AACT"}