@dineug/erd-editor 4.1.0 → 5.0.0

package/dist/components/erd/canvas/table/dictionaryMarks.d.ts

@@ -0,0 +1,29 @@
+import { DictionaryCheckField, DictionaryCheckLevel } from '../../../../engine/modules/dictionary/checks';
+import { RxStore } from '../../../../engine/rx-store';
+import { Column, Table } from '../../../../internal-types';
+import { Theme } from '../../../../themes/tokens';
+/** The colour a check level writes a cell's text in: red for an error, amber for a warning. */
+export declare const dictionaryMarkFill: (theme: Theme, level: DictionaryCheckLevel | null) => string | null;
+/**
+ * The mark while it reads at 4.5:1 on the header fill under it, else null, so
+ * the header's own black or white takes its place: a group's colour is the
+ * reader's pick, and a mark of a near hue would hide the name it marks.
+ */
+export declare function readableMarkFill(mark: string | null, background: string): string | null;
+/**
+ * The colour a header cell's text takes for what the checks find in the field
+ * it draws, null for nothing found. Empty dictionaries find nothing.
+ *
+ * @example
+ * const fill = tableMarkFill(store, theme, table, 'logicalName');
+ */
+export declare function tableMarkFill(store: RxStore, theme: Theme, table: Table, field: DictionaryCheckField): string | null;
+/**
+ * The colour a row cell's text takes for what the checks find in the field it
+ * draws, null for nothing found, as a header cell's is.
+ *
+ * @example
+ * const fill = columnMarkFill(store, theme, column, 'name');
+ */
+export declare function columnMarkFill(store: RxStore, theme: Theme, column: Column, field: DictionaryCheckField): string | null;
+//# sourceMappingURL=dictionaryMarks.d.ts.map

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.d.ts

@@ -4,5 +4,6 @@ export declare function useFocusTable(ctx: Ctx, tableId: string): {
     hasFocus: (focusType: FocusType, columnId?: string) => boolean;
     hasEdit: (focusType: FocusType, columnId?: string) => boolean;
     hasSelectColumn: (columnId: string) => boolean;
+    hasFocusColumn: (columnId: string) => boolean;
 };
 //# sourceMappingURL=useFocusTable.d.ts.map

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 };

package/dist/components/erd/canvas/table-group/TableGroup.js

