@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/theme-builder/ThemeBuilder.styles.js

@@ -0,0 +1,100 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../styles/elevation.styles.js";
+import { typography } from "../../styles/typography.styles.js";
+//#region src/components/theme-builder/ThemeBuilder.styles.ts
+var root = css`
+  position: absolute;
+  top: 46px;
+  inset-inline-start: 16px;
+  z-index: 1;
+  padding: 12px;
+  background-color: var(--context-menu-background);
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  ${floatingShadow};
+  width: 360px;
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+`;
+var title = css`
+  color: var(--active);
+  ${typography.normal};
+`;
+var close = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 4px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--context-menu-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--input-active);
+    outline-offset: 1px;
+  }
+`;
+var subTitle = css`
+  margin-top: 12px;
+  color: var(--foreground);
+  ${typography.paragraph};
+`;
+var palette = css`
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: repeat(10, minmax(0, 1fr));
+  gap: 8px;
+`;
+var color = css`
+  border-radius: 9999px;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  border: 1px solid transparent;
+
+  &.selected {
+    outline: solid 2px var(--gray-color-12);
+  }
+`;
+var appearanceButtonGroup = css`
+  margin-top: 8px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(max-content, 1fr));
+  gap: 8px;
+`;
+var appearanceButton = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  height: 32px;
+  padding-inline: 8px;
+  ${typography.paragraph};
+
+  &:hover {
+    background-color: var(--column-hover);
+  }
+
+  &.selected {
+    border-color: var(--gray-color-12);
+  }
+`;
+var vertical = css`
+  width: 4px;
+  height: 100%;
+`;
+//#endregion
+export { appearanceButton, appearanceButtonGroup, close, color, header, palette, root, subTitle, title, vertical };

package/dist/components/themeContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "../r-html/dist/context/createContext.js";
+import { useContext } from "../r-html/dist/context/useContext.js";
+//#region src/components/themeContext.ts
+var themeContext = createContext({});
+var useThemeContext = (ctx) => useContext(ctx, themeContext);
+//#endregion
+export { themeContext, useThemeContext };

package/dist/components/toast-container/ToastContainer.js

@@ -0,0 +1,46 @@
+import { uuid25 } from "../../uuid/dist/uuid25.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../r-html/dist/observable/index.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { repeat } from "../../r-html/dist/render/directives/node/repeat.js";
+import { useAppContext } from "../appContext.js";
+import { delay } from "../../utils/promise.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { useFlipAnimation } from "../../hooks/useFlipAnimation.js";
+import { root } from "./ToastContainer.styles.js";
+//#region src/components/toast-container/ToastContainer.tsx
+var DEFAULT_TIME = 5e3;
+var ToastContainer = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const root$1 = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const toasts = observable([]);
+	const animationOne = /* @__PURE__ */ new Set();
+	useFlipAnimation(root$1, ".toast-container", "toast-move");
+	const handleAnimationend = (id) => {
+		animationOne.add(id);
+	};
+	const handleClose = (id) => {
+		const index = toasts.findIndex((toast) => toast.id === id);
+		if (index === -1) return;
+		animationOne.delete(id);
+		toasts.splice(index, 1);
+	};
+	onMounted(() => {
+		const { emitter } = app.value;
+		addUnsubscribe(emitter.on({ openToast: ({ payload }) => {
+			const shown = payload.key ? toasts.find((toast) => toast.key === payload.key) : void 0;
+			shown && handleClose(shown.id);
+			const toast = Object.assign({}, payload, {
+				close: payload.close ?? delay(DEFAULT_TIME),
+				id: uuid25()
+			});
+			toasts.push(toast);
+			toast.close.finally(() => handleClose(toast.id));
+		} }));
+	});
+	return () => html`<div class=${root} ${ref(root$1)} ?data-pointer-none=${toasts.length === 0}>${repeat(toasts, (toast) => toast.id, (toast) => html`<div class="toast-container" ?data-animation-one=${animationOne.has(toast.id)} @animationend=${() => handleAnimationend(toast.id)}>${toast.message}</div>`)}</div>`;
+};
+//#endregion
+export { ToastContainer as default };

package/dist/components/toast-container/ToastContainer.styles.js

