@progress/kendo-angular-diagrams 21.3.0-develop.1 → 21.3.0-develop.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/diagram.component.d.ts +14 -7
- package/esm2022/diagram.component.mjs +59 -46
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/utils.mjs +1 -24
- package/fesm2022/progress-kendo-angular-diagrams.mjs +61 -71
- package/models.d.ts +10 -1
- package/package.json +11 -11
- package/utils.d.ts +2 -9
package/diagram.component.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy,
|
|
|
6
6
|
import { DiagramEditable, DiagramLayout, Pannable, Selectable, Shape, DiagramDragEvent, DiagramDomEvent, DiagramZoomStartEvent, DiagramZoomEndEvent, DiagramSelectEvent, DiagramPanEvent, DiagramItemBoundsChangeEvent, DiagramChangeEvent, Connection, Connector, Diagram, Point, Rect, DiagramState, BringIntoViewOptions, SelectionOptions, Direction } from '@progress/kendo-diagram-common';
|
|
7
7
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
8
|
import { Group } from '@progress/kendo-drawing';
|
|
9
|
-
import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults, ShapeOptions, ConnectionOptions } from './models';
|
|
9
|
+
import { ShapeModelFields, ConnectionModelFields, ShapeDefaults, ConnectionDefaults, ShapeOptions, ConnectionOptions, DiagramNavigationOptions } from './models';
|
|
10
10
|
import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
|
|
11
11
|
import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
|
|
12
12
|
import * as i0 from "@angular/core";
|
|
@@ -29,7 +29,6 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
29
29
|
diagramClass: boolean;
|
|
30
30
|
/**
|
|
31
31
|
* Defines the default configuration options applicable to all connections.
|
|
32
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
33
32
|
*
|
|
34
33
|
*/
|
|
35
34
|
connectionDefaults?: ConnectionDefaults;
|
|
@@ -37,7 +36,6 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
37
36
|
* Defines the connections that render between the shapes in the `Diagram` (see [Connections article](slug:diagram_connections)).
|
|
38
37
|
* Accepts either an array of `ConnectionOptions` or an array of any objects
|
|
39
38
|
* that will be mapped using the `connectionModelFields` configuration.
|
|
40
|
-
* Changing this property dynamically reinitializes the `Diagram`.
|
|
41
39
|
*
|
|
42
40
|
*/
|
|
43
41
|
connections?: any[];
|
|
@@ -56,7 +54,6 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
56
54
|
editable?: boolean | DiagramEditable;
|
|
57
55
|
/**
|
|
58
56
|
* Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
|
|
59
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
60
57
|
*
|
|
61
58
|
*/
|
|
62
59
|
layout?: DiagramLayout;
|
|
@@ -80,14 +77,12 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
80
77
|
selectable?: boolean | Selectable;
|
|
81
78
|
/**
|
|
82
79
|
* Defines the default configuration options applicable to all shapes.
|
|
83
|
-
* Changing the property value dynamically triggers a reinitialization of the Diagram.
|
|
84
80
|
*/
|
|
85
81
|
shapeDefaults?: ShapeDefaults;
|
|
86
82
|
/**
|
|
87
83
|
* Defines the shapes that render in the `Diagram` (see [Shapes article](slug:diagram_shapes)).
|
|
88
84
|
* Accepts either an array of `ShapeOptions` or an array of any objects
|
|
89
85
|
* that will be mapped using the `shapeModelFields` configuration.
|
|
90
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
91
86
|
*
|
|
92
87
|
*/
|
|
93
88
|
shapes?: any[];
|
|
@@ -121,6 +116,15 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
121
116
|
* @default 0.1
|
|
122
117
|
*/
|
|
123
118
|
zoomRate?: number;
|
|
119
|
+
/**
|
|
120
|
+
* Enables keyboard navigation in the `Diagram`.
|
|
121
|
+
* When set to `true`, navigate between shapes using arrow keys.
|
|
122
|
+
* Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
|
|
123
|
+
*
|
|
124
|
+
* @default true
|
|
125
|
+
*/
|
|
126
|
+
set navigable(_navigable: boolean | DiagramNavigationOptions);
|
|
127
|
+
get navigable(): boolean | DiagramNavigationOptions;
|
|
124
128
|
/**
|
|
125
129
|
* Fires when a shape or connection is created or removed.
|
|
126
130
|
*/
|
|
@@ -206,6 +210,7 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
206
210
|
* @hidden
|
|
207
211
|
*/
|
|
208
212
|
customTemplate?: TemplateRef<any>;
|
|
213
|
+
private _navigable;
|
|
209
214
|
private options;
|
|
210
215
|
/**
|
|
211
216
|
* Stores the converted shapes from user data.
|
|
@@ -464,6 +469,8 @@ export declare class DiagramComponent implements AfterViewInit, OnChanges, OnDes
|
|
|
464
469
|
private createFieldMapping;
|
|
465
470
|
private init;
|
|
466
471
|
private updateOptions;
|
|
472
|
+
private loadOptions;
|
|
473
|
+
private getNormalizedNavigationOptions;
|
|
467
474
|
static ɵfac: i0.ɵɵFactoryDeclaration<DiagramComponent, never>;
|
|
468
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; }, { "change": "change"; "diagramClick": "diagramClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "shapeBoundsChange": "shapeBoundsChange"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "onPan": "pan"; "onSelect": "select"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "tooltipShow": "tooltipShow"; "tooltipHide": "tooltipHide"; }, ["shapeTooltipTemplate", "connectionTooltipTemplate"], never, true, never>;
|
|
475
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DiagramComponent, "kendo-diagram", ["kendoDiagram"], { "connectionDefaults": { "alias": "connectionDefaults"; "required": false; }; "connections": { "alias": "connections"; "required": false; }; "connectionModelFields": { "alias": "connectionModelFields"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "pannable": { "alias": "pannable"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "shapeDefaults": { "alias": "shapeDefaults"; "required": false; }; "shapes": { "alias": "shapes"; "required": false; }; "shapeModelFields": { "alias": "shapeModelFields"; "required": false; }; "zoom": { "alias": "zoom"; "required": false; }; "zoomMax": { "alias": "zoomMax"; "required": false; }; "zoomMin": { "alias": "zoomMin"; "required": false; }; "zoomRate": { "alias": "zoomRate"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "change": "change"; "diagramClick": "diagramClick"; "drag": "drag"; "dragEnd": "dragEnd"; "dragStart": "dragStart"; "shapeBoundsChange": "shapeBoundsChange"; "mouseEnter": "mouseEnter"; "mouseLeave": "mouseLeave"; "onPan": "pan"; "onSelect": "select"; "zoomEnd": "zoomEnd"; "zoomStart": "zoomStart"; "tooltipShow": "tooltipShow"; "tooltipHide": "tooltipHide"; }, ["shapeTooltipTemplate", "connectionTooltipTemplate"], never, true, never>;
|
|
469
476
|
}
|
|
@@ -6,11 +6,11 @@ import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input,
|
|
|
6
6
|
import { Diagram, convertToDiagramModel, placeTooltip } from '@progress/kendo-diagram-common';
|
|
7
7
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
8
8
|
import { packageMetadata } from './package-metadata';
|
|
9
|
-
import { hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
9
|
+
import { hasObservers, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, isDocumentAvailable, isPresent } from '@progress/kendo-angular-common';
|
|
10
10
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
11
11
|
import { NgTemplateOutlet } from '@angular/common';
|
|
12
12
|
import { events, loadTheme } from '@progress/kendo-diagram-common';
|
|
13
|
-
import {
|
|
13
|
+
import { DEFAULT_NAVIGABLE_OPTIONS } from './utils';
|
|
14
14
|
import { ShapeTooltipTemplateDirective } from './shape-tooltip-template.directive';
|
|
15
15
|
import { ConnectionTooltipTemplateDirective } from './connection-tooltip-template.directive';
|
|
16
16
|
import * as i0 from "@angular/core";
|
|
@@ -34,15 +34,13 @@ export class DiagramComponent {
|
|
|
34
34
|
diagramClass = true;
|
|
35
35
|
/**
|
|
36
36
|
* Defines the default configuration options applicable to all connections.
|
|
37
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
38
37
|
*
|
|
39
38
|
*/
|
|
40
|
-
connectionDefaults
|
|
39
|
+
connectionDefaults;
|
|
41
40
|
/**
|
|
42
41
|
* Defines the connections that render between the shapes in the `Diagram` (see [Connections article](slug:diagram_connections)).
|
|
43
42
|
* Accepts either an array of `ConnectionOptions` or an array of any objects
|
|
44
43
|
* that will be mapped using the `connectionModelFields` configuration.
|
|
45
|
-
* Changing this property dynamically reinitializes the `Diagram`.
|
|
46
44
|
*
|
|
47
45
|
*/
|
|
48
46
|
connections = [];
|
|
@@ -58,10 +56,9 @@ export class DiagramComponent {
|
|
|
58
56
|
*
|
|
59
57
|
* @default true
|
|
60
58
|
*/
|
|
61
|
-
editable =
|
|
59
|
+
editable = true;
|
|
62
60
|
/**
|
|
63
61
|
* Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
|
|
64
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
65
62
|
*
|
|
66
63
|
*/
|
|
67
64
|
layout;
|
|
@@ -85,14 +82,12 @@ export class DiagramComponent {
|
|
|
85
82
|
selectable = true;
|
|
86
83
|
/**
|
|
87
84
|
* Defines the default configuration options applicable to all shapes.
|
|
88
|
-
* Changing the property value dynamically triggers a reinitialization of the Diagram.
|
|
89
85
|
*/
|
|
90
|
-
shapeDefaults
|
|
86
|
+
shapeDefaults;
|
|
91
87
|
/**
|
|
92
88
|
* Defines the shapes that render in the `Diagram` (see [Shapes article](slug:diagram_shapes)).
|
|
93
89
|
* Accepts either an array of `ShapeOptions` or an array of any objects
|
|
94
90
|
* that will be mapped using the `shapeModelFields` configuration.
|
|
95
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
96
91
|
*
|
|
97
92
|
*/
|
|
98
93
|
shapes = [];
|
|
@@ -126,6 +121,27 @@ export class DiagramComponent {
|
|
|
126
121
|
* @default 0.1
|
|
127
122
|
*/
|
|
128
123
|
zoomRate = 0.1;
|
|
124
|
+
/**
|
|
125
|
+
* Enables keyboard navigation in the `Diagram`.
|
|
126
|
+
* When set to `true`, navigate between shapes using arrow keys.
|
|
127
|
+
* Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
|
|
128
|
+
*
|
|
129
|
+
* @default true
|
|
130
|
+
*/
|
|
131
|
+
set navigable(_navigable) {
|
|
132
|
+
if (typeof _navigable === 'boolean') {
|
|
133
|
+
this._navigable = _navigable ? DEFAULT_NAVIGABLE_OPTIONS : { ...DEFAULT_NAVIGABLE_OPTIONS, enabled: false };
|
|
134
|
+
}
|
|
135
|
+
else {
|
|
136
|
+
this._navigable = _navigable;
|
|
137
|
+
this._navigable.enabled = isPresent(this._navigable.enabled) ? this._navigable.enabled : true;
|
|
138
|
+
}
|
|
139
|
+
this.options = { ...this.options, navigation: this.getNormalizedNavigationOptions() };
|
|
140
|
+
this.diagramWidget?.setOptions(this.options);
|
|
141
|
+
}
|
|
142
|
+
get navigable() {
|
|
143
|
+
return this._navigable;
|
|
144
|
+
}
|
|
129
145
|
/**
|
|
130
146
|
* Fires when a shape or connection is created or removed.
|
|
131
147
|
*/
|
|
@@ -217,6 +233,7 @@ export class DiagramComponent {
|
|
|
217
233
|
* @hidden
|
|
218
234
|
*/
|
|
219
235
|
customTemplate;
|
|
236
|
+
_navigable = DEFAULT_NAVIGABLE_OPTIONS;
|
|
220
237
|
options = {
|
|
221
238
|
shapes: this.shapes,
|
|
222
239
|
connections: this.connections,
|
|
@@ -227,7 +244,8 @@ export class DiagramComponent {
|
|
|
227
244
|
zoomMin: this.zoomMin,
|
|
228
245
|
zoomRate: this.zoomRate,
|
|
229
246
|
shapeDefaults: this.shapeDefaults,
|
|
230
|
-
connectionDefaults: this.connectionDefaults
|
|
247
|
+
connectionDefaults: this.connectionDefaults,
|
|
248
|
+
navigation: this.getNormalizedNavigationOptions()
|
|
231
249
|
};
|
|
232
250
|
/**
|
|
233
251
|
* Stores the converted shapes from user data.
|
|
@@ -261,41 +279,30 @@ export class DiagramComponent {
|
|
|
261
279
|
this.showLicenseWatermark = shouldShowValidationUI(isValid);
|
|
262
280
|
}
|
|
263
281
|
ngOnChanges(changes) {
|
|
264
|
-
let recreate = false;
|
|
265
282
|
if (changes['shapes'] || changes['connections'] || changes['shapeModelFields'] || changes['connectionModelFields']) {
|
|
266
283
|
this.convertUserData();
|
|
267
|
-
this.options
|
|
268
|
-
|
|
269
|
-
|
|
284
|
+
this.options = {
|
|
285
|
+
...this.options,
|
|
286
|
+
shapes: this.convertedShapes,
|
|
287
|
+
connections: this.convertedConnections
|
|
288
|
+
};
|
|
289
|
+
this.loadOptions(this.options);
|
|
270
290
|
}
|
|
271
291
|
if (changes['connectionDefaults']) {
|
|
272
292
|
this.options.connectionDefaults = { ...this.options.connectionDefaults, ...this.connectionDefaults };
|
|
273
|
-
|
|
293
|
+
this.loadOptions(this.options);
|
|
274
294
|
}
|
|
275
295
|
if (changes['shapeDefaults']) {
|
|
276
296
|
this.options.shapeDefaults = { ...this.options.shapeDefaults, ...this.shapeDefaults };
|
|
277
|
-
|
|
297
|
+
this.loadOptions(this.options);
|
|
278
298
|
}
|
|
279
|
-
if (changes['editable']
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
else {
|
|
286
|
-
this.options.editable = { drag: false, resize: false, remove: false };
|
|
287
|
-
this.options.shapeDefaults.editable = { drag: false, remove: false };
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
if (typeof this.editable === 'object') {
|
|
291
|
-
this.options.editable = {
|
|
292
|
-
drag: this.editable.drag,
|
|
293
|
-
resize: this.editable.resize,
|
|
294
|
-
remove: this.editable.remove
|
|
295
|
-
};
|
|
296
|
-
this.options.shapeDefaults.editable = { drag: this.editable.drag, remove: this.editable.remove };
|
|
299
|
+
if (changes['editable']) {
|
|
300
|
+
this.options = { ...this.options, editable: this.editable };
|
|
301
|
+
if (this.diagramWidget) {
|
|
302
|
+
this.diagramWidget.destroy();
|
|
303
|
+
this.init();
|
|
304
|
+
this.bindDiagramEvents();
|
|
297
305
|
}
|
|
298
|
-
recreate = true;
|
|
299
306
|
}
|
|
300
307
|
if (changes['zoomMax']) {
|
|
301
308
|
this.updateOptions('zoomMax');
|
|
@@ -320,10 +327,6 @@ export class DiagramComponent {
|
|
|
320
327
|
this.updateOptions('zoom');
|
|
321
328
|
this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
|
|
322
329
|
}
|
|
323
|
-
if (recreate) {
|
|
324
|
-
this.init();
|
|
325
|
-
this.bindDiagramEvents();
|
|
326
|
-
}
|
|
327
330
|
}
|
|
328
331
|
ngAfterViewInit() {
|
|
329
332
|
this.convertUserData();
|
|
@@ -620,8 +623,8 @@ export class DiagramComponent {
|
|
|
620
623
|
const isConnection = event.item.name === "Connection";
|
|
621
624
|
this.setCustomTemplate(isShape, isConnection);
|
|
622
625
|
const defaultsEnabled = isShape
|
|
623
|
-
? this.options.shapeDefaults
|
|
624
|
-
: this.options.connectionDefaults
|
|
626
|
+
? this.options.shapeDefaults?.tooltip?.visible
|
|
627
|
+
: this.options.connectionDefaults?.tooltip?.visible;
|
|
625
628
|
const itemTooltipEnabled = dataItem.tooltip?.visible;
|
|
626
629
|
const optionsArray = isShape ? this.options.shapes : this.options.connections;
|
|
627
630
|
const optionsItem = optionsArray?.find((item) => item.id === event.item.id);
|
|
@@ -807,9 +810,6 @@ export class DiagramComponent {
|
|
|
807
810
|
if (!isDocumentAvailable()) {
|
|
808
811
|
return;
|
|
809
812
|
}
|
|
810
|
-
if (this.diagramWidget) {
|
|
811
|
-
this.diagramWidget.destroy();
|
|
812
|
-
}
|
|
813
813
|
this.zone.runOutsideAngular(() => {
|
|
814
814
|
const theme = loadTheme(this.wrapperElement.nativeElement);
|
|
815
815
|
this.diagramWidget = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
|
|
@@ -822,8 +822,19 @@ export class DiagramComponent {
|
|
|
822
822
|
this.options[prop] = this[prop];
|
|
823
823
|
this.diagramWidget?.setOptions(this.options);
|
|
824
824
|
}
|
|
825
|
+
loadOptions(options) {
|
|
826
|
+
this.diagramWidget?.load(options);
|
|
827
|
+
this.diagramWidget?.layout(options);
|
|
828
|
+
}
|
|
829
|
+
getNormalizedNavigationOptions() {
|
|
830
|
+
return {
|
|
831
|
+
disabled: !this._navigable.enabled,
|
|
832
|
+
smallStep: this._navigable.smallStep,
|
|
833
|
+
largeStep: this._navigable.largeStep
|
|
834
|
+
};
|
|
835
|
+
}
|
|
825
836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
826
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
|
|
837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate", navigable: "navigable" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
|
|
827
838
|
@if (showLicenseWatermark) {
|
|
828
839
|
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
829
840
|
}
|
|
@@ -890,6 +901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
890
901
|
type: Input
|
|
891
902
|
}], zoomRate: [{
|
|
892
903
|
type: Input
|
|
904
|
+
}], navigable: [{
|
|
905
|
+
type: Input
|
|
893
906
|
}], change: [{
|
|
894
907
|
type: Output
|
|
895
908
|
}], diagramClick: [{
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.3.0-develop.
|
|
13
|
+
publishDate: 1765273255,
|
|
14
|
+
version: '21.3.0-develop.10',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
|
|
16
16
|
};
|
package/esm2022/utils.mjs
CHANGED
|
@@ -3,27 +3,4 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/** @hidden */
|
|
6
|
-
export const
|
|
7
|
-
drag: true,
|
|
8
|
-
remove: true,
|
|
9
|
-
connect: true,
|
|
10
|
-
};
|
|
11
|
-
/** @hidden */
|
|
12
|
-
export const DEFAULT_EDITABLE_CONNECTION = {
|
|
13
|
-
drag: true,
|
|
14
|
-
remove: true,
|
|
15
|
-
};
|
|
16
|
-
/** @hidden */
|
|
17
|
-
export const CONNECTION_DEFAULTS = { editable: DEFAULT_EDITABLE_CONNECTION };
|
|
18
|
-
/** @hidden */
|
|
19
|
-
export const SHAPE_DEFAULTS = {
|
|
20
|
-
editable: DEFAULT_EDITABLE_SHAPE,
|
|
21
|
-
height: 100,
|
|
22
|
-
width: 100,
|
|
23
|
-
minHeight: 50,
|
|
24
|
-
minWidth: 50,
|
|
25
|
-
x: 0,
|
|
26
|
-
y: 0,
|
|
27
|
-
type: 'rectangle',
|
|
28
|
-
selectable: true,
|
|
29
|
-
};
|
|
6
|
+
export const DEFAULT_NAVIGABLE_OPTIONS = { enabled: true, smallStep: 1, largeStep: 5 };
|
|
@@ -7,7 +7,7 @@ export { ArrowMarker, Circle, CircleMarker, Collate, Connection, Connector, Data
|
|
|
7
7
|
import * as i0 from '@angular/core';
|
|
8
8
|
import { Directive, EventEmitter, Component, HostBinding, Input, Output, ViewChild, ContentChild, NgModule } from '@angular/core';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
|
-
import { getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
|
|
10
|
+
import { isPresent, getLicenseMessage, shouldShowValidationUI, hasObservers, isDocumentAvailable, WatermarkOverlayComponent } from '@progress/kendo-angular-common';
|
|
11
11
|
import * as i1 from '@progress/kendo-angular-popup';
|
|
12
12
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
13
13
|
import { NgTemplateOutlet } from '@angular/common';
|
|
@@ -20,36 +20,13 @@ const packageMetadata = {
|
|
|
20
20
|
productName: 'Kendo UI for Angular',
|
|
21
21
|
productCode: 'KENDOUIANGULAR',
|
|
22
22
|
productCodes: ['KENDOUIANGULAR'],
|
|
23
|
-
publishDate:
|
|
24
|
-
version: '21.3.0-develop.
|
|
23
|
+
publishDate: 1765273255,
|
|
24
|
+
version: '21.3.0-develop.10',
|
|
25
25
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning',
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
/** @hidden */
|
|
29
|
-
const
|
|
30
|
-
drag: true,
|
|
31
|
-
remove: true,
|
|
32
|
-
connect: true,
|
|
33
|
-
};
|
|
34
|
-
/** @hidden */
|
|
35
|
-
const DEFAULT_EDITABLE_CONNECTION = {
|
|
36
|
-
drag: true,
|
|
37
|
-
remove: true,
|
|
38
|
-
};
|
|
39
|
-
/** @hidden */
|
|
40
|
-
const CONNECTION_DEFAULTS = { editable: DEFAULT_EDITABLE_CONNECTION };
|
|
41
|
-
/** @hidden */
|
|
42
|
-
const SHAPE_DEFAULTS = {
|
|
43
|
-
editable: DEFAULT_EDITABLE_SHAPE,
|
|
44
|
-
height: 100,
|
|
45
|
-
width: 100,
|
|
46
|
-
minHeight: 50,
|
|
47
|
-
minWidth: 50,
|
|
48
|
-
x: 0,
|
|
49
|
-
y: 0,
|
|
50
|
-
type: 'rectangle',
|
|
51
|
-
selectable: true,
|
|
52
|
-
};
|
|
29
|
+
const DEFAULT_NAVIGABLE_OPTIONS = { enabled: true, smallStep: 1, largeStep: 5 };
|
|
53
30
|
|
|
54
31
|
/**
|
|
55
32
|
* Defines a custom template for shape tooltips within the `kendo-diagram` component.
|
|
@@ -154,15 +131,13 @@ class DiagramComponent {
|
|
|
154
131
|
diagramClass = true;
|
|
155
132
|
/**
|
|
156
133
|
* Defines the default configuration options applicable to all connections.
|
|
157
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
158
134
|
*
|
|
159
135
|
*/
|
|
160
|
-
connectionDefaults
|
|
136
|
+
connectionDefaults;
|
|
161
137
|
/**
|
|
162
138
|
* Defines the connections that render between the shapes in the `Diagram` (see [Connections article](slug:diagram_connections)).
|
|
163
139
|
* Accepts either an array of `ConnectionOptions` or an array of any objects
|
|
164
140
|
* that will be mapped using the `connectionModelFields` configuration.
|
|
165
|
-
* Changing this property dynamically reinitializes the `Diagram`.
|
|
166
141
|
*
|
|
167
142
|
*/
|
|
168
143
|
connections = [];
|
|
@@ -178,10 +153,9 @@ class DiagramComponent {
|
|
|
178
153
|
*
|
|
179
154
|
* @default true
|
|
180
155
|
*/
|
|
181
|
-
editable =
|
|
156
|
+
editable = true;
|
|
182
157
|
/**
|
|
183
158
|
* Defines the layout configuration for arranging shapes and connections in the `Diagram` (see [Layout article](slug:diagram_layouts)).
|
|
184
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
185
159
|
*
|
|
186
160
|
*/
|
|
187
161
|
layout;
|
|
@@ -205,14 +179,12 @@ class DiagramComponent {
|
|
|
205
179
|
selectable = true;
|
|
206
180
|
/**
|
|
207
181
|
* Defines the default configuration options applicable to all shapes.
|
|
208
|
-
* Changing the property value dynamically triggers a reinitialization of the Diagram.
|
|
209
182
|
*/
|
|
210
|
-
shapeDefaults
|
|
183
|
+
shapeDefaults;
|
|
211
184
|
/**
|
|
212
185
|
* Defines the shapes that render in the `Diagram` (see [Shapes article](slug:diagram_shapes)).
|
|
213
186
|
* Accepts either an array of `ShapeOptions` or an array of any objects
|
|
214
187
|
* that will be mapped using the `shapeModelFields` configuration.
|
|
215
|
-
* Changing the property value dynamically triggers a reinitialization of the `Diagram`.
|
|
216
188
|
*
|
|
217
189
|
*/
|
|
218
190
|
shapes = [];
|
|
@@ -246,6 +218,27 @@ class DiagramComponent {
|
|
|
246
218
|
* @default 0.1
|
|
247
219
|
*/
|
|
248
220
|
zoomRate = 0.1;
|
|
221
|
+
/**
|
|
222
|
+
* Enables keyboard navigation in the `Diagram`.
|
|
223
|
+
* When set to `true`, navigate between shapes using arrow keys.
|
|
224
|
+
* Alternatively, pass a `DiagramNavigationOptions` object to customize navigation behavior.
|
|
225
|
+
*
|
|
226
|
+
* @default true
|
|
227
|
+
*/
|
|
228
|
+
set navigable(_navigable) {
|
|
229
|
+
if (typeof _navigable === 'boolean') {
|
|
230
|
+
this._navigable = _navigable ? DEFAULT_NAVIGABLE_OPTIONS : { ...DEFAULT_NAVIGABLE_OPTIONS, enabled: false };
|
|
231
|
+
}
|
|
232
|
+
else {
|
|
233
|
+
this._navigable = _navigable;
|
|
234
|
+
this._navigable.enabled = isPresent(this._navigable.enabled) ? this._navigable.enabled : true;
|
|
235
|
+
}
|
|
236
|
+
this.options = { ...this.options, navigation: this.getNormalizedNavigationOptions() };
|
|
237
|
+
this.diagramWidget?.setOptions(this.options);
|
|
238
|
+
}
|
|
239
|
+
get navigable() {
|
|
240
|
+
return this._navigable;
|
|
241
|
+
}
|
|
249
242
|
/**
|
|
250
243
|
* Fires when a shape or connection is created or removed.
|
|
251
244
|
*/
|
|
@@ -337,6 +330,7 @@ class DiagramComponent {
|
|
|
337
330
|
* @hidden
|
|
338
331
|
*/
|
|
339
332
|
customTemplate;
|
|
333
|
+
_navigable = DEFAULT_NAVIGABLE_OPTIONS;
|
|
340
334
|
options = {
|
|
341
335
|
shapes: this.shapes,
|
|
342
336
|
connections: this.connections,
|
|
@@ -347,7 +341,8 @@ class DiagramComponent {
|
|
|
347
341
|
zoomMin: this.zoomMin,
|
|
348
342
|
zoomRate: this.zoomRate,
|
|
349
343
|
shapeDefaults: this.shapeDefaults,
|
|
350
|
-
connectionDefaults: this.connectionDefaults
|
|
344
|
+
connectionDefaults: this.connectionDefaults,
|
|
345
|
+
navigation: this.getNormalizedNavigationOptions()
|
|
351
346
|
};
|
|
352
347
|
/**
|
|
353
348
|
* Stores the converted shapes from user data.
|
|
@@ -381,41 +376,30 @@ class DiagramComponent {
|
|
|
381
376
|
this.showLicenseWatermark = shouldShowValidationUI(isValid);
|
|
382
377
|
}
|
|
383
378
|
ngOnChanges(changes) {
|
|
384
|
-
let recreate = false;
|
|
385
379
|
if (changes['shapes'] || changes['connections'] || changes['shapeModelFields'] || changes['connectionModelFields']) {
|
|
386
380
|
this.convertUserData();
|
|
387
|
-
this.options
|
|
388
|
-
|
|
389
|
-
|
|
381
|
+
this.options = {
|
|
382
|
+
...this.options,
|
|
383
|
+
shapes: this.convertedShapes,
|
|
384
|
+
connections: this.convertedConnections
|
|
385
|
+
};
|
|
386
|
+
this.loadOptions(this.options);
|
|
390
387
|
}
|
|
391
388
|
if (changes['connectionDefaults']) {
|
|
392
389
|
this.options.connectionDefaults = { ...this.options.connectionDefaults, ...this.connectionDefaults };
|
|
393
|
-
|
|
390
|
+
this.loadOptions(this.options);
|
|
394
391
|
}
|
|
395
392
|
if (changes['shapeDefaults']) {
|
|
396
393
|
this.options.shapeDefaults = { ...this.options.shapeDefaults, ...this.shapeDefaults };
|
|
397
|
-
|
|
394
|
+
this.loadOptions(this.options);
|
|
398
395
|
}
|
|
399
|
-
if (changes['editable']
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
else {
|
|
406
|
-
this.options.editable = { drag: false, resize: false, remove: false };
|
|
407
|
-
this.options.shapeDefaults.editable = { drag: false, remove: false };
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
if (typeof this.editable === 'object') {
|
|
411
|
-
this.options.editable = {
|
|
412
|
-
drag: this.editable.drag,
|
|
413
|
-
resize: this.editable.resize,
|
|
414
|
-
remove: this.editable.remove
|
|
415
|
-
};
|
|
416
|
-
this.options.shapeDefaults.editable = { drag: this.editable.drag, remove: this.editable.remove };
|
|
396
|
+
if (changes['editable']) {
|
|
397
|
+
this.options = { ...this.options, editable: this.editable };
|
|
398
|
+
if (this.diagramWidget) {
|
|
399
|
+
this.diagramWidget.destroy();
|
|
400
|
+
this.init();
|
|
401
|
+
this.bindDiagramEvents();
|
|
417
402
|
}
|
|
418
|
-
recreate = true;
|
|
419
403
|
}
|
|
420
404
|
if (changes['zoomMax']) {
|
|
421
405
|
this.updateOptions('zoomMax');
|
|
@@ -440,10 +424,6 @@ class DiagramComponent {
|
|
|
440
424
|
this.updateOptions('zoom');
|
|
441
425
|
this.diagramWidget?.zoom(this.diagramWidget.options.zoom);
|
|
442
426
|
}
|
|
443
|
-
if (recreate) {
|
|
444
|
-
this.init();
|
|
445
|
-
this.bindDiagramEvents();
|
|
446
|
-
}
|
|
447
427
|
}
|
|
448
428
|
ngAfterViewInit() {
|
|
449
429
|
this.convertUserData();
|
|
@@ -740,8 +720,8 @@ class DiagramComponent {
|
|
|
740
720
|
const isConnection = event.item.name === "Connection";
|
|
741
721
|
this.setCustomTemplate(isShape, isConnection);
|
|
742
722
|
const defaultsEnabled = isShape
|
|
743
|
-
? this.options.shapeDefaults
|
|
744
|
-
: this.options.connectionDefaults
|
|
723
|
+
? this.options.shapeDefaults?.tooltip?.visible
|
|
724
|
+
: this.options.connectionDefaults?.tooltip?.visible;
|
|
745
725
|
const itemTooltipEnabled = dataItem.tooltip?.visible;
|
|
746
726
|
const optionsArray = isShape ? this.options.shapes : this.options.connections;
|
|
747
727
|
const optionsItem = optionsArray?.find((item) => item.id === event.item.id);
|
|
@@ -927,9 +907,6 @@ class DiagramComponent {
|
|
|
927
907
|
if (!isDocumentAvailable()) {
|
|
928
908
|
return;
|
|
929
909
|
}
|
|
930
|
-
if (this.diagramWidget) {
|
|
931
|
-
this.diagramWidget.destroy();
|
|
932
|
-
}
|
|
933
910
|
this.zone.runOutsideAngular(() => {
|
|
934
911
|
const theme = loadTheme(this.wrapperElement.nativeElement);
|
|
935
912
|
this.diagramWidget = new Diagram(this.wrapperElement.nativeElement, this.options, theme);
|
|
@@ -942,8 +919,19 @@ class DiagramComponent {
|
|
|
942
919
|
this.options[prop] = this[prop];
|
|
943
920
|
this.diagramWidget?.setOptions(this.options);
|
|
944
921
|
}
|
|
922
|
+
loadOptions(options) {
|
|
923
|
+
this.diagramWidget?.load(options);
|
|
924
|
+
this.diagramWidget?.layout(options);
|
|
925
|
+
}
|
|
926
|
+
getNormalizedNavigationOptions() {
|
|
927
|
+
return {
|
|
928
|
+
disabled: !this._navigable.enabled,
|
|
929
|
+
smallStep: this._navigable.smallStep,
|
|
930
|
+
largeStep: this._navigable.largeStep
|
|
931
|
+
};
|
|
932
|
+
}
|
|
945
933
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DiagramComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.PopupService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
946
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
|
|
934
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DiagramComponent, isStandalone: true, selector: "kendo-diagram", inputs: { connectionDefaults: "connectionDefaults", connections: "connections", connectionModelFields: "connectionModelFields", editable: "editable", layout: "layout", pannable: "pannable", selectable: "selectable", shapeDefaults: "shapeDefaults", shapes: "shapes", shapeModelFields: "shapeModelFields", zoom: "zoom", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomRate: "zoomRate", navigable: "navigable" }, outputs: { change: "change", diagramClick: "diagramClick", drag: "drag", dragEnd: "dragEnd", dragStart: "dragStart", shapeBoundsChange: "shapeBoundsChange", mouseEnter: "mouseEnter", mouseLeave: "mouseLeave", onPan: "pan", onSelect: "select", zoomEnd: "zoomEnd", zoomStart: "zoomStart", tooltipShow: "tooltipShow", tooltipHide: "tooltipHide" }, host: { properties: { "class.k-diagram": "this.diagramClass" } }, providers: [PopupService], queries: [{ propertyName: "shapeTooltipTemplate", first: true, predicate: ShapeTooltipTemplateDirective, descendants: true }, { propertyName: "connectionTooltipTemplate", first: true, predicate: ConnectionTooltipTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "defaultTooltipTemplate", first: true, predicate: ["defaultTemplate"], descendants: true }, { propertyName: "customTooltipTemplate", first: true, predicate: ["customTooltipTemplate"], descendants: true }], exportAs: ["kendoDiagram"], usesOnChanges: true, ngImport: i0, template: `
|
|
947
935
|
@if (showLicenseWatermark) {
|
|
948
936
|
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
949
937
|
}
|
|
@@ -1010,6 +998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1010
998
|
type: Input
|
|
1011
999
|
}], zoomRate: [{
|
|
1012
1000
|
type: Input
|
|
1001
|
+
}], navigable: [{
|
|
1002
|
+
type: Input
|
|
1013
1003
|
}], change: [{
|
|
1014
1004
|
type: Output
|
|
1015
1005
|
}], diagramClick: [{
|
package/models.d.ts
CHANGED
|
@@ -2,7 +2,16 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { ShapeDefaultsBase, ConnectionDefaultsBase, ConnectionOptionsBase, ShapeOptionsBase } from '@progress/kendo-diagram-common';
|
|
5
|
+
import { ShapeDefaultsBase, ConnectionDefaultsBase, ConnectionOptionsBase, ShapeOptionsBase, NavigationOptions } from '@progress/kendo-diagram-common';
|
|
6
|
+
/**
|
|
7
|
+
* Defines the navigation configuration options for the `Diagram`.
|
|
8
|
+
*/
|
|
9
|
+
export interface DiagramNavigationOptions extends Pick<NavigationOptions, 'smallStep' | 'largeStep'> {
|
|
10
|
+
/**
|
|
11
|
+
* Controls whether navigation is enabled.
|
|
12
|
+
*/
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
}
|
|
6
15
|
/**
|
|
7
16
|
* Defines the tooltip configuration for shapes and connections.
|
|
8
17
|
* Controls the visibility, content, and styling of tooltips.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-diagrams",
|
|
3
|
-
"version": "21.3.0-develop.
|
|
3
|
+
"version": "21.3.0-develop.10",
|
|
4
4
|
"description": "Kendo UI Angular diagrams component",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"package": {
|
|
20
20
|
"productName": "Kendo UI for Angular",
|
|
21
21
|
"productCode": "KENDOUIANGULAR",
|
|
22
|
-
"publishDate":
|
|
22
|
+
"publishDate": 1765273255,
|
|
23
23
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"
|
|
24
24
|
}
|
|
25
25
|
},
|
|
@@ -29,19 +29,19 @@
|
|
|
29
29
|
"@angular/core": "18 - 21",
|
|
30
30
|
"@angular/platform-browser": "18 - 21",
|
|
31
31
|
"@progress/kendo-licensing": "^1.7.0",
|
|
32
|
-
"@progress/kendo-angular-common": "21.3.0-develop.
|
|
33
|
-
"@progress/kendo-angular-buttons": "21.3.0-develop.
|
|
34
|
-
"@progress/kendo-angular-dialog": "21.3.0-develop.
|
|
35
|
-
"@progress/kendo-angular-dropdowns": "21.3.0-develop.
|
|
36
|
-
"@progress/kendo-angular-icons": "21.3.0-develop.
|
|
37
|
-
"@progress/kendo-angular-inputs": "21.3.0-develop.
|
|
38
|
-
"@progress/kendo-angular-popup": "21.3.0-develop.
|
|
32
|
+
"@progress/kendo-angular-common": "21.3.0-develop.10",
|
|
33
|
+
"@progress/kendo-angular-buttons": "21.3.0-develop.10",
|
|
34
|
+
"@progress/kendo-angular-dialog": "21.3.0-develop.10",
|
|
35
|
+
"@progress/kendo-angular-dropdowns": "21.3.0-develop.10",
|
|
36
|
+
"@progress/kendo-angular-icons": "21.3.0-develop.10",
|
|
37
|
+
"@progress/kendo-angular-inputs": "21.3.0-develop.10",
|
|
38
|
+
"@progress/kendo-angular-popup": "21.3.0-develop.10",
|
|
39
39
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@progress/kendo-diagram-common": "2.
|
|
42
|
+
"@progress/kendo-diagram-common": "2.1.0",
|
|
43
43
|
"tslib": "^2.3.1",
|
|
44
|
-
"@progress/kendo-angular-schematics": "21.3.0-develop.
|
|
44
|
+
"@progress/kendo-angular-schematics": "21.3.0-develop.10"
|
|
45
45
|
},
|
|
46
46
|
"schematics": "./schematics/collection.json",
|
|
47
47
|
"module": "fesm2022/progress-kendo-angular-diagrams.mjs",
|
package/utils.d.ts
CHANGED
|
@@ -2,13 +2,6 @@
|
|
|
2
2
|
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import {
|
|
6
|
-
import { ConnectionDefaults, ShapeDefaults } from "./models";
|
|
5
|
+
import { DiagramNavigationOptions } from "./models";
|
|
7
6
|
/** @hidden */
|
|
8
|
-
export declare const
|
|
9
|
-
/** @hidden */
|
|
10
|
-
export declare const DEFAULT_EDITABLE_CONNECTION: EditableDefaults;
|
|
11
|
-
/** @hidden */
|
|
12
|
-
export declare const CONNECTION_DEFAULTS: ConnectionDefaults;
|
|
13
|
-
/** @hidden */
|
|
14
|
-
export declare const SHAPE_DEFAULTS: ShapeDefaults;
|
|
7
|
+
export declare const DEFAULT_NAVIGABLE_OPTIONS: DiagramNavigationOptions;
|