@dineug/erd-editor 4.2.0 → 5.0.0

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

@@ -0,0 +1,399 @@
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { FocusType } from "../../../../engine/modules/editor/state.js";
+import { sceneNameSettings, toNameViewFocusType } from "../../../../engine/modules/editor/utils/nameView.js";
+import { clearViewHoverTable, getVisibleColumnIds, setViewHoverTable } from "../../../../konva/scene/viewLayout.js";
+import { getAlternateKeyMarks } from "../../../../utils/tableKeys.js";
+import { tableHeaderHeight } from "../../../../utils/calcTable.js";
+import { getColumnRect, getTableRect, getTableWidths } from "../../../../konva/scene/metrics.js";
+import { getTableGroupTint, getTableHeaderTint } from "../../../../utils/tableGroup.js";
+import { getFocusedColumnIds } from "../../../../engine/modules/editor/utils/focus.js";
+import { dragendColumnAction, editTableAction, focusTableAction } from "../../../../engine/modules/editor/atom.actions.js";
+import { removeTableAction$ } from "../../../../engine/modules/table/generator.actions.js";
+import { addColumnAction$ } from "../../../../engine/modules/table-column/generator.actions.js";
+import { dragoverColumnAction$, dragstartColumnAction$ } from "../../../../engine/modules/editor/generator.actions.js";
+import { dragendColumnAllAction, openColorPickerAction } from "../../../../utils/emitter.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useI18n } from "../../../localeContext.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { useDiffMap } from "../../../diffContext.js";
+import { CURSOR_GRABBING } from "../../../../utils/stageCursor.js";
+import { CURSOR_POINTER, FOCUS_BORDER_HEIGHT, SCENE_FONT_FAMILY, SCENE_FONT_SIZE, SCENE_FONT_WEIGHT, TABLE_INSET, TRANSPARENT, VIEW_CARD_GLOW_OPACITY, documentCardShadow, holdSceneCursor, mainButtonClick, setSceneCursor, viewCardShadow } from "../sceneTokens.js";
+import { diffOutlineRect } from "../DiffOutline.template.js";
+import { drag$ } from "../../../../utils/globalEventObservable.js";
+import { hasKindAncestor } from "../sceneKind.js";
+import { useSceneInteraction } from "../../../sceneInteractionContext.js";
+import { CELL_UNDERLINE_Y, focusBorderFill, getHeaderCellSlots, getHeaderCellsY, getHeaderTextHeight, getHeaderTextY } from "./cellLayout.js";
+import { headerCellHit } from "../sceneHit.js";
+import { sceneIcon } from "../SceneIcon.template.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { useSharedSelectEntity } from "../useSharedSelectEntity.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { diffOutline, diffTextColor } from "../../../../utils/diff/diff.js";
+import { progressOf, transitionKey, transitionTo } from "../highlightTransition.js";
+import { mixColor } from "../mixColor.js";
+import { beginColumnDragPointer, endColumnDragPointer, moveColumnDragPointer } from "../columnDragPointer.js";
+import { blankLogicalName } from "./blankLogicalName.js";
+import { getColorEdgePath } from "./colorEdge.js";
+import { readableMarkFill, tableMarkFill } from "./dictionaryMarks.js";
+import { createDoubleClickGuard } from "./doubleClick.js";
+import Column from "./column/Column.js";
+import { goToErdTable } from "./goToErd.js";
+import { focusFlowView } from "../../../flowCenters.js";
+import { findColumnDropTarget, isDropInPlace } from "../../../../konva/scene/columnDropTarget.js";
+import { createKonvaFlip } from "../../../../konva/scene/konvaFlip.js";
+import { useFocusTable } from "./useFocusTable.js";
+import { useMoveTable } from "./useMoveTable.js";
+import { useSharedFocusTable } from "./useSharedFocusTable.js";
+import { useViewPin } from "./useViewPin.js";
+//#region src/components/erd/canvas/table/Table.tsx
+var VIEW_PRESS_BLOCKED_KINDS = ["icon"];
+var nameFill = (theme, name, view) => {
+	if (!name.trim()) return theme.placeholder;
+	return view ? theme.foreground : theme.active;
+};
+var viewNameFill = (theme, name, view, after) => view && after ? theme.placeholder : nameFill(theme, name, view);
+var Table = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const i18n = useI18n(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const interaction = useSceneInteraction(ctx);
+	const diffMapRef = useDiffMap(ctx);
+	const { hasEdit, hasFocus, hasSelectColumn, hasFocusColumn } = useFocusTable(ctx, props.table.id);
+	const { sharedFocusColor, sharedFocusTableColor } = useSharedFocusTable(ctx, props.table.id);
+	const { sharedSelectColor } = useSharedSelectEntity(ctx, props.table.id);
+	const { onMoveStart } = useMoveTable(ctx, props, sourceRef);
+	const pin = useViewPin(app, props, sourceRef);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({
+		hover: false,
+		iconHover: null,
+		dragstartId: null
+	});
+	const doubleClick = createDoubleClickGuard();
+	let dragoverSubscription = null;
+	let dragLayerStage = null;
+	let flip = null;
+	const handleMouseenter = () => {
+		state.hover = true;
+		if (sourceRef.value !== "document") setViewHoverTable(app.value.store.state, props.table.id, sourceRef.value);
+	};
+	const handleMouseleave = () => {
+		state.hover = false;
+		if (sourceRef.value !== "document") setViewHoverTable(app.value.store.state, null, sourceRef.value);
+	};
+	addUnsubscribe(() => {
+		if (sourceRef.value === "document") return;
+		clearViewHoverTable(app.value.store.state, props.table.id, sourceRef.value);
+	});
+	const handleIconMouseenter = (icon) => (event) => {
+		state.iconHover = icon;
+		setSceneCursor(event, CURSOR_POINTER);
+	};
+	const handleIconMouseleave = (event) => {
+		state.iconHover = null;
+		setSceneCursor(event, "");
+	};
+	const iconColor = (theme, icon, hovered, tint) => {
+		if (!hovered) return TRANSPARENT;
+		if (tint) return tint.foreground;
+		return state.iconHover === icon ? theme.active : theme.foreground;
+	};
+	const bodyStroke = (theme, selected) => {
+		if (!selected) return theme.tableBorder;
+		return props.editorFocused === false ? theme.placeholder : theme.tableSelect;
+	};
+	let pressDraws = false;
+	const handlePress = (event) => {
+		pressDraws = Boolean(app.value.store.state.editor.drawRelationship);
+		if (sourceRef.value !== "document" && hasKindAncestor(event.target, VIEW_PRESS_BLOCKED_KINDS)) return;
+		onMoveStart(event);
+		pin.onPress(event);
+	};
+	const handleOpenColorPicker = (event) => {
+		if (pressDraws) return;
+		const { emitter } = app.value;
+		emitter.emit(openColorPickerAction({
+			x: event.evt.clientX,
+			y: event.evt.clientY,
+			color: props.table.ui.color
+		}));
+	};
+	const handleAddColumn = () => {
+		if (pressDraws) return;
+		const { store } = app.value;
+		store.dispatch(addColumnAction$(props.table.id));
+	};
+	const handleRemoveTable = () => {
+		if (pressDraws) return;
+		const { store } = app.value;
+		store.dispatch(removeTableAction$(props.table.id));
+	};
+	const handleRelated = () => {
+		focusFlowView(app.value, [props.table.id]);
+	};
+	const handleGoToErd = () => {
+		goToErdTable(app.value.store, props.table.id);
+	};
+	const handleFocus = (focusType) => {
+		if (sourceRef.value !== "document" || interaction() === "read") return;
+		const { store } = app.value;
+		store.dispatch(focusTableAction({
+			tableId: props.table.id,
+			focusType
+		}));
+	};
+	const handleEdit = (focusType, event) => {
+		if (!doubleClick.isDouble(focusType, event)) return;
+		if (sourceRef.value !== "document" || interaction() === "read") return;
+		const { store } = app.value;
+		store.dispatch(editTableAction());
+	};
+	const toCanvasPoint = (event) => {
+		const stage = dragLayerStage;
+		const layer = stage?.findOne(".scene");
+		if (!stage || !layer) return null;
+		stage.setPointersPositions(event);
+		const position = stage.getPointerPosition();
+		if (!position) return null;
+		return layer.getAbsoluteTransform().copy().invert().point(position);
+	};
+	const handleDragoverColumn = (event) => {
+		const { store } = app.value;
+		const point = toCanvasPoint(event);
+		if (!point) return;
+		const target = findColumnDropTarget(store.state, point, sourceRef.value);
+		moveColumnDragPointer(store.state, point, target !== null);
+		if (!target) return;
+		const { editor: { draggableColumn } } = store.state;
+		if (!draggableColumn || isDropInPlace(store.state, draggableColumn, target)) return;
+		flip?.snapshot();
+		store.dispatch(dragoverColumnAction$(target.columnId, target.tableId));
+	};
+	const handleDragendColumn = () => {
+		const { store, emitter } = app.value;
+		if (!dragoverSubscription && state.dragstartId === null) return;
+		dragoverSubscription?.unsubscribe();
+		dragoverSubscription = null;
+		dragLayerStage = null;
+		state.dragstartId = null;
+		endColumnDragPointer(store.state);
+		store.dispatch(dragendColumnAction());
+		emitter.emit(dragendColumnAllAction());
+	};
+	const handleDragstartColumn = (columnId, event) => {
+		const { store } = app.value;
+		if (sourceRef.value !== "document") return;
+		const { editor: { focusTable } } = store.state;
+		if (!focusTable || !focusTable.columnId) return;
+		const stage = event.target?.getStage() ?? null;
+		if (!stage) return;
+		dragoverSubscription?.unsubscribe();
+		dragLayerStage = stage;
+		state.dragstartId = columnId;
+		flip ??= createKonvaFlip(() => stage.find(".column-row"));
+		const press = toCanvasPoint(event.evt);
+		if (press) beginColumnDragPointer(store.state, props.table, press, {
+			columnId,
+			columnIds: getFocusedColumnIds(store.state)
+		});
+		store.dispatch(dragstartColumnAction$());
+		dragoverSubscription = drag$.subscribe({
+			next: ({ event: move }) => {
+				handleDragoverColumn(move);
+			},
+			complete: handleDragendColumn
+		});
+		dragoverSubscription.add(holdSceneCursor(event, CURSOR_GRABBING));
+	};
+	onMounted(() => {
+		const { emitter } = app.value;
+		addUnsubscribe(emitter.on({ dragendColumnAll: () => {
+			dragoverSubscription?.unsubscribe();
+			dragoverSubscription = null;
+			dragLayerStage = null;
+			state.dragstartId = null;
+			endColumnDragPointer(app.value.store.state);
+		} }), () => {
+			dragoverSubscription && endColumnDragPointer(app.value.store.state);
+			dragoverSubscription?.unsubscribe();
+			dragoverSubscription = null;
+			flip?.cancel();
+		});
+	});
+	const headerCell = ({ focusType, x, width, text, fill, focus, edit, sharedFocus }) => {
+		const source = sourceRef.value;
+		const view = source !== "document";
+		const diffFill = diffTextColor(themeRef.value, diffMapRef.value?.get(props.table.id), focusType);
+		return konva`<k-group name=${`input-padding ${focusType}`} kind="input-padding" sharedFocus=${sharedFocus} x=${x} y=${0} @mousedown=${(event) => {
+			handleFocus(focusType);
+			doubleClick.track(focusType, event);
+		}} @dblclick=${(event) => {
+			handleEdit(focusType, event);
+		}}><k-text name="cell-text" y=${getHeaderTextY(source)} width=${width} height=${getHeaderTextHeight(source)} text=${text} fill=${diffFill ?? fill} fontFamily=${SCENE_FONT_FAMILY} fontSize=${view ? 14 : SCENE_FONT_SIZE} fontStyle=${view ? "500" : SCENE_FONT_WEIGHT} verticalAlign="middle" wrap="none" ellipsis=${true} visible=${!edit} hitFunc=${headerCellHit[source]} />${focus && !view ? konva`<k-rect name="cell-focus-border" y=${getHeaderTextY(source) + CELL_UNDERLINE_Y} 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=${24 - FOCUS_BORDER_HEIGHT} width=${width + 8} height=${FOCUS_BORDER_HEIGHT} fill=${sharedFocus} listening=${false} />` : null}</k-group>`;
+	};
+	const logicalNameText = () => {
+		const { table } = props;
+		if (table.logicalName.trim()) return table.logicalName;
+		const { settings } = app.value.store.state;
+		const { standIn, key } = blankLogicalName(settings, table.name, "common.placeholder.table");
+		return standIn || i18n.value.t(key);
+	};
+	return () => {
+		const { store } = app.value;
+		const { editor, collections, settings } = store.state;
+		const { table } = props;
+		const theme = themeRef.value;
+		const selected = Boolean(editor.selectedMap[table.id]);
+		const source = sourceRef.value;
+		const tableWidths = getTableWidths(store.state, table, source);
+		const rect = getTableRect(store.state, table, source);
+		const contentWidth = rect.width - TABLE_INSET * 2;
+		const hovered = Boolean(props.hovered || state.hover);
+		const draggingColumnId = props.ghostColumnId ?? state.dragstartId;
+		const ghostColumnId = draggingColumnId !== null && !table.columnIds.includes(draggingColumnId) ? draggingColumnId : null;
+		const sharedTableColor = sharedFocusTableColor();
+		const sharedSelected = sharedSelectColor();
+		const sharedNameColor = sharedFocusColor(FocusType.tableName);
+		const sharedLogicalNameColor = sharedFocusColor(FocusType.tableLogicalName);
+		const sharedCommentColor = sharedFocusColor(FocusType.tableComment);
+		const ringColor = sharedTableColor ?? sharedSelected;
+		const diffPaths = diffMapRef.value?.get(table.id);
+		const view = source !== "document";
+		const read = interaction() === "read";
+		const headerLineY = getHeaderCellsY(source) - TABLE_INSET;
+		const headerButtonY = headerLineY + (view ? 2 : 6);
+		const headerIconSize = view ? 16 : 12;
+		const viewButtons = view && hovered;
+		const cellEdit = (focusType, columnId) => !view && hasEdit(focusType, columnId);
+		const headerCells = getHeaderCellSlots(store.state, table, source);
+		const headerCellOf = (focusType) => headerCells.find((slot) => slot.focusType === focusType);
+		const nameCell = headerCellOf(FocusType.tableName);
+		const logicalNameCell = headerCellOf(FocusType.tableLogicalName);
+		const commentCell = headerCellOf(FocusType.tableComment);
+		const hiddenCommentColor = commentCell ? null : diffTextColor(theme, diffPaths, FocusType.tableComment);
+		const hiddenNameColor = nameCell ? null : diffTextColor(theme, diffPaths, FocusType.tableName) ?? hiddenCommentColor;
+		const checkMarks = (props.checkMarks ?? true) && !view && !diffMapRef.value;
+		const markFill = (field) => {
+			if (!checkMarks || !table[field].trim()) return null;
+			const fill = tableMarkFill(store, theme, table, field);
+			return tint ? readableMarkFill(fill, tint.background) : fill;
+		};
+		const columnIds = getVisibleColumnIds(store.state, table, source);
+		const nameSettings = sceneNameSettings(settings, source);
+		const nameFocus = toNameViewFocusType(nameSettings, FocusType.columnName);
+		const typeFocus = toNameViewFocusType(nameSettings, FocusType.columnDataType);
+		const tint = props.preview ? null : props.tableGroupId === void 0 ? getTableHeaderTint(store.state, table, source) : getTableGroupTint(store.state, props.tableGroupId, source);
+		const headerFillsCard = columnIds.length === 0;
+		const lit = view && Boolean(props.lit);
+		const shadow = view ? viewCardShadow(theme.minimapShadow) : documentCardShadow(theme.tableShadow);
+		const litKey = transitionKey(editor.id, "table", table.id);
+		let litAlpha = 0;
+		if (view) {
+			transitionTo(litKey, lit ? 1 : 0);
+			litAlpha = progressOf(litKey);
+		}
+		const columns = query(collections).collection("tableColumnEntities").selectByIds(ghostColumnId ? [...columnIds, ghostColumnId] : columnIds);
+		const reorders = !view && !props.preview && !store.getReadonly();
+		const alternateKeyMarks = tableWidths.alternateKey ? getAlternateKeyMarks(store.state, table) : {};
+		return konva`<k-group id=${props.preview ? "" : `table-${table.id}`} name="table" kind="table" visible=${props.visible ?? true} selected=${selected} sharedFocus=${sharedTableColor} sharedSelect=${sharedSelected} x=${rect.x} y=${rect.y} @mousedown=${handlePress} @touchstart=${handlePress} @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave}><k-rect name="table-body" x=${1 / 2} y=${1 / 2} width=${rect.width - 1} height=${rect.height - 1} cornerRadius=${6} fill=${theme.tableBackground} stroke=${mixColor(bodyStroke(theme, selected), theme.accentColor9, litAlpha)} strokeWidth=${1} shadowColor=${shadow?.color} shadowBlur=${shadow?.blur} shadowOffsetX=${shadow?.offsetX} shadowOffsetY=${shadow?.offsetY} shadowOpacity=${shadow?.opacity} shadowForStrokeEnabled=${shadow ? false : void 0} @mouseenter=${(event) => {
+			view && setSceneCursor(event, "pointer");
+		}} @mouseleave=${(event) => {
+			view && setSceneCursor(event, "");
+		}} /><k-rect name="table-header-band" x=${1} y=${1} width=${rect.width - 2} height=${headerFillsCard ? rect.height - 2 : TABLE_INSET + tableHeaderHeight(source) - 1} cornerRadius=${headerFillsCard ? 6 : [
+			6,
+			6,
+			0,
+			0
+		]} fill=${tint?.background ?? theme.tableHeaderBackground} listening=${false} />${litAlpha > 0 ? konva`<k-rect name="table-glow" x=${-1 / 2} y=${-1 / 2} width=${rect.width + 1} height=${rect.height + 1} cornerRadius=${6} opacity=${litAlpha} stroke=${theme.accentColor9} strokeWidth=${1} shadowColor=${theme.accentColor9} shadowBlur=${14} shadowOpacity=${VIEW_CARD_GLOW_OPACITY} shadowForStrokeEnabled=${true} listening=${false} />` : null}${ringColor ? konva`<k-rect name="table-ring" x=${-1 / 2} y=${-1 / 2} width=${rect.width + 1} height=${rect.height + 1} cornerRadius=${6} stroke=${ringColor} strokeWidth=${1} listening=${false} />` : null}${diffOutlineRect({
+			name: "table-diff-outline",
+			stroke: diffOutline(theme, diffPaths),
+			width: rect.width,
+			height: rect.height,
+			cornerRadius: 6
+		})}<k-group name="table-header" x=${TABLE_INSET} y=${TABLE_INSET}><k-group name="table-header-inputs" y=${headerLineY}>${sceneIcon({
+			icon: "table-2",
+			name: "table-header-icon",
+			kind: "table-header-icon",
+			size: headerIconSize,
+			color: tint?.foreground ?? theme.foreground,
+			x: 0,
+			y: view ? 0 : (24 - headerIconSize) / 2
+		})}${logicalNameCell ? headerCell({
+			...logicalNameCell,
+			text: logicalNameText(),
+			fill: hiddenNameColor ?? markFill("logicalName") ?? tint?.foreground ?? nameFill(theme, table.logicalName, view),
+			focus: hasFocus(FocusType.tableLogicalName),
+			edit: cellEdit(FocusType.tableLogicalName),
+			sharedFocus: sharedLogicalNameColor
+		}) : null}${nameCell ? headerCell({
+			...nameCell,
+			text: table.name.trim() ? table.name : i18n.value.t("common.placeholder.table"),
+			fill: hiddenCommentColor ?? markFill("name") ?? tint?.foreground ?? viewNameFill(theme, table.name, view, logicalNameCell !== void 0),
+			focus: hasFocus(FocusType.tableName),
+			edit: cellEdit(FocusType.tableName),
+			sharedFocus: sharedNameColor
+		}) : null}${commentCell ? headerCell({
+			...commentCell,
+			text: table.comment.trim() ? table.comment : i18n.value.t("common.placeholder.comment"),
+			fill: tint?.foreground ?? (table.comment.trim() ? theme.active : theme.placeholder),
+			focus: hasFocus(FocusType.tableComment),
+			edit: cellEdit(FocusType.tableComment),
+			sharedFocus: sharedCommentColor
+		}) : null}</k-group>${view || read ? null : sceneIcon({
+			icon: "plus",
+			name: "table-add-column",
+			kind: "icon",
+			size: 12,
+			color: iconColor(theme, "plus", hovered, tint),
+			mouseenter: handleIconMouseenter("plus"),
+			mouseleave: handleIconMouseleave,
+			x: contentWidth - 24 - 4,
+			y: headerButtonY,
+			click: handleAddColumn
+		})}${view || read ? null : sceneIcon({
+			icon: "x",
+			name: "table-remove",
+			kind: "icon",
+			size: 12,
+			color: iconColor(theme, "x", hovered, tint),
+			mouseenter: handleIconMouseenter("x"),
+			mouseleave: handleIconMouseleave,
+			x: contentWidth - 12,
+			y: headerButtonY,
+			click: handleRemoveTable
+		})}${viewButtons ? sceneIcon({
+			icon: "waypoints",
+			name: "table-related",
+			kind: "icon",
+			size: 12,
+			color: iconColor(theme, "waypoints", hovered, tint),
+			mouseenter: handleIconMouseenter("waypoints"),
+			mouseleave: handleIconMouseleave,
+			x: contentWidth - 28,
+			y: headerButtonY,
+			click: handleRelated
+		}) : null}${viewButtons ? sceneIcon({
+			icon: "external-link",
+			name: "table-go-to-erd",
+			kind: "icon",
+			size: 12,
+			color: iconColor(theme, "external-link", hovered, tint),
+			mouseenter: handleIconMouseenter("external-link"),
+			mouseleave: handleIconMouseleave,
+			x: contentWidth - 12,
+			y: headerButtonY,
+			click: handleGoToErd
+		}) : null}</k-group><k-group name="table-columns">${repeat(columns, (column) => column.id, (column, index) => konva`<${Column} .column=${column} .source=${source} .related=${props.relatedColumnIds?.has(column.id) ?? false} .diffPaths=${diffMapRef.value?.get(column.id) ?? null} .litAlpha=${litAlpha} .divider=${view && index < columnIds.length - 1} .last=${index === columnIds.length - 1} .y=${getColumnRect(store.state, table, index, source).y - rect.y} .width=${rect.width} .selected=${hasSelectColumn(column.id)} .dragHandle=${reorders && hasFocusColumn(column.id)} .hovered=${column.id === props.hoveredColumnId} .widthName=${tableWidths.name} .widthLogicalName=${tableWidths.logicalName} .widthDataType=${tableWidths.dataType} .widthDomain=${tableWidths.domain} .widthDefault=${tableWidths.default} .widthComment=${tableWidths.comment} .widthAlternateKey=${tableWidths.alternateKey} .alternateKey=${alternateKeyMarks[column.id]} .focusName=${hasFocus(nameFocus, column.id)} .focusLogicalName=${hasFocus(FocusType.columnLogicalName, column.id)} .focusDataType=${hasFocus(typeFocus, column.id)} .focusDomain=${hasFocus(FocusType.columnDomain, column.id)} .focusNotNull=${hasFocus(FocusType.columnNotNull, column.id)} .focusDefault=${hasFocus(FocusType.columnDefault, column.id)} .focusComment=${hasFocus(FocusType.columnComment, column.id)} .focusUnique=${hasFocus(FocusType.columnUnique, column.id)} .focusAutoIncrement=${hasFocus(FocusType.columnAutoIncrement, column.id)} .editName=${cellEdit(nameFocus, column.id)} .editLogicalName=${cellEdit(FocusType.columnLogicalName, column.id)} .editDataType=${cellEdit(typeFocus, column.id)} .editDomain=${cellEdit(FocusType.columnDomain, column.id)} .editDefault=${cellEdit(FocusType.columnDefault, column.id)} .editComment=${cellEdit(FocusType.columnComment, column.id)} .sharedFocusName=${sharedFocusColor(nameFocus, column.id)} .sharedFocusLogicalName=${sharedFocusColor(FocusType.columnLogicalName, column.id)} .sharedFocusDataType=${sharedFocusColor(typeFocus, column.id)} .sharedFocusDomain=${sharedFocusColor(FocusType.columnDomain, column.id)} .sharedFocusNotNull=${sharedFocusColor(FocusType.columnNotNull, column.id)} .sharedFocusDefault=${sharedFocusColor(FocusType.columnDefault, column.id)} .sharedFocusComment=${sharedFocusColor(FocusType.columnComment, column.id)} .sharedFocusUnique=${sharedFocusColor(FocusType.columnUnique, column.id)} .sharedFocusAutoIncrement=${sharedFocusColor(FocusType.columnAutoIncrement, column.id)} .ghost=${column.id === ghostColumnId} .checkMarks=${checkMarks} .preview=${props.preview} .editorFocused=${props.editorFocused} .read=${read} .onDragstart=${handleDragstartColumn} .onDragend=${handleDragendColumn} />`)}</k-group><k-path name="table-header-color" kind="table-header-color" data=${getColorEdgePath(rect.height)} fill=${table.ui.color} listening=${!view && !read} @click=${mainButtonClick(handleOpenColorPicker)} @mouseenter=${(event) => {
+			setSceneCursor(event, CURSOR_POINTER);
+		}} @mouseleave=${(event) => {
+			setSceneCursor(event, "");
+		}} /></k-group>`;
+	};
+};
+//#endregion
+export { Table as default };

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