@@ -0,0 +1,48 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/toast-container/ToastContainer.styles.ts
+var root = css`
+  position: absolute;
+  z-index: 2147483647;
+  bottom: 0;
+  inset-inline-end: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 390px;
+  margin: 25px;
+
+  &[data-pointer-none] {
+    pointer-events: none;
+  }
+
+  .toast-move {
+    transition: transform 0.3s;
+  }
+
+  .toast-container {
+    display: flex;
+    margin-top: 10px;
+    justify-content: flex-end;
+    animation: toastShowMove 0.3s ease;
+
+    &[data-animation-one] {
+      animation: none;
+    }
+  }
+
+  .toast-container:first-child {
+    margin-top: 0;
+  }
+
+  @keyframes toastShowMove {
+    0% {
+      transform: translateY(30px);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+`;
+//#endregion
+export { root };

package/dist/components/toast-container/openStatusToast.js

@@ -0,0 +1,28 @@
+import { html } from "../../r-html/dist/render/index.js";
+import { openToastAction } from "../../utils/emitter.js";
+import { localized } from "../localized/Localized.js";
+import Toast from "../primitives/toast/Toast.js";
+import { delay } from "../../utils/promise.js";
+//#region src/components/toast-container/openStatusToast.tsx
+var COPIED_FOR = 2e3;
+function openStatusToast(emitter, { key, title, description, tone, close }) {
+	emitter.emit(openToastAction({
+		key,
+		close,
+		message: html`<${Toast} .tone=${tone} .title=${title} .description=${description} />`
+	}));
+}
+function reportCopy(emitter, copying) {
+	return copying.then(() => openStatusToast(emitter, {
+		key: "copy",
+		tone: "success",
+		title: localized("common.toast.copied"),
+		close: delay(COPIED_FOR)
+	}), () => openStatusToast(emitter, {
+		key: "copy",
+		tone: "error",
+		title: localized("common.toast.copyFailed")
+	}));
+}
+//#endregion
+export { openStatusToast, reportCopy };

package/dist/components/toast-container/openToastWhileRunning.js

@@ -0,0 +1,20 @@
+import { openToastAction } from "../../utils/emitter.js";
+import { delay } from "../../utils/promise.js";
+//#region src/components/toast-container/openToastWhileRunning.ts
+var SHOW_AFTER = 400;
+var MIN_VISIBLE = 600;
+var settle = (promise) => promise.then(() => {}, () => {});
+function openToastWhileRunning(emitter, running, message) {
+	const settled = settle(running);
+	return Promise.race([settled.then(() => false), delay(SHOW_AFTER).then(() => true)]).then((slow) => {
+		if (!slow) return;
+		const close = Promise.all([settled, delay(MIN_VISIBLE)]).then(() => {});
+		emitter.emit(openToastAction({
+			message,
+			close
+		}));
+		return close;
+	});
+}
+//#endregion
+export { openToastWhileRunning };

package/dist/components/toolbar/Toolbar.js

