@dineug/erd-editor 4.2.0 → 5.0.0

package/dist/components/erd/hitTest.js

@@ -0,0 +1,115 @@
+import { isMainButtonPress } from "../../utils/domEvent.js";
+import { stages } from "konva/lib/Stage";
+//#region src/components/erd/hitTest.ts
+var ENTITY_KINDS = /* @__PURE__ */ new Map([
+	["table", "table"],
+	["memo", "memo"],
+	["relationship", "relationship"],
+	["table-group", "tableGroup"],
+	["table-group-body", "tableGroup"]
+]);
+var TABLE_GROUP_PARTS = /* @__PURE__ */ new Map([
+	["table-group-title", "title"],
+	["table-group-body", "body"],
+	["table-group-sash", "sash"]
+]);
+var COLUMN_ROW_KIND = "column-row";
+var COLUMN_ROW_ID_PREFIX = "column-";
+function findStage(container) {
+	return stages.find((stage) => stage.container() === container) ?? null;
+}
+function pointOf(evt) {
+	const mouse = evt;
+	if (typeof mouse.clientX === "number") return {
+		x: mouse.clientX,
+		y: mouse.clientY
+	};
+	const touch = evt.touches?.[0];
+	return touch ? {
+		x: touch.clientX,
+		y: touch.clientY
+	} : null;
+}
+var samePoint = (a, b) => Boolean(a && b && a.x === b.x && a.y === b.y);
+var trackedHits = /* @__PURE__ */ new WeakMap();
+var HIT_EVENTS = "mousedown.sceneHit touchstart.sceneHit contextmenu.sceneHit";
+function trackSceneHits(stage) {
+	const record = (event) => {
+		const evt = event.evt;
+		const point = pointOf(evt);
+		const previous = trackedHits.get(stage);
+		const hit = evt.type === "contextmenu" && samePoint(previous?.point, point) ? previous?.hit ?? null : event.target === stage ? null : entityUnder(event.target);
+		trackedHits.set(stage, {
+			evt,
+			hit,
+			point
+		});
+	};
+	stage.on(HIT_EVENTS, record);
+	return () => {
+		stage.off(HIT_EVENTS);
+		trackedHits.delete(stage);
+	};
+}
+function entityId(node, kind) {
+	const prefix = `${kind}-`;
+	const id = node.id();
+	if (id.startsWith(prefix)) return id.slice(prefix.length);
+	const [first, second = ""] = node.name().split(/\s+/);
+	return first === kind ? second : "";
+}
+function entityUnder(target) {
+	let node = target;
+	let columnId = "";
+	let part = "body";
+	while (node) {
+		const label = node.getAttr("kind");
+		if (label === COLUMN_ROW_KIND && node.id().startsWith(COLUMN_ROW_ID_PREFIX)) columnId = node.id().slice(7);
+		part = TABLE_GROUP_PARTS.get(label) ?? part;
+		const kind = ENTITY_KINDS.get(label);
+		if (kind) {
+			const id = entityId(node, label);
+			if (kind === "tableGroup") return {
+				kind,
+				id,
+				part
+			};
+			return kind === "table" && columnId ? {
+				kind,
+				id,
+				columnId
+			} : {
+				kind,
+				id
+			};
+		}
+		node = node.getParent();
+	}
+	return null;
+}
+var HOVER_EVENTS = "mouseover.sceneHover mouseleave.sceneHover";
+function listenSceneHover(container, onHover) {
+	const stage = findStage(container);
+	if (!stage) return () => {};
+	stage.on(HOVER_EVENTS, (event) => {
+		onHover(event.target === stage ? null : entityUnder(event.target));
+	});
+	return () => {
+		stage.off(HOVER_EVENTS);
+	};
+}
+function ownsPress(hit, event) {
+	if (hit?.kind === "table" || hit?.kind === "memo") return true;
+	if (hit?.kind !== "tableGroup") return false;
+	return hit.part !== "body" || !isMainButtonPress(event);
+}
+function sceneHit(container, event) {
+	const target = event.target;
+	if (!container || !(target instanceof Element) || !container.contains(target)) return null;
+	const stage = findStage(container);
+	if (!stage) return null;
+	const tracked = trackedHits.get(stage);
+	return tracked && tracked.evt === event ? tracked.hit : null;
+}
+//#endregion
+export { listenSceneHover, ownsPress, sceneHit, trackSceneHits };

