@dineug/erd-editor 3.8.0 → 3.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/erd/canvas/column-drag-ghost/ColumnDragGhost.d.ts +10 -0
- package/dist/components/erd/canvas/column-drag-ghost/columnDragPointer.d.ts +28 -0
- package/dist/components/erd/canvas/sceneTokens.d.ts +31 -5
- package/dist/components/erd/canvas/table/cellLayout.d.ts +6 -6
- package/dist/components/erd/canvas/table/colorEdge.d.ts +10 -0
- package/dist/components/erd/canvas/table/column/Column.d.ts +12 -3
- package/dist/components/erd/canvas/useMoveEntity.d.ts +6 -0
- package/dist/components/erd/diff-viewer/diff.d.ts +9 -2
- package/dist/components/erd/diff-viewer/diffContext.d.ts +9 -0
- package/dist/components/primitives/context-menu/context-menu-content/ContextMenuContent.d.ts +2 -0
- package/dist/components/primitives/context-menu/context-menu-content/fitMenu.d.ts +20 -0
- package/dist/components/table-view/Table.styles.d.ts +6 -1
- package/dist/components/table-view/column/useColumnCell.d.ts +5 -0
- package/dist/components/visualization/Visualization.styles.d.ts +4 -1
- package/dist/components/visualization/captureDrag.d.ts +14 -0
- package/dist/components/visualization/useViewGestures.d.ts +2 -2
- package/dist/constants/layout.d.ts +29 -6
- package/dist/engine/index.js +8 -8
- package/dist/engine/modules/editor/generator.actions.d.ts +3 -2
- package/dist/engine/modules/settings/generator.actions.d.ts +15 -0
- package/dist/engine/rx-store.d.ts +1 -0
- package/dist/engine/tag.d.ts +2 -0
- package/dist/erd-editor.umd.js +328 -314
- package/dist/hooks/usePinchZoom.d.ts +27 -0
- package/dist/index.js +5893 -5427
- package/dist/konva/scene/columnDropTarget.d.ts +10 -3
- package/dist/konva/scene/viewLayout.d.ts +10 -5
- package/dist/konva/scene/viewport.d.ts +6 -0
- package/dist/{schemaGCService-CXVjeF9p.js → schemaGCService-CFiz1xOG.js} +3089 -2986
- package/dist/styles/elevation.styles.d.ts +7 -0
- package/dist/themes/radix-ui-theme.config.d.ts +12 -0
- package/dist/themes/tokens.d.ts +7 -0
- package/dist/utils/calcTable.d.ts +1 -5
- package/dist/utils/domEvent.d.ts +2 -0
- package/dist/utils/pinch.d.ts +34 -0
- package/dist/utils/validation.d.ts +1 -0
- package/dist/workers/exportPng.shared-worker.js +26 -26
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -138,7 +138,7 @@ erd-editor {
|
|
|
138
138
|
|
|
139
139
|
| Method | Description |
|
|
140
140
|
| --- | --- |
|
|
141
|
-
| `setInitialValue(value: string)` | Load the initial document. Does not create a history entry. |
|
|
141
|
+
| `setInitialValue(value: string)` | Load the initial document. Does not create a history entry, and clears the undo history, so nothing done before the load can be undone or redone onto it. |
|
|
142
142
|
| `getSchemaSQL(vendor?)` | Export DDL. `vendor` is one of `Databricks`, `MariaDB`, `MSSQL`, `MySQL`, `Oracle`, `PostgreSQL`, `Snowflake`, `SQLite`; omit it to use the document's own setting. |
|
|
143
143
|
| `setSchemaSQL(value: string)` | Parse a DDL string and **replace** the current document with it. Lands in the undo history; an empty string is ignored. |
|
|
144
144
|
| `setSchemaGraphQL(value: string)` | Parse a GraphQL SDL string and **replace** the current document with it. Object types become tables, scalars map to the document's own dialect, and relationships are read from the fields that point at another type. Lands in the undo history; an empty string is ignored. |
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FC } from '@dineug/r-html';
|
|
2
|
+
export type ColumnDragGhostProps = {};
|
|
3
|
+
/**
|
|
4
|
+
* The rows a column drag carries, drawn on the presence layer under the
|
|
5
|
+
* pointer where the browser used to hang its drag image. Each keeps its name
|
|
6
|
+
* and type where its table lays them out, and none of it answers a hit.
|
|
7
|
+
*/
|
|
8
|
+
declare const ColumnDragGhost: FC<ColumnDragGhostProps>;
|
|
9
|
+
export default ColumnDragGhost;
|
|
10
|
+
//# sourceMappingURL=ColumnDragGhost.d.ts.map
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { RootState } from '../../../../engine/state';
|
|
2
|
+
import { Point, Table } from '../../../../internal-types';
|
|
3
|
+
/**
|
|
4
|
+
* The pointer a column drag holds, in canvas units: where it is, where it took
|
|
5
|
+
* the rows it carries, and whether a drop target is under it right now.
|
|
6
|
+
*/
|
|
7
|
+
export type ColumnDragPointer = {
|
|
8
|
+
x: number;
|
|
9
|
+
y: number;
|
|
10
|
+
/** The pointer's offset from the top left of the rows it carries. */
|
|
11
|
+
grabX: number;
|
|
12
|
+
grabY: number;
|
|
13
|
+
over: boolean;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* Takes hold of the rows a drag carries at the press on one of them. The ghost
|
|
17
|
+
* stacks them in drag order, so the pressed row sits that many rows down it.
|
|
18
|
+
*/
|
|
19
|
+
export declare function beginColumnDragPointer(root: RootState, table: Table, press: Point, { columnId, columnIds }: {
|
|
20
|
+
columnId: string;
|
|
21
|
+
columnIds: string[];
|
|
22
|
+
}): void;
|
|
23
|
+
/** Follows the pointer of a drag that began, and ignores one that never did. */
|
|
24
|
+
export declare function moveColumnDragPointer(root: RootState, { x, y }: Point, over: boolean): void;
|
|
25
|
+
export declare function endColumnDragPointer(root: RootState): void;
|
|
26
|
+
/** Reads the pointer through the observable, so a render tracks it. */
|
|
27
|
+
export declare function getColumnDragPointer(root: RootState): ColumnDragPointer | null;
|
|
28
|
+
//# sourceMappingURL=columnDragPointer.d.ts.map
|
|
@@ -46,21 +46,31 @@ export declare const HIGH_LEVEL_FONT_SIZES: readonly [20, 24, 28, 35, 60];
|
|
|
46
46
|
export declare const TABLE_INSET: number;
|
|
47
47
|
/** The radius Table.styles rounds a table box with. */
|
|
48
48
|
export declare const TABLE_CORNER_RADIUS = 6;
|
|
49
|
-
/** The min-height Table.styles gives the colour bar across a table header. */
|
|
50
|
-
export declare const HEADER_COLOR_HEIGHT = 4;
|
|
51
49
|
/** The 1.5px underline EditInput draws for a focused, edited or shared cell. */
|
|
52
50
|
export declare const FOCUS_BORDER_HEIGHT = 1.5;
|
|
53
51
|
/** What the ring outside a table box costs, as outline and box-shadow both do. */
|
|
54
52
|
export declare const RING_WIDTH = 1;
|
|
55
53
|
/**
|
|
56
|
-
* The drop shadow a view card sits on,
|
|
57
|
-
*
|
|
58
|
-
*
|
|
54
|
+
* The drop shadow a view card sits on, deeper than any a document box casts.
|
|
55
|
+
* The alpha is the shadow's own, since the minimap shadow token it borrows is
|
|
56
|
+
* an opaque black.
|
|
59
57
|
*/
|
|
60
58
|
export declare const VIEW_CARD_SHADOW_BLUR = 20;
|
|
61
59
|
export declare const VIEW_CARD_SHADOW_OFFSET_X = 0;
|
|
62
60
|
export declare const VIEW_CARD_SHADOW_OFFSET_Y = 2;
|
|
63
61
|
export declare const VIEW_CARD_SHADOW_OPACITY = 0.4;
|
|
62
|
+
/** A drop shadow as the five konva shadow attrs a body sets from it. */
|
|
63
|
+
export type CardShadow = {
|
|
64
|
+
color: string;
|
|
65
|
+
blur: number;
|
|
66
|
+
offsetX: number;
|
|
67
|
+
offsetY: number;
|
|
68
|
+
opacity: number;
|
|
69
|
+
};
|
|
70
|
+
/** The shadow a view card casts, in the colour of the token it borrows. */
|
|
71
|
+
export declare function viewCardShadow(color: string): CardShadow;
|
|
72
|
+
export declare const DOCUMENT_CARD_SHADOW_BLUR = 10;
|
|
73
|
+
export declare const DOCUMENT_CARD_SHADOW_OFFSET_Y = 2;
|
|
64
74
|
/**
|
|
65
75
|
* The bloom a lit view card wears, drawn as a shadow on a stroke and never as
|
|
66
76
|
* a filled sibling: a fill behind the body would have to be reordered under it,
|
|
@@ -77,6 +87,12 @@ export declare const TRANSPARENT = "transparent";
|
|
|
77
87
|
* keeps the whole padded box clickable the way its div did.
|
|
78
88
|
*/
|
|
79
89
|
export declare const HIT_FILL = "transparent";
|
|
90
|
+
/**
|
|
91
|
+
* The shadow a document table or memo casts, in a colour carrying its alpha. No
|
|
92
|
+
* shadow sets no attr at all, so the canvas never spends a blur on nothing, and
|
|
93
|
+
* a scene with no theme above it reads every token as undefined.
|
|
94
|
+
*/
|
|
95
|
+
export declare function documentCardShadow(color: string | undefined): CardShadow | null;
|
|
80
96
|
/** The hand a clickable scene node asks for, as the dom scene spelt it in css. */
|
|
81
97
|
export declare const CURSOR_POINTER = "pointer";
|
|
82
98
|
/** The beam a textarea carried on its own, which a drawn body has to ask for. */
|
|
@@ -86,9 +102,19 @@ export declare const CURSOR_INHERIT = "";
|
|
|
86
102
|
/**
|
|
87
103
|
* Points the stage container at a cursor. A konva node carries none of its own,
|
|
88
104
|
* so the container is where the css the dom scene put on an element now lives.
|
|
105
|
+
* Under a hold the cursor is only noted, for the release to write back.
|
|
89
106
|
*
|
|
90
107
|
* @example
|
|
91
108
|
* on:mouseenter={(event) => setSceneCursor(event, CURSOR_POINTER)}
|
|
92
109
|
*/
|
|
93
110
|
export declare function setSceneCursor(event: ScenePointerEvent, cursor: string): void;
|
|
111
|
+
/**
|
|
112
|
+
* Keeps the container on a cursor for a mouse gesture, whatever the pointer runs
|
|
113
|
+
* over, and hands back the release that shows what the last hover asked for. A
|
|
114
|
+
* touch has no cursor to keep, so its press holds nothing.
|
|
115
|
+
*
|
|
116
|
+
* @example
|
|
117
|
+
* drag$.subscribe(handleMove).add(holdSceneCursor(event, 'ew-resize'));
|
|
118
|
+
*/
|
|
119
|
+
export declare function holdSceneCursor(event: ScenePointerEvent, cursor: string): () => void;
|
|
94
120
|
//# sourceMappingURL=sceneTokens.d.ts.map
|
|
@@ -18,9 +18,9 @@ export type ColumnCellSlot = CellSlot & {
|
|
|
18
18
|
/** Where the header cell row starts inside a table group. */
|
|
19
19
|
export declare const HEADER_CELLS_X: number;
|
|
20
20
|
/**
|
|
21
|
-
* How far down a table group the header cells start. The document
|
|
22
|
-
*
|
|
23
|
-
*
|
|
21
|
+
* How far down a table group the header cells start. The document band starts
|
|
22
|
+
* at the top border, over the card's top padding, and keeps its own room over
|
|
23
|
+
* the line; a view sets its icon line inside that padding instead.
|
|
24
24
|
*/
|
|
25
25
|
export declare function getHeaderCellsY(source?: GeometrySource): number;
|
|
26
26
|
/**
|
|
@@ -80,9 +80,9 @@ export declare function getColumnCellsX(source?: GeometrySource): number;
|
|
|
80
80
|
/** The comment width a table draws at, clamped by the setting when it is set. */
|
|
81
81
|
export declare function getWidthComment(state: RootState, table: Table): number;
|
|
82
82
|
/**
|
|
83
|
-
* The name and comment boxes
|
|
84
|
-
* scene that draws them and the overlay that edits them, so an editor
|
|
85
|
-
*
|
|
83
|
+
* The name and comment boxes past a header's table icon. One list feeds the
|
|
84
|
+
* scene that draws them and the overlay that edits them, so an editor never
|
|
85
|
+
* sits anywhere but on the text it replaces. A view draws the name alone.
|
|
86
86
|
*/
|
|
87
87
|
export declare function getHeaderCellSlots(state: RootState, table: Table, source?: GeometrySource): CellSlot[];
|
|
88
88
|
/**
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The svg path of the colour a table wears along its left edge: the part of
|
|
3
|
+
* the card's outline left of the strip's width, so it follows both rounded
|
|
4
|
+
* corners where a rect that narrow could only round its own.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* <k-path data={getColorEdgePath(rect.height)} fill={table.ui.color} />
|
|
8
|
+
*/
|
|
9
|
+
export declare function getColorEdgePath(height: number): string;
|
|
10
|
+
//# sourceMappingURL=colorEdge.d.ts.map
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FC } from '@dineug/r-html';
|
|
2
2
|
import { SceneMouseEvent } from '../../sceneTokens';
|
|
3
|
+
import { DiffPaths } from '../../../diff-viewer/diff';
|
|
3
4
|
import { Column } from '../../../../../internal-types';
|
|
4
5
|
import { GeometrySource } from '../../../../../utils/draw-relationship/geometrySource';
|
|
5
6
|
export type ColumnProps = {
|
|
@@ -15,17 +16,25 @@ export type ColumnProps = {
|
|
|
15
16
|
* for. Decided by the scene, which walks the links once for every card.
|
|
16
17
|
*/
|
|
17
18
|
related?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* What the diff pane this row is drawn in changed of its column, which tints
|
|
21
|
+
* those cells. A prop for the reason source is one, and null outside a pane.
|
|
22
|
+
*/
|
|
23
|
+
diffPaths?: DiffPaths | null;
|
|
18
24
|
/**
|
|
19
25
|
* How far the light has come up on the card this row is drawn in, which is
|
|
20
26
|
* what the row tint and the type cell above are both drawn at. One number, so
|
|
21
27
|
* the two of them come up over the one span of time and a document row reads none of it.
|
|
22
28
|
*/
|
|
23
29
|
litAlpha?: number;
|
|
24
|
-
/**
|
|
30
|
+
/**
|
|
31
|
+
* Whether the card rules a line under this row. A view card rules one under
|
|
32
|
+
* every row but the last, and a document table rules none.
|
|
33
|
+
*/
|
|
25
34
|
divider?: boolean;
|
|
26
35
|
/**
|
|
27
|
-
* Whether this is the row a
|
|
28
|
-
*
|
|
36
|
+
* Whether this is the row a card ends at. A card draws no padding under its
|
|
37
|
+
* rows, so the last one meets the card's bottom border and takes the two
|
|
29
38
|
* corners it is rounded by, or its square tint would stand outside them.
|
|
30
39
|
*/
|
|
31
40
|
last?: boolean;
|
|
@@ -9,6 +9,12 @@ export type MoveEntityOptions = {
|
|
|
9
9
|
selectType: SelectType;
|
|
10
10
|
/** The scene kinds a drag never starts from in the scene pressed, as closest read their classes. */
|
|
11
11
|
blockedKinds: (source: GeometrySource) => readonly string[];
|
|
12
|
+
/**
|
|
13
|
+
* The kinds whose press is a click as well: the drag waits for the pointer
|
|
14
|
+
* to travel before it lifts the entity into the drag layer, which takes it
|
|
15
|
+
* off the hit canvas, so a click or a double click there lands where it pressed.
|
|
16
|
+
*/
|
|
17
|
+
clickKinds?: (source: GeometrySource) => readonly string[];
|
|
12
18
|
/**
|
|
13
19
|
* The scene the component already stands in, handed down rather than read
|
|
14
20
|
* again here, so a leaf pays for one context subscription and not two.
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import { RootState } from '../../../engine/state';
|
|
2
2
|
import { Column, Table } from '../../../internal-types';
|
|
3
|
+
import { Theme } from '../../../themes/tokens';
|
|
3
4
|
/**
|
|
4
5
|
* Map<uuid, [tag, Map<path, diff>]>
|
|
5
6
|
*/
|
|
6
7
|
export type DiffMap = Map<string, DiffTuple>;
|
|
7
|
-
|
|
8
|
+
/** Map<path, diff> for one entity, each path spelled as the FocusType of the cell showing it. */
|
|
9
|
+
export type DiffPaths = Map<string, number>;
|
|
10
|
+
type DiffTuple = [string, DiffPaths];
|
|
8
11
|
type NameToTableMap = Map<string, {
|
|
9
12
|
table: Table;
|
|
10
13
|
nameToColumnMap: Map<string, Column>;
|
|
@@ -15,6 +18,10 @@ export declare const Diff: {
|
|
|
15
18
|
};
|
|
16
19
|
export declare function diffState(prevState: RootState, state: RootState): [DiffMap, DiffMap];
|
|
17
20
|
export declare function getNameToTableMap({ doc: { tableIds }, collections, }: RootState): NameToTableMap;
|
|
18
|
-
|
|
21
|
+
/**
|
|
22
|
+
* The background a cell of one entity sits on in a diff pane: the insert or the
|
|
23
|
+
* delete colour its own path carries, and null for a path that did not change.
|
|
24
|
+
*/
|
|
25
|
+
export declare function diffFill(theme: Theme, paths: DiffPaths | null | undefined, path: string): string | null;
|
|
19
26
|
export {};
|
|
20
27
|
//# sourceMappingURL=diff.d.ts.map
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { DiffMap } from './diff';
|
|
2
|
+
import { Ctx } from '../../../internal-types';
|
|
3
|
+
/**
|
|
4
|
+
* The changes a diff pane tints its cells by. ErdViewer alone provides one, so
|
|
5
|
+
* every other scene reads null and draws no tint, and no node for one either.
|
|
6
|
+
*/
|
|
7
|
+
export declare const diffContext: import('@dineug/r-html').Context<DiffMap | null>;
|
|
8
|
+
export declare const useDiffMap: (ctx: Ctx) => import('@dineug/r-html').Ref<DiffMap | null>;
|
|
9
|
+
//# sourceMappingURL=diffContext.d.ts.map
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type MenuBox = {
|
|
2
|
+
left: number;
|
|
3
|
+
top: number;
|
|
4
|
+
width: number;
|
|
5
|
+
height: number;
|
|
6
|
+
};
|
|
7
|
+
export type WindowSize = {
|
|
8
|
+
width: number;
|
|
9
|
+
height: number;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* How far a menu drawn at box moves into the window: back from the right and
|
|
13
|
+
* bottom edges, never past the left and top. A submenu the right edge cuts
|
|
14
|
+
* flips to end at flipRight instead, unless the left edge would cut it more.
|
|
15
|
+
*/
|
|
16
|
+
export declare function fitMenu(box: MenuBox, view: WindowSize, flipRight?: number): {
|
|
17
|
+
dx: number;
|
|
18
|
+
dy: number;
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=fitMenu.d.ts.map
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
|
|
2
|
+
/** The band the name stands in, one input line and its room as in the scene. */
|
|
2
3
|
export declare const header: import('@dineug/r-html').CSSTemplateLiterals;
|
|
4
|
+
/**
|
|
5
|
+
* The colour along the left edge, over the border. The box is wider than the
|
|
6
|
+
* corner it rounds and cut back to the strip, since a radius wider than its
|
|
7
|
+
* own box is scaled down to fit and would no longer follow the card's.
|
|
8
|
+
*/
|
|
3
9
|
export declare const headerColor: import('@dineug/r-html').CSSTemplateLiterals;
|
|
4
|
-
export declare const headerButtonWrap: import('@dineug/r-html').CSSTemplateLiterals;
|
|
5
10
|
export declare const headerInputWrap: import('@dineug/r-html').CSSTemplateLiterals;
|
|
6
11
|
//# sourceMappingURL=Table.styles.d.ts.map
|
|
@@ -8,6 +8,11 @@ export type ColumnCellProps = {
|
|
|
8
8
|
value: string;
|
|
9
9
|
onEditEnd?: () => void;
|
|
10
10
|
};
|
|
11
|
+
/**
|
|
12
|
+
* The hints a typed data type offers: a fuzzy match over the names, or none
|
|
13
|
+
* for blank text and for text that has gone past a whole name.
|
|
14
|
+
*/
|
|
15
|
+
export declare function searchDataTypeHints(hints: DataTypeHint[], value: string): DataTypeHint[];
|
|
11
16
|
/**
|
|
12
17
|
* Data type autocomplete state and key handling for a column cell, shared by
|
|
13
18
|
* the DOM cell and by the Konva cell that replaces it.
|
|
@@ -3,6 +3,9 @@
|
|
|
3
3
|
* Stage, so nothing here is ever larger than the box it sits in.
|
|
4
4
|
*/
|
|
5
5
|
export declare const root: import('@dineug/r-html').CSSTemplateLiterals;
|
|
6
|
-
/**
|
|
6
|
+
/**
|
|
7
|
+
* The Stage container, viewport sized, which konva fills with its own canvas.
|
|
8
|
+
* It takes every touch itself, so a pinch on it zooms the graph and not the page.
|
|
9
|
+
*/
|
|
7
10
|
export declare const stage: import('@dineug/r-html').CSSTemplateLiterals;
|
|
8
11
|
//# sourceMappingURL=Visualization.styles.d.ts.map
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { KonvaEventObject } from 'konva/lib/Node';
|
|
2
|
+
import { Subscription } from 'rxjs';
|
|
3
|
+
import { DragMove } from '../../utils/globalEventObservable';
|
|
4
|
+
export type CapturedDragObserver = {
|
|
5
|
+
next: (move: DragMove) => void;
|
|
6
|
+
complete: () => void;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Follows a drag pressed on a konva shape, holding the pointer on that shape
|
|
10
|
+
* until the lift. Konva tests a move against the hit graph the last draw left,
|
|
11
|
+
* so a pointer faster than a draw would otherwise leave the shape it holds.
|
|
12
|
+
*/
|
|
13
|
+
export declare function captureDrag(event: KonvaEventObject<Event>, { next, complete }: CapturedDragObserver): Subscription;
|
|
14
|
+
//# sourceMappingURL=captureDrag.d.ts.map
|
|
@@ -11,8 +11,8 @@ export type ViewGestureOptions = {
|
|
|
11
11
|
};
|
|
12
12
|
/**
|
|
13
13
|
* The gestures a view scene takes on its box: the wheel moves the screen and
|
|
14
|
-
* with the modifier zooms it, a press on the background pans,
|
|
15
|
-
* modifier it opens the marquee
|
|
14
|
+
* with the modifier zooms it, as a pinch does, a press on the background pans,
|
|
15
|
+
* and with the modifier it opens the marquee. Every one lands in the view named.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* const { handleWheel, handleMousedown } = useViewGestures(ctx, { root, canvas, source });
|
|
@@ -2,23 +2,48 @@ export declare const START_X = 200;
|
|
|
2
2
|
export declare const START_Y = 100;
|
|
3
3
|
export declare const START_ADD = 50;
|
|
4
4
|
export declare const DUPLICATE_MIN_MOVE = 4;
|
|
5
|
+
/**
|
|
6
|
+
* How far, in screen px, a press on a cell that also takes a click travels
|
|
7
|
+
* before it carries its entity, so a double click that wobbles still edits.
|
|
8
|
+
*/
|
|
9
|
+
export declare const CLICK_DRAG_MIN_MOVE = 4;
|
|
5
10
|
export declare const DEFAULT_WIDTH = 1200;
|
|
6
11
|
export declare const DEFAULT_HEIGHT: number;
|
|
7
12
|
/** The px a table cell's text is drawn at, which the scene and the view header scale read. */
|
|
8
13
|
export declare const CELL_FONT_SIZE = 12;
|
|
9
14
|
export declare const INPUT_HEIGHT = 20;
|
|
10
15
|
export declare const INPUT_MARGIN_RIGHT = 8;
|
|
16
|
+
/** The height of one row in the data type autocomplete list. */
|
|
17
|
+
export declare const DATA_TYPE_HINT_ROW_HEIGHT = 20;
|
|
18
|
+
/** How many of those rows the list shows before it scrolls the rest. */
|
|
19
|
+
export declare const DATA_TYPE_HINT_MAX_ROWS = 10;
|
|
11
20
|
export declare const HEADER_ICON_HEIGHT = 12;
|
|
12
21
|
export declare const HEADER_ICON_MARGIN_BOTTOM = 4;
|
|
13
22
|
export declare const TABLE_BORDER = 1;
|
|
14
23
|
export declare const TABLE_PADDING = 8;
|
|
15
24
|
export declare const TABLE_HEADER_PADDING = 2;
|
|
16
|
-
export declare const TABLE_HEADER_ICON_MARGIN_BOTTOM = 2;
|
|
17
25
|
export declare const TABLE_HEADER_INPUT_HEIGHT: number;
|
|
26
|
+
/** The room a table's header band keeps above and below its input line. */
|
|
27
|
+
export declare const TABLE_HEADER_BAND_PADDING = 2;
|
|
28
|
+
/**
|
|
29
|
+
* What a table's header adds under the card's top padding. The band starts at
|
|
30
|
+
* the top border instead, over that padding: one input line and its own room,
|
|
31
|
+
* a little taller than a row, holding the add column and remove buttons too.
|
|
32
|
+
*/
|
|
18
33
|
export declare const TABLE_HEADER_HEIGHT: number;
|
|
19
34
|
export declare const TABLE_HEADER_BUTTON_MARGIN_LEFT = 4;
|
|
35
|
+
/** How wide the colour a table wears along its left edge is drawn. */
|
|
36
|
+
export declare const TABLE_COLOR_WIDTH = 4;
|
|
37
|
+
/** The strip the two header buttons take along the right end of the header line. */
|
|
38
|
+
export declare const TABLE_HEADER_BUTTONS_WIDTH: number;
|
|
20
39
|
export declare const COLUMN_DELETE_WIDTH = 12;
|
|
21
40
|
export declare const COLUMN_KEY_WIDTH = 12;
|
|
41
|
+
/** The table icon before the name, at the key badge's size so the two stand in one column. */
|
|
42
|
+
export declare const TABLE_HEADER_ICON_SIZE = 12;
|
|
43
|
+
/** The gap after that icon, the one a key badge keeps, which lines the name up with the column names. */
|
|
44
|
+
export declare const TABLE_HEADER_ICON_GAP = 8;
|
|
45
|
+
/** Where the name starts along the header line, past that icon and its gap. */
|
|
46
|
+
export declare const TABLE_HEADER_NAME_X: number;
|
|
22
47
|
export declare const COLUMN_MIN_WIDTH = 60;
|
|
23
48
|
export declare const COLUMN_NOT_NULL_WIDTH = 35;
|
|
24
49
|
export declare const COLUMN_UNIQUE_WIDTH = 22;
|
|
@@ -29,6 +54,8 @@ export declare const COLUMN_HEIGHT: number;
|
|
|
29
54
|
export declare const VIEW_TABLE_HEADER_ICON_SIZE = 16;
|
|
30
55
|
/** The gap between that icon and the name, the reference's one unit of spacing. */
|
|
31
56
|
export declare const VIEW_TABLE_HEADER_ICON_GAP = 4;
|
|
57
|
+
/** Where a view card's name starts along its header line, past that icon and gap. */
|
|
58
|
+
export declare const VIEW_TABLE_HEADER_NAME_X: number;
|
|
32
59
|
/** The size a view card draws its header name at, over the size its rows take. */
|
|
33
60
|
export declare const VIEW_TABLE_HEADER_FONT_SIZE = 14;
|
|
34
61
|
/**
|
|
@@ -43,11 +70,7 @@ export declare const VIEW_TABLE_HEADER_FONT_SCALE: number;
|
|
|
43
70
|
* of its own synthesises one wider still, so the slot carries the room for both.
|
|
44
71
|
*/
|
|
45
72
|
export declare const VIEW_TABLE_HEADER_WEIGHT_SCALE = 1.04;
|
|
46
|
-
/**
|
|
47
|
-
* The header a view card draws: the icon line with the card's own padding under
|
|
48
|
-
* it, and none of the icon band the document header keeps above the name,
|
|
49
|
-
* because a view offers no edit affordance there.
|
|
50
|
-
*/
|
|
73
|
+
/** The header a view card draws: the icon line with the card's own padding under it. */
|
|
51
74
|
export declare const VIEW_TABLE_HEADER_HEIGHT: number;
|
|
52
75
|
/** The key badge a view row draws, at the size the reference gives a row icon. */
|
|
53
76
|
export declare const VIEW_COLUMN_ICON_SIZE = 16;
|
package/dist/engine/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
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";
|
|
2
2
|
import { isEmpty as p } from "es-toolkit/compat";
|
|
3
3
|
import { omit as m } from "es-toolkit";
|
|
4
4
|
import { Observable as h, Subject as g, debounceTime as _, map as v } from "rxjs";
|
|
5
5
|
//#region src/engine/replication-store.ts
|
|
6
6
|
var y = { change: "change" };
|
|
7
7
|
function b(b) {
|
|
8
|
-
let x = /* @__PURE__ */ new Set(), S =
|
|
8
|
+
let x = /* @__PURE__ */ new Set(), S = i(b), C = u(S, !1);
|
|
9
9
|
C.dispatchSync(a({
|
|
10
10
|
width: 0,
|
|
11
11
|
height: 0
|
|
12
12
|
}));
|
|
13
|
-
let w =
|
|
13
|
+
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), () => {
|
|
14
14
|
D.delete(e);
|
|
15
15
|
}), A = (e, t) => {
|
|
16
16
|
D.forEach((r) => {
|
|
@@ -18,16 +18,16 @@ function b(b) {
|
|
|
18
18
|
n(i, t);
|
|
19
19
|
});
|
|
20
20
|
}, j = (n) => {
|
|
21
|
-
let
|
|
22
|
-
C.dispatchSync(
|
|
23
|
-
(
|
|
21
|
+
let i = f(n);
|
|
22
|
+
C.dispatchSync(r(p(i) ? "{}" : i)), O.run(e(C.state)).then((e) => {
|
|
23
|
+
(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()));
|
|
24
24
|
});
|
|
25
25
|
}, M = (e) => {
|
|
26
26
|
T.next([e].flat());
|
|
27
27
|
};
|
|
28
|
-
return x.add(E.subscribe(() => A(y.change, void 0))).add(T.pipe(o(
|
|
28
|
+
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({
|
|
29
29
|
get value() {
|
|
30
|
-
return
|
|
30
|
+
return e(C.state);
|
|
31
31
|
},
|
|
32
32
|
on: k,
|
|
33
33
|
setInitialValue: j,
|
|
@@ -37,7 +37,8 @@ export declare const loadSchemaGraphQLAction$: (value: string) => GeneratorActio
|
|
|
37
37
|
export declare const loadSchemaDBMLAction$: (value: string) => GeneratorAction;
|
|
38
38
|
export declare const loadSchemaAMLAction$: (value: string) => GeneratorAction;
|
|
39
39
|
export declare const dragstartColumnAction$: ($mod: boolean) => GeneratorAction;
|
|
40
|
-
|
|
40
|
+
/** A null targetId drops past the last row, which appends. */
|
|
41
|
+
export declare const dragoverColumnAction$: (targetId: string | null, targetTableId: string) => GeneratorAction;
|
|
41
42
|
export declare const columnKeyHoverStartAction$: (columnId: string) => GeneratorAction;
|
|
42
43
|
export declare const columnKeyHoverEndAction$: () => GeneratorAction;
|
|
43
44
|
export declare const actions$: {
|
|
@@ -59,7 +60,7 @@ export declare const actions$: {
|
|
|
59
60
|
loadSchemaDBMLAction$: (value: string) => GeneratorAction;
|
|
60
61
|
loadSchemaAMLAction$: (value: string) => GeneratorAction;
|
|
61
62
|
dragstartColumnAction$: ($mod: boolean) => GeneratorAction;
|
|
62
|
-
dragoverColumnAction$: (targetId: string, targetTableId: string) => GeneratorAction;
|
|
63
|
+
dragoverColumnAction$: (targetId: string | null, targetTableId: string) => GeneratorAction;
|
|
63
64
|
columnKeyHoverStartAction$: (columnId: string) => GeneratorAction;
|
|
64
65
|
columnKeyHoverEndAction$: () => GeneratorAction;
|
|
65
66
|
};
|
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
import { GeneratorAction } from '../../generator.actions';
|
|
2
|
+
import { Point } from '../../../internal-types';
|
|
2
3
|
import { GeometrySource } from '../../../utils/draw-relationship/geometrySource';
|
|
3
4
|
/** The origin it adds the movement to is the one getMovementScrollTo solved against. */
|
|
4
5
|
export declare const changeZoomLevelAction$: (value: number, source?: GeometrySource) => GeneratorAction;
|
|
5
6
|
export declare const streamZoomLevelAction$: (value: number, source?: GeometrySource) => GeneratorAction;
|
|
7
|
+
export type PinchZoom = {
|
|
8
|
+
/** The zoom the pinch has reached, which the store rounds as it lands. */
|
|
9
|
+
zoomLevel: number;
|
|
10
|
+
/** Where the pinch is centred now, in the scene box. */
|
|
11
|
+
screen: Point;
|
|
12
|
+
/** The scene point the pinch holds, else the one under screen. */
|
|
13
|
+
scene?: Point;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* A step of a pinch: the zoom it has reached, with the scene point it holds put
|
|
17
|
+
* under where it is centred now, so two fingers zoom about their midpoint and
|
|
18
|
+
* pan as it travels. Streamed, so a whole pinch is one undo entry as a wheel is.
|
|
19
|
+
*/
|
|
20
|
+
export declare const pinchZoomAction$: ({ zoomLevel, screen, scene }: PinchZoom, source?: GeometrySource) => GeneratorAction;
|
|
6
21
|
export declare const actions$: {
|
|
7
22
|
changeZoomLevelAction$: (value: number, source?: GeometrySource) => GeneratorAction;
|
|
8
23
|
streamZoomLevelAction$: (value: number, source?: GeometrySource) => GeneratorAction;
|
package/dist/engine/tag.d.ts
CHANGED
|
@@ -4,6 +4,8 @@ export declare const Tag: {
|
|
|
4
4
|
readonly shared: 1;
|
|
5
5
|
readonly changeOnly: 2;
|
|
6
6
|
readonly following: 4;
|
|
7
|
+
/** A step a pointer drag streams, where an undo of the same move is one jump. */
|
|
8
|
+
readonly drag: 8;
|
|
7
9
|
};
|
|
8
10
|
export declare function attachActionTag(tag: number, action: AnyAction): AnyAction;
|
|
9
11
|
export declare function attachActionsTag(tag: number, actions: AnyAction[]): AnyAction[];
|