@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/dictionary/dictionaryFile.js

@@ -0,0 +1,72 @@
+import { DictionaryKind } from "../../engine/modules/dictionary/actions.js";
+import { getLiveDomainName } from "../../engine/modules/dictionary/membership.js";
+import { orderedDictionaryRows } from "../../engine/modules/dictionary/dictionaryIndex.js";
+import { attachDictionarySheetTag$ } from "../../engine/tag.js";
+import { toDictionaryImport } from "../../engine/modules/dictionary/entryWrites.js";
+import { importDictionaryAction$ } from "../../engine/modules/dictionary/generator.actions.js";
+import { sourceI18n } from "../../i18n/source.js";
+import { localized } from "../localized/Localized.js";
+import { openStatusToast } from "../toast-container/openStatusToast.js";
+import { formatNames } from "./dictionaryCommit.js";
+import { decodeCsvBytes } from "../../utils/dictionary-csv/decode.js";
+import { readDictionaryCsv, writeDictionaryCsv } from "../../utils/dictionary-csv/dictionaryCsv.js";
+import { exportCSV } from "../../utils/file/exportFile.js";
+//#region src/components/dictionary/dictionaryFile.ts
+var DICTIONARY_FILE_ACCEPT = ".csv";
+var IMPORTED = "dictionary.toast.imported";
+var UNKNOWN_DOMAINS = "dictionary.toast.unknownDomains";
+var UNKNOWN_FORMAT = "dictionary.toast.unknownFormat";
+function reportImport(emitter, { added, updated, skipped, unknownDomains }, i18n) {
+	const count = unknownDomains.length;
+	const named = unknownDomains.slice(0, 3);
+	openStatusToast(emitter, {
+		key: `${IMPORTED}:${added}:${updated}:${skipped}:${count}:${named.join("\n")}`,
+		tone: "success",
+		title: localized(IMPORTED, {
+			added,
+			updated,
+			skipped
+		}),
+		description: count ? localized(UNKNOWN_DOMAINS, {
+			count,
+			names: formatNames(i18n, named)
+		}) : void 0
+	});
+}
+async function importDictionaryFile({ store, emitter }, file, i18n = sourceI18n) {
+	const read = readDictionaryCsv(decodeCsvBytes(await file.arrayBuffer()));
+	if (store.getReadonly()) return null;
+	if (!read) {
+		openStatusToast(emitter, {
+			key: UNKNOWN_FORMAT,
+			tone: "error",
+			title: localized(UNKNOWN_FORMAT)
+		});
+		return null;
+	}
+	const { kind, rows } = read;
+	const { added, updated, folded, unknownDomains } = toDictionaryImport(store.state, kind, rows);
+	store.dispatch(attachDictionarySheetTag$(importDictionaryAction$(kind, rows)));
+	reportImport(emitter, {
+		added,
+		updated,
+		skipped: read.skipped + folded,
+		unknownDomains
+	}, i18n);
+	return kind;
+}
+function toDictionaryCsv(state, kind) {
+	switch (kind) {
+		case DictionaryKind.word: return writeDictionaryCsv(kind, orderedDictionaryRows(state, kind));
+		case DictionaryKind.term: return writeDictionaryCsv(kind, orderedDictionaryRows(state, kind).map((term) => ({
+			...term,
+			domain: getLiveDomainName(state, term.domainId)
+		})));
+		case DictionaryKind.domain: return writeDictionaryCsv(kind, orderedDictionaryRows(state, kind));
+	}
+}
+function exportDictionarySheet(state, kind) {
+	exportCSV(toDictionaryCsv(state, kind), kind, state.settings.databaseName);
+}
+//#endregion
+export { DICTIONARY_FILE_ACCEPT, exportDictionarySheet, importDictionaryFile, toDictionaryCsv };

package/dist/components/dictionary/dictionaryKeys.js