package/dist/components/erd/minimap/Minimap.js

@@ -0,0 +1,98 @@
+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 { sceneScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { MINIMAP_STAGE_NAME, renderKonva } from "../../../r-html-konva/dist/host.js";
+import { isMouseEvent } from "../../../utils/domEvent.js";
+import { useSceneActive } from "../../sceneInteractionContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import "../../../konva/testHandle.js";
+import { root } from "../canvas/Canvas.styles.js";
+import { fromMinimapPoint, getMinimapLayout, getScrollToCenter, getViewTransform } from "./minimapGeometry.js";
+import { renderMinimapScene } from "./MinimapScene.js";
+import { useMinimapScroll } from "./useMinimapScroll.js";
+import Viewport from "./viewport/Viewport.js";
+import { border, minimap } from "./Minimap.styles.js";
+import { Stage } from "konva/lib/Stage";
+//#region src/components/erd/minimap/Minimap.tsx
+var BORDER = 1;
+var Minimap = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const minimap$1 = createRef();
+	const canvas = createRef();
+	const { state, onScrollStart } = useMinimapScroll(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const active = useSceneActive(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	let stage = null;
+	const getLayout = () => getMinimapLayout(app.value.store.state, sourceRef.value);
+	const styleMap = ({ box, offset }) => ({
+		width: `${box.width}px`,
+		height: `${box.height}px`,
+		right: `${20 + offset.x}px`,
+		top: `${20 + offset.y}px`
+	});
+	const sceneStyleMap = ({ box }) => ({
+		width: `${box.width}px`,
+		height: `${box.height}px`
+	});
+	const borderStyleMap = () => {
+		const margin = 20 - BORDER;
+		return {
+			width: `150px`,
+			height: `150px`,
+			right: `${margin}px`,
+			top: `${margin}px`
+		};
+	};
+	const fitStage = ({ box }) => {
+		if (!stage) return;
+		if (stage.width() === box.width && stage.height() === box.height) return;
+		stage.size(box);
+	};
+	const handleMove = (event) => {
+		if (!isMouseEvent(event) && !active.value()) return;
+		if (!isMouseEvent(event)) event.preventDefault();
+		const { store } = app.value;
+		const layout = getLayout();
+		const rect = minimap$1.value.getBoundingClientRect();
+		const clientX = isMouseEvent(event) ? event.clientX : event.touches[0].clientX;
+		const clientY = isMouseEvent(event) ? event.clientY : event.touches[0].clientY;
+		const center = fromMinimapPoint(layout, {
+			x: clientX - rect.x,
+			y: clientY - rect.y
+		});
+		const source = sourceRef.value;
+		const origin = getScrollToCenter(getViewTransform(store.state, source), center);
+		store.dispatchSync(sceneScrollToAction(source, {
+			originX: origin.x,
+			originY: origin.y
+		}));
+		onScrollStart(event);
+	};
+	onMounted(() => {
+		const { box } = getLayout();
+		const $stage = new Stage({
+			container: canvas.value,
+			name: MINIMAP_STAGE_NAME,
+			width: box.width,
+			height: box.height
+		});
+		stage = $stage;
+		renderMinimapScene($stage);
+		addUnsubscribe(() => {
+			stage = null;
+			renderKonva($stage, null);
+			$stage.destroy();
+		});
+	});
+	return () => {
+		const layout = getLayout();
+		fitStage(layout);
+		return html`<div class=${["minimap-border", border]} style=${borderStyleMap()}></div><div class=${["minimap", minimap]} .dir="ltr" style=${styleMap(layout)} ${ref(minimap$1)} @mousedown=${handleMove} @touchstart=${handleMove}><div class=${root} style=${sceneStyleMap(layout)} ${ref(canvas)}></div></div><${Viewport} .selected=${state.selected} />`;
+	};
+};
+//#endregion
+export { Minimap as default };

package/dist/components/erd/minimap/Minimap.styles.js

@@ -0,0 +1,29 @@
+import { css } from "../../../r-html/dist/template/css.js";
+//#region src/components/erd/minimap/Minimap.styles.ts
+var minimap = css`
+  position: absolute;
+  overflow: hidden;
+  /*
+   * The minimap redraws its own copy of the document on every table move, and
+   * it sits over the canvas that is redrawing at the same time. Promoting the
+   * minimap keeps the two out of one invalidated region: measured 50ms to
+   * 16.7ms per frame over a 56-table document, with main-thread blocking down
+   * by more than a third. See e2e/bench/attribution.bench.ts.
+   */
+  will-change: transform;
+`;
+var border = css`
+  position: absolute;
+  box-sizing: content-box;
+  pointer-events: none;
+  border: 1px solid var(--minimap-border);
+  /*
+   * Drawn back from the edge by the negative spread, so what lands is the soft
+   * end of the blur rather than the ink beside it: the shadow colour is an
+   * opaque black, and the dom minimap only ever showed it through a css scale.
+   */
+  box-shadow: 0 1px 6px -3px var(--minimap-shadow);
+  background-color: var(--canvas-boundary-background);
+`;
+//#endregion
+export { border, minimap };

package/dist/components/erd/minimap/MinimapScene.js

@@ -0,0 +1,41 @@
+import { query } from "../../../erd-editor-schema/dist/query/index.js";
+import { repeat } from "../../../r-html/dist/render/directives/node/repeat.js";
+import { isMemoShown } from "../../../utils/memo.js";
+import { getVisibleIds } from "../../../konva/scene/viewLayout.js";
+import { isTableGroupShown } from "../../../utils/tableGroup.js";
+import { useAppContext } from "../../appContext.js";
+import { konva, renderKonva } from "../../../r-html-konva/dist/host.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { createTableGroupMemberLists } from "../canvas/table-group/tableGroupBox.js";
+import { stackTablesAndMemos, stackedKey } from "../../../konva/scene/stacking.js";
+import { getMinimapLayout, toMinimapPoint } from "./minimapGeometry.js";
+import Memo from "./memo/Memo.js";
+import Table from "./table/Table.js";
+import TableGroup from "./table-group/TableGroup.js";
+//#region src/components/erd/minimap/MinimapScene.tsx
+var byZIndex = (a, b) => a.ui.zIndex - b.ui.zIndex;
+var MinimapScene = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const memberLists = createTableGroupMemberLists();
+	return () => {
+		const { store } = app.value;
+		const { doc, collections } = store.state;
+		const source = sourceRef.value;
+		const { tableIds, memoIds, tableGroupIds } = source === "document" ? doc : getVisibleIds(store.state, source);
+		const groups = tableGroupIds.length && isTableGroupShown(store.state) ? query(collections).collection("tableGroupEntities").selectByIds(tableGroupIds).sort(byZIndex) : [];
+		const membersOf = groups.length ? memberLists(store.state) : () => [];
+		const stack = stackTablesAndMemos(query(collections).collection("tableEntities").selectByIds(tableIds), isMemoShown(store.state) ? query(collections).collection("memoEntities").selectByIds(memoIds) : []);
+		const layout = getMinimapLayout(store.state, source);
+		const place = toMinimapPoint(layout, {
+			x: 0,
+			y: 0
+		});
+		return konva`<k-layer name="minimap-scene" listening=${false} scaleX=${layout.ratio} scaleY=${layout.ratio} x=${place.x} y=${place.y}>${repeat(groups, (group) => group.id, (group) => konva`<${TableGroup} .group=${group} .members=${membersOf(group.id)} .ratio=${layout.ratio} />`)}${repeat(stack, stackedKey, (item) => item.kind === "table" ? konva`<${Table} .table=${item.entity} .ratio=${layout.ratio} />` : konva`<${Memo} .memo=${item.entity} .ratio=${layout.ratio} />`)}</k-layer>`;
+	};
+};
+function renderMinimapScene(stage) {
+	renderKonva(stage, konva`<${MinimapScene} />`);
+}
+//#endregion
+export { MinimapScene as default, renderMinimapScene };

package/dist/components/erd/minimap/memo/Memo.js

@@ -0,0 +1,17 @@
+import { getMemoRect } from "../../../../konva/scene/metrics.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { getMinimapMarkRect } from "../minimapGeometry.js";
+//#region src/components/erd/minimap/memo/Memo.tsx
+var CORNER_RADIUS = 6;
+var Memo = (props, ctx) => {
+	const themeRef = useThemeContext(ctx);
+	return () => {
+		const { memo, ratio } = props;
+		const theme = themeRef.value;
+		const rect = getMinimapMarkRect(ratio, getMemoRect(memo));
+		return konva`<k-rect name=${`minimap-memo ${memo.id}`} kind="minimap-memo" x=${rect.x + 1 / 2} y=${rect.y + 1 / 2} width=${rect.width - 1} height=${rect.height - 1} cornerRadius=${CORNER_RADIUS} fill=${theme.memoBackground} stroke=${theme.memoBorder} strokeWidth=${1} />`;
+	};
+};
+//#endregion
+export { Memo as default };

package/dist/components/erd/minimap/minimapGeometry.js

@@ -0,0 +1,140 @@
+import { unionRect } from "../../../konva/scene/metrics.js";
+import { getSceneOrigin, getSceneTransform } from "../../../konva/scene/viewport.js";
+import { getViewContentRect } from "../../../konva/scene/viewFreeze.js";
+import { getScrollRanges } from "../../../engine/modules/settings/atom.actions.js";
+var safeZoom = (zoomLevel) => zoomLevel > 0 ? zoomLevel : 1;
+var unsigned = (value) => value + 0;
+function getViewTransform(state, source = "document") {
+	const { originX, originY, zoomLevel } = getSceneTransform(state, source);
+	const { viewport } = state.editor;
+	return {
+		originX,
+		originY,
+		zoomLevel,
+		viewportWidth: viewport.width,
+		viewportHeight: viewport.height
+	};
+}
+function getVisibleCanvasRect(view) {
+	const zoomLevel = safeZoom(view.zoomLevel);
+	const origin = getSceneOrigin({
+		...view,
+		zoomLevel
+	});
+	return {
+		x: unsigned(-origin.x / zoomLevel),
+		y: unsigned(-origin.y / zoomLevel),
+		width: view.viewportWidth / zoomLevel,
+		height: view.viewportHeight / zoomLevel
+	};
+}
+var inflate = (rect, margin) => ({
+	x: rect.x - margin,
+	y: rect.y - margin,
+	width: rect.width + margin * 2,
+	height: rect.height + margin * 2
+});
+var snapOutward = (rect, step) => {
+	const x = unsigned(Math.floor(rect.x / step) * step);
+	const y = unsigned(Math.floor(rect.y / step) * step);
+	return {
+		x,
+		y,
+		width: Math.ceil((rect.x + rect.width) / step) * step - x,
+		height: Math.ceil((rect.y + rect.height) / step) * step - y
+	};
+};
+var growToLeast = (rect, length) => {
+	const width = Math.max(rect.width, length);
+	const height = Math.max(rect.height, length);
+	return {
+		x: rect.x - (width - rect.width) / 2,
+		y: rect.y - (height - rect.height) / 2,
+		width,
+		height
+	};
+};
+function getReachRect(view, { left, top }) {
+	const at = (originX, originY) => getVisibleCanvasRect({
+		...view,
+		originX,
+		originY
+	});
+	return unionRect(at(left.max, top.max), at(left.min, top.min));
+}
+function getMinimapLayout(state, source = "document") {
+	const reach = getReachRect(getViewTransform(state, source), getScrollRanges(state, source));
+	const content = getViewContentRect(state, source);
+	const snapped = snapOutward(inflate(content ? unionRect(content, reach) : reach, 100), 500);
+	const ratio = 150 / Math.max(snapped.width, snapped.height);
+	const map = snapOutward(growToLeast(snapped, 30 / ratio), 500);
+	const box = {
+		width: map.width * ratio,
+		height: map.height * ratio
+	};
+	return {
+		map,
+		ratio,
+		box,
+		offset: {
+			x: (150 - box.width) / 2,
+			y: (150 - box.height) / 2
+		}
+	};
+}
+function toMinimapPoint({ map, ratio }, point) {
+	return {
+		x: unsigned((point.x - map.x) * ratio),
+		y: unsigned((point.y - map.y) * ratio)
+	};
+}
+function fromMinimapPoint({ map, ratio }, point) {
+	return {
+		x: map.x + point.x / ratio,
+		y: map.y + point.y / ratio
+	};
+}
+function getMinimapViewportRect(layout, view) {
+	const visible = getVisibleCanvasRect(view);
+	const corner = toMinimapPoint(layout, visible);
+	return {
+		x: corner.x,
+		y: corner.y,
+		width: visible.width * layout.ratio,
+		height: visible.height * layout.ratio
+	};
+}
+function getMinimapMarkRect(ratio, rect) {
+	return growToLeast(rect, 3 / ratio);
+}
+function getMinimapHandleRect(layout, view) {
+	const rect = growToLeast(getMinimapViewportRect(layout, view), 3);
+	const { box } = layout;
+	const x = Math.min(Math.max(rect.x, 0), box.width);
+	const y = Math.min(Math.max(rect.y, 0), box.height);
+	const right = Math.min(rect.x + rect.width, box.width);
+	const bottom = Math.min(rect.y + rect.height, box.height);
+	if (x === rect.x && y === rect.y && right === rect.x + rect.width && bottom === rect.y + rect.height) return rect;
+	return {
+		x,
+		y,
+		width: Math.max(right - x, 0),
+		height: Math.max(bottom - y, 0)
+	};
+}
+function toScrollDistance(distance, zoomLevel) {
+	return unsigned(-distance * safeZoom(zoomLevel));
+}
+function toScrollMovement(movement, ratio, zoomLevel) {
+	return toScrollDistance(movement / ratio, zoomLevel);
+}
+function getScrollToCenter(view, center) {
+	const { zoomLevel, originX, originY } = view;
+	const rect = getVisibleCanvasRect(view);
+	return {
+		x: originX + toScrollDistance(center.x - rect.width / 2 - rect.x, zoomLevel),
+		y: originY + toScrollDistance(center.y - rect.height / 2 - rect.y, zoomLevel)
+	};
+}
+//#endregion
+export { fromMinimapPoint, getMinimapHandleRect, getMinimapLayout, getMinimapMarkRect, getMinimapViewportRect, getReachRect, getScrollToCenter, getViewTransform, getVisibleCanvasRect, toMinimapPoint, toScrollDistance, toScrollMovement };

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

@@ -0,0 +1,22 @@
+import { getTableRect } from "../../../../konva/scene/metrics.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { getMinimapMarkRect } from "../minimapGeometry.js";
+//#region src/components/erd/minimap/table/Table.tsx
+var CORNER_RADIUS = 6;
+var Table = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	return () => {
+		const { store } = app.value;
+		const { table, ratio } = props;
+		const theme = themeRef.value;
+		const rect = getMinimapMarkRect(ratio, getTableRect(store.state, table, sourceRef.value));
+		return konva`<k-rect name="minimap-table" kind="minimap-table" tableId=${table.id} x=${rect.x + 1 / 2} y=${rect.y + 1 / 2} width=${rect.width - 1} height=${rect.height - 1} cornerRadius=${CORNER_RADIUS} fill=${table.ui.color || theme.tableBackground} stroke=${theme.tableBorder} strokeWidth=${1} />`;
+	};
+};
+//#endregion
+export { Table as default };

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

