@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/visualization/visualization-toolbar/VisualizationToolbar.js

@@ -0,0 +1,184 @@
+import { KeyBindingName, toShortcutTitle } from "../../../utils/keyboard-shortcut/index.js";
+import { toZoomFormat } from "../../../utils/validation.js";
+import { onMounted, onUpdated } 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 { Open } from "../../../constants/open.js";
+import { CenterStep, ShowMode, ViewKind, VisualizationMode } from "../../../engine/modules/editor/state.js";
+import { changeVisualizationModeAction, viewChangeShowModeAction } from "../../../engine/modules/editor/view.actions.js";
+import { getSceneTransform } from "../../../konva/scene/viewport.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { middlePanPress$ } from "../../../utils/globalEventObservable.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { canStepFlowView, showAllFlowView, stepFlowView } from "../../flowCenters.js";
+import ContextMenuContent from "../../primitives/context-menu/context-menu-content/ContextMenuContent.js";
+import ContextMenu from "../../primitives/context-menu/ContextMenu.js";
+import { getContentCompass, scrollToNearestContent } from "../../erd/content-compass/compassGeometry.js";
+import { bar, divider, menu, readout } from "../../erd/view-controls/viewControls.styles.js";
+import { useNameViewDropdown } from "../../erd/view-controls/nameViewDropdown.js";
+import { toolbarCompass } from "../../erd/view-controls/ToolbarCompass.template.js";
+import { ZOOM_STEP } from "../../../constants/zoom.js";
+import { ensureFlowPlaced, fitFlowView } from "../flowLayout.js";
+import { centerGraphView, fitGraphView, graphCompass } from "../visualizationView.js";
+import { getGraphView, updateGraphView } from "../graphViewHandle.js";
+import { setVisualizationZoom, stepVisualizationZoom } from "../zoomVisualization.js";
+import { showModeLabel, showModeMenu, showModeTrigger } from "./VisualizationToolbar.styles.js";
+import { fromEvent } from "rxjs";
+//#region src/components/visualization/visualization-toolbar/VisualizationToolbar.tsx
+var ICON_SIZE = 16;
+var CHEVRON_SIZE = 12;
+var MENU_ICON_SIZE = 14;
+var MENU_GAP = 8;
+var SHOW_MODES = [
+	{
+		value: ShowMode.nameOnly,
+		titleKey: "visualization.showMode.nameOnly"
+	},
+	{
+		value: ShowMode.keysOnly,
+		titleKey: "visualization.showMode.keysOnly"
+	},
+	{
+		value: ShowMode.allFields,
+		titleKey: "visualization.showMode.allFields"
+	}
+];
+var STEP_TOOLS = {
+	[CenterStep.previous]: {
+		titleKey: "visualization.previousTable",
+		keyBindingName: KeyBindingName.undo
+	},
+	[CenterStep.next]: {
+		titleKey: "visualization.nextTable",
+		keyBindingName: KeyBindingName.redo
+	}
+};
+var STEP_ARROWS = ["arrow-left", "arrow-right"];
+var stepsOf = (dir) => dir === "rtl" ? [CenterStep.next, CenterStep.previous] : [CenterStep.previous, CenterStep.next];
+var showModeOf = (value) => SHOW_MODES.find((mode) => mode.value === value) ?? SHOW_MODES[0];
+var VisualizationToolbar = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const $bar = createRef();
+	const $trigger = createRef();
+	const $menu = createRef();
+	const nameView = useNameViewDropdown(ctx);
+	const state = observable({
+		showModeOpen: false,
+		menuX: 0,
+		menuY: 0
+	});
+	const isFlow = () => app.value.store.state.editor.visualizationMode === VisualizationMode.flow;
+	const handleMode = (value) => () => {
+		const { store } = app.value;
+		state.showModeOpen = false;
+		nameView.close();
+		store.dispatch(changeVisualizationModeAction({ value }));
+	};
+	const handleZoom = (step) => () => {
+		stepVisualizationZoom(app.value, step);
+	};
+	const handleZoomReset = () => {
+		setVisualizationZoom(app.value, 1);
+	};
+	const handleFit = () => {
+		const { store } = app.value;
+		if (isFlow()) {
+			fitFlowView(store);
+			return;
+		}
+		const { editor } = store.state;
+		updateGraphView(editor.id, ({ nodes }) => fitGraphView(nodes(), editor.viewport));
+	};
+	const handleTidyUp = () => {
+		ensureFlowPlaced(app.value, { force: true });
+	};
+	const moveMenuToTrigger = () => {
+		const trigger = $trigger.value;
+		if (!trigger) return;
+		const rect = trigger.getBoundingClientRect();
+		const x = rect.left + rect.width / 2;
+		const y = rect.top - MENU_GAP;
+		if (state.menuX !== x) state.menuX = x;
+		if (state.menuY !== y) state.menuY = y;
+	};
+	const handleShowModeTrigger = () => {
+		if (state.showModeOpen) {
+			state.showModeOpen = false;
+			return;
+		}
+		if (!$trigger.value) return;
+		moveMenuToTrigger();
+		state.showModeOpen = true;
+	};
+	const handleShowMode = (value) => () => {
+		const { store } = app.value;
+		state.showModeOpen = false;
+		store.dispatch(viewChangeShowModeAction({
+			value,
+			kind: ViewKind.flow
+		}));
+	};
+	const handlePress = (event) => {
+		if (!state.showModeOpen) return;
+		const target = event.target;
+		if (!target) return;
+		if ($menu.value?.contains(target) || $trigger.value?.contains(target)) return;
+		state.showModeOpen = false;
+	};
+	const handleShortcut = ({ type }) => {
+		if (type !== KeyBindingName.stop) return;
+		if (app.value.store.state.editor.openMap[Open.search]) return;
+		state.showModeOpen = false;
+	};
+	const handleShowAll = () => {
+		showAllFlowView(app.value);
+	};
+	const handleStep = (step) => () => {
+		stepFlowView(app.value, step);
+	};
+	const handleCompass = () => {
+		const { store } = app.value;
+		if (isFlow()) {
+			scrollToNearestContent(store, ViewKind.flow);
+			return;
+		}
+		const { editor } = store.state;
+		updateGraphView(editor.id, ({ state, nodes }) => {
+			const compass = graphCompass(state, nodes(), editor.viewport);
+			return compass ? centerGraphView(state, compass.target, editor.viewport) : null;
+		});
+	};
+	onMounted(() => {
+		const root = $bar.value.getRootNode();
+		addUnsubscribe(app.value.shortcut$.subscribe(handleShortcut), fromEvent(root, "mousedown").subscribe(handlePress), middlePanPress$(root).subscribe(handlePress));
+	});
+	onUpdated(() => {
+		if (!state.showModeOpen) return;
+		moveMenuToTrigger();
+	});
+	return () => {
+		const { store, keyBindingMap } = app.value;
+		const { t, dir } = i18n.value;
+		const { editor } = store.state;
+		const title = (labelKey, keyBindingName) => toShortcutTitle(keyBindingMap, t(labelKey), keyBindingName);
+		const flow = editor.visualizationMode === VisualizationMode.flow;
+		const view = editor.views.flow;
+		const graph = getGraphView(editor.id);
+		const zoomLevel = flow ? getSceneTransform(store.state, ViewKind.flow).zoomLevel : graph.state.scale;
+		const showMode = showModeOf(view?.showMode);
+		const showAll = flow && Boolean(view?.centerIds.length);
+		const compass = flow ? getContentCompass(store.state, ViewKind.flow) : graphCompass(graph.state, graph.nodes(), editor.viewport);
+		return html`<div ${ref($bar)} class=${["visualization-toolbar", bar]} .dir="ltr"><div class=${[menu, { active: !flow }]} title=${t("visualization.graph")} @click=${handleMode(VisualizationMode.graph)}><${Icon} .name="atom" .size=${ICON_SIZE} /></div><div class=${[menu, { active: flow }]} title=${t("common.placement.flow")} @click=${handleMode(VisualizationMode.flow)}><${Icon} .name="waypoints" .size=${ICON_SIZE} /></div>${flow ? html`<div class=${divider}></div>${stepsOf(dir).map((step, index) => html`<div class=${[menu, { disabled: !canStepFlowView(app.value, step) }]} title=${title(STEP_TOOLS[step].titleKey, STEP_TOOLS[step].keyBindingName)} @click=${handleStep(step)}><${Icon} .name=${STEP_ARROWS[index]} .size=${ICON_SIZE} /></div>`)}` : null}<div class=${divider}></div><div class=${menu} title=${title("floatingToolbar.zoomOut", KeyBindingName.zoomOut)} @click=${handleZoom(-ZOOM_STEP)}><${Icon} .name="minus" .size=${ICON_SIZE} /></div><div class=${["zoom-level", readout]} title=${title("floatingToolbar.resetZoom", KeyBindingName.zoomReset)} @click=${handleZoomReset}>${toZoomFormat(zoomLevel)}</div><div class=${menu} title=${title("floatingToolbar.zoomIn", KeyBindingName.zoomIn)} @click=${handleZoom(ZOOM_STEP)}><${Icon} .name="plus" .size=${ICON_SIZE} /></div><div class=${divider}></div><div class=${menu} title=${t("visualization.fit")} @click=${handleFit}><${Icon} .name="fullscreen" .size=${ICON_SIZE} /></div>${flow ? html`<div class=${menu} title=${t("visualization.tidyUp")} @click=${handleTidyUp}><${Icon} .name="wand-sparkles" .size=${ICON_SIZE} /></div><div class=${divider}></div><div ${ref($trigger)} class=${[showModeTrigger, { active: state.showModeOpen }]} title=${t("visualization.rowDisplay", { mode: t(showMode.titleKey) })} @click=${handleShowModeTrigger}><div class=${showModeLabel}>${t(showMode.titleKey)}</div><${Icon} .name="chevron-down" .size=${CHEVRON_SIZE} /></div>${nameView.trigger()}` : null}${showAll ? html`<div class=${divider}></div><div class=${menu} title=${t("visualization.showAll")} @click=${handleShowAll}><${Icon} .name="funnel-x" .size=${ICON_SIZE} /></div>` : null}${toolbarCompass({
+			compass,
+			title: t("floatingToolbar.goToContent"),
+			onClick: handleCompass
+		})}</div>${flow ? nameView.menu() : null}${flow && state.showModeOpen ? html`<div ${ref($menu)} class=${["visualization-show-mode-menu", showModeMenu]}><${ContextMenuContent} .id="visualization-show-mode" .x=${state.menuX} .y=${state.menuY} .children=${html`${SHOW_MODES.map((mode) => html`<${ContextMenu.Item} .onClick=${handleShowMode(mode.value)} .children=${html`<${ContextMenu.Menu} .icon=${showMode.value === mode.value ? html`<${Icon} .name="check" .size=${MENU_ICON_SIZE} />` : null} .name=${t(mode.titleKey)} />`} />`)}`} /></div>` : null}`;
+	};
+};
+//#endregion
+export { VisualizationToolbar as default };

