@dineug/erd-editor 4.2.0 → 5.0.0

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

@@ -0,0 +1,183 @@
+import { findChunks } from "../../utils/highlightWords.js";
+import { disassembleToGroups } from "es-hangul";
+//#region src/components/quick-search/hangul.ts
+var HANGUL = /[ᄀ-ᇿㄱ-ㆎ가-힣]/;
+var CONSONANTS_ONLY = /^[ㄱ-ㅎ\s]+$/;
+var CONJOINING = /[ᄀ-ᇿ]/;
+var INITIALS = "ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ";
+var isSyllable = (code) => code >= 44032 && code <= 55203;
+var isConsonant = (code) => code >= 12593 && code <= 12622;
+function compose(source) {
+	let text = "";
+	const at = [];
+	let index = 0;
+	while (index < source.length) {
+		const code = source.codePointAt(index);
+		const initial = code - 4352;
+		const vowel = source.charCodeAt(index + 1) - 4449;
+		const final = (offset) => source.charCodeAt(offset) - 4519;
+		let letter = String.fromCodePoint(code);
+		let length = letter.length;
+		if (initial >= 0 && initial < 19 && vowel >= 0 && vowel < 21) {
+			const open = 44032 + (initial * 21 + vowel) * 28;
+			const tail = final(index + 2);
+			const closed = tail > 0 && tail < 28;
+			letter = String.fromCharCode(closed ? open + tail : open);
+			length = closed ? 3 : 2;
+		} else if (initial >= 0 && initial < 19) letter = INITIALS[initial];
+		else if (isSyllable(code) && (code - 44032) % 28 === 0) {
+			const tail = final(index + 1);
+			if (tail > 0 && tail < 28) {
+				letter = String.fromCharCode(code + tail);
+				length = 2;
+			}
+		}
+		text += letter;
+		at.push(index);
+		index += length;
+	}
+	at.push(source.length);
+	return {
+		text,
+		at
+	};
+}
+function spell(text, withOffsets) {
+	const letters = CONJOINING.test(text) ? compose(text) : null;
+	const spelled = letters ? letters.text : text;
+	const groups = disassembleToGroups(spelled);
+	const jamoAt = [];
+	const jamoTo = [];
+	const choseongAt = [];
+	const choseongTo = [];
+	let jamo = "";
+	let choseong = "";
+	let start = 0;
+	let index = 0;
+	for (const letter of spelled) {
+		const group = groups[index];
+		const from = letters ? letters.at[index] : start;
+		const to = letters ? letters.at[index + 1] : start + letter.length;
+		const code = letter.charCodeAt(0);
+		const unit = group.join("").toLowerCase();
+		const initial = isSyllable(code) ? group[0] : isConsonant(code) ? unit : "";
+		jamo += unit;
+		choseong += initial;
+		if (withOffsets) {
+			for (let offset = 0; offset < unit.length; offset++) {
+				jamoAt.push(from);
+				jamoTo.push(to);
+			}
+			for (let offset = 0; offset < initial.length; offset++) {
+				choseongAt.push(from);
+				choseongTo.push(to);
+			}
+		}
+		start += letter.length;
+		index++;
+	}
+	return {
+		jamo,
+		choseong,
+		jamoAt,
+		jamoTo,
+		choseongAt,
+		choseongTo
+	};
+}
+var keptForms = /* @__PURE__ */ new Map();
+function hangulFormsOf(text) {
+	let forms = keptForms.get(text);
+	if (!forms) {
+		const { jamo, choseong } = spell(text, false);
+		forms = {
+			jamo,
+			choseong
+		};
+		keptForms.set(text, forms);
+	}
+	return forms;
+}
+function clearHangulForms() {
+	keptForms = /* @__PURE__ */ new Map();
+}
+function hangulQueryOf(keyword) {
+	const text = keyword.trim();
+	if (!HANGUL.test(text)) return null;
+	const { jamo, choseong } = spell(text, false);
+	return {
+		jamo,
+		choseong: CONSONANTS_ONLY.test(text) ? choseong : null
+	};
+}
+var HangulTier = {
+	exact: 0,
+	prefix: 1,
+	inside: 2
+};
+function tierOf(form, needle) {
+	if (form === needle) return HangulTier.exact;
+	if (form.startsWith(needle)) return HangulTier.prefix;
+	return form.includes(needle) ? HangulTier.inside : null;
+}
+function hangulTier(text, query) {
+	if (!HANGUL.test(text)) return null;
+	const forms = hangulFormsOf(text);
+	const byJamo = tierOf(forms.jamo, query.jamo);
+	const byChoseong = query.choseong === null ? null : tierOf(forms.choseong, query.choseong);
+	if (byJamo === null) return byChoseong;
+	return byChoseong === null || byJamo < byChoseong ? byJamo : byChoseong;
+}
+function rangesIn(form, at, to, needle) {
+	const ranges = [];
+	let index = form.indexOf(needle);
+	while (index !== -1) {
+		ranges.push({
+			start: at[index],
+			end: to[index + needle.length - 1]
+		});
+		index = form.indexOf(needle, index + needle.length);
+	}
+	return ranges;
+}
+function hangulRanges(text, query) {
+	if (!HANGUL.test(text)) return [];
+	const spelling = spell(text, true);
+	const ranges = rangesIn(spelling.jamo, spelling.jamoAt, spelling.jamoTo, query.jamo);
+	if (query.choseong !== null) ranges.push(...rangesIn(spelling.choseong, spelling.choseongAt, spelling.choseongTo, query.choseong));
+	return ranges.sort((a, b) => a.start - b.start || a.end - b.end);
+}
+function matchText(text, matcher, hangul) {
+	const [range] = matcher.find(text);
+	if (range) return {
+		...range,
+		literal: true
+	};
+	if (!hangul) return null;
+	const tier = hangulTier(text, hangul);
+	return tier === null ? null : {
+		literal: false,
+		tier
+	};
+}
+function hitRange(text, hit, hangul) {
+	if (hit.literal) return {
+		start: hit.start,
+		end: hit.end
+	};
+	const [range] = hangulRanges(text, hangul);
+	return range;
+}
+function rankHits(hits) {
+	const rank = ({ hit }) => hit.literal ? -1 : hit.tier;
+	return [...hits].sort((a, b) => rank(a) - rank(b));
+}
+function findPaletteChunks(args) {
+	const spelled = args.searchWords.flatMap((word) => {
+		const query = hangulQueryOf(word);
+		return query ? hangulRanges(args.textToHighlight, query) : [];
+	});
+	return [...findChunks(args), ...spelled];
+}
+//#endregion
+export { HangulTier, clearHangulForms, findPaletteChunks, hangulFormsOf, hangulQueryOf, hangulRanges, hangulTier, hitRange, matchText, rankHits };

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

