@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/primitives/tree/treeModel.js

@@ -0,0 +1,60 @@
+//#region src/components/primitives/tree/treeModel.ts
+function flattenTree(roots, expanded) {
+	const rows = [];
+	const visit = (nodes, level, parentId) => {
+		nodes.forEach((node, index) => {
+			const open = node.hasChildren && expanded[node.id] === true;
+			rows.push({
+				node,
+				level,
+				setSize: nodes.length,
+				posInSet: index + 1,
+				expanded: open,
+				parentId
+			});
+			if (open) visit(node.children(), level + 1, node.id);
+		});
+	};
+	visit(roots, 1, null);
+	return rows;
+}
+function moveFocus(rows, activeId, key, dir = "ltr") {
+	if (!rows.length) return null;
+	const focus = (index) => ({
+		type: "focus",
+		id: rows[index].node.id,
+		index
+	});
+	const index = rows.findIndex((row) => row.node.id === activeId);
+	const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+	const backward = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+	if (key === "Home") return focus(0);
+	if (key === "End") return focus(rows.length - 1);
+	if (index === -1) return key === "ArrowDown" || key === "ArrowUp" ? focus(0) : null;
+	const row = rows[index];
+	switch (key) {
+		case "ArrowDown": return index < rows.length - 1 ? focus(index + 1) : null;
+		case "ArrowUp": return index > 0 ? focus(index - 1) : null;
+		case forward:
+			if (!row.node.hasChildren) return null;
+			if (!row.expanded) return {
+				type: "toggle",
+				id: row.node.id,
+				expanded: true
+			};
+			return rows[index + 1]?.parentId === row.node.id ? focus(index + 1) : null;
+		case backward: {
+			if (row.expanded) return {
+				type: "toggle",
+				id: row.node.id,
+				expanded: false
+			};
+			if (row.parentId === null) return null;
+			const parent = rows.findIndex(({ node }) => node.id === row.parentId);
+			return parent === -1 ? null : focus(parent);
+		}
+		default: return null;
+	}
+}
+//#endregion
+export { flattenTree, moveFocus };

package/dist/components/quick-search/QuickSearch.d.ts

@@ -1,6 +1,15 @@
 import { FC } from '@dineug/r-html';
-import { PalettePreferences } from './actions';
-export type QuickSearchProps = PalettePreferences;
+import { AppContext } from '../appContext';
+import { I18n } from '../../i18n/translate';
+import { Action, PalettePreferences } from './documentSearch';
+/** What builds the palette's top level in the language shown, with the options of the pickers the element offers. */
+export type PaletteTopLevel = (app: AppContext, i18n: I18n, preferences: PalettePreferences) => Action[];
+export type QuickSearchProps = PalettePreferences & {
+    /** The rows the palette opens on, which its host decides: the editor hands in its commands and table jumps. */
+    topLevel: PaletteTopLevel;
+    /** Whether the host is readonly, which the rows it builds follow, so a turn builds the level shown again. */
+    readonly?: boolean;
+};
 declare const QuickSearch: FC<QuickSearchProps>;
 export default QuickSearch;
 //# sourceMappingURL=QuickSearch.d.ts.map

package/dist/components/quick-search/QuickSearch.js