@@ -0,0 +1,141 @@
+import { onUnmounted, onUpdated } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { SelectType } from "../../../../engine/modules/editor/state.js";
+import { getTableGroupColors } from "../../../../utils/tableGroup.js";
+import { removeTableGroupAction$ } from "../../../../engine/modules/table-group/generator.actions.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_POINTER, SCENE_FONT_FAMILY, SCENE_FONT_SIZE, TABLE_GROUP_TITLE_FONT_WEIGHT, TRANSPARENT, createSceneCursorScope, mainButtonClick } from "../sceneTokens.js";
+import { diffOutlineRect } from "../DiffOutline.template.js";
+import { useSceneInteraction } from "../../../sceneInteractionContext.js";
+import { useMoveEntity } from "../useMoveEntity.js";
+import { sceneIcon } from "../SceneIcon.template.js";
+import { useSharedSelectEntity } from "../useSharedSelectEntity.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { diffOutline, diffTextColor } from "../../../../utils/diff/diff.js";
+import { getDrawnTableGroupRect } from "./tableGroupBox.js";
+import { openTableGroupNameEditor } from "./tableGroupNameEditor.js";
+import TableGroupSash from "./TableGroupSash.js";
+import { getTableGroupIconBox, getTableGroupNameBox, getTableGroupRemoveBox } from "./titleLayout.js";
+//#region src/components/erd/canvas/table-group/TableGroup.tsx
+var TABLE_GROUP_BORDER = 1;
+var TITLE_KINDS = ["table-group-title"];
+var BLOCKED_KINDS = ["icon"];
+var TableGroup = (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 { sharedSelectColor } = useSharedSelectEntity(ctx, props.group.id);
+	const state = observable({ removeHover: false });
+	const { onMoveStart } = useMoveEntity(ctx, {
+		entityId: () => props.group.id,
+		selectType: SelectType.tableGroup,
+		blockedKinds: () => BLOCKED_KINDS,
+		clickKinds: () => TITLE_KINDS,
+		canMove: () => !app.value.store.getReadonly(),
+		source: sourceRef
+	});
+	const guard = () => props.links.guardOf(props.group.id);
+	const handleTitlePress = (event) => {
+		guard().track("title", event);
+		onMoveStart(event);
+	};
+	const handleTitleDoubleClick = (event) => {
+		if (!guard().isDouble("title", event)) return;
+		openTableGroupNameEditor(app.value.store, props.group.id);
+	};
+	const handleDraft = (rect) => {
+		props.links.setDraft(props.group.id, rect);
+	};
+	const handleMouseenter = () => {
+		props.links.setHover(props.group.id, "frame", true);
+	};
+	const handleMouseleave = () => {
+		props.links.setHover(props.group.id, "frame", false);
+	};
+	const cursor = createSceneCursorScope();
+	onUnmounted(() => {
+		handleMouseleave();
+		cursor.release();
+	});
+	onUpdated(() => {
+		if (interaction() === "read") cursor.release();
+	});
+	const handleRemoveMouseenter = (event) => {
+		state.removeHover = true;
+		cursor.set(event, app.value.store.getReadonly() ? "" : CURSOR_POINTER);
+	};
+	const handleRemoveMouseleave = (event) => {
+		state.removeHover = false;
+		cursor.set(event, "");
+	};
+	const handleRemove = () => {
+		const { store } = app.value;
+		if (store.getReadonly()) return;
+		store.dispatch(removeTableGroupAction$(props.group.id));
+	};
+	const removeColor = (theme, colors, readonly) => {
+		if (readonly || !props.links.isHovered(props.group.id)) return TRANSPARENT;
+		if (colors) return colors.foreground;
+		return state.removeHover ? theme.active : theme.foreground;
+	};
+	return () => {
+		const { store } = app.value;
+		const { selectedMap } = store.state.editor;
+		const { group, members, links } = props;
+		const theme = themeRef.value;
+		const selected = Boolean(selectedMap[group.id]);
+		const sharedSelected = sharedSelectColor();
+		const editing = store.state.editor.editTableGroupId === group.id;
+		const box = links.draftOf(group.id) ?? getDrawnTableGroupRect(store.state, group, sourceRef.value, members);
+		const { x, y, width, height } = box;
+		const colors = getTableGroupColors(group);
+		const nameBox = getTableGroupNameBox(width);
+		const iconBox = getTableGroupIconBox();
+		const removeBox = getTableGroupRemoveBox(width);
+		const readonly = store.getReadonly();
+		const read = interaction() === "read";
+		const named = Boolean(group.name.trim());
+		const borderInset = TABLE_GROUP_BORDER / 2;
+		const diffPaths = diffMapRef.value?.get(group.id);
+		return konva`<k-group id=${`table-group-${group.id}`} name="table-group" kind="table-group" selected=${selected} sharedSelect=${sharedSelected} x=${x} y=${y} @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave}><k-group name="table-group-title" kind="table-group-title" @mousedown=${handleTitlePress} @touchstart=${onMoveStart} @dblclick=${mainButtonClick(handleTitleDoubleClick)}><k-rect name="table-group-title-bar" width=${width} height=${28} cornerRadius=${[
+			6,
+			6,
+			0,
+			0
+		]} fill=${colors?.background ?? theme.tableGroupHeaderBackground} /><k-group name="table-group-icon-holder" listening=${false}>${sceneIcon({
+			icon: "group",
+			name: "table-group-icon",
+			kind: "table-group-icon",
+			size: iconBox.size,
+			color: colors?.foreground ?? theme.active,
+			x: iconBox.x,
+			y: iconBox.y
+		})}</k-group><k-text name="table-group-name" x=${nameBox.x} y=${nameBox.y} width=${nameBox.width} height=${nameBox.height} text=${named ? group.name : i18n.value.t("common.unnamed")} fill=${diffTextColor(theme, diffPaths, "tableGroupName") ?? colors?.foreground ?? (named ? theme.active : theme.placeholder)} fontFamily=${SCENE_FONT_FAMILY} fontSize=${SCENE_FONT_SIZE} fontStyle=${TABLE_GROUP_TITLE_FONT_WEIGHT} verticalAlign="middle" wrap="none" ellipsis=${true} visible=${!editing} listening=${false} />${read ? null : sceneIcon({
+			icon: "x",
+			name: "table-group-remove",
+			kind: "icon",
+			size: removeBox.size,
+			color: removeColor(theme, colors, readonly),
+			mouseenter: handleRemoveMouseenter,
+			mouseleave: handleRemoveMouseleave,
+			x: removeBox.x,
+			y: removeBox.y,
+			click: handleRemove
+		})}</k-group><k-rect name="table-group-border" x=${borderInset} y=${borderInset} width=${width - TABLE_GROUP_BORDER} height=${height - TABLE_GROUP_BORDER} cornerRadius=${6} stroke=${selected ? theme.memoSelect : colors?.background ?? theme.tableGroupBorder} strokeWidth=${TABLE_GROUP_BORDER} listening=${false} /><k-rect name="table-group-shared-select" x=${-.5} y=${-.5} width=${width + 1} height=${height + 1} cornerRadius=${7} stroke=${sharedSelected ?? ""} strokeWidth=${1} listening=${false} />${diffOutlineRect({
+			name: "table-group-diff-outline",
+			stroke: diffOutline(theme, diffPaths),
+			width,
+			height,
+			cornerRadius: 7
+		})}${readonly ? null : konva`<${TableGroupSash} .group=${group} .box=${box} .onDraft=${handleDraft} />`}</k-group>`;
+	};
+};
+//#endregion
+export { TableGroup as default };

