@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/erd-context-menu/ErdContextMenu.js

@@ -0,0 +1,306 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { query } from "../../../erd-editor-schema/dist/query/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 { isMemoShown } from "../../../utils/memo.js";
+import { getTableGroupId, isTableGroupShown } from "../../../utils/tableGroup.js";
+import { getFocusedColumnIds, getRemovableColumns } from "../../../engine/modules/editor/utils/focus.js";
+import { changeDrawTableGroupAction, changeOpenMapAction, drawEndRelationshipAction } from "../../../engine/modules/editor/atom.actions.js";
+import { removeRelationshipAction } from "../../../engine/modules/relationship/atom.actions.js";
+import { RederiveScope, rederiveNamesAction$ } from "../../../engine/modules/dictionary/generator.actions.js";
+import { addMemoAction$, removeMemoAction$ } from "../../../engine/modules/memo/generator.actions.js";
+import { addTableAction$, removeTableAction$ } from "../../../engine/modules/table/generator.actions.js";
+import { changeColumnsPrimaryKeyAction$, removeColumnAction$ } from "../../../engine/modules/table-column/generator.actions.js";
+import { getSelectTypeIds } from "../../../engine/modules/editor/utils/selection.js";
+import { addTableGroupFromTablesAction$, removeTableGroupAction$, selectTableGroupTablesAction$, setTableGroupAction$ } from "../../../engine/modules/table-group/generator.actions.js";
+import { hasColoredSelection } from "../../../engine/modules/editor/utils/color.js";
+import { focusCentersOf, focusFlowTableAction$ } from "../../../engine/modules/editor/view.generator.actions.js";
+import { removeColorAllAction$, removeSelectedAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { openColorPickerAction, openTablePropertiesAction } from "../../../utils/emitter.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { openTableGroupNameEditor } from "../canvas/table-group/tableGroupNameEditor.js";
+import ContextMenu from "../../primitives/context-menu/ContextMenu.js";
+import Kbd from "../../primitives/kbd/Kbd.js";
+import { openMapColumns } from "../../map-columns/openMapColumns.js";
+import { addTableGroupAndRename } from "../table-group/tableGroupName.js";
+import { toggleExplorerSearch } from "../../explorer/explorerCommands.js";
+import SubmenuChevron from "../../primitives/context-menu/submenu-chevron/SubmenuChevron.js";
+import { menuLabel } from "../../../i18n/menuLabel.js";
+import { importDiffJSON } from "../../../utils/file/importFile.js";
+import { createDatabaseMenus } from "./menus/databaseMenus.js";
+import { createDrawRelationshipMenus } from "./menus/drawRelationshipMenus.js";
+import { createExportMenus } from "./menus/exportMenus.js";
+import { createImportMenus } from "./menus/importMenus.js";
+import { createNameViewMenus } from "./menus/nameViewMenus.js";
+import { createReferentialActionMenus, createRelationshipMenus } from "./menus/relationshipMenus.js";
+import { createShowMenus } from "./menus/showMenus.js";
+import { createTablePlacementMenus } from "./menus/tablePlacementMenus.js";
+//#region src/components/erd/erd-context-menu/ErdContextMenu.tsx
+var ErdContextMenuType = {
+	ERD: "ERD",
+	table: "table",
+	memo: "memo",
+	relationship: "relationship",
+	tableGroup: "tableGroup"
+};
+var READING_MENUS = [ErdContextMenuType.ERD, ErdContextMenuType.table];
+var READING_MENU_TYPES = new Set(READING_MENUS);
+var isReadingMenu = (type) => READING_MENU_TYPES.has(type);
+var referentialActionItems = [{
+	field: "onDelete",
+	labelKey: "contextMenu.onDelete"
+}, {
+	field: "onUpdate",
+	labelKey: "contextMenu.onUpdate"
+}];
+var selectionRemoval = {
+	labelKey: "contextMenu.deleteSelected",
+	action: removeSelectedAction$
+};
+var isOneOfSelection = (selectedMap, id) => Boolean(selectedMap[id]) && Object.keys(selectedMap).length > 1;
+var isOneOfSelectedTables = (state, tableId) => {
+	const listed = getSelectTypeIds(state.editor.selectedMap).tableIds.filter((id) => state.doc.tableIds.includes(id));
+	return listed.length > 1 && listed.includes(tableId);
+};
+var ErdContextMenu = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const chevronRightIcon = html`<${SubmenuChevron} />`;
+	const { addUnsubscribe } = useUnmounted();
+	const handleAddTable = () => {
+		const { store } = app.value;
+		store.dispatch(addTableAction$());
+		props.onClose();
+	};
+	const handleAddMemo = () => {
+		const { store } = app.value;
+		store.dispatch(addMemoAction$());
+		props.onClose();
+	};
+	const handleAddTableGroup = () => {
+		const { store } = app.value;
+		store.dispatch(changeDrawTableGroupAction({ value: true }));
+		props.onClose();
+	};
+	const handleToggleExplorer = () => {
+		const { store, emitter } = app.value;
+		toggleExplorerSearch(store, emitter);
+		props.onClose();
+	};
+	const handleOpenDiffViewer = () => {
+		importDiffJSON(app.value);
+		props.onClose();
+	};
+	const handleOpenMapColumns = () => {
+		if (!props.relationshipId) return;
+		const { store } = app.value;
+		if (store.state.editor.drawRelationship) store.dispatchSync(drawEndRelationshipAction());
+		openMapColumns(app.value, {
+			mode: "edit",
+			relationshipId: props.relationshipId
+		});
+		props.onClose();
+	};
+	const handleRemoveRelationship = () => {
+		if (!props.relationshipId) return;
+		const { store } = app.value;
+		store.dispatch(removeRelationshipAction({ id: props.relationshipId }));
+		props.onClose();
+	};
+	const handleChangeColumnPrimaryKey = () => {
+		if (!props.tableId) return;
+		const { store } = app.value;
+		const { focusTable } = store.state.editor;
+		if (!focusTable?.columnId) return;
+		store.dispatch(changeColumnsPrimaryKeyAction$(focusTable.tableId, getFocusedColumnIds(store.state)));
+		props.onClose();
+	};
+	const handleOpenTableProperties = () => {
+		if (!props.tableId) return;
+		const { store, emitter } = app.value;
+		emitter.emit(openTablePropertiesAction({ tableId: props.tableId }));
+		store.dispatch(changeOpenMapAction({ [Open.tableProperties]: true }));
+		props.onClose();
+	};
+	const handleFocusFlowTable = () => {
+		if (!props.tableId) return;
+		const { store } = app.value;
+		const { selectedMap } = store.state.editor;
+		store.dispatch(focusFlowTableAction$(focusCentersOf(selectedMap, props.tableId)));
+		props.onClose();
+	};
+	const openColorPicker = (event, color) => {
+		const { emitter } = app.value;
+		emitter.emit(openColorPickerAction({
+			x: event.clientX,
+			y: event.clientY,
+			color
+		}));
+		props.onClose();
+	};
+	const handleOpenColorPicker = (event) => {
+		if (!props.tableId) return;
+		const { store } = app.value;
+		const table = query(store.state.collections).collection("tableEntities").selectById(props.tableId);
+		if (!table) return;
+		openColorPicker(event, table.ui.color);
+	};
+	const handleRemoveColor = () => {
+		const { store } = app.value;
+		store.dispatch(removeColorAllAction$());
+		props.onClose();
+	};
+	const handleOpenMemoColorPicker = (event) => {
+		if (!props.memoId) return;
+		const { store } = app.value;
+		const memo = query(store.state.collections).collection("memoEntities").selectById(props.memoId);
+		if (!memo) return;
+		openColorPicker(event, memo.ui.color);
+	};
+	const getTableRemoval = (tableId) => {
+		const { state } = app.value.store;
+		const columns = getRemovableColumns(state);
+		if (columns?.tableId === tableId && props.columnId && columns.columnIds.includes(props.columnId)) return {
+			labelKey: columns.columnIds.length > 1 ? "contextMenu.deleteColumns" : "contextMenu.deleteColumn",
+			action: () => removeColumnAction$(tableId, columns.columnIds)
+		};
+		return isOneOfSelection(state.editor.selectedMap, tableId) ? selectionRemoval : {
+			labelKey: "contextMenu.delete",
+			action: () => removeTableAction$(tableId)
+		};
+	};
+	const handleRemoveTable = () => {
+		if (!props.tableId) return;
+		const { store } = app.value;
+		store.dispatch(getTableRemoval(props.tableId).action());
+		props.onClose();
+	};
+	const getTableRederive = (tableId) => {
+		const { state } = app.value.store;
+		if (isOneOfSelectedTables(state, tableId)) return {
+			labelKey: "common.derivePhysicalNames",
+			target: { scope: RederiveScope.selection }
+		};
+		const table = query(state.collections).collection("tableEntities").selectById(tableId);
+		if (props.columnId && table?.columnIds.includes(props.columnId)) return {
+			labelKey: "common.derivePhysicalName",
+			target: {
+				scope: RederiveScope.column,
+				tableId,
+				columnId: props.columnId
+			}
+		};
+		return {
+			labelKey: "common.derivePhysicalNames",
+			target: {
+				scope: RederiveScope.table,
+				tableId
+			}
+		};
+	};
+	const handleRederive = (target) => {
+		const { store } = app.value;
+		store.dispatch(rederiveNamesAction$(target));
+		props.onClose();
+	};
+	const getMemoRemoval = (memoId) => isOneOfSelection(app.value.store.state.editor.selectedMap, memoId) ? selectionRemoval : {
+		labelKey: "contextMenu.delete",
+		action: () => removeMemoAction$(memoId)
+	};
+	const handleRemoveMemo = () => {
+		if (!props.memoId) return;
+		const { store } = app.value;
+		store.dispatch(getMemoRemoval(props.memoId).action());
+		props.onClose();
+	};
+	const handleGroupSelectedTables = () => {
+		const { store } = app.value;
+		addTableGroupAndRename(store, addTableGroupFromTablesAction$());
+		props.onClose();
+	};
+	const handleRemoveFromGroup = () => {
+		const { store } = app.value;
+		const { tableIds } = getSelectTypeIds(store.state.editor.selectedMap);
+		store.dispatch(setTableGroupAction$(tableIds, ""));
+		props.onClose();
+	};
+	const handleSelectGroupTables = () => {
+		if (!props.tableGroupId) return;
+		const { store } = app.value;
+		store.dispatch(selectTableGroupTablesAction$(props.tableGroupId));
+		props.onClose();
+	};
+	const handleRenameTableGroup = () => {
+		if (!props.tableGroupId) return;
+		openTableGroupNameEditor(app.value.store, props.tableGroupId);
+		props.onClose();
+	};
+	const handleOpenTableGroupColorPicker = (event) => {
+		if (!props.tableGroupId) return;
+		const { store } = app.value;
+		const group = query(store.state.collections).collection("tableGroupEntities").selectById(props.tableGroupId);
+		if (!group) return;
+		openColorPicker(event, group.color);
+	};
+	const getTableGroupRemoval = (groupId) => isOneOfSelection(app.value.store.state.editor.selectedMap, groupId) ? selectionRemoval : {
+		labelKey: "contextMenu.delete",
+		action: () => removeTableGroupAction$(groupId)
+	};
+	const handleRemoveTableGroup = () => {
+		if (!props.tableGroupId) return;
+		const { store } = app.value;
+		store.dispatch(getTableGroupRemoval(props.tableGroupId).action());
+		props.onClose();
+	};
+	onMounted(() => {
+		const { shortcut$ } = app.value;
+		addUnsubscribe(shortcut$.subscribe(({ type }) => {
+			if (type === KeyBindingName.stop || type === KeyBindingName.removeSelection) props.onClose();
+		}));
+	});
+	const getTableGroupRows = () => {
+		const { store } = app.value;
+		const { state } = store;
+		if (store.getReadonly()) return {
+			canGroup: false,
+			canUngroup: false
+		};
+		const { tableIds } = getSelectTypeIds(state.editor.selectedMap);
+		const tables = query(state.collections).collection("tableEntities").selectByIds(tableIds.filter((id) => state.doc.tableIds.includes(id)));
+		return {
+			canGroup: tables.length !== 0 && isTableGroupShown(state),
+			canUngroup: tables.some((table) => getTableGroupId(state, table) !== "")
+		};
+	};
+	const tablePropertiesItem = () => html`<${ContextMenu.Item} .onClick=${handleOpenTableProperties} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="table-properties" .size=${14} />`} .name=${i18n.value.t("common.tableProperties")} .right=${html`<${Kbd} .shortcut=${app.value.keyBindingMap.tableProperties[0]?.shortcut} />`} />`} />`;
+	const viewOptionItem = () => html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="eye" .size=${14} />`} .name=${i18n.value.t("contextMenu.viewOption")} .right=${chevronRightIcon} />`} .subChildren=${html`${createShowMenus(app.value, i18n.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menu.name} />`} />`)}`} />`;
+	const nameViewItem = () => html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .name=${i18n.value.t("common.nameView")} .right=${chevronRightIcon} />`} .subChildren=${html`${createNameViewMenus(app.value, i18n.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menu.name} />`} />`)}`} />`;
+	const exportItem = () => html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="file-output" .size=${14} />`} .name=${i18n.value.t("common.export")} .right=${chevronRightIcon} />`} .subChildren=${html`${createExportMenus(app.value, props.onClose, i18n.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name=${menu.icon} .size=${14} />`} .name=${menu.name} />`} />`)}`} />`;
+	const diffViewerItem = () => html`<${ContextMenu.Item} .onClick=${handleOpenDiffViewer} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="file-diff" .size=${14} />`} .name=${i18n.value.t("contextMenu.diffViewer")} />`} />`;
+	const readingRowsOf = {
+		[ErdContextMenuType.ERD]: () => html`${viewOptionItem()}${nameViewItem()}${exportItem()}${diffViewerItem()}`,
+		[ErdContextMenuType.table]: tablePropertiesItem
+	};
+	const readingRows = () => isReadingMenu(props.type) ? readingRowsOf[props.type]() : void 0;
+	return () => {
+		const { keyBindingMap, store } = app.value;
+		const { t } = i18n.value;
+		const readonly = store.getReadonly();
+		const focusesGroup = Boolean(props.tableId) && focusCentersOf(store.state.editor.selectedMap, props.tableId).length > 1;
+		const keysSelection = getFocusedColumnIds(store.state).length > 1;
+		const removeShortcut = keyBindingMap.removeSelection[0]?.shortcut;
+		const tableGroupRows = props.type === ErdContextMenuType.table ? getTableGroupRows() : {
+			canGroup: false,
+			canUngroup: false
+		};
+		const tableRederive = props.type === ErdContextMenuType.table && props.tableId && !readonly ? getTableRederive(props.tableId) : null;
+		const removeColorItem = hasColoredSelection(store.state) ? html`<${ContextMenu.Item} .onClick=${handleRemoveColor} .children=${html`<${ContextMenu.Menu} .name=${t("contextMenu.removeColor")} />`} />` : null;
+		return html`<${ContextMenu.Root} .children=${readonly ? readingRows() : props.type === ErdContextMenuType.table ? html`<${ContextMenu.Item} .onClick=${handleChangeColumnPrimaryKey} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="key-round" .size=${14} />`} .name=${keysSelection ? t("contextMenu.primaryKeyOnSelectedColumns") : t("common.primaryKey")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.primaryKey[0]?.shortcut} />`} />`} />${tablePropertiesItem()}<${ContextMenu.Item} .onClick=${handleFocusFlowTable} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="waypoints" .size=${14} />`} .name=${focusesGroup ? t("contextMenu.focusOnSelectedTables") : t("contextMenu.focusOnThisTable")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.focusView[0]?.shortcut} />`} />`} />${tableRederive ? html`<${ContextMenu.Item} .onClick=${() => handleRederive(tableRederive.target)} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="refresh-cw" .size=${14} />`} .name=${t(tableRederive.labelKey)} />`} />` : null}<${ContextMenu.Item} .onClick=${handleOpenColorPicker} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="palette" .size=${14} />`} .name=${t("common.color")} />`} />${removeColorItem}${tableGroupRows.canGroup ? html`<${ContextMenu.Item} .onClick=${handleGroupSelectedTables} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="group" .size=${14} />`} .name=${t("contextMenu.groupSelectedTables")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.groupSelectedTables[0]?.shortcut} />`} />`} />` : null}${tableGroupRows.canUngroup ? html`<${ContextMenu.Item} .onClick=${handleRemoveFromGroup} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="ungroup" .size=${14} />`} .name=${t("contextMenu.removeFromGroup")} />`} />` : null}<${ContextMenu.Item} .onClick=${handleRemoveTable} .children=${html`<${ContextMenu.Menu} .name=${t(props.tableId ? getTableRemoval(props.tableId).labelKey : "contextMenu.delete")} .right=${html`<${Kbd} .shortcut=${removeShortcut} />`} />`} />` : props.type === ErdContextMenuType.memo ? html`<${ContextMenu.Item} .onClick=${handleOpenMemoColorPicker} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="palette" .size=${14} />`} .name=${t("common.color")} />`} />${removeColorItem}<${ContextMenu.Item} .onClick=${handleRemoveMemo} .children=${html`<${ContextMenu.Menu} .name=${t(props.memoId ? getMemoRemoval(props.memoId).labelKey : "contextMenu.delete")} .right=${html`<${Kbd} .shortcut=${removeShortcut} />`} />`} />` : props.type === ErdContextMenuType.tableGroup ? html`<${ContextMenu.Item} .onClick=${handleSelectGroupTables} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="mouse-pointer-2" .size=${14} />`} .name=${t("contextMenu.selectTables")} />`} /><${ContextMenu.Item} .onClick=${handleRenameTableGroup} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="pencil" .size=${14} />`} .name=${t("contextMenu.rename")} />`} /><${ContextMenu.Item} .onClick=${handleOpenTableGroupColorPicker} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="palette" .size=${14} />`} .name=${t("common.color")} />`} />${removeColorItem}<${ContextMenu.Item} .onClick=${handleRemoveTableGroup} .children=${html`<${ContextMenu.Menu} .name=${t(props.tableGroupId ? getTableGroupRemoval(props.tableGroupId).labelKey : "contextMenu.delete")} .right=${html`<${Kbd} .shortcut=${removeShortcut} />`} />`} />` : props.type === ErdContextMenuType.relationship ? html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="spline" .size=${14} />`} .name=${t("contextMenu.relationshipType")} .right=${chevronRightIcon} />`} .subChildren=${html`${createRelationshipMenus(app.value, props.relationshipId, i18n.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name=${menu.iconName} .size=${14} />`} .name=${menu.name} />`} />`} />`)}`} />${referentialActionItems.map(({ field, labelKey }) => html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .name=${t(labelKey)} .right=${chevronRightIcon} />`} .subChildren=${html`${createReferentialActionMenus(app.value, field, props.relationshipId, i18n.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menu.name} .literal=${true} .right=${menu.note ? html`<span style=${{ color: "var(--placeholder)" }}>${menu.note}</span>` : null} />`} />`)}`} />`)}<${ContextMenu.Item} .onClick=${handleOpenMapColumns} .children=${html`<${ContextMenu.Menu} .name=${t("mapColumns.title")} />`} /><${ContextMenu.Item} .onClick=${handleRemoveRelationship} .children=${html`<${ContextMenu.Menu} .name=${t("contextMenu.delete")} />`} />` : html`<${ContextMenu.Item} .onClick=${handleAddTable} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="table-2" .size=${14} />`} .name=${t("common.newTable")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.addTable[0]?.shortcut} />`} />`} />${isMemoShown(store.state) ? html`<${ContextMenu.Item} .onClick=${handleAddMemo} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="sticky-note" .size=${14} />`} .name=${t("common.newMemo")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.addMemo[0]?.shortcut} />`} />`} />` : null}${isTableGroupShown(store.state) ? html`<${ContextMenu.Item} .onClick=${handleAddTableGroup} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="group" .size=${14} />`} .name=${t("common.newTableGroup")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.addTableGroup[0]?.shortcut} />`} />`} />` : null}<${ContextMenu.Item} .onClick=${handleToggleExplorer} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="list-tree" .size=${14} />`} .name=${t("explorer.toggle")} .right=${html`<${Kbd} .shortcut=${keyBindingMap.findReplace[0]?.shortcut} />`} />`} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="spline" .size=${14} />`} .name=${t("common.relationship")} .right=${chevronRightIcon} />`} .subChildren=${html`${createDrawRelationshipMenus(app.value, props.onClose).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name=${menu.iconName} .size=${14} />`} .name=${menuLabel(i18n.value, menu)} .right=${html`<${Kbd} .shortcut=${menu.shortcut} />`} />`} />`)}`} />${viewOptionItem()}${nameViewItem()}${store.state.doc.tableIds.length ? html`<${ContextMenu.Item} .onClick=${() => handleRederive({ scope: RederiveScope.document })} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="refresh-cw" .size=${14} />`} .name=${t("common.derivePhysicalNames")} />`} />` : null}<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="database" .size=${14} />`} .name=${t("common.database")} .right=${chevronRightIcon} />`} .subChildren=${html`${createDatabaseMenus(app.value).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${menu.checked ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${menu.name} .literal=${true} />`} />`)}`} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="file-input" .size=${14} />`} .name=${t("common.import")} .right=${chevronRightIcon} />`} .subChildren=${html`${createImportMenus(app.value, props.onClose).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name=${menu.icon} .size=${14} />`} .name=${menuLabel(i18n.value, menu)} />`} />`)}`} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="file-input" .size=${14} />`} .name=${t("common.importAndAdd")} .right=${chevronRightIcon} />`} .subChildren=${html`${createImportMenus(app.value, props.onClose, "append").map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name=${menu.icon} .size=${14} />`} .name=${menuLabel(i18n.value, menu)} />`} />`)}`} />${exportItem()}<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="wand-sparkles" .size=${14} />`} .name=${t("common.autoLayout")} .right=${chevronRightIcon} />`} .subChildren=${html`${createTablePlacementMenus(app.value, props.onClose).map((menu) => html`<${ContextMenu.Item} .onClick=${menu.onClick} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name=${menu.iconName} .size=${14} />`} .name=${menuLabel(i18n.value, menu)} />`} />`)}`} />${diffViewerItem()}`} />`;
+	};
+};
+//#endregion
+export { ErdContextMenuType, READING_MENU_TYPES, ErdContextMenu as default };

package/dist/components/erd/erd-context-menu/menus/databaseMenus.js

@@ -0,0 +1,51 @@
+import { Database } from "../../../../constants/schema.js";
+import { changeDatabaseAction } from "../../../../engine/modules/settings/atom.actions.js";
+//#region src/components/erd/erd-context-menu/menus/databaseMenus.ts
+var menus = [
+	{
+		name: "Databricks",
+		value: Database.Databricks
+	},
+	{
+		name: "MSSQL",
+		value: Database.MSSQL
+	},
+	{
+		name: "MariaDB",
+		value: Database.MariaDB
+	},
+	{
+		name: "MySQL",
+		value: Database.MySQL
+	},
+	{
+		name: "Oracle",
+		value: Database.Oracle
+	},
+	{
+		name: "PostgreSQL",
+		value: Database.PostgreSQL
+	},
+	{
+		name: "Snowflake",
+		value: Database.Snowflake
+	},
+	{
+		name: "SQLite",
+		value: Database.SQLite
+	}
+];
+function createDatabaseMenus({ store }) {
+	const { settings } = store.state;
+	return menus.map((menu) => {
+		return {
+			checked: menu.value === settings.database,
+			name: menu.name,
+			onClick: () => {
+				store.dispatch(changeDatabaseAction({ value: menu.value }));
+			}
+		};
+	});
+}
+//#endregion
+export { createDatabaseMenus, menus };

package/dist/components/erd/erd-context-menu/menus/drawRelationshipMenus.js

@@ -0,0 +1,48 @@
+import { KeyBindingName } from "../../../../utils/keyboard-shortcut/index.js";
+import { RelationshipType } from "../../../../constants/schema.js";
+import { drawStartRelationshipAction$ } from "../../../../engine/modules/editor/generator.actions.js";
+//#region src/components/erd/erd-context-menu/menus/drawRelationshipMenus.ts
+var menus = [
+	{
+		iconName: "ZeroOne",
+		name: "Zero One",
+		labelKey: "common.relationshipType.zeroOne",
+		keyBindingName: KeyBindingName.relationshipZeroOne,
+		relationshipType: RelationshipType.ZeroOne
+	},
+	{
+		iconName: "ZeroN",
+		name: "Zero N",
+		labelKey: "common.relationshipType.zeroN",
+		keyBindingName: KeyBindingName.relationshipZeroN,
+		relationshipType: RelationshipType.ZeroN
+	},
+	{
+		iconName: "OneOnly",
+		name: "One Only",
+		labelKey: "common.relationshipType.oneOnly",
+		keyBindingName: KeyBindingName.relationshipOneOnly,
+		relationshipType: RelationshipType.OneOnly
+	},
+	{
+		iconName: "OneN",
+		name: "One N",
+		labelKey: "common.relationshipType.oneN",
+		keyBindingName: KeyBindingName.relationshipOneN,
+		relationshipType: RelationshipType.OneN
+	}
+];
+function createDrawRelationshipMenus({ store, keyBindingMap }, onClose) {
+	return menus.map((menu) => ({
+		iconName: menu.iconName,
+		name: menu.name,
+		labelKey: menu.labelKey,
+		shortcut: keyBindingMap[menu.keyBindingName][0]?.shortcut,
+		onClick: () => {
+			store.dispatch(drawStartRelationshipAction$(menu.relationshipType));
+			onClose();
+		}
+	}));
+}
+//#endregion
+export { createDrawRelationshipMenus, menus };

package/dist/components/erd/erd-context-menu/menus/exportMenus.js

@@ -0,0 +1,38 @@
+import { openExportImageAction } from "../../../../utils/emitter.js";
+import { sourceI18n } from "../../../../i18n/source.js";
+import { exportJSON } from "../../../../utils/file/exportFile.js";
+import { showSchemaSQLExport } from "../../../schema-sql/schemaSQLView.js";
+import { documentJsonOf } from "../../../../engine/documentJson.js";
+//#region src/components/erd/erd-context-menu/menus/exportMenus.ts
+function createExportMenus(app, onClose, i18n = sourceI18n) {
+	const { store, emitter } = app;
+	const databaseName = store.state.settings.databaseName;
+	return [
+		{
+			icon: "braces",
+			name: "json",
+			onClick: () => {
+				onClose();
+				exportJSON(documentJsonOf(store), databaseName);
+			}
+		},
+		{
+			icon: "database",
+			name: i18n.t("common.tab.schemaSql"),
+			onClick: () => {
+				onClose();
+				showSchemaSQLExport(app);
+			}
+		},
+		{
+			icon: "file-image",
+			name: i18n.t("common.image"),
+			onClick: () => {
+				onClose();
+				emitter.emit(openExportImageAction());
+			}
+		}
+	];
+}
+//#endregion
+export { createExportMenus };

package/dist/components/erd/erd-context-menu/menus/importMenus.js

@@ -0,0 +1,49 @@
+import { importAML, importDBML, importGraphQL, importJSON, importSchemaSQL } from "../../../../utils/file/importFile.js";
+//#region src/components/erd/erd-context-menu/menus/importMenus.ts
+function createImportMenus(app, onClose, mode = "replace") {
+	return [
+		{
+			icon: "braces",
+			name: "json",
+			onClick: () => {
+				importJSON(app, mode);
+				onClose();
+			}
+		},
+		{
+			icon: "database",
+			name: "Schema SQL",
+			labelKey: "common.tab.schemaSql",
+			onClick: () => {
+				importSchemaSQL(app, mode);
+				onClose();
+			}
+		},
+		{
+			icon: "code",
+			name: "GraphQL",
+			onClick: () => {
+				importGraphQL(app, mode);
+				onClose();
+			}
+		},
+		{
+			icon: "code",
+			name: "DBML",
+			onClick: () => {
+				importDBML(app, mode);
+				onClose();
+			}
+		},
+		{
+			icon: "code",
+			name: "AML",
+			onClick: () => {
+				importAML(app, mode);
+				onClose();
+			}
+		}
+	];
+}
+//#endregion
+export { createImportMenus };

package/dist/components/erd/erd-context-menu/menus/nameViewMenus.d.ts

@@ -1,13 +1,5 @@
 import { AppContext } from '../../../appContext';
-import { NameViewMode } from '../../../../constants/schema';
-import { I18n, PlainMessageKey } from '../../../../i18n/translate';
-import { ValuesType } from '../../../../internal-types';
-type Menu = {
-    labelKey: PlainMessageKey;
-    value: ValuesType<typeof NameViewMode>;
-};
-/** The three name views, by the name a reader picks each one by. */
-export declare const menus: ReadonlyArray<Menu>;
+import { I18n } from '../../../../i18n/translate';
 /**
  * The Name View rows, the view in force checked. A pick switches the reader's
  * own view, and the document's once its lock is off in an editor that is not
@@ -18,5 +10,4 @@ export declare function createNameViewMenus({ store }: AppContext, i18n?: Pick<I
     name: string;
     onClick: () => void;
 }[];
-export {};
 //# sourceMappingURL=nameViewMenus.d.ts.map

package/dist/components/erd/erd-context-menu/menus/nameViewMenus.js

@@ -0,0 +1,16 @@
+import { toNameViewModeAction } from "../../../../engine/modules/settings/atom.actions.js";
+import { sourceI18n } from "../../../../i18n/source.js";
+import { nameViewOptions } from "../../nameViewOptions.js";
+//#region src/components/erd/erd-context-menu/menus/nameViewMenus.ts
+function createNameViewMenus({ store }, i18n = sourceI18n) {
+	const { settings } = store.state;
+	return nameViewOptions.map((menu) => ({
+		checked: menu.value === settings.nameViewMode,
+		name: i18n.t(menu.labelKey),
+		onClick: () => {
+			store.dispatch(toNameViewModeAction(store.state, menu.value, store.getReadonly()));
+		}
+	}));
+}
+//#endregion
+export { createNameViewMenus };

package/dist/components/erd/erd-context-menu/menus/relationshipMenus.js

@@ -0,0 +1,105 @@
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { ReferentialAction, RelationshipType } from "../../../../constants/schema.js";
+import { changeRelationshipOnDeleteAction, changeRelationshipOnUpdateAction, changeRelationshipTypeAction } from "../../../../engine/modules/relationship/atom.actions.js";
+import { sourceI18n } from "../../../../i18n/source.js";
+import { menuLabel } from "../../../../i18n/menuLabel.js";
+import { menus as menus$1 } from "./databaseMenus.js";
+import { referentialActionSupport } from "../../../../utils/schema-sql/utils.js";
+//#region src/components/erd/erd-context-menu/menus/relationshipMenus.ts
+var menus = [
+	{
+		iconName: "ZeroOne",
+		labelKey: "common.relationshipType.zeroOne",
+		relationshipType: RelationshipType.ZeroOne
+	},
+	{
+		iconName: "ZeroN",
+		labelKey: "common.relationshipType.zeroN",
+		relationshipType: RelationshipType.ZeroN
+	},
+	{
+		iconName: "OneOnly",
+		labelKey: "common.relationshipType.oneOnly",
+		relationshipType: RelationshipType.OneOnly
+	},
+	{
+		iconName: "OneN",
+		labelKey: "common.relationshipType.oneN",
+		relationshipType: RelationshipType.OneN
+	}
+];
+function relationshipTypeName(relationshipType, { t }) {
+	const menu = menus.find((item) => item.relationshipType === relationshipType);
+	return menu ? t(menu.labelKey) : "";
+}
+function createRelationshipMenus({ store }, relationshipId, i18n = sourceI18n) {
+	if (!relationshipId) return [];
+	const { collections } = store.state;
+	const relationship = query(collections).collection("relationshipEntities").selectById(relationshipId);
+	if (!relationship) return [];
+	return menus.map((menu) => {
+		return {
+			checked: menu.relationshipType === relationship.relationshipType,
+			iconName: menu.iconName,
+			name: i18n.t(menu.labelKey),
+			onClick: () => {
+				store.dispatch(changeRelationshipTypeAction({
+					id: relationshipId,
+					value: menu.relationshipType
+				}));
+			}
+		};
+	});
+}
+var referentialActionMenus = [
+	{
+		name: "Not set",
+		labelKey: "contextMenu.notSet",
+		value: ReferentialAction.none
+	},
+	{
+		name: "NO ACTION",
+		value: ReferentialAction.noAction
+	},
+	{
+		name: "CASCADE",
+		value: ReferentialAction.cascade
+	},
+	{
+		name: "SET NULL",
+		value: ReferentialAction.setNull
+	},
+	{
+		name: "SET DEFAULT",
+		value: ReferentialAction.setDefault
+	},
+	{
+		name: "RESTRICT",
+		value: ReferentialAction.restrict
+	}
+];
+var changeReferentialAction = {
+	onDelete: changeRelationshipOnDeleteAction,
+	onUpdate: changeRelationshipOnUpdateAction
+};
+function createReferentialActionMenus({ store }, field, relationshipId, i18n = sourceI18n) {
+	if (!relationshipId) return [];
+	const { collections, settings } = store.state;
+	const relationship = query(collections).collection("relationshipEntities").selectById(relationshipId);
+	if (!relationship) return [];
+	const supported = referentialActionSupport(settings.database)[field];
+	const database = menus$1.find((menu) => menu.value === settings.database)?.name;
+	return referentialActionMenus.map((menu) => ({
+		checked: menu.value === relationship[field],
+		name: menuLabel(i18n, menu),
+		note: database && menu.value !== ReferentialAction.none && !supported.includes(menu.value) ? i18n.t("contextMenu.notInDatabase", { database }) : null,
+		onClick: () => {
+			store.dispatch(changeReferentialAction[field]({
+				id: relationshipId,
+				value: menu.value
+			}));
+		}
+	}));
+}
+//#endregion
+export { createReferentialActionMenus, createRelationshipMenus, relationshipTypeName };