@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/canvas/table/column/Column.js

@@ -0,0 +1,416 @@
+import { isMod } from "../../../../../utils/keyboard-shortcut/index.js";
+import { ColumnOption, ColumnType, ColumnUIKey } from "../../../../../constants/schema.js";
+import { observable, watch } from "../../../../../r-html/dist/observable/index.js";
+import { repeat } from "../../../../../r-html/dist/render/directives/node/repeat.js";
+import { getLiveDomainName } from "../../../../../engine/modules/dictionary/membership.js";
+import { FocusType } from "../../../../../engine/modules/editor/state.js";
+import { bHas } from "../../../../../utils/bit.js";
+import { tableRowHeight } from "../../../../../utils/calcTable.js";
+import { editTableAction, focusColumnAction } from "../../../../../engine/modules/editor/atom.actions.js";
+import { isToggleColumnTypes, removeColumnAction$, toggleColumnValueAction$ } from "../../../../../engine/modules/table-column/generator.actions.js";
+import { columnKeyHoverEndAction$, columnKeyHoverStartAction$ } from "../../../../../engine/modules/editor/generator.actions.js";
+import { useAppContext } from "../../../../appContext.js";
+import { konva } from "../../../../../r-html-konva/dist/host.js";
+import { useI18n } from "../../../../localeContext.js";
+import { isMainButtonPress, isMultiTouch, isSecondaryButtonPress } from "../../../../../utils/domEvent.js";
+import { useThemeContext } from "../../../../themeContext.js";
+import { COLUMN_DRAG_HANDLE_REST_OPACITY, CURSOR_GRAB, CURSOR_POINTER, FOCUS_BORDER_HEIGHT, SCENE_CODE_FONT_FAMILY, SCENE_FONT_FAMILY, SCENE_FONT_SIZE, TABLE_INSET, TRANSPARENT, createSceneCursorScope, setSceneCursor } from "../../sceneTokens.js";
+import { drag$ } from "../../../../../utils/globalEventObservable.js";
+import { focusBorderFill, getAlternateKeyMarkHeight, getAlternateKeyMarkX, getColumnCellSlots, getColumnTextHeight, getColumnTextY, getColumnUnderlineY } from "../cellLayout.js";
+import { columnCellHit, columnDragHandleHit } from "../../sceneHit.js";
+import { sceneIcon } from "../../SceneIcon.template.js";
+import { useUnmounted } from "../../../../../hooks/useUnmounted.js";
+import { diffTextColor } from "../../../../../utils/diff/diff.js";
+import { mixColor } from "../../mixColor.js";
+import { blankLogicalName } from "../blankLogicalName.js";
+import { columnMarkFill } from "../dictionaryMarks.js";
+import { createDoubleClickGuard } from "../doubleClick.js";
+//#region src/components/erd/canvas/table/column/Column.tsx
+var keyFill = (keys, theme) => {
+	const isPrimaryKey = bHas(keys, ColumnUIKey.primaryKey);
+	const isForeignKey = bHas(keys, ColumnUIKey.foreignKey);
+	if (isPrimaryKey && isForeignKey) return theme.keyPFK;
+	if (isPrimaryKey) return theme.keyPK;
+	if (isForeignKey) return theme.keyFK;
+	return TRANSPARENT;
+};
+var rowBackground = (theme, view, selected, hover, tint) => {
+	if (!view && selected) return hover ? theme.columnSelectHover : theme.columnSelect;
+	if (tint > 0) return hover ? mixColor(theme.columnHover, theme.accentColor4, tint) : mixColor(theme.tableBackground, theme.accentColor3, tint);
+	return hover ? theme.columnHover : TRANSPARENT;
+};
+var Column = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const i18n = useI18n(ctx);
+	const state = observable({
+		hover: false,
+		removeHover: false,
+		handleHover: false
+	});
+	const { addUnsubscribe } = useUnmounted();
+	const doubleClick = createDoubleClickGuard();
+	const handleCursor = createSceneCursorScope();
+	let dragSubscription = null;
+	const endDrag = () => {
+		dragSubscription?.unsubscribe();
+		dragSubscription = null;
+	};
+	let hoveredHandle = null;
+	const releaseHandle = () => {
+		const left = state.handleHover ? hoveredHandle : null;
+		hoveredHandle = null;
+		state.handleHover = false;
+		handleCursor.release();
+		let node = left?.getParent() ?? null;
+		while (node && node.getType() === "Group") {
+			node.fire("mouseleave");
+			if (node.getAttr("kind") === "table") break;
+			node = node.getParent();
+		}
+	};
+	addUnsubscribe(endDrag, releaseHandle, watch(props).subscribe((name) => {
+		if (name === "dragHandle" && !props.dragHandle) releaseHandle();
+	}));
+	const handleDragstart = (event) => {
+		if (!isMainButtonPress(event.evt) || isMultiTouch(event.evt)) return;
+		endDrag();
+		let started = false;
+		const subscription = drag$.subscribe({
+			next: () => {
+				if (started) return;
+				started = true;
+				props.onDragstart?.(props.column.id, event);
+			},
+			complete: () => {
+				if (dragSubscription === subscription) dragSubscription = null;
+				started && props.onDragend?.();
+			}
+		});
+		dragSubscription = subscription;
+	};
+	let pressDraws = false;
+	let focusedPress = null;
+	const handlePress = (event) => {
+		pressDraws = Boolean(app.value.store.state.editor.drawRelationship);
+		const focused = focusedPress === event.evt;
+		focusedPress = null;
+		if (focused || !isSecondaryButtonPress(event.evt)) return;
+		const { focusTable } = app.value.store.state.editor;
+		const focusType = focusTable?.columnId === props.column.id ? focusTable.focusType : FocusType.columnName;
+		handleFocus(focusType, event);
+	};
+	const handleMouseenter = () => {
+		state.hover = true;
+	};
+	const handleMouseleave = () => {
+		state.hover = false;
+	};
+	const handleHandleMouseenter = (event) => {
+		hoveredHandle = event.currentTarget;
+		state.handleHover = true;
+		handleCursor.set(event, CURSOR_GRAB);
+	};
+	const handleHandleMouseleave = (event) => {
+		hoveredHandle = null;
+		state.handleHover = false;
+		handleCursor.set(event, "");
+	};
+	const handleRemoveMouseenter = (event) => {
+		state.removeHover = true;
+		setSceneCursor(event, CURSOR_POINTER);
+	};
+	const handleRemoveMouseleave = (event) => {
+		state.removeHover = false;
+		setSceneCursor(event, "");
+	};
+	const removeIconColor = (theme, hover) => {
+		if (!hover) return TRANSPARENT;
+		return state.removeHover ? theme.active : theme.foreground;
+	};
+	const pressSelection = (evt) => {
+		if (!isSecondaryButtonPress(evt)) return {
+			$mod: isMod(evt),
+			shiftKey: evt.shiftKey
+		};
+		const { focusTable } = app.value.store.state.editor;
+		const { column } = props;
+		return {
+			$mod: focusTable?.tableId === column.tableId && focusTable.selectColumnIds.includes(column.id),
+			shiftKey: false
+		};
+	};
+	const handleFocus = (focusType, event) => {
+		if (props.source !== "document" || props.read) return;
+		focusedPress = event.evt;
+		const { store } = app.value;
+		const { column } = props;
+		store.dispatch(focusColumnAction({
+			tableId: column.tableId,
+			columnId: column.id,
+			focusType,
+			...pressSelection(event.evt)
+		}));
+	};
+	const handleEdit = (focusType, event) => {
+		if (!doubleClick.isDouble(focusType, event)) return;
+		if (props.source !== "document" || props.read) return;
+		const { store } = app.value;
+		const { column } = props;
+		store.dispatch(isToggleColumnTypes(focusType) ? toggleColumnValueAction$(focusType, column.tableId, column.id) : editTableAction());
+	};
+	const handleRemove = () => {
+		if (pressDraws) return;
+		const { store } = app.value;
+		const { column } = props;
+		store.dispatch(removeColumnAction$(column.tableId, [column.id]));
+	};
+	const handleKeyMouseenter = () => {
+		const { column } = props;
+		if (column.ui.keys === 0) return;
+		const { store } = app.value;
+		store.dispatch(columnKeyHoverStartAction$(column.id));
+	};
+	const handleKeyMouseleave = () => {
+		const { store } = app.value;
+		store.dispatch(columnKeyHoverEndAction$());
+	};
+	const markFill = (field) => {
+		const { column } = props;
+		if (!props.checkMarks || !column[field].trim()) return null;
+		return columnMarkFill(app.value.store, themeRef.value, column, field);
+	};
+	const cell = ({ focusType, x, width, text, fill, focus, edit, sharedFocus, ellipsis, opacity = 1, align, fontFamily = SCENE_FONT_FAMILY, diffFallback = null, diffPath = focusType }) => konva`<k-group name=${`column-col ${focusType}`} kind="column-col" sharedFocus=${sharedFocus} x=${x} y=${0} opacity=${opacity} listening=${opacity > 0} @mousedown=${(event) => {
+		handleFocus(focusType, event);
+		doubleClick.track(focusType, event);
+	}} @dblclick=${(event) => {
+		handleEdit(focusType, event);
+	}}><k-text name="cell-text" y=${getColumnTextY(props.source)} width=${width} height=${getColumnTextHeight(props.source, fontFamily)} text=${text} fill=${diffTextColor(themeRef.value, props.diffPaths, diffPath, true) ?? diffFallback ?? fill} fontFamily=${fontFamily} fontSize=${SCENE_FONT_SIZE} align=${align} verticalAlign="middle" wrap="none" ellipsis=${ellipsis} visible=${!edit} hitFunc=${columnCellHit[props.source]} />${focus && props.source === "document" ? konva`<k-rect name="cell-focus-border" y=${getColumnTextY(props.source) + getColumnUnderlineY()} width=${width} height=${FOCUS_BORDER_HEIGHT} fill=${focusBorderFill(themeRef.value, edit, props.editorFocused)} listening=${false} />` : null}${sharedFocus ? konva`<k-rect name="cell-shared-focus-border" y=${tableRowHeight(props.source) - FOCUS_BORDER_HEIGHT} width=${width + 8} height=${FOCUS_BORDER_HEIGHT} fill=${sharedFocus} listening=${false} />` : null}</k-group>`;
+	const logicalNameCell = ({ focusType, x, width }, marks, diffFallback) => {
+		const { column } = props;
+		const theme = themeRef.value;
+		const filled = column.logicalName.trim() !== "";
+		let text = column.logicalName;
+		if (!filled) {
+			const { standIn, key } = blankLogicalName(app.value.store.state.settings, column.name, "common.placeholder.column");
+			text = standIn || i18n.value.t(key);
+		}
+		return cell({
+			focusType,
+			x,
+			width,
+			text,
+			fill: markFill("logicalName") ?? (filled ? theme.active : theme.placeholder),
+			...marks,
+			ellipsis: true,
+			diffFallback
+		});
+	};
+	const diffPathOf = (slot) => slot.columnType === ColumnType.columnDataType ? FocusType.columnDataType : slot.focusType;
+	const cellOf = (slot, diffFallback) => {
+		const { columnType, focusType, x, width } = slot;
+		const { column } = props;
+		const theme = themeRef.value;
+		const view = props.source !== "document";
+		switch (columnType) {
+			case ColumnType.columnName:
+				if (focusType === FocusType.columnLogicalName) return logicalNameCell(slot, {
+					focus: props.focusName,
+					edit: props.editName,
+					sharedFocus: props.sharedFocusName
+				}, diffFallback);
+				return cell({
+					focusType,
+					x,
+					width,
+					text: column.name.trim() ? column.name : i18n.value.t("common.placeholder.column"),
+					fill: markFill("name") ?? (column.name.trim() ? theme.active : theme.placeholder),
+					focus: props.focusName,
+					edit: props.editName,
+					sharedFocus: props.sharedFocusName,
+					ellipsis: true,
+					diffFallback
+				});
+			case ColumnType.columnDefault: return cell({
+				focusType,
+				x,
+				width,
+				text: column.default.trim() ? column.default : i18n.value.t("common.placeholder.default"),
+				fill: column.default.trim() ? theme.active : theme.placeholder,
+				focus: props.focusDefault,
+				edit: props.editDefault,
+				sharedFocus: props.sharedFocusDefault,
+				ellipsis: true
+			});
+			case ColumnType.columnComment: return cell({
+				focusType,
+				x,
+				width,
+				text: column.comment.trim() ? column.comment : i18n.value.t("common.placeholder.comment"),
+				fill: column.comment.trim() ? theme.active : theme.placeholder,
+				focus: props.focusComment,
+				edit: props.editComment,
+				sharedFocus: props.sharedFocusComment,
+				ellipsis: true
+			});
+			case ColumnType.columnDataType: {
+				const domainName = focusType === FocusType.columnDomain ? getLiveDomainName(app.value.store.state, column.domainId) : "";
+				const filled = domainName !== "" || column.dataType.trim() !== "";
+				return cell({
+					focusType,
+					x,
+					width,
+					text: domainName || (column.dataType.trim() ? column.dataType : i18n.value.t("common.placeholder.dataType")),
+					fill: filled ? theme.active : theme.placeholder,
+					focus: props.focusDataType,
+					edit: props.editDataType,
+					sharedFocus: props.sharedFocusDataType,
+					ellipsis: true,
+					align: view ? "right" : void 0,
+					fontFamily: view && !domainName ? SCENE_CODE_FONT_FAMILY : void 0,
+					diffPath: diffPathOf(slot)
+				});
+			}
+			case ColumnType.columnLogicalName: return logicalNameCell(slot, {
+				focus: props.focusLogicalName ?? false,
+				edit: props.editLogicalName ?? false,
+				sharedFocus: props.sharedFocusLogicalName ?? null
+			}, null);
+			case ColumnType.columnDomain: {
+				const domainName = getLiveDomainName(app.value.store.state, column.domainId);
+				return cell({
+					focusType,
+					x,
+					width,
+					text: domainName || i18n.value.t("common.placeholder.domain"),
+					fill: domainName ? theme.active : theme.placeholder,
+					focus: props.focusDomain ?? false,
+					edit: props.editDomain ?? false,
+					sharedFocus: props.sharedFocusDomain ?? null,
+					ellipsis: true
+				});
+			}
+			case ColumnType.columnNotNull: return cell({
+				focusType,
+				x,
+				width,
+				text: bHas(column.options, ColumnOption.notNull) ? "N-N" : "NULL",
+				fill: theme.active,
+				focus: props.focusNotNull,
+				edit: false,
+				sharedFocus: props.sharedFocusNotNull,
+				ellipsis: false
+			});
+			case ColumnType.columnUnique: return cell({
+				focusType,
+				x,
+				width,
+				text: "UQ",
+				fill: bHas(column.options, ColumnOption.unique) ? theme.active : theme.placeholder,
+				focus: props.focusUnique,
+				edit: false,
+				sharedFocus: props.sharedFocusUnique,
+				ellipsis: false
+			});
+			case ColumnType.columnAutoIncrement: return cell({
+				focusType,
+				x,
+				width,
+				text: "AI",
+				fill: bHas(column.options, ColumnOption.autoIncrement) ? theme.active : theme.placeholder,
+				focus: props.focusAutoIncrement,
+				edit: false,
+				sharedFocus: props.sharedFocusAutoIncrement,
+				ellipsis: false
+			});
+		}
+		return null;
+	};
+	const hiddenDiffColor = (slots, theme) => {
+		const { diffPaths } = props;
+		if (!diffPaths) return null;
+		for (const path of diffPaths.keys()) {
+			if (path === "entity") continue;
+			if (path === "columnPrimaryKey" && props.column.ui.keys !== 0) continue;
+			if (slots.some((slot) => diffPathOf(slot) === path)) continue;
+			const color = diffTextColor(theme, diffPaths, path);
+			if (color) return color;
+		}
+		return null;
+	};
+	const getColumnOrder = (slots) => {
+		const fallback = hiddenDiffColor(slots, themeRef.value);
+		return slots.map((slot) => ({
+			columnType: slot.columnType,
+			template: cellOf(slot, fallback)
+		})).filter(({ template }) => Boolean(template));
+	};
+	const alternateKeyMark = (slots, theme) => props.widthAlternateKey && props.source === "document" ? konva`<k-text name="column-alternate-key" x=${getAlternateKeyMarkX(slots)} y=${getColumnTextY(props.source)} width=${props.widthAlternateKey} height=${getAlternateKeyMarkHeight()} text=${props.alternateKey ?? ""} fill=${theme.foreground} fontFamily=${SCENE_CODE_FONT_FAMILY} fontSize=${SCENE_FONT_SIZE} verticalAlign="middle" wrap="none" listening=${false} />` : null;
+	const dragHandle = (rowHeight, theme) => {
+		const hover = state.handleHover;
+		return konva`<k-group name="column-drag-handle" kind="column-drag-handle" x=${-20} y=${(rowHeight - 20) / 2} opacity=${hover ? 1 : COLUMN_DRAG_HANDLE_REST_OPACITY} @mousedown=${handleDragstart} @touchstart=${handleDragstart} @mouseenter=${handleHandleMouseenter} @mouseleave=${handleHandleMouseleave}><k-rect name="column-drag-handle-button" x=${1 / 2} y=${1 / 2} width=${15} height=${19} cornerRadius=${4} fill=${hover ? theme.columnHandleHoverBackground : theme.columnHandleBackground} stroke=${hover ? theme.columnHandleHoverBorder : theme.columnHandleBorder} strokeWidth=${1} hitFunc=${columnDragHandleHit} />${sceneIcon({
+			icon: "grip-vertical",
+			name: "column-drag-handle-icon",
+			kind: "column-drag-handle",
+			size: 12,
+			color: hover ? theme.active : theme.foreground,
+			x: 2,
+			y: 4
+		})}</k-group>`;
+	};
+	return () => {
+		const { store } = app.value;
+		const { editor } = store.state;
+		const { column, selected, width } = props;
+		const theme = themeRef.value;
+		const hover = Boolean(props.hovered || state.hover || editor.hoverColumnMap[column.id]);
+		const dragging = Boolean(editor.draggingColumnMap[column.id]);
+		const contentWidth = width - TABLE_INSET * 2;
+		const view = props.source !== "document";
+		const background = rowBackground(theme, view, selected, hover, view && props.related ? props.litAlpha ?? 0 : 0);
+		const rowHeight = tableRowHeight(props.source);
+		const keySize = view ? 16 : 12;
+		const slots = getColumnCellSlots(store.state, {
+			name: props.widthName,
+			logicalName: props.widthLogicalName ?? 0,
+			comment: props.widthComment,
+			dataType: props.widthDataType,
+			domain: props.widthDomain ?? 0,
+			default: props.widthDefault
+		}, props.source);
+		return konva`<k-group id=${props.preview ? "" : `column-${column.id}`} name="column-row" kind="column-row" tableId=${column.tableId} selected=${selected} y=${props.y} opacity=${dragging ? .5 : 1} visible=${!props.ghost} @mousedown=${handlePress} @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave}><k-rect name="column-row-background" x=${1} width=${width - 2} height=${rowHeight} cornerRadius=${props.last ? [
+			0,
+			0,
+			6,
+			6
+		] : 0} fill=${background} />${sceneIcon({
+			icon: "key-round",
+			name: "column-col column-key",
+			kind: "column-col",
+			size: keySize,
+			color: column.ui.keys === 0 ? TRANSPARENT : diffTextColor(theme, props.diffPaths, "columnPrimaryKey", true) ?? keyFill(column.ui.keys, theme),
+			x: TABLE_INSET,
+			y: (rowHeight - keySize) / 2,
+			mouseenter: handleKeyMouseenter,
+			mouseleave: handleKeyMouseleave
+		})}${repeat(getColumnOrder(slots), ({ columnType }) => columnType, ({ template }) => template)}${alternateKeyMark(slots, theme)}${props.divider ? konva`<k-line name="column-row-divider" points=${[
+			1,
+			rowHeight,
+			width - 1,
+			rowHeight
+		]} stroke=${theme.tableBorder} strokeWidth=${1} listening=${false} />` : null}${view || props.read ? null : sceneIcon({
+			icon: "x",
+			name: "column-remove",
+			kind: "icon",
+			size: 12,
+			color: removeIconColor(theme, hover),
+			x: TABLE_INSET + contentWidth - 12,
+			y: 6,
+			click: handleRemove,
+			mouseenter: handleRemoveMouseenter,
+			mouseleave: handleRemoveMouseleave
+		})}${props.dragHandle && !view && !props.preview && !props.ghost ? dragHandle(rowHeight, theme) : null}</k-group>`;
+	};
+};
+//#endregion
+export { Column as default };