@@ -0,0 +1,3 @@
+var paletteListHeight = (count) => Math.min(400, count * 45);
+//#endregion
+export { paletteListHeight };

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

@@ -0,0 +1,73 @@
+import { sourceI18n } from "../../i18n/source.js";
+//#region src/components/quick-search/paletteQuery.ts
+var PaletteScope = {
+	tables: "tables",
+	columns: "columns",
+	text: "text",
+	help: "help"
+};
+var PALETTE_PREFIXES = [
+	{
+		prefix: "#",
+		scope: PaletteScope.tables,
+		labelKey: "palette.scope.tables",
+		descriptionKey: "palette.scopeDescription.tables"
+	},
+	{
+		prefix: "@",
+		scope: PaletteScope.columns,
+		labelKey: "palette.scope.columns",
+		descriptionKey: "palette.scopeDescription.columns"
+	},
+	{
+		prefix: ":",
+		scope: PaletteScope.text,
+		labelKey: "palette.scope.text",
+		descriptionKey: "palette.scopeDescription.text"
+	},
+	{
+		prefix: "?",
+		scope: PaletteScope.help,
+		labelKey: "palette.scope.help",
+		descriptionKey: "palette.scopeDescription.help"
+	}
+];
+var WIDE_PREFIXES = {
+	"＃": "#",
+	"＠": "@",
+	"：": ":",
+	"？": "?"
+};
+var TABLE_DOT = /[.．。]/;
+var scopeOf = (value) => {
+	const head = value.charAt(0);
+	const prefix = WIDE_PREFIXES[head] ?? head;
+	return PALETTE_PREFIXES.find((found) => found.prefix === prefix);
+};
+function scopeLabel(scope, i18n = sourceI18n) {
+	const found = PALETTE_PREFIXES.find((prefix) => prefix.scope === scope);
+	return found ? i18n.t(found.labelKey) : "";
+}
+function parsePaletteQuery(value) {
+	const typed = value.trimStart();
+	const found = scopeOf(typed);
+	if (!found) return {
+		scope: null,
+		keyword: typed.trimEnd(),
+		table: null
+	};
+	const { scope } = found;
+	const rest = typed.slice(1).trim();
+	const dot = scope === PaletteScope.columns ? rest.search(TABLE_DOT) : -1;
+	return dot === -1 ? {
+		scope,
+		keyword: rest,
+		table: null
+	} : {
+		scope,
+		keyword: rest.slice(dot + 1).trim(),
+		table: rest.slice(0, dot).trim()
+	};
+}
+//#endregion
+export { PALETTE_PREFIXES, PaletteScope, parsePaletteQuery, scopeLabel };

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

