@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/erd-context-menu/menus/showMenus.js

@@ -0,0 +1,80 @@
+import { Show } from "../../../../constants/schema.js";
+import { bHas } from "../../../../utils/bit.js";
+import { changeShowAction } from "../../../../engine/modules/settings/atom.actions.js";
+import { sourceI18n } from "../../../../i18n/source.js";
+//#region src/components/erd/erd-context-menu/menus/showMenus.ts
+var menus = [
+	{
+		labelKey: "contextMenu.show.tableComment",
+		show: Show.tableComment
+	},
+	{
+		labelKey: "contextMenu.show.columnComment",
+		show: Show.columnComment
+	},
+	{
+		labelKey: "common.column.dataType",
+		show: Show.columnDataType
+	},
+	{
+		labelKey: "contextMenu.show.columnDomain",
+		show: Show.columnDomain
+	},
+	{
+		labelKey: "common.column.default",
+		show: Show.columnDefault
+	},
+	{
+		labelKey: "common.column.notNull",
+		show: Show.columnNotNull
+	},
+	{
+		labelKey: "common.column.unique",
+		show: Show.columnUnique
+	},
+	{
+		labelKey: "contextMenu.show.alternateKey",
+		show: Show.columnAlternateKey
+	},
+	{
+		labelKey: "common.column.autoIncrement",
+		show: Show.columnAutoIncrement
+	},
+	{
+		labelKey: "common.relationship",
+		show: Show.relationship
+	},
+	{
+		labelKey: "contextMenu.show.referentialActions",
+		show: Show.hideReferentialAction,
+		hides: true
+	},
+	{
+		labelKey: "contextMenu.show.tableGroups",
+		show: Show.hideTableGroup,
+		hides: true
+	},
+	{
+		labelKey: "contextMenu.show.memos",
+		show: Show.hideMemo,
+		hides: true
+	}
+];
+function createShowMenus({ store }, i18n = sourceI18n) {
+	const { settings } = store.state;
+	return menus.map((menu) => {
+		const checked = bHas(settings.show, menu.show) !== Boolean(menu.hides);
+		return {
+			checked,
+			name: i18n.t(menu.labelKey),
+			onClick: () => {
+				store.dispatch(changeShowAction({
+					show: menu.show,
+					value: menu.hides ? checked : !checked
+				}));
+			}
+		};
+	});
+}
+//#endregion
+export { createShowMenus };

package/dist/components/erd/erd-context-menu/menus/tablePlacementMenus.js

@@ -0,0 +1,42 @@
+import { openAutomaticTablePlacementAction } from "../../../../utils/emitter.js";
+import { TablePlacement } from "../../../../constants/tablePlacement.js";
+//#region src/components/erd/erd-context-menu/menus/tablePlacementMenus.ts
+var menus = [
+	{
+		name: "Force",
+		labelKey: "common.placement.force",
+		iconName: "atom",
+		placement: TablePlacement.force
+	},
+	{
+		name: "Flow",
+		labelKey: "common.placement.flow",
+		iconName: "waypoints",
+		placement: TablePlacement.flow
+	},
+	{
+		name: "Tree - vertical",
+		labelKey: "common.placement.treeVertical",
+		iconName: "network",
+		placement: TablePlacement.layeredVertical
+	},
+	{
+		name: "Tree - horizontal",
+		labelKey: "common.placement.treeHorizontal",
+		iconName: "network",
+		placement: TablePlacement.layeredHorizontal
+	}
+];
+function createTablePlacementMenus({ emitter }, onClose) {
+	return menus.map(({ name, labelKey, iconName, placement }) => ({
+		name,
+		labelKey,
+		iconName,
+		onClick: () => {
+			emitter.emit(openAutomaticTablePlacementAction({ placement }));
+			onClose();
+		}
+	}));
+}
+//#endregion
+export { createTablePlacementMenus, menus };

package/dist/components/erd/erdShortcutPerformCheck.js