@@ -0,0 +1,290 @@
+import { KeyBindingName, isComposing } from "../../utils/keyboard-shortcut/index.js";
+import { arrayHas } from "../../utils/arrayHas.js";
+import { onMounted } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { nextTick } from "../../r-html/dist/observable/scheduler.js";
+import { 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 { Open } from "../../constants/open.js";
+import { isEditingText } from "../../engine/modules/editor/state.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { useAppContext } from "../appContext.js";
+import { useI18n } from "../localeContext.js";
+import { focusEvent } from "../../utils/internalEvents.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { lastCursorFocus } from "../../utils/focus.js";
+import Kbd from "../primitives/kbd/Kbd.js";
+import HighlightedText from "../primitives/highlighted-text/HighlightedText.js";
+import TextInput from "../primitives/text-input/TextInput.js";
+import { offsetToShow, visibleRange } from "../../utils/virtualRange.js";
+import { clearHangulForms, findPaletteChunks } from "./hangul.js";
+import { searchActions } from "./documentSearch.js";
+import { paletteListHeight } from "./paletteList.js";
+import { PALETTE_PREFIXES, parsePaletteQuery, scopeLabel } from "./paletteQuery.js";
+import { action, container, empty, field, hint, hintItem, icon, keyword, list, name, prefix, root, scope, search, shortcut, space, vertical } from "./QuickSearch.styles.js";
+import { paletteRows, scopeBase } from "./scopedActions.js";
+import { isEmpty } from "es-toolkit/compat";
+import { filter } from "rxjs";
+//#region src/components/quick-search/QuickSearch.tsx
+var hasAutocompleteKey = arrayHas([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Enter"
+]);
+var QuickSearch = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const root$1 = createRef();
+	const list$1 = createRef();
+	const range = observable({
+		first: 0,
+		last: -1
+	});
+	const scroll = { top: 0 };
+	const state = observable({
+		keyword: "",
+		level: [],
+		rows: [],
+		submenu: false,
+		parent: void 0,
+		missed: false,
+		index: -1
+	});
+	const byFilter = (actions) => actions.filter((action) => action.filter ? action.filter(app.value) : true);
+	const isOpen = () => Boolean(app.value.store.state.editor.openMap[Open.search]);
+	const createTopLevel = () => props.topLevel(app.value, i18n.value, {
+		appearance: props.appearance,
+		locale: props.locale
+	});
+	const getActions = () => byFilter(state.rows);
+	const rangeOf = (count) => visibleRange(count, scroll.top, paletteListHeight(count), 45);
+	const syncRange = () => {
+		const { first, last } = rangeOf(getActions().length);
+		if (first !== range.first) range.first = first;
+		if (last !== range.last) range.last = last;
+	};
+	const scrollListTo = (top) => {
+		const $list = list$1.value;
+		scroll.top = top;
+		if ($list) {
+			$list.scrollTop = top;
+			scroll.top = $list.scrollTop;
+		}
+		syncRange();
+	};
+	const handleScroll = () => {
+		const $list = list$1.value;
+		if (!$list || $list.scrollTop === scroll.top) return;
+		scroll.top = $list.scrollTop;
+		syncRange();
+	};
+	const setLevel = (actions) => {
+		state.level = actions;
+		state.rows = scopeBase(actions, null);
+		state.missed = false;
+		scrollListTo(0);
+	};
+	const readQuery = (value) => state.submenu ? {
+		scope: null,
+		keyword: value.trim(),
+		table: null
+	} : parsePaletteQuery(value);
+	const clearKeyword = () => {
+		state.keyword = "";
+		state.index = -1;
+	};
+	const setActions = (value) => {
+		const query = readQuery(value);
+		const base = scopeBase(state.level, query.scope);
+		const noKeyword = isEmpty(query.keyword);
+		const found = noKeyword ? base : searchActions(byFilter(base), query.keyword);
+		state.index = -1;
+		state.rows = state.submenu ? found : paletteRows(app.value, found, query, i18n.value);
+		state.missed = !state.submenu && query.scope === null && !noKeyword && !found.length;
+		scrollListTo(0);
+	};
+	const insertText = (text) => {
+		state.keyword = text;
+		setActions(text);
+		nextTick(() => {
+			const input = root$1.value?.querySelector("input");
+			input && lastCursorFocus(input);
+		});
+	};
+	const getSearchWords = ({ scope, keyword, table }) => {
+		if (!scope) return [state.keyword];
+		return table ? [keyword, table] : [keyword];
+	};
+	const shownHeight = (count) => Math.min(paletteListHeight(count), list$1.value?.clientHeight || Infinity);
+	const scrollIntoView = () => {
+		nextTick(() => {
+			const count = getActions().length;
+			if (state.index < 0 || state.index >= count) return;
+			scrollListTo(offsetToShow(state.index, scroll.top, shownHeight(count), 45));
+		});
+	};
+	const selectChecked = () => {
+		state.index = getActions().findIndex((action) => action.checked);
+		if (state.index !== -1) scrollIntoView();
+	};
+	const rebuild = () => {
+		if (!isOpen()) return;
+		const top = createTopLevel();
+		const submenu = state.submenu && state.parent ? byFilter(top).find((action) => action.id === state.parent)?.next : void 0;
+		state.submenu = Boolean(submenu);
+		setLevel(submenu ?? top);
+		if (state.keyword) setActions(state.keyword);
+		else if (submenu) selectChecked();
+		else state.index = -1;
+	};
+	let rebuildQueued = false;
+	const queueRebuild = () => {
+		if (rebuildQueued) return;
+		rebuildQueued = true;
+		nextTick(() => {
+			rebuildQueued = false;
+			rebuild();
+		});
+	};
+	const emitFocus = () => {
+		nextTick(() => {
+			ctx.host.dispatchEvent(focusEvent());
+		});
+	};
+	const handleClose = () => {
+		const { store } = app.value;
+		store.dispatch(changeOpenMapAction({ [Open.search]: false }));
+		clearHangulForms();
+		emitFocus();
+	};
+	const handlePerform = (index) => {
+		const action = getActions()[index];
+		if (!action) return;
+		if (action.perform) {
+			action.perform(app.value);
+			handleClose();
+		} else if (action.next) {
+			if (!state.submenu) state.parent = action.id;
+			setLevel(action.next);
+			state.submenu = true;
+			clearKeyword();
+			selectChecked();
+			const input = root$1.value?.querySelector("input");
+			input && lastCursorFocus(input);
+		} else if (action.insert !== void 0) insertText(action.insert);
+		else handleClose();
+	};
+	const handleArrowUp = (event) => {
+		const actions = getActions();
+		if (!actions.length) return;
+		event.preventDefault();
+		const index = state.index - 1;
+		state.index = index < 0 ? actions.length - 1 : index;
+		scrollIntoView();
+	};
+	const handleArrowDown = (event) => {
+		const actions = getActions();
+		if (!actions.length) return;
+		event.preventDefault();
+		const index = state.index + 1;
+		state.index = index > actions.length - 1 ? 0 : index;
+		scrollIntoView();
+	};
+	const handleArrowLeft = () => {
+		state.index = -1;
+	};
+	const handleArrowRight = () => {
+		state.index = -1;
+	};
+	const handleEnter = (event) => {
+		if (state.index === -1) return;
+		event.stopPropagation();
+		handlePerform(state.index);
+	};
+	const keyMap = {
+		ArrowUp: handleArrowUp,
+		ArrowDown: handleArrowDown,
+		ArrowLeft: handleArrowLeft,
+		ArrowRight: handleArrowRight,
+		Enter: handleEnter
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event) || !hasAutocompleteKey(event.key)) return;
+		keyMap[event.key]?.(event);
+	};
+	const handleInputKeyword = (event) => {
+		const el = event.target;
+		if (!el) return;
+		setActions(el.value);
+		state.keyword = el.value;
+	};
+	const handleToggleSearch = () => {
+		const { store } = app.value;
+		const { editor } = store.state;
+		if (!isEditingText(editor)) {
+			const opened = !editor.openMap[Open.search];
+			store.dispatch(changeOpenMapAction({ [Open.search]: opened }));
+			clearHangulForms();
+			if (opened) {
+				setLevel(createTopLevel());
+				state.submenu = false;
+				state.parent = void 0;
+				clearKeyword();
+				store.dispatch(changeOpenMapAction({
+					[Open.tableProperties]: false,
+					[Open.themeBuilder]: false,
+					[Open.exportImage]: false,
+					[Open.localePicker]: false,
+					[Open.mapColumns]: false
+				}));
+			} else emitFocus();
+		}
+	};
+	const handleOutsideClick = (event) => {
+		const el = event.target;
+		if (!el) return;
+		!el.closest(".quick-search") && handleClose();
+	};
+	const renderRow = (action$1, index, selected, searchWords) => html`<div class=${[
+		"quick-search-row",
+		action,
+		{ selected }
+	]} style=${{ transform: `translateY(${index * 45}px)` }} @click=${(event) => {
+		event.stopPropagation();
+		handlePerform(index);
+	}}><div class=${icon}>${action$1.icon}</div><span class=${name} .dir="auto"><${HighlightedText} .searchWords=${searchWords} .textToHighlight=${action$1.name} .findChunks=${findPaletteChunks} /></span>${action$1.keywords ? html`<div class=${vertical}></div><span class=${keyword} .dir="auto" title=${action$1.keywords}><${HighlightedText} .searchWords=${searchWords} .textToHighlight=${action$1.keywords} .findChunks=${findPaletteChunks} /></span>` : null}${action$1.shortcut ? html`<div class=${shortcut}><${Kbd} .shortcut=${action$1.shortcut} /></div>` : null}</div>`;
+	onMounted(() => {
+		const { shortcut$, emitter } = app.value;
+		addUnsubscribe(shortcut$.pipe(filter(({ type }) => type === KeyBindingName.stop)).subscribe(handleClose), shortcut$.pipe(filter(({ type }) => type === KeyBindingName.search)).subscribe(handleToggleSearch), emitter.on({ toggleSearch: handleToggleSearch }), watch(i18n.value).subscribe((name) => {
+			name === "locale" && queueRebuild();
+		}), watch(props).subscribe((name) => {
+			(name === "appearance" || name === "locale" || name === "readonly") && queueRebuild();
+		}), clearHangulForms);
+	});
+	return () => {
+		const { store } = app.value;
+		const { editor: { openMap } } = store.state;
+		if (!openMap[Open.search]) return null;
+		const { t } = i18n.value;
+		const query = readQuery(state.keyword);
+		const searchWords = getSearchWords(query);
+		const topLevel = !state.submenu;
+		const actions = getActions();
+		const selected = state.index;
+		range.first;
+		range.last;
+		const { first, last } = rangeOf(actions.length);
+		const indexes = [];
+		for (let index = first; index <= last; index++) indexes.push(index);
+		return html`<div class=${root} @click=${handleOutsideClick}><div class=${["quick-search", container]} ${ref(root$1)}><div class=${field}><${TextInput} .class=${search} .placeholder=${t("common.search")} .dir="auto" .autofocus=${true} .value=${state.keyword} .onInput=${handleInputKeyword} .onKeydown=${handleKeydown} />${query.scope ? html`<span class=${["quick-search-scope", scope]}>${scopeLabel(query.scope, i18n.value)}</span>` : null}</div>${topLevel && !state.keyword ? html`<div class=${["quick-search-hint", hint]}>${PALETTE_PREFIXES.map(({ prefix: prefix$1, labelKey, descriptionKey }) => html`<button class=${hintItem} type="button" title=${t(descriptionKey)} @click=${(event) => {
+			event.stopPropagation();
+			insertText(prefix$1);
+		}}><span class=${prefix}>${prefix$1}</span>${t(labelKey)}</button>`)}</div>` : null}${state.missed ? html`<div class=${["quick-search-empty", empty]}>${t("palette.noCommandsMatch")}</div>` : null}<div class=${["scrollbar", list]} ${ref(list$1)} style=${{ height: `${paletteListHeight(actions.length)}px` }} @scroll=${handleScroll}><div class=${space} style=${{ height: `${actions.length * 45}px` }}>${repeat(indexes, (index) => index, (index) => renderRow(actions[index], index, index === selected, searchWords))}</div></div></div></div>`;
+	};
+};
+//#endregion
+export { QuickSearch as default };

