@api-client/ui 0.2.2 → 0.2.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.
Files changed (170) hide show
  1. package/package.json +7 -2
  2. package/test/env.ts +15 -0
  3. package/test/tsconfig.json +1 -7
  4. package/web-test-runner.config.js +5 -1
  5. package/build/src/visualization/elements/VizAssociationElement.d.ts +0 -4
  6. package/build/src/visualization/elements/VizAssociationElement.d.ts.map +0 -1
  7. package/build/src/visualization/elements/VizAssociationElement.js +0 -4
  8. package/build/src/visualization/elements/VizAssociationElement.js.map +0 -1
  9. package/build/src/visualization/elements/VizWorkspaceElement.d.ts +0 -110
  10. package/build/src/visualization/elements/VizWorkspaceElement.d.ts.map +0 -1
  11. package/build/src/visualization/elements/VizWorkspaceElement.js +0 -321
  12. package/build/src/visualization/elements/VizWorkspaceElement.js.map +0 -1
  13. package/build/src/visualization/elements/WorkspaceStyles.d.ts +0 -3
  14. package/build/src/visualization/elements/WorkspaceStyles.d.ts.map +0 -1
  15. package/build/src/visualization/elements/WorkspaceStyles.js +0 -168
  16. package/build/src/visualization/elements/WorkspaceStyles.js.map +0 -1
  17. package/build/src/visualization/lib/AnchorFinder.d.ts +0 -64
  18. package/build/src/visualization/lib/AnchorFinder.d.ts.map +0 -1
  19. package/build/src/visualization/lib/AnchorFinder.js +0 -107
  20. package/build/src/visualization/lib/AnchorFinder.js.map +0 -1
  21. package/build/src/visualization/lib/AnchorUtils.d.ts +0 -10
  22. package/build/src/visualization/lib/AnchorUtils.d.ts.map +0 -1
  23. package/build/src/visualization/lib/AnchorUtils.js +0 -44
  24. package/build/src/visualization/lib/AnchorUtils.js.map +0 -1
  25. package/build/src/visualization/lib/AssociationAnchors.d.ts +0 -134
  26. package/build/src/visualization/lib/AssociationAnchors.d.ts.map +0 -1
  27. package/build/src/visualization/lib/AssociationAnchors.js +0 -351
  28. package/build/src/visualization/lib/AssociationAnchors.js.map +0 -1
  29. package/build/src/visualization/lib/LabelSketch.d.ts +0 -16
  30. package/build/src/visualization/lib/LabelSketch.d.ts.map +0 -1
  31. package/build/src/visualization/lib/LabelSketch.js +0 -53
  32. package/build/src/visualization/lib/LabelSketch.js.map +0 -1
  33. package/build/src/visualization/lib/LineSketch.d.ts +0 -26
  34. package/build/src/visualization/lib/LineSketch.d.ts.map +0 -1
  35. package/build/src/visualization/lib/LineSketch.js +0 -55
  36. package/build/src/visualization/lib/LineSketch.js.map +0 -1
  37. package/build/src/visualization/lib/Point.d.ts +0 -74
  38. package/build/src/visualization/lib/Point.d.ts.map +0 -1
  39. package/build/src/visualization/lib/Point.js +0 -121
  40. package/build/src/visualization/lib/Point.js.map +0 -1
  41. package/build/src/visualization/lib/PositionUtils.d.ts +0 -65
  42. package/build/src/visualization/lib/PositionUtils.d.ts.map +0 -1
  43. package/build/src/visualization/lib/PositionUtils.js +0 -205
  44. package/build/src/visualization/lib/PositionUtils.js.map +0 -1
  45. package/build/src/visualization/lib/SelectionManager.d.ts +0 -183
  46. package/build/src/visualization/lib/SelectionManager.d.ts.map +0 -1
  47. package/build/src/visualization/lib/SelectionManager.js +0 -481
  48. package/build/src/visualization/lib/SelectionManager.js.map +0 -1
  49. package/build/src/visualization/lib/ShapeArtist.d.ts +0 -45
  50. package/build/src/visualization/lib/ShapeArtist.d.ts.map +0 -1
  51. package/build/src/visualization/lib/ShapeArtist.js +0 -209
  52. package/build/src/visualization/lib/ShapeArtist.js.map +0 -1
  53. package/build/src/visualization/lib/SvgMarkers.d.ts +0 -14
  54. package/build/src/visualization/lib/SvgMarkers.d.ts.map +0 -1
  55. package/build/src/visualization/lib/SvgMarkers.js +0 -77
  56. package/build/src/visualization/lib/SvgMarkers.js.map +0 -1
  57. package/build/src/visualization/lib/TipSketch.d.ts +0 -26
  58. package/build/src/visualization/lib/TipSketch.d.ts.map +0 -1
  59. package/build/src/visualization/lib/TipSketch.js +0 -77
  60. package/build/src/visualization/lib/TipSketch.js.map +0 -1
  61. package/build/src/visualization/lib/TouchSupport.d.ts +0 -14
  62. package/build/src/visualization/lib/TouchSupport.d.ts.map +0 -1
  63. package/build/src/visualization/lib/TouchSupport.js +0 -55
  64. package/build/src/visualization/lib/TouchSupport.js.map +0 -1
  65. package/build/src/visualization/lib/Utils.d.ts +0 -25
  66. package/build/src/visualization/lib/Utils.d.ts.map +0 -1
  67. package/build/src/visualization/lib/Utils.js +0 -59
  68. package/build/src/visualization/lib/Utils.js.map +0 -1
  69. package/build/src/visualization/lib/VisualizationTypes.d.ts +0 -216
  70. package/build/src/visualization/lib/VisualizationTypes.d.ts.map +0 -1
  71. package/build/src/visualization/lib/VisualizationTypes.js +0 -3
  72. package/build/src/visualization/lib/VisualizationTypes.js.map +0 -1
  73. package/build/src/visualization/lib/WorkspaceAlignment.d.ts +0 -51
  74. package/build/src/visualization/lib/WorkspaceAlignment.d.ts.map +0 -1
  75. package/build/src/visualization/lib/WorkspaceAlignment.js +0 -243
  76. package/build/src/visualization/lib/WorkspaceAlignment.js.map +0 -1
  77. package/build/src/visualization/lib/WorkspaceDebugging.d.ts +0 -104
  78. package/build/src/visualization/lib/WorkspaceDebugging.d.ts.map +0 -1
  79. package/build/src/visualization/lib/WorkspaceDebugging.js +0 -286
  80. package/build/src/visualization/lib/WorkspaceDebugging.js.map +0 -1
  81. package/build/src/visualization/lib/WorkspaceEdges.d.ts +0 -293
  82. package/build/src/visualization/lib/WorkspaceEdges.d.ts.map +0 -1
  83. package/build/src/visualization/lib/WorkspaceEdges.js +0 -1073
  84. package/build/src/visualization/lib/WorkspaceEdges.js.map +0 -1
  85. package/build/src/visualization/lib/WorkspaceGestures.d.ts +0 -119
  86. package/build/src/visualization/lib/WorkspaceGestures.d.ts.map +0 -1
  87. package/build/src/visualization/lib/WorkspaceGestures.js +0 -376
  88. package/build/src/visualization/lib/WorkspaceGestures.js.map +0 -1
  89. package/build/src/visualization/lib/WorkspaceSizing.d.ts +0 -66
  90. package/build/src/visualization/lib/WorkspaceSizing.d.ts.map +0 -1
  91. package/build/src/visualization/lib/WorkspaceSizing.js +0 -168
  92. package/build/src/visualization/lib/WorkspaceSizing.js.map +0 -1
  93. package/build/src/visualization/lib/lines/RectilinearLine.d.ts +0 -114
  94. package/build/src/visualization/lib/lines/RectilinearLine.d.ts.map +0 -1
  95. package/build/src/visualization/lib/lines/RectilinearLine.js +0 -605
  96. package/build/src/visualization/lib/lines/RectilinearLine.js.map +0 -1
  97. package/build/src/visualization/lib/tips/RectilinearTip.d.ts +0 -26
  98. package/build/src/visualization/lib/tips/RectilinearTip.d.ts.map +0 -1
  99. package/build/src/visualization/lib/tips/RectilinearTip.js +0 -149
  100. package/build/src/visualization/lib/tips/RectilinearTip.js.map +0 -1
  101. package/build/src/visualization/lib/tips/TipArtist.d.ts +0 -22
  102. package/build/src/visualization/lib/tips/TipArtist.d.ts.map +0 -1
  103. package/build/src/visualization/lib/tips/TipArtist.js +0 -31
  104. package/build/src/visualization/lib/tips/TipArtist.js.map +0 -1
  105. package/build/src/visualization/lib/types.d.ts +0 -164
  106. package/build/src/visualization/lib/types.d.ts.map +0 -1
  107. package/build/src/visualization/lib/types.js +0 -2
  108. package/build/src/visualization/lib/types.js.map +0 -1
  109. package/build/src/visualization/plugin/dnd/DragAndDropPlugin.d.ts +0 -126
  110. package/build/src/visualization/plugin/dnd/DragAndDropPlugin.d.ts.map +0 -1
  111. package/build/src/visualization/plugin/dnd/DragAndDropPlugin.js +0 -260
  112. package/build/src/visualization/plugin/dnd/DragAndDropPlugin.js.map +0 -1
  113. package/build/src/visualization/plugin/group-selection/GroupSelection.d.ts +0 -93
  114. package/build/src/visualization/plugin/group-selection/GroupSelection.d.ts.map +0 -1
  115. package/build/src/visualization/plugin/group-selection/GroupSelection.js +0 -250
  116. package/build/src/visualization/plugin/group-selection/GroupSelection.js.map +0 -1
  117. package/build/src/visualization/plugin/positioning/DataModelLayout.d.ts +0 -10
  118. package/build/src/visualization/plugin/positioning/DataModelLayout.d.ts.map +0 -1
  119. package/build/src/visualization/plugin/positioning/DataModelLayout.js +0 -105
  120. package/build/src/visualization/plugin/positioning/DataModelLayout.js.map +0 -1
  121. package/build/src/visualization/plugin/positioning/WorkspaceLayout.d.ts +0 -93
  122. package/build/src/visualization/plugin/positioning/WorkspaceLayout.d.ts.map +0 -1
  123. package/build/src/visualization/plugin/positioning/WorkspaceLayout.js +0 -96
  124. package/build/src/visualization/plugin/positioning/WorkspaceLayout.js.map +0 -1
  125. package/build/src/visualization/viz-association.d.ts +0 -7
  126. package/build/src/visualization/viz-association.d.ts.map +0 -1
  127. package/build/src/visualization/viz-association.js +0 -3
  128. package/build/src/visualization/viz-association.js.map +0 -1
  129. package/build/src/visualization/viz-workspace.d.ts +0 -7
  130. package/build/src/visualization/viz-workspace.d.ts.map +0 -1
  131. package/build/src/visualization/viz-workspace.js +0 -3
  132. package/build/src/visualization/viz-workspace.js.map +0 -1
  133. package/src/visualization/elements/VizAssociationElement.ts +0 -3
  134. package/src/visualization/elements/VizWorkspaceElement.ts +0 -302
  135. package/src/visualization/elements/WorkspaceStyles.ts +0 -168
  136. package/src/visualization/lib/AnchorFinder.ts +0 -112
  137. package/src/visualization/lib/AnchorUtils.ts +0 -53
  138. package/src/visualization/lib/AssociationAnchors.ts +0 -418
  139. package/src/visualization/lib/LabelSketch.ts +0 -67
  140. package/src/visualization/lib/LineSketch.ts +0 -62
  141. package/src/visualization/lib/Point.ts +0 -134
  142. package/src/visualization/lib/PositionUtils.ts +0 -218
  143. package/src/visualization/lib/SelectionManager.ts +0 -513
  144. package/src/visualization/lib/ShapeArtist.ts +0 -222
  145. package/src/visualization/lib/SvgMarkers.ts +0 -80
  146. package/src/visualization/lib/TipSketch.ts +0 -91
  147. package/src/visualization/lib/TouchSupport.ts +0 -72
  148. package/src/visualization/lib/Utils.ts +0 -63
  149. package/src/visualization/lib/VisualizationTypes.ts +0 -232
  150. package/src/visualization/lib/WorkspaceAlignment.ts +0 -261
  151. package/src/visualization/lib/WorkspaceDebugging.ts +0 -313
  152. package/src/visualization/lib/WorkspaceEdges.ts +0 -1153
  153. package/src/visualization/lib/WorkspaceGestures.ts +0 -400
  154. package/src/visualization/lib/WorkspaceSizing.ts +0 -181
  155. package/src/visualization/lib/lines/RectilinearLine.ts +0 -589
  156. package/src/visualization/lib/tips/RectilinearTip.ts +0 -156
  157. package/src/visualization/lib/tips/TipArtist.ts +0 -34
  158. package/src/visualization/lib/types.ts +0 -173
  159. package/src/visualization/plugin/dnd/DragAndDropPlugin.ts +0 -294
  160. package/src/visualization/plugin/group-selection/GroupSelection.ts +0 -271
  161. package/src/visualization/plugin/positioning/DataModelLayout.ts +0 -114
  162. package/src/visualization/plugin/positioning/WorkspaceLayout.ts +0 -149
  163. package/src/visualization/viz-association.ts +0 -9
  164. package/src/visualization/viz-workspace.ts +0 -9
  165. package/test/env.d.ts +0 -9
  166. package/test/env.js +0 -7
  167. package/test/visualization/lib/AnchorFinder.test.ts +0 -313
  168. package/test/visualization/lib/AnchorUtils.test.ts +0 -178
  169. package/test/visualization/lib/PositionUtils.test.ts +0 -406
  170. package/test/visualization/lib/test-styles.css +0 -80
