@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.js

@@ -0,0 +1,130 @@
+import { KeyBindingName, PANEL_PASSING_BINDINGS, stopsAtPanel } from "../../../../utils/keyboard-shortcut/index.js";
+import { onBeforeMount } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, observer } from "../../../../r-html/dist/observable/index.js";
+import { html } from "../../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../../r-html/dist/render/directives/attribute/ref.js";
+import { toNameLabel } from "../../../../engine/modules/editor/utils/nameView.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 { clearRelationshipHighlight, setRelationshipHighlight } from "../../relationshipHighlight.js";
+import { showErdTargetAction$ } from "../../goToErdTarget.js";
+import TextInput from "../../../primitives/text-input/TextInput.js";
+import Sash, { SashType } from "../../../primitives/sash/Sash.js";
+import { flattenTree } from "../../../primitives/tree/treeModel.js";
+import Tree from "../../../primitives/tree/Tree.js";
+import { DiffKind } from "../../../../utils/diff/types.js";
+import { after, body, count, empty, filter, header, name, root, rowIcon, sash, status, visuallyHidden } from "./DiffTree.styles.js";
+import { buildDiffTree, describeEntry, diffTargets, statusLabel, statusLetter } from "./diffTreeModel.js";
+//#region src/components/erd/diff-viewer/diff-tree/DiffTree.tsx
+var FOLDER_LABEL = {
+	tables: "explorer.folder.tables",
+	tableGroups: "explorer.folder.tableGroups",
+	memos: "explorer.folder.memos",
+	columns: "explorer.folder.columns",
+	indexes: "explorer.folder.indexes",
+	foreignKeys: "explorer.folder.foreignKeys"
+};
+var PASSING = [...PANEL_PASSING_BINDINGS, KeyBindingName.stop];
+var DiffTree = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const root$1 = createRef();
+	const { addUnsubscribe } = useUnmounted();
+	const scroll = { top: 0 };
+	const model = observable({
+		filter: "",
+		roots: [],
+		branchIds: [],
+		rows: [],
+		collapsed: {},
+		activeId: null
+	}, { shallow: true });
+	onBeforeMount(() => {
+		addUnsubscribe(observer(() => {
+			const tree = buildDiffTree(props.entries, model.filter);
+			model.roots = tree.roots;
+			model.branchIds = tree.branchIds;
+		}), observer(() => {
+			const expanded = {};
+			for (const id of model.branchIds) if (!model.collapsed[id]) expanded[id] = true;
+			model.rows = flattenTree(model.roots, expanded);
+		}));
+	});
+	const setExpanded = (id, expanded) => {
+		const next = { ...model.collapsed };
+		expanded ? Reflect.deleteProperty(next, id) : next[id] = true;
+		model.collapsed = next;
+	};
+	const show = (pane, target) => {
+		if (!target) return;
+		const { store } = pane;
+		const editorId = store.state.editor.id;
+		clearRelationshipHighlight(editorId);
+		store.dispatchSync(showErdTargetAction$(target));
+		if (target.kind === "relationship") setRelationshipHighlight(editorId, target.relationshipId);
+	};
+	const handleActivate = (row) => {
+		const item = row.node.data;
+		if (item.kind === "folder") {
+			setExpanded(row.node.id, !row.expanded);
+			return;
+		}
+		const targets = diffTargets(item);
+		show(props.prevApp, targets.prev);
+		show(props.app, targets.next);
+	};
+	const handleKeydown = (event) => {
+		stopsAtPanel(event, app.value.keyBindingMap, PASSING) && event.stopPropagation();
+	};
+	const handleFilter = (event) => {
+		model.filter = event.target.value;
+	};
+	const handleMove = ({ x }) => {
+		const $root = root$1.value;
+		$root && props.onResize(x - $root.getBoundingClientRect().left);
+	};
+	const icon = (item, expanded) => {
+		if (item.kind === "folder") return expanded ? html`<${Icon} .name="folder-open" .size=${14} />` : html`<${Icon} .name="folder" .size=${14} />`;
+		switch (item.entry.kind) {
+			case DiffKind.table: return html`<${Icon} .name="table-2" .size=${14} />`;
+			case DiffKind.column: return html`<${Icon} .name="list" .size=${14} />`;
+			case DiffKind.index: return html`<${Icon} .name="logs" .size=${14} />`;
+			case DiffKind.foreignKey: return html`<${Icon} .name="key-round" .size=${14} />`;
+			case DiffKind.memo: return html`<${Icon} .name="sticky-note" .size=${14} />`;
+			case DiffKind.tableGroup: return html`<${Icon} .name="group" .size=${14} />`;
+		}
+	};
+	const namesOf = (entry) => entry.kind === DiffKind.table || entry.kind === DiffKind.column ? toNameLabel(props.app.store.state.settings, entry) : {
+		text: entry.name,
+		after: "",
+		standIn: false
+	};
+	const renderRow = (row) => {
+		const { t } = i18n.value;
+		const item = row.node.data;
+		const letter = statusLetter(item);
+		if (item.kind === "folder") return html`<span class=${rowIcon}>${icon(item, row.expanded)}</span><span class=${name}>${t(FOLDER_LABEL[item.folder])}</span><span class=${count}>${item.count}</span><span class=${status} title=${statusLabel(null, i18n.value)} aria-hidden="true">${letter}</span><span class=${["diff-tree-status-text", visuallyHidden]}>${statusLabel(null, i18n.value)}</span>`;
+		const { entry } = item;
+		const names = namesOf(entry);
+		const blank = !names.text.trim();
+		const status$1 = entry.status ?? "";
+		return html`<span class=${rowIcon}>${icon(item, row.expanded)}</span><span class=${[
+			name,
+			status$1,
+			{ unnamed: blank }
+		]} title=${describeEntry(entry, i18n.value)} .dir="auto">${blank ? t("common.unnamed") : names.text}</span>${names.after ? html`<span class=${[after, status$1]} .dir="auto">${names.after}</span>` : null}<span class=${[status, status$1]} aria-hidden="true">${letter}</span><span class=${["diff-tree-status-text", visuallyHidden]}>${statusLabel(entry.status, i18n.value)}</span>`;
+	};
+	return () => {
+		const { t, dir } = i18n.value;
+		const empty$1 = !props.entries.tables.length && !props.entries.tableGroups.length && !props.entries.memos.length;
+		return html`<div class=${["diff-viewer-tree", root]} ${ref(root$1)} .dir=${dir} style=${{ width: `${props.width}px` }} @keydown=${handleKeydown}><div class=${header}><${TextInput} .class=${["diff-tree-filter", filter]} .placeholder=${t("explorer.diff.filter")} .title=${t("explorer.diff.filter")} .dir="auto" .value=${model.filter} .onInput=${handleFilter} /></div><div class=${body}>${empty$1 ? html`<div class=${["diff-tree-empty", empty]}>${t("explorer.diff.noChanges")}</div>` : html`<${Tree} .rows=${model.rows} .activeId=${model.activeId} .label=${t("feedback.diffViewer")} .dir=${dir} .getScrollTop=${() => scroll.top} .onScroll=${(top) => {
+			scroll.top = top;
+		}} .onToggle=${setExpanded} .onActivate=${handleActivate} .onActiveChange=${(id) => {
+			model.activeId = id;
+		}} .renderRow=${renderRow} />`}</div><div class=${["diff-tree-sash", sash]}><${Sash} .type=${SashType.vertical} .onMove=${handleMove} .onDblclick=${() => props.onResize(260)} /></div></div>`;
+	};
+};
+//#endregion
+export { DiffTree as default };

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.styles.d.ts