@@ -0,0 +1,22 @@
+import { getTableGroupColors } from "../../../../utils/tableGroup.js";
+import { useAppContext } from "../../../appContext.js";
+import { konva } from "../../../../r-html-konva/dist/host.js";
+import { useThemeContext } from "../../../themeContext.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { getDrawnTableGroupRect } from "../../canvas/table-group/tableGroupBox.js";
+import { getMinimapMarkRect } from "../minimapGeometry.js";
+//#region src/components/erd/minimap/table-group/TableGroup.tsx
+var FILL_OPACITY = .4;
+var TableGroup = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const themeRef = useThemeContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	return () => {
+		const { store } = app.value;
+		const { group, members, ratio } = props;
+		const rect = getMinimapMarkRect(ratio, getDrawnTableGroupRect(store.state, group, sourceRef.value, members));
+		return konva`<k-rect name=${`minimap-table-group ${group.id}`} kind="minimap-table-group" x=${rect.x} y=${rect.y} width=${rect.width} height=${rect.height} fill=${getTableGroupColors(group)?.background ?? themeRef.value.tableGroupHeaderBackground} opacity=${FILL_OPACITY} />`;
+	};
+};
+//#endregion
+export { TableGroup as default };

package/dist/components/erd/minimap/useMinimapScroll.js

