@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/diff-viewer/diff-tree/diffTreeModel.js

@@ -0,0 +1,203 @@
+import { ReferentialActionToSQL, RelationshipType } from "../../../../constants/schema.js";
+import { DiffField, DiffKind, DiffStatus } from "../../../../utils/diff/types.js";
+//#region src/components/erd/diff-viewer/diff-tree/diffTreeModel.ts
+var PREFIX = {
+	[DiffKind.table]: "t",
+	[DiffKind.column]: "c",
+	[DiffKind.index]: "i",
+	[DiffKind.foreignKey]: "r",
+	[DiffKind.memo]: "m",
+	[DiffKind.tableGroup]: "g"
+};
+var entryNodeId = (entry) => `${PREFIX[entry.kind]}:${entry.nextId ?? `prev-${entry.prevId}`}`;
+var CHILD_FOLDER = {
+	[DiffKind.column]: "columns",
+	[DiffKind.index]: "indexes",
+	[DiffKind.foreignKey]: "foreignKeys"
+};
+var leaf = (id, data) => ({
+	id,
+	hasChildren: false,
+	children: () => [],
+	data
+});
+function folder(id, name, list) {
+	return list.length ? {
+		id,
+		hasChildren: true,
+		children: () => list,
+		data: {
+			kind: "folder",
+			folder: name,
+			count: list.length
+		}
+	} : null;
+}
+var present = (nodes) => nodes.filter((node) => node !== null);
+function matchesFilter(entry, filter) {
+	const needle = filter.trim().toLowerCase();
+	return !needle || [
+		entry.name,
+		entry.prevName,
+		entry.logicalName,
+		entry.prevLogicalName
+	].some((name) => name.toLowerCase().includes(needle));
+}
+function tableNode(table, filter) {
+	const id = entryNodeId(table);
+	const kept = matchesFilter(table, filter);
+	const children = kept ? table.children : table.children.filter((child) => matchesFilter(child, filter));
+	if (!kept && !children.length) return null;
+	const folders = present([
+		"columns",
+		"indexes",
+		"foreignKeys"
+	].map((name) => folder(`${id}/f:${name}`, name, children.filter((child) => CHILD_FOLDER[child.kind] === name).map((child) => leaf(entryNodeId(child), {
+		kind: "entry",
+		entry: child,
+		table
+	})))));
+	return {
+		id,
+		hasChildren: folders.length > 0,
+		children: () => folders,
+		data: {
+			kind: "entry",
+			entry: table,
+			table: null
+		}
+	};
+}
+function buildDiffTree(entries, filter = "") {
+	const kept = (list) => list.filter((entry) => matchesFilter(entry, filter)).map((entry) => leaf(entryNodeId(entry), {
+		kind: "entry",
+		entry,
+		table: null
+	}));
+	const roots = present([
+		folder("f:tables", "tables", present(entries.tables.map((table) => tableNode(table, filter)))),
+		folder("f:tableGroups", "tableGroups", kept(entries.tableGroups)),
+		folder("f:memos", "memos", kept(entries.memos))
+	]);
+	const branchIds = [];
+	const collect = (nodes) => nodes.forEach((node) => {
+		if (!node.hasChildren) return;
+		branchIds.push(node.id);
+		collect(node.children());
+	});
+	collect(roots);
+	return {
+		roots,
+		branchIds
+	};
+}
+function statusLetter(item) {
+	if (item.kind === "folder") return "~";
+	switch (item.entry.status) {
+		case DiffStatus.added: return "A";
+		case DiffStatus.modified: return "M";
+		case DiffStatus.deleted: return "D";
+		case DiffStatus.renamed: return "R";
+		default: return "~";
+	}
+}
+var STATUS_LABEL = {
+	[DiffStatus.added]: "explorer.status.added",
+	[DiffStatus.modified]: "explorer.status.modified",
+	[DiffStatus.deleted]: "explorer.status.deleted",
+	[DiffStatus.renamed]: "explorer.status.renamed"
+};
+var statusLabel = (status, { t }) => t(status ? STATUS_LABEL[status] : "explorer.status.inside");
+var FIELD_LABEL = {
+	[DiffField.name]: "explorer.diff.field.name",
+	[DiffField.comment]: "explorer.diff.field.comment",
+	[DiffField.dataType]: "explorer.diff.field.dataType",
+	[DiffField.default]: "explorer.diff.field.default",
+	[DiffField.order]: "explorer.diff.field.order",
+	[DiffField.tableGroup]: "explorer.diff.field.tableGroup",
+	[DiffField.position]: "explorer.diff.field.position",
+	[DiffField.size]: "explorer.diff.field.size",
+	[DiffField.color]: "explorer.diff.field.color",
+	[DiffField.members]: "explorer.diff.field.members",
+	[DiffField.columns]: "explorer.diff.field.columns",
+	[DiffField.relationshipType]: "explorer.diff.field.relationshipType",
+	[DiffField.value]: "explorer.diff.field.value"
+};
+function fieldLabel({ field }, kind, { t }) {
+	switch (field) {
+		case DiffField.autoIncrement: return "AI";
+		case DiffField.primaryKey: return "PK";
+		case DiffField.unique: return kind === DiffKind.index ? "UNIQUE" : "UQ";
+		case DiffField.notNull: return "NN";
+		case DiffField.onDelete: return "ON DELETE";
+		case DiffField.onUpdate: return "ON UPDATE";
+		default: return t(FIELD_LABEL[field]);
+	}
+}
+var RELATIONSHIP_LABEL = {
+	[RelationshipType.ZeroOne]: "common.relationshipType.zeroOne",
+	[RelationshipType.ZeroN]: "common.relationshipType.zeroN",
+	[RelationshipType.OneOnly]: "common.relationshipType.oneOnly",
+	[RelationshipType.OneN]: "common.relationshipType.oneN"
+};
+function valueText(field, value, { t }) {
+	if (typeof value === "boolean") return value ? "✓" : "✗";
+	if (field === DiffField.relationshipType && typeof value === "number") {
+		const key = RELATIONSHIP_LABEL[value];
+		return key ? t(key) : String(value);
+	}
+	if (field === DiffField.onDelete || field === DiffField.onUpdate) return ReferentialActionToSQL[value] ?? "—";
+	const text = String(value).split(/\r?\n/, 1)[0];
+	if (!text.trim()) return "—";
+	return text.length > 40 ? `${text.slice(0, 40)}…` : text;
+}
+function describeEntry(entry, i18n) {
+	return [statusLabel(entry.status, i18n), ...entry.changes.map((change) => i18n.t("explorer.diff.change", {
+		field: fieldLabel(change, entry.kind, i18n),
+		before: valueText(change.field, change.before, i18n),
+		after: valueText(change.field, change.after, i18n)
+	}))].join("\n");
+}
+function targetOf(entry, table, side) {
+	const id = side === "prev" ? entry.prevId : entry.nextId;
+	if (!id) return null;
+	switch (entry.kind) {
+		case DiffKind.table: return {
+			kind: "table",
+			tableId: id
+		};
+		case DiffKind.column:
+		case DiffKind.index: {
+			const tableId = side === "prev" ? table?.prevId : table?.nextId;
+			return tableId ? {
+				kind: "table",
+				tableId
+			} : null;
+		}
+		case DiffKind.foreignKey: return {
+			kind: "relationship",
+			relationshipId: id
+		};
+		case DiffKind.memo: return {
+			kind: "memo",
+			memoId: id
+		};
+		case DiffKind.tableGroup: return {
+			kind: "tableGroup",
+			tableGroupId: id
+		};
+	}
+}
+function diffTargets(item) {
+	if (item.kind === "folder") return {
+		prev: null,
+		next: null
+	};
+	const { entry, table } = item;
+	return {
+		prev: entry.status === DiffStatus.added ? null : targetOf(entry, table, "prev"),
+		next: entry.status === DiffStatus.deleted ? null : targetOf(entry, table, "next")
+	};
+}
+//#endregion
+export { buildDiffTree, describeEntry, diffTargets, entryNodeId, matchesFilter, statusLabel, statusLetter };

