@metadev/daga 1.4.1 → 1.4.3
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/Changelog.md +31 -1
- package/assets/icon/property/add.svg +23 -3
- package/assets/icon/property/gear.svg +3 -0
- package/assets/icon/property/move.svg +35 -0
- package/assets/styles/_property-editor.scss +285 -157
- package/assets/styles/daga.scss +149 -156
- package/fesm2022/metadev-daga.mjs +2563 -993
- package/fesm2022/metadev-daga.mjs.map +1 -1
- package/index.d.ts +8 -6
- package/lib/daga.module.d.ts +4 -5
- package/lib/diagram-editor/diagram/collab/collab-action.d.ts +212 -0
- package/lib/diagram-editor/diagram/collab/collab-client.d.ts +57 -0
- package/lib/diagram-editor/diagram/collab/collab-engine.d.ts +46 -0
- package/lib/diagram-editor/diagram/collab/message-types.d.ts +97 -0
- package/lib/diagram-editor/diagram/collab/primitives.d.ts +22 -0
- package/lib/diagram-editor/diagram/converters/daga-exporter.d.ts +1 -1
- package/lib/diagram-editor/diagram/converters/daga-model.d.ts +57 -0
- package/lib/diagram-editor/diagram/diagram-action.d.ts +46 -66
- package/lib/diagram-editor/diagram/diagram-canvas.d.ts +3 -1
- package/lib/diagram-editor/diagram/diagram-connection.d.ts +53 -4
- package/lib/diagram-editor/diagram/diagram-element.d.ts +29 -2
- package/lib/diagram-editor/diagram/diagram-field.d.ts +22 -4
- package/lib/diagram-editor/diagram/diagram-model.d.ts +6 -0
- package/lib/diagram-editor/diagram/diagram-node.d.ts +88 -5
- package/lib/diagram-editor/diagram/diagram-port.d.ts +31 -4
- package/lib/diagram-editor/diagram/diagram-property.d.ts +192 -19
- package/lib/diagram-editor/diagram/diagram-section.d.ts +57 -4
- package/lib/interfaces/canvas.d.ts +7 -0
- package/lib/property-editor/autocomplete/autocomplete.component.d.ts +39 -0
- package/lib/{object-editor → property-editor/object-editor}/object-editor.component.d.ts +7 -9
- package/lib/property-editor/option-list-editor/option-list-editor.component.d.ts +33 -0
- package/lib/property-editor/property-editor.component.d.ts +2 -0
- package/lib/property-editor/property-settings/property-settings.component.d.ts +35 -0
- package/lib/{text-list-editor → property-editor/text-list-editor}/text-list-editor.component.d.ts +5 -3
- package/lib/{text-map-editor → property-editor/text-map-editor}/text-map-editor.component.d.ts +2 -2
- package/package.json +4 -4
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import { Canvas } from '../../interfaces/canvas';
|
|
2
2
|
import { Point } from '../../util/canvas-util';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { DiagramField } from './diagram-field';
|
|
6
|
-
import { DiagramModel } from './diagram-model';
|
|
7
|
-
import { DiagramNode, DiagramNodeType } from './diagram-node';
|
|
8
|
-
import { DiagramPort } from './diagram-port';
|
|
9
|
-
import { ValueSet } from './diagram-property';
|
|
10
|
-
import { DiagramSection } from './diagram-section';
|
|
3
|
+
import { DiagramConnectionType } from './diagram-connection';
|
|
4
|
+
import { DiagramNodeType, DiagramNodeGeometry } from './diagram-node';
|
|
11
5
|
/**
|
|
12
6
|
* A queue of recent actions taken by the user that can be undone and redone.
|
|
13
7
|
* @private
|
|
@@ -56,7 +50,21 @@ export declare class ActionQueue {
|
|
|
56
50
|
* @private
|
|
57
51
|
*/
|
|
58
52
|
export interface DiagramAction {
|
|
53
|
+
/**
|
|
54
|
+
* Perform this action on the diagram for the first time.
|
|
55
|
+
* Performing the same action with the same parameters on a diagram with the same state should always result in the same changes to the state of the diagram.
|
|
56
|
+
*/
|
|
57
|
+
do(): void;
|
|
58
|
+
/**
|
|
59
|
+
* Undo the changes in the diagram caused by this action.
|
|
60
|
+
* After having called `do()` followed by `undo()`, calling `redo()` followed by `undo()` any number of times should always result in no net changes to the state of the diagram.
|
|
61
|
+
*/
|
|
59
62
|
undo(): void;
|
|
63
|
+
/**
|
|
64
|
+
* Redo the changes in the diagram caused by this action.
|
|
65
|
+
* After having called `do()`, calling `undo()` followed by `redo()` any number of times should always result in no net changes to the state of the diagram.
|
|
66
|
+
* `redo()` is usually equivalent to `do()`, but not always.
|
|
67
|
+
*/
|
|
60
68
|
redo(): void;
|
|
61
69
|
}
|
|
62
70
|
/**
|
|
@@ -85,7 +93,7 @@ export declare enum DiagramActions {
|
|
|
85
93
|
EditField = "edit-field",
|
|
86
94
|
/**
|
|
87
95
|
* Action that corresponds to moving a node.
|
|
88
|
-
* @see
|
|
96
|
+
* @see SetGeometryAction
|
|
89
97
|
* @public
|
|
90
98
|
*/
|
|
91
99
|
MoveNode = "move-node",
|
|
@@ -97,13 +105,13 @@ export declare enum DiagramActions {
|
|
|
97
105
|
Remove = "remove",
|
|
98
106
|
/**
|
|
99
107
|
* Action that corresponds to altering a node's dimensions.
|
|
100
|
-
* @see
|
|
108
|
+
* @see SetGeometryActionAction
|
|
101
109
|
* @public
|
|
102
110
|
*/
|
|
103
111
|
StretchNode = "stretch-node",
|
|
104
112
|
/**
|
|
105
113
|
* Action that corresponds to altering a sections's dimensions.
|
|
106
|
-
* @see
|
|
114
|
+
* @see SetGeometryAction
|
|
107
115
|
* @public
|
|
108
116
|
*/
|
|
109
117
|
StretchSection = "stretch-section",
|
|
@@ -132,60 +140,27 @@ export declare class AddNodeAction implements DiagramAction {
|
|
|
132
140
|
values?: {
|
|
133
141
|
[key: string]: unknown;
|
|
134
142
|
};
|
|
135
|
-
id
|
|
136
|
-
sectionIds?: (string | undefined)[];
|
|
137
|
-
sectionPortIds?: (string | undefined)[][];
|
|
138
|
-
sectionPortLabelIds?: (string | undefined)[][];
|
|
139
|
-
portIds?: (string | undefined)[];
|
|
140
|
-
portLabelIds?: (string | undefined)[];
|
|
141
|
-
labelId?: string | undefined;
|
|
143
|
+
id: string;
|
|
142
144
|
constructor(canvas: Canvas, type: DiagramNodeType, coords: Point, label?: string, values?: {
|
|
143
145
|
[key: string]: unknown;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
redo(): void;
|
|
147
|
-
}
|
|
148
|
-
/**
|
|
149
|
-
* Action which consists of moving a node.
|
|
150
|
-
* @see DiagramNode
|
|
151
|
-
* @private
|
|
152
|
-
*/
|
|
153
|
-
export declare class MoveNodeAction implements DiagramAction {
|
|
154
|
-
canvas: Canvas;
|
|
155
|
-
nodeId: string;
|
|
156
|
-
from: Point;
|
|
157
|
-
to: Point;
|
|
158
|
-
constructor(canvas: Canvas, nodeId: string, from: Point, to: Point);
|
|
146
|
+
});
|
|
147
|
+
do(): void;
|
|
159
148
|
undo(): void;
|
|
160
149
|
redo(): void;
|
|
161
150
|
}
|
|
162
151
|
/**
|
|
163
|
-
* Action which consists of changing
|
|
152
|
+
* Action which consists of changing a node's geometry: moving, stretching, or stretching sections.
|
|
164
153
|
* @see DiagramNode
|
|
165
154
|
* @private
|
|
166
155
|
*/
|
|
167
|
-
export declare class
|
|
156
|
+
export declare class SetGeometryAction implements DiagramAction {
|
|
168
157
|
canvas: Canvas;
|
|
158
|
+
intent: DiagramActions.MoveNode | DiagramActions.StretchNode | DiagramActions.StretchSection;
|
|
169
159
|
nodeId: string;
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
to:
|
|
173
|
-
|
|
174
|
-
undo(): void;
|
|
175
|
-
redo(): void;
|
|
176
|
-
}
|
|
177
|
-
/**
|
|
178
|
-
* Action which consists of changing the dimensions of a section in a given direction.
|
|
179
|
-
* @see DiagramSection
|
|
180
|
-
* @private
|
|
181
|
-
*/
|
|
182
|
-
export declare class StretchSectionAction implements DiagramAction {
|
|
183
|
-
canvas: Canvas;
|
|
184
|
-
sectionId: string;
|
|
185
|
-
direction: Side;
|
|
186
|
-
from: number;
|
|
187
|
-
to: number;
|
|
188
|
-
constructor(canvas: Canvas, sectionId: string, direction: Side, from: number, to: number);
|
|
160
|
+
from: DiagramNodeGeometry;
|
|
161
|
+
to: DiagramNodeGeometry;
|
|
162
|
+
constructor(canvas: Canvas, intent: DiagramActions.MoveNode | DiagramActions.StretchNode | DiagramActions.StretchSection, nodeId: string, from: DiagramNodeGeometry, to: DiagramNodeGeometry);
|
|
163
|
+
do(): void;
|
|
189
164
|
undo(): void;
|
|
190
165
|
redo(): void;
|
|
191
166
|
}
|
|
@@ -199,8 +174,9 @@ export declare class AddConnectionAction implements DiagramAction {
|
|
|
199
174
|
type: DiagramConnectionType;
|
|
200
175
|
startId: string;
|
|
201
176
|
endId: string;
|
|
202
|
-
id
|
|
203
|
-
constructor(canvas: Canvas, type: DiagramConnectionType, startId: string, endId: string
|
|
177
|
+
id: string;
|
|
178
|
+
constructor(canvas: Canvas, type: DiagramConnectionType, startId: string, endId: string);
|
|
179
|
+
do(): void;
|
|
204
180
|
undo(): void;
|
|
205
181
|
redo(): void;
|
|
206
182
|
}
|
|
@@ -215,6 +191,7 @@ export declare class EditFieldAction implements DiagramAction {
|
|
|
215
191
|
from: string;
|
|
216
192
|
to: string;
|
|
217
193
|
constructor(canvas: Canvas, fieldId: string, from: string, to: string);
|
|
194
|
+
do(): void;
|
|
218
195
|
undo(): void;
|
|
219
196
|
redo(): void;
|
|
220
197
|
}
|
|
@@ -224,7 +201,7 @@ export declare class EditFieldAction implements DiagramAction {
|
|
|
224
201
|
* @private
|
|
225
202
|
*/
|
|
226
203
|
export declare class UpdateValuesAction implements DiagramAction {
|
|
227
|
-
|
|
204
|
+
canvas: Canvas;
|
|
228
205
|
id: string | undefined;
|
|
229
206
|
from: {
|
|
230
207
|
[key: string]: unknown;
|
|
@@ -232,32 +209,35 @@ export declare class UpdateValuesAction implements DiagramAction {
|
|
|
232
209
|
to: {
|
|
233
210
|
[key: string]: unknown;
|
|
234
211
|
};
|
|
235
|
-
constructor(
|
|
212
|
+
constructor(canvas: Canvas, id: string | undefined, from: {
|
|
236
213
|
[key: string]: unknown;
|
|
237
214
|
}, to: {
|
|
238
215
|
[key: string]: unknown;
|
|
239
216
|
});
|
|
240
|
-
|
|
217
|
+
do(): void;
|
|
241
218
|
undo(): void;
|
|
242
219
|
redo(): void;
|
|
243
220
|
}
|
|
244
221
|
/**
|
|
245
222
|
* Action which consists of removing elements from a diagram.
|
|
223
|
+
*
|
|
224
|
+
* You should only include an element in this action if the element itself is explicitly removed.
|
|
225
|
+
* Elements removed as a consequence of a removing another element
|
|
226
|
+
* (e.g., removing a node removes all of its sections)
|
|
227
|
+
* will be handled automatically, in a way that converges in the case
|
|
228
|
+
* of concurrent collaborative actions.
|
|
229
|
+
*
|
|
246
230
|
* @private
|
|
247
231
|
*/
|
|
248
232
|
export declare class RemoveAction implements DiagramAction {
|
|
249
|
-
|
|
250
|
-
nodes: DiagramNode[];
|
|
233
|
+
canvas: Canvas;
|
|
251
234
|
nodeIds: string[];
|
|
252
|
-
sections: DiagramSection[];
|
|
253
235
|
sectionIds: string[];
|
|
254
|
-
ports: DiagramPort[];
|
|
255
236
|
portIds: string[];
|
|
256
|
-
connections: DiagramConnection[];
|
|
257
237
|
connectionIds: string[];
|
|
258
|
-
fields: DiagramField[];
|
|
259
238
|
fieldIds: string[];
|
|
260
|
-
constructor(
|
|
239
|
+
constructor(canvas: Canvas, nodeIds: string[], sectionIds: string[], portIds: string[], connectionIds: string[], fieldIds: string[]);
|
|
240
|
+
do(): void;
|
|
261
241
|
undo(): void;
|
|
262
242
|
redo(): void;
|
|
263
243
|
}
|
|
@@ -4,6 +4,7 @@ import { DiagramValidator } from '../../errors/diagram-validator';
|
|
|
4
4
|
import { Canvas } from '../../interfaces/canvas';
|
|
5
5
|
import { DiagramEditor } from '../../interfaces/diagram-editor';
|
|
6
6
|
import { Point } from '../../util/canvas-util';
|
|
7
|
+
import { CursorStyle } from '../../util/style';
|
|
7
8
|
import { ActionQueue, DiagramActions } from './diagram-action';
|
|
8
9
|
import { DiagramConfig } from './diagram-config';
|
|
9
10
|
import { DiagramConnection, DiagramConnectionType } from './diagram-connection';
|
|
@@ -11,7 +12,7 @@ import { DiagramElement } from './diagram-element';
|
|
|
11
12
|
import { DiagramModel } from './diagram-model';
|
|
12
13
|
import { DiagramPort } from './diagram-port';
|
|
13
14
|
import { ValueSet } from './diagram-property';
|
|
14
|
-
import {
|
|
15
|
+
import { CollabEngine } from './collab/collab-engine';
|
|
15
16
|
/**
|
|
16
17
|
* Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
|
|
17
18
|
* @private
|
|
@@ -49,6 +50,7 @@ export declare class DiagramCanvas implements Canvas {
|
|
|
49
50
|
[key in DiagramActions]?: boolean;
|
|
50
51
|
};
|
|
51
52
|
actionQueue: ActionQueue;
|
|
53
|
+
collabEngine: CollabEngine;
|
|
52
54
|
private static canvasCount;
|
|
53
55
|
private backgroundPatternId;
|
|
54
56
|
private zoomBehavior;
|
|
@@ -25,6 +25,22 @@ export declare const DIAGRAM_CONNECTION_TYPE_DEFAULTS: {
|
|
|
25
25
|
selectedColor: string;
|
|
26
26
|
properties: never[];
|
|
27
27
|
};
|
|
28
|
+
/**
|
|
29
|
+
* Whether a connection can have the same port as both its start port and its end port.
|
|
30
|
+
*/
|
|
31
|
+
export declare const CAN_A_CONNECTION_END_ON_THE_SAME_PORT_IT_STARTS = false;
|
|
32
|
+
/**
|
|
33
|
+
* Whether a connection can have the same ports as another connection.
|
|
34
|
+
*/
|
|
35
|
+
export declare const CAN_A_CONNECTION_HAVE_THE_SAME_PORTS_AS_ANOTHER = false;
|
|
36
|
+
/**
|
|
37
|
+
* Whether a port can have multiple connections.
|
|
38
|
+
*/
|
|
39
|
+
export declare const CAN_CONNECTIONS_SHARE_PORTS = true;
|
|
40
|
+
/**
|
|
41
|
+
* Whether tightening connections is allowed.
|
|
42
|
+
*/
|
|
43
|
+
export declare const CAN_TIGHTEN_CONNECTIONS = true;
|
|
28
44
|
/**
|
|
29
45
|
* A connection type, which holds properties that connections of this type share in common.
|
|
30
46
|
* @see ConnectionTypeConfig
|
|
@@ -131,19 +147,52 @@ export declare class DiagramConnection extends DiagramElement {
|
|
|
131
147
|
*/
|
|
132
148
|
get name(): string;
|
|
133
149
|
set name(name: string);
|
|
134
|
-
constructor(model: DiagramModel, type: DiagramConnectionType, start
|
|
150
|
+
constructor(model: DiagramModel, type: DiagramConnectionType, start: DiagramPort | undefined, end: DiagramPort | undefined, id: string);
|
|
151
|
+
get removed(): boolean;
|
|
135
152
|
updateInView(): void;
|
|
153
|
+
/**
|
|
154
|
+
* Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
|
|
155
|
+
* Add or remove this connection from the list of outgoing connections of ports correspondingly.
|
|
156
|
+
* @public
|
|
157
|
+
* @param start A port.
|
|
158
|
+
*/
|
|
136
159
|
setStart(start?: DiagramPort): void;
|
|
160
|
+
/**
|
|
161
|
+
* Set the end of this connection to the given port or reset this connection's ending port if `undefined`.
|
|
162
|
+
* Add or remove this connection from the list of incoming connections of ports correspondingly.
|
|
163
|
+
* @public
|
|
164
|
+
* @param end A port.
|
|
165
|
+
*/
|
|
137
166
|
setEnd(end?: DiagramPort): void;
|
|
167
|
+
/**
|
|
168
|
+
* Reassign the start and end ports of this connection to ports with less distance between them that have the same root element.
|
|
169
|
+
* If no ports with less distance between them are found, do nothing.
|
|
170
|
+
* @public
|
|
171
|
+
*/
|
|
138
172
|
tighten(): void;
|
|
139
173
|
getPriority(): number;
|
|
140
174
|
}
|
|
141
175
|
export declare class DiagramConnectionSet extends DiagramEntitySet<DiagramConnection> {
|
|
142
176
|
private model;
|
|
177
|
+
/**
|
|
178
|
+
* Set of the possible types of connection that the connections of this set can have.
|
|
179
|
+
* @public
|
|
180
|
+
*/
|
|
143
181
|
types: DiagramEntitySet<DiagramConnectionType>;
|
|
182
|
+
/**
|
|
183
|
+
* Instance a set of connections for the given model. This method is used internally.
|
|
184
|
+
* @private
|
|
185
|
+
*/
|
|
144
186
|
constructor(model: DiagramModel);
|
|
145
|
-
|
|
187
|
+
/**
|
|
188
|
+
* Instance a new connection and add it to this set.
|
|
189
|
+
* @public
|
|
190
|
+
* @param type The type of the connection given as either the type itself or the id of the type.
|
|
191
|
+
* @param start The start port of the connection.
|
|
192
|
+
* @param end The end port of the connection.
|
|
193
|
+
* @param id The id of the connection.
|
|
194
|
+
* @returns The instanced connection.
|
|
195
|
+
*/
|
|
196
|
+
new(type: DiagramConnectionType | string, start: DiagramPort | undefined, end: DiagramPort | undefined, id: string): DiagramConnection;
|
|
146
197
|
remove(id: string): void;
|
|
147
|
-
filter(type?: string, threshold?: number): DiagramConnection[];
|
|
148
|
-
find(type?: string, threshold?: number): DiagramConnection | undefined;
|
|
149
198
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as d3 from 'd3';
|
|
2
2
|
import { DiagramModel } from './diagram-model';
|
|
3
|
+
import { CollabTimestamp } from './collab/primitives';
|
|
3
4
|
/**
|
|
4
5
|
* Default priority value for diagram elements.
|
|
5
6
|
* @private
|
|
@@ -41,7 +42,33 @@ export declare abstract class DiagramElement implements DiagramEntity {
|
|
|
41
42
|
* @private
|
|
42
43
|
*/
|
|
43
44
|
selected: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Whether this diagram element has itself been explicitly removed.
|
|
47
|
+
*
|
|
48
|
+
* Override the `removed` getter so that it returns true if and only if:
|
|
49
|
+
* - `selfRemoved` is true, or
|
|
50
|
+
* - `removed` is true for any of this element's dependencies.
|
|
51
|
+
*
|
|
52
|
+
* For example, a DiagramConnection is removed if either of its ports are removed,
|
|
53
|
+
* even if the connection's own `selfRemoved` field is false.
|
|
54
|
+
* @private
|
|
55
|
+
*/
|
|
56
|
+
selfRemoved: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Collaborative timestamp for selfRemoved.
|
|
59
|
+
* @private
|
|
60
|
+
*/
|
|
61
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
44
62
|
constructor(model: DiagramModel, id: string);
|
|
63
|
+
/**
|
|
64
|
+
* Whether this diagram element has been removed.
|
|
65
|
+
*
|
|
66
|
+
* An element can be removed because it was explicitly removed, or because one of
|
|
67
|
+
* its dependencies was removed. For example, a DiagramConnection depends on both of its ports.
|
|
68
|
+
*
|
|
69
|
+
* @private
|
|
70
|
+
*/
|
|
71
|
+
abstract readonly removed: boolean;
|
|
45
72
|
/**
|
|
46
73
|
* Get the priority of this element to calculate whether it should be filtered out in the view or not.
|
|
47
74
|
* @public
|
|
@@ -112,13 +139,13 @@ export declare class DiagramEntitySet<E extends DiagramEntity> implements Iterab
|
|
|
112
139
|
* @public
|
|
113
140
|
* @returns An array containing the entities of this set that meet the given criteria.
|
|
114
141
|
*/
|
|
115
|
-
filter(): E[];
|
|
142
|
+
filter(predicate: (value: E, index: number, array: E[]) => unknown): E[];
|
|
116
143
|
/**
|
|
117
144
|
* Gets an entity of this set matching specific criteria.
|
|
118
145
|
* @public
|
|
119
146
|
* @returns An entity of this set.
|
|
120
147
|
*/
|
|
121
|
-
find(): E | undefined;
|
|
148
|
+
find(predicate: (value: E, index: number, array: E[]) => unknown): E | undefined;
|
|
122
149
|
/**
|
|
123
150
|
* Gets an entity from this set.
|
|
124
151
|
* @public
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Point } from '../../util/canvas-util';
|
|
2
2
|
import { HorizontalAlign, VerticalAlign } from '../../util/svg-util';
|
|
3
|
+
import { CollabTimestamp } from './collab/primitives';
|
|
3
4
|
import { DiagramElement, DiagramEntitySet } from './diagram-element';
|
|
4
5
|
import { DiagramModel } from './diagram-model';
|
|
5
6
|
import { DiagramNode } from './diagram-node';
|
|
@@ -92,6 +93,11 @@ export declare class DiagramField extends DiagramElement {
|
|
|
92
93
|
*/
|
|
93
94
|
get text(): string;
|
|
94
95
|
set text(value: string);
|
|
96
|
+
/**
|
|
97
|
+
* Collaborative timestamp for text.
|
|
98
|
+
* @public
|
|
99
|
+
*/
|
|
100
|
+
textTimestamp: CollabTimestamp | null;
|
|
95
101
|
/**
|
|
96
102
|
* Whether this field's text can be edited by the user.
|
|
97
103
|
* @public
|
|
@@ -102,17 +108,29 @@ export declare class DiagramField extends DiagramElement {
|
|
|
102
108
|
* @public
|
|
103
109
|
*/
|
|
104
110
|
fit: boolean;
|
|
105
|
-
constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean
|
|
111
|
+
constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean);
|
|
106
112
|
select(): d3.Selection<SVGGElement, unknown, null, unknown> | undefined;
|
|
113
|
+
get removed(): boolean;
|
|
107
114
|
updateInView(): void;
|
|
115
|
+
/**
|
|
116
|
+
* Change the coordinates of this field to the given coordinates.
|
|
117
|
+
* @public
|
|
118
|
+
* @param coords A point in the diagram.
|
|
119
|
+
*/
|
|
108
120
|
move(coords: Point): void;
|
|
109
121
|
getPriority(): number;
|
|
110
122
|
}
|
|
111
123
|
export declare class DiagramFieldSet extends DiagramEntitySet<DiagramField> {
|
|
112
124
|
private model;
|
|
125
|
+
/**
|
|
126
|
+
* Instance a set of fields for the given model. This method is used internally.
|
|
127
|
+
* @private
|
|
128
|
+
*/
|
|
113
129
|
constructor(model: DiagramModel);
|
|
114
|
-
|
|
130
|
+
/**
|
|
131
|
+
* Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
|
|
132
|
+
* @private
|
|
133
|
+
*/
|
|
134
|
+
new(rootElement: DiagramNode | DiagramSection | DiagramPort | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, text: string, editable: boolean, fit: boolean): DiagramField;
|
|
115
135
|
remove(id: string): void;
|
|
116
|
-
filter(threshold?: number): DiagramField[];
|
|
117
|
-
find(threshold?: number): DiagramField | undefined;
|
|
118
136
|
}
|
|
@@ -7,6 +7,7 @@ import { Property, ValueSet } from './diagram-property';
|
|
|
7
7
|
import { DiagramSectionSet } from './diagram-section';
|
|
8
8
|
/**
|
|
9
9
|
* Stores the data of a diagram.
|
|
10
|
+
* Represents the state of the diagram.
|
|
10
11
|
* @public
|
|
11
12
|
*/
|
|
12
13
|
export declare class DiagramModel {
|
|
@@ -80,6 +81,11 @@ export declare class DiagramModel {
|
|
|
80
81
|
* @public
|
|
81
82
|
*/
|
|
82
83
|
valueSet: ValueSet;
|
|
84
|
+
/**
|
|
85
|
+
* The last-seen logical clock value, used to generate CollabTimestamps.
|
|
86
|
+
* @public
|
|
87
|
+
*/
|
|
88
|
+
logicalClock: number;
|
|
83
89
|
constructor(canvas: Canvas | undefined, id: string | undefined, name: string, description: string | undefined, type: string, properties?: Property[]);
|
|
84
90
|
/**
|
|
85
91
|
* Deletes everything in this diagram.
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Point } from '../../util/canvas-util';
|
|
2
2
|
import { Side } from '../../util/svg-util';
|
|
3
|
+
import { CollabTimestamp } from './collab/primitives';
|
|
3
4
|
import { FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTypeConfig, PortConfig, SectionGridConfig } from './diagram-config';
|
|
4
5
|
import { DiagramConnection } from './diagram-connection';
|
|
5
6
|
import { DiagramElement, DiagramEntity, DiagramEntitySet } from './diagram-element';
|
|
@@ -7,7 +8,7 @@ import { DiagramField } from './diagram-field';
|
|
|
7
8
|
import { DiagramModel } from './diagram-model';
|
|
8
9
|
import { DiagramPort } from './diagram-port';
|
|
9
10
|
import { PropertySet, ValueSet } from './diagram-property';
|
|
10
|
-
import { DiagramSection } from './diagram-section';
|
|
11
|
+
import { DiagramSection, DiagramSectionGeometry } from './diagram-section';
|
|
11
12
|
/**
|
|
12
13
|
* Default values of the look of a diagram node.
|
|
13
14
|
* @see DIAGRAM_NODE_TYPE_DEFAULTS
|
|
@@ -35,6 +36,14 @@ export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
|
|
|
35
36
|
priority: number;
|
|
36
37
|
properties: never[];
|
|
37
38
|
};
|
|
39
|
+
export type DiagramNodeGeometry = {
|
|
40
|
+
readonly coords: Point;
|
|
41
|
+
readonly width: number;
|
|
42
|
+
readonly height: number;
|
|
43
|
+
readonly sections: {
|
|
44
|
+
[sectionId: string]: DiagramSectionGeometry;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
38
47
|
/**
|
|
39
48
|
* A node type, which holds properties that nodes of this type share in common.
|
|
40
49
|
* @see NodeTypeConfig
|
|
@@ -97,6 +106,11 @@ export declare class DiagramNode extends DiagramElement {
|
|
|
97
106
|
* @public
|
|
98
107
|
*/
|
|
99
108
|
coords: Point;
|
|
109
|
+
/**
|
|
110
|
+
* Collaborative timestamp for SetGeometryCollabActions.
|
|
111
|
+
* @public
|
|
112
|
+
*/
|
|
113
|
+
geometryTimestamp: CollabTimestamp | null;
|
|
100
114
|
/**
|
|
101
115
|
* Dimension of this node along the x axis.
|
|
102
116
|
* @public
|
|
@@ -113,24 +127,93 @@ export declare class DiagramNode extends DiagramElement {
|
|
|
113
127
|
*/
|
|
114
128
|
get name(): string;
|
|
115
129
|
set name(name: string);
|
|
116
|
-
constructor(model: DiagramModel, type: DiagramNodeType, coords
|
|
130
|
+
constructor(model: DiagramModel, type: DiagramNodeType, coords: Point | undefined, id: string);
|
|
131
|
+
get removed(): boolean;
|
|
117
132
|
updateInView(): void;
|
|
118
133
|
getPriority(): number;
|
|
134
|
+
/**
|
|
135
|
+
* Get the port of this node which is closest to the given coordinates.
|
|
136
|
+
* @param coords A point in the diagram.
|
|
137
|
+
* @returns The port of this node closest to the given coordinates, `undefined` if this node has no ports.
|
|
138
|
+
*/
|
|
119
139
|
getClosestPortToPoint(coords: Point): DiagramPort | undefined;
|
|
140
|
+
/**
|
|
141
|
+
* Get all incoming connections of all ports of this node, not including incoming connections of sections of this node.
|
|
142
|
+
* @public
|
|
143
|
+
* @returns A list of connections.
|
|
144
|
+
*/
|
|
120
145
|
getIncomingConnections(): DiagramConnection[];
|
|
146
|
+
/**
|
|
147
|
+
* Get all outgoing connections of all ports of this node, not including outgoing connections of sections of this node.
|
|
148
|
+
* @public
|
|
149
|
+
* @returns A list of connections.
|
|
150
|
+
*/
|
|
121
151
|
getOutgoingConnections(): DiagramConnection[];
|
|
152
|
+
/**
|
|
153
|
+
* Get all connections of all ports of this node, not including connections of sections of this node.
|
|
154
|
+
* @public
|
|
155
|
+
* @returns A list of connections.
|
|
156
|
+
*/
|
|
122
157
|
getConnections(): DiagramConnection[];
|
|
158
|
+
/**
|
|
159
|
+
* Get all nodes that have a direct connection to this node, not including nodes that have a direct connection to sections of this node.
|
|
160
|
+
* @public
|
|
161
|
+
* @returns A list of nodes.
|
|
162
|
+
*/
|
|
123
163
|
getAdjacentNodes(): DiagramNode[];
|
|
164
|
+
/**
|
|
165
|
+
* Change the coordinates of this node to the given coordinates and move its sections, ports and labels correspondingly.
|
|
166
|
+
* @public
|
|
167
|
+
* @param coords A point in the diagram.
|
|
168
|
+
*/
|
|
124
169
|
move(coords: Point): void;
|
|
170
|
+
/**
|
|
171
|
+
* Change the dimensions of this node in the given direction by the given amount without changing the dimensions of the sections of this node.
|
|
172
|
+
* @public
|
|
173
|
+
* @param direction A direction.
|
|
174
|
+
* @param distance A distance.
|
|
175
|
+
*/
|
|
125
176
|
stretch(direction: Side, distance: number): void;
|
|
177
|
+
/**
|
|
178
|
+
* Change the dimensions of this node and its sections in the given direction by the given amount, with the sections of the given index being stretched.
|
|
179
|
+
* @public
|
|
180
|
+
* @param direction A direction.
|
|
181
|
+
* @param distance A distance.
|
|
182
|
+
* @param indexX A section index.
|
|
183
|
+
* @param indexY A section index.
|
|
184
|
+
*/
|
|
126
185
|
stretchSections(direction: Side, distance: number, indexX: number, indexY: number): void;
|
|
186
|
+
/**
|
|
187
|
+
* Returns the current values of all geometric properties (coordinates and dimensions) of this node and its sections.
|
|
188
|
+
* @public
|
|
189
|
+
*/
|
|
190
|
+
getGeometry(): DiagramNodeGeometry;
|
|
191
|
+
/**
|
|
192
|
+
* Sets all geometric properties (coordinates and dimensions) of this node and its sections.
|
|
193
|
+
* @public
|
|
194
|
+
*/
|
|
195
|
+
setGeometry(geometry: DiagramNodeGeometry): void;
|
|
127
196
|
}
|
|
128
197
|
export declare class DiagramNodeSet extends DiagramEntitySet<DiagramNode> {
|
|
129
198
|
private model;
|
|
199
|
+
/**
|
|
200
|
+
* Set of the possible types of node that the nodes of this set can have.
|
|
201
|
+
* @public
|
|
202
|
+
*/
|
|
130
203
|
types: DiagramEntitySet<DiagramNodeType>;
|
|
204
|
+
/**
|
|
205
|
+
* Instance a set of nodes for the given model. This method is used internally.
|
|
206
|
+
* @private
|
|
207
|
+
*/
|
|
131
208
|
constructor(model: DiagramModel);
|
|
132
|
-
|
|
209
|
+
/**
|
|
210
|
+
* Instance a new node and add it to this set.
|
|
211
|
+
* @public
|
|
212
|
+
* @param type The type of the node given as either the type itself or the id of the type.
|
|
213
|
+
* @param coords The coordinates of the top left corner of the node in the diagram.
|
|
214
|
+
* @param id The id of the node.
|
|
215
|
+
* @returns The instanced node.
|
|
216
|
+
*/
|
|
217
|
+
new(type: DiagramNodeType | string, coords: Point, id: string): DiagramNode;
|
|
133
218
|
remove(id: string): void;
|
|
134
|
-
filter(type?: string, threshold?: number): DiagramNode[];
|
|
135
|
-
find(type?: string, threshold?: number): DiagramNode | undefined;
|
|
136
219
|
}
|
|
@@ -54,20 +54,47 @@ export declare class DiagramPort extends DiagramElement {
|
|
|
54
54
|
* @public
|
|
55
55
|
*/
|
|
56
56
|
incomingConnections: DiagramConnection[];
|
|
57
|
-
constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id
|
|
57
|
+
constructor(model: DiagramModel, rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id: string);
|
|
58
|
+
get removed(): boolean;
|
|
58
59
|
updateInView(): void;
|
|
60
|
+
/**
|
|
61
|
+
* Add a connection to this port's list of outgoing connections.
|
|
62
|
+
* @public
|
|
63
|
+
* @param connection A connection.
|
|
64
|
+
*/
|
|
59
65
|
startConnection(connection: DiagramConnection): void;
|
|
66
|
+
/**
|
|
67
|
+
* Add a connection to this port's list of incoming connections.
|
|
68
|
+
* @public
|
|
69
|
+
* @param connection A connection.
|
|
70
|
+
*/
|
|
60
71
|
finishConnection(connection: DiagramConnection): void;
|
|
72
|
+
/**
|
|
73
|
+
* Get the root node of this port, which is either its rootElement if it's a node or it's rootElement's node if it's a section.
|
|
74
|
+
* @public
|
|
75
|
+
* @returns A node if it could be found, `undefined` otherwise.
|
|
76
|
+
*/
|
|
61
77
|
getNode(): DiagramNode | undefined;
|
|
62
78
|
getPriority(): number;
|
|
79
|
+
/**
|
|
80
|
+
* Change the coordinates of this port to the given coordinates and move its labels correspondingly.
|
|
81
|
+
* @public
|
|
82
|
+
* @param coords A point in the diagram.
|
|
83
|
+
*/
|
|
63
84
|
move(coords: Point): void;
|
|
64
85
|
distanceTo(coords: Point): number;
|
|
65
86
|
}
|
|
66
87
|
export declare class DiagramPortSet extends DiagramEntitySet<DiagramPort> {
|
|
67
88
|
private model;
|
|
89
|
+
/**
|
|
90
|
+
* Instance a set of ports for the given model. This method is used internally.
|
|
91
|
+
* @private
|
|
92
|
+
*/
|
|
68
93
|
constructor(model: DiagramModel);
|
|
69
|
-
|
|
94
|
+
/**
|
|
95
|
+
* Instance a new port and add it to this set. This method is normally called when instancing an element with a port and it is rarely called by itself.
|
|
96
|
+
* @private
|
|
97
|
+
*/
|
|
98
|
+
new(rootElement: DiagramNode | DiagramSection | undefined, coords: Point, direction: Side, id: string): DiagramPort;
|
|
70
99
|
remove(id: string): void;
|
|
71
|
-
filter(threshold?: number): DiagramPort[];
|
|
72
|
-
find(threshold?: number): DiagramPort | undefined;
|
|
73
100
|
}
|