@@ -0,0 +1,14 @@
+import { isLogicalNameView } from "../../../../engine/modules/editor/utils/nameView.js";
+//#region src/components/erd/canvas/table/blankLogicalName.ts
+function blankLogicalName(settings, name, nameKey) {
+	if (!isLogicalNameView(settings)) return {
+		standIn: "",
+		key: "common.placeholder.logicalName"
+	};
+	return {
+		standIn: name.trim() ? name : "",
+		key: nameKey
+	};
+}
+//#endregion
+export { blankLogicalName };

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

@@ -0,0 +1,147 @@
+import { ColumnType } from "../../../../constants/schema.js";
+import { FocusType } from "../../../../engine/modules/editor/state.js";
+import { ColumnTypeShown, getTableFocusTypes, getViewColumnTypes, sceneNameSettings, toNameViewFocusType } from "../../../../engine/modules/editor/utils/nameView.js";
+import { headerCellWidth, tableRowHeight, viewHeaderNameWidth } from "../../../../utils/calcTable.js";
+import { FOCUS_BORDER_HEIGHT, SCENE_CODE_FONT_FAMILY, TABLE_INSET, getSceneFontMetrics } from "../sceneTokens.js";
+//#region src/components/erd/canvas/table/cellLayout.ts
+var HEADER_CELLS_X = TABLE_INSET;
+function getHeaderCellsY(source = "document") {
+	return source === "document" ? 3 : TABLE_INSET;
+}
+function getHeaderTextY(source = "document") {
+	return source === "document" ? 2 : 0;
+}
+function getHeaderTextHeight(source = "document") {
+	return source === "document" ? getCellTextHeight() : 16;
+}
+function getColumnTextY(source = "document") {
+	return source === "document" ? 2 : 8;
+}
+function getColumnTextHeight(source = "document", fontFamily) {
+	return source === "document" ? getCellTextHeight(fontFamily) : 16;
+}
+var CELL_UNDERLINE_Y = 20 - FOCUS_BORDER_HEIGHT;
+function getColumnUnderlineY() {
+	return tableRowHeight("document") - getColumnTextY("document") * 2 - FOCUS_BORDER_HEIGHT;
+}
+function focusBorderFill(theme, edit, editorFocused) {
+	if (edit) return theme.inputActive;
+	if (editorFocused === false) return theme.placeholder;
+	return theme.focus;
+}
+var RAW_CELL_TEXT_HEIGHT = CELL_UNDERLINE_Y;
+function getCellTextBaseline(fontFamily) {
+	const { ascent, descent } = getSceneFontMetrics(fontFamily);
+	return Math.round(RAW_CELL_TEXT_HEIGHT / 2 + (ascent - descent) / 2);
+}
+function getCellTextHeight(fontFamily) {
+	const { ascent, descent } = getSceneFontMetrics(fontFamily);
+	return (getCellTextBaseline(fontFamily) - (ascent - descent) / 2) * 2;
+}
+function getColumnCellsX(source = "document") {
+	return source === "document" ? TABLE_INSET + 12 + 8 : TABLE_INSET + 16 + 6;
+}
+function getAlternateKeyMarkX(slots) {
+	const last = slots[slots.length - 1];
+	return last ? last.x + last.width + 8 : getColumnCellsX();
+}
+function getAlternateKeyMarkHeight() {
+	const { ascent, descent } = getSceneFontMetrics(SCENE_CODE_FONT_FAMILY);
+	return (getCellTextBaseline() - (ascent - descent) / 2) * 2;
+}
+function getHeaderCellSlots(state, table, source = "document") {
+	const view = source !== "document";
+	const slots = [];
+	let cursor = view ? 20 : 20;
+	for (const focusType of getTableFocusTypes(sceneNameSettings(state.settings, source))) {
+		const measured = headerCellWidth(state, table, focusType);
+		const width = view ? viewHeaderNameWidth(measured) : measured;
+		slots.push({
+			focusType,
+			x: cursor,
+			width
+		});
+		cursor += width + 8;
+	}
+	return slots;
+}
+var COLUMN_SLOTS = [
+	{
+		columnType: ColumnType.columnLogicalName,
+		focusType: FocusType.columnLogicalName,
+		visible: ColumnTypeShown[ColumnType.columnLogicalName],
+		width: (widths) => widths.logicalName
+	},
+	{
+		columnType: ColumnType.columnName,
+		focusType: FocusType.columnName,
+		visible: ColumnTypeShown[ColumnType.columnName],
+		width: (widths) => widths.name
+	},
+	{
+		columnType: ColumnType.columnDefault,
+		focusType: FocusType.columnDefault,
+		visible: ColumnTypeShown[ColumnType.columnDefault],
+		width: (widths) => widths.default
+	},
+	{
+		columnType: ColumnType.columnComment,
+		focusType: FocusType.columnComment,
+		visible: ColumnTypeShown[ColumnType.columnComment],
+		width: (widths) => widths.comment
+	},
+	{
+		columnType: ColumnType.columnDataType,
+		focusType: FocusType.columnDataType,
+		visible: ColumnTypeShown[ColumnType.columnDataType],
+		width: (widths) => widths.dataType
+	},
+	{
+		columnType: ColumnType.columnDomain,
+		focusType: FocusType.columnDomain,
+		visible: ColumnTypeShown[ColumnType.columnDomain],
+		width: (widths) => widths.domain
+	},
+	{
+		columnType: ColumnType.columnNotNull,
+		focusType: FocusType.columnNotNull,
+		visible: ColumnTypeShown[ColumnType.columnNotNull],
+		width: () => 35
+	},
+	{
+		columnType: ColumnType.columnUnique,
+		focusType: FocusType.columnUnique,
+		visible: ColumnTypeShown[ColumnType.columnUnique],
+		width: () => 22
+	},
+	{
+		columnType: ColumnType.columnAutoIncrement,
+		focusType: FocusType.columnAutoIncrement,
+		visible: ColumnTypeShown[ColumnType.columnAutoIncrement],
+		width: () => 15
+	}
+];
+function getColumnCellSlots(state, widths, source = "document") {
+	const { settings } = state;
+	const inDocument = source === "document";
+	const shown = sceneNameSettings(settings, source);
+	const slots = [];
+	let cursor = getColumnCellsX(source);
+	const order = inDocument ? settings.columnOrder : getViewColumnTypes(settings);
+	for (const columnType of order) {
+		const definition = COLUMN_SLOTS.find((slot) => slot.columnType === columnType);
+		if (!definition) continue;
+		if (inDocument && !definition.visible(settings)) continue;
+		const width = definition.width(widths);
+		slots.push({
+			columnType,
+			focusType: toNameViewFocusType(shown, definition.focusType),
+			x: cursor,
+			width
+		});
+		cursor += width + 8;
+	}
+	return slots;
+}
+//#endregion
+export { CELL_UNDERLINE_Y, HEADER_CELLS_X, focusBorderFill, getAlternateKeyMarkHeight, getAlternateKeyMarkX, getCellTextBaseline, getCellTextHeight, getColumnCellSlots, getColumnCellsX, getColumnTextHeight, getColumnTextY, getColumnUnderlineY, getHeaderCellSlots, getHeaderCellsY, getHeaderTextHeight, getHeaderTextY };

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

