@metadev/daga 1.5.7 → 3.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.
Files changed (137) hide show
  1. package/Changelog.md +40 -1
  2. package/README.md +67 -30
  3. package/assets/daga-logo.svg +10 -0
  4. package/index.cjs.d.ts +1 -0
  5. package/index.cjs.default.js +1 -0
  6. package/index.cjs.js +8099 -0
  7. package/index.cjs.mjs +2 -0
  8. package/index.esm.d.ts +1 -0
  9. package/index.esm.js +8013 -0
  10. package/package.json +19 -37
  11. package/src/index.d.ts +49 -0
  12. package/src/lib/core.d.ts +1 -0
  13. package/{lib/diagram-editor/diagram → src/lib/diagram/canvas}/diagram-canvas.d.ts +72 -67
  14. package/src/lib/diagram/canvas/diagram-context-menu.d.ts +27 -0
  15. package/src/lib/diagram/canvas/diagram-user-highlight.d.ts +30 -0
  16. package/src/lib/diagram/canvas/diagram-user-selection.d.ts +74 -0
  17. package/{lib/diagram-editor → src/lib}/diagram/collab/collab-action.d.ts +36 -12
  18. package/{lib/diagram-editor → src/lib}/diagram/collab/collab-client.d.ts +1 -1
  19. package/{lib/diagram-editor → src/lib}/diagram/collab/collab-engine.d.ts +1 -1
  20. package/{lib/diagram-editor → src/lib}/diagram/collab/message-types.d.ts +3 -8
  21. package/{lib/diagram-editor → src/lib}/diagram/converters/daga-exporter.d.ts +6 -6
  22. package/{lib/diagram-editor → src/lib}/diagram/converters/daga-importer.d.ts +6 -4
  23. package/{lib/diagram-editor → src/lib}/diagram/converters/daga-model.d.ts +3 -3
  24. package/{lib/diagram-editor → src/lib}/diagram/converters/diagram-model-exporter.d.ts +2 -2
  25. package/{lib/diagram-editor → src/lib}/diagram/converters/diagram-model-importer.d.ts +2 -2
  26. package/{lib/diagram-editor → src/lib}/diagram/diagram-action.d.ts +75 -55
  27. package/{lib/diagram-editor → src/lib}/diagram/diagram-config.d.ts +148 -84
  28. package/{lib/diagram-editor → src/lib}/diagram/diagram-event.d.ts +3 -3
  29. package/{lib/diagram-editor → src/lib}/diagram/layout/adjacency-layout.d.ts +1 -1
  30. package/{lib/diagram-editor → src/lib}/diagram/layout/breadth-adjacency-layout.d.ts +1 -1
  31. package/{lib/diagram-editor → src/lib}/diagram/layout/breadth-layout.d.ts +1 -1
  32. package/{lib/diagram-editor → src/lib}/diagram/layout/diagram-layout.d.ts +1 -1
  33. package/{lib/diagram-editor → src/lib}/diagram/layout/force-layout.d.ts +1 -1
  34. package/{lib/diagram-editor → src/lib}/diagram/layout/horizontal-layout.d.ts +1 -1
  35. package/{lib/diagram-editor → src/lib}/diagram/layout/priority-layout.d.ts +1 -1
  36. package/{lib/diagram-editor → src/lib}/diagram/layout/tree-layout.d.ts +1 -1
  37. package/{lib/diagram-editor → src/lib}/diagram/layout/vertical-layout.d.ts +1 -1
  38. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-connection.d.ts +4 -4
  39. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-element.d.ts +7 -11
  40. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-entity.d.ts +2 -2
  41. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-field.d.ts +10 -10
  42. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-model.d.ts +15 -15
  43. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-node.d.ts +9 -9
  44. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-port.d.ts +4 -4
  45. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-property.d.ts +46 -31
  46. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-section.d.ts +10 -10
  47. package/{lib → src/lib}/errors/diagram-validator.d.ts +1 -1
  48. package/{lib → src/lib}/interfaces/canvas.d.ts +79 -107
  49. package/{lib → src/lib}/interfaces/diagram-buttons.d.ts +8 -8
  50. package/{lib → src/lib}/interfaces/diagram-editor.d.ts +4 -11
  51. package/{lib → src/lib}/interfaces/palette.d.ts +2 -2
  52. package/{lib → src/lib}/interfaces/property-editor.d.ts +5 -5
  53. package/{lib → src/lib}/util/canvas-util.d.ts +20 -5
  54. package/src/lib/util/device-util.d.ts +5 -0
  55. package/{lib → src/lib}/util/events.d.ts +6 -4
  56. package/{lib → src/lib}/util/style.d.ts +1 -0
  57. package/src/lib/util/test-util.d.ts +11 -0
  58. package/assets/fonts/DMMono-Medium.ttf +0 -0
  59. package/assets/fonts/DMMono-Medium.woff +0 -0
  60. package/assets/fonts/DMMono-Medium.woff2 +0 -0
  61. package/assets/fonts/WonderUnitSans-Medium.ttf +0 -0
  62. package/assets/fonts/WonderUnitSans-Medium.woff +0 -0
  63. package/assets/fonts/WonderUnitSans-Medium.woff2 +0 -0
  64. package/assets/icon/action/drop-down-arrow.svg +0 -8
  65. package/assets/icon/action/drop-horizontal-left.svg +0 -14
  66. package/assets/icon/action/drop-horizontal-none.svg +0 -13
  67. package/assets/icon/action/drop-horizontal-right.svg +0 -14
  68. package/assets/icon/action/drop-vertical-down.svg +0 -14
  69. package/assets/icon/action/drop-vertical-none.svg +0 -13
  70. package/assets/icon/action/drop-vertical-up.svg +0 -14
  71. package/assets/icon/action/filter-clear.png +0 -0
  72. package/assets/icon/buttons/center-hover.svg +0 -10
  73. package/assets/icon/buttons/center.svg +0 -10
  74. package/assets/icon/buttons/ellipsis-hover.svg +0 -7
  75. package/assets/icon/buttons/ellipsis.svg +0 -7
  76. package/assets/icon/buttons/filter-off-hover.svg +0 -5
  77. package/assets/icon/buttons/filter-off.svg +0 -5
  78. package/assets/icon/buttons/filter-on-hover.svg +0 -5
  79. package/assets/icon/buttons/filter-on.svg +0 -5
  80. package/assets/icon/buttons/layout-hover.svg +0 -8
  81. package/assets/icon/buttons/layout.svg +0 -8
  82. package/assets/icon/buttons/redo-hover.svg +0 -5
  83. package/assets/icon/buttons/redo.svg +0 -5
  84. package/assets/icon/buttons/undo-hover.svg +0 -5
  85. package/assets/icon/buttons/undo.svg +0 -5
  86. package/assets/icon/buttons/zoom-in-hover.svg +0 -8
  87. package/assets/icon/buttons/zoom-in.svg +0 -8
  88. package/assets/icon/buttons/zoom-out-hover.svg +0 -7
  89. package/assets/icon/buttons/zoom-out.svg +0 -7
  90. package/assets/icon/context/copy.svg +0 -4
  91. package/assets/icon/context/cross.svg +0 -3
  92. package/assets/icon/context/cut.svg +0 -4
  93. package/assets/icon/context/delete.svg +0 -4
  94. package/assets/icon/context/paste.svg +0 -4
  95. package/assets/icon/property/add.svg +0 -23
  96. package/assets/icon/property/close.svg +0 -3
  97. package/assets/icon/property/ellipsis.svg +0 -5
  98. package/assets/icon/property/gear.svg +0 -3
  99. package/assets/icon/property/hide.svg +0 -10
  100. package/assets/icon/property/move.svg +0 -35
  101. package/assets/styles/_collapse-button.scss +0 -37
  102. package/assets/styles/_context-menu.scss +0 -32
  103. package/assets/styles/_diagram-buttons.scss +0 -166
  104. package/assets/styles/_diagram.scss +0 -15
  105. package/assets/styles/_errors.scss +0 -83
  106. package/assets/styles/_palette.scss +0 -20
  107. package/assets/styles/_property-editor.scss +0 -285
  108. package/assets/styles/daga.scss +0 -150
  109. package/fesm2022/metadev-daga.mjs +0 -10977
  110. package/fesm2022/metadev-daga.mjs.map +0 -1
  111. package/index.d.ts +0 -55
  112. package/lib/collapse-button/collapse-button.component.d.ts +0 -22
  113. package/lib/daga.module.d.ts +0 -18
  114. package/lib/diagram/diagram.component.d.ts +0 -44
  115. package/lib/diagram-buttons/diagram-buttons.component.d.ts +0 -44
  116. package/lib/diagram-editor/diagram-editor.component.d.ts +0 -38
  117. package/lib/errors/errors.component.d.ts +0 -26
  118. package/lib/palette/palette.component.d.ts +0 -39
  119. package/lib/property-editor/autocomplete/autocomplete.component.d.ts +0 -39
  120. package/lib/property-editor/object-editor/object-editor.component.d.ts +0 -30
  121. package/lib/property-editor/option-list-editor/option-list-editor.component.d.ts +0 -33
  122. package/lib/property-editor/property-editor.component.d.ts +0 -34
  123. package/lib/property-editor/property-settings/property-settings.component.d.ts +0 -35
  124. package/lib/property-editor/text-list-editor/text-list-editor.component.d.ts +0 -29
  125. package/lib/property-editor/text-map-editor/text-map-editor.component.d.ts +0 -36
  126. package/lib/services/canvas-provider.service.d.ts +0 -32
  127. package/lib/services/daga-configuration.service.d.ts +0 -23
  128. package/{lib/diagram-editor → src/lib}/diagram/collab/primitives.d.ts +0 -0
  129. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-decorator.d.ts +1 -1
  130. package/{lib/diagram-editor/diagram → src/lib/diagram/model}/diagram-object.d.ts +0 -0
  131. package/{lib → src/lib}/errors/diagram-error.d.ts +3 -3
  132. package/{lib → src/lib}/util/grid.d.ts +0 -0
  133. package/{lib → src/lib}/util/line.d.ts +0 -0
  134. package/{lib → src/lib}/util/list-util.d.ts +0 -0
  135. package/{lib → src/lib}/util/shape.d.ts +10 -10
  136. /package/{lib → src/lib}/util/svg-util.d.ts +0 -0
  137. /package/{lib → src/lib}/util/text-util.d.ts +0 -0
