@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/automatic-table-placement/createAutomaticTablePlacement.js

@@ -0,0 +1,175 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { calcTableHeight, calcTableWidths } from "../../../utils/calcTable.js";
+import { unionRect } from "../../../konva/scene/metrics.js";
+import { getTableGroupId, padRect } from "../../../utils/tableGroup.js";
+import { getContentRect } from "../../../konva/scene/contentBounds.js";
+import { relationshipSort } from "../../../utils/draw-relationship/sort.js";
+import { clamp } from "es-toolkit";
+import { forceCollide, forceLink, forceManyBody, forceSimulation, forceX, forceY } from "d3-force";
+//#region src/components/erd/automatic-table-placement/createAutomaticTablePlacement.ts
+var tableRect = (state, table) => ({
+	x: table.ui.x,
+	y: table.ui.y,
+	width: calcTableWidths(table, state).width,
+	height: calcTableHeight(table)
+});
+function createTableNode(state, table, x, y) {
+	const { width, height } = tableRect(state, table);
+	return {
+		id: table.id,
+		r: (width + height) / 4,
+		x,
+		y,
+		vx: 0,
+		vy: 0,
+		ref: table,
+		width,
+		height
+	};
+}
+function createGroupNode(state, group, tables, x, y) {
+	const box = padRect(tables.map((table) => tableRect(state, table)).reduce(unionRect));
+	return {
+		id: group.id,
+		r: (box.width + box.height) / 4,
+		x,
+		y,
+		vx: 0,
+		vy: 0,
+		group,
+		width: box.width,
+		height: box.height,
+		members: tables.map((ref) => ({
+			ref,
+			dx: ref.ui.x - box.x,
+			dy: ref.ui.y - box.y
+		}))
+	};
+}
+function createNodes(state, x, y) {
+	const { doc: { tableIds, relationshipIds }, collections } = state;
+	const tables = query(collections).collection("tableEntities").selectByIds(tableIds);
+	const relationships = query(collections).collection("relationshipEntities").selectByIds(relationshipIds);
+	const links = [];
+	const linkIdSet = /* @__PURE__ */ new Set();
+	const membersByGroup = /* @__PURE__ */ new Map();
+	const nodeIdByTable = /* @__PURE__ */ new Map();
+	const order = [];
+	tables.forEach((table) => {
+		const groupId = getTableGroupId(state, table);
+		const members = groupId ? membersByGroup.get(groupId) : void 0;
+		nodeIdByTable.set(table.id, groupId || table.id);
+		if (!groupId) order.push(table);
+		else if (members) members.push(table);
+		else {
+			membersByGroup.set(groupId, [table]);
+			order.push(groupId);
+		}
+	});
+	const nodes = order.map((entry) => typeof entry === "string" ? createGroupNode(state, collections.tableGroupEntities[entry], membersByGroup.get(entry), x, y) : createTableNode(state, entry, x, y));
+	relationships.forEach((relationship) => {
+		const { start, end } = relationship;
+		const source = nodeIdByTable.get(start.tableId) ?? start.tableId;
+		const target = nodeIdByTable.get(end.tableId) ?? end.tableId;
+		const linkId = `${source}-${target}`;
+		if (source !== target && !linkIdSet.has(linkId)) {
+			links.push({
+				source,
+				target
+			});
+			linkIdSet.add(linkId);
+		}
+	});
+	return [nodes, links];
+}
+function placeNode(node) {
+	if ("ref" in node) {
+		node.ref.ui.x = node.x - node.r;
+		node.ref.ui.y = node.y - node.r;
+		return;
+	}
+	const left = node.x - node.width / 2;
+	const top = node.y - node.height / 2;
+	node.members.forEach(({ ref, dx, dy }) => {
+		ref.ui.x = left + dx;
+		ref.ui.y = top + dy;
+	});
+	node.group.ui.x = left;
+	node.group.ui.y = top;
+	node.group.ui.width = node.width;
+	node.group.ui.height = node.height;
+}
+function nextBox(node) {
+	const x = node.x + node.vx;
+	const y = node.y + node.vy;
+	const { width, height } = node;
+	return "ref" in node ? {
+		x: x - node.r,
+		y: y - node.r,
+		width,
+		height
+	} : {
+		x: x - width / 2,
+		y: y - height / 2,
+		width,
+		height
+	};
+}
+var overlapOf = (start, size, other, otherSize) => Math.min(start + size, other + otherSize) - Math.max(start, other) + 100;
+function separate(a, b, random) {
+	const boxA = nextBox(a);
+	const boxB = nextBox(b);
+	const overlapX = overlapOf(boxA.x, boxA.width, boxB.x, boxB.width);
+	const overlapY = overlapOf(boxA.y, boxA.height, boxB.y, boxB.height);
+	if (overlapX <= 0 || overlapY <= 0) return;
+	const across = overlapX < overlapY;
+	const apart = across ? boxB.x + boxB.width / 2 - (boxA.x + boxA.width / 2) : boxB.y + boxB.height / 2 - (boxA.y + boxA.height / 2);
+	const push = Math.sign(apart || random() - .5) * Math.min(overlapX, overlapY);
+	const share = b.r * b.r / (a.r * a.r + b.r * b.r);
+	if (across) {
+		a.vx -= push * share;
+		b.vx += push * (1 - share);
+	} else {
+		a.vy -= push * share;
+		b.vy += push * (1 - share);
+	}
+}
+function forceGroupBoxes() {
+	let groups = [];
+	let tables = [];
+	let random;
+	const force = () => {
+		groups.forEach((group, index) => {
+			groups.slice(index + 1).forEach((other) => separate(group, other, random));
+			tables.forEach((table) => separate(group, table, random));
+		});
+	};
+	force.initialize = (nodes, source) => {
+		groups = nodes.filter((node) => !("ref" in node));
+		tables = nodes.filter((node) => "ref" in node);
+		random = source;
+	};
+	return force;
+}
+var collideRadius = (node) => "ref" in node ? 100 + node.r : Math.min(node.width, node.height) / 2;
+var progressInRange = (value) => clamp(value, 0, 1);
+function placementProgress(simulation) {
+	return progressInRange(Math.log(simulation.alpha()) / Math.log(simulation.alphaMin()));
+}
+function createAutomaticTablePlacement(state) {
+	const content = getContentRect(state) ?? {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	const centerX = content.x + content.width / 2;
+	const centerY = content.y + content.height / 2;
+	const [nodes, links] = createNodes(state, centerX, centerY);
+	return forceSimulation(nodes).force("link", forceLink(links).id((d) => d.id)).force("collide", forceCollide().radius(collideRadius)).force("groupBoxes", forceGroupBoxes()).force("charge", forceManyBody()).force("x", forceX(centerX)).force("y", forceY(centerY)).on("tick", () => {
+		nodes.forEach(placeNode);
+		relationshipSort(state);
+	});
+}
+//#endregion
+export { createAutomaticTablePlacement, placementProgress };

package/dist/components/erd/automatic-table-placement/elkPlacement.js

@@ -0,0 +1,56 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { openToastAction } from "../../../utils/emitter.js";
+import { useI18n } from "../../localeContext.js";
+import Toast from "../../primitives/toast/Toast.js";
+import { closePromise } from "../../../utils/promise.js";
+import Button from "../../primitives/button/Button.js";
+import { createElkLayout } from "../../../services/elk-layout/index.js";
+//#region src/components/erd/automatic-table-placement/elkPlacement.tsx
+var PlacingToast = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`<${Toast} .busy=${true} .title=${i18n.value.t("feedback.placingTables")} .action=${html`<${Button} .size="1" .text=${i18n.value.t("common.cancel")} .onClick=${props.onCancel} />`} />`;
+};
+function layoutByElk({ emitter, shortcut$ }, request, { whenSlow = false, signal } = {}) {
+	return new Promise((resolve) => {
+		const [close, onClose] = closePromise();
+		let settled = false;
+		let subscription = null;
+		const settle = (answer) => {
+			if (settled) return;
+			settled = true;
+			subscription?.unsubscribe();
+			signal?.removeEventListener("abort", cancel);
+			onClose();
+			resolve(answer);
+		};
+		function cancel() {
+			settle({ status: "cancelled" });
+		}
+		const openToast = () => {
+			if (settled) return;
+			subscription = shortcut$.subscribe(({ type }) => {
+				type === KeyBindingName.stop && cancel();
+			});
+			emitter.emit(openToastAction({
+				close,
+				message: html`<${PlacingToast} .onCancel=${cancel} />`
+			}));
+		};
+		if (signal?.aborted) {
+			cancel();
+			return;
+		}
+		signal?.addEventListener("abort", cancel);
+		whenSlow || openToast();
+		createElkLayout(request, whenSlow ? openToast : void 0).then((points) => settle({
+			status: "placed",
+			points
+		}), (error) => settle({
+			status: "failed",
+			error
+		}));
+	});
+}
+//#endregion
+export { PlacingToast, layoutByElk };