@@ -0,0 +1,120 @@
+import { KeyBindingName, toShortcutTitle } from "../../utils/keyboard-shortcut/index.js";
+import { CanvasType } from "../../constants/schema.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { Open } from "../../constants/open.js";
+import { changeCanvasTypeAction, changeDatabaseNameAction } from "../../engine/modules/settings/atom.actions.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { unselectAllAction$ } from "../../engine/modules/editor/generator.actions.js";
+import { openLocalePickerAction, openThemeBuilderAction, toggleSearchAction } from "../../utils/emitter.js";
+import { useAppContext } from "../appContext.js";
+import { isEntrySheet } from "../dictionary/sheets.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { dictionaryViewOf } from "../dictionary/dictionaryView.js";
+import { isTakenOver } from "../../utils/takeover.js";
+import { isExplorerPressed, toggleExplorer } from "../explorer/explorerCommands.js";
+import { databaseName, menu, root, vertical } from "./Toolbar.styles.js";
+//#region src/components/toolbar/Toolbar.tsx
+var Toolbar = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const handleChangeDatabaseName = (event) => {
+		const el = event.target;
+		if (!el) return;
+		const { store } = app.value;
+		store.dispatch(changeDatabaseNameAction({ value: el.value }));
+	};
+	const handleChangeCanvasType = (value) => {
+		const { store } = app.value;
+		store.dispatch(changeCanvasTypeAction({ value }));
+	};
+	const onDictionaryTab = () => app.value.store.state.settings.canvasType === CanvasType.dictionary;
+	const shownSheet = () => {
+		if (!onDictionaryTab()) return null;
+		const { sheet } = dictionaryViewOf(app.value);
+		return isEntrySheet(sheet) ? sheet : null;
+	};
+	const handleUndo = () => {
+		const { store } = app.value;
+		const sheet = shownSheet();
+		if (sheet) store.undoSheet(sheet);
+		else if (!onDictionaryTab()) store.undo();
+	};
+	const handleRedo = () => {
+		const { store } = app.value;
+		const sheet = shownSheet();
+		if (sheet) store.redoSheet(sheet);
+		else if (!onDictionaryTab()) store.redo();
+	};
+	const keepFocus = (event) => {
+		if (onDictionaryTab()) event.preventDefault();
+	};
+	const handleUnselectAll = () => {
+		const { store } = app.value;
+		store.dispatch(unselectAllAction$());
+	};
+	const handleSearch = () => {
+		const { emitter } = app.value;
+		emitter.emit(toggleSearchAction());
+	};
+	const handleExplorer = () => {
+		toggleExplorer(app.value.store);
+	};
+	const keepSelection = (event) => event.stopPropagation();
+	const handleTheme = () => {
+		const { emitter } = app.value;
+		emitter.emit(openThemeBuilderAction());
+	};
+	const handleLocale = () => {
+		const { emitter } = app.value;
+		emitter.emit(openLocalePickerAction());
+	};
+	const handleOpenTimeTravel = () => {
+		const { store } = app.value;
+		const { editor } = store.state;
+		if (editor.hasUndo || editor.hasRedo) store.dispatch(changeOpenMapAction({ [Open.timeTravel]: true }));
+	};
+	return () => {
+		const { store, keyBindingMap } = app.value;
+		const { settings, editor } = store.state;
+		const { t, dir } = i18n.value;
+		const title = (name, keyBindingName) => toShortcutTitle(keyBindingMap, name, keyBindingName);
+		const mirrored = dir === "rtl";
+		const showAutomaticTablePlacement = editor.openMap[Open.automaticTablePlacement];
+		const showTableProperties = editor.openMap[Open.tableProperties];
+		const showTimeTravel = editor.openMap[Open.timeTravel];
+		const showDiffViewer = editor.openMap[Open.diffViewer];
+		const showDocumentHistory = settings.canvasType === CanvasType.ERD && !showAutomaticTablePlacement && !showTableProperties && !showDiffViewer && !showTimeTravel && !props.readonly;
+		const onDictionary = settings.canvasType === CanvasType.dictionary && !props.readonly;
+		const sheet = onDictionary ? shownSheet() : null;
+		let has = editor;
+		if (sheet) has = editor.dictionaryHistory[sheet];
+		else if (onDictionary) has = {
+			hasUndo: false,
+			hasRedo: false
+		};
+		const showUndoRedo = showDocumentHistory || onDictionary;
+		return html`<div class=${["toolbar", root]} @mousedown=${handleUnselectAll} @touchstart=${handleUnselectAll}>${props.readonly ? html`<div class=${databaseName} title=${settings.databaseName || t("toolbar.databaseName")} aria-label=${t("toolbar.databaseName")} style=${{ width: `150px` }} .dir="auto" ?data-empty=${!settings.databaseName}>${settings.databaseName || t("toolbar.databaseName")}</div>` : html`<input title=${t("toolbar.databaseName")} placeholder=${t("toolbar.databaseName")} style=${{ width: `150px` }} type="text" spellcheck="false" .dir="auto" .value=${settings.databaseName ?? ""} @input=${handleChangeDatabaseName} />`}<div class=${vertical}></div><div class=${[menu, { active: settings.canvasType === CanvasType.ERD }]} title=${t("common.tab.erd")} @click=${() => handleChangeCanvasType(CanvasType.ERD)}><${Icon} .name="workflow" .size=${16} /></div><div class=${[menu, { active: settings.canvasType === CanvasType.visualization }]} title=${t("common.tab.visualization")} @click=${() => handleChangeCanvasType(CanvasType.visualization)}><${Icon} .name="share-2" .size=${16} /></div><div class=${[menu, { active: settings.canvasType === CanvasType.schemaSQL }]} title=${t("common.tab.schemaSql")} @click=${() => handleChangeCanvasType(CanvasType.schemaSQL)}><${Icon} .name="database" .size=${16} /></div><div class=${[menu, { active: settings.canvasType === CanvasType.generatorCode }]} title=${t("common.tab.codeGenerator")} @click=${() => handleChangeCanvasType(CanvasType.generatorCode)}><${Icon} .name="code" .size=${16} /></div><div class=${[menu, { active: settings.canvasType === CanvasType.dictionary }]} title=${t("common.tab.dictionary")} @click=${() => handleChangeCanvasType(CanvasType.dictionary)}><${Icon} .name="book-type" .size=${16} /></div><div class=${[menu, { active: settings.canvasType === CanvasType.settings }]} title=${t("common.tab.settings")} @click=${() => handleChangeCanvasType(CanvasType.settings)}><${Icon} .name="settings" .size=${16} /></div><div class=${vertical}></div><div class=${["toolbar-search", menu]} title=${title(t("common.search"), KeyBindingName.search)} @click=${handleSearch}><${Icon} .name="search" .size=${16} /></div><div class=${[
+			"toolbar-explorer",
+			menu,
+			{
+				active: isExplorerPressed(store),
+				disabled: isTakenOver(store.state)
+			}
+		]} title=${title(t("explorer.title"), KeyBindingName.findReplace)} @mousedown=${keepSelection} @touchstart=${keepSelection} @click=${handleExplorer}><${Icon} .name="list-tree" .size=${16} /></div>${props.enableThemeBuilder ? html`<div class=${["toolbar-theme", menu]} title=${t("common.theme")} @click=${handleTheme}><${Icon} .name="contrast" .size=${16} /></div>` : null}${props.enableLocalePicker ? html`<div class=${["toolbar-locale", menu]} title=${t("common.displayLanguage")} @click=${handleLocale}><${Icon} .name="languages" .size=${16} /></div>` : null}<div class=${vertical}></div>${showUndoRedo ? html`<div class=${[
+			"undo-redo",
+			menu,
+			{ active: has.hasUndo }
+		]} title=${title(t("toolbar.undo"), KeyBindingName.undo)} @mousedown=${keepFocus} @click=${handleUndo}>${mirrored ? html`<${Icon} .name="redo-2" .size=${16} />` : html`<${Icon} .name="undo-2" .size=${16} />`}</div><div class=${[
+			"undo-redo",
+			menu,
+			{ active: has.hasRedo }
+		]} title=${title(t("toolbar.redo"), KeyBindingName.redo)} @mousedown=${keepFocus} @click=${handleRedo}>${mirrored ? html`<${Icon} .name="undo-2" .size=${16} />` : html`<${Icon} .name="redo-2" .size=${16} />`}</div>${showDocumentHistory ? html`<div class=${[
+			"undo-redo",
+			menu,
+			{ active: editor.hasUndo || editor.hasRedo }
+		]} title=${t("toolbar.timeTravel")} style=${{ "max-width": "26px" }} @click=${handleOpenTimeTravel}><${Icon} .name="rotate-ccw-clock" .size=${16} /></div>` : null}` : null}</div>`;
+	};
+};
+//#endregion
+export { Toolbar as default };

