@dineug/erd-editor 4.2.0 → 5.0.0

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

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

@@ -0,0 +1,57 @@
+import { observable } from "../../../../r-html/dist/observable/index.js";
+import { trackTableWidths } from "../../../../utils/calcTable.js";
+import { unionRect } from "../../../../konva/scene/metrics.js";
+import { getTableGroupMembers, getTableGroupRect } from "../../../../utils/tableGroup.js";
+import { getHeldTableGroupBoxes, isEntityDragActive } from "../entityDrag.js";
+import { createDoubleClickGuard } from "../table/doubleClick.js";
+//#region src/components/erd/canvas/table-group/tableGroupBox.ts
+var NO_MEMBERS = [];
+function getDrawnTableGroupRect(state, group, source, members) {
+	trackTableWidths();
+	const { selectedMap } = state.editor;
+	const standing = isEntityDragActive(state, source) && !selectedMap[group.id];
+	const box = getTableGroupRect(state, group, {
+		members,
+		excludeTableIds: standing ? Object.keys(selectedMap) : []
+	});
+	const held = standing ? getHeldTableGroupBoxes(state, source)?.get(group.id) : void 0;
+	return held ? unionRect(held, box) : box;
+}
+function createTableGroupLinks() {
+	const drafts = observable({});
+	const guards = /* @__PURE__ */ new Map();
+	const hovers = observable({});
+	return {
+		isHovered: (groupId) => Boolean(hovers[`${groupId}:frame`] || hovers[`${groupId}:body`]),
+		setHover: (groupId, part, hovered) => {
+			const key = `${groupId}:${part}`;
+			if (hovered) hovers[key] = true;
+			else Reflect.deleteProperty(hovers, key);
+		},
+		draftOf: (groupId) => drafts[groupId] ?? null,
+		setDraft: (groupId, rect) => {
+			if (rect) drafts[groupId] = rect;
+			else Reflect.deleteProperty(drafts, groupId);
+		},
+		guardOf: (groupId) => {
+			const guard = guards.get(groupId) ?? createDoubleClickGuard();
+			guards.set(groupId, guard);
+			return guard;
+		}
+	};
+}
+var isSameList = (a, b) => a.length === b.length && a.every((table, index) => table === b[index]);
+function createTableGroupMemberLists() {
+	let last = /* @__PURE__ */ new Map();
+	return (state) => {
+		const next = /* @__PURE__ */ new Map();
+		getTableGroupMembers(state).forEach((members, groupId) => {
+			const before = last.get(groupId);
+			next.set(groupId, before && isSameList(before, members) ? before : members);
+		});
+		last = next;
+		return (groupId) => next.get(groupId) ?? NO_MEMBERS;
+	};
+}
+//#endregion
+export { createTableGroupLinks, createTableGroupMemberLists, getDrawnTableGroupRect };

package/dist/components/erd/canvas/table-group/tableGroupNameEditor.d.ts

@@ -0,0 +1,11 @@
+import { RxStore } from '../../../../engine/rx-store';
+/**
+ * Opens the editor over a group's title bar, the table focus let go so Enter and the arrows are the
+ * name's. A readonly store opens nothing, nor do hidden groups, whose bar no editor stands over and
+ * which would leave the canvas shortcuts waiting on an editor that never opened.
+ *
+ * @example
+ * openTableGroupNameEditor(store, groupId);
+ */
+export declare function openTableGroupNameEditor(store: RxStore, id: string): void;
+//# sourceMappingURL=tableGroupNameEditor.d.ts.map

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

@@ -0,0 +1,9 @@
+import { isTableGroupShown } from "../../../../utils/tableGroup.js";
+import { editTableGroupAction, focusTableEndAction } from "../../../../engine/modules/editor/atom.actions.js";
+//#region src/components/erd/canvas/table-group/tableGroupNameEditor.ts
+function openTableGroupNameEditor(store, id) {
+	if (store.getReadonly() || !isTableGroupShown(store.state)) return;
+	store.dispatch(focusTableEndAction(), editTableGroupAction({ id }));
+}
+//#endregion
+export { openTableGroupNameEditor };

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

