@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/dictionary/sheets.js

@@ -0,0 +1,199 @@
+import { arrayHas } from "../../utils/arrayHas.js";
+import { ActionType, DictionaryFields, DictionaryKind } from "../../engine/modules/dictionary/actions.js";
+import { getLiveDomainName } from "../../engine/modules/dictionary/membership.js";
+import { ActionType as ActionType$1 } from "../../engine/modules/table-column/actions.js";
+import { dictionaryCache } from "../../engine/modules/dictionary/dictionaryIndex.js";
+import { selectDictionaryRow } from "../../engine/modules/dictionary/atom.actions.js";
+import { ActionType as ActionType$2 } from "../../engine/modules/editor/actions.js";
+import { ActionType as ActionType$3 } from "../../engine/modules/settings/actions.js";
+import { ActionType as ActionType$4 } from "../../engine/modules/table/actions.js";
+import { checkDictionaryRow, markOf } from "../../engine/modules/dictionary/checks.js";
+import { sourceI18n } from "../../i18n/source.js";
+import { isString } from "es-toolkit";
+//#region src/components/dictionary/sheets.ts
+var DictionarySheet = {
+	domain: DictionaryKind.domain,
+	word: DictionaryKind.word,
+	term: DictionaryKind.term,
+	check: "check"
+};
+var DictionarySheetList = Object.values(DictionarySheet);
+var isEntrySheet = (sheet) => sheet !== DictionarySheet.check;
+var DictionarySheetLabelKey = {
+	[DictionarySheet.word]: "dictionary.sheet.words",
+	[DictionarySheet.term]: "dictionary.sheet.terms",
+	[DictionarySheet.domain]: "dictionary.sheet.domains",
+	[DictionarySheet.check]: "dictionary.sheet.checks"
+};
+var SHEET_COLUMNS = {
+	[DictionaryKind.word]: {
+		name: {
+			labelKey: "dictionary.field.word",
+			width: 160
+		},
+		abbreviation: {
+			labelKey: "dictionary.field.abbreviation",
+			width: 120
+		},
+		englishName: {
+			labelKey: "dictionary.field.englishName",
+			width: 160
+		},
+		description: {
+			labelKey: "dictionary.field.description",
+			width: 280
+		},
+		synonyms: {
+			labelKey: "dictionary.field.synonyms",
+			width: 160
+		},
+		forbiddenWords: {
+			labelKey: "dictionary.field.forbiddenWords",
+			width: 160
+		}
+	},
+	[DictionaryKind.term]: {
+		name: {
+			labelKey: "dictionary.field.term",
+			width: 180
+		},
+		physicalName: {
+			labelKey: "dictionary.field.physicalName",
+			width: 180
+		},
+		domainId: {
+			labelKey: "dictionary.field.domain",
+			width: 140
+		},
+		description: {
+			labelKey: "dictionary.field.description",
+			width: 280
+		},
+		synonyms: {
+			labelKey: "dictionary.field.synonyms",
+			width: 160
+		}
+	},
+	[DictionaryKind.domain]: {
+		name: {
+			labelKey: "dictionary.field.domain",
+			width: 160
+		},
+		category: {
+			labelKey: "dictionary.field.category",
+			width: 120
+		},
+		dataType: {
+			labelKey: "dictionary.field.dataType",
+			width: 160
+		},
+		description: {
+			labelKey: "dictionary.field.description",
+			width: 280
+		}
+	}
+};
+function sheetColumns(kind, { readonly, widths = {} }, i18n = sourceI18n) {
+	const specs = SHEET_COLUMNS[kind];
+	return DictionaryFields[kind].map((field) => ({
+		id: field,
+		label: i18n.t(specs[field].labelKey),
+		width: widths[field] ?? specs[field].width,
+		readonly
+	}));
+}
+function sheetField(kind, columnId) {
+	return DictionaryFields[kind].includes(columnId) ? columnId : void 0;
+}
+function sheetCellText(state, kind, id, columnId) {
+	const field = sheetField(kind, columnId);
+	const row = field ? selectDictionaryRow(state, kind, id) : void 0;
+	if (!field || !row) return "";
+	const value = Reflect.get(row, field);
+	if (!isString(value)) return "";
+	return kind === DictionaryKind.term && field === "domainId" ? getLiveDomainName(state, value) : value;
+}
+var CHECKED_FIELDS = ["name", "domainId"];
+var isCheckedField = (columnId) => CHECKED_FIELDS.includes(columnId);
+function sheetCellMark(state, kind, id, columnId) {
+	if (!isCheckedField(columnId) || !sheetField(kind, columnId)) return null;
+	const row = selectDictionaryRow(state, kind, id);
+	return row ? markOf(checkDictionaryRow(state, kind, row, columnId)) : null;
+}
+var SEARCHED_FIELDS = {
+	[DictionaryKind.word]: [
+		"name",
+		"abbreviation",
+		"englishName",
+		"description"
+	],
+	[DictionaryKind.term]: [
+		"name",
+		"physicalName",
+		"description"
+	],
+	[DictionaryKind.domain]: [
+		"name",
+		"dataType",
+		"description"
+	]
+};
+var toSearchText = (text) => text.normalize("NFC").toLowerCase();
+var toListing = (rows) => ({
+	rows,
+	ids: Object.freeze(rows.map(({ id }) => id)),
+	texts: null
+});
+var LISTINGS = {
+	[DictionaryKind.word]: dictionaryCache(DictionaryKind.word, toListing),
+	[DictionaryKind.term]: dictionaryCache(DictionaryKind.term, toListing),
+	[DictionaryKind.domain]: dictionaryCache(DictionaryKind.domain, toListing)
+};
+function searchTextsOf(kind, listing) {
+	const fields = SEARCHED_FIELDS[kind];
+	listing.texts ??= listing.rows.map((row) => fields.map((field) => {
+		const value = Reflect.get(row, field);
+		return isString(value) ? toSearchText(value) : "";
+	}).join("\n"));
+	return listing.texts;
+}
+function sheetRowIds(state, kind, search = "") {
+	const listing = LISTINGS[kind](state);
+	const query = toSearchText(search.trim());
+	if (!query) return listing.ids;
+	const texts = searchTextsOf(kind, listing);
+	return listing.ids.filter((_, index) => texts[index].includes(query));
+}
+var isReload = arrayHas([
+	ActionType$2.loadJson,
+	ActionType$2.initialLoadJson,
+	ActionType$2.clear,
+	ActionType$2.initialClear
+]);
+var isDictionaryWrite = arrayHas(Object.values(ActionType));
+var isSchemaWrite = arrayHas([
+	ActionType$4.addTable,
+	ActionType$4.removeTable,
+	ActionType$4.sortTable,
+	ActionType$4.changeTableName,
+	ActionType$4.changeTableLogicalName,
+	ActionType$1.addColumn,
+	ActionType$1.removeColumn,
+	ActionType$1.moveColumn,
+	ActionType$1.changeColumnName,
+	ActionType$1.changeColumnLogicalName,
+	ActionType$1.changeColumnDataType,
+	ActionType$1.changeColumnDomain,
+	ActionType$3.changeNameViewMode,
+	ActionType$3.changeLockSettings
+]);
+function bumpedSheets(actions) {
+	let checks = false;
+	for (const { type } of actions) {
+		if (isDictionaryWrite(type) || isReload(type)) return DictionarySheetList;
+		if (isSchemaWrite(type)) checks = true;
+	}
+	return checks ? [DictionarySheet.check] : [];
+}
+//#endregion
+export { DictionarySheet, DictionarySheetLabelKey, DictionarySheetList, bumpedSheets, isEntrySheet, sheetCellMark, sheetCellText, sheetColumns, sheetField, sheetRowIds, toSearchText };