package/dist/components/erd/draw-target/DrawTargetButtons.js

@@ -0,0 +1,284 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { CanvasType } from "../../../constants/schema.js";
+import { onMounted } from "../../../r-html/dist/render/part/node/component/hooks.js";
+import { observer } from "../../../r-html/dist/observable/index.js";
+import { html } from "../../../r-html/dist/render/index.js";
+import { Open } from "../../../constants/open.js";
+import { getActiveView } from "../../../engine/modules/editor/view.js";
+import { getTableRect } from "../../../konva/scene/metrics.js";
+import { getSceneTransform, toScreenPoint } from "../../../konva/scene/viewport.js";
+import { drawEndRelationshipAction } from "../../../engine/modules/editor/atom.actions.js";
+import { getStartKeyColumns } from "../../../engine/modules/relationship/fkColumns.js";
+import { selectTableAction$ } from "../../../engine/modules/table/generator.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { nameOf } from "../../map-columns/nameOf.js";
+import { useI18n } from "../../localeContext.js";
+import Icon from "../../primitives/icon/Icon.js";
+import { isMainButtonPress } from "../../../utils/domEvent.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { openMapColumns } from "../../map-columns/openMapColumns.js";
+import { getLiveTable } from "../../../utils/map-columns/mapping.js";
+import { isTakenOver } from "../../../utils/takeover.js";
+import { button, gutter, layer, outline, pill } from "./DrawTargetButtons.styles.js";
+import { clearDrawTarget, getDrawTarget, updateDrawTarget } from "./drawTargetState.js";
+import { findDrawTarget, hasTravelled } from "./findDrawTarget.js";
+import { getGutterRect, placePill } from "./placePill.js";
+import { fromEvent } from "rxjs";
+//#region src/components/erd/draw-target/DrawTargetButtons.tsx
+var ICON_SIZE = 16;
+var CANVAS_CHROME = [
+	".minimap",
+	".minimap-viewport",
+	".floating-toolbar",
+	".virtual-scroll",
+	".content-compass",
+	".context-menu-content",
+	".color-picker",
+	".edit-overlay"
+].join(", ");
+var OBSTACLES = ".minimap, .floating-toolbar";
+var PILL_INSET = 5;
+var PILL_SIZE = {
+	width: 26 + PILL_INSET * 2,
+	height: 54 + PILL_INSET * 2
+};
+function toScreenRect(state, rect) {
+	const transform = getSceneTransform(state, "document");
+	const topLeft = toScreenPoint(transform, rect);
+	const bottomRight = toScreenPoint(transform, {
+		x: rect.x + rect.width,
+		y: rect.y + rect.height
+	});
+	return {
+		x: topLeft.x,
+		y: topLeft.y,
+		width: bottomRight.x - topLeft.x,
+		height: bottomRight.y - topLeft.y
+	};
+}
+var boxStyle = ({ x, y, width, height }) => ({
+	left: `${x}px`,
+	top: `${y}px`,
+	width: `${width}px`,
+	height: `${height}px`
+});
+var DrawTargetButtons = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const i18n = useI18n(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	let lastPress = null;
+	let followed = null;
+	let touched = false;
+	const canOffer = (state) => {
+		const { editor, settings } = state;
+		return Boolean(editor.drawRelationship?.start) && settings.canvasType === CanvasType.ERD && !props.readonly && !app.value.store.getReadonly() && !editor.handTool && !isTakenOver(state) && !editor.openMap[Open.tableProperties] && !editor.openMap[Open.mapColumns] && !getActiveView(state);
+	};
+	const toRootPoint = (point) => {
+		const $root = props.root.value;
+		if (!$root) return null;
+		const box = $root.getBoundingClientRect();
+		return {
+			x: point.clientX - box.x,
+			y: point.clientY - box.y
+		};
+	};
+	const readObstacles = () => {
+		const $root = props.root.value;
+		if (!$root) return [];
+		const rootBox = $root.getBoundingClientRect();
+		return Array.from($root.querySelectorAll(OBSTACLES)).map((el) => {
+			const box = el.getBoundingClientRect();
+			return {
+				x: box.x - rootBox.x,
+				y: box.y - rootBox.y,
+				width: box.width,
+				height: box.height
+			};
+		});
+	};
+	const layoutOf = (state, tableId) => {
+		const table = getLiveTable(state, tableId);
+		if (!table) return null;
+		const card = toScreenRect(state, getTableRect(state, table));
+		const { viewport } = state.editor;
+		if (!(card.x < viewport.width && card.x + card.width > 0 && card.y < viewport.height && card.y + card.height > 0)) return null;
+		const placement = placePill({
+			card,
+			viewport,
+			obstacles: readObstacles(),
+			pill: PILL_SIZE
+		});
+		return {
+			card,
+			placement,
+			gutter: getGutterRect({
+				card,
+				viewport,
+				placement,
+				pill: PILL_SIZE
+			})
+		};
+	};
+	const toPillRect = ({ x, y }) => ({
+		x,
+		y,
+		...PILL_SIZE
+	});
+	const keepRects = ({ placement, gutter }) => {
+		const buttons = toPillRect(placement);
+		return gutter ? [buttons, gutter] : [buttons];
+	};
+	const follow = () => {
+		const { state } = app.value.store;
+		const start = state.editor.drawRelationship?.start ?? null;
+		if (!start) {
+			if (followed !== null) clearDrawTarget(state);
+			followed = null;
+			return;
+		}
+		if (followed !== start) {
+			followed = start;
+			updateDrawTarget(state, {
+				pressPoint: lastPress,
+				selfArmed: false,
+				targetId: null
+			});
+		}
+		const target = getDrawTarget(state);
+		if (state.settings.canvasType !== CanvasType.ERD) {
+			updateDrawTarget(state, {
+				pointer: null,
+				targetId: null
+			});
+			return;
+		}
+		if (!target.pointer || !canOffer(state)) {
+			updateDrawTarget(state, { targetId: null });
+			return;
+		}
+		const current = target.targetId;
+		const layout = current ? layoutOf(state, current) : null;
+		updateDrawTarget(state, { targetId: findDrawTarget(state, {
+			pointer: target.pointer,
+			startTableId: start.tableId,
+			selfArmed: target.selfArmed,
+			current,
+			keep: layout ? keepRects(layout) : []
+		}) });
+	};
+	const handlePress = (event) => {
+		const point = "touches" in event ? event.touches[0] : event;
+		lastPress = point ? toRootPoint(point) : null;
+	};
+	const dropPointer = () => {
+		const { state } = app.value.store;
+		if (getDrawTarget(state).pointer === null) return;
+		updateDrawTarget(state, { pointer: null });
+	};
+	const handlePointerKind = (event) => {
+		touched = event.pointerType === "touch";
+	};
+	const handlePointerDown = (event) => {
+		handlePointerKind(event);
+		if (touched) dropPointer();
+	};
+	const handlePointerMove = (event) => {
+		const { state } = app.value.store;
+		if (touched || !state.editor.drawRelationship?.start) return;
+		if (event.target?.closest?.(CANVAS_CHROME)) {
+			updateDrawTarget(state, { pointer: null });
+			return;
+		}
+		const pointer = toRootPoint(event);
+		if (!pointer) return;
+		const { pressPoint, selfArmed } = getDrawTarget(state);
+		const from = pressPoint ?? pointer;
+		updateDrawTarget(state, {
+			pointer,
+			pressPoint: from,
+			selfArmed: selfArmed || hasTravelled(from, pointer)
+		});
+	};
+	const handleButtonsPress = (event) => {
+		event.preventDefault();
+	};
+	const handleGutterPress = (event) => {
+		if (!isMainButtonPress(event)) return;
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const handleContextmenu = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+	};
+	const startKeyOf = (state) => {
+		const start = state.editor.drawRelationship?.start;
+		const table = start ? query(state.collections).collection("tableEntities").selectById(start.tableId) : void 0;
+		if (!table) return {
+			table,
+			hasKey: false
+		};
+		return {
+			table,
+			hasKey: getStartKeyColumns(state.collections, table).length > 0
+		};
+	};
+	const handleNew = (tableId) => (event) => {
+		if (!isMainButtonPress(event)) return;
+		const { store } = app.value;
+		if (!startKeyOf(store.state).hasKey) return;
+		store.dispatch(selectTableAction$(tableId, false));
+	};
+	const handleMap = (tableId) => (event) => {
+		if (!isMainButtonPress(event)) return;
+		const { store, emitter } = app.value;
+		const draw = store.state.editor.drawRelationship;
+		const startTableId = draw?.start?.tableId;
+		if (!draw || !startTableId) return;
+		const { tableIds } = store.state.doc;
+		if (!tableIds.includes(startTableId) || !tableIds.includes(tableId)) {
+			store.dispatch(drawEndRelationshipAction());
+			return;
+		}
+		const { relationshipType } = draw;
+		store.dispatchSync(drawEndRelationshipAction());
+		openMapColumns({
+			store,
+			emitter
+		}, {
+			mode: "create",
+			startTableId,
+			endTableId: tableId,
+			relationshipType
+		});
+	};
+	onMounted(() => {
+		const $root = props.root.value;
+		const { store } = app.value;
+		addUnsubscribe(fromEvent($root, "mousedown", { capture: true }).subscribe(handlePress), fromEvent($root, "touchstart", { capture: true }).subscribe(handlePress), fromEvent($root, "pointerdown", { capture: true }).subscribe(handlePointerDown), fromEvent($root, "pointermove", { capture: true }).subscribe(handlePointerKind), fromEvent($root, "mousemove").subscribe(handlePointerMove), fromEvent($root, "mouseleave").subscribe(dropPointer), observer(follow), () => clearDrawTarget(store.state));
+	});
+	return () => {
+		const { state } = app.value.store;
+		if (!canOffer(state)) return null;
+		const tableId = getDrawTarget(state).targetId;
+		if (!tableId) return null;
+		const layout = layoutOf(state, tableId);
+		if (!layout) return null;
+		const { card, placement, gutter: gutter$1 } = layout;
+		const start = startKeyOf(state);
+		const { t } = i18n.value;
+		const mapTitle = t("mapColumns.mapToExisting");
+		const newTitle = start.hasKey ? t("mapColumns.createNew") : t("mapColumns.noPrimaryKeyToCopy", { table: nameOf(start.table, i18n.value, state.settings) });
+		return html`<div class=${["draw-target-layer", layer]}><div class=${["draw-target-outline", outline]} style=${boxStyle(card)}></div>${gutter$1 ? html`<div class=${[
+			"draw-target",
+			"draw-target-gutter",
+			gutter
+		]} style=${boxStyle(gutter$1)} @mousedown=${handleGutterPress} @contextmenu=${handleContextmenu}></div>` : null}<div class=${[
+			"draw-target",
+			"draw-target-buttons",
+			pill
+		]} data-side=${placement.side} style=${boxStyle(toPillRect(placement))} @mousedown=${handleButtonsPress} @contextmenu=${handleContextmenu}><button class=${["draw-target-map", button]} type="button" tabindex="-1" title=${mapTitle} aria-label=${mapTitle} @click=${handleMap(tableId)}><${Icon} .name="link" .size=${ICON_SIZE} /></button><button class=${["draw-target-new", button]} type="button" tabindex="-1" title=${newTitle} aria-label=${newTitle} aria-disabled=${String(!start.hasKey)} @click=${handleNew(tableId)}><${Icon} .name="plus" .size=${ICON_SIZE} /></button></div></div>`;
+	};
+};
+//#endregion
+export { PILL_SIZE, DrawTargetButtons as default };