package/dist/components/toolbar/Toolbar.styles.d.ts

@@ -1,4 +1,5 @@
 export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const databaseName: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const vertical: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
 //# sourceMappingURL=Toolbar.styles.d.ts.map

package/dist/components/toolbar/Toolbar.styles.js

@@ -0,0 +1,68 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/toolbar/Toolbar.styles.ts
+var root = css`
+  display: flex;
+  width: 100%;
+  height: ${30}px;
+  min-height: ${30}px;
+  padding: 0 15px;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: var(--toolbar-background);
+
+  & > input {
+    margin-inline-end: 15px;
+  }
+`;
+var databaseName = css`
+  /* the field's font: the control font each engine gives an input, in the reset's family */
+  font: -moz-field;
+  font: -webkit-small-control;
+  font-family: var(--text-font-family);
+  flex-shrink: 0;
+  margin-inline-end: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--active);
+
+  &[data-empty] {
+    color: var(--placeholder);
+  }
+`;
+var vertical = css`
+  width: 10px;
+  height: 100%;
+`;
+var menu = css`
+  cursor: pointer;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &.active {
+    color: var(--active);
+  }
+  &:hover {
+    color: var(--active);
+  }
+
+  &.undo-redo {
+    cursor: not-allowed;
+    color: var(--foreground);
+  }
+
+  &.undo-redo.active {
+    cursor: pointer;
+    color: var(--active);
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    color: var(--foreground);
+    opacity: 0.4;
+  }
+`;
+//#endregion
+export { databaseName, menu, root, vertical };

