@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/explorer/explorer-panel/ExplorerPanel.styles.js

@@ -0,0 +1,133 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/explorer/explorer-panel/ExplorerPanel.styles.ts
+var root = css`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  height: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+  border-right: 1px solid var(--explorer-border);
+  background-color: var(--explorer-background);
+  color: var(--foreground);
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 2px;
+  height: 30px;
+  padding-inline: 10px 4px;
+`;
+var title = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--tree-muted);
+`;
+var tool = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--tree-row-hover);
+    color: var(--active);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--input-active);
+  }
+`;
+var body = css`
+  flex: 1 1 auto;
+  min-height: 0;
+`;
+var sash = css`
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 5px;
+  z-index: 1;
+`;
+var rowIcon = css`
+  display: inline-flex;
+  flex: 0 0 auto;
+  margin-inline-end: 6px;
+  color: var(--tree-muted);
+
+  &.pk {
+    color: var(--key-pk);
+  }
+
+  &.fk {
+    color: var(--key-fk);
+  }
+
+  &.pfk {
+    color: var(--key-pfk);
+  }
+`;
+var name = css`
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.unnamed {
+    font-style: italic;
+    color: var(--tree-muted);
+  }
+
+  &.stand-in {
+    color: var(--tree-muted);
+  }
+`;
+var muted = css`
+  flex: 0 1000 auto;
+  min-width: 0;
+  margin-inline-start: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--tree-muted);
+`;
+var count = css`
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  padding-inline: 8px;
+  font-size: 11px;
+  color: var(--tree-muted);
+`;
+var dot = css`
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  margin-inline: 4px 8px;
+  border-radius: 50%;
+  background-color: var(--tree-muted);
+`;
+var mark = css`
+  border-radius: 2px;
+  color: var(--foreground);
+  background-color: var(--tree-match);
+`;
+//#endregion
+export { body, count, dot, header, mark, muted, name, root, rowIcon, sash, title, tool };

package/dist/components/explorer/explorer-search/ExplorerSearch.js