package/dist/components/erd/canvas/table-group/TableGroupBody.js

@@ -0,0 +1,47 @@
+import { onUnmounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { getTableGroupColors } from "../../../../utils/tableGroup.js";
+import { selectTableGroupAction$ } from "../../../../engine/modules/table-group/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { isMainButtonPress, isMultiTouch } from "../../../../utils/domEvent.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { TABLE_GROUP_FILL_OPACITY } from "../sceneTokens.js";
+import { useSceneInteraction } from "../../../sceneInteractionContext.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { getDrawnTableGroupRect } from "./tableGroupBox.js";
+//#region src/components/erd/canvas/table-group/TableGroupBody.tsx
+var TableGroupBody = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const interaction = useSceneInteraction(ctx);
+	const handleMouseenter = () => {
+		props.links.setHover(props.group.id, "body", true);
+	};
+	const handleMouseleave = () => {
+		props.links.setHover(props.group.id, "body", false);
+	};
+	onUnmounted(handleMouseleave);
+	const handleBodyPress = (event) => {
+		const { group, links } = props;
+		links.guardOf(group.id).track("body", event);
+		if (interaction() === "read") return;
+		if (isMainButtonPress(event.evt) || isMultiTouch(event.evt)) return;
+		const { store } = app.value;
+		store.dispatch(selectTableGroupAction$(group.id, Boolean(store.state.editor.selectedMap[group.id])));
+	};
+	return () => {
+		const { store } = app.value;
+		const { group, members, links } = props;
+		const { x, y, width, height } = links.draftOf(group.id) ?? getDrawnTableGroupRect(store.state, group, sourceRef.value, members);
+		const colors = getTableGroupColors(group);
+		return konva`<k-rect id=${`table-group-body-${group.id}`} name="table-group-body" kind="table-group-body" x=${x} y=${y + 28} width=${width} height=${Math.max(height - 28, 0)} cornerRadius=${[
+			0,
+			0,
+			6,
+			6
+		]} fill=${colors?.background ?? themeRef.value.tableGroupBackground} opacity=${colors ? TABLE_GROUP_FILL_OPACITY : 1} @mousedown=${handleBodyPress} @mouseenter=${handleMouseenter} @mouseleave=${handleMouseleave} />`;
+	};
+};
+//#endregion
+export { TableGroupBody as default };