package/dist/components/erd/draw-target/DrawTargetButtons.styles.js

@@ -0,0 +1,64 @@
+import { css } from "../../../r-html/dist/template/css.js";
+var layer = css`
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+`;
+var outline = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border: 2px solid var(--key-fk);
+  border-radius: 4px;
+  pointer-events: none;
+`;
+var gutter = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+`;
+var pill = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: ${4}px;
+  gap: ${2}px;
+  border: ${1}px solid var(--toast-border);
+  border-radius: 6px;
+  background-color: var(--toast-background);
+  box-shadow: 0 1px 6px -3px var(--minimap-shadow);
+  pointer-events: auto;
+`;
+var button = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${26}px;
+  height: ${26}px;
+  padding: 0;
+  border-radius: 6px;
+  color: var(--foreground);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--active);
+    background-color: var(--gray-color-3);
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.4;
+    color: var(--foreground);
+    background-color: transparent;
+  }
+`;
+//#endregion
+export { button, gutter, layer, outline, pill };

package/dist/components/erd/draw-target/drawTargetState.js

@@ -0,0 +1,37 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { sceneKeyOf } from "../../../konva/scene/viewFreeze.js";
+//#region src/components/erd/draw-target/drawTargetState.ts
+var state = observable({ targets: {} });
+var keyOf = (root) => sceneKeyOf(root, "document");
+var EMPTY = {
+	pointer: null,
+	pressPoint: null,
+	selfArmed: false,
+	targetId: null
+};
+var isPoint = (value) => typeof value === "object" && value !== null;
+var isSame = (a, b) => a === b || isPoint(a) && isPoint(b) && a.x === b.x && a.y === b.y;
+function getDrawTarget(root) {
+	return state.targets[keyOf(root)] ?? EMPTY;
+}
+function updateDrawTarget(root, patch) {
+	const key = keyOf(root);
+	const target = state.targets[key];
+	if (!target) {
+		state.targets[key] = {
+			...EMPTY,
+			...patch
+		};
+		return;
+	}
+	for (const name of Object.keys(patch)) {
+		if (isSame(target[name], patch[name])) continue;
+		Reflect.set(target, name, patch[name]);
+	}
+}
+function clearDrawTarget(root) {
+	if (!(keyOf(root) in state.targets)) return;
+	Reflect.deleteProperty(state.targets, keyOf(root));
+}
+//#endregion
+export { clearDrawTarget, getDrawTarget, updateDrawTarget };