package/dist/components/erd/automatic-table-placement/flowPlacement.js

@@ -0,0 +1,32 @@
+import { initialLoadJsonAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { appDestroy, createAppContext } from "../../appContext.js";
+import { readerNameViewAction } from "../readerNameView.js";
+import { TablePlacement } from "../../../constants/tablePlacement.js";
+import { createElkLayoutRequest, toViewPoints } from "../../../services/elk-layout/elkGraph.js";
+import { layoutByElk } from "./elkPlacement.js";
+//#region src/components/erd/automatic-table-placement/flowPlacement.ts
+function createFlowRequest({ toWidth, store }, json) {
+	const scratch = createAppContext({ toWidth }, {
+		devtools: false,
+		observable: false
+	});
+	try {
+		scratch.store.dispatchSync(initialLoadJsonAction$(json), readerNameViewAction(scratch.store.state, store.state));
+		const { doc } = scratch.store.state;
+		if (doc.tableIds.length < 2 || !doc.relationshipIds.length) return null;
+		return createElkLayoutRequest(scratch.store.state, TablePlacement.flow);
+	} finally {
+		appDestroy(scratch);
+	}
+}
+async function placeByFlow(app, json, signal) {
+	const request = createFlowRequest(app, json);
+	if (!request) return null;
+	const answer = await layoutByElk(app, request, {
+		whenSlow: true,
+		signal
+	});
+	return answer.status === "placed" ? toViewPoints(request, answer.points) : null;
+}
+//#endregion
+export { createFlowRequest, placeByFlow };

package/dist/components/erd/automatic-table-placement/placementActions.js

@@ -0,0 +1,33 @@
+import { getTableGroupWraps } from "../../../utils/tableGroup.js";
+import { getContentRectAfter } from "../../../konva/scene/contentBounds.js";
+import { scrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { moveToTableAction } from "../../../engine/modules/table/atom.actions.js";
+import { resizeTableGroupAction } from "../../../engine/modules/table-group/atom.actions.js";
+import { getScrollToCenter, getViewTransform } from "../minimap/minimapGeometry.js";
+//#region src/components/erd/automatic-table-placement/placementActions.ts
+function toPlacementActions(state, tables, source = "document") {
+	const groups = getTableGroupWraps(state, tables);
+	const actions = [...tables.map(({ id, x, y }) => moveToTableAction({
+		id,
+		x,
+		y
+	})), ...groups.map(({ id, x, y, width, height }) => resizeTableGroupAction({
+		id,
+		x,
+		y,
+		width,
+		height
+	}))];
+	const content = getContentRectAfter(state, tables, source, groups);
+	if (!content) return actions;
+	const origin = getScrollToCenter(getViewTransform(state, source), {
+		x: content.x + content.width / 2,
+		y: content.y + content.height / 2
+	});
+	return [...actions, scrollToAction({
+		originX: origin.x,
+		originY: origin.y
+	})];
+}
+//#endregion
+export { toPlacementActions };

package/dist/components/erd/automatic-table-placement/runElkPlacement.d.ts

@@ -1,12 +1,13 @@
 import { AppContext } from '../../appContext';
 import { ElkLayoutPoint, ElkPlacement } from '../../../services/elk-layout';
+import { LayoutByElkOptions } from './elkPlacement';
 /**
  * Places every table by ELK and hands the layout straight over. No preview
  * overlay: one layout arrives at once, there is nothing to weigh before it
  * lands, and a single undo puts every table back.
  *
  * @example
- * runElkPlacement(app.value, placement, handleChangeAutomaticTablePlacement);
+ * runElkPlacement(app.value, placement, handleChange, { signal });
  */
-export declare function runElkPlacement(app: AppContext, placement: ElkPlacement, onChange: (tables: ElkLayoutPoint[]) => void): Promise<void>;
+export declare function runElkPlacement(app: AppContext, placement: ElkPlacement, onChange: (tables: ElkLayoutPoint[]) => void, { signal }?: Pick<LayoutByElkOptions, 'signal'>): Promise<void>;
 //# sourceMappingURL=runElkPlacement.d.ts.map

package/dist/components/erd/automatic-table-placement/runElkPlacement.js

@@ -0,0 +1,30 @@
+import { localized } from "../../localized/Localized.js";
+import { openStatusToast } from "../../toast-container/openStatusToast.js";
+import { createElkLayoutRequest, toTablePoints } from "../../../services/elk-layout/elkGraph.js";
+import { layoutByElk } from "./elkPlacement.js";
+//#region src/components/erd/automatic-table-placement/runElkPlacement.tsx
+async function runElkPlacement(app, placement, onChange, { signal } = {}) {
+	const { store, emitter } = app;
+	const request = createElkLayoutRequest(store.state, placement);
+	if (!request.nodes.length) {
+		openStatusToast(emitter, {
+			key: "common.toast.noTablesToPlace",
+			title: localized("common.toast.noTablesToPlace")
+		});
+		return;
+	}
+	const answer = await layoutByElk(app, request, { signal });
+	if (answer.status === "placed") {
+		onChange(toTablePoints(store.state, request, answer.points));
+		return;
+	}
+	if (answer.status === "cancelled") return;
+	console.warn("[automatic-table-placement] no layout came back", answer.error);
+	openStatusToast(emitter, {
+		key: "common.toast.couldNotPlaceTables",
+		tone: "error",
+		title: localized("common.toast.couldNotPlaceTables")
+	});
+}
+//#endregion
+export { runElkPlacement };

package/dist/components/erd/canvas/Canvas.d.ts

@@ -1,13 +1,19 @@
 import { FC, Ref } from '@dineug/r-html';
+import { CanvasLayers } from './CanvasScene';
+export type { CanvasLayers };
 export type CanvasProps = {
     root: Ref<HTMLDivElement>;
     canvas: Ref<HTMLDivElement>;
     grabMove?: boolean;
+    /** Drawn over the stage inside the left to right controller: the ERD tab's cell editor. */
+    overlay?: FC;
+    /** What the host adds at the scene's layers, read once as the stage mounts. */
+    layers?: CanvasLayers;
 };
 /**
  * The dom shell the scene hangs in: a controller box, the Stage container in it
- * and the editing overlay over that. Scroll and zoom moved onto the scene's
- * layers, so the shell is viewport sized rather than schema sized.
+ * and the overlay its host draws over that. Scroll and zoom moved onto the
+ * scene's layers, so the shell is viewport sized rather than schema sized.
  */
 declare const Canvas: FC<CanvasProps>;
 export default Canvas;

package/dist/components/erd/canvas/Canvas.js

@@ -0,0 +1,78 @@
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { watch } from "../../../r-html/dist/observable/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { sceneStreamScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { closeColorPickerAction } from "../../../utils/emitter.js";
+import { useAppContext } from "../../appContext.js";
+import { renderKonva } from "../../../r-html-konva/dist/host.js";
+import { trackSceneHits } from "../hitTest.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { useContextMenuRootContext } from "../../primitives/context-menu/context-menu-root/contextMenuRootContext.js";
+import { renderCanvasScene } from "./CanvasScene.js";
+import { listenMiddleButtonPan } from "./middleButtonPan.js";
+import { scopeClicksToStage } from "./stagePressScope.js";
+import "../../../konva/testHandle.js";
+import { controller, stage } from "./Canvas.styles.js";
+import { Stage } from "konva/lib/Stage";
+var Canvas = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const contextMenu = useContextMenuRootContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const handlePanPress = () => {
+		if (contextMenu.value.show) contextMenu.value.show = false;
+		if (sourceRef.value !== "document") return;
+		const { emitter } = app.value;
+		emitter.emit(closeColorPickerAction());
+	};
+	const handlePanMove = ({ event, movementX, movementY }) => {
+		event.type === "mousemove" && event.preventDefault();
+		if (movementX === 0 && movementY === 0) return;
+		const { store } = app.value;
+		store.dispatch(sceneStreamScrollToAction(sourceRef.value, {
+			movementX,
+			movementY
+		}));
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { viewport } = store.state.editor;
+		const $stage = new Stage({
+			container: props.canvas.value,
+			width: viewport.width,
+			height: viewport.height
+		});
+		renderCanvasScene($stage, {
+			root: props.root,
+			layers: props.layers
+		});
+		addUnsubscribe(trackSceneHits($stage), scopeClicksToStage($stage), listenMiddleButtonPan(props.canvas.value, handlePanMove, handlePanPress), watch(viewport).subscribe(() => {
+			$stage.size({
+				width: viewport.width,
+				height: viewport.height
+			});
+		}), () => {
+			renderKonva($stage, null);
+			$stage.destroy();
+		});
+	});
+	return () => {
+		const { store } = app.value;
+		const { viewport } = store.state.editor;
+		const Overlay = props.overlay;
+		const size = {
+			width: `${viewport.width}px`,
+			height: `${viewport.height}px`,
+			"min-width": `${viewport.width}px`,
+			"min-height": `${viewport.height}px`
+		};
+		return html`<div class=${controller} .dir="ltr" style=${{
+			...size,
+			"pointer-events": props.grabMove ? "none" : "auto"
+		}}><div class=${stage} data-testid="erd-canvas" ${ref(props.canvas)} style=${size}></div>${Overlay ? html`<${Overlay} />` : null}</div>`;
+	};
+};
+//#endregion
+export { Canvas as default };