package/dist/components/visualization/Visualization.js

@@ -0,0 +1,39 @@
+import { KeyBindingName } from "../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { Open } from "../../constants/open.js";
+import { CenterStep, VisualizationMode } from "../../engine/modules/editor/state.js";
+import { useAppContext } from "../appContext.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { stepFlowView } from "../flowCenters.js";
+import "../../constants/zoom.js";
+import { root } from "./Visualization.styles.js";
+import { setVisualizationZoom, stepVisualizationZoom } from "./zoomVisualization.js";
+import VisualizationToolbar from "./visualization-toolbar/VisualizationToolbar.js";
+import VisualizationFlow from "./VisualizationFlow.js";
+import VisualizationGraph from "./VisualizationGraph.js";
+//#region src/components/visualization/Visualization.tsx
+var Visualization = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const handleShortcut = ({ type }) => {
+		const { editor } = app.value.store.state;
+		if (editor.openMap[Open.search]) return;
+		if (editor.visualizationMode === VisualizationMode.flow) {
+			type === KeyBindingName.undo && stepFlowView(app.value, CenterStep.previous);
+			type === KeyBindingName.redo && stepFlowView(app.value, CenterStep.next);
+		}
+		type === KeyBindingName.zoomIn && stepVisualizationZoom(app.value, .04);
+		type === KeyBindingName.zoomOut && stepVisualizationZoom(app.value, -.04);
+		type === KeyBindingName.zoomReset && setVisualizationZoom(app.value, 1);
+	};
+	onMounted(() => {
+		addUnsubscribe(app.value.shortcut$.subscribe(handleShortcut));
+	});
+	return () => {
+		const { visualizationMode } = app.value.store.state.editor;
+		return html`<div class=${root}>${visualizationMode === VisualizationMode.flow ? html`<${VisualizationFlow} />` : html`<${VisualizationGraph} />`}<${VisualizationToolbar} /></div>`;
+	};
+};
+//#endregion
+export { Visualization as default };

package/dist/components/visualization/Visualization.styles.js

@@ -0,0 +1,16 @@
+import { css } from "../../r-html/dist/template/css.js";
+//#region src/components/visualization/Visualization.styles.ts
+var root = css`
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--canvas-background);
+`;
+var stage = css`
+  position: relative;
+  top: 0;
+  left: 0;
+  touch-action: none;
+`;
+//#endregion
+export { root, stage };

package/dist/components/visualization/VisualizationFlow.js

@@ -0,0 +1,44 @@
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.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 { ViewKind } from "../../engine/modules/editor/state.js";
+import { useAppContext } from "../appContext.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { sceneSourceContext } from "../sceneSourceContext.js";
+import Canvas from "../erd/canvas/Canvas.js";
+import DragSelect from "../erd/canvas/drag-select/DragSelect.js";
+import { root } from "../erd/Erd.styles.js";
+import { ensureFlowPlaced, keepFlowPlaced } from "./flowLayout.js";
+import ParticleLayer from "./particles/ParticleLayer.js";
+import { useViewGestures } from "./useViewGestures.js";
+//#region src/components/visualization/VisualizationFlow.tsx
+var SOURCE = ViewKind.flow;
+var FLOW_LAYERS = {
+	beneath: ParticleLayer,
+	marquee: DragSelect
+};
+var FlowScene = (props, ctx) => {
+	const sceneSource = useProvider(ctx, sceneSourceContext, SOURCE);
+	const { addUnsubscribe } = useUnmounted();
+	addUnsubscribe(() => sceneSource.destroy());
+	return () => html`<${Canvas} .root=${props.root} .canvas=${props.canvas} .layers=${FLOW_LAYERS} />`;
+};
+var VisualizationFlow = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const root$1 = createRef();
+	const canvas = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const { handleWheel, handleMousedown } = useViewGestures(ctx, {
+		root: root$1,
+		canvas,
+		source: SOURCE
+	});
+	onMounted(() => {
+		ensureFlowPlaced(app.value);
+		addUnsubscribe(keepFlowPlaced(app.value));
+	});
+	return () => html`<div class=${root} ${ref(root$1)} @mousedown=${handleMousedown} @touchstart=${handleMousedown} @wheel=${handleWheel}><${FlowScene} .root=${root$1} .canvas=${canvas} /></div>`;
+};
+//#endregion
+export { VisualizationFlow as default };