package/dist/components/erd/draw-target/findDrawTarget.js

@@ -0,0 +1,22 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { getVisibleIds } from "../../../konva/scene/viewLayout.js";
+import { getMemoRect, getTableRect } from "../../../konva/scene/metrics.js";
+import { getCullingRect, getSceneTransform, isMemoVisible, isTableVisible, toScenePoint } from "../../../konva/scene/viewport.js";
+import { stackTablesAndMemos } from "../../../konva/scene/stacking.js";
+var hasTravelled = (from, to) => Math.hypot(to.x - from.x, to.y - from.y) >= 24;
+var containsPoint = (rect, { x, y }) => x >= rect.x && x <= rect.x + rect.width && y >= rect.y && y <= rect.y + rect.height;
+function findDrawTarget(state, { pointer, startTableId, selfArmed, current, keep }) {
+	const { doc, collections } = state;
+	if (current && doc.tableIds.includes(current) && keep.some((rect) => containsPoint(rect, pointer))) return current;
+	const scene = toScenePoint(getSceneTransform(state, "document"), pointer);
+	const culling = getCullingRect(state, "document");
+	const tables = query(collections).collection("tableEntities").selectByIds(doc.tableIds).filter((table) => isTableVisible(culling, state, table) && containsPoint(getTableRect(state, table), scene));
+	const memos = query(collections).collection("memoEntities").selectByIds(getVisibleIds(state).memoIds).filter((memo) => isMemoVisible(culling, memo) && containsPoint(getMemoRect(memo), scene));
+	const stack = stackTablesAndMemos(tables, memos);
+	const top = stack[stack.length - 1];
+	if (top?.kind !== "table") return null;
+	if (top.entity.id === startTableId && !selfArmed) return null;
+	return top.entity.id;
+}
+//#endregion
+export { containsPoint, findDrawTarget, hasTravelled };

