@dineug/erd-editor 3.7.0 → 3.8.0

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;
@@ -30,13 +41,14 @@ export declare const dragoverColumnAction$: (targetId: string, targetTableId: st
 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;

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

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

@@ -0,0 +1,270 @@
+import { ReducerType } from './actions';
+import { Editor, ViewKind } from './state';
+/** Drops the view, which is what any replacement of the document owes it. */
+export declare function clearViews(editor: Editor): void;
+export declare const viewOpenAction: {
+    (payload: {
+        kind: ViewKind;
+        centerIds?: string[];
+    }): import('@dineug/r-html').AnyAction<{
+        kind: ViewKind;
+        centerIds?: string[];
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewCloseAction: {
+    (payload: {
+        kind: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        kind: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewScrollToAction: {
+    (payload: {
+        originX: number;
+        originY: number;
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        originX: number;
+        originY: number;
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewStreamScrollToAction: {
+    (payload: {
+        movementX: number;
+        movementY: number;
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        movementX: number;
+        movementY: number;
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewChangeZoomLevelAction: {
+    (payload: {
+        value: number;
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        value: number;
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewStreamZoomLevelAction: {
+    (payload: {
+        value: number;
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        value: number;
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewMoveTableAction: {
+    (payload: {
+        ids: string[];
+        movementX: number;
+        movementY: number;
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        ids: string[];
+        movementX: number;
+        movementY: number;
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewSetLayoutAction: {
+    (payload: {
+        kind: ViewKind;
+        positions: Record<string, import('../../../internal-types').Point>;
+    }): import('@dineug/r-html').AnyAction<{
+        kind: ViewKind;
+        positions: Record<string, import('../../../internal-types').Point>;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewChangeShowModeAction: {
+    (payload: {
+        value: import('./state').ShowMode;
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        value: import('./state').ShowMode;
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewSetCentersAction: {
+    (payload: {
+        tableIds: string[];
+        kind?: ViewKind;
+    }): import('@dineug/r-html').AnyAction<{
+        tableIds: string[];
+        kind?: ViewKind;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const changeVisualizationModeAction: {
+    (payload: {
+        value: import('./state').VisualizationMode;
+    }): import('@dineug/r-html').AnyAction<{
+        value: import('./state').VisualizationMode;
+    }>;
+    toString(): string;
+    type: string;
+};
+export declare const viewReducers: {
+    "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">;
+};
+export declare const viewActions: {
+    viewOpenAction: {
+        (payload: {
+            kind: ViewKind;
+            centerIds?: string[];
+        }): import('@dineug/r-html').AnyAction<{
+            kind: ViewKind;
+            centerIds?: string[];
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewCloseAction: {
+        (payload: {
+            kind: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            kind: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewScrollToAction: {
+        (payload: {
+            originX: number;
+            originY: number;
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            originX: number;
+            originY: number;
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewStreamScrollToAction: {
+        (payload: {
+            movementX: number;
+            movementY: number;
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            movementX: number;
+            movementY: number;
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewChangeZoomLevelAction: {
+        (payload: {
+            value: number;
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            value: number;
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewStreamZoomLevelAction: {
+        (payload: {
+            value: number;
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            value: number;
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewMoveTableAction: {
+        (payload: {
+            ids: string[];
+            movementX: number;
+            movementY: number;
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            ids: string[];
+            movementX: number;
+            movementY: number;
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewSetLayoutAction: {
+        (payload: {
+            kind: ViewKind;
+            positions: Record<string, import('../../../internal-types').Point>;
+        }): import('@dineug/r-html').AnyAction<{
+            kind: ViewKind;
+            positions: Record<string, import('../../../internal-types').Point>;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewChangeShowModeAction: {
+        (payload: {
+            value: import('./state').ShowMode;
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            value: import('./state').ShowMode;
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    viewSetCentersAction: {
+        (payload: {
+            tableIds: string[];
+            kind?: ViewKind;
+        }): import('@dineug/r-html').AnyAction<{
+            tableIds: string[];
+            kind?: ViewKind;
+        }>;
+        toString(): string;
+        type: string;
+    };
+    changeVisualizationModeAction: {
+        (payload: {
+            value: import('./state').VisualizationMode;
+        }): import('@dineug/r-html').AnyAction<{
+            value: import('./state').VisualizationMode;
+        }>;
+        toString(): string;
+        type: string;
+    };
+};
+//# sourceMappingURL=view.actions.d.ts.map

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

@@ -0,0 +1,28 @@
+import { RootState } from '../../state';
+import { GeometrySource, ViewSource } from '../../../utils/draw-relationship/geometrySource';
+import { SceneView, ViewKind } from './state';
+/**
+ * The view the reader stands in, or null in the document itself. A Flow view
+ * counts only while the visualization tab shows it, so one kept across tabs is
+ * open but not stood in.
+ */
+export declare const getActiveView: (state: RootState) => SceneView | null;
+/**
+ * Whether a scene is drawing the view of the kind given: an open Flow view
+ * only while its tab shows Flow. One kept across tabs is open but unseen, and
+ * nothing reads its geometry until it is back.
+ */
+export declare const isViewShown: (state: RootState, kind: ViewSource) => boolean;
+/**
+ * The view a scene drawn from the source given reads, open or not: the slot
+ * of that kind, and null for the document. A scene reads its own slot and
+ * never the active one, so an export of the document is never drawn from a view.
+ */
+export declare const getSourceView: (state: RootState, source: GeometrySource) => SceneView | null;
+/**
+ * A view just opened: nothing placed yet, the neutral placement a fit will
+ * replace, and the display its centers ask for. Narrowed to a few tables it
+ * opens on the key rows; over the whole document it draws name boxes.
+ */
+export declare function createSceneView(kind: ViewKind, centerIds?: string[]): SceneView;
+//# sourceMappingURL=view.d.ts.map

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

@@ -0,0 +1,24 @@
+import { GeneratorAction } from '../../generator.actions';
+import { SelectType } from './state';
+/**
+ * The centers a focus from the ERD takes: every table the selection holds, and
+ * the one a menu was raised over alone when the selection does not hold it, so
+ * a group is focused as one exactly as it is dragged as one. A memo is no center.
+ *
+ * @example
+ * store.dispatch(focusFlowTableAction$(focusCentersOf(editor.selectedMap, tableId)));
+ */
+export declare function focusCentersOf(selectedMap: Record<string, SelectType>, tableId?: string): string[];
+/**
+ * Stands the reader on the tables given in the Flow view: the visualization
+ * tab comes up on Flow, a view is opened if none is, and what it shows narrows
+ * to those centers and their neighbours. No ids and it stands.
+ *
+ * @example
+ * store.dispatch(focusFlowTableAction$(['orders']));
+ */
+export declare const focusFlowTableAction$: (tableIds: string[]) => GeneratorAction;
+export declare const viewActions$: {
+    focusFlowTableAction$: (tableIds: string[]) => GeneratorAction;
+};
+//# sourceMappingURL=view.generator.actions.d.ts.map