package/dist/components/erd/canvas/table/dictionaryMarks.js

@@ -0,0 +1,42 @@
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { ActionType } from "../../../../engine/modules/dictionary/actions.js";
+import { contrastRatio, relativeLuminance } from "../../../../utils/contrastText.js";
+import { DictionaryCheckLevel, checkColumn, checkTable, markOf } from "../../../../engine/modules/dictionary/checks.js";
+//#region src/components/erd/canvas/table/dictionaryMarks.ts
+var DICTIONARY_WRITES = new Set(Object.values(ActionType));
+var writesByStore = /* @__PURE__ */ new WeakMap();
+function observeDictionaryWrites(store) {
+	let writes = writesByStore.get(store);
+	if (!writes) {
+		const held = observable({ count: 0 });
+		store.subscribe((actions) => {
+			if (actions.some(({ type }) => DICTIONARY_WRITES.has(type))) held.count += 1;
+		});
+		writesByStore.set(store, held);
+		writes = held;
+	}
+	return writes.count;
+}
+var dictionaryMarkFill = (theme, level) => {
+	if (level === DictionaryCheckLevel.error) return theme.dictionaryErrorForeground;
+	if (level === DictionaryCheckLevel.warning) return theme.dictionaryWarningForeground;
+	return null;
+};
+var MARK_MIN_CONTRAST = 4.5;
+function readableMarkFill(mark, background) {
+	if (!mark) return null;
+	const text = relativeLuminance(mark);
+	const fill = relativeLuminance(background);
+	if (text === null || fill === null) return mark;
+	return contrastRatio(text, fill) >= MARK_MIN_CONTRAST ? mark : null;
+}
+function tableMarkFill(store, theme, table, field) {
+	observeDictionaryWrites(store);
+	return dictionaryMarkFill(theme, markOf(checkTable(store.state, table, field)));
+}
+function columnMarkFill(store, theme, column, field) {
+	observeDictionaryWrites(store);
+	return dictionaryMarkFill(theme, markOf(checkColumn(store.state, column, field)));
+}
+//#endregion
+export { columnMarkFill, dictionaryMarkFill, readableMarkFill, tableMarkFill };

