@metadev/daga 4.2.10 → 5.0.0

package/Changelog.md

@@ -4,7 +4,14 @@ List of releases and changes.
 
 ![Daga logo](https://metadev.pro/icons/daga-logo-header.svg)
 
-## Next release Joyeuse
+## Next release Durendal
+
+## 5.0.0 Joyeuse
+
+- Support for Angular 21 [#346](https://github.com/metadevpro/daga/pull/346)
+- Ensure that an array remains an array after cloning [#349](https://github.com/metadevpro/daga/pull/349)
+- When checking if a port is being shared, ignore connections that have been removed [#350](https://github.com/metadevpro/daga/pull/350)
+- Create `DiagramZoomEvent` to enable listening to user zooming and panning events [#351](https://github.com/metadevpro/daga/pull/351)
 
 ## v. 4.2.10
 
@@ -161,7 +168,7 @@ Date: _2025-01-21_
 - Add node continence [#200](https://github.com/metadevpro/daga/pull/200)
 - Enable defining custom shape functions for nodes in the configuration [#206](https://github.com/metadevpro/daga/pull/206)
 - Fix order of diagram elements [#208](https://github.com/metadevpro/daga/pull/208)
-- Simplify usage of `<daga-diagram>` tag in angular by removing the need to include a `<daga-diagram-editor>` inside [#210](https://github.com/metadevpro/daga/pull/210)
+- Simplify usage of `<daga-diagram>` tag in Angular by removing the need to include a `<daga-diagram-editor>` inside [#210](https://github.com/metadevpro/daga/pull/210)
 - Distinguish between diagram actions (which affect the model) and diagram events (which don't affect the model) [#210](https://github.com/metadevpro/daga/pull/210)
 - Add layout action so layouts applied by the user can be undone and redone (which don't affect the model) [#210](https://github.com/metadevpro/daga/pull/210)
 - Add diagram events for the selection and highlight of diagram elements [#212](https://github.com/metadevpro/daga/pull/212) [#214](https://github.com/metadevpro/daga/pull/214)

package/index.cjs.js

@@ -1194,13 +1194,17 @@ const clone = o => {
   if (typeof o !== 'object') {
     return o;
   }
+  if (Array.isArray(o)) {
+    return o.map(clone);
+  }
   const res = {};
   for (const e of Object.entries(o)) {
-    if (typeof e[1] === 'object') {
-      res[e[0]] = clone(e[1]);
-    } else {
-      res[e[0]] = e[1];
-    }
+    res[e[0]] = clone(e[1]);
+    // if (typeof e[1] === 'object') {
+    //   res[e[0]] = clone(e[1]);
+    // } else {
+    //   res[e[0]] = e[1];
+    // }
   }
   return res;
 };
@@ -2529,18 +2533,18 @@ class DiagramConnection extends DiagramElement {
           // alternative start port not valid, it doesn't allow outgoing connections
           continue checkAlternativeStartPorts;
         }
-        if (!allowSharingPorts && (alternativeStartPort.incomingConnections.length === 1 && alternativeStartPort.incomingConnections[0] !== this || alternativeStartPort.incomingConnections.length > 1 || alternativeStartPort.outgoingConnections.length === 1 && alternativeStartPort.outgoingConnections[0] !== this || alternativeStartPort.outgoingConnections.length > 1)) {
+        if (!allowSharingPorts && (alternativeStartPort.incomingConnections.filter(c => !c.removed && c !== this).length > 0 || alternativeStartPort.outgoingConnections.filter(c => !c.removed && c !== this).length > 0)) {
           // alternative start port not valid, it already has other connections
           continue checkAlternativeStartPorts;
         }
         if (!allowSharingBothPorts) {
-          for (const connection of alternativeStartPort.outgoingConnections) {
+          for (const connection of alternativeStartPort.outgoingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.end === this.end) {
               // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
               continue checkAlternativeStartPorts;
             }
           }
-          for (const connection of alternativeStartPort.incomingConnections) {
+          for (const connection of alternativeStartPort.incomingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.start === this.end) {
               // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
               continue checkAlternativeStartPorts;
@@ -2567,18 +2571,18 @@ class DiagramConnection extends DiagramElement {
           // alternative end port not valid, it doesn't allow incoming connections
           continue checkAlternativeEndPorts;
         }
-        if (!allowSharingPorts && (alternativeEndPort.outgoingConnections.length === 1 && alternativeEndPort.outgoingConnections[0] !== this || alternativeEndPort.outgoingConnections.length > 1 || alternativeEndPort.incomingConnections.length === 1 && alternativeEndPort.incomingConnections[0] !== this || alternativeEndPort.incomingConnections.length > 1)) {
+        if (!allowSharingPorts && (alternativeEndPort.incomingConnections.filter(c => !c.removed && c !== this).length > 0 || alternativeEndPort.outgoingConnections.filter(c => !c.removed && c !== this).length > 0)) {
           // alternative end port not valid, it already has other connections
           continue checkAlternativeEndPorts;
         }
         if (!allowSharingBothPorts) {
-          for (const connection of alternativeEndPort.incomingConnections) {
+          for (const connection of alternativeEndPort.incomingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.start === this.start) {
               // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
               continue checkAlternativeEndPorts;
             }
           }
-          for (const connection of alternativeEndPort.outgoingConnections) {
+          for (const connection of alternativeEndPort.outgoingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.end === this.start) {
               // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
               continue checkAlternativeEndPorts;
@@ -6301,11 +6305,27 @@ class DiagramEvent {
  */
 exports.DiagramEvents = void 0;
 (function (DiagramEvents) {
-  DiagramEvents[DiagramEvents["DoubleClick"] = 0] = "DoubleClick";
-  DiagramEvents[DiagramEvents["SecondaryClick"] = 1] = "SecondaryClick";
-  DiagramEvents[DiagramEvents["Selection"] = 2] = "Selection";
-  DiagramEvents[DiagramEvents["Highlight"] = 3] = "Highlight";
+  DiagramEvents[DiagramEvents["Zoom"] = 0] = "Zoom";
+  DiagramEvents[DiagramEvents["DoubleClick"] = 1] = "DoubleClick";
+  DiagramEvents[DiagramEvents["SecondaryClick"] = 2] = "SecondaryClick";
+  DiagramEvents[DiagramEvents["Selection"] = 3] = "Selection";
+  DiagramEvents[DiagramEvents["Highlight"] = 4] = "Highlight";
 })(exports.DiagramEvents || (exports.DiagramEvents = {}));
+/**
+ * Diagram event which consists of the user zooming or panning.
+ */
+class DiagramZoomEvent extends DiagramEvent {
+  /**
+   * Create a diagram zoom event.
+   *
+   * @param coords .
+   */
+  constructor(coords, zoom) {
+    super(exports.DiagramEvents.Zoom);
+    this.coords = coords;
+    this.zoom = zoom;
+  }
+}
 /**
  * Diagram event which consists of the user performing a double click on the diagram.
  */
@@ -7147,7 +7167,7 @@ class DiagramUserSelection extends DiagramElementSet {
     this.canvas.propertyEditorChanges$.pipe(rxjs.debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    console.log(diagramPropertiesText);
+    //console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7697,6 +7717,7 @@ class DiagramCanvas {
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3__namespace.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
       this.contextMenu.close();
+      this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(exports.ZoomEvents.End, () => {
       setCursorStyle();
     }));
@@ -8357,7 +8378,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.length === 0 && d.outgoingConnections.length === 0) && !d.removed) {
+        if (this.canUserPerformAction(exports.DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.filter(c => !c.removed).length === 0 && d.outgoingConnections.filter(c => !c.removed).length === 0) && !d.removed) {
           setCursorStyle(exports.CursorStyle.Grabbing);
           this.startConnection(d);
           // should be true after having called this.startConnection()
@@ -8583,7 +8604,8 @@ class DiagramCanvas {
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(exports.DiagramActions.EditField) && d.editable && !d.removed) {
         this.currentAction = new EditFieldAction(this, d.id, d.text, '');
-        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, _text => {
+        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, () => {
+          // (_text)
           /*
           Empty for now
           We should create a better function to stretch the root element as the text expands
@@ -9107,13 +9129,13 @@ class DiagramCanvas {
         this.dropConnection();
         return;
       }
-      if (!this.allowSharingPorts && (port.incomingConnections.length > 0 || port.outgoingConnections.length > 0)) {
+      if (!this.allowSharingPorts && (port.incomingConnections.filter(c => !c.removed).length > 0 || port.outgoingConnections.filter(c => !c.removed).length > 0)) {
         this.dropConnection();
         return;
       }
       if (!this.allowSharingBothPorts && this.model.connections.find(c => {
         var _a, _b;
-        return c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port;
+        return !c.removed && (c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port);
       }) !== undefined) {
         this.dropConnection();
         return;
@@ -10325,6 +10347,7 @@ exports.DiagramSectionSet = DiagramSectionSet;
 exports.DiagramSelectionEvent = DiagramSelectionEvent;
 exports.DiagramUserHighlight = DiagramUserHighlight;
 exports.DiagramUserSelection = DiagramUserSelection;
+exports.DiagramZoomEvent = DiagramZoomEvent;
 exports.EditFieldAction = EditFieldAction;
 exports.ForceLayout = ForceLayout;
 exports.HorizontalLayout = HorizontalLayout;

package/index.esm.js

@@ -1173,13 +1173,17 @@ const clone = o => {
   if (typeof o !== 'object') {
     return o;
   }
+  if (Array.isArray(o)) {
+    return o.map(clone);
+  }
   const res = {};
   for (const e of Object.entries(o)) {
-    if (typeof e[1] === 'object') {
-      res[e[0]] = clone(e[1]);
-    } else {
-      res[e[0]] = e[1];
-    }
+    res[e[0]] = clone(e[1]);
+    // if (typeof e[1] === 'object') {
+    //   res[e[0]] = clone(e[1]);
+    // } else {
+    //   res[e[0]] = e[1];
+    // }
   }
   return res;
 };
@@ -2508,18 +2512,18 @@ class DiagramConnection extends DiagramElement {
           // alternative start port not valid, it doesn't allow outgoing connections
           continue checkAlternativeStartPorts;
         }
-        if (!allowSharingPorts && (alternativeStartPort.incomingConnections.length === 1 && alternativeStartPort.incomingConnections[0] !== this || alternativeStartPort.incomingConnections.length > 1 || alternativeStartPort.outgoingConnections.length === 1 && alternativeStartPort.outgoingConnections[0] !== this || alternativeStartPort.outgoingConnections.length > 1)) {
+        if (!allowSharingPorts && (alternativeStartPort.incomingConnections.filter(c => !c.removed && c !== this).length > 0 || alternativeStartPort.outgoingConnections.filter(c => !c.removed && c !== this).length > 0)) {
           // alternative start port not valid, it already has other connections
           continue checkAlternativeStartPorts;
         }
         if (!allowSharingBothPorts) {
-          for (const connection of alternativeStartPort.outgoingConnections) {
+          for (const connection of alternativeStartPort.outgoingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.end === this.end) {
               // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
               continue checkAlternativeStartPorts;
             }
           }
-          for (const connection of alternativeStartPort.incomingConnections) {
+          for (const connection of alternativeStartPort.incomingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.start === this.end) {
               // alternative start port not valid, there is a connection whose start and end matches the alternative start port and this connection's end
               continue checkAlternativeStartPorts;
@@ -2546,18 +2550,18 @@ class DiagramConnection extends DiagramElement {
           // alternative end port not valid, it doesn't allow incoming connections
           continue checkAlternativeEndPorts;
         }
-        if (!allowSharingPorts && (alternativeEndPort.outgoingConnections.length === 1 && alternativeEndPort.outgoingConnections[0] !== this || alternativeEndPort.outgoingConnections.length > 1 || alternativeEndPort.incomingConnections.length === 1 && alternativeEndPort.incomingConnections[0] !== this || alternativeEndPort.incomingConnections.length > 1)) {
+        if (!allowSharingPorts && (alternativeEndPort.incomingConnections.filter(c => !c.removed && c !== this).length > 0 || alternativeEndPort.outgoingConnections.filter(c => !c.removed && c !== this).length > 0)) {
           // alternative end port not valid, it already has other connections
           continue checkAlternativeEndPorts;
         }
         if (!allowSharingBothPorts) {
-          for (const connection of alternativeEndPort.incomingConnections) {
+          for (const connection of alternativeEndPort.incomingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.start === this.start) {
               // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
               continue checkAlternativeEndPorts;
             }
           }
-          for (const connection of alternativeEndPort.outgoingConnections) {
+          for (const connection of alternativeEndPort.outgoingConnections.filter(c => !c.removed)) {
             if (connection !== this && connection.end === this.start) {
               // alternative end port not valid, there is a connection whose start and end matches the alternative end port and this connection's start
               continue checkAlternativeEndPorts;
@@ -6280,11 +6284,27 @@ class DiagramEvent {
  */
 var DiagramEvents;
 (function (DiagramEvents) {
-  DiagramEvents[DiagramEvents["DoubleClick"] = 0] = "DoubleClick";
-  DiagramEvents[DiagramEvents["SecondaryClick"] = 1] = "SecondaryClick";
-  DiagramEvents[DiagramEvents["Selection"] = 2] = "Selection";
-  DiagramEvents[DiagramEvents["Highlight"] = 3] = "Highlight";
+  DiagramEvents[DiagramEvents["Zoom"] = 0] = "Zoom";
+  DiagramEvents[DiagramEvents["DoubleClick"] = 1] = "DoubleClick";
+  DiagramEvents[DiagramEvents["SecondaryClick"] = 2] = "SecondaryClick";
+  DiagramEvents[DiagramEvents["Selection"] = 3] = "Selection";
+  DiagramEvents[DiagramEvents["Highlight"] = 4] = "Highlight";
 })(DiagramEvents || (DiagramEvents = {}));
+/**
+ * Diagram event which consists of the user zooming or panning.
+ */
+class DiagramZoomEvent extends DiagramEvent {
+  /**
+   * Create a diagram zoom event.
+   *
+   * @param coords .
+   */
+  constructor(coords, zoom) {
+    super(DiagramEvents.Zoom);
+    this.coords = coords;
+    this.zoom = zoom;
+  }
+}
 /**
  * Diagram event which consists of the user performing a double click on the diagram.
  */
@@ -7126,7 +7146,7 @@ class DiagramUserSelection extends DiagramElementSet {
     this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    console.log(diagramPropertiesText);
+    //console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7676,6 +7696,7 @@ class DiagramCanvas {
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
       this.contextMenu.close();
+      this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(ZoomEvents.End, () => {
       setCursorStyle();
     }));
@@ -8336,7 +8357,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        if (this.canUserPerformAction(DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.length === 0 && d.outgoingConnections.length === 0) && !d.removed) {
+        if (this.canUserPerformAction(DiagramActions.AddConnection) && (this.allowSharingPorts || d.incomingConnections.filter(c => !c.removed).length === 0 && d.outgoingConnections.filter(c => !c.removed).length === 0) && !d.removed) {
           setCursorStyle(CursorStyle.Grabbing);
           this.startConnection(d);
           // should be true after having called this.startConnection()
@@ -8562,7 +8583,8 @@ class DiagramCanvas {
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.EditField) && d.editable && !d.removed) {
         this.currentAction = new EditFieldAction(this, d.id, d.text, '');
-        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, _text => {
+        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, () => {
+          // (_text)
           /*
           Empty for now
           We should create a better function to stretch the root element as the text expands
@@ -9086,13 +9108,13 @@ class DiagramCanvas {
         this.dropConnection();
         return;
       }
-      if (!this.allowSharingPorts && (port.incomingConnections.length > 0 || port.outgoingConnections.length > 0)) {
+      if (!this.allowSharingPorts && (port.incomingConnections.filter(c => !c.removed).length > 0 || port.outgoingConnections.filter(c => !c.removed).length > 0)) {
         this.dropConnection();
         return;
       }
       if (!this.allowSharingBothPorts && this.model.connections.find(c => {
         var _a, _b;
-        return c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port;
+        return !c.removed && (c.start === ((_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) && c.end === port || c.end === ((_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.start) && c.start === port);
       }) !== undefined) {
         this.dropConnection();
         return;
@@ -10262,4 +10284,4 @@ const getLocationsOfNodes = model => {
   return locations;
 };
 
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramHighlightedEvent, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramPortType, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramSelectionEvent, DiagramUserHighlight, DiagramUserSelection, DiagramZoomEvent, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.10",
+  "version": "5.0.0",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",
     "rxjs": "~7.8.1",
-    "uuid": "^11.0.3"
+    "uuid": "^13.0.0"
   },
   "main": "./index.cjs.js",
   "typings": "./src/index.d.ts",

package/src/index.d.ts

@@ -18,7 +18,7 @@ export type { DiagramModelExporter } from './lib/diagram/converters/diagram-mode
 export type { DiagramModelImporter } from './lib/diagram/converters/diagram-model-importer';
 export { ActionStack, AddConnectionAction, AddNodeAction, ApplyLayoutAction, DiagramActionMethod, DiagramActions, EditFieldAction, MoveAction, PasteAction, RemoveAction, SetGeometryAction, SetParentAction, UpdateValuesAction } from './lib/diagram/diagram-action';
 export type { DiagramAction } from './lib/diagram/diagram-action';
-export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent } from './lib/diagram/diagram-event';
+export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramSecondaryClickEvent, DiagramSelectionEvent, DiagramZoomEvent } from './lib/diagram/diagram-event';
 export { AdjacencyLayout } from './lib/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram/layout/breadth-adjacency-layout';
 export { BreadthLayout } from './lib/diagram/layout/breadth-layout';

package/src/lib/diagram/diagram-event.d.ts

@@ -16,10 +16,24 @@ export declare abstract class DiagramEvent {
  * @public
  */
 export declare enum DiagramEvents {
-    DoubleClick = 0,
-    SecondaryClick = 1,
-    Selection = 2,
-    Highlight = 3
+    Zoom = 0,
+    DoubleClick = 1,
+    SecondaryClick = 2,
+    Selection = 3,
+    Highlight = 4
+}
+/**
+ * Diagram event which consists of the user zooming or panning.
+ */
+export declare class DiagramZoomEvent extends DiagramEvent {
+    coords: Point;
+    zoom: number;
+    /**
+     * Create a diagram zoom event.
+     *
+     * @param coords .
+     */
+    constructor(coords: Point, zoom: number);
 }
 /**
  * Diagram event which consists of the user performing a double click on the diagram.