package/dist/components/visualization/visualization-toolbar/VisualizationToolbar.styles.js

@@ -0,0 +1,24 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+import { menu } from "../../erd/view-controls/viewControls.styles.js";
+//#region src/components/visualization/visualization-toolbar/VisualizationToolbar.styles.ts
+var showModeTrigger = css`
+  ${menu}
+  width: auto;
+  padding: 0 6px;
+  gap: 4px;
+`;
+var showModeLabel = css`
+  ${typography.paragraph};
+  min-width: 62px;
+  white-space: nowrap;
+  user-select: none;
+`;
+var showModeMenu = css`
+  & > .context-menu-content {
+    transform: translate(-50%, -100%);
+    z-index: 2;
+  }
+`;
+//#endregion
+export { showModeLabel, showModeMenu, showModeTrigger };

package/dist/components/visualization/visualizationView.d.ts

@@ -1,5 +1,6 @@
 import { ContentCompass } from '../erd/content-compass/compassGeometry';
 import { Viewport } from '../../engine/modules/editor/state';
+import { RootState } from '../../engine/state';
 import { Point } from '../../internal-types';
 import { Group, VisualizationLink, VisualizationNode } from './createVisualization';
 export { DIM_OPACITY } from '../../konva/scene/viewLayout';
@@ -13,10 +14,20 @@ export declare const NAME_MAX_LENGTH = 15;
  * truncateName('a_very_long_table_name'); // 'a_very_long_tab…'
  */
 export declare function truncateName(name: string): string;