@@ -0,0 +1,119 @@
+import { isComposing, isMod } from "../../../utils/keyboard-shortcut/index.js";
+import { onMounted, onUpdated } from "../../../r-html/dist/render/part/node/component/hooks.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 TextInput from "../../primitives/text-input/TextInput.js";
+import { FindField, FindFieldList } from "../../../utils/find-replace/findMatches.js";
+import { explorerViewOf } from "../explorerView.js";
+import { countText, goToNext, goToPrevious, replaceAll, replaceOne, setQuery, setReplacement, takeSearchFocus, toggleField, toggleOption } from "../explorerSearch.js";
+import { count, field, fields, input, root, row, rows, scope, scopes, status, toggle, twisty } from "./ExplorerSearch.styles.js";
+//#region src/components/explorer/explorer-search/ExplorerSearch.tsx
+var SCOPE_LABEL = {
+	[FindField.tableName]: "findReplace.scope.tableName",
+	[FindField.tableComment]: "findReplace.scope.tableComment",
+	[FindField.columnName]: "findReplace.scope.columnName",
+	[FindField.columnComment]: "findReplace.scope.columnComment",
+	[FindField.memo]: "findReplace.scope.memo",
+	[FindField.indexName]: "findReplace.scope.indexName",
+	[FindField.tableGroupName]: "findReplace.scope.tableGroupName",
+	[FindField.logicalName]: "findReplace.scope.logicalName"
+};
+var ExplorerSearch = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const focusField = () => {
+		if (!takeSearchFocus(app.value.store)) return;
+		const input = root$1.value?.querySelector(".find-input");
+		input?.focus();
+		input?.select();
+	};
+	onMounted(focusField);
+	onUpdated(focusField);
+	const handleQueryInput = (event) => {
+		setQuery(app.value.store, event.target.value);
+	};
+	const handleReplacementInput = (event) => {
+		setReplacement(app.value.store, event.target.value);
+	};
+	const handleQueryKeydown = (event) => {
+		if (event.key !== "Enter" || isComposing(event)) return;
+		event.preventDefault();
+		const { store } = app.value;
+		event.shiftKey ? goToPrevious(store) : goToNext(store);
+	};
+	const handleReplacementKeydown = (event) => {
+		if (event.key !== "Enter" || isComposing(event)) return;
+		event.preventDefault();
+		const { store } = app.value;
+		isMod(event) ? replaceAll(store) : replaceOne(store);
+	};
+	const handleReplace = () => {
+		props.readonly || replaceOne(app.value.store);
+	};
+	const handleReplaceAll = () => {
+		props.readonly || replaceAll(app.value.store);
+	};
+	const handleToggleReplace = () => {
+		const view = explorerViewOf(app.value.store);
+		view.replaceOpen = !view.replaceOpen;
+	};
+	const handleToggleScopes = () => {
+		const view = explorerViewOf(app.value.store);
+		view.scopesOpen = !view.scopesOpen;
+	};
+	return () => {
+		const { store } = app.value;
+		const { t } = i18n.value;
+		const view = explorerViewOf(store);
+		view.focusRequest;
+		const invalid = view.error === "invalid";
+		const replaceShown = !props.readonly && view.replaceOpen;
+		const replaceable = !props.readonly && view.matches.length > 0;
+		const toggleReplace = t("explorer.toggleReplace");
+		const moreScopes = t("explorer.moreScopes");
+		return html`<div class=${["explorer-search", root]} ${ref(root$1)}><div class=${fields}>${props.readonly ? null : html`<button class=${[
+			"explorer-replace-toggle",
+			toggle,
+			twisty,
+			{ collapsed: !view.replaceOpen }
+		]} type="button" title=${toggleReplace} aria-label=${toggleReplace} aria-expanded=${String(view.replaceOpen)} @click=${handleToggleReplace}>${view.replaceOpen ? html`<${Icon} .name="chevron-down" .size=${14} />` : html`<${Icon} .name="chevron-right" .size=${14} />`}</button>`}<div class=${rows}><div class=${[field, { invalid }]}><${TextInput} .class=${[
+			"find-input",
+			input,
+			{ invalid }
+		]} .title=${t("common.find")} .placeholder=${t("common.find")} .dir="auto" .value=${view.query} .onInput=${handleQueryInput} .onKeydown=${handleQueryKeydown} /><button class=${[
+			"find-match-case",
+			toggle,
+			{ active: view.matchCase }
+		]} type="button" title=${t("findReplace.matchCase")} aria-pressed=${String(view.matchCase)} @click=${() => toggleOption(store, "matchCase")}><${Icon} .name="case-sensitive" .size=${16} /></button><button class=${[
+			"find-whole-word",
+			toggle,
+			{ active: view.wholeWord }
+		]} type="button" title=${t("findReplace.wholeWord")} aria-pressed=${String(view.wholeWord)} @click=${() => toggleOption(store, "wholeWord")}><${Icon} .name="whole-word" .size=${16} /></button><button class=${[
+			"find-regex",
+			toggle,
+			{ active: view.regex }
+		]} type="button" title=${t("findReplace.regex")} aria-pressed=${String(view.regex)} @click=${() => toggleOption(store, "regex")}><${Icon} .name="regex" .size=${16} /></button></div>${replaceShown ? html`<div class=${row}><div class=${field}><${TextInput} .class=${["replace-input", input]} .title=${t("findReplace.replace")} .placeholder=${t("findReplace.replace")} .dir="auto" .value=${view.replacement} .onInput=${handleReplacementInput} .onKeydown=${handleReplacementKeydown} /><button class=${[
+			"find-preserve-case",
+			toggle,
+			{ active: view.preserveCase }
+		]} type="button" title=${t("findReplace.preserveCase")} aria-pressed=${String(view.preserveCase)} @click=${() => toggleOption(store, "preserveCase")}><${Icon} .name="case-upper" .size=${16} /></button></div><button class=${["find-replace-one", toggle]} type="button" title=${`${t("findReplace.replace")} (Enter)`} ?disabled=${!replaceable} @click=${handleReplace}><${Icon} .name="replace" .size=${16} /></button><button class=${["find-replace-all", toggle]} type="button" title=${t("findReplace.replaceAll")} ?disabled=${!replaceable} @click=${handleReplaceAll}><${Icon} .name="replace-all" .size=${16} /></button></div>` : null}</div></div><div class=${status}><span class=${[
+			"find-count",
+			count,
+			{ invalid }
+		]} aria-live="polite">${countText(store, i18n.value)}</span><button class=${["find-previous", toggle]} type="button" title=${`${t("findReplace.previousMatch")} (Shift+Enter)`} ?disabled=${!view.matches.length} @click=${() => goToPrevious(store)}><${Icon} .name="arrow-up" .size=${16} /></button><button class=${["find-next", toggle]} type="button" title=${`${t("findReplace.nextMatch")} (Enter)`} ?disabled=${!view.matches.length} @click=${() => goToNext(store)}><${Icon} .name="arrow-down" .size=${16} /></button><button class=${[
+			"find-scopes-toggle",
+			toggle,
+			{ active: view.scopesOpen }
+		]} type="button" title=${moreScopes} aria-label=${moreScopes} aria-expanded=${String(view.scopesOpen)} @click=${handleToggleScopes}><${Icon} .name="ellipsis" .size=${16} /></button></div>${view.scopesOpen ? html`<div class=${scopes}>${FindFieldList.map((field) => html`<button class=${[
+			"find-scope",
+			scope,
+			{ active: view.fields.includes(field) }
+		]} type="button" data-field=${field} aria-pressed=${String(view.fields.includes(field))} @click=${() => toggleField(store, field)}>${t(SCOPE_LABEL[field])}</button>`)}</div>` : null}</div>`;
+	};
+};
+//#endregion
+export { ExplorerSearch as default };