@@ -0,0 +1,20 @@
+import { CanvasType } from "../../constants/schema.js";
+import { Open } from "../../constants/open.js";
+import { Observable } from "rxjs";
+//#region src/components/erd/erdShortcutPerformCheck.ts
+var erdShortcutPerformCheck = ({ editor, settings }) => (source$) => new Observable((subscriber) => source$.subscribe({
+	next: (value) => {
+		const showAutomaticTablePlacement = editor.openMap[Open.automaticTablePlacement];
+		const showTableProperties = editor.openMap[Open.tableProperties];
+		const showTimeTravel = editor.openMap[Open.timeTravel];
+		const showSearch = editor.openMap[Open.search];
+		const showDiffViewer = editor.openMap[Open.diffViewer];
+		const showExportImage = editor.openMap[Open.exportImage];
+		const showMapColumns = editor.openMap[Open.mapColumns];
+		if (settings.canvasType === CanvasType.ERD && !showAutomaticTablePlacement && !showTableProperties && !showSearch && !showDiffViewer && !showExportImage && !showMapColumns && !showTimeTravel) subscriber.next(value);
+	},
+	error: (err) => subscriber.error(err),
+	complete: () => subscriber.complete()
+}));
+//#endregion
+export { erdShortcutPerformCheck };

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

@@ -0,0 +1,9 @@
+import { ErdTarget } from './goToErdTarget';
+import { FindMatch } from '../../utils/find-replace';
+/**
+ * Where on the ERD canvas a match's text is edited: its table, column cell,
+ * memo or table group, with the match, which a cell too wide is scrolled to
+ * by. An index goes to its table, a logical name to the cell the view draws.
+ */
+export declare function toErdTarget(match: FindMatch): ErdTarget;
+//# sourceMappingURL=erdTarget.d.ts.map

package/dist/components/erd/erdTarget.js

@@ -0,0 +1,65 @@
+import { FocusType } from "../../engine/modules/editor/state.js";
+import { FindField, isTableLogicalName } from "../../utils/find-replace/findMatches.js";
+//#region src/components/erd/erdTarget.ts
+function toErdTarget(match) {
+	const { field, id, tableId, text, start, end } = match;
+	const range = {
+		text,
+		start,
+		end
+	};
+	switch (field) {
+		case FindField.tableName: return {
+			kind: "table",
+			tableId,
+			focusType: FocusType.tableName,
+			range
+		};
+		case FindField.tableComment: return {
+			kind: "table",
+			tableId,
+			focusType: FocusType.tableComment,
+			range
+		};
+		case FindField.columnName: return {
+			kind: "column",
+			tableId,
+			columnId: id,
+			focusType: FocusType.columnName,
+			range
+		};
+		case FindField.columnComment: return {
+			kind: "column",
+			tableId,
+			columnId: id,
+			focusType: FocusType.columnComment,
+			range
+		};
+		case FindField.memo: return {
+			kind: "memo",
+			memoId: id
+		};
+		case FindField.indexName: return {
+			kind: "table",
+			tableId
+		};
+		case FindField.tableGroupName: return {
+			kind: "tableGroup",
+			tableGroupId: id
+		};
+		case FindField.logicalName: return isTableLogicalName(match) ? {
+			kind: "table",
+			tableId,
+			focusType: FocusType.tableLogicalName,
+			range
+		} : {
+			kind: "column",
+			tableId,
+			columnId: id,
+			focusType: FocusType.columnLogicalName,
+			range
+		};
+	}
+}
+//#endregion
+export { toErdTarget };

package/dist/components/erd/fieldIcon.js

@@ -0,0 +1,17 @@
+import { html } from "../../r-html/dist/render/index.js";
+import Icon from "../primitives/icon/Icon.js";
+import { FindField } from "../../utils/find-replace/findMatches.js";
+//#region src/components/erd/fieldIcon.tsx
+function fieldIcon(field, size = 14) {
+	switch (field) {
+		case FindField.tableName: return html`<${Icon} .name="table-2" .size=${size} />`;
+		case FindField.columnName:
+		case FindField.logicalName: return html`<${Icon} .name="list" .size=${size} />`;
+		case FindField.memo: return html`<${Icon} .name="sticky-note" .size=${size} />`;
+		case FindField.indexName: return html`<${Icon} .name="logs" .size=${size} />`;
+		case FindField.tableGroupName: return html`<${Icon} .name="group" .size=${size} />`;
+		default: return html`<${Icon} .name="message-square" .size=${size} />`;
+	}
+}
+//#endregion
+export { fieldIcon };

