@visuallyjs/browser-ui 1.0.3 → 1.1.1

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 (139) hide show
  1. package/js/visuallyjs.browser-ui.cjs.js +57 -57
  2. package/js/visuallyjs.browser-ui.esm.js +57 -57
  3. package/package.json +1 -1
  4. package/types/browser-ui/browser-ui.d.ts +4 -7
  5. package/types/browser-ui/browser-util.d.ts +1 -0
  6. package/types/browser-ui/browser-visuallyjs-instance.d.ts +13 -6
  7. package/types/browser-ui/components/controls/css-classes.d.ts +24 -0
  8. package/types/browser-ui/components/inspector/color-picker-tag.d.ts +6 -0
  9. package/types/browser-ui/components/palette/palette.d.ts +1 -0
  10. package/types/browser-ui/connector-editors/editor-base.d.ts +0 -1
  11. package/types/browser-ui/connector-editors/util.d.ts +0 -2
  12. package/types/browser-ui/connector-editors-bezier/css-constants.d.ts +0 -12
  13. package/types/browser-ui/constants.d.ts +4 -10
  14. package/types/browser-ui/css-constants.d.ts +57 -8
  15. package/types/browser-ui/definitions.d.ts +27 -6
  16. package/types/browser-ui/dialogs/binder.d.ts +0 -11
  17. package/types/browser-ui/edge-handler-base.d.ts +9 -16
  18. package/types/browser-ui/edge-input-handler.d.ts +3 -10
  19. package/types/browser-ui/edge-mappings/flowchart-basic.d.ts +2 -1
  20. package/types/browser-ui/element-drag-handler-2.d.ts +0 -3
  21. package/types/browser-ui/html-element-overlay.d.ts +3 -0
  22. package/types/browser-ui/icons/definitions.d.ts +20 -0
  23. package/types/browser-ui/pan-zoom-options.d.ts +10 -21
  24. package/types/browser-ui/pan-zoom.d.ts +29 -114
  25. package/types/browser-ui/paper-renderer/definitions.d.ts +2 -0
  26. package/types/browser-ui/paper-renderer/paper.d.ts +1 -0
  27. package/types/browser-ui/plugins/background/background-options.d.ts +4 -0
  28. package/types/browser-ui/plugins/background/tiled-background.d.ts +2 -0
  29. package/types/browser-ui/plugins/browser-ui-plugin.d.ts +6 -1
  30. package/types/browser-ui/positioning-and-sizing-utils.d.ts +21 -1
  31. package/types/browser-ui/shape-library/shape-library-definitions.d.ts +26 -11
  32. package/types/browser-ui/shape-library/shape-library.d.ts +14 -3
  33. package/types/browser-ui/shape-library/shapes-basic.d.ts +1 -1
  34. package/types/browser-ui/shape-library/shapes-flowchart.d.ts +1 -1
  35. package/types/browser-ui/surface-renderer/anim/definitions.d.ts +13 -4
  36. package/types/browser-ui/surface-renderer/anim/path-transport.d.ts +0 -1
  37. package/types/browser-ui/surface-renderer/definitions.d.ts +14 -3
  38. package/types/browser-ui/surface-renderer/diagrams/definitions.d.ts +12 -2
  39. package/types/browser-ui/surface-renderer/diagrams/diagram-link.d.ts +2 -0
  40. package/types/browser-ui/surface-renderer/diagrams/diagram-tools.d.ts +4 -0
  41. package/types/browser-ui/surface-renderer/diagrams/diagram.d.ts +4 -1
  42. package/types/browser-ui/surface-renderer/diagrams/index.d.ts +4 -2
  43. package/types/browser-ui/surface-renderer/diagrams/mediator.d.ts +14 -0
  44. package/types/browser-ui/surface-renderer/plugins/controls/controls-plugin.d.ts +2 -0
  45. package/types/browser-ui/surface-renderer/plugins/export-controls/export-controls-plugin.d.ts +3 -1
  46. package/types/browser-ui/surface-renderer/plugins/index.d.ts +1 -0
  47. package/types/browser-ui/surface-renderer/plugins/list-manager/index.d.ts +1 -0
  48. package/types/browser-ui/surface-renderer/plugins/list-manager/list-manager-plugin.d.ts +34 -0
  49. package/types/browser-ui/surface-renderer/plugins/palette/palette-plugin.d.ts +2 -0
  50. package/types/browser-ui/surface-renderer/plugins/pan-buttons/pan-buttons-plugin.d.ts +1 -2
  51. package/types/browser-ui/surface-renderer/plugins/resizing-tools/definitions.d.ts +9 -0
  52. package/types/browser-ui/surface-renderer/plugins/snaplines/snaplines-plugin.d.ts +12 -0
  53. package/types/browser-ui/surface-renderer/plugins/vertex-drawing/vertex-drawing-plugin.d.ts +0 -2
  54. package/types/browser-ui/surface-renderer/shape-palette-options.d.ts +5 -2
  55. package/types/browser-ui/surface-renderer/shape-palette.d.ts +1 -1
  56. package/types/browser-ui/surface-renderer/surface-render-options.d.ts +0 -30
  57. package/types/browser-ui/surface-renderer/surface.d.ts +47 -38
  58. package/types/browser-ui/svg-element-overlay.d.ts +1 -0
  59. package/types/browser-ui/svg-export/definitions.d.ts +12 -0
  60. package/types/browser-ui/svg-export/image-exporter.d.ts +2 -0
  61. package/types/browser-ui/svg-export/svg-exporter.d.ts +3 -0
  62. package/types/browser-ui/templating/custom-tag-definition.d.ts +1 -2
  63. package/types/browser-ui/util.d.ts +2 -0
  64. package/types/charts/bar-and-column/bar-plot.d.ts +2 -0
  65. package/types/charts/base-chart.d.ts +62 -6
  66. package/types/charts/chart-exporter.d.ts +3 -0
  67. package/types/charts/datasource.d.ts +11 -0
  68. package/types/charts/definitions.d.ts +10 -0
  69. package/types/charts/domain_scale_utilities.d.ts +4 -0
  70. package/types/charts/legend.d.ts +2 -0
  71. package/types/charts/pie/pie-chart.d.ts +2 -0
  72. package/types/charts/sankey/sankey.d.ts +1 -0
  73. package/types/charts/scatter/definitions.d.ts +1 -0
  74. package/types/charts/series/array-based-series.d.ts +2 -0
  75. package/types/charts/series/definitions.d.ts +1 -0
  76. package/types/charts/series/series.d.ts +2 -0
  77. package/types/charts/series-based-chart.d.ts +1 -0
  78. package/types/charts/tooltip.d.ts +7 -2
  79. package/types/charts/util.d.ts +10 -3
  80. package/types/core/autosaver.d.ts +2 -1
  81. package/types/core/csv-loader.d.ts +8 -2
  82. package/types/core/event-constants.d.ts +44 -2
  83. package/types/core/geom.d.ts +1 -0
  84. package/types/core/io.d.ts +31 -7
  85. package/types/core/layout/abstract-layout.d.ts +1 -0
  86. package/types/core/layout/grid/definitions.d.ts +10 -19
  87. package/types/core/layout/grid/grid-layout.d.ts +2 -2
  88. package/types/core/layout/hierarchy/util.d.ts +1 -7
  89. package/types/core/magnetizer.d.ts +1 -0
  90. package/types/core/model/anchor.d.ts +1 -0
  91. package/types/core/model/graph.d.ts +3 -11
  92. package/types/core/model/group-template.d.ts +15 -0
  93. package/types/core/params.d.ts +2 -2
  94. package/types/core/renderer.d.ts +3 -0
  95. package/types/core/rtree/rtree.d.ts +15 -0
  96. package/types/core/selection.d.ts +2 -6
  97. package/types/core/templates/core.d.ts +1 -1
  98. package/types/core/toolkit.d.ts +30 -10
  99. package/types/core/undo-redo/undo-redo.d.ts +0 -22
  100. package/types/core/util.d.ts +4 -1
  101. package/types/ui/common/overlay.d.ts +7 -1
  102. package/types/ui/common/paint-style.d.ts +2 -0
  103. package/types/ui/connector-orthogonal/operations.d.ts +1 -18
  104. package/types/ui/connector-orthogonal/utils.d.ts +0 -6
  105. package/types/ui/connector-straight/straight-connector.d.ts +2 -5
  106. package/types/ui/core/component/component.d.ts +1 -4
  107. package/types/ui/core/connector/connection-impl.d.ts +1 -0
  108. package/types/ui/core/connector/connections.d.ts +0 -29
  109. package/types/ui/core/connector/straight-segment.d.ts +0 -6
  110. package/types/ui/core/constants.d.ts +0 -4
  111. package/types/ui/core/core-events.d.ts +5 -3
  112. package/types/ui/core/core.d.ts +19 -21
  113. package/types/ui/core/defaults.d.ts +43 -9
  114. package/types/ui/core/definitions.d.ts +39 -20
  115. package/types/ui/core/event-constants.d.ts +1 -0
  116. package/types/ui/core/factory/continuous-anchors.d.ts +0 -6
  117. package/types/ui/core/grid-profile.d.ts +3 -1
  118. package/types/ui/core/magnetize-profile.d.ts +1 -3
  119. package/types/ui/core/overlay/custom-overlay.d.ts +28 -9
  120. package/types/ui/core/overlay/label-overlay.d.ts +3 -2
  121. package/types/ui/core/overlay/overlay.d.ts +5 -3
  122. package/types/ui/core/params.d.ts +12 -99
  123. package/types/ui/core/router/default-router.d.ts +89 -18
  124. package/types/ui/core/router/index.d.ts +0 -1
  125. package/types/ui/core/router/router-utils.d.ts +0 -24
  126. package/types/ui/core/router/router.d.ts +29 -20
  127. package/types/ui/core/type-descriptors.d.ts +2 -0
  128. package/types/ui/core/ui-model.d.ts +3 -0
  129. package/types/ui/core/view/edge-options.d.ts +5 -0
  130. package/types/ui/core/view/events.d.ts +22 -0
  131. package/types/ui/core/view/node-or-port-options.d.ts +6 -0
  132. package/types/ui/core/view/vertex-options.d.ts +2 -0
  133. package/types/ui/core/viewport.d.ts +7 -1
  134. package/types/ui/plugins/definitions.d.ts +6 -1
  135. package/types/ui/plugins/plugins.d.ts +4 -0
  136. package/types/ui/property-mappings/definitions.d.ts +6 -0
  137. package/types/ui/util/util.d.ts +3 -16
  138. package/types/version.d.ts +1 -1
  139. package/types/ui/core/router/base-router.d.ts +0 -100