@@ -0,0 +1,83 @@
+import { observable } from "../../../r-html/dist/observable/index.js";
+import { getSceneTransform } from "../../../konva/scene/viewport.js";
+import { freezeView, thawView } from "../../../konva/scene/viewFreeze.js";
+import { clampScrollMovement, getScrollRanges, sceneStreamScrollToAction } from "../../../engine/modules/settings/atom.actions.js";
+import { useAppContext } from "../../appContext.js";
+import { isMouseEvent } from "../../../utils/domEvent.js";
+import { drag$ } from "../../../utils/globalEventObservable.js";
+import { useSceneActive } from "../../sceneInteractionContext.js";
+import { useUnmounted } from "../../../hooks/useUnmounted.js";
+import { useSceneSource } from "../../sceneSourceContext.js";
+import { getMinimapLayout, toScrollMovement } from "./minimapGeometry.js";
+//#region src/components/erd/minimap/useMinimapScroll.ts
+var takeMovement = (movement, pointer, start, origin, { min, max }) => {
+	const backwards = movement < 0;
+	return (backwards ? origin < max : origin > min) && (backwards ? pointer < start : pointer > start) ? movement : 0;
+};
+function useMinimapScroll(ctx) {
+	const app = useAppContext(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const active = useSceneActive(ctx);
+	const { addUnsubscribe } = useUnmounted();
+	const state = observable({ selected: false });
+	let clientX = 0;
+	let clientY = 0;
+	let drag = null;
+	addUnsubscribe(() => drag?.unsubscribe());
+	const absoluteMovement = (movement) => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const { zoomLevel } = getSceneTransform(store.state, source);
+		return toScrollMovement(movement, getMinimapLayout(store.state, source).ratio, zoomLevel);
+	};
+	const getMovementX = ({ movementX, x }) => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const movement = takeMovement(movementX, x, clientX, getSceneTransform(store.state, source).originX, getScrollRanges(store.state, source).left);
+		clientX += movement;
+		return movement;
+	};
+	const getMovementY = ({ movementY, y }) => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const movement = takeMovement(movementY, y, clientY, getSceneTransform(store.state, source).originY, getScrollRanges(store.state, source).top);
+		clientY += movement;
+		return movement;
+	};
+	const handleScroll = (dragMove) => {
+		const { event } = dragMove;
+		event.type === "mousemove" && event.preventDefault();
+		const movementX = getMovementX(dragMove);
+		const movementY = getMovementY(dragMove);
+		if (movementX === 0 && movementY === 0) return;
+		const { store } = app.value;
+		const source = sourceRef.value;
+		store.dispatch(sceneStreamScrollToAction(source, clampScrollMovement(store.state, {
+			movementX: absoluteMovement(movementX),
+			movementY: absoluteMovement(movementY)
+		}, source)));
+	};
+	const onScrollStart = (event) => {
+		if (!isMouseEvent(event) && !active.value()) return;
+		if (!isMouseEvent(event)) event.preventDefault();
+		const { store } = app.value;
+		state.selected = true;
+		clientX = isMouseEvent(event) ? event.clientX : event.touches[0].clientX;
+		clientY = isMouseEvent(event) ? event.clientY : event.touches[0].clientY;
+		const source = sourceRef.value;
+		freezeView(store.state, source);
+		const subscription = drag$.subscribe(handleScroll);
+		subscription.add(() => {
+			if (drag === subscription) drag = null;
+			state.selected = false;
+			thawView(store.state, source);
+		});
+		drag = subscription;
+	};
+	return {
+		state,
+		onScrollStart
+	};
+}
+//#endregion
+export { useMinimapScroll };