package/dist/components/diffContext.d.ts

@@ -0,0 +1,10 @@
+import { Ctx } from '../internal-types';
+import { DiffMap } from '../utils/diff/diff';
+/**
+ * The changes a diff pane tints its cells by. DiffErdViewer alone provides
+ * one, so every other scene reads null and draws no tint, and no node for one
+ * either.
+ */
+export declare const diffContext: import('@dineug/r-html').Context<DiffMap | null>;
+export declare const useDiffMap: (ctx: Ctx) => import('@dineug/r-html').Ref<DiffMap | null>;
+//# sourceMappingURL=diffContext.d.ts.map

package/dist/components/diffContext.js

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

package/dist/components/element-host/localeHost.d.ts

@@ -0,0 +1,43 @@
+import { LocaleCode, LocaleOption } from '../../i18n/locales';
+import { I18n, Messages } from '../../i18n/translate';
+export type LocaleState = {
+    /** The option a host or a pick last set; null until either sets one. */
+    option: LocaleOption | null;
+    /** What system means once a host names its own language; null reads the tags handed in. */
+    systemTag: string | null;
+};
+/** The tags system reads where a host names none, as useNavigatorLanguages keeps them. */
+export type SystemLanguages = {
+    readonly state: {
+        readonly languages: ReadonlyArray<string>;
+    };
+};
+export type LocaleHostOptions = {
+    /**
+     * The dictionary of a language, which the one I18n object takes in place, or
+     * the promise of one a source still loads. English comes at once, and stands
+     * while another language loads and in place of one that fails to.
+     */
+    messagesOf: (code: LocaleCode) => Messages | Promise<Messages>;
+    /** An observable source, so a change of its tags applies again under system. */
+    languages: SystemLanguages;
+    /** The option in force while no host or pick has set one. */
+    fallbackOption: () => LocaleOption;
+};
+/**
+ * An element's display language: the option, what system resolves to and the
+ * one I18n object every component reads, with the setters a host calls. A
+ * component calls it at setup, so the language is resolved again before mount.
+ */
+export declare function useLocaleHost({ messagesOf, languages, fallbackOption, }: LocaleHostOptions): {
+    i18n: I18n;
+    localeState: LocaleState;
+    resolveLocaleOption: () => LocaleOption;
+    resolveSystemLocale: () => LocaleCode;
+    applyLocale: () => Promise<void>;
+    setLocale: (locale: LocaleOption) => Promise<void>;
+    setSystemLocale: (locale: string | null) => Promise<void>;
+    /** Stops following the option, the tag and the languages handed in, drops a dictionary still loading and applies no language more. */
+    destroy: () => void;
+};
+//# sourceMappingURL=localeHost.d.ts.map