package/package.json CHANGED
@@ -1,55 +1,37 @@
1
1
  {
2
2
  "name": "@metadev/daga",
3
- "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
4
- "version": "1.5.7",
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
- ],
3
+ "version": "3.0.0",
4
+ "dependencies": {},
20
5
  "peerDependencies": {
21
- "@angular/common": "^18.2.2",
22
- "@angular/core": "^18.2.2",
23
- "@angular/forms": "^18.2.2",
24
6
  "d3": "^7.9.0",
25
7
  "rxjs": "~7.8.1",
26
- "uuid": "^10.0.0"
8
+ "uuid": "^11.0.3"
27
9
  },
28
- "sideEffects": false,
10
+ "main": "./index.cjs.js",
11
+ "typings": "./src/index.d.ts",
29
12
  "files": [
30
13
  "/assets",
31
- "/fesm2022",
32
- "/lib",
33
- "index.d.ts",
14
+ "/src",
15
+ "index.cjs.d.ts",
16
+ "index.cjs.default.js",
17
+ "index.cjs.js",
18
+ "index.cjs.mjs",
19
+ "index.esm.d.ts",
20
+ "index.esm.js",
34
21
  "package.json",
35
22
  "README.md",
36
23
  "LICENSE.md",
37
24
  "Changelog.md"
38
25
  ],