package/dist/components/erd/draw-target/placePill.js

@@ -0,0 +1,72 @@
+var overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+function getVisibleSpan(card, viewport) {
+	return {
+		top: Math.max(card.y, 8),
+		bottom: Math.min(card.y + card.height, viewport.height - 8)
+	};
+}
+function placePill({ card, viewport, obstacles, pill }) {
+	const span = getVisibleSpan(card, viewport);
+	const y = Math.min(span.top, Math.max(8, viewport.height - 8 - pill.height));
+	const left = card.x - 8 - pill.width;
+	const right = card.x + card.width + 8;
+	const sides = [];
+	if (left >= 8) sides.push(["left", left]);
+	if (right + pill.width <= viewport.width - 8) sides.push(["right", right]);
+	if (!sides.length) return {
+		x: 8,
+		y,
+		side: "left"
+	};
+	const boxAt = (x, top) => ({
+		x,
+		y: top,
+		width: pill.width,
+		height: pill.height
+	});
+	const isClear = (x, top) => !obstacles.some((obstacle) => overlaps(boxAt(x, top), obstacle));
+	const canStand = (top) => {
+		const middle = top + pill.height / 2;
+		return middle >= span.top && middle <= span.bottom && top >= 8 && top + pill.height <= viewport.height - 8;
+	};
+	const settle = (x) => {
+		if (isClear(x, y)) return y;
+		for (const obstacle of obstacles) {
+			if (!overlaps(boxAt(x, y), obstacle)) continue;
+			const below = obstacle.y + obstacle.height;
+			if (canStand(below) && isClear(x, below)) return below;
+			const above = obstacle.y - pill.height;
+			if (canStand(above) && isClear(x, above)) return above;
+		}
+		return null;
+	};
+	for (const [side, x] of sides) {
+		const top = settle(x);
+		if (top !== null) return {
+			x,
+			y: top,
+			side
+		};
+	}
+	const [side, x] = sides[0];
+	return {
+		x,
+		y,
+		side
+	};
+}
+function getGutterRect({ card, viewport, placement, pill }) {
+	const span = getVisibleSpan(card, viewport);
+	const top = Math.min(span.top, placement.y);
+	const bottom = Math.max(span.bottom, placement.y + pill.height);
+	const [start, end] = placement.side === "left" ? [placement.x - 4, card.x] : [card.x + card.width, placement.x + pill.width + 4];
+	if (end <= start || bottom <= top) return null;
+	return {
+		x: start,
+		y: top,
+		width: end - start,
+		height: bottom - top
+	};
+}
+//#endregion
+export { getGutterRect, getVisibleSpan, placePill };

package/dist/components/erd/erd-context-menu/ErdContextMenu.d.ts

@@ -8,6 +8,12 @@ export declare const ErdContextMenuType: {
     readonly tableGroup: "tableGroup";
 };
 export type ErdContextMenuType = ValuesType<typeof ErdContextMenuType>;
+/**
+ * The menus that keep rows for a readonly reader, the canvas's and a table's.
+ * Any other would stand empty, so the ERD tab raises none of them while
+ * readonly and takes one already open away as the editor turns readonly.
+ */
+export declare const READING_MENU_TYPES: ReadonlySet<ErdContextMenuType>;
 export type ErdContextMenuProps = {
     type: ErdContextMenuType;
     relationshipId?: string;