@dineug/erd-editor 4.2.0 → 5.0.1

package/dist/components/erd/canvas/EditOverlay.js

@@ -0,0 +1,349 @@
+import { isComposing } from "../../../utils/keyboard-shortcut/index.js";
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { ColumnType } from "../../../constants/schema.js";
+import { isHighLevelTable } from "../../../utils/validation.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { createRef, ref } from "../../../r-html/dist/render/directives/attribute/ref.js";
+import { 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 { drawsDomainInTypeCell } from "../../../engine/modules/editor/utils/nameView.js";
+import { getColumnRect, getTableRect, getTableWidths } from "../../../konva/scene/metrics.js";
+import { getTableGroupColors, getTableGroupRect, getTableHeaderTint, isTableGroupShown } from "../../../utils/tableGroup.js";
+import { toScreenPoint } from "../../../konva/scene/viewport.js";
+import { editMemoEndAction, editTableEndAction, editTableGroupEndAction, scrollMemoAction } from "../../../engine/modules/editor/atom.actions.js";
+import { changeMemoValueAction } from "../../../engine/modules/memo/atom.actions.js";
+import { changeTableCommentAction, changeTableLogicalNameAction } from "../../../engine/modules/table/atom.actions.js";
+import { changeTableGroupNameAction } from "../../../engine/modules/table-group/atom.actions.js";
+import { changeTableNameAction$ } from "../../../engine/modules/table/generator.actions.js";
+import { changeColumnValueAction$ } from "../../../engine/modules/table-column/generator.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import { SCENE_FONT_FAMILY, SCENE_FONT_SIZE, TABLE_GROUP_TITLE_FONT_WEIGHT } from "./sceneTokens.js";
+import { focusEvent } from "../../../utils/internalEvents.js";
+import { getMemoLineHeightPx } from "./memo/memoText.js";
+import { takeMemoCaret } from "./memo/memoCaret.js";
+import { getMemoScrollTop } from "./memo/memoScroll.js";
+import { HEADER_CELLS_X, getCellTextHeight, getColumnCellSlots, getColumnTextY, getHeaderCellSlots, getHeaderCellsY, getHeaderTextY } from "./table/cellLayout.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { isPinchWheel } from "../../../utils/pinch.js";
+import { blankLogicalName } from "./table/blankLogicalName.js";
+import { lastCursorFocus } from "../../../utils/focus.js";
+import { getTableGroupNameBox } from "./table-group/titleLayout.js";
+import EditInput from "../../primitives/edit-input/EditInput.js";
+import ColumnDataType from "../../table-view/column/column-data-type/ColumnDataType.js";
+import ColumnDomain from "../../table-view/column/column-domain/ColumnDomain.js";
+import ColumnLogicalName from "../../table-view/column/column-logical-name/ColumnLogicalName.js";
+import { cell, tinted } from "./EditOverlay.styles.js";
+//#region src/components/erd/canvas/EditOverlay.tsx
+var EDITABLE = {
+	[FocusType.tableName]: "common.placeholder.table",
+	[FocusType.tableLogicalName]: "common.placeholder.logicalName",
+	[FocusType.tableComment]: "common.placeholder.comment",
+	[FocusType.columnName]: "common.placeholder.column",
+	[FocusType.columnLogicalName]: "common.placeholder.logicalName",
+	[FocusType.columnDataType]: "common.placeholder.dataType",
+	[FocusType.columnDomain]: "common.placeholder.domain",
+	[FocusType.columnDefault]: "common.placeholder.default",
+	[FocusType.columnComment]: "common.placeholder.comment"
+};
+function getColumnValue(column, focusType) {
+	switch (focusType) {
+		case FocusType.columnName: return column.name;
+		case FocusType.columnLogicalName: return column.logicalName;
+		case FocusType.columnDataType: return column.dataType;
+		case FocusType.columnDomain: return "";
+		case FocusType.columnDefault: return column.default;
+		default: return column.comment;
+	}
+}
+function getTableValue(table, focusType) {
+	switch (focusType) {
+		case FocusType.tableName: return table.name;
+		case FocusType.tableLogicalName: return table.logicalName;
+		default: return table.comment;
+	}
+}
+var toPlaceholder = (state, focusType, name, placeholderKey) => {
+	if (focusType !== FocusType.tableLogicalName && focusType !== FocusType.columnLogicalName) return {
+		placeholderKey,
+		standIn: ""
+	};
+	const { standIn, key } = blankLogicalName(state.settings, name, focusType === FocusType.tableLogicalName ? "common.placeholder.table" : "common.placeholder.column");
+	return {
+		placeholderKey: key,
+		standIn
+	};
+};
+function toEditedFocusType(state, column, slot) {
+	return slot.focusType === FocusType.columnDomain && slot.columnType === ColumnType.columnDataType && !drawsDomainInTypeCell(state, column) ? FocusType.columnDataType : slot.focusType;
+}
+var keyOf = (target) => target.kind === "memo" ? `memo:${target.memoId}` : target.kind === "tableGroup" ? `tableGroup:${target.groupId}` : `${target.tableId}:${target.columnId ?? ""}:${target.focusType}`;
+function resolveCellTarget(state) {
+	const { editor, collections, settings, doc } = state;
+	const { focusTable } = editor;
+	if (!focusTable?.edit || isHighLevelTable(settings.zoomLevel)) return null;
+	if (!doc.tableIds.includes(focusTable.tableId)) return null;
+	const placeholderKey = EDITABLE[focusTable.focusType];
+	if (placeholderKey === void 0) return null;
+	const table = query(collections).collection("tableEntities").selectById(focusTable.tableId);
+	if (!table) return null;
+	const rect = getTableRect(state, table);
+	if (!focusTable.columnId) {
+		const slot = getHeaderCellSlots(state, table).find((candidate) => candidate.focusType === focusTable.focusType);
+		if (!slot) return null;
+		return {
+			kind: "cell",
+			focusType: slot.focusType,
+			tableId: table.id,
+			columnId: null,
+			x: rect.x + HEADER_CELLS_X + slot.x,
+			y: rect.y + getHeaderCellsY() + getHeaderTextY(),
+			width: slot.width,
+			value: getTableValue(table, slot.focusType),
+			...toPlaceholder(state, slot.focusType, table.name, placeholderKey),
+			textColor: getTableHeaderTint(state, table)?.foreground ?? null
+		};
+	}
+	const index = table.columnIds.indexOf(focusTable.columnId);
+	if (index === -1) return null;
+	const column = query(collections).collection("tableColumnEntities").selectById(focusTable.columnId);
+	if (!column) return null;
+	const slot = getColumnCellSlots(state, getTableWidths(state, table)).find((candidate) => candidate.focusType === focusTable.focusType);
+	if (!slot) return null;
+	const focusType = toEditedFocusType(state, column, slot);
+	const key = EDITABLE[focusType];
+	return {
+		kind: "cell",
+		focusType,
+		tableId: table.id,
+		columnId: column.id,
+		x: rect.x + slot.x,
+		y: getColumnRect(state, table, index).y + getColumnTextY(),
+		width: slot.width,
+		value: getColumnValue(column, focusType),
+		...focusType === FocusType.columnDomain ? {
+			placeholderKey: key,
+			standIn: getLiveDomainName(state, column.domainId)
+		} : toPlaceholder(state, focusType, column.name, key),
+		textColor: null
+	};
+}
+function resolveMemoTarget(state) {
+	const { editor, collections, doc } = state;
+	const { editMemoId } = editor;
+	if (!editMemoId || !doc.memoIds.includes(editMemoId)) return null;
+	const memo = query(collections).collection("memoEntities").selectById(editMemoId);
+	if (!memo) return null;
+	return {
+		kind: "memo",
+		memoId: memo.id,
+		x: memo.ui.x + 1 + 8,
+		y: memo.ui.y + 1 + 8 + 16,
+		width: memo.ui.width,
+		height: memo.ui.height,
+		value: memo.value
+	};
+}
+function resolveTableGroupTarget(state) {
+	const { editor, collections, doc } = state;
+	const { editTableGroupId } = editor;
+	if (!editTableGroupId || !doc.tableGroupIds.includes(editTableGroupId) || !isTableGroupShown(state)) return null;
+	const group = query(collections).collection("tableGroupEntities").selectById(editTableGroupId);
+	if (!group) return null;
+	const { x, y, width } = getTableGroupRect(state, group);
+	const nameBox = getTableGroupNameBox(width);
+	return {
+		kind: "tableGroup",
+		groupId: group.id,
+		x: x + nameBox.x,
+		y: y + nameBox.y,
+		width: nameBox.width,
+		value: group.name,
+		textColor: getTableGroupColors(group)?.foreground ?? null
+	};
+}
+var resolveEditTarget = (state) => resolveMemoTarget(state) ?? resolveTableGroupTarget(state) ?? resolveCellTarget(state);
+var MemoEditor = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const textarea = createRef();
+	const handleInput = (event) => {
+		const el = event.target;
+		if (!el) return;
+		const { store } = app.value;
+		store.dispatch(changeMemoValueAction({
+			id: props.target.memoId,
+			value: el.value
+		}));
+	};
+	const handleBlur = () => {
+		const { store } = app.value;
+		store.dispatch(editMemoEndAction());
+		ctx.host.dispatchEvent(focusEvent());
+	};
+	const handleScroll = (event) => {
+		const el = event.target;
+		if (!el) return;
+		const { store } = app.value;
+		store.dispatch(scrollMemoAction({
+			id: props.target.memoId,
+			scrollTop: el.scrollTop
+		}));
+	};
+	const handleWheel = (event) => {
+		if (!isPinchWheel(event)) event.stopPropagation();
+	};
+	onMounted(() => {
+		const el = textarea.value;
+		if (!el) return;
+		const { store } = app.value;
+		const memo = query(store.state.collections).collection("memoEntities").selectById(props.target.memoId);
+		const offset = takeMemoCaret(props.target.memoId);
+		el.setSelectionRange(offset, offset);
+		el.focus({ preventScroll: true });
+		el.scrollTop = memo ? getMemoScrollTop(store.state.editor, memo) : 0;
+	});
+	return () => html`<textarea class=${["memo-textarea", "scrollbar"]} ${ref(textarea)} style=${{
+		display: "block",
+		width: `${props.target.width}px`,
+		height: `${props.target.height}px`,
+		margin: "0",
+		padding: "0",
+		border: "0",
+		outline: "none",
+		resize: "none",
+		"box-sizing": "border-box",
+		"background-color": "transparent",
+		color: "var(--active)",
+		"caret-color": "var(--active)",
+		"font-family": SCENE_FONT_FAMILY,
+		"font-size": `${SCENE_FONT_SIZE}px`,
+		"font-weight": "400",
+		"line-height": `${getMemoLineHeightPx()}px`,
+		"letter-spacing": "0em",
+		"white-space": "pre-wrap",
+		"overflow-wrap": "break-word"
+	}} spellcheck="false" .value=${props.target.value} @input=${handleInput} @scroll=${handleScroll} @wheel=${handleWheel} @blur=${handleBlur}></textarea>`;
+};
+var TableGroupNameEditor = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const input = createRef();
+	let cancelled = false;
+	let ended = false;
+	const end = (commit) => {
+		if (ended) return;
+		ended = true;
+		const { store } = app.value;
+		const { doc, collections } = store.state;
+		const { groupId } = props.target;
+		const value = input.value?.value ?? props.target.value;
+		const group = doc.tableGroupIds.includes(groupId) ? query(collections).collection("tableGroupEntities").selectById(groupId) : void 0;
+		const changed = Boolean(commit && group && group.name !== value);
+		store.dispatch(...changed ? [changeTableGroupNameAction({
+			id: groupId,
+			value
+		})] : [], editTableGroupEndAction());
+		ctx.host.dispatchEvent(focusEvent());
+	};
+	const handleKeydown = (event) => {
+		if (isComposing(event)) return;
+		if (event.key === "Escape") cancelled = true;
+		else if (event.key === "Enter") end(true);
+	};
+	const handleBlur = () => {
+		end(!cancelled);
+	};
+	onMounted(() => {
+		const el = input.value;
+		if (!el) return;
+		el.value = props.target.value;
+		lastCursorFocus(el);
+	});
+	return () => html`<input class="table-group-name-input" ${ref(input)} type="text" spellcheck="false" placeholder=${props.placeholder} style=${{
+		display: "block",
+		width: `${props.target.width}px`,
+		height: `${getTableGroupNameBox().height}px`,
+		margin: "0",
+		padding: "0",
+		border: "0",
+		outline: "none",
+		"box-sizing": "border-box",
+		"background-color": "transparent",
+		color: "var(--cell-text-color, var(--active))",
+		"caret-color": "var(--cell-text-color, var(--active))",
+		"font-family": SCENE_FONT_FAMILY,
+		"font-size": `${SCENE_FONT_SIZE}px`,
+		"font-weight": TABLE_GROUP_TITLE_FONT_WEIGHT,
+		"line-height": "normal",
+		"letter-spacing": "0em"
+	}} @keydown=${handleKeydown} @blur=${handleBlur} />`;
+};
+var EditOverlay = (_, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const handleEditEnd = () => {
+		const { store } = app.value;
+		store.dispatch(editTableEndAction());
+	};
+	const handleInput = (event) => {
+		const { store } = app.value;
+		const input = event.target;
+		const target = resolveCellTarget(store.state);
+		if (!input || !target) return;
+		if (target.columnId) {
+			store.dispatch(changeColumnValueAction$(target.focusType, target.tableId, target.columnId, input.value));
+			return;
+		}
+		const payload = {
+			id: target.tableId,
+			value: input.value
+		};
+		store.dispatch(target.focusType === FocusType.tableName ? changeTableNameAction$(target.tableId, input.value) : target.focusType === FocusType.tableLogicalName ? changeTableLogicalNameAction(payload) : changeTableCommentAction(payload));
+	};
+	const editor = (target, placeholder) => {
+		if (target.kind === "memo") return html`<${MemoEditor} .target=${target} />`;
+		if (target.kind === "tableGroup") return html`<${TableGroupNameEditor} .target=${target} .placeholder=${placeholder} />`;
+		const { focusType, tableId, columnId } = target;
+		if (focusType === FocusType.tableLogicalName || focusType === FocusType.columnLogicalName) return html`<${ColumnLogicalName} .tableId=${tableId} .columnId=${columnId} .width=${target.width} .value=${target.value} .placeholder=${placeholder} .onBlur=${handleEditEnd} .onEditEnd=${handleEditEnd} .onInput=${handleInput} />`;
+		if (focusType === FocusType.columnDomain && columnId) return html`<${ColumnDomain} .tableId=${tableId} .columnId=${columnId} .width=${target.width} .placeholder=${placeholder} .onBlur=${handleEditEnd} .onEditEnd=${handleEditEnd} />`;
+		if (target.focusType === FocusType.columnDataType && target.columnId) return html`<${ColumnDataType} .tableId=${target.tableId} .columnId=${target.columnId} .width=${target.width} .value=${target.value} .focus=${true} .edit=${true} .onBlur=${handleEditEnd} .onEditEnd=${handleEditEnd} .onInput=${handleInput} />`;
+		return html`<${EditInput} .placeholder=${placeholder} .width=${target.width} .value=${target.value} .focus=${true} .edit=${true} .autofocus=${true} .onBlur=${handleEditEnd} .onInput=${handleInput} />`;
+	};
+	return () => {
+		if (sourceRef.value !== "document") return null;
+		const { store } = app.value;
+		const { settings } = store.state;
+		const target = resolveEditTarget(store.state);
+		const { zoomLevel } = settings;
+		const placeholder = target?.kind === "cell" ? target.standIn || i18n.value.t(target.placeholderKey) : target?.kind === "tableGroup" ? i18n.value.t("common.unnamed") : "";
+		return html`<div class="edit-overlay" style=${{
+			position: "absolute",
+			inset: "0",
+			overflow: "hidden",
+			"pointer-events": "none"
+		}}>${repeat(target ? [target] : [], keyOf, (item) => {
+			const screen = toScreenPoint(settings, item);
+			return html`<div class=${[
+				"edit-overlay-cell",
+				item.kind === "cell" ? cell : null,
+				item.kind === "cell" && item.textColor ? tinted : null
+			]} style=${{
+				position: "absolute",
+				top: "0",
+				left: "0",
+				"pointer-events": "auto",
+				"transform-origin": "0 0",
+				transform: `translate(${screen.x}px, ${screen.y}px) scale(${zoomLevel})`,
+				...item.kind === "cell" ? {
+					width: `${item.width}px`,
+					"--cell-text-height": `${getCellTextHeight()}px`
+				} : {},
+				...item.kind !== "memo" && item.textColor ? { "--cell-text-color": item.textColor } : {}
+			}}>${editor(item, placeholder)}</div>`;
+		})}</div>`;
+	};
+};
+//#endregion
+export { EditOverlay as default };