@@ -1,7 +1,7 @@
 import { AppContext } from '../appContext';
 import { I18n } from '../../i18n/translate';
 import { FindField } from '../../utils/find-replace';
-import { Action } from './actions';
+import { Action } from './documentSearch';
 import { PaletteQuery, PaletteScope } from './paletteQuery';
 /** What the colon searches: the free text, never a name. */
 export declare const TEXT_FIELDS: FindField[];

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

@@ -0,0 +1,115 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { html } from "../../r-html/dist/render/index.js";
+import { sourceI18n } from "../../i18n/source.js";
+import { FindField, isTableLogicalName, walkFields } from "../../utils/find-replace/findMatches.js";
+import { DEFAULT_FIND_OPTIONS, createMatcher } from "../../utils/find-replace/matcher.js";
+import { fieldIcon } from "../erd/fieldIcon.js";
+import { hangulQueryOf, hitRange, matchText, rankHits } from "./hangul.js";
+import { createMatchAction, keywordHolder, named, searchActions } from "./documentSearch.js";
+import { PALETTE_PREFIXES, PaletteScope } from "./paletteQuery.js";
+import { prefix } from "./QuickSearch.styles.js";
+//#region src/components/quick-search/scopedActions.tsx
+var DOCUMENT_SCOPES = {
+	[PaletteScope.tables]: "palette.searchTables",
+	[PaletteScope.columns]: "palette.searchColumns",
+	[PaletteScope.text]: "palette.searchText"
+};
+var TEXT_FIELDS = [
+	FindField.tableComment,
+	FindField.columnComment,
+	FindField.memo
+];
+var COLUMN_FIELDS = [FindField.columnName, FindField.logicalName];
+var matcherOf = (keyword) => createMatcher(keyword, DEFAULT_FIND_OPTIONS).matcher;
+function scopeBase(actions, scope) {
+	switch (scope) {
+		case null: return actions.filter((action) => !action.tableId);
+		case PaletteScope.tables: return actions.filter((action) => action.tableId);
+		default: return [];
+	}
+}
+function paletteRows(app, found, { scope, keyword, table }, i18n = sourceI18n) {
+	switch (scope) {
+		case null: return keyword && !found.some(keywordHolder(keyword)) ? [...found, ...createPrefixActions(keyword, i18n)] : found;
+		case PaletteScope.tables: return rankTableActions(found, keyword);
+		case PaletteScope.columns: return createFieldActions(app, COLUMN_FIELDS, keyword, table, i18n);
+		case PaletteScope.text: return createFieldActions(app, TEXT_FIELDS, keyword, null, i18n);
+		case PaletteScope.help: return createHelpActions(keyword, i18n);
+	}
+}
+function rankTableActions(found, keyword) {
+	const holds = keywordHolder(keyword);
+	return [...found.filter(holds), ...found.filter((row) => !holds(row))];
+}
+function tableFilter({ doc, collections }, table) {
+	const matcher = table ? matcherOf(table) : null;
+	if (!matcher) return () => true;
+	const hangul = hangulQueryOf(table);
+	const ids = new Set(query(collections).collection("tableEntities").selectByIds(doc.tableIds).filter(({ name, logicalName }) => matchText(name, matcher, hangul) || logicalName !== "" && matchText(logicalName, matcher, hangul)).map(({ id }) => id));
+	return (tableId) => ids.has(tableId);
+}
+function lazyMatchAction(state, { field, hit }, hangul, i18n) {
+	let built = null;
+	const build = () => built ??= createMatchAction(state, {
+		...field,
+		...hit ? hitRange(field.text, hit, hangul) : NO_RANGE
+	}, i18n);
+	return {
+		icon: fieldIcon(field.field, 16),
+		get name() {
+			return build().name;
+		},
+		get keywords() {
+			return build().keywords;
+		},
+		perform: (app) => build().perform?.(app)
+	};
+}
+var NO_RANGE = {
+	start: 0,
+	end: 0
+};
+function createFieldActions(app, fields, keyword, table = null, i18n = sourceI18n) {
+	const { state } = app.store;
+	const matcher = matcherOf(keyword);
+	const inTable = tableFilter(state, table);
+	const hangul = matcher ? hangulQueryOf(keyword) : null;
+	const found = [];
+	for (const field of walkFields(state, fields)) {
+		if (!inTable(field.tableId)) continue;
+		if (isTableLogicalName(field)) continue;
+		if (matcher) {
+			const hit = matchText(field.text, matcher, hangul);
+			if (hit) found.push({
+				field,
+				hit
+			});
+		} else if (field.field === FindField.columnName || field.text && field.field !== FindField.logicalName) found.push({
+			field,
+			hit: null
+		});
+	}
+	return (hangul ? rankHits(found) : found).map((hit) => lazyMatchAction(state, hit, hangul, i18n));
+}
+var prefixIcon = (prefix$1) => html`<span class=${prefix}>${prefix$1}</span>`;
+function createHelpActions(keyword = "", i18n = sourceI18n) {
+	const rows = PALETTE_PREFIXES.filter(({ scope }) => scope !== PaletteScope.help).map(({ prefix, labelKey, descriptionKey }) => ({
+		icon: prefixIcon(prefix),
+		...named(i18n, labelKey, descriptionKey),
+		insert: prefix
+	}));
+	return keyword ? searchActions(rows, keyword) : rows;
+}
+function createPrefixActions(keyword, i18n = sourceI18n) {
+	return PALETTE_PREFIXES.flatMap(({ prefix, scope }) => {
+		const message = DOCUMENT_SCOPES[scope];
+		if (!message) return [];
+		return [{
+			icon: prefixIcon(prefix),
+			name: i18n.t(message, { keyword }),
+			insert: `${prefix}${keyword}`
+		}];
+	});
+}
+//#endregion
+export { TEXT_FIELDS, createFieldActions, createHelpActions, createPrefixActions, paletteRows, rankTableActions, scopeBase };