@@ -1,5 +1,6 @@
1
1
  import { BrowserElement } from "./util";
2
- import { PointXY, Size } from "../core";
2
+ import { PointXY, Size, RectangleXY } from "../core";
3
+ import { ViewportElement } from "../ui";
3
4
  /**
4
5
  * @internal
5
6
  */
@@ -14,6 +15,12 @@ export declare const ATTRIBUTE_TRANSFORM = "transform";
14
15
  export declare function getElementSize(el: Element): Size;
15
16
  export declare function getPosition(el: BrowserElement, knownElementSize?: Size): PointXY;
16
17
  export declare function setPosition(el: BrowserElement, p: PointXY): void;
18
+ /**
19
+ * Gets the position of an element relative to the some other SVG,
20
+ * even with nested SVG elements and multiple transforms/rotations.
21
+ * @internal
22
+ */
23
+ export declare function getSvgPositionRelativeToSvgRoot(el: SVGGraphicsElement, rootSvg: SVGSVGElement, useBBox?: boolean): PointXY;
17
24
  /**
18
25
  * Sets the position of the given element in the X axis.
19
26
  * @param el
@@ -101,3 +108,16 @@ export declare function setElementRotation(el: BrowserElement, rotation: number)
101
108
  * @param p
102
109
  */
103
110
  export declare function setSvgTranslatePosition(el: SVGElement, p: PointXY): void;