package/dist/components/erd/canvas/EditOverlay.styles.js

@@ -0,0 +1,19 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/canvas/EditOverlay.styles.ts
+var cell = css`
+  & .edit-input,
+  & .edit-input.focus,
+  & .edit-input.edit {
+    height: var(--cell-text-height);
+    border-bottom: 0 none;
+    vertical-align: top;
+  }
+`;
+var tinted = css`
+  & .edit-input {
+    --active: var(--cell-text-color);
+    --placeholder: var(--cell-text-color);
+  }
+`;
+//#endregion
+export { cell, tinted };

package/dist/components/erd/canvas/SceneIcon.template.js

@@ -0,0 +1,14 @@
+import { konva } from "../../../r-html-konva/dist/host.js";
+import { getIcon } from "../../primitives/icon/icons.js";
+import { ICON_VIEW_SIZE, mainButtonClick } from "./sceneTokens.js";
+import { iconHit } from "./sceneHit.js";
+//#region src/components/erd/canvas/SceneIcon.template.tsx
+var shape = ([tag, attrs], color, hit) => tag === "rect" ? konva`<k-rect x=${Number(attrs.x ?? 0)} y=${Number(attrs.y ?? 0)} width=${Number(attrs.width)} height=${Number(attrs.height)} cornerRadius=${Number(attrs.rx ?? 0)} stroke=${color} strokeWidth=${2} lineJoin="round" listening=${hit} hitFunc=${hit ? iconHit : void 0} />` : tag === "circle" ? konva`<k-circle x=${Number(attrs.cx)} y=${Number(attrs.cy)} radius=${Number(attrs.r)} fill=${color} stroke=${color} strokeWidth=${2} listening=${hit} hitFunc=${hit ? iconHit : void 0} />` : konva`<k-path data=${String(attrs.d)} stroke=${color} strokeWidth=${2} lineCap="round" lineJoin="round" listening=${hit} hitFunc=${hit ? iconHit : void 0} />`;
+function sceneIcon({ icon, name, kind, size, color, x, y, click, mouseenter, mouseleave }) {
+	const definition = getIcon(icon);
+	if (!definition) return null;
+	const scale = size / ICON_VIEW_SIZE;
+	return konva`<k-group name=${name} kind=${kind} x=${x} y=${y} scaleX=${scale} scaleY=${scale} @click=${click && mainButtonClick(click)} @mouseenter=${mouseenter} @mouseleave=${mouseleave}>${definition.node.map((child, index) => shape(child, color, index === 0))}</k-group>`;
+}
+//#endregion
+export { sceneIcon };