@@ -0,0 +1,31 @@
+import { getCellTextHeight } from "../table/cellLayout.js";
+//#region src/components/erd/canvas/table-group/titleLayout.ts
+var TABLE_GROUP_ICON_SIZE = 12;
+var TABLE_GROUP_NAME_X = 8 + TABLE_GROUP_ICON_SIZE + 8;
+var TABLE_GROUP_REMOVE_SIZE = 12;
+var TABLE_GROUP_NAME_END = 8 + TABLE_GROUP_REMOVE_SIZE + 8;
+function getTableGroupNameBox(barWidth = 0) {
+	const height = getCellTextHeight();
+	return {
+		x: TABLE_GROUP_NAME_X,
+		y: Math.round((28 - height) / 2),
+		width: Math.max(barWidth - TABLE_GROUP_NAME_X - TABLE_GROUP_NAME_END, 0),
+		height
+	};
+}
+function getTableGroupIconBox() {
+	return {
+		x: 8,
+		y: Math.round((28 - TABLE_GROUP_ICON_SIZE) / 2),
+		size: TABLE_GROUP_ICON_SIZE
+	};
+}
+function getTableGroupRemoveBox(barWidth) {
+	return {
+		x: barWidth - 8 - TABLE_GROUP_REMOVE_SIZE,
+		y: Math.round((28 - TABLE_GROUP_REMOVE_SIZE) / 2),
+		size: TABLE_GROUP_REMOVE_SIZE
+	};
+}
+//#endregion
+export { TABLE_GROUP_ICON_SIZE, TABLE_GROUP_NAME_X, TABLE_GROUP_REMOVE_SIZE, getTableGroupIconBox, getTableGroupNameBox, getTableGroupRemoveBox };

package/dist/components/erd/canvas/useMoveEntity.d.ts