package/dist/components/quick-search/QuickSearch.styles.js

@@ -0,0 +1,168 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { floatingShadow } from "../../styles/elevation.styles.js";
+import { fontSize3, typography } from "../../styles/typography.styles.js";
+//#region src/components/quick-search/QuickSearch.styles.ts
+var root = css`
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: start;
+  justify-content: center;
+  padding: 60px 16px 16px;
+  z-index: 2147483647;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+`;
+var container = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 600px;
+  max-height: 100%;
+  position: relative;
+  z-index: 1;
+  background-color: var(--context-menu-background);
+  border: 1px solid var(--context-menu-border);
+  border-radius: 6px;
+  ${floatingShadow};
+  overflow: hidden;
+`;
+var field = css`
+  display: flex;
+  align-items: center;
+`;
+var search = css`
+  flex: 1;
+  min-width: 0;
+  height: 50px;
+  min-height: 50px;
+  padding: 12px 16px;
+  ${fontSize3};
+`;
+var scope = css`
+  flex-shrink: 0;
+  margin-inline-end: 16px;
+  padding: 0 8px;
+  border: 1px solid var(--accent-color-8);
+  border-radius: 9999px;
+  white-space: nowrap;
+  color: var(--accent-color-11);
+  background-color: var(--accent-color-3);
+  ${typography.paragraph};
+`;
+var hint = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  padding: 0 16px 12px;
+`;
+var hintItem = css`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--placeholder);
+  cursor: pointer;
+  ${typography.paragraph};
+
+  &:hover {
+    color: var(--active);
+  }
+`;
+var empty = css`
+  padding: 0 16px 12px;
+  color: var(--placeholder);
+  ${typography.paragraph};
+`;
+var prefix = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border: 1px solid var(--context-menu-border);
+  border-radius: 3px;
+  color: var(--foreground);
+  font-family: var(--code-font-family);
+  ${typography.paragraph};
+`;
+var list = css`
+  position: relative;
+  flex: 0 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;
+var space = css`
+  position: relative;
+  width: 100%;
+`;
+var action = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 12px 16px;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  min-height: 45px;
+  height: 45px;
+
+  &:hover {
+    background-color: var(--column-hover);
+  }
+
+  &.selected {
+    background-color: var(--column-select);
+  }
+`;
+var icon = css`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  min-width: 14px;
+  margin-inline-end: 8px;
+`;
+var name = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ${typography.normal};
+`;
+var keyword = css`
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: left;
+  color: var(--placeholder);
+  ${typography.paragraph};
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+`;
+var vertical = css`
+  width: 8px;
+  height: 100%;
+`;
+var shortcut = css`
+  display: flex;
+  align-items: center;
+  margin-inline-start: auto;
+  padding-inline-start: 24px;
+`;
+//#endregion
+export { action, container, empty, field, hint, hintItem, icon, keyword, list, name, prefix, root, scope, search, shortcut, space, vertical };