package/dist/components/explorer/explorer-search/ExplorerSearch.styles.js

@@ -0,0 +1,151 @@
+import { css } from "../../../r-html/dist/template/css.js";
+import { typography } from "../../../styles/typography.styles.js";
+//#region src/components/explorer/explorer-search/ExplorerSearch.styles.ts
+var root = css`
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  gap: 4px;
+  padding: 2px 8px 6px;
+  border-bottom: 1px solid var(--explorer-border);
+  ${typography.paragraph};
+`;
+var fields = css`
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+`;
+var rows = css`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: 4px;
+  min-width: 0;
+`;
+var row = css`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`;
+var field = css`
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  gap: 1px;
+  min-width: 0;
+  height: 26px;
+  padding-inline-end: 2px;
+  box-sizing: border-box;
+  border: 1px solid var(--explorer-border);
+  border-radius: 4px;
+  background-color: var(--tree-background);
+
+  &:focus-within {
+    border-color: var(--focus);
+  }
+
+  &.invalid {
+    border-color: var(--find-replace-error);
+  }
+`;
+var input = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0 6px;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--foreground);
+  ${typography.normal};
+`;
+var toggle = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--tree-row-hover);
+  }
+
+  &.active {
+    color: var(--accent-color-11);
+    background-color: var(--accent-color-4);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--focus);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+    background-color: transparent;
+  }
+`;
+var twisty = css`
+  align-self: stretch;
+  height: auto;
+  min-height: 26px;
+
+  [dir='rtl'] &.collapsed {
+    transform: scaleX(-1);
+  }
+`;
+var status = css`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 22px;
+`;
+var count = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  padding-inline-start: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--tree-muted);
+  font-variant-numeric: tabular-nums;
+
+  &.invalid {
+    color: var(--find-replace-error);
+  }
+`;
+var scopes = css`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+`;
+var scope = css`
+  height: 20px;
+  padding: 0 8px;
+  border: 1px solid var(--explorer-border);
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--foreground);
+  cursor: pointer;
+  ${typography.paragraph};
+
+  &:hover {
+    color: var(--active);
+  }
+
+  &.active {
+    color: var(--accent-color-11);
+    border-color: var(--accent-color-8);
+    background-color: var(--accent-color-3);
+  }
+`;
+//#endregion
+export { count, field, fields, input, root, row, rows, scope, scopes, status, toggle, twisty };

package/dist/components/explorer/explorerCommands.js

@@ -0,0 +1,45 @@
+import { CanvasType } from "../../constants/schema.js";
+import { openFindReplaceAction } from "../../utils/emitter.js";
+import { showErdTab } from "../erd/goToErdTarget.js";
+import { isTakenOver } from "../../utils/takeover.js";
+import { explorerViewOf } from "./explorerView.js";
+import { applyViewport, layoutOf } from "../erd-editor/viewportLayout.js";
+//#region src/components/explorer/explorerCommands.ts
+function isExplorerPressed(store) {
+	const { editor, settings } = store.state;
+	const view = explorerViewOf(store);
+	return view.open && settings.canvasType === CanvasType.ERD && (!editor.zenMode || view.zenReveal);
+}
+var isExplorerShown = (store) => layoutOf(store).reach > 0;
+function openExplorer(store) {
+	if (isTakenOver(store.state)) return;
+	showErdTab(store);
+	applyViewport(store);
+	const view = explorerViewOf(store);
+	view.open = true;
+	if (store.state.editor.zenMode) view.zenReveal = true;
+	applyViewport(store);
+}
+function closeExplorer(store) {
+	const view = explorerViewOf(store);
+	view.open = false;
+	view.zenReveal = false;
+	applyViewport(store);
+}
+function toggleExplorer(store) {
+	if (isTakenOver(store.state)) return;
+	isExplorerPressed(store) ? closeExplorer(store) : openExplorer(store);
+}
+function toggleExplorerSearch(store, emitter) {
+	if (isTakenOver(store.state)) return;
+	isExplorerPressed(store) ? closeExplorer(store) : emitter.emit(openFindReplaceAction());
+}
+function setExplorerWidth(store, width) {
+	const view = explorerViewOf(store);
+	const next = Math.round(Math.min(480, Math.max(200, width)));
+	if (view.width === next) return;
+	view.width = next;
+	applyViewport(store);
+}
+//#endregion
+export { closeExplorer, isExplorerPressed, isExplorerShown, openExplorer, setExplorerWidth, toggleExplorer, toggleExplorerSearch };

package/dist/components/explorer/explorerNavigation.js

@@ -0,0 +1,50 @@
+import { Open } from "../../constants/open.js";
+import { FocusType } from "../../engine/modules/editor/state.js";
+import { changeOpenMapAction } from "../../engine/modules/editor/atom.actions.js";
+import { clearRelationshipHighlight, setRelationshipHighlight } from "../erd/relationshipHighlight.js";
+import { goToErdTarget, isRelationshipShown } from "../erd/goToErdTarget.js";
+import { toErdTarget } from "../erd/erdTarget.js";
+//#region src/components/explorer/explorerNavigation.ts
+function targetOf(node) {
+	switch (node.kind) {
+		case "folder": return null;
+		case "table":
+		case "index":
+		case "groupTable": return {
+			kind: "table",
+			tableId: node.tableId
+		};
+		case "column": return {
+			kind: "column",
+			tableId: node.tableId,
+			columnId: node.columnId,
+			focusType: FocusType.columnName
+		};
+		case "foreignKey": return {
+			kind: "relationship",
+			relationshipId: node.relationshipId
+		};
+		case "tableGroup": return {
+			kind: "tableGroup",
+			tableGroupId: node.tableGroupId
+		};
+		case "memo": return {
+			kind: "memo",
+			memoId: node.memoId
+		};
+		case "excerpt": return toErdTarget(node.match);
+	}
+}
+function jumpTo(store, target) {
+	const editorId = store.state.editor.id;
+	clearRelationshipHighlight(editorId);
+	if (store.state.editor.openMap[Open.tableProperties]) store.dispatchSync(changeOpenMapAction({ [Open.tableProperties]: false }));
+	goToErdTarget(store, target);
+	if (target.kind === "relationship" && isRelationshipShown(store.state, target.relationshipId)) setRelationshipHighlight(editorId, target.relationshipId);
+}
+function activateNode(store, node) {
+	const target = targetOf(node);
+	target && jumpTo(store, target);
+}
+//#endregion
+export { activateNode, jumpTo, targetOf };