package/dist/components/erd/canvas/table/doubleClick.js

@@ -0,0 +1,15 @@
+//#region src/components/erd/canvas/table/doubleClick.ts
+var clickCount = (event) => event.evt?.detail ?? 0;
+function createDoubleClickGuard() {
+	let opened = null;
+	return {
+		track(cell, event) {
+			if (clickCount(event) <= 1) opened = cell;
+		},
+		isDouble(cell, event) {
+			return clickCount(event) >= 2 && opened === cell;
+		}
+	};
+}
+//#endregion
+export { createDoubleClickGuard };

package/dist/components/erd/canvas/table/goToErd.js

@@ -0,0 +1,10 @@
+import { goToErdTarget } from "../../goToErdTarget.js";
+//#region src/components/erd/canvas/table/goToErd.ts
+function goToErdTable(store, tableId) {
+	goToErdTarget(store, {
+		kind: "table",
+		tableId
+	});
+}
+//#endregion
+export { goToErdTable };

package/dist/components/erd/canvas/table/useFocusTable.js

@@ -0,0 +1,19 @@
+import { useAppContext } from "../../../appContext.js";
+import { isEdit, isFocus, isFocusColumn, isSelectColumn } from "../../../../utils/focus.js";
+//#region src/components/erd/canvas/table/useFocusTable.ts
+function useFocusTable(ctx, tableId) {
+	const app = useAppContext(ctx);
+	const getFocusTable = () => app.value.store.state.editor.focusTable;
+	const hasFocus = (focusType, columnId) => isFocus(getFocusTable(), focusType, tableId, columnId);
+	const hasEdit = (focusType, columnId) => isEdit(getFocusTable(), focusType, tableId, columnId);
+	const hasSelectColumn = (columnId) => isSelectColumn(getFocusTable(), tableId, columnId);
+	const hasFocusColumn = (columnId) => isFocusColumn(getFocusTable(), tableId, columnId);
+	return {
+		hasFocus,
+		hasEdit,
+		hasSelectColumn,
+		hasFocusColumn
+	};
+}
+//#endregion
+export { useFocusTable };

