@dineug/erd-editor 4.1.0 → 5.0.0

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

@@ -0,0 +1,139 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { toJson } from "../../../erd-editor-schema/dist/parser.js";
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { useProvider } from "../../../r-html/dist/context/useProvider.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { Open } from "../../../constants/open.js";
+import { getContentRect } from "../../../konva/scene/contentBounds.js";
+import { changeZoomLevelAction, scrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { changeOpenMapAction, changeViewportAction } from "../../../engine/modules/editor/atom.actions.js";
+import { initialLoadJsonAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { openToastAction } from "../../../utils/emitter.js";
+import { appContext, appDestroy, createAppContext } from "../../appContext.js";
+import { sourceI18n } from "../../../i18n/source.js";
+import { useI18n } from "../../localeContext.js";
+import { localized } from "../../localized/Localized.js";
+import Toast from "../../primitives/toast/Toast.js";
+import { closePromise } from "../../../utils/promise.js";
+import { openStatusToast } from "../../toast-container/openStatusToast.js";
+import { sceneInteractionContext } from "../../sceneInteractionContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { sceneSourceContext } from "../../sceneSourceContext.js";
+import Canvas from "../canvas/Canvas.js";
+import { getScrollToCenter, getViewTransform } from "../minimap/minimapGeometry.js";
+import Minimap from "../minimap/Minimap.js";
+import { readerNameViewAction } from "../readerNameView.js";
+import Button from "../../primitives/button/Button.js";
+import { previewZoomLevel } from "../../../konva/scene/fitZoom.js";
+import { container, root } from "./AutomaticTablePlacement.styles.js";
+import { createAutomaticTablePlacement, placementProgress } from "./createAutomaticTablePlacement.js";
+//#region src/components/erd/automatic-table-placement/AutomaticTablePlacement.tsx
+var EMPTY_RECT = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0
+};
+var centerOfRect = ({ x, y, width, height }) => ({
+	x: x + width / 2,
+	y: y + height / 2
+});
+function placementDescription({ progress }, i18n = sourceI18n) {
+	return i18n.t("feedback.placingProgress", { percent: Math.round(progress * 100) });
+}
+var PlacementToast = (props, ctx) => {
+	const i18n = useI18n(ctx);
+	return () => html`<${Toast} .progress=${props.state.progress} .title=${placementDescription(props.state, i18n.value)} .action=${html`<${Button} .size="1" .text=${i18n.value.t("common.apply")} .onClick=${props.onApply} /><${Button} .variant="soft" .size="1" .text=${i18n.value.t("common.cancel")} .onClick=${props.onCancel} />`} />`;
+};
+var AutomaticTablePlacement = (props, ctx) => {
+	const root$1 = createRef();
+	const canvas = createRef();
+	const originApp = props.app.value;
+	const app = createAppContext({ toWidth: originApp.toWidth });
+	const { addUnsubscribe } = useUnmounted();
+	const provider = useProvider(ctx, appContext, app);
+	const sceneSource = useProvider(ctx, sceneSourceContext, "document");
+	const sceneInteraction = useProvider(ctx, sceneInteractionContext, "edit");
+	const { store: { state: originState } } = originApp;
+	const { store } = app;
+	const getViewport = () => ({ ...originApp.store.state.editor.viewport });
+	addUnsubscribe(watch(originApp.store.state.editor.viewport).subscribe(() => {
+		app.store.dispatch(changeViewportAction(getViewport()));
+	}), () => {
+		sceneInteraction.destroy();
+		sceneSource.destroy();
+		provider.destroy();
+		appDestroy(app);
+	});
+	const contentRect = getContentRect(originState) ?? EMPTY_RECT;
+	const zoomLevel = previewZoomLevel(contentRect, originState.editor.viewport);
+	const previewOrigin = getScrollToCenter({
+		...getViewTransform(originState),
+		zoomLevel
+	}, centerOfRect(contentRect));
+	store.dispatchSync(initialLoadJsonAction$(toJson(originState)), readerNameViewAction(store.state, originState), changeViewportAction(getViewport()), changeZoomLevelAction({ value: zoomLevel }), scrollToAction({
+		originX: previewOrigin.x,
+		originY: previewOrigin.y
+	}));
+	const { doc: { tableIds }, collections } = store.state;
+	const tables = query(collections).collection("tableEntities").selectByIds(tableIds);
+	const [close, onClose] = closePromise();
+	let isClosed = false;
+	let stopSimulation = () => {};
+	addUnsubscribe(() => {
+		isClosed = true;
+		stopSimulation();
+		onClose();
+	});
+	const handleClose = () => {
+		isClosed = true;
+		onClose();
+		originApp.store.dispatch(changeOpenMapAction({ [Open.automaticTablePlacement]: false }));
+	};
+	if (!tables.length) {
+		handleClose();
+		openStatusToast(originApp.emitter, {
+			key: "common.toast.noTablesToPlace",
+			title: localized("common.toast.noTablesToPlace")
+		});
+		return () => null;
+	}
+	const toast = observable({ progress: 0 });
+	try {
+		const simulation = createAutomaticTablePlacement(store.state);
+		stopSimulation = () => simulation.stop();
+		const handleApply = () => {
+			simulation.stop();
+			if (isClosed) return;
+			props.onChange(tables.map((table) => ({
+				id: table.id,
+				x: table.ui.x,
+				y: table.ui.y
+			})));
+			handleClose();
+		};
+		const handleCancel = () => {
+			simulation.stop();
+			handleClose();
+		};
+		simulation.on("tick.progress", () => {
+			toast.progress = placementProgress(simulation);
+		});
+		simulation.on("end", handleApply);
+		originApp.emitter.emit(openToastAction({
+			close,
+			message: html`<${PlacementToast} .state=${toast} .onApply=${handleApply} .onCancel=${handleCancel} />`
+		}));
+		addUnsubscribe(originApp.shortcut$.subscribe(({ type }) => {
+			type === KeyBindingName.stop && handleCancel();
+		}));
+	} catch (e) {
+		handleClose();
+		return () => null;
+	}
+	return () => html`<div class=${root} .dir="ltr"><div class=${container} ${ref(root$1)}><${Canvas} .root=${root$1} .canvas=${canvas} .grabMove=${true} /><${Minimap} /></div></div>`;
+};
+//#endregion
+export { AutomaticTablePlacement as default, placementDescription };

package/dist/components/erd/automatic-table-placement/AutomaticTablePlacement.styles.js

@@ -0,0 +1,22 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/automatic-table-placement/AutomaticTablePlacement.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--canvas-boundary-background);
+`;
+var container = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  pointer-events: none;
+`;
+//#endregion
+export { container, root };

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.d.ts

@@ -1,14 +1,14 @@
 import { AppContext } from '../../appContext';
 import { ElkLayoutPoint, ElkLayoutRequest } from '../../../services/elk-layout';
 /**
- * What a Flow placement of a document asks ELK, measured on a plain store of
- * its own with the editor's text measure, so nothing reaches the editor's
- * store. Null under two tables or with no relationship, the grid's cases.
+ * What a Flow placement of a document asks ELK, measured in the reader's name
+ * view on a plain store of its own with the editor's text measure, so nothing
+ * reaches the editor's store. Null under two tables or with no relationship, the grid's cases.
  *
  * @example
  * const request = createFlowRequest(app, json);
  */
-export declare function createFlowRequest({ toWidth }: AppContext, json: string): ElkLayoutRequest | null;
+export declare function createFlowRequest({ toWidth, store }: AppContext, json: string): ElkLayoutRequest | null;
 /**
  * Where each table of a document not loaded yet goes by Flow, measured from
  * the corner of the block the tables make, so the caller decides where that

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 };