@metadev/daga 1.0.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/Changelog.md +9 -0
- package/LICENSE.md +13 -0
- package/README.md +30 -0
- package/assets/config/generic-diagram.json +94 -0
- package/assets/icon/action/drop-down-arrow.svg +8 -0
- package/assets/icon/action/drop-horizontal-left.svg +14 -0
- package/assets/icon/action/drop-horizontal-none.svg +13 -0
- package/assets/icon/action/drop-horizontal-right.svg +14 -0
- package/assets/icon/action/drop-vertical-down.svg +14 -0
- package/assets/icon/action/drop-vertical-none.svg +13 -0
- package/assets/icon/action/drop-vertical-up.svg +14 -0
- package/assets/icon/action/filter-clear.png +0 -0
- package/assets/icon/buttons/center-hover.svg +10 -0
- package/assets/icon/buttons/center.svg +10 -0
- package/assets/icon/buttons/ellipsis-hover.svg +7 -0
- package/assets/icon/buttons/ellipsis.svg +7 -0
- package/assets/icon/buttons/filter-off-hover.svg +5 -0
- package/assets/icon/buttons/filter-off.svg +5 -0
- package/assets/icon/buttons/filter-on-hover.svg +5 -0
- package/assets/icon/buttons/filter-on.svg +5 -0
- package/assets/icon/buttons/layout-hover.svg +8 -0
- package/assets/icon/buttons/layout.svg +8 -0
- package/assets/icon/buttons/redo-hover.svg +5 -0
- package/assets/icon/buttons/redo.svg +5 -0
- package/assets/icon/buttons/undo-hover.svg +5 -0
- package/assets/icon/buttons/undo.svg +5 -0
- package/assets/icon/buttons/zoom-in-hover.svg +8 -0
- package/assets/icon/buttons/zoom-in.svg +8 -0
- package/assets/icon/buttons/zoom-out-hover.svg +7 -0
- package/assets/icon/buttons/zoom-out.svg +7 -0
- package/assets/icon/connection/arrow.svg +23 -0
- package/assets/icon/connection/empty-arrow.svg +19 -0
- package/assets/icon/connection/empty-diamond.svg +20 -0
- package/assets/icon/connection/filled-arrow.svg +19 -0
- package/assets/icon/connection/filled-diamond.svg +20 -0
- package/assets/icon/connection/line.svg +9 -0
- package/assets/icon/property/add.svg +3 -0
- package/assets/icon/property/close.svg +3 -0
- package/assets/icon/property/ellipsis.svg +5 -0
- package/assets/icon/property/hide.svg +10 -0
- package/assets/styles/styles.scss +181 -0
- package/fesm2022/metadev-daga.mjs +6480 -0
- package/fesm2022/metadev-daga.mjs.map +1 -0
- package/index.d.ts +39 -0
- package/lib/collapse-button/collapse-button.component.d.ts +17 -0
- package/lib/daga.module.d.ts +19 -0
- package/lib/diagram/diagram.component.d.ts +18 -0
- package/lib/diagram-buttons/diagram-buttons.component.d.ts +29 -0
- package/lib/diagram-editor/diagram/converters/daga-exporter.d.ts +6 -0
- package/lib/diagram-editor/diagram/converters/daga-importer.d.ts +6 -0
- package/lib/diagram-editor/diagram/converters/daga-model.d.ts +59 -0
- package/lib/diagram-editor/diagram/converters/diagram-model-exporter.d.ts +7 -0
- package/lib/diagram-editor/diagram/converters/diagram-model-importer.d.ts +7 -0
- package/lib/diagram-editor/diagram/diagram-action.d.ts +137 -0
- package/lib/diagram-editor/diagram/diagram-canvas.d.ts +99 -0
- package/lib/diagram-editor/diagram/diagram-config.d.ts +617 -0
- package/lib/diagram-editor/diagram/diagram-connection.d.ts +64 -0
- package/lib/diagram-editor/diagram/diagram-element.d.ts +21 -0
- package/lib/diagram-editor/diagram/diagram-field.d.ts +37 -0
- package/lib/diagram-editor/diagram/diagram-model.d.ts +64 -0
- package/lib/diagram-editor/diagram/diagram-node.d.ts +68 -0
- package/lib/diagram-editor/diagram/diagram-port.d.ts +27 -0
- package/lib/diagram-editor/diagram/diagram-property.d.ts +141 -0
- package/lib/diagram-editor/diagram/diagram-section.d.ts +36 -0
- package/lib/diagram-editor/diagram/layout/adjacency-layout.d.ts +8 -0
- package/lib/diagram-editor/diagram/layout/breadth-adjacency-layout.d.ts +8 -0
- package/lib/diagram-editor/diagram/layout/breadth-layout.d.ts +9 -0
- package/lib/diagram-editor/diagram/layout/diagram-layout.d.ts +10 -0
- package/lib/diagram-editor/diagram/layout/force-layout.d.ts +8 -0
- package/lib/diagram-editor/diagram/layout/horizontal-layout.d.ts +8 -0
- package/lib/diagram-editor/diagram/layout/priority-layout.d.ts +8 -0
- package/lib/diagram-editor/diagram/layout/vertical-layout.d.ts +8 -0
- package/lib/diagram-editor/diagram-editor.component.d.ts +27 -0
- package/lib/errors/diagram-error.d.ts +5 -0
- package/lib/errors/diagram-validator.d.ts +8 -0
- package/lib/errors/errors.component.d.ts +21 -0
- package/lib/interfaces/canvas.d.ts +203 -0
- package/lib/interfaces/diagram-buttons.d.ts +33 -0
- package/lib/interfaces/diagram-editor.d.ts +20 -0
- package/lib/interfaces/palette.d.ts +10 -0
- package/lib/interfaces/property-editor.d.ts +19 -0
- package/lib/object-editor/object-editor.component.d.ts +25 -0
- package/lib/palette/palette.component.d.ts +31 -0
- package/lib/property-editor/property-editor.component.d.ts +18 -0
- package/lib/services/canvas-provider.service.d.ts +15 -0
- package/lib/services/daga-configuration.service.d.ts +12 -0
- package/lib/text-list-editor/text-list-editor.component.d.ts +20 -0
- package/lib/text-map-editor/text-map-editor.component.d.ts +29 -0
- package/lib/util/canvas-util.d.ts +16 -0
- package/lib/util/events.d.ts +53 -0
- package/lib/util/grid.d.ts +19 -0
- package/lib/util/line.d.ts +15 -0
- package/lib/util/list-util.d.ts +2 -0
- package/lib/util/shape.d.ts +23 -0
- package/lib/util/svg-util.d.ts +22 -0
- package/package.json +55 -0
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { Subject } from 'rxjs';
|
|
2
|
+
import { ActionQueue } from '../diagram-editor/diagram/diagram-action';
|
|
3
|
+
import { DiagramConnectionType } from '../diagram-editor/diagram/diagram-connection';
|
|
4
|
+
import { DiagramElement } from '../diagram-editor/diagram/diagram-element';
|
|
5
|
+
import { DiagramModel } from '../diagram-editor/diagram/diagram-model';
|
|
6
|
+
import { DiagramValidator } from '../errors/diagram-validator';
|
|
7
|
+
import { Point } from '../util/canvas-util';
|
|
8
|
+
import { DiagramEditor } from './diagram-editor';
|
|
9
|
+
/**
|
|
10
|
+
* Provides the functionality for the visual representation of the elements of a model.
|
|
11
|
+
*/
|
|
12
|
+
export interface Canvas {
|
|
13
|
+
/**
|
|
14
|
+
* Parent component of the diagram.
|
|
15
|
+
*/
|
|
16
|
+
parentComponent: DiagramEditor;
|
|
17
|
+
/**
|
|
18
|
+
* Object that contains the data of the elements of the diagram.
|
|
19
|
+
*/
|
|
20
|
+
model: DiagramModel;
|
|
21
|
+
/**
|
|
22
|
+
* Background color of the diagram.
|
|
23
|
+
*/
|
|
24
|
+
color: string;
|
|
25
|
+
/**
|
|
26
|
+
* Distance between the grid points of the diagram.
|
|
27
|
+
*/
|
|
28
|
+
gridSize: number;
|
|
29
|
+
/**
|
|
30
|
+
* If true, elements moved by the user should be placed on the closest grid point rather than the exact point where they were placed.
|
|
31
|
+
*/
|
|
32
|
+
snapToGrid: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* If true, new connections should have the type that makes most sense even if it's not the currently chosen type.
|
|
35
|
+
*/
|
|
36
|
+
guessConnectionType: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* When a new connection is made, it should have this type.
|
|
39
|
+
*/
|
|
40
|
+
connectionType?: DiagramConnectionType;
|
|
41
|
+
/**
|
|
42
|
+
* Elements below the priority threshold shouldn't be displayed.
|
|
43
|
+
*/
|
|
44
|
+
priorityThreshold?: number;
|
|
45
|
+
/**
|
|
46
|
+
* Possible values that the priority threshold can take.
|
|
47
|
+
*/
|
|
48
|
+
priorityThresholds: number[];
|
|
49
|
+
/**
|
|
50
|
+
* Identifier of the current layout format used by the diagram.
|
|
51
|
+
*/
|
|
52
|
+
layoutFormat?: string;
|
|
53
|
+
/**
|
|
54
|
+
* The list of validators used to check for errors in this canvas.
|
|
55
|
+
*/
|
|
56
|
+
validators: DiagramValidator[];
|
|
57
|
+
/**
|
|
58
|
+
* The queue of actions used to keep track of what actions can be undone or redone.
|
|
59
|
+
*/
|
|
60
|
+
actionQueue: ActionQueue;
|
|
61
|
+
/**
|
|
62
|
+
* Subject for tracking when the canvas' view is initialized.
|
|
63
|
+
*/
|
|
64
|
+
viewInitialized$: Subject<void>;
|
|
65
|
+
/**
|
|
66
|
+
* Subject for tracking when validators are added to the canvas.
|
|
67
|
+
*/
|
|
68
|
+
validatorChanges$: Subject<void>;
|
|
69
|
+
/**
|
|
70
|
+
* Subject for tracking changes in the diagram.
|
|
71
|
+
* Used to detect if there have been changes over a period of time.
|
|
72
|
+
*/
|
|
73
|
+
diagramChanges$: Subject<number>;
|
|
74
|
+
/**
|
|
75
|
+
* Subject for tracking the presence of important changes in the diagram.
|
|
76
|
+
* Used to detect if there are any changes that require an immediate reaction.
|
|
77
|
+
*/
|
|
78
|
+
diagramImportantChanges$: Subject<void>;
|
|
79
|
+
/**
|
|
80
|
+
* Initializes the view of the diagram.
|
|
81
|
+
*/
|
|
82
|
+
initView(appendTo: HTMLElement): void;
|
|
83
|
+
/**
|
|
84
|
+
* Increases the zoom level by the given factor.
|
|
85
|
+
* @param zoom A factor of zoom.
|
|
86
|
+
*/
|
|
87
|
+
zoomBy(zoom: number): void;
|
|
88
|
+
/**
|
|
89
|
+
* Changes the zoom level to a given level.
|
|
90
|
+
* @param zoom A level of zoom.
|
|
91
|
+
*/
|
|
92
|
+
zoomTo(zoom: number): void;
|
|
93
|
+
/**
|
|
94
|
+
* Translates the view by the given amount.
|
|
95
|
+
* @param x A distance along the x axis.
|
|
96
|
+
* @param y A distance along the y axis.
|
|
97
|
+
*/
|
|
98
|
+
translateBy(x: number, y: number): void;
|
|
99
|
+
/**
|
|
100
|
+
* Translates the view to the given point.
|
|
101
|
+
* @param x A coordinate along the x axis.
|
|
102
|
+
* @param y A coordinate along the y axis.
|
|
103
|
+
*/
|
|
104
|
+
translateTo(x: number, y: number): void;
|
|
105
|
+
/**
|
|
106
|
+
* Centers by zooming and translating the view such that every element fits in the view.
|
|
107
|
+
*/
|
|
108
|
+
center(): void;
|
|
109
|
+
/**
|
|
110
|
+
* Get the closest grid point to the given point.
|
|
111
|
+
* @param point A point.
|
|
112
|
+
*/
|
|
113
|
+
getClosestGridPoint(point: Point): Point;
|
|
114
|
+
/**
|
|
115
|
+
* Get the location of the pointer in the given event relative to the canvas.
|
|
116
|
+
* @param event A MouseEvent.
|
|
117
|
+
*/
|
|
118
|
+
getPointerLocationRelativeToCanvas(event: MouseEvent): Point;
|
|
119
|
+
/**
|
|
120
|
+
* Get the location of the pointer in the given event relative to the body.
|
|
121
|
+
* @param event A MouseEvent.
|
|
122
|
+
*/
|
|
123
|
+
getPointerLocationRelativeToBody(event: MouseEvent): Point;
|
|
124
|
+
/**
|
|
125
|
+
* Adds a validator to the list of validators of the diagram.
|
|
126
|
+
*/
|
|
127
|
+
addValidator(validator: DiagramValidator): void;
|
|
128
|
+
/**
|
|
129
|
+
* Removes a validator from the list of validators of the diagram.
|
|
130
|
+
*/
|
|
131
|
+
removeValidator(validator: DiagramValidator): void;
|
|
132
|
+
/**
|
|
133
|
+
* Update the view of the canvas to show the current state of the model.
|
|
134
|
+
*/
|
|
135
|
+
updateModelInView(): void;
|
|
136
|
+
/**
|
|
137
|
+
* Update the view of the canvas to show the current state of the nodes.
|
|
138
|
+
*/
|
|
139
|
+
updateNodesInView(...ids: string[]): void;
|
|
140
|
+
/**
|
|
141
|
+
* Update the view of the canvas to show the current state of the sections.
|
|
142
|
+
*/
|
|
143
|
+
updateSectionsInView(...ids: string[]): void;
|
|
144
|
+
/**
|
|
145
|
+
* Update the view of the canvas to show the current state of the ports.
|
|
146
|
+
*/
|
|
147
|
+
updatePortsInView(...ids: string[]): void;
|
|
148
|
+
/**
|
|
149
|
+
* Update the view of the canvas to show the current state of the connections.
|
|
150
|
+
*/
|
|
151
|
+
updateConnectionsInView(...ids: string[]): void;
|
|
152
|
+
/**
|
|
153
|
+
* Update the view of the canvas to show the current state of the fields.
|
|
154
|
+
*/
|
|
155
|
+
updateFieldsInView(...ids: string[]): void;
|
|
156
|
+
/**
|
|
157
|
+
* Get the d3 Selection containing the view of all the elements in the canvas.
|
|
158
|
+
*/
|
|
159
|
+
selectCanvasView(): d3.Selection<SVGGElement, unknown, null, unknown>;
|
|
160
|
+
/**
|
|
161
|
+
* Highlight the given diagram element in the canvas view and all the elements which depend on it.
|
|
162
|
+
* Highlighting an element unhighlights the previously highlighted elements.
|
|
163
|
+
* @param element A diagram element.
|
|
164
|
+
*/
|
|
165
|
+
highlight(element: DiagramElement): void;
|
|
166
|
+
/**
|
|
167
|
+
* Unhighlights all diagram elements.
|
|
168
|
+
*/
|
|
169
|
+
unhighlight(): void;
|
|
170
|
+
/**
|
|
171
|
+
* Checks if the given diagram element is in the current user selection.
|
|
172
|
+
* @param selection A diagram element.
|
|
173
|
+
*/
|
|
174
|
+
isInUserSelection(selection: DiagramElement): boolean;
|
|
175
|
+
/**
|
|
176
|
+
* Adds the given diagram element to the current user selection.
|
|
177
|
+
* @param selection A diagram element.
|
|
178
|
+
*/
|
|
179
|
+
addToUserSelection(selection: DiagramElement): void;
|
|
180
|
+
/**
|
|
181
|
+
* Removes the given diagram element from the current user selection.
|
|
182
|
+
* @param selection A diagram element.
|
|
183
|
+
*/
|
|
184
|
+
removeFromUserSelection(selection: DiagramElement): void;
|
|
185
|
+
/**
|
|
186
|
+
* Adds the given diagram element to the current user selection if it's not in the current user selection.
|
|
187
|
+
* If it is part of the current user selection, removes it from the current user selection.
|
|
188
|
+
* @param selection A diagram element.
|
|
189
|
+
*/
|
|
190
|
+
toggleUserSelection(selection: DiagramElement): void;
|
|
191
|
+
/**
|
|
192
|
+
* Removes all elements from the current user selection.
|
|
193
|
+
*/
|
|
194
|
+
clearUserSelection(): void;
|
|
195
|
+
/**
|
|
196
|
+
* Stops all unfinished user actions to ensure there are no unfinished actions before performing a different action.
|
|
197
|
+
*/
|
|
198
|
+
cancelAllUserActions(): void;
|
|
199
|
+
/**
|
|
200
|
+
* Sets the diagram element whose ValueSet is being displayed in the value set editor.
|
|
201
|
+
*/
|
|
202
|
+
setPropertyEditorSelection(selection?: DiagramElement): void;
|
|
203
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* General canvas commands for zooming and filtering used by the buttons of the diagram's user interface.
|
|
3
|
+
*/
|
|
4
|
+
export interface DiagramButtons {
|
|
5
|
+
/**
|
|
6
|
+
* Increase the zoom level of the diagram by this component's zoom rate.
|
|
7
|
+
*/
|
|
8
|
+
zoomIn(): void;
|
|
9
|
+
/**
|
|
10
|
+
* Decrease the zoom level of the diagram by this component's zoom rate.
|
|
11
|
+
*/
|
|
12
|
+
zoomOut(): void;
|
|
13
|
+
/**
|
|
14
|
+
* Center the view of the diagram.
|
|
15
|
+
*/
|
|
16
|
+
center(): void;
|
|
17
|
+
/**
|
|
18
|
+
* Apply the diagram's current layout if applicable.
|
|
19
|
+
*/
|
|
20
|
+
layout(): void;
|
|
21
|
+
/**
|
|
22
|
+
* Change the current priority threshold of the canvas, hide any nodes with a priority below the threshold and recalculate the diagram's layout.
|
|
23
|
+
*/
|
|
24
|
+
filter(): void;
|
|
25
|
+
/**
|
|
26
|
+
* Undo the latest user change in the diagram.
|
|
27
|
+
*/
|
|
28
|
+
undo(): void;
|
|
29
|
+
/**
|
|
30
|
+
* Redo the latest undone user change in the diagram.
|
|
31
|
+
*/
|
|
32
|
+
redo(): void;
|
|
33
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { DiagramButtons } from './diagram-buttons';
|
|
2
|
+
import { Palette } from './palette';
|
|
3
|
+
import { PropertyEditor } from './property-editor';
|
|
4
|
+
/**
|
|
5
|
+
* Exposes the components of the diagram editor.
|
|
6
|
+
*/
|
|
7
|
+
export interface DiagramEditor {
|
|
8
|
+
/**
|
|
9
|
+
* Diagram buttons component of the diagram editor.
|
|
10
|
+
*/
|
|
11
|
+
diagramButtons: DiagramButtons;
|
|
12
|
+
/**
|
|
13
|
+
* Palette component of the diagram editor.
|
|
14
|
+
*/
|
|
15
|
+
palette: Palette;
|
|
16
|
+
/**
|
|
17
|
+
* Property editor component of the diagram editor.
|
|
18
|
+
*/
|
|
19
|
+
propertyEditor: PropertyEditor;
|
|
20
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Exposes the commands of the palette component.
|
|
3
|
+
*/
|
|
4
|
+
export interface Palette {
|
|
5
|
+
/**
|
|
6
|
+
* Refresh the current items being displayed in the palette.
|
|
7
|
+
* Used when it is necessary to update the contents of the palette but the state of the palette doesn't change.
|
|
8
|
+
*/
|
|
9
|
+
refreshPalette(): void;
|
|
10
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ValueSet } from '../diagram-editor/diagram/diagram-property';
|
|
2
|
+
/**
|
|
3
|
+
* Exposes the commands of the property editor component.
|
|
4
|
+
*/
|
|
5
|
+
export interface PropertyEditor {
|
|
6
|
+
/**
|
|
7
|
+
* Title of the ValueSet displayed in the UI.
|
|
8
|
+
*/
|
|
9
|
+
title?: string;
|
|
10
|
+
/**
|
|
11
|
+
* ValueSet being edited in this component by the user.
|
|
12
|
+
*/
|
|
13
|
+
valueSet?: ValueSet;
|
|
14
|
+
/**
|
|
15
|
+
* Highlight the property given by the list of keys it can be found under.
|
|
16
|
+
* @param propertyNames The keys under which a property can be found in the ValueSet being edited in this component.
|
|
17
|
+
*/
|
|
18
|
+
highlightProperty(...propertyNames: string[]): void;
|
|
19
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ChangeDetectorRef } from '@angular/core';
|
|
2
|
+
import { RadioItem } from '@metadev/lux';
|
|
3
|
+
import { Property, Type, ValueSet } from '../diagram-editor/diagram/diagram-property';
|
|
4
|
+
import { Canvas } from '../interfaces/canvas';
|
|
5
|
+
import { CanvasProviderService } from '../services/canvas-provider.service';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
export declare class ObjectEditorComponent {
|
|
8
|
+
private cdr;
|
|
9
|
+
private canvasProvider;
|
|
10
|
+
get canvas(): Canvas;
|
|
11
|
+
_valueSet?: ValueSet;
|
|
12
|
+
get valueSet(): ValueSet | undefined;
|
|
13
|
+
set valueSet(valueSet: ValueSet | undefined);
|
|
14
|
+
/** How many object-editors are parents of this object-editor */
|
|
15
|
+
depth: number;
|
|
16
|
+
Type: typeof Type;
|
|
17
|
+
booleanRadioItems: RadioItem[];
|
|
18
|
+
constructor(cdr: ChangeDetectorRef, canvasProvider: CanvasProviderService);
|
|
19
|
+
displayProperty(property: Property | Event | string | undefined): void;
|
|
20
|
+
hideProperty(property: Property | Event | string | undefined): void;
|
|
21
|
+
setValue(property: Property, value: unknown): void;
|
|
22
|
+
convertDate(date: string | number | Date): string;
|
|
23
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ObjectEditorComponent, never>;
|
|
24
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ObjectEditorComponent, "daga-object-editor", never, { "valueSet": { "alias": "valueSet"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; }, {}, never, never, true, never>;
|
|
25
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { AfterContentInit, AfterViewInit, ElementRef } from '@angular/core';
|
|
2
|
+
import * as d3 from 'd3';
|
|
3
|
+
import { PaletteConfig } from '../diagram-editor/diagram/diagram-config';
|
|
4
|
+
import { Canvas } from '../interfaces/canvas';
|
|
5
|
+
import { Palette } from '../interfaces/palette';
|
|
6
|
+
import { CanvasProviderService } from '../services/canvas-provider.service';
|
|
7
|
+
import { Corner } from '../util/svg-util';
|
|
8
|
+
import * as i0 from "@angular/core";
|
|
9
|
+
export declare class PaletteComponent implements AfterContentInit, AfterViewInit, Palette {
|
|
10
|
+
private canvasProvider;
|
|
11
|
+
get canvas(): Canvas;
|
|
12
|
+
panel: ElementRef<HTMLDivElement>;
|
|
13
|
+
palettes: PaletteConfig[];
|
|
14
|
+
currentPalette: PaletteConfig;
|
|
15
|
+
currentCategory: string;
|
|
16
|
+
location: Corner;
|
|
17
|
+
private priorityThreshold?;
|
|
18
|
+
constructor(canvasProvider: CanvasProviderService);
|
|
19
|
+
ngAfterContentInit(): void;
|
|
20
|
+
ngAfterViewInit(): void;
|
|
21
|
+
refreshPalette(): void;
|
|
22
|
+
switchPalette(palette: PaletteConfig): void;
|
|
23
|
+
selectPanel(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
|
|
24
|
+
selectPalette(): d3.Selection<HTMLDivElement, unknown, null, undefined>;
|
|
25
|
+
private appendCategories;
|
|
26
|
+
private appendTemplate;
|
|
27
|
+
private appendNodeTemplate;
|
|
28
|
+
private appendConnectionTemplate;
|
|
29
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PaletteComponent, never>;
|
|
30
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PaletteComponent, "daga-palette", never, { "palettes": { "alias": "palettes"; "required": false; }; "currentPalette": { "alias": "currentPalette"; "required": false; }; "currentCategory": { "alias": "currentCategory"; "required": false; }; "location": { "alias": "location"; "required": false; }; }, {}, never, never, true, never>;
|
|
31
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ChangeDetectorRef, ElementRef } from '@angular/core';
|
|
2
|
+
import { ValueSet } from '../diagram-editor/diagram/diagram-property';
|
|
3
|
+
import { PropertyEditor } from '../interfaces/property-editor';
|
|
4
|
+
import { Corner } from '../util/svg-util';
|
|
5
|
+
import * as i0 from "@angular/core";
|
|
6
|
+
export declare class PropertyEditorComponent implements PropertyEditor {
|
|
7
|
+
private cdr;
|
|
8
|
+
panel: ElementRef<HTMLDivElement>;
|
|
9
|
+
location: Corner;
|
|
10
|
+
title?: string;
|
|
11
|
+
_valueSet: ValueSet | undefined;
|
|
12
|
+
get valueSet(): ValueSet | undefined;
|
|
13
|
+
set valueSet(valueSet: ValueSet | undefined);
|
|
14
|
+
constructor(cdr: ChangeDetectorRef);
|
|
15
|
+
highlightProperty(...propertyNames: string[]): void;
|
|
16
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PropertyEditorComponent, never>;
|
|
17
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PropertyEditorComponent, "daga-property-editor", never, { "location": { "alias": "location"; "required": false; }; "valueSet": { "alias": "valueSet"; "required": false; }; }, {}, never, never, true, never>;
|
|
18
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { DiagramConfig } from '../diagram-editor/diagram/diagram-config';
|
|
2
|
+
import { Canvas } from '../interfaces/canvas';
|
|
3
|
+
import { DiagramEditor } from '../interfaces/diagram-editor';
|
|
4
|
+
import * as i0 from "@angular/core";
|
|
5
|
+
/**
|
|
6
|
+
* A provider for the {@link Canvas} associated with a {@link DiagramComponent} context.
|
|
7
|
+
*/
|
|
8
|
+
export declare class CanvasProviderService {
|
|
9
|
+
private _canvas;
|
|
10
|
+
initCanvas(parentComponent: DiagramEditor, config: DiagramConfig): void;
|
|
11
|
+
initCanvasView(appendTo: HTMLElement): void;
|
|
12
|
+
getCanvas(): Canvas;
|
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CanvasProviderService, never>;
|
|
14
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<CanvasProviderService>;
|
|
15
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { DiagramConfig } from '../diagram-editor/diagram/diagram-config';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* A provider for the {@link DiagramConfig} associated with a {@link DiagramComponent} context.
|
|
5
|
+
*/
|
|
6
|
+
export declare class DagaConfigurationService {
|
|
7
|
+
private _config;
|
|
8
|
+
init(config: DiagramConfig): void;
|
|
9
|
+
getConfig(): DiagramConfig;
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DagaConfigurationService, never>;
|
|
11
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<DagaConfigurationService>;
|
|
12
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class TextListEditorComponent {
|
|
4
|
+
private cdr;
|
|
5
|
+
private _value;
|
|
6
|
+
set value(val: string[]);
|
|
7
|
+
get value(): string[];
|
|
8
|
+
valueInput: string;
|
|
9
|
+
disabled: boolean;
|
|
10
|
+
valueChange: EventEmitter<string[]>;
|
|
11
|
+
constructor(cdr: ChangeDetectorRef);
|
|
12
|
+
getValueFromEvent(event: Event): string;
|
|
13
|
+
removeFromValue(index: number): void;
|
|
14
|
+
editFromValue(item: string, index: number): void;
|
|
15
|
+
addToValue(): void;
|
|
16
|
+
clearInput(): void;
|
|
17
|
+
onKeyUp(event: KeyboardEvent): void;
|
|
18
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TextListEditorComponent, never>;
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TextListEditorComponent, "daga-text-list-editor", never, { "value": { "alias": "value"; "required": false; }; "valueInput": { "alias": "valueInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
20
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ChangeDetectorRef, EventEmitter } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class TextMapEditorComponent {
|
|
4
|
+
private cdr;
|
|
5
|
+
private _value;
|
|
6
|
+
set value(val: {
|
|
7
|
+
[name: string]: string;
|
|
8
|
+
});
|
|
9
|
+
get value(): {
|
|
10
|
+
[name: string]: string;
|
|
11
|
+
};
|
|
12
|
+
keyInput: string;
|
|
13
|
+
valueInput: string;
|
|
14
|
+
disabled: boolean;
|
|
15
|
+
valueChange: EventEmitter<{
|
|
16
|
+
[name: string]: string;
|
|
17
|
+
}>;
|
|
18
|
+
constructor(cdr: ChangeDetectorRef);
|
|
19
|
+
getValueFromEvent(event: Event): string;
|
|
20
|
+
removeFromValue(key: string): void;
|
|
21
|
+
editKey(oldKey: string, newKey: string): void;
|
|
22
|
+
editValue(key: string, value: string): void;
|
|
23
|
+
addToValue(): void;
|
|
24
|
+
clearKeyInput(): void;
|
|
25
|
+
clearValueInput(): void;
|
|
26
|
+
onKeyUp(event: KeyboardEvent): void;
|
|
27
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TextMapEditorComponent, never>;
|
|
28
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TextMapEditorComponent, "daga-text-map-editor", never, { "value": { "alias": "value"; "required": false; }; "keyInput": { "alias": "keyInput"; "required": false; }; "valueInput": { "alias": "valueInput"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
29
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Side } from './svg-util';
|
|
2
|
+
export type Point = [number, number];
|
|
3
|
+
export type Line = [Point, Point];
|
|
4
|
+
export type Rectangle = [Point, Point];
|
|
5
|
+
export declare const roundPoint: (point: Point) => Point;
|
|
6
|
+
export declare const between: (coordinate: number, start: number, end: number) => boolean;
|
|
7
|
+
export declare const translateCoordinate: (oldCoordinate: number, oldCoordinates: [number, number], newCoordinates: [number, number]) => number;
|
|
8
|
+
export declare const translatePoint: (oldPoint: Point, oldCoordsX: [number, number], oldCoordsY: [number, number], newCoordsX: [number, number], newCoordsY: [number, number]) => Point;
|
|
9
|
+
export declare const movePoint: (point: Point, direction: Side, distance: number) => Point;
|
|
10
|
+
export declare const equals: (point1: Point, point2: Point) => boolean;
|
|
11
|
+
export declare const distanceBetweenPoints: (point1: Point, point2: Point) => number;
|
|
12
|
+
export declare const lineContainsPoint: (line: Line, point: Point) => boolean;
|
|
13
|
+
export declare const rectangleContainsPoint: (rectangle: Rectangle, point: Point) => boolean;
|
|
14
|
+
export declare const linesIntersect: (line1: Line, line2: Line) => boolean;
|
|
15
|
+
export declare const linesOverlap: (line1: Line, line2: Line) => boolean;
|
|
16
|
+
export declare const lineIntersectsRectangle: (line: Line, rectangle: Rectangle) => boolean;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* User events
|
|
3
|
+
*/
|
|
4
|
+
export declare enum Events {
|
|
5
|
+
Blur = "blur",
|
|
6
|
+
Change = "change",
|
|
7
|
+
Click = "click",
|
|
8
|
+
DoubleClick = "dblclick",
|
|
9
|
+
Input = "input",
|
|
10
|
+
KeyUp = "keyup",
|
|
11
|
+
MouseMove = "mousemove",
|
|
12
|
+
MouseOut = "mouseout",
|
|
13
|
+
MouseOver = "mouseover"
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Keys in keyboard events
|
|
17
|
+
*/
|
|
18
|
+
export declare enum Keys {
|
|
19
|
+
Alt = "Alt",
|
|
20
|
+
AltGraph = "AltGraph",
|
|
21
|
+
ArrowDown = "ArrowDown",
|
|
22
|
+
ArrowLeft = "ArrowLeft",
|
|
23
|
+
ArrowRight = "ArrowRight",
|
|
24
|
+
ArrowUp = "ArrowUp",
|
|
25
|
+
Backspace = "Backspace",
|
|
26
|
+
Control = "Control",
|
|
27
|
+
Delete = "Delete",
|
|
28
|
+
End = "End",
|
|
29
|
+
Enter = "Enter",
|
|
30
|
+
Escape = "Escape",
|
|
31
|
+
Home = "Home",
|
|
32
|
+
OS = "OS",
|
|
33
|
+
PageDown = "PageDown",
|
|
34
|
+
PageUp = "PageUp",
|
|
35
|
+
Shift = "Shift",
|
|
36
|
+
Tab = "Tab"
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Types of events used by D3's drag functionality
|
|
40
|
+
*/
|
|
41
|
+
export declare enum DragEvents {
|
|
42
|
+
Drag = "drag",
|
|
43
|
+
Start = "start",
|
|
44
|
+
End = "end"
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Types of events used by D3's zoom functionality
|
|
48
|
+
*/
|
|
49
|
+
export declare enum ZoomEvents {
|
|
50
|
+
Zoom = "zoom",
|
|
51
|
+
Start = "start",
|
|
52
|
+
End = "end"
|
|
53
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { Point } from './canvas-util';
|
|
2
|
+
export declare class Grid<T> {
|
|
3
|
+
grid: (T | undefined)[][];
|
|
4
|
+
offsetX: number;
|
|
5
|
+
offsetY: number;
|
|
6
|
+
minX(): number;
|
|
7
|
+
maxX(): number;
|
|
8
|
+
minY(): number;
|
|
9
|
+
maxY(): number;
|
|
10
|
+
width(): number;
|
|
11
|
+
height(): number;
|
|
12
|
+
addColumnLeft(): void;
|
|
13
|
+
addColumnRight(): void;
|
|
14
|
+
addRowTop(): void;
|
|
15
|
+
addRowBottom(): void;
|
|
16
|
+
get(coords: Point): T | undefined;
|
|
17
|
+
set(coords: Point, value: T | undefined): void;
|
|
18
|
+
getClosestEmptyCoordinate(coords: Point): [number, number];
|
|
19
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Point } from './canvas-util';
|
|
2
|
+
import { Side } from './svg-util';
|
|
3
|
+
export declare enum LineShape {
|
|
4
|
+
Straight = "straight",
|
|
5
|
+
Bezier = "bezier",
|
|
6
|
+
Square = "square"
|
|
7
|
+
}
|
|
8
|
+
export declare enum LineStyle {
|
|
9
|
+
Solid = "solid",
|
|
10
|
+
Dashed = "dashed",
|
|
11
|
+
GappedDashes = "gapped-dashes",
|
|
12
|
+
Dotted = "dotted"
|
|
13
|
+
}
|
|
14
|
+
export declare const linePath: (shape: LineShape, points: Point[], startDirection?: Side | undefined, endDirection?: Side | undefined, minimumDistanceBeforeTurn?: number) => string;
|
|
15
|
+
export declare const lineStyleDasharray: (style: LineStyle, width: number) => string;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export declare enum ClosedShape {
|
|
2
|
+
Ellipse = "ellipse",
|
|
3
|
+
Empty = "empty",
|
|
4
|
+
Folder = "folder",
|
|
5
|
+
Hexagon = "hexagon",
|
|
6
|
+
Octagon = "octagon",
|
|
7
|
+
Pill = "pill",
|
|
8
|
+
Rectangle = "rectangle",
|
|
9
|
+
Rhombus = "rhombus",
|
|
10
|
+
RoundedRectangle = "rounded-rectangle",
|
|
11
|
+
StickyNote = "sticky-note"
|
|
12
|
+
}
|
|
13
|
+
export declare const generalClosedPath: (shape: ClosedShape, x: number, y: number, width: number, height: number) => string;
|
|
14
|
+
export declare const ellipsePath: (x: number, y: number, width: number, height: number) => string;
|
|
15
|
+
export declare const emptyPath: () => string;
|
|
16
|
+
export declare const folderPath: (x: number, y: number, width: number, height: number) => string;
|
|
17
|
+
export declare const hexagonPath: (x: number, y: number, width: number, height: number) => string;
|
|
18
|
+
export declare const octagonPath: (x: number, y: number, width: number, height: number) => string;
|
|
19
|
+
export declare const pillPath: (x: number, y: number, width: number, height: number) => string;
|
|
20
|
+
export declare const rectanglePath: (x: number, y: number, width: number, height: number) => string;
|
|
21
|
+
export declare const rhombusPath: (x: number, y: number, width: number, height: number) => string;
|
|
22
|
+
export declare const roundedRectanglePath: (x: number, y: number, width: number, height: number) => string;
|
|
23
|
+
export declare const stickyNotePath: (x: number, y: number, width: number, height: number) => string;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare enum Side {
|
|
2
|
+
Bottom = "bottom",
|
|
3
|
+
Left = "left",
|
|
4
|
+
Right = "right",
|
|
5
|
+
Top = "top"
|
|
6
|
+
}
|
|
7
|
+
export declare enum Corner {
|
|
8
|
+
BottomLeft = "bottom-left",
|
|
9
|
+
BottomRight = "bottom-right",
|
|
10
|
+
TopLeft = "top-left",
|
|
11
|
+
TopRight = "top-right"
|
|
12
|
+
}
|
|
13
|
+
export declare enum VerticalAlign {
|
|
14
|
+
Top = "top",
|
|
15
|
+
Center = "center",
|
|
16
|
+
Bottom = "bottom"
|
|
17
|
+
}
|
|
18
|
+
export declare enum HorizontalAlign {
|
|
19
|
+
Left = "left",
|
|
20
|
+
Center = "center",
|
|
21
|
+
Right = "right"
|
|
22
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@metadev/daga",
|
|
3
|
+
"description": "Diagramming engine for editing models on the Web. Made by Metadev.",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"author": "Metadev (https://metadev.pro)",
|
|
6
|
+
"license": "SEE LICENSE IN LICENSE.md",
|
|
7
|
+
"repository": "git+https://github.com/metadevpro/daga-tutorial.git",
|
|
8
|
+
"homepage": "https://metadev.pro/products/daga/",
|
|
9
|
+
"keywords": [
|
|
10
|
+
"diagramming",
|
|
11
|
+
"models",
|
|
12
|
+
"dsl",
|
|
13
|
+
"mde",
|
|
14
|
+
"nocode",
|
|
15
|
+
"lowcode",
|
|
16
|
+
"visual-editor",
|
|
17
|
+
"daga",
|
|
18
|
+
"angular"
|
|
19
|
+
],
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@angular/common": "^17.0.0",
|
|
22
|
+
"@angular/core": "^17.0.0",
|
|
23
|
+
"@angular/forms": "^17.0.0",
|
|
24
|
+
"@metadev/lux": "^0.28.0",
|
|
25
|
+
"d3": "^7.8.5",
|
|
26
|
+
"rxjs": "~7.8.1"
|
|
27
|
+
},
|
|
28
|
+
"sideEffects": false,
|
|
29
|
+
"files": [
|
|
30
|
+
"/assets",
|
|
31
|
+
"/fesm2022",
|
|
32
|
+
"/lib",
|
|
33
|
+
"index.d.ts",
|
|
34
|
+
"package.json",
|
|
35
|
+
"README.md",
|
|
36
|
+
"LICENSE.md",
|
|
37
|
+
"Changelog.md"
|
|
38
|
+
],
|
|
39
|
+
"module": "fesm2022/metadev-daga.mjs",
|
|
40
|
+
"typings": "index.d.ts",
|
|
41
|
+
"exports": {
|
|
42
|
+
"./package.json": {
|
|
43
|
+
"default": "./package.json"
|
|
44
|
+
},
|
|
45
|
+
".": {
|
|
46
|
+
"types": "./index.d.ts",
|
|
47
|
+
"esm2022": "./esm2022/metadev-daga.mjs",
|
|
48
|
+
"esm": "./esm2022/metadev-daga.mjs",
|
|
49
|
+
"default": "./fesm2022/metadev-daga.mjs"
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
"dependencies": {
|
|
53
|
+
"tslib": "^2.3.0"
|
|
54
|
+
}
|
|
55
|
+
}
|