package/dist/components/visualization/VisualizationGraph.js

@@ -0,0 +1,109 @@
+import { query } from "../../erd-editor-schema/dist/query/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 { html } from "../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../r-html/dist/render/directives/attribute/ref.js";
+import { hasViewport } from "../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../appContext.js";
+import { renderKonva } from "../../r-html-konva/dist/host.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { createPinch, isPinchWheel, pinchWheelScale } from "../../utils/pinch.js";
+import "../../konva/testHandle.js";
+import { root, stage } from "./Visualization.styles.js";
+import { createVisualization } from "./createVisualization.js";
+import { createView, createVisualizationState, wheelZoomFactor, zoomAt } from "./visualizationView.js";
+import { registerGraphView, unregisterGraphView } from "./graphViewHandle.js";
+import Table from "./table/Table.js";
+import { renderVisualizationScene } from "./VisualizationScene.js";
+import { Stage } from "konva/lib/Stage";
+var MARGIN = 20;
+var VisualizationGraph = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const canvas = createRef();
+	const state = observable(createVisualizationState(0, 0), { shallow: true });
+	const handleWheel = (event) => {
+		event.preventDefault();
+		const rect = canvas.value.getBoundingClientRect();
+		const point = {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+		const factor = isPinchWheel(event) ? pinchWheelScale(event) : wheelZoomFactor(event.deltaY, event.deltaMode);
+		Object.assign(state, zoomAt(state, point, factor));
+	};
+	const pinch = createPinch(() => canvas.value, (center) => {
+		const from = {
+			x: state.x,
+			y: state.y,
+			scale: state.scale
+		};
+		return ({ scale, center: now }) => {
+			const view = zoomAt(from, center, scale);
+			Object.assign(state, {
+				...view,
+				x: view.x + now.x - center.x,
+				y: view.y + now.y - center.y
+			});
+		};
+	});
+	onMounted(() => {
+		const { store } = app.value;
+		const { id, viewport } = store.state.editor;
+		const $graph = createVisualization(store.state);
+		const $stage = new Stage({
+			container: canvas.value,
+			width: viewport.width,
+			height: viewport.height
+		});
+		Object.assign(state, createView(viewport.width, viewport.height));
+		let centred = hasViewport(viewport);
+		$graph.simulation.on("tick", () => {
+			state.tick += 1;
+		});
+		renderVisualizationScene($stage, {
+			graph: $graph,
+			state
+		});
+		addUnsubscribe(pinch.listen());
+		const handle = {
+			state,
+			nodes: () => {
+				state.tick;
+				return $graph.nodes;
+			}
+		};
+		registerGraphView(id, handle);
+		addUnsubscribe(watch(viewport).subscribe(() => {
+			$stage.size({
+				width: viewport.width,
+				height: viewport.height
+			});
+			if (centred || !hasViewport(viewport)) return;
+			centred = true;
+			const { x, y } = createView(viewport.width, viewport.height);
+			Object.assign(state, {
+				x,
+				y
+			});
+		}), () => {
+			unregisterGraphView(id, handle);
+			$graph.simulation.stop();
+			renderKonva($stage, null);
+			$stage.destroy();
+		});
+	});
+	return () => {
+		const { store } = app.value;
+		const { collections } = store.state;
+		const { viewport } = store.state.editor;
+		const table = state.hoveredTableId ? query(collections).collection("tableEntities").selectById(state.hoveredTableId) : null;
+		const showPreview = table && !state.drag;
+		return html`<div class=${root} .dir="ltr" @touchstart=${pinch.handleTouchstart} @wheel=${handleWheel}><div class=${stage} data-testid="visualization-canvas" ${ref(canvas)} style=${{
+			width: `${viewport.width}px`,
+			height: `${viewport.height}px`
+		}}></div>${showPreview ? html`<${Table} .table=${table} .x=${state.previewX + MARGIN} .y=${state.previewY} />` : null}</div>`;
+	};
+};
+//#endregion
+export { VisualizationGraph as default };