@@ -6,6 +6,7 @@ export declare const empty: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const sash: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const rowIcon: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const name: import('@dineug/r-html').CSSTemplateLiterals;
+export declare const after: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const count: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const status: import('@dineug/r-html').CSSTemplateLiterals;
 export declare const visuallyHidden: import('@dineug/r-html').CSSTemplateLiterals;

package/dist/components/erd/diff-viewer/diff-tree/DiffTree.styles.js

@@ -0,0 +1,139 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+import { typography } from "../../../../styles/typography.styles.js";
+//#region src/components/erd/diff-viewer/diff-tree/DiffTree.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(--tree-background);
+  color: var(--foreground);
+`;
+var header = css`
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--explorer-border);
+`;
+var filter = css`
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 26px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  border: 1px solid var(--explorer-border);
+  border-radius: 4px;
+  outline: none;
+  background: transparent;
+  color: var(--foreground);
+  ${typography.normal};
+
+  &:focus {
+    border-color: var(--focus);
+  }
+`;
+var body = css`
+  flex: 1 1 auto;
+  min-height: 0;
+`;
+var empty = css`
+  padding: 12px;
+  color: var(--tree-muted);
+  ${typography.paragraph};
+`;
+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);
+`;
+var name = css`
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.added {
+    color: var(--diff-insert-foreground);
+  }
+
+  &.modified {
+    color: var(--diff-modify-foreground);
+  }
+
+  &.deleted {
+    color: var(--diff-delete-foreground);
+    text-decoration: line-through;
+  }
+
+  &.renamed {
+    color: var(--diff-rename-foreground);
+  }
+
+  &.unnamed {
+    font-style: italic;
+  }
+`;
+var after = css`
+  flex: 0 1000 auto;
+  min-width: 0;
+  margin-inline-start: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--tree-muted);
+
+  &.deleted {
+    text-decoration: line-through;
+  }
+`;
+var count = css`
+  flex: 0 0 auto;
+  margin-inline-start: 6px;
+  font-size: 11px;
+  color: var(--tree-muted);
+`;
+var status = css`
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  padding-inline: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--diff-modify-foreground);
+
+  &.added {
+    color: var(--diff-insert-foreground);
+  }
+
+  &.deleted {
+    color: var(--diff-delete-foreground);
+  }
+
+  &.renamed {
+    color: var(--diff-rename-foreground);
+  }
+`;
+var visuallyHidden = css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+`;
+//#endregion
+export { after, body, count, empty, filter, header, name, root, rowIcon, sash, status, visuallyHidden };

package/dist/components/erd/diff-viewer/diff-tree/diffTreeModel.d.ts

@@ -21,7 +21,10 @@ export type DiffTree = {
 };
 /** A row's id: the current entity's, or the saved one's where it is gone. */
 export declare const entryNodeId: (entry: DiffEntry) => string;
-/** Whether a name filter keeps an entry: its current name or the saved one holds what is typed, in any case. */
+/**
+ * Whether a name filter keeps an entry: its current name or the saved one,
+ * or either logical name, holds what is typed, in any case and in any view.
+ */
 export declare function matchesFilter(entry: DiffEntry, filter: string): boolean;
 /**
  * The tree a diff lists: Tables, Table Groups and Memos as the Explorer has

package/dist/components/erd/diff-viewer/diff-tree/diffTreeModel.js

@@ -0,0 +1,203 @@
+import { ReferentialActionToSQL, RelationshipType } from "../../../../constants/schema.js";
+import { DiffField, DiffKind, DiffStatus } from "../../../../utils/diff/types.js";
+//#region src/components/erd/diff-viewer/diff-tree/diffTreeModel.ts
+var PREFIX = {
+	[DiffKind.table]: "t",
+	[DiffKind.column]: "c",
+	[DiffKind.index]: "i",
+	[DiffKind.foreignKey]: "r",
+	[DiffKind.memo]: "m",
+	[DiffKind.tableGroup]: "g"
+};
+var entryNodeId = (entry) => `${PREFIX[entry.kind]}:${entry.nextId ?? `prev-${entry.prevId}`}`;
+var CHILD_FOLDER = {
+	[DiffKind.column]: "columns",
+	[DiffKind.index]: "indexes",
+	[DiffKind.foreignKey]: "foreignKeys"
+};
+var leaf = (id, data) => ({
+	id,
+	hasChildren: false,
+	children: () => [],
+	data
+});
+function folder(id, name, list) {
+	return list.length ? {
+		id,
+		hasChildren: true,
+		children: () => list,
+		data: {
+			kind: "folder",
+			folder: name,
+			count: list.length
+		}
+	} : null;
+}
+var present = (nodes) => nodes.filter((node) => node !== null);
+function matchesFilter(entry, filter) {
+	const needle = filter.trim().toLowerCase();
+	return !needle || [
+		entry.name,
+		entry.prevName,
+		entry.logicalName,
+		entry.prevLogicalName
+	].some((name) => name.toLowerCase().includes(needle));
+}
+function tableNode(table, filter) {
+	const id = entryNodeId(table);
+	const kept = matchesFilter(table, filter);
+	const children = kept ? table.children : table.children.filter((child) => matchesFilter(child, filter));
+	if (!kept && !children.length) return null;
+	const folders = present([
+		"columns",
+		"indexes",
+		"foreignKeys"
+	].map((name) => folder(`${id}/f:${name}`, name, children.filter((child) => CHILD_FOLDER[child.kind] === name).map((child) => leaf(entryNodeId(child), {
+		kind: "entry",
+		entry: child,
+		table
+	})))));
+	return {
+		id,
+		hasChildren: folders.length > 0,
+		children: () => folders,
+		data: {
+			kind: "entry",
+			entry: table,
+			table: null
+		}
+	};
+}
+function buildDiffTree(entries, filter = "") {
+	const kept = (list) => list.filter((entry) => matchesFilter(entry, filter)).map((entry) => leaf(entryNodeId(entry), {
+		kind: "entry",
+		entry,
+		table: null
+	}));
+	const roots = present([
+		folder("f:tables", "tables", present(entries.tables.map((table) => tableNode(table, filter)))),
+		folder("f:tableGroups", "tableGroups", kept(entries.tableGroups)),
+		folder("f:memos", "memos", kept(entries.memos))
+	]);
+	const branchIds = [];
+	const collect = (nodes) => nodes.forEach((node) => {
+		if (!node.hasChildren) return;
+		branchIds.push(node.id);
+		collect(node.children());
+	});
+	collect(roots);
+	return {
+		roots,
+		branchIds
+	};
+}
+function statusLetter(item) {
+	if (item.kind === "folder") return "~";
+	switch (item.entry.status) {
+		case DiffStatus.added: return "A";
+		case DiffStatus.modified: return "M";
+		case DiffStatus.deleted: return "D";
+		case DiffStatus.renamed: return "R";
+		default: return "~";
+	}
+}
+var STATUS_LABEL = {
+	[DiffStatus.added]: "explorer.status.added",
+	[DiffStatus.modified]: "explorer.status.modified",
+	[DiffStatus.deleted]: "explorer.status.deleted",
+	[DiffStatus.renamed]: "explorer.status.renamed"
+};
+var statusLabel = (status, { t }) => t(status ? STATUS_LABEL[status] : "explorer.status.inside");
+var FIELD_LABEL = {
+	[DiffField.name]: "explorer.diff.field.name",
+	[DiffField.comment]: "explorer.diff.field.comment",
+	[DiffField.dataType]: "explorer.diff.field.dataType",
+	[DiffField.default]: "explorer.diff.field.default",
+	[DiffField.order]: "explorer.diff.field.order",
+	[DiffField.tableGroup]: "explorer.diff.field.tableGroup",
+	[DiffField.position]: "explorer.diff.field.position",
+	[DiffField.size]: "explorer.diff.field.size",
+	[DiffField.color]: "explorer.diff.field.color",
+	[DiffField.members]: "explorer.diff.field.members",
+	[DiffField.columns]: "explorer.diff.field.columns",
+	[DiffField.relationshipType]: "explorer.diff.field.relationshipType",
+	[DiffField.value]: "explorer.diff.field.value"
+};
+function fieldLabel({ field }, kind, { t }) {
+	switch (field) {
+		case DiffField.autoIncrement: return "AI";
+		case DiffField.primaryKey: return "PK";
+		case DiffField.unique: return kind === DiffKind.index ? "UNIQUE" : "UQ";
+		case DiffField.notNull: return "NN";
+		case DiffField.onDelete: return "ON DELETE";
+		case DiffField.onUpdate: return "ON UPDATE";
+		default: return t(FIELD_LABEL[field]);
+	}
+}
+var RELATIONSHIP_LABEL = {
+	[RelationshipType.ZeroOne]: "common.relationshipType.zeroOne",
+	[RelationshipType.ZeroN]: "common.relationshipType.zeroN",
+	[RelationshipType.OneOnly]: "common.relationshipType.oneOnly",
+	[RelationshipType.OneN]: "common.relationshipType.oneN"
+};
+function valueText(field, value, { t }) {
+	if (typeof value === "boolean") return value ? "✓" : "✗";
+	if (field === DiffField.relationshipType && typeof value === "number") {
+		const key = RELATIONSHIP_LABEL[value];
+		return key ? t(key) : String(value);
+	}
+	if (field === DiffField.onDelete || field === DiffField.onUpdate) return ReferentialActionToSQL[value] ?? "—";
+	const text = String(value).split(/\r?\n/, 1)[0];
+	if (!text.trim()) return "—";
+	return text.length > 40 ? `${text.slice(0, 40)}…` : text;
+}
+function describeEntry(entry, i18n) {
+	return [statusLabel(entry.status, i18n), ...entry.changes.map((change) => i18n.t("explorer.diff.change", {
+		field: fieldLabel(change, entry.kind, i18n),
+		before: valueText(change.field, change.before, i18n),
+		after: valueText(change.field, change.after, i18n)
+	}))].join("\n");
+}
+function targetOf(entry, table, side) {
+	const id = side === "prev" ? entry.prevId : entry.nextId;
+	if (!id) return null;
+	switch (entry.kind) {
+		case DiffKind.table: return {
+			kind: "table",
+			tableId: id
+		};
+		case DiffKind.column:
+		case DiffKind.index: {
+			const tableId = side === "prev" ? table?.prevId : table?.nextId;
+			return tableId ? {
+				kind: "table",
+				tableId
+			} : null;
+		}
+		case DiffKind.foreignKey: return {
+			kind: "relationship",
+			relationshipId: id
+		};
+		case DiffKind.memo: return {
+			kind: "memo",
+			memoId: id
+		};
+		case DiffKind.tableGroup: return {
+			kind: "tableGroup",
+			tableGroupId: id
+		};
+	}
+}
+function diffTargets(item) {
+	if (item.kind === "folder") return {
+		prev: null,
+		next: null
+	};
+	const { entry, table } = item;
+	return {
+		prev: entry.status === DiffStatus.added ? null : targetOf(entry, table, "prev"),
+		next: entry.status === DiffStatus.deleted ? null : targetOf(entry, table, "next")
+	};
+}
+//#endregion
+export { buildDiffTree, describeEntry, diffTargets, entryNodeId, matchesFilter, statusLabel, statusLetter };