package/dist/components/element-host/localeHost.js

@@ -0,0 +1,81 @@
+import { onBeforeMount } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { hasLocaleOption } from "../../i18n/locales.js";
+import { createI18n } from "../../i18n/translate.js";
+import { resolveLocale } from "../../i18n/resolveLocale.js";
+import { isPromise, isString } from "es-toolkit";
+//#region src/components/element-host/localeHost.ts
+var ENGLISH = "en";
+function useLocaleHost({ messagesOf, languages, fallbackOption }) {
+	const localeState = observable({
+		option: null,
+		systemTag: null
+	});
+	const resolveLocaleOption = () => localeState.option ?? fallbackOption();
+	const resolveSystemLocale = () => resolveLocale(localeState.systemTag ?? languages.state.languages);
+	const resolveCurrentLocale = () => {
+		const option = resolveLocaleOption();
+		return option === "system" ? resolveSystemLocale() : option;
+	};
+	const english = () => {
+		const messages = messagesOf(ENGLISH);
+		if (isPromise(messages)) throw new Error("A dictionary source hands English over at once");
+		return messages;
+	};
+	const initialLocale = resolveCurrentLocale();
+	const initialMessages = messagesOf(initialLocale);
+	const i18n = observable({ ...isPromise(initialMessages) ? createI18n(ENGLISH, english()) : createI18n(initialLocale, initialMessages) }, { shallow: true });
+	let wanted = initialLocale;
+	let stopped = false;
+	const show = (code, messages) => {
+		Object.assign(i18n, createI18n(code, messages));
+	};
+	const land = (code, loading) => loading.then((messages) => {
+		if (!stopped && wanted === code) show(code, messages);
+	}, () => {
+		if (stopped || wanted !== code) return;
+		wanted = ENGLISH;
+		show(ENGLISH, english());
+	});
+	let settled = isPromise(initialMessages) ? land(initialLocale, initialMessages) : Promise.resolve();
+	const applyLocale = () => {
+		if (stopped) return settled;
+		const code = resolveCurrentLocale();
+		if (code === wanted) return settled;
+		wanted = code;
+		const messages = messagesOf(code);
+		if (isPromise(messages)) settled = land(code, messages);
+		else {
+			show(code, messages);
+			settled = Promise.resolve();
+		}
+		return settled;
+	};
+	onBeforeMount(applyLocale);
+	const unsubscribes = [watch(localeState).subscribe(applyLocale), watch(languages.state).subscribe(applyLocale)];
+	const setLocale = (locale) => {
+		if (!isString(locale) || !hasLocaleOption(locale)) return settled;
+		localeState.option = locale;
+		return applyLocale();
+	};
+	const setSystemLocale = (locale) => {
+		const tag = isString(locale) ? locale.trim() : "";
+		localeState.systemTag = tag || null;
+		return applyLocale();
+	};
+	return {
+		i18n,
+		localeState,
+		resolveLocaleOption,
+		resolveSystemLocale,
+		applyLocale,
+		setLocale,
+		setSystemLocale,
+		destroy: () => {
+			stopped = true;
+			unsubscribes.forEach((unsubscribe) => unsubscribe());
+		}
+	};
+}
+//#endregion
+export { useLocaleHost };