@@ -1,126 +0,0 @@
1
- import VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';
2
- export declare const observeItems: unique symbol;
3
- export declare const mutationHandler: unique symbol;
4
- export declare const mutationObserver: unique symbol;
5
- export declare const processAddedNodes: unique symbol;
6
- export declare const processRemovedNodes: unique symbol;
7
- export declare const processAttributeChanged: unique symbol;
8
- export declare const dragEnterHandler: unique symbol;
9
- export declare const dragOverHandler: unique symbol;
10
- export declare const dropHandler: unique symbol;
11
- export declare const dragHandler: unique symbol;
12
- export declare const observeCurrent: unique symbol;
13
- export declare const unobserveCurrent: unique symbol;
14
- export declare const connectedValue: unique symbol;
15
- interface DragInfo {
16
- /**
17
- * click x position inside the dragged element
18
- */
19
- sx: number;
20
- /**
21
- * click y position inside the dragged element
22
- */
23
- sy: number;
24
- target: HTMLElement;
25
- }
26
- /**
27
- * A plugin that adds drag and drop support to the visualization workspace.
28
- *
29
- * This is a base class that meant to be extended depending on what the workspace visualizes.
30
- * The implementation for a specific type of a workspace should override the `dropExternal()`
31
- * function to handle dropping onto the workspace a new object.
32
- *
33
- * Additionally the `[dropHandler]()` can be updated to handle custom logic for drop action of
34
- * already visualized object. The default behavior is to reposition all currently selected elements
35
- * relative to the dragged object position change.
36
- *
37
- * After the workspace is created initialize this class and call the `connect()` function to initialize
38
- * event listeners. When the plugin is no longer needed call `disconnect()` function to clean up listeners.
39
- *
40
- * For the visualized elements to be draggable set `draggable="true"` attribute on the element. If the attribute
41
- * is removed or changed the internal logic adds or removed the events from the element.
42
- */
43
- export declare class DragAndDropPlugin {
44
- workspace: VizWorkspaceElement;
45
- [connectedValue]: boolean;
46
- [mutationObserver]?: MutationObserver;
47
- dragInfo?: DragInfo;
48
- /**
49
- * @returns True when the plug-in is listening for the input events.
50
- */
51
- get connected(): boolean;
52
- constructor(workspace: VizWorkspaceElement);
53
- connect(): void;
54
- disconnect(): void;
55
- /**
56
- * Sets drag info value from the drag event
57
- */
58
- setDragInfo(e: DragEvent): void;
59
- /**
60
- * Repositions currently selected elements from a drop event.
61
- * This is called when the dropped element onto the workspace comes from the same workspace.
62
- */
63
- repositionFromDrop(e: DragEvent): void;
64
- /**
65
- * This function is called when a new object is dropped onto the workspace.
66
- * A "new object" is an object that has a source different than the current workspace.
67
- */
68
- dropExternal(e: DragEvent): Promise<void>;
69
- /**
70
- * @returns True if the element can be dragged.
71
- */
72
- isDraggable(element: Element): boolean;
73
- /**
74
- * Observe items change in the element's light DOM
75
- * @returns The observer handler
76
- */
77
- [observeItems](): MutationObserver;
78
- /**
79
- * Processes mutations in the workspace and manages selection state.
80
- * @param mutationsList List of mutations.
81
- */
82
- [mutationHandler](mutationsList: MutationRecord[]): void;
83
- /**
84
- * Processes added children.
85
- * It adds drag and drop support.
86
- */
87
- [processAddedNodes](list: NodeList): void;
88
- /**
89
- * Processes removed children.
90
- * It removes drag and drop support.
91
- */
92
- [processRemovedNodes](list: NodeList): void;
93
- /**
94
- * Adds or removes the `dragstart` event listener depending on the value oif the `draggable` attribute
95
- */
96
- [processAttributeChanged](node: Node): void;
97
- /**
98
- * Handles the drag event on one of the children.
99
- */
100
- [dragHandler](e: DragEvent): void;
101
- /**
102
- * Handles the drag enter event on one of the children.
103
- */
104
- [dragEnterHandler](e: DragEvent): void;
105
- /**
106
- * Handles the drag over event on one of the children.
107
- */
108
- [dragOverHandler](e: DragEvent): void;
109
- /**
110
- * Handles the drop event on one of the visualization canvas to update position of them.
111
- *
112
- * Note, some workspace elements can handle its own drop event and cancel it. In this case
113
- * this function won't be called.
114
- */
115
- [dropHandler](e: DragEvent): Promise<void>;
116
- /**
117
- * Observers all current draggable items in the workspace.
118
- */
119
- [observeCurrent](): void;
120
- /**
121
- * Removes drag start listener from all current draggable items in the workspace.
122
- */
123
- [unobserveCurrent](): void;
124
- }
125
- export {};
126
- //# sourceMappingURL=DragAndDropPlugin.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragAndDropPlugin.d.ts","sourceRoot":"","sources":["../../../../../src/visualization/plugin/dnd/DragAndDropPlugin.ts"],"names":[],"mappings":"AAGA,OAAO,mBAAmB,MAAM,uCAAuC,CAAA;AAGvE,eAAO,MAAM,YAAY,eAAyB,CAAA;AAClD,eAAO,MAAM,eAAe,eAA4B,CAAA;AACxD,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,iBAAiB,eAA8B,CAAA;AAC5D,eAAO,MAAM,mBAAmB,eAAgC,CAAA;AAChE,eAAO,MAAM,uBAAuB,eAAoC,CAAA;AACxE,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,eAAe,eAA4B,CAAA;AACxD,eAAO,MAAM,WAAW,eAAwB,CAAA;AAChD,eAAO,MAAM,WAAW,eAAwB,CAAA;AAChD,eAAO,MAAM,cAAc,eAA2B,CAAA;AACtD,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAA2B,CAAA;AAEtD,UAAU,QAAQ;IAChB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,WAAW,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,iBAAiB;IAcT,SAAS,EAAE,mBAAmB;IAbjD,CAAC,cAAc,CAAC,UAAS;IAEzB,CAAC,gBAAgB,CAAC,CAAC,EAAE,gBAAgB,CAAA;IAErC,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;gBAEkB,SAAS,EAAE,mBAAmB;IAUjD,OAAO,IAAI,IAAI;IASf,UAAU,IAAI,IAAI;IAYlB;;OAEG;IACH,WAAW,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAY/B;;;OAGG;IACH,kBAAkB,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAwBtC;;;OAGG;IACG,YAAY,CAAC,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC;IAI/C;;OAEG;IACH,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO;IAMtC;;;OAGG;IACH,CAAC,YAAY,CAAC,IAAI,gBAAgB;IAYlC;;;OAGG;IACH,CAAC,eAAe,CAAC,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,IAAI;IAgBxD;;;OAGG;IACH,CAAC,iBAAiB,CAAC,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAczC;;;OAGG;IACH,CAAC,mBAAmB,CAAC,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAY3C;;OAEG;IACH,CAAC,uBAAuB,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;IAW3C;;OAEG;IACH,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAMjC;;OAEG;IACH,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAItC;;OAEG;IACH,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,IAAI;IAMrC;;;;;OAKG;IACG,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC;IAShD;;OAEG;IACH,CAAC,cAAc,CAAC,IAAI,IAAI;IAKxB;;OAEG;IACH,CAAC,gBAAgB,CAAC,IAAI,IAAI;CAI3B"}
@@ -1,260 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-non-null-assertion */
2
- /* eslint-disable @typescript-eslint/no-unused-vars */
3
- import { notifyMoved } from '../../lib/PositionUtils.js';
4
- export const observeItems = Symbol('observeItems');
5
- export const mutationHandler = Symbol('mutationHandler');
6
- export const mutationObserver = Symbol('mutationObserver');
7
- export const processAddedNodes = Symbol('processAddedNodes');
8
- export const processRemovedNodes = Symbol('processRemovedNodes');
9
- export const processAttributeChanged = Symbol('processAttributeChanged');
10
- export const dragEnterHandler = Symbol('dragEnterHandler');
11
- export const dragOverHandler = Symbol('dragOverHandler');
12
- export const dropHandler = Symbol('dropHandler');
13
- export const dragHandler = Symbol('dragHandler');
14
- export const observeCurrent = Symbol('observeCurrent');
15
- export const unobserveCurrent = Symbol('unobserveCurrent');
16
- export const connectedValue = Symbol('connectedValue');
17
- /**
18
- * A plugin that adds drag and drop support to the visualization workspace.
19
- *
20
- * This is a base class that meant to be extended depending on what the workspace visualizes.
21
- * The implementation for a specific type of a workspace should override the `dropExternal()`
22
- * function to handle dropping onto the workspace a new object.
23
- *
24
- * Additionally the `[dropHandler]()` can be updated to handle custom logic for drop action of
25
- * already visualized object. The default behavior is to reposition all currently selected elements
26
- * relative to the dragged object position change.
27
- *
28
- * After the workspace is created initialize this class and call the `connect()` function to initialize
29
- * event listeners. When the plugin is no longer needed call `disconnect()` function to clean up listeners.
30
- *
31
- * For the visualized elements to be draggable set `draggable="true"` attribute on the element. If the attribute
32
- * is removed or changed the internal logic adds or removed the events from the element.
33
- */
34
- export class DragAndDropPlugin {
35
- workspace;
36
- [connectedValue] = false;
37
- [mutationObserver];
38
- dragInfo;
39
- /**
40
- * @returns True when the plug-in is listening for the input events.
41
- */
42
- get connected() {
43
- return this[connectedValue];
44
- }
45
- constructor(workspace) {
46
- this.workspace = workspace;
47
- this[dragEnterHandler] = this[dragEnterHandler].bind(this);
48
- this[dragOverHandler] = this[dragOverHandler].bind(this);
49
- this[dropHandler] = this[dropHandler].bind(this);
50
- this[dragHandler] = this[dragHandler].bind(this);
51
- this[mutationHandler] = this[mutationHandler].bind(this);
52
- this[connectedValue] = false;
53
- }
54
- connect() {
55
- this.workspace.addEventListener('dragenter', this[dragEnterHandler]);
56
- this.workspace.addEventListener('dragover', this[dragOverHandler]);
57
- this.workspace.addEventListener('drop', this[dropHandler]);
58
- this[mutationObserver] = this[observeItems]();
59
- this[observeCurrent]();
60
- this[connectedValue] = true;
61
- }
62
- disconnect() {
63
- this.workspace.removeEventListener('dragenter', this[dragEnterHandler]);
64
- this.workspace.removeEventListener('dragover', this[dragOverHandler]);
65
- this.workspace.removeEventListener('drop', this[dropHandler]);
66
- if (this[mutationObserver]) {
67
- this[mutationObserver].disconnect();
68
- this[mutationObserver] = undefined;
69
- }
70
- this[unobserveCurrent]();
71
- this[connectedValue] = false;
72
- }
73
- /**
74
- * Sets drag info value from the drag event
75
- */
76
- setDragInfo(e) {
77
- const node = e.target;
78
- const { left, top } = node.getBoundingClientRect();
79
- const { clientX, clientY } = e;
80
- const { scale } = this.workspace;
81
- this.dragInfo = {
82
- sx: (clientX - left) / scale,
83
- sy: (clientY - top) / scale,
84
- target: node,
85
- };
86
- }
87
- /**
88
- * Repositions currently selected elements from a drop event.
89
- * This is called when the dropped element onto the workspace comes from the same workspace.
90
- */
91
- repositionFromDrop(e) {
92
- const { target, sx, sy } = this.dragInfo;
93
- const dragTarget = target;
94
- const { left, top } = dragTarget.getBoundingClientRect();
95
- const { scale } = this.workspace;
96
- const ex = (e.clientX - left) / scale;
97
- const ey = (e.clientY - top) / scale;
98
- // tests by how much the box was moved in the workspace so the same point can be applied
99
- // to all boxes in the move.
100
- const ddx = ex - sx;
101
- const ddy = ey - sy;
102
- let items = [];
103
- const selectionManager = this.workspace.selection;
104
- selectionManager.selected.forEach((item) => {
105
- if (item.node.hasAttribute('draggable') && item.node.getAttribute('draggable') === 'true') {
106
- items.push(item.node);
107
- }
108
- });
109
- if (!items.length || (items.length === 1 && items[0] !== target)) {
110
- items = [dragTarget];
111
- }
112
- items.forEach((item) => notifyMoved(item, ddx, ddy));
113
- }
114
- /**
115
- * This function is called when a new object is dropped onto the workspace.
116
- * A "new object" is an object that has a source different than the current workspace.
117
- */
118
- async dropExternal(e) {
119
- // to be implemented by child classes.
120
- }
121
- /**
122
- * @returns True if the element can be dragged.
123
- */
124
- isDraggable(element) {
125
- return element.hasAttribute('draggable') && element.getAttribute('draggable') === 'true';
126
- }
127
- // PRIVATE APIS
128
- /**
129
- * Observe items change in the element's light DOM
130
- * @returns The observer handler
131
- */
132
- [observeItems]() {
133
- const config = {
134
- attributes: true,
135
- childList: true,
136
- subtree: true,
137
- attributeFilter: ['draggable'],
138
- };
139
- const observer = new MutationObserver(this[mutationHandler]);
140
- observer.observe(this.workspace, config);
141
- return observer;
142
- }
143
- /**
144
- * Processes mutations in the workspace and manages selection state.
145
- * @param mutationsList List of mutations.
146
- */
147
- [mutationHandler](mutationsList) {
148
- for (const mutation of mutationsList) {
149
- // console.log(mutation);
150
- if (mutation.type === 'childList') {
151
- if (mutation.addedNodes.length) {
152
- this[processAddedNodes](mutation.addedNodes);
153
- }
154
- if (mutation.removedNodes.length) {
155
- this[processRemovedNodes](mutation.removedNodes);
156
- }
157
- }
158
- else if (mutation.type === 'attributes' && mutation.attributeName === 'draggable') {
159
- this[processAttributeChanged](mutation.target);
160
- }
161
- }
162
- }
163
- /**
164
- * Processes added children.
165
- * It adds drag and drop support.
166
- */
167
- [processAddedNodes](list) {
168
- Array.from(list).forEach((node) => {
169
- if (node.nodeType !== Node.ELEMENT_NODE) {
170
- return;
171
- }
172
- const element = node;
173
- if (this.isDraggable(element)) {
174
- element.addEventListener('dragstart', this[dragHandler]);
175
- }
176
- const childList = element.querySelectorAll('[draggable]');
177
- this[processAddedNodes](childList);
178
- });
179
- }
180
- /**
181
- * Processes removed children.
182
- * It removes drag and drop support.
183
- */
184
- [processRemovedNodes](list) {
185
- Array.from(list).forEach((node) => {
186
- if (node.nodeType !== Node.ELEMENT_NODE) {
187
- return;
188
- }
189
- const element = node;
190
- element.removeEventListener('dragstart', this[dragHandler]);
191
- const childList = element.querySelectorAll('[draggable]');
192
- this[processRemovedNodes](childList);
193
- });
194
- }
195
- /**
196
- * Adds or removes the `dragstart` event listener depending on the value oif the `draggable` attribute
197
- */
198
- [processAttributeChanged](node) {
199
- if (node.nodeType !== Node.ELEMENT_NODE) {
200
- return;
201
- }
202
- const typed = node;
203
- typed.removeEventListener('dragstart', this[dragHandler]);
204
- if (this.isDraggable(typed)) {
205
- typed.addEventListener('dragstart', this[dragHandler]);
206
- }
207
- }
208
- /**
209
- * Handles the drag event on one of the children.
210
- */
211
- [dragHandler](e) {
212
- // only elements are getting drag support so it is safe to set.
213
- e.dataTransfer.setData('modeling/source', this.workspace.localName);
214
- this.setDragInfo(e);
215
- }
216
- /**
217
- * Handles the drag enter event on one of the children.
218
- */
219
- [dragEnterHandler](e) {
220
- e.preventDefault();
221
- }
222
- /**
223
- * Handles the drag over event on one of the children.
224
- */
225
- [dragOverHandler](e) {
226
- e.preventDefault();
227
- const { clientX, clientY } = e;
228
- this.workspace.scrollIfNeeded(clientX, clientY);
229
- }
230
- /**
231
- * Handles the drop event on one of the visualization canvas to update position of them.
232
- *
233
- * Note, some workspace elements can handle its own drop event and cancel it. In this case
234
- * this function won't be called.
235
- */
236
- async [dropHandler](e) {
237
- const source = e.dataTransfer.getData('modeling/source');
238
- if (source !== this.workspace.localName) {
239
- this.dropExternal(e);
240
- }
241
- else {
242
- this.repositionFromDrop(e);
243
- }
244
- }
245
- /**
246
- * Observers all current draggable items in the workspace.
247
- */
248
- [observeCurrent]() {
249
- const nodes = Array.from(this.workspace.querySelectorAll('[draggable="true"]'));
250
- nodes.forEach((node) => node.addEventListener('dragstart', this[dragHandler]));
251
- }
252
- /**
253
- * Removes drag start listener from all current draggable items in the workspace.
254
- */
255
- [unobserveCurrent]() {
256
- const nodes = Array.from(this.workspace.querySelectorAll('[draggable="true"]'));
257
- nodes.forEach((node) => node.removeEventListener('dragstart', this[dragHandler]));
258
- }
259
- }
260
- //# sourceMappingURL=DragAndDropPlugin.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DragAndDropPlugin.js","sourceRoot":"","sources":["../../../../../src/visualization/plugin/dnd/DragAndDropPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable @typescript-eslint/no-unused-vars */\n\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js'\nimport { notifyMoved } from '../../lib/PositionUtils.js'\n\nexport const observeItems = Symbol('observeItems')\nexport const mutationHandler = Symbol('mutationHandler')\nexport const mutationObserver = Symbol('mutationObserver')\nexport const processAddedNodes = Symbol('processAddedNodes')\nexport const processRemovedNodes = Symbol('processRemovedNodes')\nexport const processAttributeChanged = Symbol('processAttributeChanged')\nexport const dragEnterHandler = Symbol('dragEnterHandler')\nexport const dragOverHandler = Symbol('dragOverHandler')\nexport const dropHandler = Symbol('dropHandler')\nexport const dragHandler = Symbol('dragHandler')\nexport const observeCurrent = Symbol('observeCurrent')\nexport const unobserveCurrent = Symbol('unobserveCurrent')\nexport const connectedValue = Symbol('connectedValue')\n\ninterface DragInfo {\n /**\n * click x position inside the dragged element\n */\n sx: number\n /**\n * click y position inside the dragged element\n */\n sy: number\n target: HTMLElement\n}\n\n/**\n * A plugin that adds drag and drop support to the visualization workspace.\n *\n * This is a base class that meant to be extended depending on what the workspace visualizes.\n * The implementation for a specific type of a workspace should override the `dropExternal()`\n * function to handle dropping onto the workspace a new object.\n *\n * Additionally the `[dropHandler]()` can be updated to handle custom logic for drop action of\n * already visualized object. The default behavior is to reposition all currently selected elements\n * relative to the dragged object position change.\n *\n * After the workspace is created initialize this class and call the `connect()` function to initialize\n * event listeners. When the plugin is no longer needed call `disconnect()` function to clean up listeners.\n *\n * For the visualized elements to be draggable set `draggable=\"true\"` attribute on the element. If the attribute\n * is removed or changed the internal logic adds or removed the events from the element.\n */\nexport class DragAndDropPlugin {\n [connectedValue] = false;\n\n [mutationObserver]?: MutationObserver\n\n dragInfo?: DragInfo\n\n /**\n * @returns True when the plug-in is listening for the input events.\n */\n get connected(): boolean {\n return this[connectedValue]\n }\n\n constructor(public workspace: VizWorkspaceElement) {\n this[dragEnterHandler] = this[dragEnterHandler].bind(this)\n this[dragOverHandler] = this[dragOverHandler].bind(this)\n this[dropHandler] = this[dropHandler].bind(this)\n this[dragHandler] = this[dragHandler].bind(this)\n\n this[mutationHandler] = this[mutationHandler].bind(this)\n this[connectedValue] = false\n }\n\n connect(): void {\n this.workspace.addEventListener('dragenter', this[dragEnterHandler])\n this.workspace.addEventListener('dragover', this[dragOverHandler])\n this.workspace.addEventListener('drop', this[dropHandler])\n this[mutationObserver] = this[observeItems]()\n this[observeCurrent]()\n this[connectedValue] = true\n }\n\n disconnect(): void {\n this.workspace.removeEventListener('dragenter', this[dragEnterHandler])\n this.workspace.removeEventListener('dragover', this[dragOverHandler])\n this.workspace.removeEventListener('drop', this[dropHandler])\n if (this[mutationObserver]) {\n this[mutationObserver]!.disconnect()\n this[mutationObserver] = undefined\n }\n this[unobserveCurrent]()\n this[connectedValue] = false\n }\n\n /**\n * Sets drag info value from the drag event\n */\n setDragInfo(e: DragEvent): void {\n const node = e.target as HTMLElement\n const { left, top } = node.getBoundingClientRect()\n const { clientX, clientY } = e\n const { scale } = this.workspace\n this.dragInfo = {\n sx: (clientX - left) / scale,\n sy: (clientY - top) / scale,\n target: node,\n }\n }\n\n /**\n * Repositions currently selected elements from a drop event.\n * This is called when the dropped element onto the workspace comes from the same workspace.\n */\n repositionFromDrop(e: DragEvent): void {\n const { target, sx, sy } = this.dragInfo!\n const dragTarget = target as HTMLElement\n const { left, top } = dragTarget.getBoundingClientRect()\n const { scale } = this.workspace\n const ex = (e.clientX - left) / scale\n const ey = (e.clientY - top) / scale\n // tests by how much the box was moved in the workspace so the same point can be applied\n // to all boxes in the move.\n const ddx = ex - sx\n const ddy = ey - sy\n let items: HTMLElement[] = []\n const selectionManager = this.workspace.selection\n selectionManager.selected.forEach((item) => {\n if (item.node.hasAttribute('draggable') && item.node.getAttribute('draggable') === 'true') {\n items.push(item.node as HTMLElement)\n }\n })\n if (!items.length || (items.length === 1 && items[0] !== target)) {\n items = [dragTarget]\n }\n items.forEach((item) => notifyMoved(item, ddx, ddy))\n }\n\n /**\n * This function is called when a new object is dropped onto the workspace.\n * A \"new object\" is an object that has a source different than the current workspace.\n */\n async dropExternal(e: DragEvent): Promise<void> {\n // to be implemented by child classes.\n }\n\n /**\n * @returns True if the element can be dragged.\n */\n isDraggable(element: Element): boolean {\n return element.hasAttribute('draggable') && element.getAttribute('draggable') === 'true'\n }\n\n // PRIVATE APIS\n\n /**\n * Observe items change in the element's light DOM\n * @returns The observer handler\n */\n [observeItems](): MutationObserver {\n const config = {\n attributes: true,\n childList: true,\n subtree: true,\n attributeFilter: ['draggable'],\n }\n const observer = new MutationObserver(this[mutationHandler])\n observer.observe(this.workspace, config)\n return observer\n }\n\n /**\n * Processes mutations in the workspace and manages selection state.\n * @param mutationsList List of mutations.\n */\n [mutationHandler](mutationsList: MutationRecord[]): void {\n for (const mutation of mutationsList) {\n // console.log(mutation);\n if (mutation.type === 'childList') {\n if (mutation.addedNodes.length) {\n this[processAddedNodes](mutation.addedNodes)\n }\n if (mutation.removedNodes.length) {\n this[processRemovedNodes](mutation.removedNodes)\n }\n } else if (mutation.type === 'attributes' && mutation.attributeName === 'draggable') {\n this[processAttributeChanged](mutation.target)\n }\n }\n }\n\n /**\n * Processes added children.\n * It adds drag and drop support.\n */\n [processAddedNodes](list: NodeList): void {\n Array.from(list).forEach((node) => {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return\n }\n const element = node as HTMLElement\n if (this.isDraggable(element)) {\n element.addEventListener('dragstart', this[dragHandler])\n }\n const childList = element.querySelectorAll('[draggable]')\n this[processAddedNodes](childList)\n })\n }\n\n /**\n * Processes removed children.\n * It removes drag and drop support.\n */\n [processRemovedNodes](list: NodeList): void {\n Array.from(list).forEach((node) => {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return\n }\n const element = node as HTMLElement\n element.removeEventListener('dragstart', this[dragHandler])\n const childList = element.querySelectorAll('[draggable]')\n this[processRemovedNodes](childList)\n })\n }\n\n /**\n * Adds or removes the `dragstart` event listener depending on the value oif the `draggable` attribute\n */\n [processAttributeChanged](node: Node): void {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return\n }\n const typed = node as Element\n typed.removeEventListener('dragstart', this[dragHandler] as EventListener)\n if (this.isDraggable(typed)) {\n typed.addEventListener('dragstart', this[dragHandler] as EventListener)\n }\n }\n\n /**\n * Handles the drag event on one of the children.\n */\n [dragHandler](e: DragEvent): void {\n // only elements are getting drag support so it is safe to set.\n e.dataTransfer!.setData('modeling/source', this.workspace.localName)\n this.setDragInfo(e)\n }\n\n /**\n * Handles the drag enter event on one of the children.\n */\n [dragEnterHandler](e: DragEvent): void {\n e.preventDefault()\n }\n\n /**\n * Handles the drag over event on one of the children.\n */\n [dragOverHandler](e: DragEvent): void {\n e.preventDefault()\n const { clientX, clientY } = e\n this.workspace.scrollIfNeeded(clientX, clientY)\n }\n\n /**\n * Handles the drop event on one of the visualization canvas to update position of them.\n *\n * Note, some workspace elements can handle its own drop event and cancel it. In this case\n * this function won't be called.\n */\n async [dropHandler](e: DragEvent): Promise<void> {\n const source = e.dataTransfer!.getData('modeling/source')\n if (source !== this.workspace.localName) {\n this.dropExternal(e)\n } else {\n this.repositionFromDrop(e)\n }\n }\n\n /**\n * Observers all current draggable items in the workspace.\n */\n [observeCurrent](): void {\n const nodes = Array.from(this.workspace.querySelectorAll('[draggable=\"true\"]')) as HTMLElement[]\n nodes.forEach((node) => node.addEventListener('dragstart', this[dragHandler]))\n }\n\n /**\n * Removes drag start listener from all current draggable items in the workspace.\n */\n [unobserveCurrent](): void {\n const nodes = Array.from(this.workspace.querySelectorAll('[draggable=\"true\"]')) as HTMLElement[]\n nodes.forEach((node) => node.removeEventListener('dragstart', this[dragHandler]))\n }\n}\n"]}
@@ -1,93 +0,0 @@
1
- import VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';
2
- import { Point } from '../../lib/Point.js';
3
- export declare const mouseDownHandler: unique symbol;
4
- export declare const mouseUpHandler: unique symbol;
5
- export declare const mouseMoveHandler: unique symbol;
6
- export declare const connectedValue: unique symbol;
7
- /**
8
- * A plugin that adds support for a group selection via pointer device on the visualization workspace.
9
- *
10
- * This plugin draws a selection rectangle from the starting position until the pointer is released.
11
- * Each selectable element that is inside the rectangle is selected.
12
- *
13
- * After the modeling workspace is created create instance of this class and call `connect()` function
14
- * to start listening for the events. Call `disconnect()` when the workspace is no longer in use.
15
- */
16
- export declare class GroupSelection {
17
- target: VizWorkspaceElement;
18
- [connectedValue]: boolean;
19
- /**
20
- * @returns True when the plug-in is listening for the input events.
21
- */
22
- get connected(): boolean;
23
- /**
24
- * Whether a selection is currently being made.
25
- */
26
- selecting: boolean;
27
- /**
28
- * The element that is being rendered as a selection box.
29
- */
30
- selectionZone: HTMLDivElement | null;
31
- /**
32
- * The click start point
33
- */
34
- startPoint: Point | null;
35
- /**
36
- * The position delta between the start and the current pointer position.
37
- */
38
- delta: Point | null;
39
- /**
40
- * @param target The target workspace element.
41
- */
42
- constructor(target: VizWorkspaceElement);
43
- connect(): void;
44
- disconnect(): void;
45
- reset(): void;
46
- [mouseDownHandler](e: MouseEvent): void;
47
- [mouseMoveHandler](e: MouseEvent): void;
48
- [mouseUpHandler](e: MouseEvent): void;
49
- /**
50
- * Removes the selection rectangle from the workspace
51
- */
52
- clearWorkspace(): void;
53
- /**
54
- * Handles the drop event on one of the children.
55
- * @returns coordinates of the click on the workspace as it would be
56
- * not scaled.
57
- */
58
- pointFromEvent(e: MouseEvent): Point;
59
- /**
60
- * Adds a selection box in the place of the click.
61
- * @param position The starting position of the element.
62
- */
63
- appendSelectionZone(position: Point): void;
64
- /**
65
- * Moves the workspace if needed.
66
- */
67
- detectEdges(e: MouseEvent): void;
68
- /**
69
- * Redraws the selection rectangle to current point
70
- * @param {Point} current
71
- */
72
- updateSelectionSize(current: Point): void;
73
- detectSelected(): void;
74
- /**
75
- * Reads scaled selection rectangle
76
- * @return A DOMRect object for the selection rectangle
77
- */
78
- getSelectionRect(): DOMRect;
79
- /**
80
- * @param node The node to read the style property from.
81
- * @param prop The name of the css property to read
82
- * @returns The value of the property or 0 if not found.
83
- */
84
- getSafeStyleValue(node: HTMLElement, prop: string): number;
85
- /**
86
- * Tests whether a current node collides with the selection rectangle.
87
- * @param selectionRect The selection computed rectangle
88
- * @param rect The Rect of the target element.
89
- * @returns True if the selection rectangle collides with `node`
90
- */
91
- collide(selectionRect: DOMRect, rect: DOMRect): boolean;
92
- }
93
- //# sourceMappingURL=GroupSelection.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"GroupSelection.d.ts","sourceRoot":"","sources":["../../../../../src/visualization/plugin/group-selection/GroupSelection.ts"],"names":[],"mappings":"AACA,OAAO,mBAAmB,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAG1C,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAA2B,CAAA;AACtD,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAA2B,CAAA;AAItD;;;;;;;;GAQG;AACH,qBAAa,cAAc;IAiCN,MAAM,EAAE,mBAAmB;IAhC9C,CAAC,cAAc,CAAC,UAAQ;IAExB;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED;;OAEG;IACH,SAAS,UAAQ;IAEjB;;OAEG;IACH,aAAa,EAAE,cAAc,GAAG,IAAI,CAAO;IAE3C;;OAEG;IACH,UAAU,EAAE,KAAK,GAAG,IAAI,CAAO;IAE/B;;OAEG;IACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAO;IAE1B;;OAEG;gBACgB,MAAM,EAAE,mBAAmB;IAO9C,OAAO,IAAI,IAAI;IAOf,UAAU,IAAI,IAAI;IAOlB,KAAK,IAAI,IAAI;IAOb,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IASvC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAevC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IASrC;;OAEG;IACH,cAAc,IAAI,IAAI;IAMtB;;;;OAIG;IACH,cAAc,CAAC,CAAC,EAAE,UAAU,GAAG,KAAK;IAKpC;;;OAGG;IACH,mBAAmB,CAAC,QAAQ,EAAE,KAAK,GAAG,IAAI;IAU1C;;OAEG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAKhC;;;OAGG;IACH,mBAAmB,CAAC,OAAO,EAAE,KAAK,GAAG,IAAI;IAqBzC,cAAc,IAAI,IAAI;IA4CtB;;;OAGG;IACH,gBAAgB,IAAI,OAAO;IAS3B;;;;OAIG;IACH,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAa1D;;;;;OAKG;IACH,OAAO,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO;CAQxD"}