package/dist/components/sceneInteractionContext.d.ts

@@ -0,0 +1,27 @@
+import { Ctx } from '../internal-types';
+/**
+ * How a scene takes a press on a table, memo or group: 'edit' selects and
+ * carries it, and 'read' leaves the press to the scene root, selecting and moving
+ * nothing. The read-only view and a readonly editor's ERD tab read; others edit.
+ */
+export type SceneInteraction = 'edit' | 'read';
+/**
+ * What a scene root provides: its mode, or a getter of it where the mode can
+ * change, since a scene that subscribes after a provider's set still gets the
+ * value the provider started with.
+ */
+export type SceneInteractionValue = SceneInteraction | (() => SceneInteraction);
+export declare const sceneInteractionContext: import('@dineug/r-html').Context<SceneInteractionValue>;
+/**
+ * A getter of the mode the scene takes a press in, which reads what its root
+ * provides each time it is called, so a render and a handler see the mode in force.
+ */
+export declare const useSceneInteraction: (ctx: Ctx) => () => SceneInteraction;
+/**
+ * Whether a scene takes the wheel and the fingers over it now: always, but a
+ * read-only root takes them only while it holds the focus, so a page scrolls
+ * past it before then.
+ */
+export declare const sceneActiveContext: import('@dineug/r-html').Context<() => boolean>;
+export declare const useSceneActive: (ctx: Ctx) => import('@dineug/r-html').Ref<() => boolean>;
+//# sourceMappingURL=sceneInteractionContext.d.ts.map