package/dist/components/element-host/themeHost.d.ts

@@ -0,0 +1,30 @@
+import { Appearance, ThemeOptions } from '../../themes/radix-ui-theme';
+import { Theme } from '../../themes/tokens';
+export type ThemeState = {
+    options: ThemeOptions;
+    /** What system shows once a host names it; null follows the OS color scheme. */
+    systemAppearance: Appearance | null;
+    preset: Theme;
+    custom: Partial<Theme>;
+};
+/**
+ * An element's theme: the preset its options build, the tokens a host lays
+ * over it and the light or dark system shows, with the setters a host calls.
+ * A component calls it at setup, since it follows the OS color scheme from mount.
+ *
+ * @param initialOptions What the element starts on over slate, indigo and
+ * dark, as the viewer starts on system, so its first frame shows no other.
+ */
+export declare function useThemeHost(initialOptions?: Partial<ThemeOptions>): {
+    theme: Theme;
+    themeState: ThemeState;
+    resolveAppearance: () => Appearance;
+    followsSystem: () => boolean;
+    hasDarkMode: () => boolean;
+    setPresetTheme: (newThemeOptions: Partial<ThemeOptions>) => void;
+    setSystemAppearance: (appearance: Appearance | null) => void;
+    setTheme: (newTheme: Partial<Theme>) => void;
+    /** Stops repainting and lets the OS color scheme go, now and on every later mount. */
+    destroy: () => void;
+};
+//# sourceMappingURL=themeHost.d.ts.map

package/dist/components/element-host/themeHost.js