-/** The text a table's label draws: its name cut to length, or the placeholder its input shows. */
-export declare function labelOf(node: Pick<VisualizationNode, 'name'>, placeholder: string): string;
-/** Whether a table has a name of its own, which is what its label is painted by. */
-export declare const hasName: (node: Pick<VisualizationNode, "name">) => boolean;
+type LabelNode = Pick<VisualizationNode, 'name' | 'logicalName'>;
+type ViewSettings = Pick<RootState['settings'], 'nameViewMode'>;
+/**
+ * The text a table's label draws in the name view: the name it shows cut to
+ * length, the name after the logical name on a second line in the view of
+ * both, or the placeholder its input shows while it shows no name.
+ */
+export declare function labelOf(node: LabelNode, placeholder: string, settings: ViewSettings): string;
+/**
+ * Whether a table's label draws a name of its own, which paints it in the
+ * foreground: not the placeholder, nor the name standing in for a blank
+ * logical name in the logical view.
+ */
+export declare function hasName(node: LabelNode, settings: ViewSettings): boolean;
 export declare const TABLE_RADIUS = 8;
 export declare const COLUMN_RADIUS = 4;
 /** A table draws larger than the columns that hang off it. */

package/dist/components/visualization/visualizationView.js

@@ -0,0 +1,152 @@
+import { toNameLabel } from "../../engine/modules/editor/utils/nameView.js";
+import { DIM_OPACITY } from "../../konva/scene/viewLayout.js";
+import { nearestContent } from "../erd/content-compass/compassGeometry.js";
+import { Group, linkEnds } from "./createVisualization.js";
+import { clamp } from "es-toolkit";
+var ELLIPSIS = "…";
+function truncateName(name) {
+	const chars = Array.from(name);
+	if (chars.length <= 15) return name;
+	return chars.slice(0, 15).join("") + ELLIPSIS;
+}
+function labelOf(node, placeholder, settings) {
+	const { text, after } = toNameLabel(settings, node);
+	const name = text.trim();
+	if (!name) return placeholder;
+	return after ? `${truncateName(name)}\n${truncateName(after.trim())}` : truncateName(name);
+}
+function hasName(node, settings) {
+	const { text, standIn } = toNameLabel(settings, node);
+	return !standIn && text.trim().length > 0;
+}
+var nodeRadius = (group) => group === Group.table ? 8 : 4;
+function highlightOf(links, tableId) {
+	const nodeIds = /* @__PURE__ */ new Set([tableId]);
+	const linkIds = /* @__PURE__ */ new Set();
+	links.forEach((link) => {
+		const [source, target] = linkEnds(link);
+		if (source.id !== tableId && target.id !== tableId) return;
+		linkIds.add(link.id);
+		nodeIds.add(source.id);
+		nodeIds.add(target.id);
+	});
+	return {
+		nodeIds,
+		linkIds
+	};
+}
+var LABEL_FADE_START = .5;
+var opacityInRange = (value) => clamp(value, 0, 1);
+function labelOpacity(scale) {
+	return opacityInRange((scale - LABEL_FADE_START) / .5);
+}
+var ZOOM_MIN = .1;
+var zoomInRange = (value) => clamp(value, ZOOM_MIN, 4);
+function createView(width, height) {
+	return {
+		x: width / 2,
+		y: height / 2,
+		scale: 1
+	};
+}
+function zoomAt(view, point, factor) {
+	const scale = zoomInRange(view.scale * factor);
+	const ratio = scale / view.scale;
+	return {
+		x: point.x - (point.x - view.x) * ratio,
+		y: point.y - (point.y - view.y) * ratio,
+		scale
+	};
+}
+function rectOfNode(node) {
+	const radius = nodeRadius(node.group);
+	return {
+		x: node.x - radius,
+		y: node.y - radius,
+		width: radius * 2,
+		height: radius * 2
+	};
+}
+var isPlaced = (node) => Number.isFinite(node.x) && Number.isFinite(node.y);
+function* placedRects(nodes) {
+	for (const node of nodes) if (isPlaced(node)) yield rectOfNode(node);
+}
+function boundsOf(nodes) {
+	let left = Infinity;
+	let top = Infinity;
+	let right = -Infinity;
+	let bottom = -Infinity;
+	for (const rect of placedRects(nodes)) {
+		left = Math.min(left, rect.x);
+		top = Math.min(top, rect.y);
+		right = Math.max(right, rect.x + rect.width);
+		bottom = Math.max(bottom, rect.y + rect.height);
+	}
+	if (left === Infinity) return null;
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+function visibleSceneRect(view, viewport) {
+	const scale = view.scale || 1;
+	return {
+		x: -view.x / scale,
+		y: -view.y / scale,
+		width: viewport.width / scale,
+		height: viewport.height / scale
+	};
+}
+function fitGraphView(nodes, viewport) {
+	const bounds = boundsOf(nodes);
+	if (!bounds || viewport.width <= 0 || viewport.height <= 0) return createView(viewport.width, viewport.height);
+	const room = {
+		width: Math.max(viewport.width - 80, 1),
+		height: Math.max(viewport.height - 80, 1)
+	};
+	const scale = zoomInRange(Math.min(room.width / Math.max(bounds.width, 1), room.height / Math.max(bounds.height, 1)));
+	return centerGraphView({
+		...createView(viewport.width, viewport.height),
+		scale
+	}, {
+		x: bounds.x + bounds.width / 2,
+		y: bounds.y + bounds.height / 2
+	}, viewport);
+}
+function centerGraphView(view, target, viewport) {
+	return {
+		x: viewport.width / 2 - target.x * view.scale,
+		y: viewport.height / 2 - target.y * view.scale,
+		scale: view.scale
+	};
+}
+function graphCompass(view, nodes, viewport) {
+	if (viewport.width <= 0 || viewport.height <= 0) return null;
+	return nearestContent(placedRects(nodes), visibleSceneRect(view, viewport));
+}
+var WHEEL_UNIT_PX = {
+	1: 16,
+	2: 800
+};
+var WHEEL_DELTA_MAX = 100;
+var wheelDeltaInRange = (value) => clamp(value, -100, WHEEL_DELTA_MAX);
+var WHEEL_ZOOM_RATE = .002;
+function wheelZoomFactor(deltaY, deltaMode = 0) {
+	const delta = wheelDeltaInRange(deltaY * (WHEEL_UNIT_PX[deltaMode] ?? 1));
+	return Math.exp(-delta * WHEEL_ZOOM_RATE);
+}
+function createVisualizationState(width, height) {
+	return {
+		...createView(width, height),
+		tick: 0,
+		drag: false,
+		hoveredId: null,
+		hoveredTableId: null,
+		previewX: 0,
+		previewY: 0
+	};
+}
+//#endregion
+export { DIM_OPACITY, LABEL_FADE_START, ZOOM_MIN, centerGraphView, createView, createVisualizationState, fitGraphView, graphCompass, hasName, highlightOf, labelOf, labelOpacity, nodeRadius, truncateName, wheelZoomFactor, zoomAt };

package/dist/components/visualization/zoomVisualization.js

@@ -0,0 +1,31 @@
+import { ViewKind, VisualizationMode } from "../../engine/modules/editor/state.js";
+import { changeZoomLevelAction$, streamZoomLevelAction$ } from "../../engine/modules/settings/generator.actions.js";
+import { zoomAt } from "./visualizationView.js";
+import { updateGraphView } from "./graphViewHandle.js";
+//#region src/components/visualization/zoomVisualization.ts
+var middleOfStage = (app) => {
+	const { viewport } = app.store.state.editor;
+	return {
+		x: viewport.width / 2,
+		y: viewport.height / 2
+	};
+};
+var isFlow = (app) => app.store.state.editor.visualizationMode === VisualizationMode.flow;
+function stepVisualizationZoom(app, step) {
+	if (isFlow(app)) {
+		app.store.dispatch(streamZoomLevelAction$(step, ViewKind.flow));
+		return;
+	}
+	const { editor } = app.store.state;
+	updateGraphView(editor.id, ({ state }) => zoomAt(state, middleOfStage(app), (state.scale + step) / state.scale));
+}
+function setVisualizationZoom(app, level) {
+	if (isFlow(app)) {
+		app.store.dispatch(changeZoomLevelAction$(level, ViewKind.flow));
+		return;
+	}
+	const { editor } = app.store.state;
+	updateGraphView(editor.id, ({ state }) => zoomAt(state, middleOfStage(app), level / state.scale));
+}
+//#endregion
+export { setVisualizationZoom, stepVisualizationZoom };

package/dist/constants/language.js

@@ -0,0 +1,28 @@
+import { Language } from "./schema.js";
+//#region src/constants/language.ts
+var LanguageToLangMap = {
+	[Language.TypeScript]: "typescript",
+	[Language.GraphQL]: "graphql",
+	[Language.csharp]: "csharp",
+	[Language.Java]: "java",
+	[Language.Kotlin]: "kotlin",
+	[Language.Scala]: "scala",
+	[Language.JPA]: "java",
+	[Language.Go]: "go",
+	[Language.SQLAlchemy]: "python",
+	[Language.TypeORM]: "typescript",
+	[Language.Sequelize]: "typescript",
+	[Language.Drizzle]: "typescript",
+	[Language.DBML]: "sql",
+	[Language.AML]: "sql",
+	[Language.Mermaid]: "mermaid",
+	[Language.PHP]: "php",
+	[Language.Doctrine]: "php",
+	[Language.Rust]: "rust",
+	[Language.SeaORM]: "rust",
+	[Language.Swift]: "swift",
+	[Language.Zod]: "typescript",
+	[Language.JSONSchema]: "json"
+};
+//#endregion
+export { LanguageToLangMap };

package/dist/constants/layout.d.ts

@@ -47,6 +47,17 @@ export declare const TABLE_COLOR_WIDTH = 4;
 export declare const TABLE_HEADER_BUTTONS_WIDTH: number;
 export declare const COLUMN_DELETE_WIDTH = 12;
 export declare const COLUMN_KEY_WIDTH = 12;
+/** The button a column drag starts from, beside the focused row and outside the table. */
+export declare const COLUMN_DRAG_HANDLE_WIDTH = 16;
+export declare const COLUMN_DRAG_HANDLE_HEIGHT = 20;
+export declare const COLUMN_DRAG_HANDLE_ICON_SIZE = 12;
+/** The room between that button and the table's left edge. */
+export declare const COLUMN_DRAG_HANDLE_GAP = 4;
+/**
+ * The strip left of a table the handle answers a press in and a column drop is
+ * judged in, so a drag that runs straight down along the handle still reorders.
+ */
+export declare const COLUMN_DRAG_HANDLE_LANE = 24;
 /** The table icon before the name, at the key badge's size so the two stand in one column. */
 export declare const TABLE_HEADER_ICON_SIZE = 12;
 /** The gap after that icon, the one a key badge keeps, which lines the name up with the column names. */

package/dist/constants/layout.js

@@ -0,0 +1,14 @@
+//#region src/constants/layout.ts
+var RATIO_WIDTH = 16;
+var RATIO_HEIGHT = 9;
+var DEFAULT_WIDTH = 1200;
+DEFAULT_WIDTH / RATIO_WIDTH * RATIO_HEIGHT;
+var COLUMN_ALTERNATE_KEY_CHAR_WIDTH = 7.32;
+var VIEW_TABLE_HEADER_FONT_SCALE = 14 / 12;
+var VIEW_TABLE_HEADER_WEIGHT_SCALE = 1.04;
+var MEMO_MIN_WIDTH = 116;
+var MEMO_MIN_HEIGHT = 100;
+var TABLE_GROUP_MIN_WIDTH = 160;
+var TABLE_GROUP_MIN_HEIGHT = 100;
+//#endregion
+export { COLUMN_ALTERNATE_KEY_CHAR_WIDTH, DEFAULT_WIDTH, MEMO_MIN_HEIGHT, MEMO_MIN_WIDTH, TABLE_GROUP_MIN_HEIGHT, TABLE_GROUP_MIN_WIDTH, VIEW_TABLE_HEADER_FONT_SCALE, VIEW_TABLE_HEADER_WEIGHT_SCALE };

package/dist/constants/open.js

@@ -0,0 +1,14 @@
+//#region src/constants/open.ts
+var Open = {
+	automaticTablePlacement: "automaticTablePlacement",
+	tableProperties: "tableProperties",
+	search: "search",
+	themeBuilder: "themeBuilder",
+	localePicker: "localePicker",
+	diffViewer: "diffViewer",
+	timeTravel: "timeTravel",
+	exportImage: "exportImage",
+	mapColumns: "mapColumns"
+};
+//#endregion
+export { Open };

package/dist/constants/schema.d.ts

@@ -5,6 +5,7 @@ export declare const CanvasType: {
     readonly schemaSQL: "@dineug/erd-editor/builtin-schema-sql";
     readonly generatorCode: "@dineug/erd-editor/builtin-generator-code";
     readonly settings: "settings";
+    readonly dictionary: "@dineug/erd-editor/builtin-dictionary";
 };
 export declare const CanvasTypeList: readonly string[];
 export declare const Show: {
@@ -21,6 +22,7 @@ export declare const Show: {
     readonly hideReferentialAction: 1024;
     readonly hideTableGroup: 2048;
     readonly hideMemo: 4096;
+    readonly columnDomain: 8192;
 };
 export declare const ColumnType: {
     readonly columnName: 1;
@@ -30,6 +32,8 @@ export declare const ColumnType: {
     readonly columnAutoIncrement: 16;
     readonly columnDefault: 32;
     readonly columnComment: 64;
+    readonly columnLogicalName: 128;
+    readonly columnDomain: 256;
 };
 export declare const ColumnTypeList: readonly number[];
 export declare const Database: {
@@ -115,6 +119,7 @@ export declare const ColumnOption: {
     readonly primaryKey: 2;
     readonly unique: 4;
     readonly notNull: 8;
+    readonly nameDerived: 16;
 };
 export declare const ColumnUIKey: {
     readonly primaryKey: 1;
@@ -132,9 +137,17 @@ export declare const LockSettingType: {
     readonly tableNameCase: 8;
     readonly columnNameCase: 16;
     readonly bracketType: 32;
+    readonly unlockNameViewMode: 64;
 };
-export declare const LockSettingTypeList: readonly number[];
-export declare const LockSettingFields: Readonly<Record<number, readonly ("zoomLevel" | "canvasType" | "language" | "bracketType" | "originX" | "originY" | "tableNameCase" | "columnNameCase")[]>>;
+export declare const LockSettingTypeList: readonly import('@dineug/erd-editor-schema').LockSettingType[];
+export declare const LockSettingFields: Readonly<Record<number, readonly ("canvasType" | "language" | "tableNameCase" | "columnNameCase" | "bracketType" | "zoomLevel" | "originX" | "originY" | "nameViewMode")[]>>;
+export declare const InvertedLockSettings: number;
+export declare const NameViewMode: {
+    readonly physical: "physical";
+    readonly logical: "logical";
+    readonly both: "both";
+};
+export declare const NameViewModeList: ReadonlyArray<ValuesType<typeof NameViewMode>>;
 export declare const CANVAS_SIZE_MAX: 20000;
 export declare const CANVAS_SIZE_MIN: 2000;
 export declare const CANVAS_ZOOM_MAX: 1.5;

package/dist/constants/schema.js

@@ -0,0 +1,54 @@
+import { SchemaV3Constants } from "../erd-editor-schema/dist/v3/schema/index.js";
+//#region src/constants/schema.ts
+var CanvasType = SchemaV3Constants.CanvasType;
+var CanvasTypeList = SchemaV3Constants.CanvasTypeList;
+var Show = SchemaV3Constants.Show;
+var ColumnType = SchemaV3Constants.ColumnType;
+var ColumnTypeList = SchemaV3Constants.ColumnTypeList;
+var Database = SchemaV3Constants.Database;
+var DatabaseList = SchemaV3Constants.DatabaseList;
+var Language = SchemaV3Constants.Language;
+var LanguageList = SchemaV3Constants.LanguageList;
+var NameCase = SchemaV3Constants.NameCase;
+var NameCaseList = SchemaV3Constants.NameCaseList;
+var BracketType = SchemaV3Constants.BracketType;
+var BracketTypeList = SchemaV3Constants.BracketTypeList;
+var RelationshipType = SchemaV3Constants.RelationshipType;
+SchemaV3Constants.RelationshipTypeList;
+var StartRelationshipType = SchemaV3Constants.StartRelationshipType;
+SchemaV3Constants.StartRelationshipTypeList;
+var ReferentialAction = SchemaV3Constants.ReferentialAction;
+SchemaV3Constants.ReferentialActionList;
+var Direction = SchemaV3Constants.Direction;
+SchemaV3Constants.DirectionList;
+var ColumnOption = SchemaV3Constants.ColumnOption;
+var ColumnUIKey = SchemaV3Constants.ColumnUIKey;
+var OrderType = SchemaV3Constants.OrderType;
+SchemaV3Constants.OrderTypeList;
+var LockSettingType = SchemaV3Constants.LockSettingType;
+var LockSettingTypeList = SchemaV3Constants.LockSettingTypeList;
+var LockSettingFields = SchemaV3Constants.LockSettingFields;
+SchemaV3Constants.InvertedLockSettings;
+var NameViewMode = SchemaV3Constants.NameViewMode;
+var NameViewModeList = SchemaV3Constants.NameViewModeList;
+var CANVAS_SIZE_MAX = SchemaV3Constants.CANVAS_SIZE_MAX;
+var CANVAS_SIZE_MIN = SchemaV3Constants.CANVAS_SIZE_MIN;
+var CANVAS_ZOOM_MAX = SchemaV3Constants.CANVAS_ZOOM_MAX;
+var CANVAS_ZOOM_MIN = SchemaV3Constants.CANVAS_ZOOM_MIN;
+var DDLScriptPosition = SchemaV3Constants.DDLScriptPosition;
+var DDLScriptPositionList = SchemaV3Constants.DDLScriptPositionList;
+var BracketTypeMap = {
+	[BracketType.none]: "",
+	[BracketType.backtick]: "`",
+	[BracketType.doubleQuote]: "\"",
+	[BracketType.singleQuote]: "'"
+};
+var ReferentialActionToSQL = {
+	[ReferentialAction.noAction]: "NO ACTION",
+	[ReferentialAction.cascade]: "CASCADE",
+	[ReferentialAction.setNull]: "SET NULL",
+	[ReferentialAction.setDefault]: "SET DEFAULT",
+	[ReferentialAction.restrict]: "RESTRICT"
+};
+//#endregion
+export { BracketType, BracketTypeList, BracketTypeMap, CANVAS_SIZE_MAX, CANVAS_SIZE_MIN, CANVAS_ZOOM_MAX, CANVAS_ZOOM_MIN, CanvasType, CanvasTypeList, ColumnOption, ColumnType, ColumnTypeList, ColumnUIKey, DDLScriptPosition, DDLScriptPositionList, Database, DatabaseList, Direction, Language, LanguageList, LockSettingFields, LockSettingType, LockSettingTypeList, NameCase, NameCaseList, NameViewMode, NameViewModeList, OrderType, ReferentialAction, ReferentialActionToSQL, RelationshipType, Show, StartRelationshipType };