@dineug/erd-editor 3.7.0 → 3.9.0

package/dist/components/visualization/visualizationView.d.ts

@@ -1,5 +1,8 @@
+import { ContentCompass } from '../erd/content-compass/compassGeometry';
+import { Viewport } from '../../engine/modules/editor/state';
 import { Point } from '../../internal-types';
 import { Group, VisualizationLink, VisualizationNode } from './createVisualization';
+export { DIM_OPACITY } from '../../konva/scene/viewLayout';
 /** The most of a table name a label shows before it is cut. */
 export declare const NAME_MAX_LENGTH = 15;
 /**
@@ -18,11 +21,6 @@ export declare const TABLE_RADIUS = 8;
 export declare const COLUMN_RADIUS = 4;
 /** A table draws larger than the columns that hang off it. */
 export declare const nodeRadius: (group: Group) => number;
-/**
- * What a dot, a line or a name fades to while it sits outside the lit
- * neighbourhood of a hovered table, so that neighbourhood reads on its own.
- */
-export declare const DIM_OPACITY = 0.2;
 /** The ids a hovered table lights up: nodes on one side, links on the other. */
 export type Highlight = {
     nodeIds: Set<string>;
@@ -63,6 +61,32 @@ export declare function createView(width: number, height: number): Visualization
  * const next = zoomAt(view, { x: event.offsetX, y: event.offsetY }, 1.2);
  */
 export declare function zoomAt(view: VisualizationView, point: Point, factor: number): VisualizationView;
+/**
+ * The view that stands the whole graph in the middle of the stage, as large as
+ * the zoom allows with a margin clear of every edge. A graph with nothing
+ * placed yet gets the middle of the stage back, which is where the forces gather it.
+ *
+ * @example
+ * Object.assign(state, fitGraphView(nodes, viewport));
+ */
+export declare function fitGraphView(nodes: VisualizationNode[], viewport: Viewport): VisualizationView;
+/**
+ * The view holding the scene point given under the middle of the stage, at the
+ * scale it already stands at. What a press on the compass moves the graph by.
+ *
+ * @example
+ * Object.assign(state, centerGraphView(state, compass.target, viewport));
+ */
+export declare function centerGraphView(view: VisualizationView, target: Point, viewport: Viewport): VisualizationView;
+/**
+ * Which way the nearest dot lies while the stage holds none of them, read the
+ * way the scene beside it reads its own. Null while the graph is empty, while
+ * the stage has no size, and while any dot reaches the stage.
+ *
+ * @example
+ * const compass = graphCompass(state, nodes, viewport);
+ */
+export declare function graphCompass(view: VisualizationView, nodes: Iterable<VisualizationNode>, viewport: Viewport): ContentCompass | null;
 /**
  * How much a wheel event scales the view, above one for a wheel rolled away
  * from the user. Exponential in the travel, so a notch each way cancels out.

package/dist/components/visualization/zoomVisualization.d.ts

@@ -0,0 +1,20 @@
+import { AppContext } from '../appContext';
+/**
+ * One step of zoom in the mode that is up. The Flow's runs through the canon
+ * the document's own does; the graph's holds the middle of the stage, which is
+ * where the same step lands for a view with no scroll under it.
+ *
+ * @example
+ * stepVisualizationZoom(app.value, ZOOM_STEP);
+ */
+export declare function stepVisualizationZoom(app: AppContext, step: number): void;
+/**
+ * The zoom of the mode that is up, at the level given rather than a step from
+ * where it stands. Absolute, so the reset chord lands on the same number
+ * whichever mode reads it and however far the reader had zoomed.
+ *
+ * @example
+ * setVisualizationZoom(app.value, ZOOM_RESET);
+ */
+export declare function setVisualizationZoom(app: AppContext, level: number): void;
+//# sourceMappingURL=zoomVisualization.d.ts.map

package/dist/constants/layout.d.ts

@@ -2,27 +2,94 @@ export declare const START_X = 200;
 export declare const START_Y = 100;
 export declare const START_ADD = 50;
 export declare const DUPLICATE_MIN_MOVE = 4;
+/**
+ * How far, in screen px, a press on a cell that also takes a click travels
+ * before it carries its entity, so a double click that wobbles still edits.
+ */
+export declare const CLICK_DRAG_MIN_MOVE = 4;
 export declare const DEFAULT_WIDTH = 1200;
 export declare const DEFAULT_HEIGHT: number;
+/** The px a table cell's text is drawn at, which the scene and the view header scale read. */
+export declare const CELL_FONT_SIZE = 12;
 export declare const INPUT_HEIGHT = 20;
 export declare const INPUT_MARGIN_RIGHT = 8;
+/** The height of one row in the data type autocomplete list. */
+export declare const DATA_TYPE_HINT_ROW_HEIGHT = 20;
+/** How many of those rows the list shows before it scrolls the rest. */
+export declare const DATA_TYPE_HINT_MAX_ROWS = 10;
 export declare const HEADER_ICON_HEIGHT = 12;
 export declare const HEADER_ICON_MARGIN_BOTTOM = 4;
 export declare const TABLE_BORDER = 1;
 export declare const TABLE_PADDING = 8;
 export declare const TABLE_HEADER_PADDING = 2;
-export declare const TABLE_HEADER_ICON_MARGIN_BOTTOM = 2;
 export declare const TABLE_HEADER_INPUT_HEIGHT: number;
+/** The room a table's header band keeps above and below its input line. */
+export declare const TABLE_HEADER_BAND_PADDING = 2;
+/**
+ * What a table's header adds under the card's top padding. The band starts at
+ * the top border instead, over that padding: one input line and its own room,
+ * a little taller than a row, holding the add column and remove buttons too.
+ */
 export declare const TABLE_HEADER_HEIGHT: number;
 export declare const TABLE_HEADER_BUTTON_MARGIN_LEFT = 4;
+/** How wide the colour a table wears along its left edge is drawn. */
+export declare const TABLE_COLOR_WIDTH = 4;
+/** The strip the two header buttons take along the right end of the header line. */
+export declare const TABLE_HEADER_BUTTONS_WIDTH: number;
 export declare const COLUMN_DELETE_WIDTH = 12;
 export declare const COLUMN_KEY_WIDTH = 12;
+/** The table icon before the name, at the key badge's size so the two stand in one column. */
+export declare const TABLE_HEADER_ICON_SIZE = 12;
+/** The gap after that icon, the one a key badge keeps, which lines the name up with the column names. */
+export declare const TABLE_HEADER_ICON_GAP = 8;
+/** Where the name starts along the header line, past that icon and its gap. */
+export declare const TABLE_HEADER_NAME_X: number;
 export declare const COLUMN_MIN_WIDTH = 60;
 export declare const COLUMN_NOT_NULL_WIDTH = 35;
 export declare const COLUMN_UNIQUE_WIDTH = 22;
 export declare const COLUMN_AUTO_INCREMENT_WIDTH = 15;
 export declare const COLUMN_PADDING = 2;
 export declare const COLUMN_HEIGHT: number;
+/** The table icon a view card draws beside its name, at the reference's 1rem. */
+export declare const VIEW_TABLE_HEADER_ICON_SIZE = 16;
+/** The gap between that icon and the name, the reference's one unit of spacing. */
+export declare const VIEW_TABLE_HEADER_ICON_GAP = 4;
+/** Where a view card's name starts along its header line, past that icon and gap. */
+export declare const VIEW_TABLE_HEADER_NAME_X: number;
+/** The size a view card draws its header name at, over the size its rows take. */
+export declare const VIEW_TABLE_HEADER_FONT_SIZE = 14;
+/**
+ * How much wider a string is at that size than at the one it was measured with.
+ * A face advances a glyph in proportion to its size, so a measured width scales
+ * rather than having to be measured a second time.
+ */
+export declare const VIEW_TABLE_HEADER_FONT_SCALE: number;
+/**
+ * How much wider again the header name is at the medium weight a view draws it
+ * in, over the regular every ui width was measured with. A host with no medium
+ * of its own synthesises one wider still, so the slot carries the room for both.
+ */
+export declare const VIEW_TABLE_HEADER_WEIGHT_SCALE = 1.04;
+/** The header a view card draws: the icon line with the card's own padding under it. */
+export declare const VIEW_TABLE_HEADER_HEIGHT: number;
+/** The key badge a view row draws, at the size the reference gives a row icon. */
+export declare const VIEW_COLUMN_ICON_SIZE = 16;
+/** The gap between that badge and the name, the reference's one and a half units. */
+export declare const VIEW_COLUMN_ICON_GAP = 6;
+/** The gap above and below the content of a view row, the reference's two units. */
+export declare const VIEW_COLUMN_PADDING = 8;
+/**
+ * The row a view card draws, written down as that icon line inside that padding
+ * rather than derived from INPUT_HEIGHT: a view row is a line of read only
+ * text, not the editable input box the document row is sized around.
+ */
+export declare const VIEW_COLUMN_HEIGHT: number;
+/** The width a view card is never drawn under, which is the reference's node minimum. */
+export declare const VIEW_TABLE_MIN_WIDTH = 172;
+/** The size of a button in a view card's header. */
+export declare const VIEW_TABLE_HEADER_BUTTON_SIZE = 12;
+/** The strip the two of them take along the right edge of that header. */
+export declare const VIEW_TABLE_HEADER_BUTTONS_WIDTH: number;
 export declare const MEMO_BORDER = 1;
 export declare const MEMO_PADDING = 8;
 export declare const MEMO_HEADER_HEIGHT: number;
@@ -38,6 +105,12 @@ export declare const DIFF_TREE_WIDTH = 200;
  * two rows at partial alpha on a 1x display.
  */
 export declare const RELATIONSHIP_STROKE_WIDTH = 2;
+/**
+ * The same connector inside a view, at the reference's hairline. A particle
+ * riding a lit one is 2.4 units across, so a heavier line swallows it: what a
+ * reader sees moving is the bulge the particle makes over the stroke, not a colour of its own.
+ */
+export declare const VIEW_RELATIONSHIP_STROKE_WIDTH = 1;
 /**
  * The invisible band that catches the pointer for a connector, because
  * hit-testing follows the painted stroke. Narrower than NUDGE_GAP, so it stays

package/dist/constants/tablePlacement.d.ts

@@ -1,14 +1,15 @@
 import { ValuesType } from '../internal-types';
 /**
- * How the editor lays a document out when the author asks it to. Force is the
- * simulation the editor has always run, and the three below it are ELK
- * algorithms answered off the main thread.
+ * How a set of tables is laid out. Force is the simulation the editor has
+ * always run, the rest are ELK algorithms answered off the main thread, and
+ * viewLayered is the preset the views place with rather than one the author picks.
  */
 export declare const TablePlacement: {
     readonly force: "force";
     readonly layeredHorizontal: "layeredHorizontal";
     readonly layeredVertical: "layeredVertical";
     readonly flow: "flow";
+    readonly viewLayered: "viewLayered";
 };
 export type TablePlacement = ValuesType<typeof TablePlacement>;
 export declare const DEFAULT_TABLE_PLACEMENT: TablePlacement;

package/dist/constants/zoom.d.ts

@@ -0,0 +1,7 @@
+/** The zoom a scene opens at, and the one the reset chord puts it back to. */
+export declare const ZOOM_RESET = 1;
+/** How far one zoom chord steps the zoom, in or out. */
+export declare const ZOOM_STEP = 0.04;
+/** How far one wheel notch carrying the modifier zooms, on the ERD tab and in a view alike. */
+export declare const WHEEL_ZOOM_STEP = 0.03;
+//# sourceMappingURL=zoom.d.ts.map

package/dist/engine/actions.d.ts

@@ -28,6 +28,12 @@ export type ActionType = keyof RootActionMap;
 export declare const actions: Actions;
 export declare const ChangeActionTypes: ReadonlyArray<ActionType>;
 export declare const ReadonlyIgnoreActionTypes: ReadonlyArray<ActionType>;
+/**
+ * What a view keeps from the document while it is active: every edit a
+ * readonly host refuses, less the host replacing the document outright, which
+ * a view cannot stand in the way of and answers by closing.
+ */
+export declare const ViewIgnoreActionTypes: ReadonlyArray<ActionType>;
 export declare const SharedStreamActionTypes: ReadonlyArray<ActionType>;
 export declare const SharedActionTypes: ReadonlyArray<ActionType>;
 export declare const SharedFollowingActionTypes: ReadonlyArray<ActionType>;

package/dist/engine/index.js

@@ -1,33 +1,33 @@
-import { Rr as e, Wt as t, b as n, g as r, jn as i, l as a, m as o, n as s, on as c, q as l, r as u, t as d, ui as f } from "../schemaGCService--wGet5O7.js";
+import { $i as e, Ln as t, Xt as n, Z as r, _ as i, fn as a, h as o, n as s, r as c, t as l, u, x as d, xi as f } from "../schemaGCService-CFiz1xOG.js";
 import { isEmpty as p } from "es-toolkit/compat";
 import { omit as m } from "es-toolkit";
 import { Observable as h, Subject as g, debounceTime as _, map as v } from "rxjs";
 //#region src/engine/replication-store.ts
 var y = { change: "change" };
 function b(b) {
-	let x = /* @__PURE__ */ new Set(), S = r(b), C = a(S, !1);
-	C.dispatchSync(c({
+	let x = /* @__PURE__ */ new Set(), S = i(b), C = u(S, !1);
+	C.dispatchSync(a({
 		width: 0,
 		height: 0
 	}));
-	let w = u(C), T = new g(), E = new h((e) => C.subscribe((t) => e.next(t))).pipe(o(n), _(200)), D = /* @__PURE__ */ new Set(), O = new d(), k = (e) => (D.has(e) || D.add(e), () => {
+	let w = c(C), T = new g(), E = new h((e) => C.subscribe((t) => e.next(t))).pipe(o(d), _(200)), D = /* @__PURE__ */ new Set(), O = new l(), k = (e) => (D.has(e) || D.add(e), () => {
 		D.delete(e);
-	}), A = (e, n) => {
+	}), A = (e, t) => {
 		D.forEach((r) => {
 			let i = Reflect.get(r, e);
-			t(i, n);
+			n(i, t);
 		});
-	}, j = (t) => {
-		let n = e(t);
-		C.dispatchSync(l(p(n) ? "{}" : n)), O.run(f(C.state)).then((e) => {
-			(e.tableIds.length || e.tableColumnIds.length || e.relationshipIds.length || e.indexIds.length || e.indexColumnIds.length || e.memoIds.length) && (s(C.state, e), C.dispatchSync(i()));
+	}, j = (n) => {
+		let i = f(n);
+		C.dispatchSync(r(p(i) ? "{}" : i)), O.run(e(C.state)).then((e) => {
+			(e.tableIds.length || e.tableColumnIds.length || e.relationshipIds.length || e.indexIds.length || e.indexColumnIds.length || e.memoIds.length) && (s(C.state, e), C.dispatchSync(t()));
 		});
 	}, M = (e) => {
 		T.next([e].flat());
 	};
-	return x.add(E.subscribe(() => A(y.change, void 0))).add(T.pipe(o(n), v((e) => e.map((e) => m(e, ["tags"])))).subscribe(C.dispatchSync)), Object.freeze({
+	return x.add(E.subscribe(() => A(y.change, void 0))).add(T.pipe(o(d), v((e) => e.map((e) => m(e, ["tags"])))).subscribe(C.dispatchSync)), Object.freeze({
 		get value() {
-			return f(C.state);
+			return e(C.state);
 		},
 		on: k,
 		setInitialValue: j,

package/dist/engine/modules/editor/actions.d.ts

@@ -1,9 +1,9 @@
 import { Reducer } from '@dineug/r-html';
 import { EngineContext } from '../../context';
 import { RootState } from '../../state';
-import { LWW, ValuesType } from '../../../internal-types';
+import { LWW, Point, ValuesType } from '../../../internal-types';
 import { Rect } from '../../../utils/dragSelect';
-import { FocusType, MoveKey, SelectType, SharedFocus } from './state';
+import { FocusType, MoveKey, SelectType, SharedFocus, ShowMode, ViewKind, VisualizationMode } from './state';
 export declare const ActionType: {
     readonly changeHasHistory: "editor.changeHasHistory";
     readonly selectAll: "editor.selectAll";
@@ -43,6 +43,17 @@ export declare const ActionType: {
     readonly validationIds: "editor.validationIds";
     readonly getLWW: "editor.getLWW";
     readonly mergeLWW: "editor.mergeLWW";
+    readonly viewOpen: "editor.viewOpen";
+    readonly viewClose: "editor.viewClose";
+    readonly viewScrollTo: "editor.viewScrollTo";
+    readonly viewStreamScrollTo: "editor.viewStreamScrollTo";
+    readonly viewChangeZoomLevel: "editor.viewChangeZoomLevel";
+    readonly viewStreamZoomLevel: "editor.viewStreamZoomLevel";
+    readonly viewMoveTable: "editor.viewMoveTable";
+    readonly viewSetLayout: "editor.viewSetLayout";
+    readonly viewChangeShowMode: "editor.viewChangeShowMode";
+    readonly viewSetCenters: "editor.viewSetCenters";
+    readonly changeVisualizationMode: "editor.changeVisualizationMode";
 };
 export type ActionType = ValuesType<typeof ActionType>;
 export type ActionMap = {
@@ -143,6 +154,53 @@ export type ActionMap = {
     [ActionType.mergeLWW]: {
         lww: LWW;
     };
+    [ActionType.viewOpen]: {
+        kind: ViewKind;
+        /** The tables the view opens narrowed to; none and it opens on the whole document. */
+        centerIds?: string[];
+    };
+    [ActionType.viewClose]: {
+        kind: ViewKind;
+    };
+    [ActionType.viewScrollTo]: {
+        originX: number;
+        originY: number;
+        kind?: ViewKind;
+    };
+    [ActionType.viewStreamScrollTo]: {
+        movementX: number;
+        movementY: number;
+        kind?: ViewKind;
+    };
+    [ActionType.viewChangeZoomLevel]: {
+        value: number;
+        kind?: ViewKind;
+    };
+    [ActionType.viewStreamZoomLevel]: {
+        value: number;
+        kind?: ViewKind;
+    };
+    [ActionType.viewMoveTable]: {
+        ids: string[];
+        movementX: number;
+        movementY: number;
+        kind?: ViewKind;
+    };
+    [ActionType.viewSetLayout]: {
+        kind: ViewKind;
+        positions: Record<string, Point>;
+    };
+    [ActionType.viewChangeShowMode]: {
+        value: ShowMode;
+        kind?: ViewKind;
+    };
+    [ActionType.viewSetCenters]: {
+        tableIds: string[];
+        kind?: ViewKind;
+    };
+    [ActionType.changeVisualizationMode]: {
+        value: VisualizationMode;
+    };
 };
 export type ReducerType<T extends keyof ActionMap> = Reducer<RootState, T, ActionMap, EngineContext>;
 //# sourceMappingURL=actions.d.ts.map

package/dist/engine/modules/editor/atom.actions.d.ts

@@ -309,6 +309,17 @@ export declare const mergeLWWAction: {
     type: string;
 };
 export declare const editorReducers: {
+    "editor.viewOpen": ReducerType<"editor.viewOpen">;
+    "editor.viewClose": ReducerType<"editor.viewClose">;
+    "editor.viewScrollTo": ReducerType<"editor.viewScrollTo">;
+    "editor.viewStreamScrollTo": ReducerType<"editor.viewStreamScrollTo">;
+    "editor.viewChangeZoomLevel": ReducerType<"editor.viewChangeZoomLevel">;
+    "editor.viewStreamZoomLevel": ReducerType<"editor.viewStreamZoomLevel">;
+    "editor.viewMoveTable": ReducerType<"editor.viewMoveTable">;
+    "editor.viewSetLayout": ReducerType<"editor.viewSetLayout">;
+    "editor.viewChangeShowMode": ReducerType<"editor.viewChangeShowMode">;
+    "editor.viewSetCenters": ReducerType<"editor.viewSetCenters">;
+    "editor.changeVisualizationMode": ReducerType<"editor.changeVisualizationMode">;
     "editor.changeHasHistory": ReducerType<"editor.changeHasHistory">;
     "editor.selectAll": ReducerType<"editor.selectAll">;
     "editor.unselectAll": ReducerType<"editor.unselectAll">;
@@ -349,6 +360,131 @@ export declare const editorReducers: {
     "editor.mergeLWW": ReducerType<"editor.mergeLWW">;
 };
 export declare const actions: {
+    viewOpenAction: {
+        (payload: {
+            kind: import('./state').ViewKind;
+            centerIds?: string[];
+        }): import('@dineug/r-html').AnyAction<{
+            kind: import('./state').ViewKind;
+            centerIds?: string[];
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewCloseAction: {
+        (payload: {
+            kind: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            kind: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewScrollToAction: {
+        (payload: {
+            originX: number;
+            originY: number;
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            originX: number;
+            originY: number;
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewStreamScrollToAction: {
+        (payload: {
+            movementX: number;
+            movementY: number;
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            movementX: number;
+            movementY: number;
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewChangeZoomLevelAction: {
+        (payload: {
+            value: number;
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            value: number;
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewStreamZoomLevelAction: {
+        (payload: {
+            value: number;
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            value: number;
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewMoveTableAction: {
+        (payload: {
+            ids: string[];
+            movementX: number;
+            movementY: number;
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            ids: string[];
+            movementX: number;
+            movementY: number;
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewSetLayoutAction: {
+        (payload: {
+            kind: import('./state').ViewKind;
+            positions: Record<string, import('../../../internal-types').Point>;
+        }): import('@dineug/r-html').AnyAction<{
+            kind: import('./state').ViewKind;
+            positions: Record<string, import('../../../internal-types').Point>;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewChangeShowModeAction: {
+        (payload: {
+            value: import('./state').ShowMode;
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            value: import('./state').ShowMode;
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewSetCentersAction: {
+        (payload: {
+            tableIds: string[];
+            kind?: import('./state').ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            tableIds: string[];
+            kind?: import('./state').ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    changeVisualizationModeAction: {
+        (payload: {
+            value: import('./state').VisualizationMode;
+        }): import('@dineug/r-html').AnyAction<{
+            value: import('./state').VisualizationMode;
+        }>;
+        toString(): string;
+        type: string;
+    };
     changeHasHistoryAction: {
         (payload: {
             hasUndo: boolean;

package/dist/engine/modules/editor/generator.actions.d.ts

@@ -1,11 +1,17 @@
 import { GeneratorAction } from '../../generator.actions';
 import { Point } from '../../../internal-types';
 import { Rect } from '../../../utils/dragSelect';
+import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
 import { ClipboardPayload } from '../../../utils/table-clipboard';
 import { MoveKey } from './state';
 export declare const loadJsonAction$: (value: string) => GeneratorAction;
 export declare const initialLoadJsonAction$: (value: string) => GeneratorAction;
-export declare const moveAllAction$: (movementX: number, movementY: number) => GeneratorAction;
+/**
+ * Moves the selection by a pointer step, scaled by the zoom of the scene the
+ * drag runs in. From a view scene the step goes to that view's own placement,
+ * which holds tables alone, and the document's placement is left where it is.
+ */
+export declare const moveAllAction$: (movementX: number, movementY: number, source?: GeometrySource) => GeneratorAction;
 export declare const removeSelectedAction$: () => GeneratorAction;
 export type DuplicateConfig = {
     tableIds?: string[];
@@ -15,7 +21,12 @@ export type DuplicateConfig = {
 };
 export declare const pasteEntitiesAction$: (payload: ClipboardPayload, pasteRound: number) => GeneratorAction;
 export declare const duplicateAction$: ({ tableIds, memoIds, offset, escapeCollision, }: DuplicateConfig) => GeneratorAction;
-export declare const dragSelectAction$: (dragRect: Rect) => GeneratorAction;
+/**
+ * Selects what the rect covers among what the source shows, each entity read
+ * at the point and the size that source draws it: a view places its tables
+ * and shows no memo, so a marquee drawn over it picks by the view, not the document.
+ */
+export declare const dragSelectAction$: (dragRect: Rect, source?: GeometrySource) => GeneratorAction;
 export declare const unselectAllAction$: () => GeneratorAction;
 export declare const focusMoveTableAction$: (moveKey: MoveKey, shiftKey: boolean) => GeneratorAction;
 export declare const drawStartRelationshipAction$: (relationshipType: number) => GeneratorAction;
@@ -26,17 +37,19 @@ export declare const loadSchemaGraphQLAction$: (value: string) => GeneratorActio
 export declare const loadSchemaDBMLAction$: (value: string) => GeneratorAction;
 export declare const loadSchemaAMLAction$: (value: string) => GeneratorAction;
 export declare const dragstartColumnAction$: ($mod: boolean) => GeneratorAction;
-export declare const dragoverColumnAction$: (targetId: string, targetTableId: string) => GeneratorAction;
+/** A null targetId drops past the last row, which appends. */
+export declare const dragoverColumnAction$: (targetId: string | null, targetTableId: string) => GeneratorAction;
 export declare const columnKeyHoverStartAction$: (columnId: string) => GeneratorAction;
 export declare const columnKeyHoverEndAction$: () => GeneratorAction;
 export declare const actions$: {
+    focusFlowTableAction$: (tableIds: string[]) => GeneratorAction;
     loadJsonAction$: (value: string) => GeneratorAction;
     initialLoadJsonAction$: (value: string) => GeneratorAction;
-    moveAllAction$: (movementX: number, movementY: number) => GeneratorAction;
+    moveAllAction$: (movementX: number, movementY: number, source?: GeometrySource) => GeneratorAction;
     removeSelectedAction$: () => GeneratorAction;
     pasteEntitiesAction$: (payload: ClipboardPayload, pasteRound: number) => GeneratorAction;
     duplicateAction$: ({ tableIds, memoIds, offset, escapeCollision, }: DuplicateConfig) => GeneratorAction;
-    dragSelectAction$: (dragRect: Rect) => GeneratorAction;
+    dragSelectAction$: (dragRect: Rect, source?: GeometrySource) => GeneratorAction;
     unselectAllAction$: () => GeneratorAction;
     focusMoveTableAction$: (moveKey: MoveKey, shiftKey: boolean) => GeneratorAction;
     drawStartRelationshipAction$: (relationshipType: number) => GeneratorAction;
@@ -47,7 +60,7 @@ export declare const actions$: {
     loadSchemaDBMLAction$: (value: string) => GeneratorAction;
     loadSchemaAMLAction$: (value: string) => GeneratorAction;
     dragstartColumnAction$: ($mod: boolean) => GeneratorAction;
-    dragoverColumnAction$: (targetId: string, targetTableId: string) => GeneratorAction;
+    dragoverColumnAction$: (targetId: string | null, targetTableId: string) => GeneratorAction;
     columnKeyHoverStartAction$: (columnId: string) => GeneratorAction;
     columnKeyHoverEndAction$: () => GeneratorAction;
 };

package/dist/engine/modules/editor/state.d.ts

@@ -36,6 +36,14 @@ export type Editor = {
     sharedSelectionTrackerMap: Record<string, SharedSelectionTracker>;
     sharedDragSelectTrackerMap: Record<string, SharedDragSelectTracker>;
     dragSelect: Rect | null;
+    /**
+     * The scene view a reader can stand in over the document: the Flow mode of
+     * the visualization tab, null while it is not open. Local to this client,
+     * never the file, the history or a peer.
+     */
+    views: EditorViews;
+    /** Which of its two modes the visualization tab shows. Remembered for the session. */
+    visualizationMode: VisualizationMode;
 };
 export type Viewport = {
     width: number;
@@ -90,6 +98,39 @@ export declare const SelectType: {
     readonly memo: "memo";
 };
 export type SelectType = ValuesType<typeof SelectType>;
+export declare const ShowMode: {
+    readonly nameOnly: "nameOnly";
+    readonly keysOnly: "keysOnly";
+    readonly allFields: "allFields";
+};
+export type ShowMode = ValuesType<typeof ShowMode>;
+export declare const ViewKind: {
+    readonly flow: "flow";
+};
+export type ViewKind = ValuesType<typeof ViewKind>;
+export declare const VisualizationMode: {
+    readonly graph: "graph";
+    readonly flow: "flow";
+};
+export type VisualizationMode = ValuesType<typeof VisualizationMode>;
+/**
+ * A scene drawn over the document in its own coordinates: the tables it places
+ * by id, the placement it is looked at through, and what it shows of each
+ * table. Memos are never placed, so a view draws none.
+ */
+export type SceneView = {
+    kind: ViewKind;
+    showMode: ShowMode;
+    positions: Record<string, Point>;
+    originX: number;
+    originY: number;
+    zoomLevel: number;
+    /** The tables the view narrows to, and none while it shows the whole document. */
+    centerIds: string[];
+};
+export type EditorViews = {
+    flow: SceneView | null;
+};
 export declare const FocusType: {
     readonly tableName: "tableName";
     readonly tableComment: "tableComment";