package/dist/components/erd/minimap/viewport/Viewport.js

@@ -0,0 +1,34 @@
+import { html } from "../../../../r-html/dist/render/index.js";
+import { useAppContext } from "../../../appContext.js";
+import { useSceneSource } from "../../../sceneSourceContext.js";
+import { getMinimapHandleRect, getMinimapLayout, getViewTransform } from "../minimapGeometry.js";
+import { useMinimapScroll } from "../useMinimapScroll.js";
+import { viewport } from "./Viewport.styles.js";
+//#region src/components/erd/minimap/viewport/Viewport.tsx
+var Viewport = (props, ctx) => {
+	const app = useAppContext(ctx);
+	const { state, onScrollStart } = useMinimapScroll(ctx);
+	const sourceRef = useSceneSource(ctx);
+	const styleMap = () => {
+		const { store } = app.value;
+		const source = sourceRef.value;
+		const layout = getMinimapLayout(store.state, source);
+		const rect = getMinimapHandleRect(layout, getViewTransform(store.state, source));
+		const { box, offset } = layout;
+		const top = 20 + offset.y + rect.y;
+		const right = 20 + offset.x + (box.width - rect.x - rect.width);
+		return {
+			width: `${rect.width}px`,
+			height: `${rect.height}px`,
+			right: `${right}px`,
+			top: `${top}px`
+		};
+	};
+	return () => html`<div class=${[
+		"minimap-viewport",
+		viewport,
+		{ selected: state.selected || props.selected }
+	]} style=${styleMap()} data-focus-border @mousedown=${onScrollStart} @touchstart=${onScrollStart}></div>`;
+};
+//#endregion
+export { Viewport as default };