@@ -17,7 +17,7 @@ export type MoveEntityOptions = {
     clickKinds?: (source: GeometrySource) => readonly string[];
     /**
      * The scene the component already stands in, handed down rather than read
-     * again here, so a leaf pays for one context subscription and not two.
+     * again here, so a leaf subscribes to the source once and not twice.
      */
     source: Ref<GeometrySource>;
     /** Read at the press: false leaves it a selection that lifts nothing. */

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

@@ -0,0 +1,80 @@
+import { isMod } from "../../../utils/keyboard-shortcut/index.js";
+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 { dropTablesIntoGroupsAction$, selectTableGroupAction$ } from "../../../engine/modules/table-group/generator.actions.js";
+import { moveAllAction$ } from "../../../engine/modules/editor/generator.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { isMainButtonPress, isMultiTouch } from "../../../utils/domEvent.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { tryStartAltDragDuplicate } from "./altDragDuplicate.js";
+import { beginEntityDrag, endEntityDrag, getHeldTableGroupBoxes, markEntityDragTravelled } from "./entityDrag.js";
+import { hasKindAncestor } from "./sceneKind.js";
+import { useSceneInteraction } from "../../sceneInteractionContext.js";
+import { takeWhile } from "rxjs";
+//#region src/components/erd/canvas/useMoveEntity.ts
+var selectEntityAction$ = (selectType, entityId, keepSelection) => selectType === SelectType.memo ? selectMemoAction$(entityId, keepSelection) : selectType === SelectType.tableGroup ? selectTableGroupAction$(entityId, keepSelection) : selectTableAction$(entityId, keepSelection);
+function useMoveEntity(ctx, options) {
+	const app = useAppContext(ctx);
+	const interaction = useSceneInteraction(ctx);
+	const handleMove = (source, gesture) => ({ event, movementX, movementY }) => {
+		event.type === "mousemove" && event.preventDefault();
+		const { store } = app.value;
+		store.dispatch(moveAllAction$(movementX, movementY, source, gesture));
+	};
+	const onMoveStart = (event) => {
+		if (!event?.target || isMultiTouch(event.evt)) return;
+		if (interaction() === "read") return;
+		const { store } = app.value;
+		const entityId = options.entityId();
+		const source = options.source.value;
+		const mainButton = isMainButtonPress(event.evt);
+		const canDrag = mainButton && (options.canMove?.() ?? true) && !hasKindAncestor(event.target, options.blockedKinds(source));
+		if (canDrag && options.selectType !== SelectType.tableGroup && tryStartAltDragDuplicate(app.value, event.evt, entityId, options.selectType)) return;
+		const keepSelection = mainButton && isMod(event.evt) || Boolean(store.state.editor.selectedMap[entityId]);
+		store.dispatch(selectEntityAction$(options.selectType, entityId, keepSelection));
+		if (!canDrag) return;
+		const step = handleMove(source, {});
+		let begun = false;
+		let travelled = false;
+		let pendingX = 0;
+		let pendingY = 0;
+		let travelX = 0;
+		let travelY = 0;
+		const move = (drag) => {
+			travelX += drag.movementX;
+			travelY += drag.movementY;
+			if (!travelled && Math.abs(travelX) + Math.abs(travelY) >= 4) {
+				travelled = true;
+				markEntityDragTravelled(store.state, source);
+			}
+			step(drag);
+		};
+		const end = () => {
+			if (!begun) return;
+			if (travelled && source === "document" && interaction() !== "read") store.dispatch(dropTablesIntoGroupsAction$(getHeldTableGroupBoxes(store.state, source)));
+			endEntityDrag(store.state, source);
+		};
+		const begin = () => {
+			begun = true;
+			beginEntityDrag(store.state, source);
+		};
+		if (!hasKindAncestor(event.target, options.clickKinds?.(source) ?? [])) begin();
+		drag$.pipe(takeWhile(() => interaction() !== "read")).subscribe((drag) => {
+			if (begun) return move(drag);
+			drag.event.type === "mousemove" && drag.event.preventDefault();
+			pendingX += drag.movementX;
+			pendingY += drag.movementY;
+			if (Math.abs(pendingX) + Math.abs(pendingY) < 4) return;
+			begin();
+			move({
+				...drag,
+				movementX: pendingX,
+				movementY: pendingY
+			});
+		}).add(end);
+	};
+	return { onMoveStart };
+}
+//#endregion
+export { useMoveEntity };

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

@@ -0,0 +1,28 @@
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observable, watch } from "../../../r-html/dist/observable/index.js";
+import { useAppContext } from "../../appContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { toSharedColor } from "../../../utils/sharedColor.js";
+//#region src/components/erd/canvas/useSharedSelectEntity.ts
+function useSharedSelectEntity(ctx, entityId) {
+	const app = useAppContext(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ force: false });
+	const forceUpdate = () => {
+		state.force = !state.force;
+	};
+	onMounted(() => {
+		const { store } = app.value;
+		const { editor: { sharedSelectionTrackerMap } } = store.state;
+		addUnsubscribe(watch(sharedSelectionTrackerMap).subscribe(forceUpdate));
+	});
+	const sharedSelectColor = () => {
+		const { store } = app.value;
+		state.force;
+		const tracker = Object.values(store.state.editor.sharedSelectionTrackerMap).find((tracker) => tracker.selectedIds.includes(entityId));
+		return tracker ? toSharedColor(tracker.id) : null;
+	};
+	return { sharedSelectColor };
+}
+//#endregion
+export { useSharedSelectEntity };

package/dist/components/erd/content-compass/ContentCompass.js

@@ -0,0 +1,23 @@
+import { html } from "../../../r-html/dist/render/index.js";
+import { useAppContext } from "../../appContext.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { formatDistance, getContentCompass, scrollToNearestContent } from "./compassGeometry.js";
+import { compass, distance } from "./ContentCompass.styles.js";
+//#region src/components/erd/content-compass/ContentCompass.tsx
+var ContentCompass = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const handleClick = () => {
+		scrollToNearestContent(app.value.store, sourceRef.value);
+	};
+	return () => {
+		const { store } = app.value;
+		const compass$1 = getContentCompass(store.state, sourceRef.value);
+		return html`${compass$1 ? html`<div class=${["content-compass", compass]} title=${i18n.value.t("floatingToolbar.goToNearestContent")} .dir="ltr" @click=${handleClick}><${Icon} .name="arrow-right" .size=${14} .rotate=${compass$1.angle} /><span class=${distance}>${formatDistance(compass$1.distance)}</span></div>` : null}`;
+	};
+};
+//#endregion
+export { ContentCompass as default };