@@ -0,0 +1,16 @@
+//#region src/components/erd/canvas/table/colorEdge.ts
+var OUTER_RADIUS = 6.5;
+function getColorEdgePath(height) {
+	const radius = Math.min(OUTER_RADIUS, height / 2);
+	const width = Math.min(4, radius);
+	const inset = radius - Math.sqrt(radius ** 2 - (radius - width) ** 2);
+	return [
+		`M ${width} ${inset}`,
+		`A ${radius} ${radius} 0 0 0 0 ${radius}`,
+		`L 0 ${height - radius}`,
+		`A ${radius} ${radius} 0 0 0 ${width} ${height - inset}`,
+		"Z"
+	].join(" ");
+}
+//#endregion
+export { getColorEdgePath };

package/dist/components/erd/canvas/table/column/Column.d.ts

@@ -1,7 +1,7 @@
 import { FC } from '@dineug/r-html';
 import { ScenePointerEvent } from '../../sceneTokens';
-import { DiffPaths } from '../../../diff-viewer/diff';
 import { Column } from '../../../../../internal-types';
+import { DiffPaths } from '../../../../../utils/diff/diff';
 import { GeometrySource } from '../../../../../utils/draw-relationship/geometrySource';
 export type ColumnProps = {
     column: Column;
@@ -97,6 +97,11 @@ export type ColumnProps = {
     /** Drawn inside a copy of the table, which owns none of its ids. */
     preview?: boolean;
     editorFocused?: boolean;
+    /**
+     * Whether the row stands in a read scene, which the table resolved for its
+     * rows: no cell focuses or edits there and no remove button is drawn.
+     */
+    read?: boolean;
     /**
      * Whether the row carries the handle a column drag starts from, outside the
      * table's left edge. The table gives it to its focused row alone, and only