package/dist/components/erd/canvas/table-group/TableGroupDropTarget.js

@@ -0,0 +1,25 @@
+import { getTableGroupDrops } from "../../../../engine/modules/table-group/generator.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { getHeldTableGroupBoxes, hasEntityDragTravelled } from "../entityDrag.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+//#region src/components/erd/canvas/table-group/TableGroupDropTarget.tsx
+var TableGroupDropTarget = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	return () => {
+		const { state } = app.value.store;
+		const source = sourceRef.value;
+		const drops = hasEntityDragTravelled(state, source) ? getTableGroupDrops(state, getHeldTableGroupBoxes(state, source)) : [];
+		const boxes = /* @__PURE__ */ new Map();
+		drops.forEach(({ groupId, box }) => {
+			if (box) boxes.set(groupId, box);
+		});
+		const inset = 1;
+		return konva`${[...boxes.values()].map(({ x, y, width, height }) => konva`<k-rect name="table-group-drop-target" x=${x - inset} y=${y - inset} width=${width + 2} height=${height + 2} cornerRadius=${7} stroke=${themeRef.value.focus} strokeWidth=${2} listening=${false} />`)}`;
+	};
+};
+//#endregion
+export { TableGroupDropTarget as default };

package/dist/components/erd/canvas/table-group/TableGroupSash.js