package/dist/components/erd/floating-toolbar/FloatingToolbar.d.ts

@@ -1,13 +1,9 @@
 import { FC } from '@dineug/r-html';
-export type FloatingToolbarProps = {
-    /** The editor's readonly, under which the bar offers nothing to add. */
-    readonly?: boolean;
-};
 /**
  * The bar over the bottom of the canvas: which of the two a press means, what
  * to add, the zoom, the notation the next relationship is drawn in, the name view, zen mode,
  * and which way the content lies once the screen holds none. It is the one surface zen mode leaves standing.
  */
-declare const FloatingToolbar: FC<FloatingToolbarProps>;
+declare const FloatingToolbar: FC;
 export default FloatingToolbar;
 //# sourceMappingURL=FloatingToolbar.d.ts.map

package/dist/components/erd/floating-toolbar/FloatingToolbar.js

@@ -0,0 +1,105 @@
+import { KeyBindingName, toShortcutTitle } from "../../../utils/keyboard-shortcut/index.js";
+import { RelationshipType } from "../../../constants/schema.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { isMemoShown } from "../../../utils/memo.js";
+import { isTableGroupShown } from "../../../utils/tableGroup.js";
+import { changeDrawTableGroupAction, changeHandToolAction, changeZenModeAction } from "../../../engine/modules/editor/atom.actions.js";
+import { addMemoAction$ } from "../../../engine/modules/memo/generator.actions.js";
+import { addTableAction$ } from "../../../engine/modules/table/generator.actions.js";
+import { drawStartRelationshipAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { getContentCompass, scrollToNearestContent } from "../content-compass/compassGeometry.js";
+import { bar, divider, menu } from "../view-controls/viewControls.styles.js";
+import { useNameViewDropdown } from "../view-controls/nameViewDropdown.js";
+import { toolbarCompass } from "../view-controls/ToolbarCompass.template.js";
+import { useZoomControls } from "../view-controls/zoomControls.js";
+//#region src/components/erd/floating-toolbar/FloatingToolbar.tsx
+var ICON_SIZE = 16;
+var NOTATIONS = [
+	{
+		iconName: "ZeroOne",
+		labelKey: "common.relationshipType.zeroOne",
+		relationshipType: RelationshipType.ZeroOne,
+		keyBindingName: KeyBindingName.relationshipZeroOne
+	},
+	{
+		iconName: "ZeroN",
+		labelKey: "common.relationshipType.zeroN",
+		relationshipType: RelationshipType.ZeroN,
+		keyBindingName: KeyBindingName.relationshipZeroN
+	},
+	{
+		iconName: "OneOnly",
+		labelKey: "common.relationshipType.oneOnly",
+		relationshipType: RelationshipType.OneOnly,
+		keyBindingName: KeyBindingName.relationshipOneOnly
+	},
+	{
+		iconName: "OneN",
+		labelKey: "common.relationshipType.oneN",
+		relationshipType: RelationshipType.OneN,
+		keyBindingName: KeyBindingName.relationshipOneN
+	}
+];
+var FloatingToolbar = (_props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const zoom = useZoomControls(ctx);
+	const nameView = useNameViewDropdown(ctx);
+	const handleHandTool = (value) => () => {
+		const { store } = app.value;
+		store.dispatch(changeHandToolAction({ value }), ...store.state.editor.drawTableGroup ? [changeDrawTableGroupAction({ value: false })] : []);
+	};
+	const handleAddTable = () => {
+		const { store } = app.value;
+		store.dispatch(addTableAction$());
+	};
+	const handleAddMemo = () => {
+		const { store } = app.value;
+		store.dispatch(addMemoAction$());
+	};
+	const handleAddTableGroup = () => {
+		const { store } = app.value;
+		store.dispatch(changeDrawTableGroupAction({ value: !store.state.editor.drawTableGroup }));
+	};
+	const handleDrawRelationship = (relationshipType) => () => {
+		const { store } = app.value;
+		store.dispatch(changeHandToolAction({ value: false }), drawStartRelationshipAction$(relationshipType));
+	};
+	const handleCompass = () => {
+		scrollToNearestContent(app.value.store, sourceRef.value);
+	};
+	const handleZenMode = () => {
+		const { store } = app.value;
+		store.dispatch(changeZenModeAction({ value: !store.state.editor.zenMode }));
+	};
+	return () => {
+		const { store, keyBindingMap } = app.value;
+		const { t } = i18n.value;
+		const { editor } = store.state;
+		const readonly = store.getReadonly();
+		const drawing = editor.drawRelationship?.relationshipType;
+		const compass = getContentCompass(store.state, sourceRef.value);
+		const title = (labelKey, keyBindingName) => toShortcutTitle(keyBindingMap, t(labelKey), keyBindingName);
+		return html`<div class=${["floating-toolbar", bar]} .dir="ltr">${readonly ? null : html`<div class=${[menu, { active: editor.handTool }]} title=${title("floatingToolbar.hand", KeyBindingName.handTool)} @click=${handleHandTool(true)}><${Icon} .name="hand" .size=${ICON_SIZE} /></div><div class=${[menu, { active: !editor.handTool && !editor.drawTableGroup }]} title=${title("floatingToolbar.select", KeyBindingName.handTool)} @click=${handleHandTool(false)}><${Icon} .name="mouse-pointer-2" .size=${ICON_SIZE} /></div><div class=${divider}></div><div class=${["add-table", menu]} title=${title("common.newTable", KeyBindingName.addTable)} @click=${handleAddTable}><${Icon} .name="table-2" .size=${ICON_SIZE} /></div>${isMemoShown(store.state) ? html`<div class=${["add-memo", menu]} title=${title("common.newMemo", KeyBindingName.addMemo)} @click=${handleAddMemo}><${Icon} .name="sticky-note" .size=${ICON_SIZE} /></div>` : null}${isTableGroupShown(store.state) ? html`<div class=${[
+			"add-table-group",
+			menu,
+			{ active: editor.drawTableGroup }
+		]} title=${title("common.newTableGroup", KeyBindingName.addTableGroup)} @click=${handleAddTableGroup}><${Icon} .name="group" .size=${ICON_SIZE} /></div>` : null}<div class=${divider}></div>`}${zoom()}<div class=${divider}></div>${readonly ? null : html`${NOTATIONS.map((notation) => html`<div class=${[menu, { active: drawing === notation.relationshipType }]} title=${title(notation.labelKey, notation.keyBindingName)} @click=${handleDrawRelationship(notation.relationshipType)}><${Icon} .name=${notation.iconName} .size=${ICON_SIZE} /></div>`)}<div class=${divider}></div>`}${nameView.trigger()}<div class=${divider}></div><div class=${[
+			"zen-mode",
+			menu,
+			{ active: editor.zenMode }
+		]} title=${title("floatingToolbar.zenMode", KeyBindingName.zenMode)} @click=${handleZenMode}>${editor.zenMode ? html`<${Icon} .name="minimize" .size=${ICON_SIZE} />` : html`<${Icon} .name="maximize" .size=${ICON_SIZE} />`}</div>${toolbarCompass({
+			compass,
+			title: t("floatingToolbar.goToContent"),
+			className: "content-compass",
+			onClick: handleCompass
+		})}</div>${nameView.menu()}`;
+	};
+};
+//#endregion
+export { FloatingToolbar as default };

package/dist/components/erd/floating-toolbar/FloatingToolbar.styles.d.ts

@@ -1,7 +1,2 @@
-export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const menu: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const readout: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const divider: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const compass: import('@dineug/r-html').CSSTemplateLiterals;
-export declare const compassDistance: import('@dineug/r-html').CSSTemplateLiterals;
+export { compass, compassDistance, divider, menu, readout, bar as root, } from '../view-controls/viewControls.styles';
 //# sourceMappingURL=FloatingToolbar.styles.d.ts.map

package/dist/components/erd/goToErdTarget.js

@@ -0,0 +1,248 @@
+import { query } from "../../erd-editor-schema/dist/query/index.js";
+import { CanvasType, Show } from "../../constants/schema.js";
+import { isHighLevelTable } from "../../utils/validation.js";
+import { FocusType, SelectType } from "../../engine/modules/editor/state.js";
+import { bHas } from "../../utils/bit.js";
+import { getColumnFocusTypes, getTableFocusTypes, toShownFocusType } from "../../engine/modules/editor/utils/nameView.js";
+import { isMemoShown } from "../../utils/memo.js";
+import { getColumnRect, getMemoRect, getTableHeaderRect, getTableRect, getTableWidths, unionRect } from "../../konva/scene/metrics.js";
+import { getTableGroupRect, isTableGroupShown } from "../../utils/tableGroup.js";
+import { getOriginToPlace, toScreenPoint } from "../../konva/scene/viewport.js";
+import { changeCanvasTypeAction, scrollToAction } from "../../engine/modules/settings/atom.actions.js";
+import { nextZIndex } from "../../utils/index.js";
+import { isTableFocusType } from "../../engine/modules/editor/utils/focus.js";
+import { focusColumnAction, focusTableAction, selectAction, unselectAllAction } from "../../engine/modules/editor/atom.actions.js";
+import { changeZIndexAction } from "../../engine/modules/table/atom.actions.js";
+import { selectMemoAction$ } from "../../engine/modules/memo/generator.actions.js";
+import { selectTableGroupAction$ } from "../../engine/modules/table-group/generator.actions.js";
+import { HEADER_CELLS_X, getColumnCellSlots, getHeaderCellSlots } from "./canvas/table/cellLayout.js";
+var STILL = .5;
+function toScreenSpans({ settings }, rect) {
+	const topLeft = toScreenPoint(settings, rect);
+	const bottomRight = toScreenPoint(settings, {
+		x: rect.x + rect.width,
+		y: rect.y + rect.height
+	});
+	return [{
+		start: topLeft.x,
+		end: bottomRight.x
+	}, {
+		start: topLeft.y,
+		end: bottomRight.y
+	}];
+}
+var isWithin = (span, from, to) => span.start >= from && span.end <= to;
+function placeOnAxis(rect, focus, length) {
+	const size = rect.end - rect.start;
+	let start = (length - size) / 2;
+	if (size <= length) return start;
+	const offset = focus.start - rect.start;
+	const focusLength = focus.end - focus.start;
+	start = Math.min(start, length - 40 - offset - focusLength);
+	return Math.max(start, 40 - offset);
+}
+function planAxis(rect, focus, length, axis) {
+	const size = rect.end - rect.start;
+	if (size <= length / 2) {
+		const middle = (rect.start + rect.end) / 2;
+		return middle >= length / 4 && middle <= length * 3 / 4 ? null : (length - size) / 2;
+	}
+	if (size <= length - 80) {
+		if (isWithin(rect, 0, length)) return null;
+		return axis === "y" ? 40 : (length - size) / 2;
+	}
+	return isWithin(size <= length ? rect : focus, 0, length) ? null : placeOnAxis(rect, focus, length);
+}
+function planJump(viewport, [rectX, rectY], [focusX, focusY]) {
+	const x = planAxis(rectX, focusX, viewport.width, "x") ?? rectX.start;
+	const y = planAxis(rectY, focusY, viewport.height, "y") ?? rectY.start;
+	return Math.abs(x - rectX.start) < STILL && Math.abs(y - rectY.start) < STILL ? null : {
+		x,
+		y
+	};
+}
+function* scrollIntoView(state, rect, focus = rect) {
+	const place = planJump(state.editor.viewport, toScreenSpans(state, rect), toScreenSpans(state, focus));
+	if (!place) return;
+	const origin = getOriginToPlace(state.settings.zoomLevel, rect, place);
+	yield scrollToAction({
+		originX: origin.x,
+		originY: origin.y
+	});
+}
+function getTableNameRect(state, table) {
+	const header = getTableHeaderRect(state, table);
+	if (!isHighLevelTable(state.settings.zoomLevel)) return header;
+	const { y, height } = getTableRect(state, table);
+	return {
+		...header,
+		y: y + (height - header.height) / 2
+	};
+}
+function measureRange({ toWidth }, range) {
+	const at = (index) => toWidth(range.text.slice(0, index)) - toWidth("");
+	return {
+		start: at(range.start),
+		end: at(range.end)
+	};
+}
+function getRangeRect(state, cell, range) {
+	const [cellX] = toScreenSpans(state, cell);
+	const clear = state.editor.viewport.width - 80;
+	if (!range || cellX.end - cellX.start <= clear) return null;
+	const start = Math.min(range.start, cell.width);
+	return {
+		...cell,
+		x: cell.x + start,
+		width: Math.min(range.end, cell.width) - start
+	};
+}
+function getTableFocusRect(state, table, focusType, range) {
+	const name = getTableNameRect(state, table);
+	if (isHighLevelTable(state.settings.zoomLevel)) return name;
+	const slot = getHeaderCellSlots(state, table).find((candidate) => candidate.focusType === focusType);
+	if (!slot) return name;
+	const cell = {
+		...name,
+		x: name.x + HEADER_CELLS_X + slot.x,
+		width: slot.width
+	};
+	const found = getRangeRect(state, cell, range);
+	if (found) return found;
+	return focusType === FocusType.tableComment ? cell : name;
+}
+function* scrollTableIntoView(state, table, focusType = FocusType.tableName, range) {
+	yield* scrollIntoView(state, getTableRect(state, table), getTableFocusRect(state, table, focusType, range));
+}
+function getColumnFocusRect(state, table, index, focusType, range) {
+	const row = getColumnRect(state, table, index);
+	const slot = getColumnCellSlots(state, getTableWidths(state, table)).find((candidate) => candidate.focusType === focusType);
+	if (!slot) return row;
+	const cell = {
+		...row,
+		x: getTableRect(state, table).x + slot.x,
+		width: slot.width
+	};
+	return getRangeRect(state, cell, range) ?? cell;
+}
+function visibleFocusType(state, focusType) {
+	const { settings } = state;
+	const { show } = settings;
+	let asked = focusType;
+	if (focusType === FocusType.tableComment && !bHas(show, Show.tableComment)) asked = FocusType.tableName;
+	if (focusType === FocusType.columnComment && !bHas(show, Show.columnComment)) asked = FocusType.columnName;
+	const types = isTableFocusType(asked) ? getTableFocusTypes(settings) : getColumnFocusTypes(settings);
+	return toShownFocusType(settings, types, asked) ?? asked;
+}
+var selectTableAloneAction$ = (tableId) => function* ({ doc, collections }) {
+	const tables = query(collections).collection("tableEntities").selectByIds(doc.tableIds);
+	const memos = query(collections).collection("memoEntities").selectByIds(doc.memoIds);
+	yield unselectAllAction();
+	yield selectAction({ [tableId]: SelectType.table });
+	yield changeZIndexAction({
+		id: tableId,
+		zIndex: nextZIndex(tables, memos)
+	});
+	yield focusTableAction({ tableId });
+};
+function rangeIn(ctx, { range, focusType }, ringed) {
+	return range && focusType === ringed ? measureRange(ctx, range) : void 0;
+}
+function findShownRelationship({ doc, collections }, id) {
+	const relationship = query(collections).collection("relationshipEntities").selectById(id);
+	if (!relationship || !doc.relationshipIds.includes(id)) return null;
+	const tables = query(collections).collection("tableEntities");
+	const start = tables.selectById(relationship.start.tableId);
+	const end = tables.selectById(relationship.end.tableId);
+	if (!start || !doc.tableIds.includes(start.id)) return null;
+	if (!end || !doc.tableIds.includes(end.id)) return null;
+	return {
+		relationship,
+		start,
+		end
+	};
+}
+function isRelationshipShown(state, relationshipId) {
+	return findShownRelationship(state, relationshipId) !== null;
+}
+function* showRelationship(state, relationshipId) {
+	const shown = findShownRelationship(state, relationshipId);
+	if (!shown) return;
+	const { relationship, start, end } = shown;
+	const endRect = getTableRect(state, end);
+	yield* scrollIntoView(state, unionRect(getTableRect(state, start), endRect), endRect);
+	yield selectTableAloneAction$(end.id);
+	const columnIds = end.columnIds.filter((id) => relationship.end.columnIds.includes(id));
+	const focus = (columnId, $mod) => focusColumnAction({
+		tableId: end.id,
+		columnId,
+		focusType: FocusType.columnName,
+		$mod,
+		shiftKey: false
+	});
+	for (const [index, columnId] of columnIds.entries()) yield focus(columnId, index > 0);
+	if (columnIds.length > 1) yield focus(columnIds[0], true);
+}
+function* showTableGroup(state, tableGroupId) {
+	if (!isTableGroupShown(state)) return;
+	const group = query(state.collections).collection("tableGroupEntities").selectById(tableGroupId);
+	if (!group || !state.doc.tableGroupIds.includes(tableGroupId)) return;
+	const box = getTableGroupRect(state, group);
+	yield* scrollIntoView(state, box, {
+		...box,
+		height: Math.min(box.height, 28)
+	});
+	yield selectTableGroupAction$(group.id, false);
+}
+var showErdTargetAction$ = (target) => function* (state, ctx) {
+	if (target.kind === "relationship") {
+		yield* showRelationship(state, target.relationshipId);
+		return;
+	}
+	if (target.kind === "tableGroup") {
+		yield* showTableGroup(state, target.tableGroupId);
+		return;
+	}
+	if (target.kind === "memo") {
+		if (!isMemoShown(state)) return;
+		const memo = query(state.collections).collection("memoEntities").selectById(target.memoId);
+		if (!memo) return;
+		yield* scrollIntoView(state, getMemoRect(memo));
+		yield selectMemoAction$(memo.id, false);
+		return;
+	}
+	const table = query(state.collections).collection("tableEntities").selectById(target.tableId);
+	if (!table) return;
+	if (target.kind === "table") {
+		const focusType = visibleFocusType(state, target.focusType ?? FocusType.tableName);
+		yield* scrollTableIntoView(state, table, focusType, rangeIn(ctx, target, focusType));
+		yield selectTableAloneAction$(table.id);
+		if (target.focusType) yield focusTableAction({
+			tableId: table.id,
+			focusType
+		});
+		return;
+	}
+	const index = table.columnIds.indexOf(target.columnId);
+	if (index === -1) return;
+	const focusType = visibleFocusType(state, target.focusType);
+	if (isHighLevelTable(state.settings.zoomLevel)) yield* scrollTableIntoView(state, table);
+	else yield* scrollIntoView(state, getColumnRect(state, table, index), getColumnFocusRect(state, table, index, focusType, rangeIn(ctx, target, focusType)));
+	yield selectTableAloneAction$(table.id);
+	yield focusColumnAction({
+		tableId: table.id,
+		columnId: target.columnId,
+		focusType,
+		$mod: false,
+		shiftKey: false
+	});
+};
+function showErdTab(store) {
+	if (store.state.settings.canvasType !== CanvasType.ERD) store.dispatchSync(changeCanvasTypeAction({ value: CanvasType.ERD }));
+}
+function goToErdTarget(store, target) {
+	showErdTab(store);
+	store.dispatchSync(showErdTargetAction$(target));
+}
+//#endregion
+export { goToErdTarget, isRelationshipShown, planJump, scrollIntoView, scrollTableIntoView, selectTableAloneAction$, showErdTab, showErdTargetAction$ };

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

@@ -20,6 +20,15 @@ export type SceneHit = {
  * addUnsubscribe(trackSceneHits(stage));
  */
 export declare function trackSceneHits(stage: Stage): () => void;
+/**
+ * Tells the entity the pointer comes onto over the stage mounted in a container,
+ * as konva finds it, and null for bare canvas or off the stage, and returns the
+ * teardown. Nothing is told while no stage is mounted there.
+ *
+ * @example
+ * addUnsubscribe(listenSceneHover(canvas.value, handleHover));
+ */
+export declare function listenSceneHover(container: HTMLElement, onHover: (hit: SceneHit | null) => void): () => void;
 /**
  * Whether a press over the scene belongs to what it landed on, so the canvas
  * under it neither pans, draws a marquee nor unselects: a table, a memo, a