package/dist/components/erd/canvas/altDragDuplicate.js

@@ -0,0 +1,16 @@
+import { SelectType } from "../../../engine/modules/editor/state.js";
+import { selectMemoAction$ } from "../../../engine/modules/memo/generator.actions.js";
+import { selectTableAction$ } from "../../../engine/modules/table/generator.actions.js";
+import { duplicateDragStartAction } from "../../../utils/emitter.js";
+import { isMouseEvent } from "../../../utils/domEvent.js";
+//#region src/components/erd/canvas/altDragDuplicate.ts
+function tryStartAltDragDuplicate(app, event, entityId, selectType) {
+	if (!isMouseEvent(event) || !event.altKey || event.button !== 0) return false;
+	const { store, emitter } = app;
+	if (!store.state.editor.selectedMap[entityId]) store.dispatchSync(selectType === SelectType.memo ? selectMemoAction$(entityId, false) : selectTableAction$(entityId, false));
+	event.preventDefault();
+	emitter.emit(duplicateDragStartAction());
+	return true;
+}
+//#endregion
+export { tryStartAltDragDuplicate };

package/dist/components/erd/canvas/column-drag-ghost/ColumnDragGhost.js

@@ -0,0 +1,61 @@
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { ColumnType } from "../../../../constants/schema.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 { getTableRect, getTableWidths } from "../../../../konva/scene/metrics.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 { SCENE_FONT_FAMILY, SCENE_FONT_SIZE } from "../sceneTokens.js";
+import { getColumnCellSlots, getColumnTextHeight, getColumnTextY } from "../table/cellLayout.js";
+import { getColumnDragPointer } from "../columnDragPointer.js";
+import { blankLogicalName } from "../table/blankLogicalName.js";
+//#region src/components/erd/canvas/column-drag-ghost/ColumnDragGhost.tsx
+var GHOST_OPACITY = .6;
+var cellText = (state, theme, column, { columnType, focusType }, i18n) => {
+	if (focusType === FocusType.columnLogicalName) {
+		if (column.logicalName.trim()) return {
+			text: column.logicalName,
+			fill: theme.active
+		};
+		const { standIn, key } = blankLogicalName(state.settings, column.name, "common.placeholder.column");
+		return {
+			text: standIn || i18n.t(key),
+			fill: theme.placeholder
+		};
+	}
+	const isName = columnType === ColumnType.columnName;
+	const value = isName ? column.name : focusType === FocusType.columnDomain && getLiveDomainName(state, column.domainId) || column.dataType;
+	return value.trim() ? {
+		text: value,
+		fill: theme.active
+	} : {
+		text: i18n.t(isName ? "common.placeholder.column" : "common.placeholder.dataType"),
+		fill: theme.placeholder
+	};
+};
+var ColumnDragGhost = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const i18n = useI18n(ctx);
+	return () => {
+		const { store } = app.value;
+		const { editor: { draggableColumn }, collections } = store.state;
+		const pointer = getColumnDragPointer(store.state);
+		if (!pointer || !draggableColumn) return null;
+		const table = query(collections).collection("tableEntities").selectById(draggableColumn.tableId);
+		if (!table) return null;
+		const theme = themeRef.value;
+		const columns = query(collections).collection("tableColumnEntities").selectByIds(draggableColumn.columnIds);
+		const cells = getColumnCellSlots(store.state, getTableWidths(store.state, table)).filter(({ columnType }) => columnType === ColumnType.columnName || columnType === ColumnType.columnDataType);
+		const { width } = getTableRect(store.state, table);
+		return konva`<k-group name="column-drag-ghost" kind="column-drag-ghost" x=${pointer.x - pointer.grabX} y=${pointer.y - pointer.grabY} opacity=${GHOST_OPACITY} visible=${!pointer.over} listening=${false}><k-rect name="column-drag-ghost-body" width=${width} height=${columns.length * 24} cornerRadius=${6} fill=${theme.columnSelect} stroke=${theme.tableBorder} strokeWidth=${1} />${repeat(columns, (column) => column.id, (column, index) => konva`<k-group name="column-drag-ghost-row" y=${index * 24}>${repeat(cells, (slot) => slot.columnType, (slot) => {
+			const { text, fill } = cellText(store.state, theme, column, slot, i18n.value);
+			return konva`<k-text name="column-drag-ghost-text" x=${slot.x} y=${getColumnTextY()} width=${slot.width} height=${getColumnTextHeight()} text=${text} fill=${fill} fontFamily=${SCENE_FONT_FAMILY} fontSize=${SCENE_FONT_SIZE} verticalAlign="middle" wrap="none" ellipsis=${true} />`;
+		})}</k-group>`)}</k-group>`;
+	};
+};
+//#endregion
+export { ColumnDragGhost as default };