@@ -0,0 +1,143 @@
+import "../../../../constants/layout.js";
+import { onUnmounted } from "../../../../r-html/dist/render/part/node/component/hooks.js";
+import { getTableGroupMemberIds, getTablesGroupRect, isTableGroupShown } from "../../../../utils/tableGroup.js";
+import { resizeTableGroupAction } from "../../../../engine/modules/table-group/atom.actions.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { isMainButtonPress, isMouseEvent, isMultiTouch } from "../../../../utils/domEvent.js";
+import { HIT_FILL, createSceneCursorScope, holdSceneCursor } from "../sceneTokens.js";
+import { drag$ } from "../../../../utils/globalEventObservable.js";
+//#region src/components/erd/canvas/table-group/TableGroupSash.tsx
+var TableGroupSashPosition = {
+	left: "left",
+	right: "right",
+	top: "top",
+	bottom: "bottom",
+	lt: "lt",
+	rt: "rt",
+	lb: "lb",
+	rb: "rb"
+};
+var EDGES = {
+	left: { x: "left" },
+	right: { x: "right" },
+	top: { y: "top" },
+	bottom: { y: "bottom" },
+	lt: {
+		x: "left",
+		y: "top"
+	},
+	rt: {
+		x: "right",
+		y: "top"
+	},
+	lb: {
+		x: "left",
+		y: "bottom"
+	},
+	rb: {
+		x: "right",
+		y: "bottom"
+	}
+};
+var CURSORS = {
+	left: "ew-resize",
+	right: "ew-resize",
+	top: "ns-resize",
+	bottom: "ns-resize",
+	lt: "nwse-resize",
+	rt: "nesw-resize",
+	lb: "nesw-resize",
+	rb: "nwse-resize"
+};
+var POSITIONS = Object.values(TableGroupSashPosition);
+function resizeTableGroupRect(start, members, position, movementX, movementY) {
+	const { x, y } = EDGES[position];
+	let left = start.x;
+	let top = start.y;
+	let right = start.x + start.width;
+	let bottom = start.y + start.height;
+	if (x === "left") left = Math.min(left + movementX, right - 160, members?.x ?? Infinity);
+	else if (x === "right") right = Math.max(right + movementX, left + 160, members ? members.x + members.width : -Infinity);
+	if (y === "top") top = Math.min(top + movementY, bottom - 100, members?.y ?? Infinity);
+	else if (y === "bottom") bottom = Math.max(bottom + movementY, top + 100, members ? members.y + members.height : -Infinity);
+	return {
+		x: left,
+		y: top,
+		width: right - left,
+		height: bottom - top
+	};
+}
+var sameRect = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+var pointerOf = (event) => isMouseEvent(event.evt) ? {
+	x: event.evt.clientX,
+	y: event.evt.clientY
+} : {
+	x: event.evt.touches[0]?.clientX ?? 0,
+	y: event.evt.touches[0]?.clientY ?? 0
+};
+var TableGroupSash = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const cursor = createSceneCursorScope();
+	let abandon = null;
+	onUnmounted(() => {
+		abandon?.();
+		cursor.release();
+	});
+	const handleMoveStart = (event, position) => {
+		if (!isMainButtonPress(event.evt) || isMultiTouch(event.evt)) return;
+		const { store } = app.value;
+		const { id } = props.group;
+		const start = { ...props.box };
+		const members = getTablesGroupRect(store.state, getTableGroupMemberIds(store.state, id));
+		const { zoomLevel } = store.state.settings;
+		const origin = pointerOf(event);
+		let rect = start;
+		let kept = true;
+		const commit = () => {
+			abandon = null;
+			const { state } = store;
+			if (kept && !sameRect(rect, start) && isTableGroupShown(state) && state.doc.tableGroupIds.includes(id)) store.dispatchSync(resizeTableGroupAction({
+				id,
+				...rect
+			}));
+			props.onDraft(null);
+		};
+		const release = holdSceneCursor(event, CURSORS[position]);
+		const gesture = drag$.subscribe(({ event, x, y }) => {
+			event.type === "mousemove" && event.preventDefault();
+			rect = resizeTableGroupRect(start, members, position, (x - origin.x) / zoomLevel, (y - origin.y) / zoomLevel);
+			props.onDraft(rect);
+		});
+		gesture.add(release);
+		gesture.add(commit);
+		abandon = () => {
+			kept = false;
+			gesture.unsubscribe();
+		};
+	};
+	return () => {
+		const { width, height } = props.box;
+		const half = 5 / 2;
+		const offset = {
+			left: -2.5,
+			top: -2.5,
+			right: width - half,
+			bottom: height - half
+		};
+		return konva`${POSITIONS.map((position) => {
+			const { x, y } = EDGES[position];
+			return konva`<k-rect name=${`table-group-sash table-group-sash-${position}`} kind="table-group-sash" x=${x ? offset[x] : 0} y=${y ? offset[y] : 0} width=${x ? 5 : width} height=${y ? 5 : height} fill=${HIT_FILL} @mousedown=${(event) => {
+				handleMoveStart(event, position);
+			}} @touchstart=${(event) => {
+				handleMoveStart(event, position);
+			}} @mouseenter=${(event) => {
+				cursor.set(event, CURSORS[position]);
+			}} @mouseleave=${(event) => {
+				cursor.set(event, "");
+			}} />`;
+		})}`;
+	};
+};
+//#endregion
+export { TableGroupSashPosition, TableGroupSash as default, resizeTableGroupRect };

package/dist/components/erd/canvas/table-group/TableGroups.js

@@ -0,0 +1,21 @@
+import { query } from "../../../../erd-editor-schema/dist/query/index.js";
+import { repeat } from "../../../../r-html/dist/render/directives/node/repeat.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { createTableGroupLinks, createTableGroupMemberLists } from "./tableGroupBox.js";
+import TableGroup from "./TableGroup.js";
+import TableGroupBody from "./TableGroupBody.js";
+//#region src/components/erd/canvas/table-group/TableGroups.tsx
+var TableGroups = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const links = createTableGroupLinks();
+	const memberLists = createTableGroupMemberLists();
+	return () => {
+		const { state } = app.value.store;
+		const groups = query(state.collections).collection("tableGroupEntities").selectByIds(state.doc.tableGroupIds).sort((a, b) => a.ui.zIndex - b.ui.zIndex);
+		const membersOf = memberLists(state);
+		return konva`${repeat(groups, (group) => group.id, (group) => konva`<${TableGroupBody} .group=${group} .members=${membersOf(group.id)} .links=${links} />`)}${repeat(groups, (group) => group.id, (group) => konva`<${TableGroup} .group=${group} .members=${membersOf(group.id)} .links=${links} />`)}`;
+	};
+};
+//#endregion
+export { TableGroups as default };