package/dist/components/erd/canvas/table/useMoveTable.js

@@ -0,0 +1,21 @@
+import { SelectType } from "../../../../engine/modules/editor/state.js";
+import { useMoveEntity } from "../useMoveEntity.js";
+//#region src/components/erd/canvas/table/useMoveTable.ts
+var BLOCKED_KINDS = [
+	"table-header-color",
+	"column-drag-handle",
+	"icon"
+];
+var CLICK_KINDS = ["input-padding", "column-row"];
+var VIEW_BLOCKED_KINDS = ["icon"];
+function useMoveTable(ctx, props, source) {
+	return useMoveEntity(ctx, {
+		entityId: () => props.table.id,
+		selectType: SelectType.table,
+		blockedKinds: (scene) => scene === "document" ? BLOCKED_KINDS : VIEW_BLOCKED_KINDS,
+		clickKinds: (scene) => scene === "document" ? CLICK_KINDS : [],
+		source
+	});
+}
+//#endregion
+export { useMoveTable };

package/dist/components/erd/canvas/table/useSharedFocusTable.js

@@ -0,0 +1,53 @@
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../../r-html/dist/observable/index.js";
+import { getColumnFocusTypes, getTableFocusTypes, getViewColumnFocusTypes, sceneNameSettings, toShownFocusType } from "../../../../engine/modules/editor/utils/nameView.js";
+import { useAppContext } from "../../../appContext.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { toSharedColor } from "../../../../utils/sharedColor.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { isFocus } from "../../../../utils/focus.js";
+//#region src/components/erd/canvas/table/useSharedFocusTable.ts
+function useSharedFocusTable(ctx, tableId) {
+	const app = useAppContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ force: false });
+	const forceUpdate = () => {
+		state.force = !state.force;
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { editor: { sharedFocusTrackerMap } } = store.state;
+		addUnsubscribe(watch(sharedFocusTrackerMap).subscribe(forceUpdate));
+	});
+	const getTrackers = () => {
+		const { store } = app.value;
+		state.force;
+		return Object.values(store.state.editor.sharedFocusTrackerMap);
+	};
+	const sharedFocusTableColor = () => {
+		const tracker = getTrackers().find((tracker) => tracker.tableId === tableId);
+		return tracker ? toSharedColor(tracker.id) : null;
+	};
+	const toShownFocus = (tracker) => {
+		const { settings } = app.value.store.state;
+		const source = sourceRef.value;
+		const shown = sceneNameSettings(settings, source);
+		const types = tracker.columnId === null ? getTableFocusTypes(shown) : source === "document" ? getColumnFocusTypes(settings) : getViewColumnFocusTypes(settings);
+		const focusType = toShownFocusType(shown, types, tracker.focusType);
+		return focusType ? {
+			...tracker,
+			focusType
+		} : tracker;
+	};
+	const sharedFocusColor = (focusType, columnId) => {
+		const tracker = getTrackers().find((tracker) => isFocus(toShownFocus(tracker), focusType, tableId, columnId));
+		return tracker ? toSharedColor(tracker.id) : null;
+	};
+	return {
+		sharedFocusTableColor,
+		sharedFocusColor
+	};
+}
+//#endregion
+export { useSharedFocusTable };

package/dist/components/erd/canvas/table/useViewPin.js

@@ -0,0 +1,21 @@
+import { setViewPinnedTable } from "../../../../konva/scene/viewLayout.js";
+import { isPlainPress, onClickRelease } from "../../../../utils/clickGesture.js";
+//#region src/components/erd/canvas/table/useViewPin.ts
+function useViewPin(app, props, source) {
+	const onPress = (event) => {
+		const { evt } = event;
+		const kind = source.value;
+		if (kind === "document" || !isPlainPress(evt)) return;
+		const view = app.value.store.state.editor.views[kind];
+		if (!view) return;
+		const { id } = props.table;
+		onClickRelease(evt, () => {
+			const { store } = app.value;
+			if (store.state.editor.views[kind] !== view) return;
+			setViewPinnedTable(store.state, id, kind);
+		});
+	};
+	return { onPress };
+}
+//#endregion
+export { useViewPin };