package/dist/components/quick-search/actions.d.ts

@@ -1,57 +1,6 @@
-import { DOMTemplateLiterals } from '@dineug/r-html';
 import { AppContext } from '../appContext';
-import { RootState } from '../../engine/state';
-import { LocaleOption } from '../../i18n/locales';
-import { LabeledMenu } from '../../i18n/menuLabel';
-import { I18n, PlainMessageKey } from '../../i18n/translate';
-import { AppearanceOption } from '../../themes/radix-ui-theme';
-import { FindMatch } from '../../utils/find-replace';
-export type Action = {
-    icon?: DOMTemplateLiterals | null;
-    name: string;
-    keywords?: string;
-    shortcut?: string;
-    /** The table a row jumps to, whose keyword names the kind of row, not the table. */
-    tableId?: string;
-    /** A table row's own names, its name and logical name, which a search reads whatever the name view shows. */
-    tableNames?: string[];
-    /** What choosing the row types into the input, which stays open, instead of running a command. */
-    insert?: string;
-    /** The English of a translated name and keywords, each its own text, which a search also reads and the list never shows. */
-    alias?: string[];
-    /** The option in force among a submenu's rows, which the submenu opens on. */
-    checked?: boolean;
-    /** The message key of a row opening a submenu, by which an open palette finds that submenu again in a rebuilt level. */
-    id?: PlainMessageKey;
-    filter?: (app: AppContext) => boolean;
-    perform?: (app: AppContext) => void;
-    next?: Action[];
-};
-/** What names a row: a message key, or a shared menu whose name stays as written where it has no key. */
-type RowLabel = PlainMessageKey | LabeledMenu;
-/**
- * A row's name and keywords in the reader's language. The English of each one
- * a translation changes goes into its alias apart, so a search scores it as in
- * English and a command is found by its English words too; English has none.
- */
-export declare function named(i18n: Pick<I18n, 't'>, label: RowLabel, keywordsKey?: PlainMessageKey): Pick<Action, 'name' | 'keywords' | 'alias'>;
-/**
- * Whether a row holds the keyword: as typed, or by its Hangul letters, which
- * an IME spells out one jamo at a time and a choseong search abbreviates.
- */
-export declare function keywordHolder(keyword: string): (action: Action) => boolean;
-/**
- * How loose a fuzzy hit may be: stricter than fuse.js's 0.6, which fuzzed most
- * words to some command (memo to the relationships, #us to orders), while a
- * typo such as tabel still finds New Table. A row holding the keyword stays.
- */
-export declare const SEARCH_THRESHOLD = 0.4;
-export declare function searchActions(actions: Action[], keyword: string): Action[];
-/** The theme and the display language the element holds, each given only while it offers that picker. */
-export type PalettePreferences = {
-    appearance?: AppearanceOption;
-    locale?: LocaleOption;
-};
+import { I18n } from '../../i18n/translate';
+import { Action, PalettePreferences } from './documentSearch';
 /**
  * The palette's top level: the commands of every tab, then a jump to each
  * table, which only the # prefix lists, each in the reader's language. Theme
@@ -64,9 +13,6 @@ export declare function createScopeActions(app: AppContext, i18n?: I18n, prefere
  * pickers' own do, so the host hears it; a language is named in itself.
  */
 export declare function createPreferenceActions(i18n: I18n, { appearance, locale }: PalettePreferences): Action[];
-/** The row for one field a search found, saying where it is, which stands the reader on it when chosen. */
-export declare function createMatchAction(state: RootState, match: FindMatch, i18n?: I18n): Action;
 /** The six tabs the Tab row opens, each but the one shown. */
 export declare function createTabActions(i18n?: I18n): Action[];
-export {};
 //# sourceMappingURL=actions.d.ts.map