@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/Erd.js

@@ -0,0 +1,431 @@
+import { KeyBindingName, isMod } from "../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.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 { isEditingText } from "../../engine/modules/editor/state.js";
+import { hasContent } from "../../konva/scene/contentBounds.js";
+import { getSceneTransform, toScenePoint } from "../../konva/scene/viewport.js";
+import { streamScrollToAction } from "../../engine/modules/settings/atom.actions.js";
+import { changeDrawTableGroupAction, changeOpenMapAction, initialLoadJsonAction, sharedMouseTrackerAction } from "../../engine/modules/editor/atom.actions.js";
+import { selectTableGroupAction$ } from "../../engine/modules/table-group/generator.actions.js";
+import { getDocumentColors } from "../../engine/modules/editor/utils/color.js";
+import { changeColorAllAction$, removeColorAllAction$, unselectAllAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { streamZoomLevelAction$ } from "../../engine/modules/settings/generator.actions.js";
+import "../../engine/rx-store.js";
+import { closeColorPickerAction, dragSelectStartAction } from "../../utils/emitter.js";
+import { useAppContext } from "../appContext.js";
+import { editorRootOf, isMainButtonPress, isMiddleButtonPress, isMouseEvent, preventMiddleLift, suppressSelection } from "../../utils/domEvent.js";
+import { listenSceneHover, ownsPress, sceneHit } from "./hitTest.js";
+import { drag$, moveEnd$ } from "../../utils/globalEventObservable.js";
+import { sceneInteractionContext } from "../sceneInteractionContext.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { sceneSourceContext } from "../sceneSourceContext.js";
+import { clearRelationshipHighlight } from "./relationshipHighlight.js";
+import { useContextMenuRootProvider } from "../primitives/context-menu/context-menu-root/contextMenuRootContext.js";
+import Canvas from "./canvas/Canvas.js";
+import Minimap from "./minimap/Minimap.js";
+import AutomaticTablePlacement from "./automatic-table-placement/AutomaticTablePlacement.js";
+import { toPlacementActions } from "./automatic-table-placement/placementActions.js";
+import { isElkPlacement } from "../../services/elk-layout/elkLayoutOptions.js";
+import { runElkPlacement } from "./automatic-table-placement/runElkPlacement.js";
+import { editingLayers } from "./canvas/editingLayers.js";
+import EditOverlay from "./canvas/EditOverlay.js";
+import { createViewPress } from "./canvas/readPress.js";
+import VirtualScroll from "./virtual-scroll/VirtualScroll.js";
+import { usePinchZoom } from "../../hooks/usePinchZoom.js";
+import DiffViewer from "./diff-viewer/DiffViewer.js";
+import { isTakenOver } from "../../utils/takeover.js";
+import DrawTargetButtons from "./draw-target/DrawTargetButtons.js";
+import ErdContextMenu, { ErdContextMenuType, READING_MENU_TYPES } from "./erd-context-menu/ErdContextMenu.js";
+import { WHEEL_ZOOM_STEP } from "../../constants/zoom.js";
+import FloatingToolbar from "./floating-toolbar/FloatingToolbar.js";
+import TableGroupDraft from "./table-group/TableGroupDraft.js";
+import { useTableGroupDraw } from "./table-group/useTableGroupDraw.js";
+import TableProperties from "./table-properties/TableProperties.js";
+import TimeTravel from "./time-travel/TimeTravel.js";
+import { isEmptyDocument } from "./welcome-screen/welcomeLayout.js";
+import WelcomeScreen from "./welcome-screen/WelcomeScreen.js";
+import ColorPicker from "../primitives/color-picker/ColorPicker.js";
+import { getRelationshipIcon } from "../../utils/icon.js";
+import { root } from "./Erd.styles.js";
+import { useErdShortcut } from "./useErdShortcut.js";
+import { fromEvent, take, throttleTime } from "rxjs";
+//#region src/components/erd/Erd.tsx
+var SOURCE = "document";
+var TAKEOVER_CHROME = [
+	".diff-viewer-tree",
+	".time-travel-slider",
+	".content-compass",
+	".minimap",
+	".minimap-viewport",
+	".virtual-scroll"
+].join(", ");
+var Erd = (props, ctx) => {
+	const contextMenu = useContextMenuRootProvider(ctx);
+	const sceneSource = useProvider(ctx, sceneSourceContext, SOURCE);
+	const root$1 = createRef();
+	const canvas = createRef();
+	const app = useAppContext(ctx);
+	const sceneInteraction = useProvider(ctx, sceneInteractionContext, () => app.value.store.getReadonly() ? "read" : "edit");
+	const state = observable({
+		contextMenuType: ErdContextMenuType.ERD,
+		relationshipId: "",
+		tableId: "",
+		columnId: "",
+		memoId: "",
+		tableGroupId: "",
+		colorPickerShow: false,
+		colorPickerX: 0,
+		colorPickerY: 0,
+		colorPickerViewport: null,
+		colorPickerInitialColor: "",
+		colorPickerDocumentColors: [],
+		tablePropertiesId: "",
+		tablePropertiesIds: [],
+		grabCursor: "grab",
+		diffValue: "{}"
+	});
+	useErdShortcut(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	addUnsubscribe(() => {
+		sceneInteraction.destroy();
+		sceneSource.destroy();
+	});
+	const resetScroll = () => {
+		const $root = root$1.value;
+		if (!$root) return;
+		if ($root.scrollTop === 0 && $root.scrollLeft === 0) return;
+		$root.scrollTop = 0;
+		$root.scrollLeft = 0;
+	};
+	const getShowOverLayout = () => {
+		const { state } = app.value.store;
+		return isTakenOver(state) || Boolean(state.editor.openMap[Open.tableProperties]);
+	};
+	const interactive = () => props.interactive?.() ?? true;
+	const pinch = usePinchZoom({
+		app: () => app.value,
+		root: root$1,
+		enabled: () => !getShowOverLayout(),
+		interactive
+	});
+	const groupDraw = useTableGroupDraw({
+		app: () => app.value,
+		root: root$1
+	});
+	const editorRoot = { get value() {
+		return root$1.value && editorRootOf(root$1.value);
+	} };
+	let pinched = false;
+	const readPress = createViewPress({
+		app: app.value,
+		root: editorRoot,
+		canvas,
+		pinches: () => pinched,
+		pansBeforeFocus: true
+	});
+	let stopHover = null;
+	const listenHover = (readonly) => {
+		stopHover?.();
+		stopHover = readonly ? listenSceneHover(canvas.value, readPress.handleHover) : null;
+	};
+	addUnsubscribe(() => {
+		stopHover?.();
+		readPress.destroy();
+	});
+	const drawsTableGroup = () => {
+		const { store } = app.value;
+		return store.state.editor.drawTableGroup && !store.getReadonly();
+	};
+	const cancelTableGroupDraw = () => {
+		const { store } = app.value;
+		if (store.state.editor.drawTableGroup) store.dispatch(changeDrawTableGroupAction({ value: false }));
+	};
+	const elkRuns = /* @__PURE__ */ new Set();
+	const cancelElkRuns = () => {
+		elkRuns.forEach((run) => run.abort());
+		elkRuns.clear();
+	};
+	addUnsubscribe(cancelElkRuns);
+	const handleReadonlyTurn = () => {
+		readPress.cancel();
+		listenHover(props.readonly);
+		readPress.reset();
+		if (!props.readonly) return;
+		cancelTableGroupDraw();
+		if (!READING_MENU_TYPES.has(state.contextMenuType)) contextMenu.state.show = false;
+	};
+	let swallowContextmenu = false;
+	const handleContextmenu = (event) => {
+		if (swallowContextmenu || drawsTableGroup()) {
+			swallowContextmenu = false;
+			event.preventDefault();
+			return;
+		}
+		if (!event.target || getShowOverLayout()) return;
+		const hit = sceneHit(canvas.value, event);
+		const type = hit?.kind ?? ErdContextMenuType.ERD;
+		if (props.readonly && !READING_MENU_TYPES.has(type)) {
+			event.preventDefault();
+			return;
+		}
+		if (hit?.kind === "table") {
+			state.tableId = hit.id;
+			state.columnId = hit.columnId;
+		} else if (hit?.kind === "memo") state.memoId = hit.id;
+		else if (hit?.kind === "relationship") state.relationshipId = hit.id;
+		else if (hit?.kind === "tableGroup") {
+			const { store } = app.value;
+			if (!store.state.editor.selectedMap[hit.id]) store.dispatch(selectTableGroupAction$(hit.id, false));
+			state.tableGroupId = hit.id;
+		}
+		state.contextMenuType = type;
+		contextMenu.onContextmenu(event);
+	};
+	const handleContextmenuClose = () => {
+		contextMenu.state.show = false;
+	};
+	const handleDiffViewerClose = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.diffViewer]: false }));
+		state.diffValue = "{}";
+	};
+	const handleTimeTravelClose = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.timeTravel]: false }));
+	};
+	const handleWheel = (event) => {
+		if (pinch.handleWheel(event) || !interactive() || getShowOverLayout()) return;
+		event.preventDefault();
+		const $mod = isMod(event);
+		const { store } = app.value;
+		const isReverse = event.shiftKey && event.deltaX === 0 && event.deltaY !== 0;
+		store.dispatch($mod ? streamZoomLevelAction$(event.deltaY < 0 ? WHEEL_ZOOM_STEP : -WHEEL_ZOOM_STEP) : streamScrollToAction(isReverse ? {
+			movementX: event.deltaY * -1,
+			movementY: event.deltaX * -1
+		} : {
+			movementX: event.deltaX * -1,
+			movementY: event.deltaY * -1
+		}));
+	};
+	const handleMove = ({ event, movementX, movementY }) => {
+		const { store } = app.value;
+		event.type === "mousemove" && event.preventDefault();
+		if (movementX === 0 && movementY === 0) return;
+		store.dispatch(streamScrollToAction({
+			movementX,
+			movementY
+		}));
+		resetScroll();
+	};
+	const handleReadPress = (event, el) => {
+		pinched = pinch.handleTouchstart(event);
+		if (!getShowOverLayout()) readPress.handlePress(event);
+		if (isMiddleButtonPress(event) && isTakenOver(app.value.store.state) && !el.closest(TAKEOVER_CHROME)) {
+			event.preventDefault();
+			moveEnd$.pipe(take(1)).subscribe(preventMiddleLift());
+		}
+	};
+	const handleDragSelect = (event) => {
+		const el = event.target;
+		swallowContextmenu = false;
+		if (!el) return;
+		if (props.readonly) return handleReadPress(event, el);
+		if (pinch.handleTouchstart(event)) return;
+		const showOverLayout = getShowOverLayout();
+		const canHideColorPicker = !el.closest(".color-picker");
+		const onEntity = ownsPress(sceneHit(canvas.value, event), event);
+		const onEditor = Boolean(el.closest(".edit-overlay"));
+		const canUnselectAll = !onEntity && !onEditor && !el.closest(".edit-input") && !el.closest(".context-menu-content") && !el.closest(".draw-target") && canHideColorPicker;
+		const canDrag = canUnselectAll && canHideColorPicker && !el.closest(".content-compass") && !el.closest(".floating-toolbar") && !el.closest(".minimap") && !el.closest(".minimap-viewport") && !el.closest(".virtual-scroll") && !el.closest(".welcome-screen-menu") && !showOverLayout;
+		const middlePress = isMiddleButtonPress(event);
+		const middlePan = canDrag && middlePress;
+		const middleOverTakeover = canUnselectAll && middlePress && isTakenOver(app.value.store.state) && !el.closest(TAKEOVER_CHROME);
+		const unselects = canUnselectAll && !middlePan && !middleOverTakeover;
+		if (unselects) {
+			const { store } = app.value;
+			store.dispatch(unselectAllAction$());
+		}
+		const { editor } = app.value.store.state;
+		if (!editor.handTool && (unselects || onEntity && !middlePress)) clearRelationshipHighlight(editor.id);
+		if (canHideColorPicker) {
+			const { emitter } = app.value;
+			emitter.emit(closeColorPickerAction());
+		}
+		if (middleOverTakeover) {
+			event.preventDefault();
+			moveEnd$.pipe(take(1)).subscribe(preventMiddleLift());
+		}
+		if (!canDrag) return;
+		if (middlePan) event.preventDefault();
+		if (drawsTableGroup() && !middlePan) {
+			if (isMainButtonPress(event)) groupDraw.start(event);
+			else {
+				swallowContextmenu = true;
+				cancelTableGroupDraw();
+			}
+			return;
+		}
+		if (!middlePan && isMouseEvent(event) && isMod(event)) {
+			event.preventDefault();
+			const { emitter } = app.value;
+			const { x, y } = root$1.value.getBoundingClientRect();
+			emitter.emit(dragSelectStartAction({
+				x: event.clientX - x,
+				y: event.clientY - y,
+				source: SOURCE
+			}));
+		} else {
+			if (app.value.store.state.editor.handTool) state.grabCursor = "grabbing";
+			const restoreSelection = suppressSelection(editorRootOf(root$1.value));
+			const pan = drag$.subscribe({
+				next: handleMove,
+				complete: () => {
+					state.grabCursor = "grab";
+				}
+			});
+			pan.add(restoreSelection);
+			if (middlePan) pan.add(preventMiddleLift());
+		}
+	};
+	const handleChangeColorPicker = (color) => {
+		const { store } = app.value;
+		store.dispatch(changeColorAllAction$(color));
+	};
+	const handleCloseColorPicker = () => {
+		state.colorPickerShow = false;
+	};
+	const handleClearColorPicker = () => {
+		const { store } = app.value;
+		store.dispatch(removeColorAllAction$());
+		state.colorPickerShow = false;
+	};
+	const handleColorPickerShortcut = ({ type }) => {
+		const { editor } = app.value.store.state;
+		if (type === KeyBindingName.removeSelection || type === KeyBindingName.removeTable || type === KeyBindingName.stop && !editor.openMap[Open.search] && !isEditingText(editor) && !editor.drawRelationship && !editor.drawTableGroup) state.colorPickerShow = false;
+	};
+	const handleChangeAutomaticTablePlacement = (tables) => {
+		const { store } = app.value;
+		if (store.getReadonly()) return;
+		store.dispatch(toPlacementActions(store.state, tables, SOURCE));
+	};
+	const handleChangeTableProperties = (tableId) => {
+		state.tablePropertiesId = tableId;
+	};
+	const handleChangeTimeTravel = (cursor) => {
+		const { store } = app.value;
+		const { history } = store;
+		let count = 0;
+		while (history.cursor !== cursor && count <= 2048) {
+			history.cursor < cursor ? history.redo() : history.undo();
+			count++;
+		}
+	};
+	let mouseTrackerSubscription = null;
+	const handleMouseTrackerEnd = () => {
+		mouseTrackerSubscription?.unsubscribe();
+		mouseTrackerSubscription = null;
+	};
+	const handleMouseTrackerStart = () => {
+		const { store } = app.value;
+		const $root = root$1.value;
+		if (!$root) return;
+		handleMouseTrackerEnd();
+		mouseTrackerSubscription = fromEvent($root, "mousemove").pipe(throttleTime(100, void 0, {
+			leading: false,
+			trailing: true
+		})).subscribe((event) => {
+			const rect = $root.getBoundingClientRect();
+			const scenePoint = toScenePoint(getSceneTransform(store.state, SOURCE), {
+				x: event.clientX - rect.x,
+				y: event.clientY - rect.y
+			});
+			store.dispatch(sharedMouseTrackerAction(scenePoint));
+		});
+	};
+	onMounted(() => {
+		const { store, emitter, shortcut$ } = app.value;
+		const $root = root$1.value;
+		if (props.mouseTracking) handleMouseTrackerStart();
+		listenHover(props.readonly);
+		addUnsubscribe(watch(props).subscribe((propName) => {
+			if (propName === "readonly") handleReadonlyTurn();
+			if (propName !== "mouseTracking") return;
+			props.mouseTracking ? handleMouseTrackerStart() : handleMouseTrackerEnd();
+		}), shortcut$.subscribe(handleColorPickerShortcut), store.subscribe((actions) => {
+			if (props.readonly && actions.some(({ type }) => type === initialLoadJsonAction.type)) readPress.reset();
+		}), emitter.on({
+			openColorPicker: ({ payload: { x, y, color } }) => {
+				if (props.readonly) return;
+				const open = () => {
+					const rect = $root.getBoundingClientRect();
+					state.colorPickerX = x - rect.x;
+					state.colorPickerY = y - rect.y;
+					state.colorPickerViewport = store.state.editor.viewport;
+					state.colorPickerInitialColor = color;
+					state.colorPickerDocumentColors = getDocumentColors(store.state);
+					state.colorPickerShow = true;
+				};
+				if (state.colorPickerShow) {
+					state.colorPickerShow = false;
+					nextTick(open);
+				} else open();
+			},
+			closeColorPicker: () => {
+				state.colorPickerShow = false;
+			},
+			cancelElkPlacement: cancelElkRuns,
+			openTableProperties: ({ payload: { tableId } }) => {
+				const { doc } = store.state;
+				const tablePropertiesIds = state.tablePropertiesIds.filter((id) => doc.tableIds.includes(id));
+				if (tablePropertiesIds.includes(tableId)) {
+					const index = tablePropertiesIds.indexOf(tableId);
+					tablePropertiesIds.splice(index, 1);
+				}
+				tablePropertiesIds.unshift(tableId);
+				state.tablePropertiesIds = tablePropertiesIds.slice(0, 5);
+				state.tablePropertiesId = tableId;
+			},
+			openDiffViewer: ({ payload: { value } }) => {
+				state.diffValue = value;
+				store.dispatch(changeOpenMapAction({ [Open.diffViewer]: true }));
+			},
+			openAutomaticTablePlacement: ({ payload: { placement } }) => {
+				if (isElkPlacement(placement)) {
+					const run = new AbortController();
+					elkRuns.add(run);
+					runElkPlacement(app.value, placement, handleChangeAutomaticTablePlacement, { signal: run.signal }).finally(() => elkRuns.delete(run));
+					return;
+				}
+				store.dispatch(changeOpenMapAction({ [Open.automaticTablePlacement]: true }));
+			}
+		}));
+	});
+	const rootCursor = () => {
+		const { handTool, drawRelationship } = app.value.store.state.editor;
+		if (readPress.state.panning) return "grabbing";
+		if (handTool) return state.grabCursor;
+		if (drawsTableGroup()) return "crosshair";
+		if (!drawRelationship) return "";
+		return `url("${getRelationshipIcon(drawRelationship.relationshipType, props.isDarkMode)}") 16 16, auto`;
+	};
+	return () => {
+		const { store } = app.value;
+		const { handTool, openMap, zenMode } = store.state.editor;
+		const showAutomaticTablePlacement = openMap[Open.automaticTablePlacement];
+		const showTableProperties = openMap[Open.tableProperties];
+		const showTimeTravel = openMap[Open.timeTravel];
+		const showDiffViewer = openMap[Open.diffViewer];
+		const showMinimap = hasContent(store.state) && !zenMode;
+		const showFloatingToolbar = !getShowOverLayout();
+		const showWelcomeScreen = Boolean(props.enableWelcomeScreen) && !app.value.lifecycle.destroyed && !props.readonly && !zenMode && !getShowOverLayout() && isEmptyDocument(store.state);
+		const drawsGroup = drawsTableGroup();
+		return html`<div class=${root} style=${{ cursor: rootCursor() }} ${ref(root$1)} @contextmenu=${handleContextmenu} @mousedown=${contextMenu.onMousedown} @mousedown=${handleDragSelect} @touchstart=${handleDragSelect} @wheel=${handleWheel}><${Canvas} .root=${root$1} .canvas=${canvas} .grabMove=${handTool || drawsGroup} .overlay=${props.readonly ? void 0 : EditOverlay} .layers=${editingLayers} /><${DrawTargetButtons} .root=${root$1} .readonly=${props.readonly} />${drawsGroup ? html`<${TableGroupDraft} .draw=${groupDraw.state} />` : null}${zenMode ? null : html`<${VirtualScroll} />`}${showMinimap ? html`<${Minimap} />` : null}${showWelcomeScreen ? html`<${WelcomeScreen} .enableThemeBuilder=${props.enableThemeBuilder} .enableLocalePicker=${props.enableLocalePicker} />` : null}${showFloatingToolbar ? html`<${FloatingToolbar} />` : null}${contextMenu.state.show ? html`<${ErdContextMenu} .type=${state.contextMenuType} .relationshipId=${state.relationshipId} .tableId=${state.tableId} .columnId=${state.columnId} .memoId=${state.memoId} .tableGroupId=${state.tableGroupId} .onClose=${handleContextmenuClose} />` : null}${state.colorPickerShow ? html`<${ColorPicker} .color=${state.colorPickerInitialColor} .x=${state.colorPickerX} .y=${state.colorPickerY} .viewport=${state.colorPickerViewport} .keyBindingMap=${app.value.keyBindingMap} .documentColors=${state.colorPickerDocumentColors} .onChange=${handleChangeColorPicker} .onClear=${handleClearColorPicker} .onClose=${handleCloseColorPicker} />` : null}${showAutomaticTablePlacement ? html`<div><${AutomaticTablePlacement} .app=${app} .onChange=${handleChangeAutomaticTablePlacement} /></div>` : null}${showTableProperties ? html`<${TableProperties} .tableId=${state.tablePropertiesId} .tableIds=${state.tablePropertiesIds} .isDarkMode=${props.isDarkMode} .readonly=${props.readonly} .onChange=${handleChangeTableProperties} />` : null}${showDiffViewer ? html`<div><${DiffViewer} .app=${app} .initialValue=${state.diffValue} .onClose=${handleDiffViewerClose} /></div>` : null}${showTimeTravel ? html`<div><${TimeTravel} .app=${app} .onChange=${handleChangeTimeTravel} .onClose=${handleTimeTravelClose} /></div>` : null}</div>`;
+	};
+};
+//#endregion
+export { Erd as default };

package/dist/components/erd/Erd.styles.js

@@ -0,0 +1,12 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/erd/Erd.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  touch-action: none;
+`;
+//#endregion
+export { root };

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