@@ -0,0 +1,86 @@
+import { KeyBindingName, isComposing, matchesShortcut, shortcutToTuple, stopsAtPanel } from "../../utils/keyboard-shortcut/index.js";
+import { isEditableTarget } from "../../utils/validation.js";
+//#region src/components/dictionary/dictionaryKeys.ts
+var DICTIONARY_PASSING_BINDINGS = [
+	KeyBindingName.search,
+	KeyBindingName.undo,
+	KeyBindingName.redo,
+	KeyBindingName.findReplace
+];
+var KEPT_BY_AN_EDIT = [KeyBindingName.search, KeyBindingName.findReplace];
+var RowCommand = {
+	insertBelow: "insertBelow",
+	insertAbove: "insertAbove",
+	deleteRows: "deleteRows"
+};
+var RowCommandList = Object.values(RowCommand);
+var onePressOptions = (keyBindingMap, name) => keyBindingMap[name].filter(({ shortcut }) => shortcutToTuple(shortcut).length === 1);
+function withShift({ shortcut, ...option }) {
+	const mods = shortcut.split(/\b\+/);
+	const key = mods.pop();
+	return mods.includes("Shift") ? [] : [{
+		...option,
+		shortcut: [
+			...mods,
+			"Shift",
+			key
+		].join("+")
+	}];
+}
+function rowOptions(keyBindingMap, command) {
+	switch (command) {
+		case RowCommand.insertBelow: return onePressOptions(keyBindingMap, KeyBindingName.addColumn);
+		case RowCommand.insertAbove: return onePressOptions(keyBindingMap, KeyBindingName.addColumn).flatMap(withShift);
+		case RowCommand.deleteRows: return onePressOptions(keyBindingMap, KeyBindingName.removeColumn);
+	}
+}
+var rowChordOf = (keyBindingMap, command) => rowOptions(keyBindingMap, command)[0]?.shortcut;
+var dictionaryRowChords = (keyBindingMap) => RowCommandList.flatMap((command) => rowOptions(keyBindingMap, command));
+function rowChord(event, keyBindingMap) {
+	for (const command of RowCommandList) {
+		const option = rowOptions(keyBindingMap, command).find((option) => matchesShortcut(event, [option]));
+		if (option) return {
+			command,
+			option
+		};
+	}
+}
+var chordOf = (event, keyBindingMap, names) => names.flatMap((name) => keyBindingMap[name]).find((option) => matchesShortcut(event, [option]));
+function handleDictionaryKeydown(event, { keyBindingMap, undo: undoSheet, redo: redoSheet, inGrid, isEditing, insertRows, insertRowsAbove, deleteRows }) {
+	if (!isComposing(event)) {
+		const undo = matchesShortcut(event, keyBindingMap[KeyBindingName.undo]);
+		const redo = !undo && matchesShortcut(event, keyBindingMap[KeyBindingName.redo]);
+		if (undo || redo) {
+			if (inGrid ? isEditing() : isEditableTarget(event.target)) {
+				event.stopPropagation();
+				return;
+			}
+			undo ? undoSheet() : redoSheet();
+			return;
+		}
+		const row = inGrid && !isEditing() ? rowChord(event, keyBindingMap) : void 0;
+		if (row) {
+			if (row.option.preventDefault) event.preventDefault();
+			event.stopPropagation();
+			const run = {
+				[RowCommand.insertBelow]: insertRows,
+				[RowCommand.insertAbove]: insertRowsAbove,
+				[RowCommand.deleteRows]: deleteRows
+			}[row.command];
+			run();
+			return;
+		}
+		const kept = inGrid ? chordOf(event, keyBindingMap, KEPT_BY_AN_EDIT) : void 0;
+		if (kept && isEditing()) {
+			if (kept.preventDefault) event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+	}
+	if (stopsAtPanel(event, keyBindingMap, DICTIONARY_PASSING_BINDINGS)) event.stopPropagation();
+}
+var keepClipboard = (event) => {
+	event.stopPropagation();
+};
+//#endregion
+export { DICTIONARY_PASSING_BINDINGS, RowCommand, dictionaryRowChords, handleDictionaryKeydown, keepClipboard, rowChordOf };

package/dist/components/dictionary/dictionaryView.js

@@ -0,0 +1,100 @@
+import { observable } from "../../r-html/dist/observable/index.js";
+import { DictionarySheet, DictionarySheetList } from "./sheets.js";
+//#region src/components/dictionary/dictionaryView.ts
+var views = /* @__PURE__ */ new WeakMap();
+var createSheetView = () => ({
+	search: "",
+	selection: null,
+	scroll: null,
+	widths: Object.freeze({})
+});
+function dictionaryViewOf({ store }) {
+	let view = views.get(store);
+	if (!view) {
+		view = observable({
+			sheet: DictionarySheet.domain,
+			sheets: Object.fromEntries(DictionarySheetList.map((sheet) => [sheet, createSheetView()]))
+		});
+		views.set(store, view);
+	}
+	return view;
+}
+function changeSearch(view, sheet, search) {
+	const sheetView = view.sheets[sheet];
+	if (sheetView.search === search) return;
+	sheetView.search = search;
+	sheetView.selection = null;
+	sheetView.scroll = null;
+}
+var copyRange = (range) => ({
+	startRow: range.startRow,
+	startCol: range.startCol,
+	endRow: range.endRow,
+	endCol: range.endCol
+});
+function rememberSelection(view, sheet, selection) {
+	view.sheets[sheet].selection = Object.freeze({
+		active: Object.freeze({ ...selection.active }),
+		ranges: Object.freeze(selection.ranges.map((range) => Object.freeze(copyRange(range))))
+	});
+}
+function clampSelection(selection, rowCount, colCount) {
+	const toRow = (row) => Math.min(Math.max(row, 0), Math.max(rowCount - 1, 0));
+	const toCol = (col) => Math.min(Math.max(col, 0), Math.max(colCount - 1, 0));
+	return {
+		active: {
+			row: toRow(selection.active.row),
+			col: toCol(selection.active.col)
+		},
+		ranges: selection.ranges.map((range) => {
+			const [startRow, endRow] = [toRow(range.startRow), toRow(range.endRow)];
+			const [startCol, endCol] = [toCol(range.startCol), toCol(range.endCol)];
+			return {
+				startRow: Math.min(startRow, endRow),
+				startCol: Math.min(startCol, endCol),
+				endRow: Math.max(startRow, endRow),
+				endCol: Math.max(startCol, endCol)
+			};
+		})
+	};
+}
+var FIRST_CELL_SELECTION = Object.freeze({
+	active: Object.freeze({
+		row: 0,
+		col: 0
+	}),
+	ranges: Object.freeze([Object.freeze({
+		startRow: 0,
+		startCol: 0,
+		endRow: 0,
+		endCol: 0
+	})])
+});
+function storedSelection(view, sheet, rowCount, colCount) {
+	return clampSelection(view.sheets[sheet].selection ?? FIRST_CELL_SELECTION, rowCount, colCount);
+}
+function rememberScroll(view, sheet, { rowStart, colStart }) {
+	const sheetView = view.sheets[sheet];
+	const kept = sheetView.scroll;
+	if (kept && kept.row === rowStart && kept.col === colStart) return;
+	sheetView.scroll = Object.freeze({
+		row: rowStart,
+		col: colStart
+	});
+}
+function restoreScroll(handle, view, sheet, rowCount, colCount) {
+	const { scroll } = view.sheets[sheet];
+	if (!scroll || rowCount <= 0 || colCount <= 0) return;
+	handle.scrollTo(rowCount - 1, colCount - 1);
+	handle.scrollTo(Math.min(scroll.row, rowCount - 1), Math.min(scroll.col, colCount - 1));
+}
+function rememberWidth(view, sheet, columnId, width) {
+	const sheetView = view.sheets[sheet];
+	if (sheetView.widths[columnId] === width) return;
+	sheetView.widths = Object.freeze({
+		...sheetView.widths,
+		[columnId]: width
+	});
+}
+//#endregion
+export { FIRST_CELL_SELECTION, changeSearch, clampSelection, dictionaryViewOf, rememberScroll, rememberSelection, rememberWidth, restoreScroll, storedSelection };

package/dist/components/dictionary/domain-cell-editor/DomainCellEditor.js

@@ -0,0 +1,110 @@
+import { isComposing } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { nextTick } from "../../../r-html/dist/observable/scheduler.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 { useI18n } from "../../localeContext.js";
+import Kbd from "../../primitives/kbd/Kbd.js";
+import HighlightedText from "../../primitives/highlighted-text/HighlightedText.js";
+import { searchDomainOptions } from "../../table-view/column/column-domain/domainOptions.js";
+import { input, list, option, root } from "./DomainCellEditor.styles.js";
+//#region src/components/dictionary/domain-cell-editor/DomainCellEditor.tsx
+var MAX_OPTIONS = 8;
+var EDGE = 4;
+var ABOVE = {
+	top: "auto",
+	bottom: "100%",
+	marginTop: "0",
+	marginBottom: "2px"
+};
+var DomainCellEditor = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { editor } = props;
+	const inputRef = createRef();
+	const listRef = createRef();
+	const state = observable({
+		typed: "",
+		rows: [],
+		index: -1,
+		above: false,
+		maxHeight: 26 * MAX_OPTIONS
+	});
+	const setRows = (typed) => {
+		const rows = searchDomainOptions(app.value.store.state, typed);
+		const linked = typed.trim() ? -1 : rows.findIndex(({ id }) => id === props.linkedId);
+		state.typed = typed;
+		state.rows = rows;
+		state.index = linked !== -1 ? linked : rows.length ? 0 : -1;
+	};
+	setRows(editor.mode === "replace" ? editor.initialValue : "");
+	let closed = false;
+	const close = (option) => {
+		if (closed) return;
+		closed = true;
+		editor.cancel();
+		if (option) props.onPick(option);
+		props.onClose();
+	};
+	editor.onClose(() => close(null));
+	const revealSelected = () => {
+		listRef.value?.querySelector("[aria-selected=\"true\"]")?.scrollIntoView({ block: "nearest" });
+	};
+	const step = (delta) => {
+		const { length } = state.rows;
+		if (!length) return;
+		const index = state.index + delta;
+		state.index = index < 0 ? length - 1 : index >= length ? 0 : index;
+		nextTick(revealSelected);
+	};
+	const handleInput = (event) => {
+		const input = event.target;
+		if (input) setRows(input.value);
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event)) return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				event.stopPropagation();
+				step(event.key === "ArrowUp" ? -1 : 1);
+				break;
+			case "Enter":
+			case "Tab":
+				if (event.altKey || event.ctrlKey || event.metaKey) return;
+				event.preventDefault();
+				event.stopPropagation();
+				if (state.index !== -1) close(state.rows[state.index]);
+				else if (event.key === "Tab") close(null);
+		}
+	};
+	const keepFocus = (event) => event.preventDefault();
+	const place = () => {
+		const area = editor.container.parentElement;
+		if (!area) return;
+		const { top, bottom } = editor.rect;
+		const full = 26 * MAX_OPTIONS + 2;
+		const below = area.clientHeight - bottom - EDGE;
+		const above = top - EDGE;
+		state.above = below < full && above > below;
+		state.maxHeight = Math.max(26, Math.min(full, state.above ? above : below));
+	};
+	onMounted(() => {
+		place();
+		inputRef.value?.focus({ preventScroll: true });
+		nextTick(revealSelected);
+	});
+	return () => {
+		const selected = state.index;
+		return html`<div class=${["dictionary-domain-editor", root]} .dir="ltr"><input class=${input} ${ref(inputRef)} type="text" spellcheck="false" autocomplete="off" aria-label=${props.label} placeholder=${props.label} .value=${state.typed} @input=${handleInput} @keydown=${handleKeydown} />${state.rows.length ? html`<div class=${["scrollbar", list]} ${ref(listRef)} role="listbox" aria-label=${props.label} style=${{
+			maxHeight: `${state.maxHeight}px`,
+			...state.above ? ABOVE : {}
+		}} @mousedown=${keepFocus}>${repeat(state.rows, (option) => option.id, (option$1, index) => html`<div class=${option} role="option" aria-selected=${String(index === selected)} @click=${() => close(option$1)}><span>${option$1.id === "" ? i18n.value.t("common.none") : html`<${HighlightedText} .searchWords=${[state.typed.trim()]} .textToHighlight=${option$1.name} />`}</span><${Kbd} .mini=${true} .shortcut="Enter" /></div>`)}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { DomainCellEditor as default };

package/dist/components/dictionary/domain-cell-editor/DomainCellEditor.styles.js

@@ -0,0 +1,65 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../../styles/elevation.styles.js";
+import { TextFontFamily } from "../../../styles/fonts.styles.js";
+var root = css`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  font: 13px ${TextFontFamily};
+`;
+var input = css`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 7px;
+  border: 0;
+  outline: none;
+  color: var(--active);
+  background-color: var(--dictionary-background);
+  box-shadow: inset 0 0 0 2px var(--focus);
+  font: inherit;
+`;
+var list = css`
+  position: absolute;
+  z-index: 1;
+  top: 100%;
+  left: 0;
+  box-sizing: border-box;
+  min-width: 100%;
+  margin-top: 2px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  color: var(--active);
+  background-color: var(--dictionary-background);
+  border: 1px solid var(--dictionary-grid-line);
+  ${floatingShadow};
+  white-space: nowrap;
+`;
+var option = css`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 8px;
+  height: ${26}px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--dictionary-header-background);
+  }
+
+  &[aria-selected='true'] {
+    background-color: var(--dictionary-header-select);
+  }
+
+  & > .kbd {
+    margin-left: auto;
+    visibility: hidden;
+  }
+
+  &[aria-selected='true'] > .kbd {
+    visibility: visible;
+  }
+`;
+//#endregion
+export { input, list, option, root };

package/dist/components/dictionary/domain-cell-editor/openDomainCellEditor.js

@@ -0,0 +1,16 @@
+import { html, render } from "../../../r-html/dist/render/index.js";
+import DomainCellEditor from "./DomainCellEditor.js";
+//#region src/components/dictionary/domain-cell-editor/openDomainCellEditor.tsx
+function openDomainCellEditor(editor, { label, linkedId, onPick, onClose }) {
+	const host = document.createElement("div");
+	host.style.height = "100%";
+	editor.container.append(host);
+	const remove = () => {
+		render(host, null);
+		host.remove();
+		onClose();
+	};
+	render(host, html`<${DomainCellEditor} .editor=${editor} .label=${label} .linkedId=${linkedId} .onPick=${onPick} .onClose=${remove} />`);
+}
+//#endregion
+export { openDomainCellEditor };

package/dist/components/dictionary/gridTheme.js

@@ -0,0 +1,51 @@
+//#region src/components/dictionary/gridTheme.ts
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+var SELECTION_ALPHA = "33";
+function selectionFillOf(color) {
+	const match = HEX.exec(color.trim());
+	if (!match) return "transparent";
+	const digits = match[1];
+	return `#${digits.length === 6 ? digits : [...digits].map((digit) => `${digit}${digit}`).join("")}${SELECTION_ALPHA}`;
+}
+function gridThemeOf(theme) {
+	return {
+		background: theme.dictionaryBackground,
+		headerBackground: theme.dictionaryHeaderBackground,
+		headerText: theme.foreground,
+		text: theme.active,
+		gridLine: theme.dictionaryGridLine,
+		frozenBorder: theme.grayColor7,
+		selectionFill: selectionFillOf(theme.accentColor9),
+		selectionBorder: theme.accentColor9,
+		activeCellBorder: theme.focus,
+		selectedHeaderBackground: theme.dictionaryHeaderSelect,
+		selectedHeaderText: theme.active,
+		fullSelectionBackground: theme.accentColor6,
+		readonlyBackground: theme.grayColor3,
+		scrollbarThumb: theme.scrollbarThumb,
+		scrollbarTrack: theme.scrollbarTrack
+	};
+}
+function toGridTheme(theme, previous) {
+	const next = gridThemeOf(theme);
+	if (!previous) return next;
+	return Object.keys(next).every((key) => previous[key] === next[key]) ? previous : next;
+}
+var sameStyle = (a, b) => a.color === b.color && a.background === b.background;
+function toCellMarks(theme, previous) {
+	const error = Object.freeze({
+		color: theme.dictionaryErrorForeground,
+		background: theme.dictionaryErrorBackground
+	});
+	const warning = Object.freeze({
+		color: theme.dictionaryWarningForeground,
+		background: theme.dictionaryWarningBackground
+	});
+	if (previous && sameStyle(previous.error, error) && sameStyle(previous.warning, warning)) return previous;
+	return Object.freeze({
+		error,
+		warning
+	});
+}
+//#endregion
+export { toCellMarks, toGridTheme };