package/dist/components/sceneInteractionContext.js

@@ -0,0 +1,15 @@
+import { createContext } from "../r-html/dist/context/createContext.js";
+import { useContext } from "../r-html/dist/context/useContext.js";
+//#region src/components/sceneInteractionContext.ts
+var sceneInteractionContext = createContext("edit");
+var useSceneInteraction = (ctx) => {
+	const provided = useContext(ctx, sceneInteractionContext);
+	return () => {
+		const value = provided.value;
+		return typeof value === "function" ? value() : value;
+	};
+};
+var sceneActiveContext = createContext(() => true);
+var useSceneActive = (ctx) => useContext(ctx, sceneActiveContext);
+//#endregion
+export { sceneActiveContext, sceneInteractionContext, useSceneActive, useSceneInteraction };

package/dist/components/sceneSourceContext.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/sceneSourceContext.ts
+var sceneSourceContext = createContext("document");
+var useSceneSource = (ctx) => useContext(ctx, sceneSourceContext);
+//#endregion
+export { sceneSourceContext, useSceneSource };

package/dist/components/schema-sql/SchemaSQL.js

@@ -0,0 +1,120 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { Database } from "../../constants/schema.js";
+import { arrayHas } from "../../utils/arrayHas.js";
+import { onBeforeMount } from "../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, observer, 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 { useAppContext } from "../appContext.js";
+import { useI18n } from "../localeContext.js";
+import Icon from "../primitives/icon/Icon.js";
+import { reportCopy } from "../toast-container/openStatusToast.js";
+import { useUnmounted } from "../../hooks/useUnmounted.js";
+import { exportSchemaSQL } from "../../utils/file/exportFile.js";
+import { useContextMenuRootProvider } from "../primitives/context-menu/context-menu-root/contextMenuRootContext.js";
+import { oracleLongNames } from "../../utils/schema-sql/Oracle.js";
+import { createSchemaSQL, createSchemaSQLTable, schemaSQLTables } from "../../utils/schema-sql/index.js";
+import { chosenTableIds, isNoTableChosen, resolvePanel, schemaSQLViewOf, syncTableChoice } from "./schemaSQLView.js";
+import { icon } from "./schema-sql-options/SchemaSQLOptions.styles.js";
+import SchemaSQLOptions, { keepSpace } from "./schema-sql-options/SchemaSQLOptions.js";
+import CodeBlock from "../primitives/code-block/CodeBlock.js";
+import { code, empty, root, show } from "./SchemaSQL.styles.js";
+import { copyToClipboard } from "../../utils/clipboard.js";
+import SchemaSQLContextMenu from "./schema-sql-context-menu/SchemaSQLContextMenu.js";
+//#region src/components/schema-sql/SchemaSQL.tsx
+var hasPropName = arrayHas([
+	"database",
+	"bracketType",
+	"databaseName",
+	"ddlScripts"
+]);
+var hasViewPropName = arrayHas([
+	"statements",
+	"header",
+	"logicalNameAsComment",
+	"tables"
+]);
+var SchemaSQL = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const contextMenu = useContextMenuRootProvider(ctx);
+	const root$1 = createRef();
+	const showButton = createRef();
+	const state = observable({
+		sql: "",
+		tables: [],
+		longNames: [],
+		noTableChosen: false
+	});
+	const setSQL = () => {
+		const { store } = app.value;
+		if (props.tableId) {
+			const { collections } = store.state;
+			const table = query(collections).collection("tableEntities").selectById(props.tableId);
+			if (table) state.sql = createSchemaSQLTable(store.state, table);
+		} else {
+			const { statements, header, logicalNameAsComment, tables } = schemaSQLViewOf(app.value);
+			const tableIds = chosenTableIds(store.state, tables);
+			const none = isNoTableChosen(tables, store.state.doc.tableGroupIds);
+			state.noTableChosen = none;
+			state.sql = none ? "" : createSchemaSQL(store.state, void 0, tableIds, {
+				statements,
+				header,
+				logicalNameAsComment,
+				scripts: true
+			});
+			state.tables = none ? [] : schemaSQLTables(store.state, tableIds);
+			state.longNames = !none && store.state.settings.database === Database.Oracle ? oracleLongNames(store.state, tableIds) : [];
+		}
+	};
+	const handleCopy = () => {
+		reportCopy(app.value.emitter, copyToClipboard(state.sql));
+	};
+	const handleSave = () => {
+		const { store } = app.value;
+		exportSchemaSQL(state.sql, store.state.settings.databaseName);
+	};
+	const handleHide = () => {
+		schemaSQLViewOf(app.value).panel = "closed";
+		nextTick(() => nextTick(() => showButton.value?.focus()));
+	};
+	const handleShow = () => {
+		schemaSQLViewOf(app.value).panel = "open";
+		nextTick(() => {
+			root$1.value?.querySelector(".schema-sql-options-hide")?.focus();
+		});
+	};
+	const handleContextmenuClose = () => {
+		contextMenu.state.show = false;
+	};
+	const shownPanel = (view) => view.panel === "unset" ? resolvePanel(view, app.value.store.state.editor.viewport.width) : view.panel;
+	onBeforeMount(() => {
+		const { store } = app.value;
+		const { settings } = store.state;
+		const view = schemaSQLViewOf(app.value);
+		if (!props.tableId) addUnsubscribe(observer(() => syncTableChoice(view, store.state.doc.tableGroupIds)));
+		setSQL();
+		addUnsubscribe(watch(settings).subscribe((propName) => {
+			hasPropName(propName) && setSQL();
+		}), watch(view).subscribe((propName) => {
+			!props.tableId && hasViewPropName(propName) && setSQL();
+		}), watch(props).subscribe((propName) => {
+			propName === "tableId" && setSQL();
+		}));
+	});
+	return () => {
+		const { t, dir } = i18n.value;
+		const full = !props.tableId;
+		const view = schemaSQLViewOf(app.value);
+		const panel = full ? shownPanel(view) : "unknown";
+		return html`<div ${ref(root$1)} class=${root} .dir="ltr" @mousedown=${contextMenu.onMousedown}><div class=${code} @contextmenu=${contextMenu.onContextmenu}><${CodeBlock} .lang="sql" .theme=${props.isDarkMode ? "dark" : "light"} .value=${state.sql} .onCopy=${handleCopy} .tools=${panel === "closed" ? html`<button ${ref(showButton)} type="button" class=${[
+			"schema-sql-options-show",
+			icon,
+			show
+		]} aria-label=${t("code.showOptions")} title=${t("code.showOptions")} aria-expanded="false" @click=${handleShow} @keydown=${keepSpace}><${Icon} .name="panel-right-open" .size=${16} /></button>` : null} />${full && state.noTableChosen ? html`<p class=${["schema-sql-no-table", empty]} .dir=${dir}>${t("schemaSql.noTablesChosen")}</p>` : null}</div>${panel === "open" ? html`<${SchemaSQLOptions} .isDarkMode=${props.isDarkMode} .readonly=${Boolean(props.readonly)} .tables=${state.tables} .longNames=${state.longNames} .onHide=${handleHide} .onSave=${handleSave} .onCopy=${handleCopy} />` : null}</div>${contextMenu.state.show ? html`<div .dir=${dir}><${SchemaSQLContextMenu} .full=${full} .onSave=${handleSave} .onClose=${handleContextmenuClose} /></div>` : null}`;
+	};
+};
+//#endregion
+export { SchemaSQL as default };