@@ -0,0 +1,101 @@
+import { arrayHas } from "../../utils/arrayHas.js";
+import { observable, watch } from "../../r-html/dist/observable/index.js";
+import { AccentColor, AccentColorList, Appearance, AppearanceList, AppearanceOptionList, GrayColor, GrayColorList, SYSTEM_APPEARANCE, createTheme } from "../../themes/radix-ui-theme.js";
+import { ThemeTokens } from "../../themes/tokens.js";
+import { useDarkMode } from "../../hooks/useDarkMode.js";
+import { isString } from "es-toolkit";
+import { get } from "es-toolkit/compat";
+//#region src/components/element-host/themeHost.ts
+var defaultThemeOptions = {
+	grayColor: GrayColor.slate,
+	accentColor: AccentColor.indigo,
+	appearance: Appearance.dark
+};
+var hasGrayColor = arrayHas(GrayColorList);
+var hasAccentColor = arrayHas(AccentColorList);
+var hasAppearance = arrayHas(AppearanceList);
+var hasAppearanceOption = arrayHas(AppearanceOptionList);
+function useThemeHost(initialOptions = {}) {
+	const darkMode = useDarkMode();
+	const options = {
+		...defaultThemeOptions,
+		...initialOptions
+	};
+	const resolveWith = ({ appearance }, systemAppearance) => {
+		if (appearance !== "system") return appearance;
+		if (systemAppearance) return systemAppearance;
+		return darkMode.state.isDark ? Appearance.dark : Appearance.light;
+	};
+	const themeState = observable({
+		options,
+		systemAppearance: null,
+		preset: createTheme({
+			...options,
+			appearance: resolveWith(options, null)
+		}),
+		custom: {}
+	});
+	const theme = observable({
+		...themeState.preset,
+		...themeState.custom
+	}, { shallow: true });
+	const resolveAppearance = () => resolveWith(themeState.options, themeState.systemAppearance);
+	const applyPreset = () => {
+		Object.assign(themeState.preset, createTheme({
+			...themeState.options,
+			appearance: resolveAppearance()
+		}));
+	};
+	const followsSystem = () => themeState.options.appearance === SYSTEM_APPEARANCE;
+	const unsubscribes = [
+		watch(darkMode.state).subscribe((propName) => {
+			if (propName !== "isDark" || !followsSystem()) return;
+			if (themeState.systemAppearance) return;
+			applyPreset();
+		}),
+		watch(themeState.options).subscribe(applyPreset),
+		watch(themeState.preset).subscribe(() => {
+			Object.assign(theme, themeState.preset, themeState.custom);
+		}),
+		watch(themeState).subscribe((propName) => {
+			if (propName === "systemAppearance") {
+				followsSystem() && applyPreset();
+				return;
+			}
+			if (propName !== "custom") return;
+			Object.assign(theme, themeState.preset, themeState.custom);
+		})
+	];
+	const setPresetTheme = (newThemeOptions) => {
+		if (isString(newThemeOptions.grayColor) && hasGrayColor(newThemeOptions.grayColor)) themeState.options.grayColor = newThemeOptions.grayColor;
+		if (isString(newThemeOptions.accentColor) && hasAccentColor(newThemeOptions.accentColor)) themeState.options.accentColor = newThemeOptions.accentColor;
+		if (isString(newThemeOptions.appearance) && hasAppearanceOption(newThemeOptions.appearance)) themeState.options.appearance = newThemeOptions.appearance;
+	};
+	const setSystemAppearance = (appearance) => {
+		themeState.systemAppearance = isString(appearance) && hasAppearance(appearance) ? appearance : null;
+	};
+	const setTheme = (newTheme) => {
+		const customTheme = {};
+		ThemeTokens.forEach((key) => {
+			const value = get(newTheme, key);
+			isString(value) && Reflect.set(customTheme, key, value);
+		});
+		themeState.custom = customTheme;
+	};
+	return {
+		theme,
+		themeState,
+		resolveAppearance,
+		followsSystem,
+		hasDarkMode: () => resolveAppearance() === Appearance.dark,
+		setPresetTheme,
+		setSystemAppearance,
+		setTheme,
+		destroy: () => {
+			unsubscribes.forEach((unsubscribe) => unsubscribe());
+			darkMode.stop();
+		}
+	};
+}
+//#endregion
+export { useThemeHost };

package/dist/components/erd/Erd.d.ts

@@ -6,6 +6,8 @@ export type ErdProps = {
     enableWelcomeScreen?: boolean;
     enableThemeBuilder?: boolean;
     enableLocalePicker?: boolean;
+    /** Whether the canvas takes a wheel, a pinch or a touch; true if unset. */
+    interactive?: () => boolean;
 };
 declare const Erd: FC<ErdProps>;
 export default Erd;