package/dist/components/erd/canvas/{column-drag-ghost/columnDragPointer.d.ts → columnDragPointer.d.ts}

@@ -1,5 +1,5 @@
-import { RootState } from '../../../../engine/state';
-import { Point, Table } from '../../../../internal-types';
+import { RootState } from '../../../engine/state';
+import { Point, Table } from '../../../internal-types';
 /**
  * The pointer a column drag holds, in canvas units: where it is, where it took
  * the rows it carries, and whether a drop target is under it right now.

package/dist/components/erd/canvas/columnDragPointer.js

@@ -0,0 +1,30 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { getColumnRect, getTableRect } from "../../../konva/scene/metrics.js";
+import { sceneKeyOf } from "../../../konva/scene/viewFreeze.js";
+//#region src/components/erd/canvas/columnDragPointer.ts
+var state = observable({ pointers: {} });
+function beginColumnDragPointer(root, table, press, { columnId, columnIds }) {
+	const row = getColumnRect(root, table, table.columnIds.indexOf(columnId));
+	const stackIndex = Math.max(columnIds.indexOf(columnId), 0);
+	state.pointers[sceneKeyOf(root, "document")] = {
+		...press,
+		grabX: press.x - getTableRect(root, table).x,
+		grabY: press.y - row.y + stackIndex * 24,
+		over: true
+	};
+}
+function moveColumnDragPointer(root, { x, y }, over) {
+	const pointer = state.pointers[sceneKeyOf(root, "document")];
+	if (!pointer) return;
+	pointer.x = x;
+	pointer.y = y;
+	pointer.over = over;
+}
+function endColumnDragPointer(root) {
+	Reflect.deleteProperty(state.pointers, sceneKeyOf(root, "document"));
+}
+function getColumnDragPointer(root) {
+	return state.pointers[sceneKeyOf(root, "document")] ?? null;
+}
+//#endregion
+export { beginColumnDragPointer, endColumnDragPointer, getColumnDragPointer, moveColumnDragPointer };

package/dist/components/erd/canvas/drag-select/DragSelect.js

@@ -0,0 +1,109 @@
+import { onMounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { getSceneTransform, toScenePoint } from "../../../../konva/scene/viewport.js";
+import { dragSelectRectAction } from "../../../../engine/modules/editor/atom.actions.js";
+import { dragSelectAction$ } from "../../../../engine/modules/editor/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { mouseup$ } from "../../../../utils/globalEventObservable.js";
+import { useSceneInteraction } from "../../../sceneInteractionContext.js";
+import { useUnmounted } from "../../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { Subscription, fromEvent } from "rxjs";
+//#region src/components/erd/canvas/drag-select/DragSelect.tsx
+var STROKE_WIDTH = 1;
+var BACKGROUND_OPACITY = .3;
+var DASH = [3, 3];
+var DragSelect = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const interaction = useSceneInteraction(ctx);
+	const state = observable({
+		active: false,
+		width: 0,
+		height: 0,
+		top: 0,
+		left: 0
+	});
+	const { addUnsubscribe } = useUnmounted();
+	let subscription = null;
+	const clearRect = () => {
+		if (sourceRef.value !== "document") return;
+		app.value.store.dispatchSync(dragSelectRectAction({ rect: null }));
+	};
+	const stop = () => {
+		subscription?.unsubscribe();
+		subscription = null;
+		state.active = false;
+		state.width = 0;
+		state.height = 0;
+		clearRect();
+	};
+	const start = (startX, startY) => {
+		const { store } = app.value;
+		const $root = props.root.value;
+		if (!$root) return;
+		subscription?.unsubscribe();
+		state.active = true;
+		state.left = startX;
+		state.top = startY;
+		state.width = 0;
+		state.height = 0;
+		subscription = new Subscription();
+		subscription.add(mouseup$.subscribe(stop));
+		subscription.add(fromEvent($root, "mousemove").subscribe((event) => {
+			if (interaction() === "read") {
+				stop();
+				return;
+			}
+			event.preventDefault();
+			const source = sourceRef.value;
+			const transform = getSceneTransform(store.state, source);
+			const rect = $root.getBoundingClientRect();
+			const currentX = event.clientX - rect.x;
+			const currentY = event.clientY - rect.y;
+			const minX = Math.min(startX, currentX);
+			const minY = Math.min(startY, currentY);
+			const maxX = Math.max(startX, currentX);
+			const maxY = Math.max(startY, currentY);
+			state.left = minX;
+			state.top = minY;
+			state.width = maxX - minX;
+			state.height = maxY - minY;
+			const sceneMin = toScenePoint(transform, {
+				x: minX,
+				y: minY
+			});
+			const sceneMax = toScenePoint(transform, {
+				x: maxX,
+				y: maxY
+			});
+			const dragRect = {
+				...sceneMin,
+				w: sceneMax.x - sceneMin.x,
+				h: sceneMax.y - sceneMin.y
+			};
+			if (source === "document") store.dispatch(dragSelectAction$(dragRect, source), dragSelectRectAction({ rect: dragRect }));
+			else store.dispatch(dragSelectAction$(dragRect, source));
+		}));
+	};
+	onMounted(() => {
+		const { emitter } = app.value;
+		addUnsubscribe(emitter.on({ dragSelectStart: ({ payload: { x, y, source } }) => {
+			if (source !== sourceRef.value) return;
+			start(x, y);
+		} }), () => {
+			subscription?.unsubscribe();
+			subscription = null;
+			clearRect();
+		});
+	});
+	return () => {
+		if (!state.active) return null;
+		return konva`<k-group id="drag-select" name="drag-select" kind="drag-select" x=${state.left} y=${state.top} listening=${false}><k-rect name="drag-select-background" kind="drag-select-background" width=${state.width} height=${state.height} fill=${themeRef.value.dragSelectBackground} opacity=${BACKGROUND_OPACITY} /><k-rect name="drag-select-border" kind="drag-select-border" width=${state.width} height=${state.height} stroke=${themeRef.value.dragSelectBorder} strokeWidth=${STROKE_WIDTH} dash=${DASH} /></k-group>`;
+	};
+};
+//#endregion
+export { DragSelect as default };