package/dist/components/schema-sql/SchemaSQL.styles.js

@@ -0,0 +1,35 @@
+import { css } from "../../r-html/dist/template/css.js";
+import { typography } from "../../styles/typography.styles.js";
+//#region src/components/schema-sql/SchemaSQL.styles.ts
+var root = css`
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--canvas-background);
+`;
+var code = css`
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+`;
+var empty = css`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 16px;
+  text-align: center;
+  color: var(--placeholder);
+  pointer-events: none;
+  ${typography.paragraph};
+`;
+var show = css`
+  background-color: var(--code-block-background);
+`;
+//#endregion
+export { code, empty, root, show };

package/dist/components/schema-sql/schema-sql-context-menu/SchemaSQLContextMenu.js

@@ -0,0 +1,45 @@
+import { KeyBindingName } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../../r-html/dist/render/index.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 ContextMenu from "../../primitives/context-menu/ContextMenu.js";
+import SubmenuChevron from "../../primitives/context-menu/submenu-chevron/SubmenuChevron.js";
+import { menuLabel } from "../../../i18n/menuLabel.js";
+import { createDatabaseMenus } from "../../erd/erd-context-menu/menus/databaseMenus.js";
+import { resolvePanel, schemaSQLViewOf, toggleSchemaSQLPanel } from "../schemaSQLView.js";
+import { createBracketMenus } from "./menus/bracketMenus.js";
+import { createStatementsMenus } from "./menus/statementsMenus.js";
+import { createHeaderMenus } from "./menus/headerMenus.js";
+//#region src/components/schema-sql/schema-sql-context-menu/SchemaSQLContextMenu.tsx
+var SchemaSQLContextMenu = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const chevronRightIcon = html`<${SubmenuChevron} />`;
+	const { addUnsubscribe } = useUnmounted();
+	onMounted(() => {
+		const { shortcut$ } = app.value;
+		addUnsubscribe(shortcut$.subscribe(({ type }) => {
+			type === KeyBindingName.stop && props.onClose();
+		}));
+	});
+	const handleTogglePanel = () => {
+		toggleSchemaSQLPanel(app.value);
+		props.onClose();
+	};
+	const handleSave = () => {
+		props.onSave?.();
+		props.onClose();
+	};
+	const renderChoices = (menus) => html`${menus.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=${menu.literal ?? true} .right=${menu.note ? html`<span style=${{ color: "var(--placeholder)" }}>${menu.note}</span>` : null} />`} />`)}`;
+	return () => {
+		const { t } = i18n.value;
+		const { store } = app.value;
+		const panelOpen = props.full && resolvePanel(schemaSQLViewOf(app.value), store.state.editor.viewport.width) === "open";
+		return html`<${ContextMenu.Root} .children=${html`<${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="brackets" .size=${14} />`} .name=${t("common.bracket")} .right=${chevronRightIcon} />`} .subChildren=${html`${createBracketMenus(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=${menuLabel(i18n.value, menu)} />`} />`)}`} />${props.full ? html`<${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .name=${t("schemaSql.statements")} .right=${chevronRightIcon} />`} .subChildren=${renderChoices(createStatementsMenus(app.value, i18n.value))} /><${ContextMenu.Item} .children=${html`<${ContextMenu.Menu} .name=${t("schemaSql.header")} .right=${chevronRightIcon} />`} .subChildren=${renderChoices(createHeaderMenus(app.value, i18n.value))} /><${ContextMenu.Item} .onClick=${handleTogglePanel} .children=${html`<${ContextMenu.Menu} .icon=${panelOpen ? html`<${Icon} .name="check" .size=${14} />` : null} .name=${t("code.optionsPanel")} />`} /><${ContextMenu.Item} .onClick=${handleSave} .children=${html`<${ContextMenu.Menu} .icon=${html`<${Icon} .name="download" .size=${14} />`} .name=${t("code.saveFile")} />`} />` : null}`} />`;
+	};
+};
+//#endregion
+export { SchemaSQLContextMenu as default };