39
- "module": "fesm2022/metadev-daga.mjs",
40
- "typings": "index.d.ts",
41
26
  "exports": {
42
- "./package.json": {
43
- "default": "./package.json"
44
- },
27
+ "./package.json": "./package.json",
45
28
  ".": {
46
- "types": "./index.d.ts",
47
- "esm2022": "./esm2022/metadev-daga.mjs",
48
- "esm": "./esm2022/metadev-daga.mjs",
49
- "default": "./fesm2022/metadev-daga.mjs"
29
+ "module": "./index.esm.js",
30
+ "types": "./index.esm.d.ts",
31
+ "import": "./index.cjs.mjs",
32
+ "default": "./index.cjs.js"
50
33
  }
51
34
  },
52
- "dependencies": {
53
- "tslib": "^2.3.0"
54
- }
35
+ "module": "./index.esm.js",
36
+ "types": "./index.esm.d.ts"
55
37
  }
package/src/index.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ export { Corner, HorizontalAlign, Side, VerticalAlign } from '../../daga/src/lib/util/svg-util';
2
+ export { ACTION_STACK_SIZE, DiagramCanvas, setCursorStyle } from './lib/diagram/canvas/diagram-canvas';
3
+ export { DiagramContextMenu } from './lib/diagram/canvas/diagram-context-menu';
4
+ export { DiagramUserHighlight } from './lib/diagram/canvas/diagram-user-highlight';
5
+ export { DiagramUserSelection } from './lib/diagram/canvas/diagram-user-selection';
6
+ export { CollabAction, CollabActionSerialized } from './lib/diagram/collab/collab-action';
7
+ export { CollabClient } from './lib/diagram/collab/collab-client';
8
+ export { CollabTimestamp, CollabTimestampSet } from './lib/diagram/collab/primitives';
9
+ export { DagaExporter } from './lib/diagram/converters/daga-exporter';
10
+ export { DagaImporter } from './lib/diagram/converters/daga-importer';
11
+ export { DagaConnection, DagaModel, DagaNode, DagaPort, DagaSection } from './lib/diagram/converters/daga-model';
12
+ export { DiagramModelExporter } from './lib/diagram/converters/diagram-model-exporter';
13
+ export { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
14
+ export { ActionStack, AddConnectionAction, AddNodeAction, DiagramAction, DiagramActions, EditFieldAction, RemoveAction, SetGeometryAction, UpdateValuesAction } from './lib/diagram/diagram-action';
15
+ export { ButtonsComponentConfig, CanvasConfig, ComponentsConfig, ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, ErrorsComponentConfig, FieldConfig, GridConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteComponentConfig, PaletteSectionConfig, PortConfig, PropertyEditorComponentConfig, SectionConfig, SectionGridConfig, UserActionConfig } from './lib/diagram/diagram-config';
16
+ export { DiagramEvent } from './lib/diagram/diagram-event';
17
+ export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
18
+ export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';
19
+ export { BreadthLayout } from './lib/diagram/layout/breadth-layout';
20
+ export { DiagramLayout, layouts } from './lib/diagram/layout/diagram-layout';
21
+ export { ForceLayout } from './lib/diagram/layout/force-layout';
22
+ export { HorizontalLayout } from './lib/diagram/layout/horizontal-layout';
23
+ export { PriorityLayout } from './lib/diagram/layout/priority-layout';
24
+ export { TreeLayout } from './lib/diagram/layout/tree-layout';
25
+ export { VerticalLayout } from './lib/diagram/layout/vertical-layout';
26
+ export { DiagramConnection, DiagramConnectionSet, DiagramConnectionType } from './lib/diagram/model/diagram-connection';
27
+ export { DiagramDecorator, DiagramDecoratorSet } from './lib/diagram/model/diagram-decorator';
28
+ export { DiagramElement, DiagramElementSet } from './lib/diagram/model/diagram-element';
29
+ export { DiagramEntity, DiagramEntitySet } from './lib/diagram/model/diagram-entity';
30
+ export { DIAGRAM_FIELD_DEFAULTS, DiagramField, DiagramFieldSet, getBottomMargin, getBottomPadding, getLeftMargin, getLeftPadding, getRightMargin, getRightPadding, getTopMargin, getTopPadding } from './lib/diagram/model/diagram-field';
31
+ export { DiagramModel } from './lib/diagram/model/diagram-model';
32
+ export { DiagramNode, DiagramNodeGeometry, DiagramNodeSet, DiagramNodeType } from './lib/diagram/model/diagram-node';
33
+ export { DiagramObject, DiagramObjectSet } from './lib/diagram/model/diagram-object';
34
+ export { DiagramPort, DiagramPortSet } from './lib/diagram/model/diagram-port';
35
+ export { diff, equals, isObject, Option, Property, PropertySet, Type, ValueSet } from './lib/diagram/model/diagram-property';
36
+ export { DiagramSection, DiagramSectionGeometry, DiagramSectionSet } from './lib/diagram/model/diagram-section';
37
+ export { DiagramError } from './lib/errors/diagram-error';
38
+ export { DiagramValidator } from './lib/errors/diagram-validator';
39
+ export { Canvas } from './lib/interfaces/canvas';
40
+ export { DiagramButtons } from './lib/interfaces/diagram-buttons';
41
+ export { DiagramEditor } from './lib/interfaces/diagram-editor';
42
+ export { Palette } from './lib/interfaces/palette';
43
+ export { PropertyEditor } from './lib/interfaces/property-editor';
44
+ export { Line, Point, Rectangle } from './lib/util/canvas-util';
45
+ export { DragEvents, Events, Keys, ZoomEvents } from './lib/util/events';
46
+ export { linePath, LineShape, LineStyle, lineStyleDasharray } from './lib/util/line';
47
+ export { addIfNotExists, removeIfExists } from './lib/util/list-util';
48
+ export { ClosedShape, generalClosedPath } from './lib/util/shape';
49
+ export { CursorStyle } from './lib/util/style';
@@ -0,0 +1 @@
1
+ export declare function core(): string;
@@ -5,80 +5,86 @@ import { Canvas } from '../../interfaces/canvas';
5
5
  import { DiagramEditor } from '../../interfaces/diagram-editor';
6
6
  import { Point } from '../../util/canvas-util';
7
7
  import { CursorStyle } from '../../util/style';
8
- import { CollabEngine } from './collab/collab-engine';
9
- import { ActionQueue, DiagramActions } from './diagram-action';
10
- import { DiagramConfig } from './diagram-config';
11
- import { DiagramConnection, DiagramConnectionType } from './diagram-connection';
12
- import { DiagramElement } from './diagram-element';
13
- import { DiagramModel } from './diagram-model';
14
- import { DiagramPort } from './diagram-port';
15
- import { ValueSet } from './diagram-property';
8
+ import { CollabEngine } from '../collab/collab-engine';
9
+ import { ActionStack, DiagramActions } from '../diagram-action';
10
+ import { DiagramConfig } from '../diagram-config';
11
+ import { DiagramEvent } from '../diagram-event';
12
+ import { DiagramConnectionType } from '../model/diagram-connection';
13
+ import { DiagramModel } from '../model/diagram-model';
14
+ import { DiagramContextMenu } from './diagram-context-menu';
15
+ import { DiagramUserHighlight } from './diagram-user-highlight';
16
+ import { DiagramUserSelection } from './diagram-user-selection';
16
17
  /**
17
- * Thickness of the invisible path around a connection used to make it easier to click on, in pixels.
18
+ * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
18
19
  * @private
19
20
  */
20
21
  export declare const CONNECTION_PATH_BOX_THICKNESS = 12;
21
22
  /**
22
- * Thickness of the resizer line used to resize nodes and sections on drag, in pixels.
23
+ * Thickness of the resizer line used to resize nodes and sections on drag, in diagram units.
23
24
  * @private
24
25
  */
25
26
  export declare const RESIZER_THICKNESS = 6;
26
27
  /**
27
- * Text to display as the title of the property editor when editing this diagram's properties.
28
- * @see PropertyEditorComponent
28
+ * Maximum number of user actions that can be recorded in the user action stack.
29
29
  * @private
30
+ * @see ActionStack
30
31
  */
31
- export declare const DIAGRAM_PROPERTIES_TEXT = "Diagram properties";
32
- /**
33
- * Maximum number of user actions that can be recorded in the user action queue.
34
- * @see ActionQueue
35
- * @private
36
- */
37
- export declare const ACTION_QUEUE_SIZE = 25;
32
+ export declare const ACTION_STACK_SIZE = 25;
38
33
  export declare class DiagramCanvas implements Canvas {
39
- parentComponent: DiagramEditor;
40
- diagramRoot: HTMLElement;
41
- model: DiagramModel;
34
+ private static canvasCount;
35
+ readonly parentComponent: DiagramEditor;
36
+ private diagramRoot;
37
+ readonly model: DiagramModel;
38
+ readonly userSelection: DiagramUserSelection;
39
+ readonly userHighlight: DiagramUserHighlight;
40
+ readonly contextMenu: DiagramContextMenu;
41
+ readonly actionStack: ActionStack;
42
+ readonly collabEngine: CollabEngine;
42
43
  backgroundColor: string;
43
44
  gridSize: number;
45
+ gridThickness: number;
46
+ gridColor: string;
44
47
  snapToGrid: boolean;
45
- guessConnectionType: boolean;
46
- connectionType?: DiagramConnectionType;
47
- validators: DiagramValidator[];
48
+ zoomFactor: number;
49
+ panRate: number;
50
+ inferConnectionType: boolean;
51
+ multipleSelectionOn: boolean;
52
+ private _connectionType?;
53
+ get connectionType(): DiagramConnectionType | undefined;
54
+ set connectionType(value: DiagramConnectionType | undefined);
48
55
  layoutFormat?: string;
56
+ validators: DiagramValidator[];
49
57
  userActions: {
50
58
  [key in DiagramActions]?: boolean;
51
59
  };
52
- actionQueue: ActionQueue;
53
- collabEngine: CollabEngine;
54
- private static canvasCount;
55
- private backgroundPatternId;
60
+ private readonly backgroundPatternId;
56
61
  private zoomBehavior;
57
62
  private zoomTransform;
58
63
  private priorityThreshold?;
59
64
  private priorityThresholds;
60
- private mainUserHighlight?;
61
- private userHighlight;
62
- /**
63
- * Elements selected by the user. Only nodes and connections should be selected.
64
- */
65
- private userSelection;
66
- private propertyEditorSelection?;
67
- private propertyEditorValues?;
68
65
  private unfinishedConnection?;
69
66
  /**
70
67
  * Invisible path followed by an unfinished connection. Used for making unfinished connections stop before the cursor rather than stopping right at the cursor.
71
68
  */
72
69
  private unfinishedConnectionTracer?;
73
70
  private inputFieldContainer?;
74
- private contextMenuContainer?;
71
+ private multipleSelectionContainer?;
75
72
  private draggingFrom;
73
+ private dragging;
74
+ private secondaryButton;
76
75
  private currentAction?;
77
- viewInitialized$: Subject<void>;
78
- validatorChanges$: Subject<void>;
79
- diagramChanges$: Subject<void>;
80
- diagramImportantChanges$: Subject<void>;
81
- propertyEditorChanges$: Subject<void>;
76
+ readonly viewInitialized$: Subject<void>;
77
+ readonly validatorChange$: Subject<void>;
78
+ readonly diagramChange$: Subject<void>;
79
+ readonly diagramImportantChange$: Subject<void>;
80
+ readonly propertyEditorChanges$: Subject<void>;
81
+ readonly diagramEvent$: Subject<DiagramEvent>;
82
+ /**
83
+ * Constructs a canvas object.
84
+ * @public
85
+ * @param parentComponent The diagram editor which contains this canvas.
86
+ * @param config The configuration object used to set the parameters of this canvas.
87
+ */
82
88
  constructor(parentComponent: DiagramEditor, config: DiagramConfig);
83
89
  addValidator(validator: DiagramValidator): void;
84
90
  removeValidator(validator: DiagramValidator): void;
@@ -86,8 +92,8 @@ export declare class DiagramCanvas implements Canvas {
86
92
  getPriorityThreshold(): number | undefined;
87
93
  setPriorityThreshold(priority: number): void;
88
94
  initView(appendTo: HTMLElement): void;
89
- zoomBy(zoom: number): void;
90
- zoomTo(zoom: number): void;
95
+ zoomBy(factor: number): void;
96
+ zoomTo(level: number): void;
91
97
  translateBy(x: number, y: number): void;
92
98
  translateTo(x: number, y: number): void;
93
99
  center(): void;
@@ -106,8 +112,8 @@ export declare class DiagramCanvas implements Canvas {
106
112
  updateFieldsInView(...ids: string[]): void;
107
113
  updateObjectsInView(...ids: string[]): void;
108
114
  updateDecoratorsInView(...ids: string[]): void;
109
- updateConnectionLabelsInView(connection: DiagramConnection): void;
110
- updateConnectionMarkersInView(connection: DiagramConnection): void;
115
+ private updateConnectionLabelsInView;
116
+ private updateConnectionMarkersInView;
111
117
  fitFieldRootInView(id: string): void;
112
118
  fitNodeInView(id: string): void;
113
119
  selectRoot(): d3.Selection<SVGElement, unknown, null, unknown>;
@@ -120,29 +126,28 @@ export declare class DiagramCanvas implements Canvas {
120
126
  selectCanvasFields(): d3.Selection<SVGGElement, unknown, null, unknown>;
121
127
  selectCanvasObjects(): d3.Selection<SVGGElement, unknown, null, unknown>;
122
128
  selectCanvasDecorators(): d3.Selection<SVGGElement, unknown, null, unknown>;
123
- startConnection(port: DiagramPort): void;
124
- finishConnection(port: DiagramPort): void;
125
- dropConnection(): void;
126
- highlight(element: DiagramElement): void;
127
- unhighlight(): void;
128
- setPropertyEditorSelection(selection?: {
129
- valueSet: ValueSet;
130
- } & (DiagramElement | DiagramModel)): void;
131
- private makeUpdateValuesAction;
132
- isInUserSelection(selection: DiagramElement): boolean;
133
- addToUserSelection(selection: DiagramElement): void;
134
- removeFromUserSelection(selection: DiagramElement): void;
135
- toggleUserSelection(selection: DiagramElement): void;
136
- clearUserSelection(): void;
137
- deleteUserSelection(): void;
138
- copyUserSelectionToClipboard(): void;
139
- pasteUserSelectionFromClipboard(coords?: Point): void;
140
- openContextMenu(event: MouseEvent): void;
141
- closeContextMenu(): void;
129
+ private startConnection;
130
+ private finishConnection;
131
+ private dropConnection;
142
132
  cancelAllUserActions(): void;
143
133
  canUserPerformAction(action: DiagramActions): boolean;
144
134
  private createInputField;
145
135
  private removeInputField;
146
136
  private minimumSizeOfField;
137
+ /**
138
+ * Method to call to start the moving of a node triggered by a user drag event.
139
+ */
140
+ private startMovingNode;
141
+ /**
142
+ * Method to call to continue the moving of a node triggered by a user drag event.
143
+ */
144
+ private continueMovingNode;
145
+ /**
146
+ * Method to call to finish the moving of a node triggered by a user drag event.
147
+ */
148
+ private finishMovingNode;
149
+ private startMultipleSelection;
150
+ private continueMultipleSelection;
151
+ private finishMultipleSelection;
147
152
  }
148
- export declare const cursorStyle: (style?: CursorStyle) => void;
153
+ export declare const setCursorStyle: (style?: CursorStyle) => void;
@@ -0,0 +1,27 @@
1
+ import { Canvas } from '../../interfaces/canvas';
2
+ /**
3
+ * Stores the functionality regarding the context menu of a diagram canvas.
4
+ * @public
5
+ * @see DiagramCanvas
6
+ */
7
+ export declare class DiagramContextMenu {
8
+ private readonly canvas;
9
+ private contextMenuContainer?;
10
+ /**
11
+ * Constructs a context menu object.
12
+ * @public
13
+ * @param canvas A canvas.
14
+ */
15
+ constructor(canvas: Canvas);
16
+ /**
17
+ * Opens the context menu at the location determined by the given mouse event.
18
+ * @public
19
+ * @param event A mouse event.
20
+ */
21
+ open(event: MouseEvent): void;
22
+ /**
23
+ * Closes the context menu. Has no effect if it's not open.
24
+ * @public
25
+ */
26
+ close(): void;
27
+ }
@@ -0,0 +1,30 @@
1
+ import { Canvas } from '../../interfaces/canvas';
2
+ import { DiagramElement, DiagramElementSet } from '../model/diagram-element';
3
+ /**
4
+ * Stores the functionality regarding the user highlight of a diagram canvas.
5
+ * @public
6
+ * @see DiagramCanvas
7
+ */
8
+ export declare class DiagramUserHighlight extends DiagramElementSet<DiagramElement> {
9
+ private readonly canvas;
10
+ private focus?;
11
+ /**
12
+ * Constructs a user highlight object.
13
+ * @public
14
+ * @param canvas A canvas.
15
+ */
16
+ constructor(canvas: Canvas);
17
+ /**
18
+ * Gets the focus of the user highlight, which is the element where the current user highlight started regardless of which other elements were highlighted as a consequence.
19
+ * @public
20
+ * @returns A diagram element.
21
+ */
22
+ getFocus(): DiagramElement | undefined;
23
+ /**
24
+ * Unhighlights all highlighted elements and highlights the given element as the main element of the user highlight.
25
+ * @param element
26
+ */
27
+ focusOn(element: DiagramElement): void;
28
+ add(element: DiagramElement): void;
29
+ clear(): void;
30
+ }
@@ -0,0 +1,74 @@
1
+ import { Canvas } from '../../interfaces/canvas';
2
+ import { Point } from '../../util/canvas-util';
3
+ import { DiagramElement, DiagramElementSet } from '../model/diagram-element';
4
+ import { DiagramModel } from '../model/diagram-model';
5
+ import { ValueSet } from '../model/diagram-property';
6
+ /**
7
+ * Text to display as the title of the property editor when editing the properties of a diagram's value set.
8
+ * @private
9
+ * @see PropertyEditorComponent
10
+ * @see ValueSet
11
+ */
12
+ export declare const DIAGRAM_PROPERTIES_TEXT = "Diagram properties";
13
+ /**
14
+ * Stores the functionality regarding the user highlight of a diagram canvas.
15
+ * @public
16
+ * @see DiagramCanvas
17
+ */
18
+ export declare class DiagramUserSelection extends DiagramElementSet<DiagramElement> {
19
+ private readonly canvas;
20
+ private propertyEditorSelection?;
21
+ private propertyEditorValues?;
22
+ /**
23
+ * Constructs a user selection object.
24
+ * @public
25
+ * @param canvas A canvas.
26
+ */
27
+ constructor(canvas: Canvas);
28
+ add(element: DiagramElement): void;
29
+ remove(id: string): void;
30
+ /**
31
+ * If the given element is not in the user selection, add it to the user selection.
32
+ * Otherwise, remove it from the user selection.
33
+ * @public
34
+ * @param element A diagram element.
35
+ */
36
+ toggle(element: DiagramElement): void;
37
+ clear(): void;
38
+ /**
39
+ * Moves the seelction by the given change in coordinates.
40
+ * @public
41
+ * @param delta A change in coordinates.
42
+ */
43
+ move(delta: Point): void;
44
+ /**
45
+ * Removes everything in the user selection from the model.
46
+ * @public
47
+ */
48
+ removeFromModel(): void;
49
+ /**
50
+ * Copies everything in the user selection to the clipboard.
51
+ * @public
52
+ */
53
+ copyToClipboard(): void;
54
+ /**
55
+ * Copies everything in the user selection to the clipboard and then removes it from the model.
56
+ * @public
57
+ */
58
+ cutToClipboard(): void;
59
+ /**
60
+ * Pastes everything in the clipboard to the model.
61
+ * @public
62
+ */
63
+ pasteFromClipboard(coords?: Point): void;
64
+ /**
65
+ * Opens the value set of a diagram model or a diagram element in the property editor.
66
+ * @public
67
+ * @param selection A diagram model or a diagram element with a value set.
68
+ * @see PropertyEditor
69
+ */
70
+ openInPropertyEditor(selection?: {
71
+ valueSet: ValueSet;
72
+ } & (DiagramElement | DiagramModel)): void;
73
+ private makeUpdateValuesAction;
74
+ }
@@ -1,8 +1,8 @@
1
- import { Canvas } from '../../../interfaces/canvas';
2
- import { Point } from '../../../util/canvas-util';
1
+ import { Canvas } from '../../interfaces/canvas';
2
+ import { Point } from '../../util/canvas-util';
3
3
  import { DagaConnection, DagaNode } from '../converters/daga-model';
4
- import { DiagramNodeGeometry } from '../diagram-node';
5
- import { ValueSet } from '../diagram-property';
4
+ import { DiagramNodeGeometry } from '../model/diagram-node';
5
+ import { ValueSet } from '../model/diagram-property';
6
6
  import { CollabTimestamp } from './primitives';
7
7
  /**
8
8
  * An action taken by a local or remote user.
@@ -32,7 +32,7 @@ export interface CollabAction {
32
32
  /**
33
33
  * @private
34
34
  */
35
- export type CollabActionSerialized = AddNodeSerialized | SetGeometrySerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
35
+ export type CollabActionSerialized = AddNodeSerialized | MoveSerialized | SetGeometrySerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
36
36
  /**
37
37
  * @private
38
38
  */
@@ -48,8 +48,8 @@ export type AddNodeSerialized = {
48
48
  };
49
49
  /**
50
50
  * Collaborative action which consists of adding a node.
51
- * @see AddNodeAction
52
51
  * @private
52
+ * @see AddNodeAction
53
53
  */
54
54
  export declare class AddNodeCollabAction implements CollabAction {
55
55
  readonly canvas: Canvas;
@@ -67,6 +67,30 @@ export declare class AddNodeCollabAction implements CollabAction {
67
67
  serialize(): AddNodeSerialized;
68
68
  static deserialize(canvas: Canvas, serialized: AddNodeSerialized): AddNodeCollabAction;
69
69
  }
70
+ /**
71
+ * @private
72
+ */
73
+ export type MoveSerialized = {
74
+ type: 'move';
75
+ nodeIds: string[];
76
+ delta: Point;
77
+ timestamp: CollabTimestamp;
78
+ };
79
+ /**
80
+ * Collaborative which consists of changing the coordinates of diagram elements by a fixed amount.
81
+ * @private
82
+ * @see MoveAction
83
+ */
84
+ export declare class MoveCollabAction implements CollabAction {
85
+ readonly canvas: Canvas;
86
+ readonly nodeIds: string[];
87
+ readonly delta: Point;
88
+ readonly timestamp: CollabTimestamp;
89
+ constructor(canvas: Canvas, nodeIds: string[], delta: Point, timestamp: CollabTimestamp);
90
+ do(): void;
91
+ serialize(): MoveSerialized;
92
+ static deserialize(canvas: Canvas, serialized: MoveSerialized): MoveCollabAction;
93
+ }
70
94
  /**
71
95
  * @private
72
96
  */
@@ -78,8 +102,8 @@ export type SetGeometrySerialized = {
78
102
  };
79
103
  /**
80
104
  * Collaborative action which consists of changing a node's geometry: moving, stretching, or stretching sections.
81
- * @see SetGeometryAction
82
105
  * @private
106
+ * @see SetGeometryAction
83
107
  */
84
108
  export declare class SetGeometryCollabAction implements CollabAction {
85
109
  readonly canvas: Canvas;
@@ -103,8 +127,8 @@ export type AddConnectionSerialized = {
103
127
  };
104
128
  /**
105
129
  * Collaborative action which consists of adding a connection.
106
- * @see AddConnectionAction
107
130
  * @private
131
+ * @see AddConnectionAction
108
132
  */
109
133
  export declare class AddConnectionCollabAction implements CollabAction {
110
134
  readonly canvas: Canvas;
@@ -128,8 +152,8 @@ export type EditFieldSerialized = {
128
152
  };
129
153
  /**
130
154
  * Collaborative action which consists of editing the text of a field.
131
- * @see EditFieldAction
132
155
  * @private
156
+ * @see EditFieldAction
133
157
  */
134
158
  export declare class EditFieldCollabAction implements CollabAction {
135
159
  readonly canvas: Canvas;
@@ -154,8 +178,8 @@ export type UpdateValuesSerialized = {
154
178
  };
155
179
  /**
156
180
  * Collaborative action which consists of editing the values of a value set.
157
- * @see UpdateValuesAction
158
181
  * @private
182
+ * @see UpdateValuesAction
159
183
  */
160
184
  export declare class UpdateValuesCollabAction implements CollabAction {
161
185
  readonly canvas: Canvas;
@@ -193,8 +217,8 @@ export type SetSelfRemovedSerialized = {
193
217
  * and their transitive dependents to update automatically.
194
218
  * For example, self-removing a node also removes all of its sections/connections/etc.
195
219
  *
196
- * @see RemoveAction
197
220
  * @private
221
+ * @see RemoveAction
198
222
  */
199
223
  export declare class SetSelfRemovedCollabAction implements CollabAction {
200
224
  readonly canvas: Canvas;
@@ -222,8 +246,8 @@ export type PasteSerialized = {
222
246
  /**
223
247
  * Collaborative action which consists of pasting elements from an external source into a diagram.
224
248
  *
225
- * @see PasteAction
226
249
  * @private
250
+ * @see PasteAction
227
251
  */
228
252
  export declare class PasteCollabAction implements CollabAction {
229
253
  readonly canvas: Canvas;
@@ -1,4 +1,4 @@
1
- import { Canvas } from '../../../interfaces/canvas';
1
+ import { Canvas } from '../../interfaces/canvas';
2
2
  /**
3
3
  * The client that communicates with the daga-server over WebSockets.
4
4
  *
@@ -1,4 +1,4 @@
1
- import type { Canvas } from '../../../interfaces/canvas';
1
+ import type { Canvas } from '../../interfaces/canvas';
2
2
  import { CollabAction, CollabActionSerialized } from './collab-action';
3
3
  import { CollabTimestamp } from './primitives';
4
4
  /**
@@ -4,15 +4,10 @@
4
4
  * Duplicated between https://github.com/metadevpro/daga-server/blob/dev/types.ts and
5
5
  * https://github.com/metadevpro/daga/blob/dev/libs/daga/src/lib/diagram-editor/diagram/collab/message-types.ts
6
6
  */
7
- /**
8
- * Stand-in for the DagaModel type on the server.
9
- */
10
- export interface DagaModelStub {
11
- }
12
7
  export interface RoomInfo {
13
8
  locator: string;
14
9
  ownerId: string;
15
- initialModel: DagaModelStub;
10
+ initialModel: unknown;
16
11
  messages: AddMessage[];
17
12
  }
18
13
  export interface UserInfo {
@@ -48,7 +43,7 @@ export interface CreateMessage extends IMessage {
48
43
  userId: string;
49
44
  /** Correlation id for the client */
50
45
  refId: string;
51
- initialModel: DagaModelStub;
46
+ initialModel: unknown;
52
47
  }
53
48
  export interface CreateAckMessage extends IMessage {
54
49
  type: 'CACK';
@@ -67,7 +62,7 @@ export interface EnrollMessage extends IMessage {
67
62
  export interface EnrollAckMessage extends IMessage {
68
63
  type: 'EACK';
69
64
  locator: string;
70
- initialModel: DagaModelStub;
65
+ initialModel: unknown;
71
66
  }
72
67
  export interface DeleteMessage extends IMessage {
73
68
  type: 'DLTE';
@@ -1,7 +1,7 @@
1
- import { DiagramConnection } from '../diagram-connection';
2
- import { DiagramField } from '../diagram-field';
3
- import { DiagramModel } from '../diagram-model';
4
- import { DiagramNode } from '../diagram-node';
1
+ import { DiagramConnection } from '../model/diagram-connection';
2
+ import { DiagramField } from '../model/diagram-field';
3
+ import { DiagramModel } from '../model/diagram-model';
4
+ import { DiagramNode } from '../model/diagram-node';
5
5
  import { DagaConnection, DagaModel, DagaNode } from './daga-model';
6
6
  import { DiagramModelExporter } from './diagram-model-exporter';
7
7
  /**
@@ -18,8 +18,8 @@ export declare class DagaExporter implements DiagramModelExporter<DagaModel> {
18
18
  label: {
19
19
  removed: boolean;
20
20
  selfRemoved: boolean;
21
- selfRemovedTimestamp: import("@metadev/daga").CollabTimestamp | null;
22
- textTimestamp: import("@metadev/daga").CollabTimestamp | null;
21
+ selfRemovedTimestamp: import("../collab/primitives").CollabTimestamp | null;
22
+ textTimestamp: import("../collab/primitives").CollabTimestamp | null;
23
23
  };
24
24
  } | {
25
25
  label?: undefined;