package/dist/components/erd/canvas/Canvas.styles.js

@@ -0,0 +1,15 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/canvas/Canvas.styles.ts
+var stage = css`
+  position: relative;
+  background-color: var(--canvas-background);
+  top: 0;
+  left: 0;
+  will-change: transform;
+`;
+var root = stage;
+var controller = css`
+  will-change: transform;
+`;
+//#endregion
+export { controller, root, stage };

package/dist/components/erd/canvas/CanvasScene.d.ts

@@ -1,12 +1,37 @@
 import { FC, Ref } from '@dineug/r-html';
 import { Stage } from 'konva/lib/Stage';
+import { DrawRelationship } from '../../../engine/modules/editor/state';
+/**
+ * What a host adds at the layers of its scene, beside what every scene draws.
+ * The ERD tab hands in its editing and presence parts, the Flow its particles
+ * and marquee, and a scene that edits nothing hands in none.
+ */
+export type CanvasLayers = {
+    /** A layer of its own between the bottom layer and the scene: the Flow's particles. */
+    beneath?: FC;
+    /** In the scene layer over the connectors, a relationship draw's preview once it has a start. */
+    relationshipDraw?: FC<{
+        root: Ref<HTMLDivElement>;
+        draw: DrawRelationship;
+    }>;
+    /** In the drag layer under what a drag carries, where it would drop tables into groups. */
+    dropTarget?: FC;
+    /** A layer of its own in screen space, measured against the root: the marquee. */
+    marquee?: FC<{
+        root: Ref<HTMLDivElement>;
+    }>;
+    /** A layer of its own at document points, on top: collaborators and the ghosts drags carry. */
+    presence?: FC[];
+};
 export type CanvasSceneProps = {
     root: Ref<HTMLDivElement>;
+    /** Read once, as the stage mounts the scene. */
+    layers?: CanvasLayers;
 };
 /**
- * The layers of the canvas, four over the document and four under a view,
- * plus the one a drag opens. Each carries the canvas transform but the
- * marquee, which stays in screen space where its own mousemove measures.
+ * The layers of the canvas: the bottom one, the scene and the one a drag
+ * opens, with those the host's layers add. Each carries the canvas transform
+ * but the marquee's, which stays in screen space where its mousemove measures.
  */
 declare const CanvasScene: FC<CanvasSceneProps>;
 /**

package/dist/components/erd/canvas/CanvasScene.js

@@ -0,0 +1,80 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { Show } from "../../../constants/schema.js";
+import { isHighLevelTable } from "../../../utils/validation.js";
+import { cache } from "../../../r-html/dist/render/directives/node/cache.js";
+import { repeat } from "../../../r-html/dist/render/directives/node/repeat.js";
+import { bHas } from "../../../utils/bit.js";
+import { getHighlightIds, getVisibleIds, relationshipColumnIdsByTable } from "../../../konva/scene/viewLayout.js";
+import { getTableGroupMemberIds, isTableGroupShown } from "../../../utils/tableGroup.js";
+import { getCullingRect, getSceneOrigin, getSceneTransform, isMemoVisible, isTableVisible } from "../../../konva/scene/viewport.js";
+import { getSelectTypeIds } from "../../../engine/modules/editor/utils/selection.js";
+import { useAppContext } from "../../appContext.js";
+import { konva, renderKonva } from "../../../r-html-konva/dist/host.js";
+import { isEntityDragActive } from "./entityDrag.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import Memo from "./memo/Memo.js";
+import { stopTransitions } from "./highlightTransition.js";
+import RelationshipGroup from "./relationship-group/RelationshipGroup.js";
+import Table from "./table/Table.js";
+import TableGroups from "./table-group/TableGroups.js";
+import { stackTablesAndMemos, stackedKey } from "../../../konva/scene/stacking.js";
+import HighLevelTable from "./high-level-table/HighLevelTable.js";
+import { createRetentionPool } from "./sceneRetention.js";
+//#region src/components/erd/canvas/CanvasScene.tsx
+var CanvasScene = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const retention = createRetentionPool();
+	const { addUnsubscribe } = useUnmounted();
+	const { beneath: Beneath, relationshipDraw: RelationshipDraw, dropTarget: DropTarget, marquee: Marquee, presence: presenceParts = [] } = props.layers ?? {};
+	addUnsubscribe(() => {
+		if (sourceRef.value === "document") return;
+		stopTransitions(app.value.store.state.editor.id);
+	});
+	return () => {
+		const { store } = app.value;
+		const { state } = store;
+		const { editor: { drawRelationship }, collections } = state;
+		const source = sourceRef.value;
+		const transform = getSceneTransform(state, source);
+		const { zoomLevel } = transform;
+		const showRelationship = source !== "document" || bHas(state.settings.show, Show.relationship);
+		const { tableIds, memoIds, relationshipIds, tableGroupIds } = getVisibleIds(state, source);
+		const cullingRect = getCullingRect(state, source);
+		const dragIds = isEntityDragActive(state, source) ? /* @__PURE__ */ new Set([...Object.keys(state.editor.selectedMap), ...source === "document" ? getSelectTypeIds(state.editor.selectedMap).tableGroupIds.flatMap((id) => getTableGroupMemberIds(state, id)) : []]) : null;
+		const dragging = Boolean(dragIds?.size);
+		const tableEntities = query(collections).collection("tableEntities").selectByIds(tableIds);
+		const drawnIds = new Set(tableEntities.filter((table) => isTableVisible(cullingRect, state, table, source)).map((table) => table.id));
+		const retainedIds = retention.retain(drawnIds, new Set(tableIds));
+		const allTables = tableEntities.filter((table) => drawnIds.has(table.id) || retainedIds.has(table.id));
+		const allMemos = query(collections).collection("memoEntities").selectByIds(memoIds).filter((memo) => isMemoVisible(cullingRect, memo));
+		const allRelationships = query(collections).collection("relationshipEntities").selectByIds(relationshipIds);
+		const groupShown = Boolean(tableGroupIds.length) && isTableGroupShown(state);
+		const liveGroupIds = groupShown && source === "document" ? new Set(tableGroupIds) : null;
+		const groupIdOf = (table) => liveGroupIds?.has(table.groupId) ? table.groupId : "";
+		const isMoving = ({ start, end }) => Boolean(dragIds?.has(start.tableId) || dragIds?.has(end.tableId));
+		const tables = dragging ? allTables.filter((table) => !dragIds?.has(table.id)) : allTables;
+		const memos = dragging ? allMemos.filter((memo) => !dragIds?.has(memo.id)) : allMemos;
+		const relationships = dragging ? allRelationships.filter((relationship) => !isMoving(relationship)) : allRelationships;
+		const dragTables = dragging ? allTables.filter((table) => dragIds?.has(table.id)) : [];
+		const dragMemos = dragging ? allMemos.filter((memo) => dragIds?.has(memo.id)) : [];
+		const dragRelationships = dragging ? allRelationships.filter(isMoving) : [];
+		const groupDrag = groupShown && dragging && tableGroupIds.some((id) => dragIds?.has(id));
+		const dropTarget = dragging && groupShown && source === "document" && !store.getReadonly();
+		const lit = source === "document" ? null : getHighlightIds(state, source);
+		const isLitTable = (id) => lit?.tableIds.has(id) ?? false;
+		const related = source === "document" ? null : relationshipColumnIdsByTable(state);
+		const highLevel = source === "document" && isHighLevelTable(zoomLevel);
+		const presence = source === "document" && presenceParts.length > 0;
+		const tableShape = (table) => cache(highLevel ? konva`<${HighLevelTable} .table=${table} .visible=${drawnIds.has(table.id)} />` : konva`<${Table} .table=${table} .visible=${drawnIds.has(table.id)} .lit=${isLitTable(table.id)} .relatedColumnIds=${related?.get(table.id) ?? null} .tableGroupId=${groupIdOf(table)} />`);
+		const entityShapes = (list) => repeat(list, stackedKey, (item) => item.kind === "table" ? konva`${tableShape(item.entity)}` : konva`<${Memo} .memo=${item.entity} />`);
+		const { x, y } = getSceneOrigin(transform);
+		return konva`<k-layer name="canvas-background" x=${x} y=${y} scaleX=${zoomLevel} scaleY=${zoomLevel}>${groupDrag ? konva`<${TableGroups} />` : null}${dragging && showRelationship ? konva`<${RelationshipGroup} .relationships=${dragRelationships} .viewport=${cullingRect} .litIds=${lit?.relationshipIds} />` : null}</k-layer>${Beneath ? konva`<${Beneath} />` : null}<k-layer name="scene" x=${x} y=${y} scaleX=${zoomLevel} scaleY=${zoomLevel}>${groupShown && !groupDrag ? konva`<${TableGroups} />` : null}${showRelationship ? konva`<${RelationshipGroup} .relationships=${relationships} .viewport=${cullingRect} .litIds=${lit?.relationshipIds} />` : null}${RelationshipDraw && source === "document" && drawRelationship?.start ? konva`<${RelationshipDraw} .root=${props.root} .draw=${drawRelationship} />` : null}${entityShapes(stackTablesAndMemos(tables, memos))}</k-layer>${dragging ? konva`<k-layer name="drag-entity" x=${x} y=${y} scaleX=${zoomLevel} scaleY=${zoomLevel}>${DropTarget && dropTarget ? konva`<${DropTarget} />` : null}${entityShapes(stackTablesAndMemos(dragTables, dragMemos))}</k-layer>` : null}${Marquee ? konva`<k-layer name="overlay-marquee" listening=${false}><${Marquee} .root=${props.root} /></k-layer>` : null}${presence ? konva`<k-layer name="presence" listening=${false} x=${x} y=${y} scaleX=${zoomLevel} scaleY=${zoomLevel}>${repeat(presenceParts, (part) => part, (Part) => konva`<${Part} />`)}</k-layer>` : null}`;
+	};
+};
+function renderCanvasScene(stage, props) {
+	renderKonva(stage, konva`<${CanvasScene} .root=${props.root} .layers=${props.layers} />`);
+}
+//#endregion
+export { CanvasScene as default, renderCanvasScene };

package/dist/components/erd/canvas/DiffOutline.template.js

@@ -0,0 +1,5 @@
+import { konva } from "../../../r-html-konva/dist/host.js";
+//#region src/components/erd/canvas/DiffOutline.template.tsx
+var diffOutlineRect = ({ name, stroke, width, height, cornerRadius }) => stroke ? konva`<k-rect name=${name} x=${-1} y=${-1} width=${width + 2} height=${height + 2} cornerRadius=${cornerRadius} stroke=${stroke} strokeWidth=${2} listening=${false} />` : null;
+//#endregion
+export { diffOutlineRect };