111
+ /**
112
+ * Computes the translation required for the given box so that when it is rotated it appears to have been rotated around its center. This is required when working with SVG elements (whose parent is an SVG element; it doesnt apply when you have some SVG element whose parent is an HTML element, because its a function of how the parent behaves).
113
+ *
114
+ * The reason this is required is that SVG elements have their rotation applied using the parent SVG's top left corner as the transform origin. HTML elements can have the transform origin set, via css or the style.
115
+ *
116
+ *
117
+ * @internal
118
+ * @param box
119
+ * @param p
120
+ * @param r
121
+ */
122
+ export declare function computeTranslationForRotation(box: RectangleXY, p: PointXY, r: number): import("../ui").RotatedPointXY;
123
+ export declare function setRotatedSvgElementPosition(el: ViewportElement<BrowserElement>, p: PointXY): void;
@@ -2,6 +2,7 @@ import { Size, Group, Node, ObjectData, AbstractEntry, CustomTagOptions } from "
2
2
  import { BrowserElement } from "../util";
3
3
  import { IconDefinition } from "../icons";
4
4
  import { FontSpec } from "../definitions";
5
+ import { GroupTemplate } from "../../core/model/group-template";
5
6
  /**
6
7
  * Default fill/stroke/text color for items in ShapeLibrary.
7
8
  * @internal
@@ -15,13 +16,13 @@ export declare const ShapeLibraryDefaults: {
15
16
  /**
16
17
  * The object type for some shape - a node or a group.
17
18
  * @group Nodes and Groups
18
- * @category Shape Libraries
19
+ * @category SVG Shapes
19
20
  */
20
21
  export type ShapeObjectType = typeof Group.objectType | typeof Node.objectType;
21
22
  /**
22
23
  * Defines a shape type. If you wish to supply custom shape types you should extend this interface.
23
24
  * @group Nodes and Groups
24
- * @category Shape Libraries
25
+ * @category SVG Shapes
25
26
  */
