@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
package/index.d.ts
CHANGED
|
@@ -2,22 +2,24 @@ export { CollapseButtonComponent } from './lib/collapse-button/collapse-button.c
|
|
|
2
2
|
export { DagaModule } from './lib/daga.module';
|
|
3
3
|
export { DiagramButtonsComponent } from './lib/diagram-buttons/diagram-buttons.component';
|
|
4
4
|
export { DiagramEditorComponent } from './lib/diagram-editor/diagram-editor.component';
|
|
5
|
+
export { CollabClient } from './lib/diagram-editor/diagram/collab/collab-client';
|
|
6
|
+
export { CollabTimestamp, CollabTimestampSet } from './lib/diagram-editor/diagram/collab/primitives';
|
|
5
7
|
export { DagaExporter } from './lib/diagram-editor/diagram/converters/daga-exporter';
|
|
6
8
|
export { DagaImporter } from './lib/diagram-editor/diagram/converters/daga-importer';
|
|
7
9
|
export { DagaModel } from './lib/diagram-editor/diagram/converters/daga-model';
|
|
8
10
|
export { DiagramModelExporter } from './lib/diagram-editor/diagram/converters/diagram-model-exporter';
|
|
9
11
|
export { DiagramModelImporter } from './lib/diagram-editor/diagram/converters/diagram-model-importer';
|
|
10
|
-
export { ActionQueue, AddConnectionAction, AddNodeAction, DiagramAction, DiagramActions, EditFieldAction,
|
|
12
|
+
export { ActionQueue, AddConnectionAction, AddNodeAction, DiagramAction, DiagramActions, EditFieldAction, RemoveAction, SetGeometryAction, UpdateValuesAction } from './lib/diagram-editor/diagram/diagram-action';
|
|
11
13
|
export { ACTION_QUEUE_SIZE, DiagramCanvas } from './lib/diagram-editor/diagram/diagram-canvas';
|
|
12
14
|
export { ButtonsComponentConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram-editor/diagram/diagram-config';
|
|
13
15
|
export { DiagramConnection, DiagramConnectionSet, DiagramConnectionType } from './lib/diagram-editor/diagram/diagram-connection';
|
|
14
16
|
export { DiagramElement, DiagramEntity, DiagramEntitySet } from './lib/diagram-editor/diagram/diagram-element';
|
|
15
17
|
export { DiagramField, DiagramFieldSet } from './lib/diagram-editor/diagram/diagram-field';
|
|
16
18
|
export { DiagramModel } from './lib/diagram-editor/diagram/diagram-model';
|
|
17
|
-
export { DiagramNode, DiagramNodeSet, DiagramNodeType } from './lib/diagram-editor/diagram/diagram-node';
|
|
19
|
+
export { DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramNodeGeometry } from './lib/diagram-editor/diagram/diagram-node';
|
|
18
20
|
export { DiagramPort, DiagramPortSet } from './lib/diagram-editor/diagram/diagram-port';
|
|
19
21
|
export { Property, PropertySet, Type, ValueSet } from './lib/diagram-editor/diagram/diagram-property';
|
|
20
|
-
export { DiagramSection, DiagramSectionSet } from './lib/diagram-editor/diagram/diagram-section';
|
|
22
|
+
export { DiagramSection, DiagramSectionSet, DiagramSectionGeometry } from './lib/diagram-editor/diagram/diagram-section';
|
|
21
23
|
export { AdjacencyLayout } from './lib/diagram-editor/diagram/layout/adjacency-layout';
|
|
22
24
|
export { BreadthAdjacencyLayout } from './lib/diagram-editor/diagram/layout/breadth-adjacency-layout';
|
|
23
25
|
export { BreadthLayout } from './lib/diagram-editor/diagram/layout/breadth-layout';
|
|
@@ -35,13 +37,13 @@ export { DiagramButtons } from './lib/interfaces/diagram-buttons';
|
|
|
35
37
|
export { DiagramEditor } from './lib/interfaces/diagram-editor';
|
|
36
38
|
export { Palette } from './lib/interfaces/palette';
|
|
37
39
|
export { PropertyEditor } from './lib/interfaces/property-editor';
|
|
38
|
-
export { ObjectEditorComponent } from './lib/object-editor/object-editor.component';
|
|
39
40
|
export { PaletteComponent } from './lib/palette/palette.component';
|
|
41
|
+
export { ObjectEditorComponent } from './lib/property-editor/object-editor/object-editor.component';
|
|
40
42
|
export { PropertyEditorComponent } from './lib/property-editor/property-editor.component';
|
|
43
|
+
export { TextListEditorComponent } from './lib/property-editor/text-list-editor/text-list-editor.component';
|
|
44
|
+
export { TextMapEditorComponent } from './lib/property-editor/text-map-editor/text-map-editor.component';
|
|
41
45
|
export { CanvasProviderService } from './lib/services/canvas-provider.service';
|
|
42
46
|
export { DagaConfigurationService } from './lib/services/daga-configuration.service';
|
|
43
|
-
export { TextListEditorComponent } from './lib/text-list-editor/text-list-editor.component';
|
|
44
|
-
export { TextMapEditorComponent } from './lib/text-map-editor/text-map-editor.component';
|
|
45
47
|
export { Line, Point, Rectangle } from './lib/util/canvas-util';
|
|
46
48
|
export { LineShape, LineStyle } from './lib/util/line';
|
|
47
49
|
export { ClosedShape } from './lib/util/shape';
|
package/lib/daga.module.d.ts
CHANGED
|
@@ -4,16 +4,15 @@ import * as i2 from "./diagram-buttons/diagram-buttons.component";
|
|
|
4
4
|
import * as i3 from "./diagram/diagram.component";
|
|
5
5
|
import * as i4 from "./diagram-editor/diagram-editor.component";
|
|
6
6
|
import * as i5 from "./errors/errors.component";
|
|
7
|
-
import * as i6 from "./object-editor/object-editor.component";
|
|
7
|
+
import * as i6 from "./property-editor/object-editor/object-editor.component";
|
|
8
8
|
import * as i7 from "./palette/palette.component";
|
|
9
|
-
import * as i8 from "./text-list-editor/text-list-editor.component";
|
|
10
|
-
import * as i9 from "./text-map-editor/text-map-editor.component";
|
|
9
|
+
import * as i8 from "./property-editor/text-list-editor/text-list-editor.component";
|
|
10
|
+
import * as i9 from "./property-editor/text-map-editor/text-map-editor.component";
|
|
11
11
|
import * as i10 from "./property-editor/property-editor.component";
|
|
12
12
|
import * as i11 from "@angular/common";
|
|
13
13
|
import * as i12 from "@angular/forms";
|
|
14
|
-
import * as i13 from "@metadev/lux";
|
|
15
14
|
export declare class DagaModule {
|
|
16
15
|
static ɵfac: i0.ɵɵFactoryDeclaration<DagaModule, never>;
|
|
17
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<DagaModule, never, [typeof i1.CollapseButtonComponent, typeof i2.DiagramButtonsComponent, typeof i3.DiagramComponent, typeof i4.DiagramEditorComponent, typeof i5.ErrorsComponent, typeof i6.ObjectEditorComponent, typeof i7.PaletteComponent, typeof i8.TextListEditorComponent, typeof i9.TextMapEditorComponent, typeof i10.PropertyEditorComponent, typeof i11.CommonModule, typeof i12.FormsModule
|
|
16
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<DagaModule, never, [typeof i1.CollapseButtonComponent, typeof i2.DiagramButtonsComponent, typeof i3.DiagramComponent, typeof i4.DiagramEditorComponent, typeof i5.ErrorsComponent, typeof i6.ObjectEditorComponent, typeof i7.PaletteComponent, typeof i8.TextListEditorComponent, typeof i9.TextMapEditorComponent, typeof i10.PropertyEditorComponent, typeof i11.CommonModule, typeof i12.FormsModule], [typeof i3.DiagramComponent, typeof i4.DiagramEditorComponent]>;
|
|
18
17
|
static ɵinj: i0.ɵɵInjectorDeclaration<DagaModule>;
|
|
19
18
|
}
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { Canvas } from '../../../interfaces/canvas';
|
|
2
|
+
import { Point } from '../../../util/canvas-util';
|
|
3
|
+
import { CollabTimestamp } from './primitives';
|
|
4
|
+
import { DiagramNodeGeometry } from '../diagram-node';
|
|
5
|
+
import { ValueSet } from '../diagram-property';
|
|
6
|
+
/**
|
|
7
|
+
* An action taken by a local or remote user.
|
|
8
|
+
*
|
|
9
|
+
* The action can performed on its creator's device, serialized
|
|
10
|
+
* and deserialized to reach remote users' devices, and performed
|
|
11
|
+
* on remote users' devices.
|
|
12
|
+
* @private
|
|
13
|
+
*/
|
|
14
|
+
export interface CollabAction {
|
|
15
|
+
/**
|
|
16
|
+
* Performs this action on the diagram.
|
|
17
|
+
*
|
|
18
|
+
* Note: Local Actions should call `canvas.collabEngine.doCollaboratively(collabAction)`, **not** this method directly.
|
|
19
|
+
*
|
|
20
|
+
* CollabAction `do()` methods must follow the rules of operation-based CRDT messages:
|
|
21
|
+
* If two users concurrently create CollabActions (possibly of different types) on the same diagram, then performing the actions on a future diagram state _in either order_ must result in the same diagram state.
|
|
22
|
+
*/
|
|
23
|
+
do(): void;
|
|
24
|
+
/**
|
|
25
|
+
* Serializes this action, converting it to a JSON form.
|
|
26
|
+
*
|
|
27
|
+
* To deserialize, use the *static* deserialize method on the same class.
|
|
28
|
+
*/
|
|
29
|
+
serialize(): CollabActionSerialized;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* @private
|
|
33
|
+
*/
|
|
34
|
+
export type CollabActionSerialized = AddNodeSerialized | SetGeometrySerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized;
|
|
35
|
+
/**
|
|
36
|
+
* @private
|
|
37
|
+
*/
|
|
38
|
+
export type AddNodeSerialized = {
|
|
39
|
+
type: 'addNode';
|
|
40
|
+
id: string;
|
|
41
|
+
typeId: string;
|
|
42
|
+
coords: Point;
|
|
43
|
+
label?: string;
|
|
44
|
+
values?: {
|
|
45
|
+
[key: string]: unknown;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Collaborative action which consists of adding a node.
|
|
50
|
+
* @see AddNodeAction
|
|
51
|
+
* @private
|
|
52
|
+
*/
|
|
53
|
+
export declare class AddNodeCollabAction implements CollabAction {
|
|
54
|
+
readonly canvas: Canvas;
|
|
55
|
+
readonly id: string;
|
|
56
|
+
readonly typeId: string;
|
|
57
|
+
readonly coords: Point;
|
|
58
|
+
readonly label?: string | undefined;
|
|
59
|
+
readonly values?: {
|
|
60
|
+
[key: string]: unknown;
|
|
61
|
+
} | undefined;
|
|
62
|
+
constructor(canvas: Canvas, id: string, typeId: string, coords: Point, label?: string | undefined, values?: {
|
|
63
|
+
[key: string]: unknown;
|
|
64
|
+
} | undefined);
|
|
65
|
+
do(): void;
|
|
66
|
+
serialize(): AddNodeSerialized;
|
|
67
|
+
static deserialize(canvas: Canvas, serialized: AddNodeSerialized): AddNodeCollabAction;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* @private
|
|
71
|
+
*/
|
|
72
|
+
export type SetGeometrySerialized = {
|
|
73
|
+
type: 'setGeometry';
|
|
74
|
+
nodeId: string;
|
|
75
|
+
to: DiagramNodeGeometry;
|
|
76
|
+
timestamp: CollabTimestamp;
|
|
77
|
+
};
|
|
78
|
+
/**
|
|
79
|
+
* Collaborative action which consists of changing a node's geometry: moving, stretching, or stretching sections.
|
|
80
|
+
* @see SetGeometryAction
|
|
81
|
+
* @private
|
|
82
|
+
*/
|
|
83
|
+
export declare class SetGeometryCollabAction implements CollabAction {
|
|
84
|
+
readonly canvas: Canvas;
|
|
85
|
+
readonly nodeId: string;
|
|
86
|
+
readonly to: DiagramNodeGeometry;
|
|
87
|
+
readonly timestamp: CollabTimestamp;
|
|
88
|
+
constructor(canvas: Canvas, nodeId: string, to: DiagramNodeGeometry, timestamp: CollabTimestamp);
|
|
89
|
+
do(): void;
|
|
90
|
+
serialize(): SetGeometrySerialized;
|
|
91
|
+
static deserialize(canvas: Canvas, serialized: SetGeometrySerialized): SetGeometryCollabAction;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* @private
|
|
95
|
+
*/
|
|
96
|
+
export type AddConnectionSerialized = {
|
|
97
|
+
type: 'addConnection';
|
|
98
|
+
id: string;
|
|
99
|
+
typeId: string;
|
|
100
|
+
startId: string;
|
|
101
|
+
endId: string;
|
|
102
|
+
};
|
|
103
|
+
/**
|
|
104
|
+
* Collaborative action which consists of adding a connection.
|
|
105
|
+
* @see AddConnectionAction
|
|
106
|
+
* @private
|
|
107
|
+
*/
|
|
108
|
+
export declare class AddConnectionCollabAction implements CollabAction {
|
|
109
|
+
readonly canvas: Canvas;
|
|
110
|
+
readonly id: string;
|
|
111
|
+
readonly typeId: string;
|
|
112
|
+
readonly startId: string;
|
|
113
|
+
readonly endId: string;
|
|
114
|
+
constructor(canvas: Canvas, id: string, typeId: string, startId: string, endId: string);
|
|
115
|
+
do(): void;
|
|
116
|
+
serialize(): AddConnectionSerialized;
|
|
117
|
+
static deserialize(canvas: Canvas, serialized: AddConnectionSerialized): AddConnectionCollabAction;
|
|
118
|
+
}
|
|
119
|
+
/**
|
|
120
|
+
* @private
|
|
121
|
+
*/
|
|
122
|
+
export type EditFieldSerialized = {
|
|
123
|
+
type: 'editField';
|
|
124
|
+
fieldId: string;
|
|
125
|
+
to: string;
|
|
126
|
+
timestamp: CollabTimestamp;
|
|
127
|
+
};
|
|
128
|
+
/**
|
|
129
|
+
* Collaborative action which consists of editing the text of a field.
|
|
130
|
+
* @see EditFieldAction
|
|
131
|
+
* @private
|
|
132
|
+
*/
|
|
133
|
+
export declare class EditFieldCollabAction implements CollabAction {
|
|
134
|
+
readonly canvas: Canvas;
|
|
135
|
+
readonly fieldId: string;
|
|
136
|
+
readonly to: string;
|
|
137
|
+
readonly timestamp: CollabTimestamp;
|
|
138
|
+
constructor(canvas: Canvas, fieldId: string, to: string, timestamp: CollabTimestamp);
|
|
139
|
+
do(): void;
|
|
140
|
+
serialize(): EditFieldSerialized;
|
|
141
|
+
static deserialize(canvas: Canvas, serialized: EditFieldSerialized): EditFieldCollabAction;
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* @private
|
|
145
|
+
*/
|
|
146
|
+
export type UpdateValuesSerialized = {
|
|
147
|
+
type: 'updateValues';
|
|
148
|
+
id: string | undefined;
|
|
149
|
+
to: {
|
|
150
|
+
[key: string]: unknown;
|
|
151
|
+
};
|
|
152
|
+
timestamp: CollabTimestamp;
|
|
153
|
+
};
|
|
154
|
+
/**
|
|
155
|
+
* Collaborative action which consists of editing the values of a value set.
|
|
156
|
+
* @see UpdateValuesAction
|
|
157
|
+
* @private
|
|
158
|
+
*/
|
|
159
|
+
export declare class UpdateValuesCollabAction implements CollabAction {
|
|
160
|
+
readonly canvas: Canvas;
|
|
161
|
+
readonly id: string | undefined;
|
|
162
|
+
readonly to: {
|
|
163
|
+
[key: string]: unknown;
|
|
164
|
+
};
|
|
165
|
+
readonly timestamp: CollabTimestamp;
|
|
166
|
+
constructor(canvas: Canvas, id: string | undefined, to: {
|
|
167
|
+
[key: string]: unknown;
|
|
168
|
+
}, timestamp: CollabTimestamp);
|
|
169
|
+
getValueSet(): ValueSet | undefined;
|
|
170
|
+
do(): void;
|
|
171
|
+
serialize(): UpdateValuesSerialized;
|
|
172
|
+
static deserialize(canvas: Canvas, serialized: UpdateValuesSerialized): UpdateValuesCollabAction;
|
|
173
|
+
}
|
|
174
|
+
/**
|
|
175
|
+
* @private
|
|
176
|
+
*/
|
|
177
|
+
export type SetSelfRemovedSerialized = {
|
|
178
|
+
type: 'setSelfRemoved';
|
|
179
|
+
nodeIds: string[];
|
|
180
|
+
sectionIds: string[];
|
|
181
|
+
portIds: string[];
|
|
182
|
+
connectionIds: string[];
|
|
183
|
+
fieldIds: string[];
|
|
184
|
+
removed: boolean;
|
|
185
|
+
timestamp: CollabTimestamp;
|
|
186
|
+
};
|
|
187
|
+
/**
|
|
188
|
+
* Collaborative action which consists of removing or un-removing elements.
|
|
189
|
+
*
|
|
190
|
+
* Specifically, the action sets the `selfRemoved` field for elements that are
|
|
191
|
+
* explicitly removed/unremoved. This causes the `removed` fields for those elements
|
|
192
|
+
* and their transitive dependents to update automatically.
|
|
193
|
+
* For example, self-removing a node also removes all of its sections/connections/etc.
|
|
194
|
+
*
|
|
195
|
+
* @see RemoveAction
|
|
196
|
+
* @private
|
|
197
|
+
*/
|
|
198
|
+
export declare class SetSelfRemovedCollabAction implements CollabAction {
|
|
199
|
+
readonly canvas: Canvas;
|
|
200
|
+
readonly nodeIds: string[];
|
|
201
|
+
readonly sectionIds: string[];
|
|
202
|
+
readonly portIds: string[];
|
|
203
|
+
readonly connectionIds: string[];
|
|
204
|
+
readonly fieldIds: string[];
|
|
205
|
+
readonly selfRemoved: boolean;
|
|
206
|
+
readonly timestamp: CollabTimestamp;
|
|
207
|
+
constructor(canvas: Canvas, nodeIds: string[], sectionIds: string[], portIds: string[], connectionIds: string[], fieldIds: string[], selfRemoved: boolean, timestamp: CollabTimestamp);
|
|
208
|
+
private doOne;
|
|
209
|
+
do(): void;
|
|
210
|
+
serialize(): CollabActionSerialized;
|
|
211
|
+
static deserialize(canvas: Canvas, serialized: SetSelfRemovedSerialized): SetSelfRemovedCollabAction;
|
|
212
|
+
}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { Canvas } from '../../../interfaces/canvas';
|
|
2
|
+
/**
|
|
3
|
+
* The client that communicates with the daga-server over WebSockets.
|
|
4
|
+
*
|
|
5
|
+
* Use this to create and join rooms.
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export declare class CollabClient {
|
|
9
|
+
/**
|
|
10
|
+
* The WebSocket URL of the daga-server.
|
|
11
|
+
*/
|
|
12
|
+
readonly dagaServer: string;
|
|
13
|
+
readonly userId: string;
|
|
14
|
+
readonly clientId: string;
|
|
15
|
+
private readonly ws;
|
|
16
|
+
private sendQueue;
|
|
17
|
+
/**
|
|
18
|
+
* Joined sessions by locator.
|
|
19
|
+
*/
|
|
20
|
+
private sessions;
|
|
21
|
+
/**
|
|
22
|
+
* Created but unacked sessions by refId.
|
|
23
|
+
*/
|
|
24
|
+
private pendingSessions;
|
|
25
|
+
constructor(dagaServer: string, userId: string);
|
|
26
|
+
private onOpen;
|
|
27
|
+
private onMessage;
|
|
28
|
+
private onClose;
|
|
29
|
+
private onError;
|
|
30
|
+
/**
|
|
31
|
+
* Internal send method. Use instead of calling ws.send directly.
|
|
32
|
+
*/
|
|
33
|
+
private send;
|
|
34
|
+
/**
|
|
35
|
+
* Internal receive method. Use instead of handling ws receive events directly.
|
|
36
|
+
*/
|
|
37
|
+
private receive;
|
|
38
|
+
/**
|
|
39
|
+
* Creates and joins a room. The given canvas becomes collaborative, starting
|
|
40
|
+
* with its current model.
|
|
41
|
+
*
|
|
42
|
+
* Returns a Promise that resolves with the new room's locator once joined.
|
|
43
|
+
* @public
|
|
44
|
+
*/
|
|
45
|
+
createAndJoinRoom(canvas: Canvas): Promise<string>;
|
|
46
|
+
/**
|
|
47
|
+
* Joins the room with the given locator. The given canvas becomes collaborative,
|
|
48
|
+
* **replacing** its current model with the room's model.
|
|
49
|
+
*
|
|
50
|
+
* Returns a Promise that resolves once the room has been joined and loaded into
|
|
51
|
+
* the canvas. You should hide or lock the canvas until it resolves, since any
|
|
52
|
+
* user inputs before then will be overwritten.
|
|
53
|
+
* @public
|
|
54
|
+
*/
|
|
55
|
+
joinRoom(canvas: Canvas, locator: string): Promise<void>;
|
|
56
|
+
private startSyncing;
|
|
57
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { Canvas } from '../../../interfaces/canvas';
|
|
2
|
+
import { CollabAction, CollabActionSerialized } from './collab-action';
|
|
3
|
+
import { CollabTimestamp } from './primitives';
|
|
4
|
+
/**
|
|
5
|
+
* A collaboration engine, which manages collaboration for a diagram.
|
|
6
|
+
* @private
|
|
7
|
+
*/
|
|
8
|
+
export declare class CollabEngine {
|
|
9
|
+
/**
|
|
10
|
+
* Canvas that this collaboration engine belongs to.
|
|
11
|
+
* @private
|
|
12
|
+
*/
|
|
13
|
+
readonly canvas: Canvas;
|
|
14
|
+
/**
|
|
15
|
+
* The local replica ID.
|
|
16
|
+
*/
|
|
17
|
+
readonly replicaId: string;
|
|
18
|
+
/**
|
|
19
|
+
* Event handler for when we request to send a message to the server.
|
|
20
|
+
*/
|
|
21
|
+
onSend?: (message: CollabActionSerialized) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Whether we have joined (or are joining) a room on the server.
|
|
24
|
+
*/
|
|
25
|
+
isInRoom: boolean;
|
|
26
|
+
constructor(canvas: Canvas);
|
|
27
|
+
/**
|
|
28
|
+
* Returns a fresh timestamp, suitable for use by new CollabActions.
|
|
29
|
+
*/
|
|
30
|
+
freshTimestamp(): CollabTimestamp;
|
|
31
|
+
/**
|
|
32
|
+
* Returns a fresh unique ID, suitable for use by new CollabActions.
|
|
33
|
+
*/
|
|
34
|
+
freshId(): string;
|
|
35
|
+
/**
|
|
36
|
+
* Performs the action - immediately locally, and eventually for remote collaborators.
|
|
37
|
+
*/
|
|
38
|
+
doCollaboratively(action: CollabAction): void;
|
|
39
|
+
/**
|
|
40
|
+
* Processes a message received from the server.
|
|
41
|
+
*
|
|
42
|
+
* The message is assumed to be non-redundant (in particular, not one of
|
|
43
|
+
* our own messages) and delivered after all prior messages on the server.
|
|
44
|
+
*/
|
|
45
|
+
receive(message: CollabActionSerialized): void;
|
|
46
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Message types for communicating with the daga server.
|
|
3
|
+
*
|
|
4
|
+
* Duplicated between https://github.com/metadevpro/daga-server/blob/dev/types.ts and
|
|
5
|
+
* https://github.com/metadevpro/daga/blob/dev/libs/daga/src/lib/diagram-editor/diagram/collab/message-types.ts
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* Stand-in for the DagaModel type on the server.
|
|
9
|
+
*/
|
|
10
|
+
export interface DagaModelStub {
|
|
11
|
+
}
|
|
12
|
+
export interface RoomInfo {
|
|
13
|
+
locator: string;
|
|
14
|
+
ownerId: string;
|
|
15
|
+
initialModel: DagaModelStub;
|
|
16
|
+
messages: AddMessage[];
|
|
17
|
+
}
|
|
18
|
+
export interface UserInfo {
|
|
19
|
+
id: string;
|
|
20
|
+
username: string;
|
|
21
|
+
}
|
|
22
|
+
export interface ClientInfo {
|
|
23
|
+
key: string;
|
|
24
|
+
connection: unknown;
|
|
25
|
+
user: UserInfo;
|
|
26
|
+
ts: string;
|
|
27
|
+
}
|
|
28
|
+
export interface IMessage {
|
|
29
|
+
ts: string;
|
|
30
|
+
}
|
|
31
|
+
export type Message = HeloMessage | ByeMessage | CreateMessage | CreateAckMessage | EnrollMessage | EnrollAckMessage | DeleteMessage | AddMessage | ErrorMessage | OkMessage;
|
|
32
|
+
export interface HeloMessage extends IMessage {
|
|
33
|
+
type: 'HELO';
|
|
34
|
+
clientId: string;
|
|
35
|
+
userId: string;
|
|
36
|
+
token?: string;
|
|
37
|
+
/** version of the protocol */
|
|
38
|
+
version: string;
|
|
39
|
+
}
|
|
40
|
+
export interface ByeMessage extends IMessage {
|
|
41
|
+
type: 'BYE';
|
|
42
|
+
clientId: string;
|
|
43
|
+
userId: string;
|
|
44
|
+
}
|
|
45
|
+
export interface CreateMessage extends IMessage {
|
|
46
|
+
type: 'CREA';
|
|
47
|
+
clientId: string;
|
|
48
|
+
userId: string;
|
|
49
|
+
/** Correlation id for the client */
|
|
50
|
+
refId: string;
|
|
51
|
+
initialModel: DagaModelStub;
|
|
52
|
+
}
|
|
53
|
+
export interface CreateAckMessage extends IMessage {
|
|
54
|
+
type: 'CACK';
|
|
55
|
+
clientId: string;
|
|
56
|
+
userId: string;
|
|
57
|
+
/** Correlation id for the client */
|
|
58
|
+
refId: string;
|
|
59
|
+
locator: string;
|
|
60
|
+
}
|
|
61
|
+
export interface EnrollMessage extends IMessage {
|
|
62
|
+
type: 'ENRO';
|
|
63
|
+
clientId: string;
|
|
64
|
+
userId: string;
|
|
65
|
+
locator: string;
|
|
66
|
+
}
|
|
67
|
+
export interface EnrollAckMessage extends IMessage {
|
|
68
|
+
type: 'EACK';
|
|
69
|
+
locator: string;
|
|
70
|
+
initialModel: DagaModelStub;
|
|
71
|
+
}
|
|
72
|
+
export interface DeleteMessage extends IMessage {
|
|
73
|
+
type: 'DLTE';
|
|
74
|
+
clientId: string;
|
|
75
|
+
userId: string;
|
|
76
|
+
locator: string;
|
|
77
|
+
}
|
|
78
|
+
export interface AddMessage extends IMessage {
|
|
79
|
+
type: 'ADD';
|
|
80
|
+
clientId: string;
|
|
81
|
+
userId: string;
|
|
82
|
+
locator: string;
|
|
83
|
+
payload: unknown;
|
|
84
|
+
}
|
|
85
|
+
export interface ErrorMessage extends IMessage {
|
|
86
|
+
type: 'ERR';
|
|
87
|
+
clientId: string;
|
|
88
|
+
userId: string;
|
|
89
|
+
locator: string;
|
|
90
|
+
status: number;
|
|
91
|
+
description: string;
|
|
92
|
+
}
|
|
93
|
+
export interface OkMessage extends IMessage {
|
|
94
|
+
type: 'OK';
|
|
95
|
+
clientId: string;
|
|
96
|
+
userId: string;
|
|
97
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A timestamp used to break ties during collaborative editing.
|
|
3
|
+
* If multiple users edit a property at the same time, the edit with the last timestamp "wins".
|
|
4
|
+
*
|
|
5
|
+
* Specifically, `CollabTimestamp` is a [Lamport timestamp](https://en.wikipedia.org/wiki/Lamport_timestamp),
|
|
6
|
+
* consisting of a logical clock and a tiebreaker (`replicaId`, a UUID that is created fresh for each diagram).
|
|
7
|
+
*/
|
|
8
|
+
export type CollabTimestamp = [clock: number, replicaId: string];
|
|
9
|
+
/**
|
|
10
|
+
* Returns whether the incoming timestamp wins over the existing timestamp.
|
|
11
|
+
*
|
|
12
|
+
* In the DiagramModel, timestamps that have never been set are left null;
|
|
13
|
+
* `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
|
|
14
|
+
*/
|
|
15
|
+
export declare function timestampWins(incoming: CollabTimestamp, existing: CollabTimestamp | null | undefined): boolean;
|
|
16
|
+
/**
|
|
17
|
+
* A nested collection of CollabTimestamps associated to a ValueSet.
|
|
18
|
+
* @see ValueSet
|
|
19
|
+
*/
|
|
20
|
+
export type CollabTimestampSet = {
|
|
21
|
+
[key: string]: CollabTimestamp | CollabTimestampSet;
|
|
22
|
+
};
|
|
@@ -6,5 +6,5 @@ import { DiagramModelExporter } from './diagram-model-exporter';
|
|
|
6
6
|
* @public
|
|
7
7
|
*/
|
|
8
8
|
export declare class DagaExporter implements DiagramModelExporter<DagaModel> {
|
|
9
|
-
export(model: DiagramModel): DagaModel;
|
|
9
|
+
export(model: DiagramModel, includeCollabMeta?: boolean): DagaModel;
|
|
10
10
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Point } from '../../../util/canvas-util';
|
|
2
2
|
import { Side } from '../../../util/svg-util';
|
|
3
|
+
import { CollabTimestamp, CollabTimestampSet } from '../collab/primitives';
|
|
3
4
|
export declare const DAGA_FILE_VERSION = 1;
|
|
4
5
|
/**
|
|
5
6
|
* Representation of a diagram model in a serialized format.
|
|
@@ -28,6 +29,17 @@ export interface DagaModel {
|
|
|
28
29
|
coords: Point;
|
|
29
30
|
direction: Side;
|
|
30
31
|
label: string;
|
|
32
|
+
collabMeta?: {
|
|
33
|
+
removed: boolean;
|
|
34
|
+
selfRemoved: boolean;
|
|
35
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
36
|
+
label?: {
|
|
37
|
+
removed: boolean;
|
|
38
|
+
selfRemoved: boolean;
|
|
39
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
40
|
+
textTimestamp: CollabTimestamp | null;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
31
43
|
}[];
|
|
32
44
|
label: string;
|
|
33
45
|
indexXInNode: number;
|
|
@@ -35,12 +47,34 @@ export interface DagaModel {
|
|
|
35
47
|
coords: Point;
|
|
36
48
|
width: number;
|
|
37
49
|
height: number;
|
|
50
|
+
collabMeta?: {
|
|
51
|
+
removed: boolean;
|
|
52
|
+
selfRemoved: boolean;
|
|
53
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
54
|
+
label?: {
|
|
55
|
+
removed: boolean;
|
|
56
|
+
selfRemoved: boolean;
|
|
57
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
58
|
+
textTimestamp: CollabTimestamp | null;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
38
61
|
}[];
|
|
39
62
|
ports?: {
|
|
40
63
|
id: string;
|
|
41
64
|
coords: Point;
|
|
42
65
|
direction: Side;
|
|
43
66
|
label: string;
|
|
67
|
+
collabMeta?: {
|
|
68
|
+
removed: boolean;
|
|
69
|
+
selfRemoved: boolean;
|
|
70
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
71
|
+
label?: {
|
|
72
|
+
removed: boolean;
|
|
73
|
+
selfRemoved: boolean;
|
|
74
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
75
|
+
textTimestamp: CollabTimestamp | null;
|
|
76
|
+
};
|
|
77
|
+
};
|
|
44
78
|
}[];
|
|
45
79
|
label: string;
|
|
46
80
|
coords: Point;
|
|
@@ -49,6 +83,19 @@ export interface DagaModel {
|
|
|
49
83
|
data: {
|
|
50
84
|
[key: string]: unknown;
|
|
51
85
|
};
|
|
86
|
+
collabMeta?: {
|
|
87
|
+
removed: boolean;
|
|
88
|
+
selfRemoved: boolean;
|
|
89
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
90
|
+
geometryTimestamp: CollabTimestamp | null;
|
|
91
|
+
dataTimestamps: CollabTimestampSet;
|
|
92
|
+
label?: {
|
|
93
|
+
removed: boolean;
|
|
94
|
+
selfRemoved: boolean;
|
|
95
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
96
|
+
textTimestamp: CollabTimestamp | null;
|
|
97
|
+
};
|
|
98
|
+
};
|
|
52
99
|
}[];
|
|
53
100
|
connections: {
|
|
54
101
|
id: string;
|
|
@@ -62,8 +109,18 @@ export interface DagaModel {
|
|
|
62
109
|
data: {
|
|
63
110
|
[key: string]: unknown;
|
|
64
111
|
};
|
|
112
|
+
collabMeta?: {
|
|
113
|
+
removed: boolean;
|
|
114
|
+
selfRemoved: boolean;
|
|
115
|
+
selfRemovedTimestamp: CollabTimestamp | null;
|
|
116
|
+
dataTimestamps: CollabTimestampSet;
|
|
117
|
+
};
|
|
65
118
|
}[];
|
|
66
119
|
data: {
|
|
67
120
|
[key: string]: unknown;
|
|
68
121
|
};
|
|
122
|
+
collabMeta?: {
|
|
123
|
+
logicalClock: number;
|
|
124
|
+
dataTimestamps: CollabTimestampSet;
|
|
125
|
+
};
|
|
69
126
|
}
|