package/dist/components/erd/minimap/viewport/Viewport.styles.js

@@ -0,0 +1,17 @@
+import { css } from "../../../../r-html/dist/template/css.js";
+//#region src/components/erd/minimap/viewport/Viewport.styles.ts
+var viewport = css`
+  position: absolute;
+  border: solid 1.5px var(--minimap-viewport-border);
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--minimap-viewport-border-hover);
+  }
+
+  &.selected {
+    border-color: var(--minimap-viewport-border-hover);
+  }
+`;
+//#endregion
+export { viewport };

package/dist/components/erd/nameViewOptions.d.ts

@@ -0,0 +1,11 @@
+import { NameViewMode } from '../../constants/schema';
+import { PlainMessageKey } from '../../i18n/translate';
+import { ValuesType } from '../../internal-types';
+type NameViewOption = {
+    labelKey: PlainMessageKey;
+    value: ValuesType<typeof NameViewMode>;
+};
+/** The three name views, by the name a reader picks each one by. */
+export declare const nameViewOptions: ReadonlyArray<NameViewOption>;
+export {};
+//# sourceMappingURL=nameViewOptions.d.ts.map

package/dist/components/erd/nameViewOptions.js

@@ -0,0 +1,18 @@
+import { NameViewMode } from "../../constants/schema.js";
+//#region src/components/erd/nameViewOptions.ts
+var nameViewOptions = [
+	{
+		labelKey: "common.physicalNames",
+		value: NameViewMode.physical
+	},
+	{
+		labelKey: "common.logicalNames",
+		value: NameViewMode.logical
+	},
+	{
+		labelKey: "common.bothNames",
+		value: NameViewMode.both
+	}
+];
+//#endregion
+export { nameViewOptions };

package/dist/components/erd/readerNameView.js

@@ -0,0 +1,5 @@
+import { toNameViewModeAction } from "../../engine/modules/settings/atom.actions.js";
+//#region src/components/erd/readerNameView.ts
+var readerNameViewAction = (opened, reader) => toNameViewModeAction(opened, reader.settings.nameViewMode, true);
+//#endregion
+export { readerNameViewAction };