26
27
  export interface ShapeType {
27
28
  /**
@@ -53,6 +54,10 @@ export interface ShapeType {
53
54
  * Initial size for this specific shape. If not provided defaults will be used.
54
55
  */
55
56
  initialSize?: Size;
57
+ /**
58
+ * Defaults to true, meaning this will by default be treated as an edge target for drag/drop edges. In some cases you may not want the entire shape to be a target, for instance if its connectivity is to various ports (as an example, consider a logic gate with input pins and an output pin).
59
+ */
60
+ defaultTarget?: boolean;
56
61
  /**
57
62
  * Size for this shape when it is collapsed - only relevant when objectType is Group.
58
63
  */
@@ -90,35 +95,40 @@ export interface ShapeType {
90
95
  * optional name of the group to which the shape belongs.
91
96
  */
92
97
  group?: string;
98
+ /**
99
+ * Optional blueprint for child vertices and edges to be created when this group is added.
100
+ * Only relevant when objectType is Group.
101
+ */
102
+ members?: GroupTemplate;
93
103
  }
94
104
  /**
95
105
  * Start placement for shape icon - in x axis this means the left; in y axis it means the top.
96
106
  * @group Nodes and Groups
97
- * @category Shape Libraries
107
+ * @category SVG Shapes
98
108
  */
99
109
  export declare const ICON_ORIGIN_START = "start";
100
110
  /**
101
111
  * Center placement for shape icon, x and y axis
102
112
  * @group Nodes and Groups
103
- * @category Shape Libraries
113
+ * @category SVG Shapes
104
114
  */
105
115
  export declare const ICON_ORIGIN_CENTER = "center";
106
116
  /**
107
117
  * End placement for shape icon - in x axis this means the right; in y axis it means the bottom.
108
118
  * @group Nodes and Groups
109
- * @category Shape Libraries
119
+ * @category SVG Shapes
110
120
  */
111
121
  export declare const ICON_ORIGIN_END = "end";
112
122
  /**
113
123
  * Possible values for shape icon placement, x axis and y axis
114
124
  * @group Nodes and Groups
115
- * @category Shape Libraries
125
+ * @category SVG Shapes
116
126
  */
117
127
  export type IconOrigin = typeof ICON_ORIGIN_START | typeof ICON_ORIGIN_CENTER | typeof ICON_ORIGIN_END;
118
128
  /**
119
129
  * Defines a set of shapes. This is the interface you should extend if you wish to supply custom shape sets to the widget.
120
130
  * @group Nodes and Groups
121
- * @category Shape Libraries
131
+ * @category SVG Shapes
122
132
  */
123
133
  export interface ShapeSet {
124
134
  id: string;
@@ -150,6 +160,7 @@ export interface ShapeLibrary<T extends ObjectData> {
150
160
  renderShapeLabel(data: ObjectData, labelProperty: string, strokeWidth: string, label: string, fill: string, stroke: string, font: FontSpec): SVGTextElement;
151
161
  getShapeTagDefinition(isSvgContainer: boolean, strokeWidth?: number, includeLabel?: boolean, fontSpec?: FontSpec, labelAttribute?: string, defaultFillColor?: string, defaultOutlineColor?: string, defaultColor?: string): CustomTagOptions;
152
162
  getShapeSet(id: string): RenderedShapeSet;
163
+ getShapeSets(): Array<RenderedShapeSet>;
153
164
  rootSet: RenderedShapeSet;
154
165
  getDefsElements(): Array<Element>;
155
166
  getSvgDefsElement(): SVGElement;
@@ -170,24 +181,24 @@ export interface ShapeLibrary<T extends ObjectData> {
170
181
  /**
171
182
  * Defines a function that can take a vertex's data object and return a document fragment with it rendered.
172
183
  * @group Nodes and Groups
173
- * @category Shape Libraries
184
+ * @category SVG Shapes
174
185
  */
175
186
  export type ShapeGeneratorFunction = (data: ObjectData) => DocumentFragment;
176
187
  /**
177
188
  * Name of the default shape set
178
189
  * @group Nodes and Groups
179
- * @category Shape Libraries
190
+ * @category SVG Shapes
180
191
  */
181
192
  export declare const DEFAULT_SET_NAME = "Default";
182
193
  /**
183
194
  * @group Nodes and Groups
184
- * @category Shape Libraries
195
+ * @category SVG Shapes
185
196
  */
186
197
  export declare const DEFAULT_SET_DESCRIPTION = "Default shapes";
187
198
  /**
188
199
  * The HTML element used for the SVG shape element.
189
200
  * @group Nodes and Groups
190
- * @category Shape Libraries
201
+ * @category SVG Shapes
191
202
  */
192
203
  export declare const TAG_SHAPE = "vjs-shape";
193
204
  /**
@@ -208,10 +219,14 @@ export declare const CLASS_SHAPE_LABEL = "vjs-shape-label";
208
219
  export declare const CLASS_SHAPE = "vjs-shape";
209
220
  /**
210
221
  * Supported data types for shape properties.
222
+ * @group Diagrams
223
+ * @category Shapes
211
224
  */
212
225
  export type ShapePropertyType = "string" | "number" | "boolean" | "color" | "font";
213
226
  /**
214
227
  * Defines a single configurable property exposed by a shape.
228
+ * @group Diagrams
229
+ * @category Shapes
215
230
  */
216
231
  export interface ShapePropertyDefinition {
217
232
  /**
@@ -11,25 +11,35 @@ export declare const ATTRIBUTE_ICON_SIZE = "size";
11
11
  export declare const ATTRIBUTE_ICON_KEY = "key";
12
12
  export declare const ATTRIBUTE_ICON_ID = "iconId";
13
13
  /**
14
- * Indicates that the icons in a `vjs-incude-icons` element should be arranged in a horizontal line - this is the default.
14
+ * Indicates that the icons in a `vjs-include-icons` element should be arranged in a horizontal line - this is the default.
15
+ * @group Diagrams
16
+ * @category Shapes
15
17
  */
16
18
  export declare const ICONS_ORIENTATION_HORIZONTAL = "horizontal";
17
19
  /**
18
20
  * Indicates that the icons in a `vjs-include-icons` element should be arranged in a vertical line.
21
+ * @group Diagrams
22
+ * @category Shapes
19
23
  */
20
24
  export declare const ICONS_ORIENTATION_VERTICAL = "vertical";
21
25
  /**
22
26
  * This class is assigned to SVG elements serving as icons (via `vjs-icon` or `vjs-icons` in a shape template)
23
27
  * @cssClass
24
28
  * @context shape-library, shape-icon
29
+ * @group Diagrams
30
+ * @category CSS Classes
25
31
  */
26
32
  export declare const CLASS_SHAPE_ICON = "vjs-shape-icon";
27
33
  /**
28
34
  * Tag identifying an icon inclusion in a shape template.
35
+ * @group Diagrams
36
+ * @category Shapes
29
37
  */
30
38
  export declare const ELEMENT_INCLUDE_ICON = "vjs-include-icon";
31
39
  /**
32
40
  * Tag identifying a set of icon inclusions in a shape template.
41
+ * @group Diagrams
42
+ * @category Shapes
33
43
  */
34
44
  export declare const ELEMENT_INCLUDE_ICONS = "vjs-include-icons";
35
45
  /**
@@ -89,7 +99,7 @@ export declare const DEFAULT_LABEL_FILL_RATIO = 0.8;
89
99
  /**
90
100
  * Options for a shape library.
91
101
  * @group Nodes and Groups
92
- * @category Shape Libraries
102
+ * @category SVG Shapes
93
103
  */
94
104
  export interface ShapeLibraryOptions {
95
105
  /**
@@ -124,7 +134,7 @@ export interface ShapeLibraryOptions {
124
134
  /**
125
135
  * Default ShapeLibrary implementation. Use one of these to manage a set of shapes for rendering into your vertices and/or for rendering as a palette from which the user can drag new objects.
126
136
  * @group Nodes and Groups
127
- * @category Shape Libraries
137
+ * @category SVG Shapes
128
138
  */
129
139
  export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibrary<T> {
130
140
  compiledShapes: Map<string, ShapeGeneratorFunction>;
@@ -171,6 +181,7 @@ export declare class ShapeLibraryImpl<T extends ObjectData> implements ShapeLibr
171
181
  refresh(el: BrowserElement, data: ObjectData, labelAttribute?: string): void;
172
182
  private _processShapeSets;
173
183
  getShapeSet(id: string): RenderedShapeSet;
184
+ getShapeSets(): Array<RenderedShapeSet>;
174
185
  /**
175
186
  * Gets the definition for some combination of type and category. May return null.
176
187
  * @param type
@@ -2,6 +2,6 @@ import { ShapeSet } from "./shape-library-definitions";
2
2
  /**
3
3
  * Shapefile for basic shapes.
4
4
  * @group Nodes and Groups
5
- * @category Shape Libraries
5
+ * @category SVG Shapes
6
6
  */
7
7
  export declare const BASIC_SHAPES: ShapeSet;
@@ -2,6 +2,6 @@ import { ShapeSet } from "./shape-library-definitions";
2
2
  /**
3
3
  * Shapefile for flowchart shapes.
4
4
  * @group Nodes and Groups
5
- * @category Shape Libraries
5
+ * @category SVG Shapes
6
6
  */
7
7
  export declare const FLOWCHART_SHAPES: ShapeSet;
@@ -5,46 +5,54 @@ import { EventGenerator } from "../../../core";
5
5
  /**
6
6
  * Represents the initial phase of an animation, before it has started moving.
7
7
  * @constant
8
+ * @group Animation
8
9
  */
9
10
  export declare const ANIMATION_PHASE_INITIALIZED = "INITIALIZED";
10
11
  /**
11
12
  * Represents the phase of an animation where the start vertex is being traversed
12
13
  * @constant
14
+ * @group Animation
13
15
  */
14
16
  export declare const ANIMATION_PHASE_TRAVERSING_START = "TRAVERSING_START";
15
17
  /**
16
18
  * Represents the phase of an animation where an edge is being traversed.
17
19
  * @constant
20
+ * @group Animation
18
21
  */
19
22
  export declare const ANIMATION_PHASE_TRAVERSING_EDGE = "TRAVERSING_EDGE";
20
23
  /**
21
24
  * Represents the phase of an animation where the end vertex is being traversed.
22
25
  * @constant
26
+ * @group Animation
23
27
  */
24
28
  export declare const ANIMATION_PHASE_TRAVERSING_END = "TRAVERSING_END";
25
29
  /**
26
30
  * Represents an animation that has been cancelled
27
31
  * @constant
32
+ * @group Animation
28
33
  */
29
34
  export declare const ANIMATION_PHASE_CANCELLED = "CANCELLED";
30
35
  /**
31
36
  * Represents an animation that has run through and finished.
32
37
  * @constant
38
+ * @group Animation
33
39
  */
34
40
  export declare const ANIMATION_PHASE_FINISHED = "FINISHED";
35
41
  /**
36
42
  * A phase in an Animation.
37
- * @group Components
43
+ * @group Animation
38
44
  */
39
45
  export type AnimationPhase = typeof ANIMATION_PHASE_INITIALIZED | typeof ANIMATION_PHASE_TRAVERSING_START | typeof ANIMATION_PHASE_TRAVERSING_EDGE | typeof ANIMATION_PHASE_TRAVERSING_END | typeof ANIMATION_PHASE_CANCELLED | typeof ANIMATION_PHASE_FINISHED;
40
46
  /**
41
47
  * Available animation events.
42
- * @group Events
48
+ * @group Animation
49
+ * @category Events
43
50
  */
44
51
  export type AnimationEvent = typeof EVENT_START_OVERLAY_ANIMATION | typeof EVENT_END_OVERLAY_ANIMATION | typeof EVENT_START_NODE_TRAVERSAL | typeof EVENT_END_NODE_TRAVERSAL;
45
52
  /**
46
53
  * The type defining the object that is passed to all events fired by the `tracePath` method.
47
- * @group Events
54
+ * @group Animation
55
+ * @category Events
48
56
  */
49
57
  export type AnimationEventCallbackParams = {
50
58
  /**
@@ -62,7 +70,7 @@ export type AnimationEventCallbackParams = {
62
70
  };
63
71
  /**
64
72
  * Options for animating an overlay along an edge
65
- * @group Components
73
+ * @group Animation
66
74
  */
67
75
  export interface OverlayAnimationOptions {
68
76
  /**
@@ -109,6 +117,7 @@ export interface InternalOverlayAnimationOptions extends OverlayAnimationOptions
109
117
  }
110
118
  /**
111
119
  * Definition of the control surface for a specific segment in the tracePath method.
120
+ * @group Animation
112
121
  */
113
122
  export type ConnectionOverlayAnimator = {
114
123
  /**
@@ -12,7 +12,6 @@ export declare const EVENT_STATE = "state";
12
12
  export declare class PathTransport extends OptimisticEventGenerator {
13
13
  components: Array<any>;
14
14
  params: any;
15
- pathExists: true;
16
15
  state: CurrentState;
17
16
  currentlyAnimatingConnection: ConnectionOverlayAnimator;
18
17
  constructor(components: Array<any>, params: any);
@@ -4,19 +4,27 @@ import { PointXY, Edge, Group, Node, Port, Vertex } from "../../core";
4
4
  import { BrowserUIModel } from "../browser-ui";
5
5
  import { BrowserUI } from "../browser-visuallyjs-instance";
6
6
  /**
7
- * Identifies the 'pan' mode in the surface. In this mode the canvas is panned via pointer drag or via wheel events
7
+ * Identifies the 'pan' mode in the surface. In this mode the canvas is panned via pointer drag or via wheel events.
8
+ * @group Components
9
+ * @category Surface
8
10
  */
9
11
  export declare const SURFACE_MODE_PAN = "pan";
10
12
  /**
11
- * Identifies the 'select' mode in the surface. In this mode, panning is disabled and pointer drag s used to lasso items.
13
+ * Identifies the 'select' mode in the surface. In this mode, panning is disabled and pointer drag is used to lasso items.
14
+ * @group Components
15
+ * @category Surface
12
16
  */
13
17
  export declare const SURFACE_MODE_SELECT = "select";
14
18
  /**
15
19
  * Identifies the 'disabled' mode in the surface, in which no interaction may take place with the canvas.
20
+ * @group Components
21
+ * @category Surface
16
22
  */
17
23
  export declare const SURFACE_MODE_DISABLED = "disabled";
18
24
  /**
19
25
  * Identifies the mode in which pointer drag will cause vertices to be drawn. This surface will only enter this mode if there is a vertex drawing plugin attached.
26
+ * @group Components
27
+ * @category Surface
20
28
  */
21
29
  export declare const SURFACE_MODE_VERTEX_DRAWING = "vertexDrawing";
22
30
  /**
@@ -28,7 +36,7 @@ export type SurfaceMode = typeof SURFACE_MODE_PAN | typeof SURFACE_MODE_DISABLED
28
36
  /**
29
37
  * The spec for one model event binding in a surface. Consists of the event name, a CSS selector identifying which elements to listen to, and a callback to invoke.
30
38
  * @group Events
31
- * @category Payloads
39
+ * @category UI Events
32
40
  */
33
41
  export interface ModelEventSpec {
34
42
  event: string;
@@ -40,6 +48,7 @@ export interface ModelEventSpec {
40
48
  * @group Events
41
49
  * @typeParam T Maps the type of object the event pertains to - a Node, Group, Edge or Port.
42
50
  * @typeParam E Maps the event class you expect as a return value. Providing this helps you to type things more strictly.
51
+ * @category UI Events
43
52
  */
44
53
  export type ModelEventCallbackPayload<T = any, E extends Event = Event> = {
45
54
  event: E;
@@ -51,8 +60,10 @@ export type ModelEventCallbackPayload<T = any, E extends Event = Event> = {
51
60
  /**
52
61
  * Callback for a model event.
53
62
  * @group Events
63
+ * @category Model
54
64
  * @typeParam T Maps the type of object the event pertains to - a Node, Group, Edge or Port.
55
65
  * @typeParam E Maps the event class you expect as a return value. Providing this helps you to type things more strictly.
66
+ * @category UI Events
56
67
  */
57
68
  export type ModelEventCallback<T = any, E extends Event = Event> = (p: ModelEventCallbackPayload<T, E>) => any;
58
69
  /**
@@ -44,6 +44,8 @@ export interface DiagramGridOptions extends GridOptions {
44
44
  }
45
45
  /**
46
46
  * Defines a function that can generate the backing data for a new edge.
47
+ * @group Diagrams
48
+ * @category Options
47
49
  */
48
50
  export type EdgeDataGenerator = (v: Vertex, type: string) => ObjectData;
49
51
  /**
@@ -135,6 +137,10 @@ export interface DiagramOptions {
135
137
  * Whether or not to display labels on edges. Defaults to false. The value for an edge's label is sourced from the `label` field of the edge's data. You can change this via the `labelProperty` setting. The label is placed at location 0.5 by default. You can change that with either the `labelLocation` setting (to change every label), or the `labelLocationProperty` (to set location on a per-edge basis).
136
138
  */
137
139
  showLabels?: boolean;
140
+ /**
141
+ * Defaults to false. When true, edge labels are rotated to the angle matching the slope of the connector at the point at which they are located.
142
+ */
143
+ labelsRotatable?: boolean;
138
144
  /**
139
145
  * Whether or not to reattach this connection automatically should it be detached via user intervention and then dropped onto whitespace.
140
146
  */
@@ -396,7 +402,7 @@ export interface DiagramOptions {
396
402
  /**
397
403
  * Defaults for connector/anchors etc
398
404
  */
399
- defaults?: UICoreDefaults<BrowserElement>;
405
+ defaults?: UICoreDefaults;
400
406
  /**
401
407
  * Options for lasso, or just a boolean instructing the diagram to attach a lasso with default options, if true. If no value is set for this, the diagram will not have a lasso attached.
402
408
  */
@@ -516,17 +522,21 @@ export interface DiagramSaveOptions extends UIExportOptions {
516
522
  /**
517
523
  * Defines the format of the data returned from a Diagram save
518
524
  * @group Diagrams
519
- * @category IO
525
+ * @category Input and Output
520
526
  */
521
527
  export interface DiagramSaveData extends SurfaceSaveData {
522
528
  }
523
529
  /**
524
530
  * A group mapping in a Diagram. Intended for advanced use cases where you need fine-grained controls over groups, and the config options available in `cells` are not granular enough.
531
+ * @group Diagrams
532
+ * @category Options
525
533
  */
526
534
  export interface DiagramGroupMapping extends Omit<GroupMapping<BrowserElement>, "template" | "ignore" | "templateId"> {
527
535
  }
528
536
  /**
529
537
  * A node mapping in a Diagram. Intended for advanced use cases where you need fine-grained controls over nodes, and the config options available in `cells` are not granular enough.
538
+ * @group Diagrams
539
+ * @category Options
530
540
  */
531
541
  export interface DiagramNodeMapping extends Omit<NodeMapping<BrowserElement>, "template" | "ignore" | "templateId"> {
532
542
  }
@@ -3,6 +3,7 @@ import { Diagram } from "./diagram";
3
3
  import { DiagramCell } from "./diagram-cell";
4
4
  /**
5
5
  * A link in a diagram.
6
+ * @group Diagrams
6
7
  */
7
8
  export declare class DiagramLink {
8
9
  private diagram;
@@ -13,6 +14,7 @@ export declare class DiagramLink {
13
14
  */
14
15
  $destroyed: boolean;
15
16
  get id(): string;
17
+ get connection(): import("../../..").Connection<import("../..").BrowserElement>;
16
18
  constructor(diagram: Diagram, edge: Edge);
17
19
  /**
18
20
  * Update the link's backing data.
@@ -5,10 +5,14 @@ import { ResizingToolsPlugin, ResizingToolsPluginOptions } from "../plugins";
5
5
  import { Surface } from "../surface";
6
6
  /**
7
7
  * The default size for a button in the diagram tools.
8
+ * @group Plugins
9
+ * @category Diagram Tools
8
10
  */
9
11
  export declare const DEFAULT_DIAGRAM_TOOLS_BUTTON_SIZE = 15;
10
12
  /**
11
13
  * Options for the diagram tools plugin
14
+ * @group Plugins
15
+ * @category Diagram Tools
12
16
  */
13
17
  export interface DiagramToolsPluginOptions extends ResizingToolsPluginOptions {
14
18
  /**
@@ -54,7 +54,10 @@ export declare class Diagram {
54
54
  * @internal
55
55
  */
56
56
  private _getShapeDefinition;
57
- $destroy(): void;
57
+ /**
58
+ * Cleanup the diagram and release any DOM elements.
59
+ */
60
+ destroy(): void;
58
61
  private _resolveId;
59
62
  private _resolveCell;
60
63
  /**
@@ -12,13 +12,15 @@ export * from './util';
12
12
  export * from './mediator';
13
13
  /**
14
14
  * Options for a diagram export component.
15
+ * @group Diagrams
16
+ * @category Input and Output
15
17
  */
16
18
  export interface DiagramExportComponentOptions extends SvgExportComponentOptions {
17
19
  }
18
20
  /**
19
21
  * Simple component offering buttons for export of SVG, PNG or JPG from a UI that has an SVG container
20
- * @group Components
21
- * @category Export Controls
22
+ * @group Diagrams
23
+ * @category Input and Output
22
24
  */
23
25
  export declare class DiagramExportComponent extends SvgExportComponent {
24
26
  constructor(container: BrowserElement, diagram: Diagram, options?: DiagramExportComponentOptions);
@@ -3,6 +3,8 @@ import { ShapeType } from "../../shape-library";
3
3
  import { BrowserElement } from "../../util";
4
4
  /**
5
5
  * Defines an object that can decide at runtime whether a given shape should offer various actions in its shape editing tools. Each method in this interface is optional, and does not override any diagram-wide settings for the specific operation. Also, the mediator will not be invoked if a diagram is not editable.
6
+ * @group Diagrams
7
+ * @category Options
6
8
  */
7
9
  export interface DiagramActionMediator {
8
10
  /**
@@ -54,6 +56,18 @@ export interface DiagramActionMediator {
54
56
  * @param el
55
57
  */
56
58
  canDrop?: (vertex: Node | Group, targetVertex?: Node | Group, isOnCanvas?: boolean) => boolean;
59
+ /**
60
+ * Returns whether or not the given group can be collapsed
61
+ * @param group Group in question
62
+ * @param currentSize The group's current size.
63
+ * @return Either a boolean value indicating the operation may or may not proceed, or a set of values. In the case that a set of values are returned, the operation is approved, and the data returned is updated onto the group's dataset. This is useful when your UI wants to stored specific information related to the collapsed group.
64
+ */
57
65
  canCollapse?: (group: Group, currentSize: Size) => boolean | ObjectData;
66
+ /**
67
+ * Returns whether or not the given group can be expanded
68
+ * @param group Group in question
69
+ * @param currentSize The group's current (collapsed) size.
70
+ * @return Either a boolean value indicating the operation may or may not proceed, or a set of values. In the case that a set of values are returned, the operation is approved, and the data returned is updated onto the group's dataset. This is useful when your UI wants to stored specific information related to the expanded group.
71
+ */
58
72
  canExpand?: (group: Group, currentSize: Size) => boolean | ObjectData;
59
73
  }
@@ -4,6 +4,8 @@ import { BrowserElement } from "../../../util";
4
4
  import { BrowserUI } from "../../../browser-visuallyjs-instance";
5
5
  /**
6
6
  * Options for the controls plugin.
7
+ * @group Plugins
8
+ * @category Controls
7
9
  */
8
10
  export interface ControlsPluginOptions extends ControlsComponentOptions {
9
11
  /**
@@ -4,6 +4,8 @@ import { BrowserElement } from "../../../util";
4
4
  import { BrowserUI } from "../../../browser-visuallyjs-instance";
5
5
  /**
6
6
  * Options for the export controls plugin
7
+ * @group Plugins
8
+ * @category Export Controls
7
9
  */
8
10
  export interface ExportControlsPluginOptions extends SvgExportComponentOptions {
9
11
  /**
@@ -14,7 +16,7 @@ export interface ExportControlsPluginOptions extends SvgExportComponentOptions {
14
16
  /**
15
17
  * Export Controls component plugin wrapper.
16
18
  * @group Plugins
17
- * @category Controls
19
+ * @category Export Controls
18
20
  */
19
21
  export declare class ExportControlsPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<ExportControlsPluginOptions> {
20
22
  $component: SvgExportComponent;
@@ -6,5 +6,6 @@ export * from './drag-groups';
6
6
  export * from './snaplines';
7
7
  export * from './palette';
8
8
  export * from './pan-buttons';
9
+ export * from './list-manager';
9
10
  export * from './vertex-drawing';
10
11
  export * from './resizing-tools';
@@ -0,0 +1 @@
1
+ export * from "./list-manager-plugin";
@@ -0,0 +1,34 @@
1
+ import { Surface } from "../../surface";
2
+ import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
3
+ import { ConnectionEstablishedParams } from "../../../../ui";
4
+ import { Edge } from "../../../../core";
5
+ /**
6
+ * Options for the list manager plugin.
7
+ * @group Plugins
8
+ * @category List Manager
9
+ */
10
+ export interface ListManagerPluginOptions extends BrowserUIPluginOptions {
11
+ /**
12
+ * Whether to proxy edges that are scrolled out of view, or to hide them. Possible values are "proxy" or "hide". Defaults to "proxy".
13
+ */
14
+ behavior?: "hide" | "proxy";
15
+ }
16
+ /**
17
+ * This is a Surface plugin that manages lists and their connections when scrolling, proxying edges for elements that have been scrolled out of the view onto their container.
18
+ * @group Plugins
19
+ * @category List Manager
20
+ */
21
+ export declare class ListManagerPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<ListManagerPluginOptions> {
22
+ static type: string;
23
+ id: string;
24
+ surface: Surface;
25
+ options: ListManagerPluginOptions;
26
+ private _rafId;
27
+ initialise(surface: Surface, options: ListManagerPluginOptions): boolean;
28
+ private _checkEdge;
29
+ $edgeRendered(p: ConnectionEstablishedParams): void;
30
+ $edgeUpdated(edge: Edge): void;
31
+ private wheelHandler;
32
+ destroy(): void;
33
+ reset(): void;
34
+ }
@@ -4,6 +4,8 @@ import { BrowserElement } from "../../../util";
4
4
  import { BrowserUI } from "../../../browser-visuallyjs-instance";
5
5
  /**
6
6
  * Options for the palette plugin
7
+ * @group Plugins
8
+ * @category Palette
7
9
  */
8
10
  export interface PalettePluginOptions extends PaletteOptions<BrowserElement> {
9
11
  }
@@ -25,8 +25,7 @@ export interface PanButtonsPluginOptions extends BrowserUIPluginOptions {
25
25
  panDistance?: number;
26
26
  }
27
27
  /**
28
- * This is a Surface plugin that adds buttons around the perimeter of the surface canvas, which users can click on the nudge the pan
29
- * in a certain direction. Click and hold auto-pans the surface canvas.
28
+ * This is a Surface plugin that adds buttons around the perimeter of the surface canvas, which users can click on the nudge the pan in a certain direction. Click and hold auto-pans the surface canvas.
30
29
  * @group Plugins
31
30
  * @category Pan Buttons
32
31
  */