@metadev/daga 4.2.9 → 5.0.0

package/Changelog.md

@@ -4,7 +4,18 @@ 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
+
+- Fix errors with cloned objects containing functions [#345](https://github.com/metadevpro/daga/pull/345)
 
 ## v. 4.2.9
 
@@ -157,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

@@ -1186,6 +1186,29 @@ const numberOfRows = s => {
   return ((_a = s.match(/\n/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
 };
 
+/**
+ * Clones an object with support for functions.
+ * @private
+ */
+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)) {
+    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;
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2050,7 +2073,7 @@ class ValueSet {
       if (property.type === exports.Type.Object) {
         this.valueSets[key] = this.constructSubValueSet(key);
       } else {
-        this.values[key] = structuredClone(property.defaultValue);
+        this.values[key] = clone(property.defaultValue);
       }
       if (rootAttribute !== undefined && rootAttribute !== null) {
         if (property.defaultValue !== undefined && !equals(this.getRootElementValue(rootAttribute), property.defaultValue)) {
@@ -2074,7 +2097,7 @@ class ValueSet {
     const property = this.propertySet.getProperty(key);
     const propertySet = new PropertySet(property.properties);
     const valueSet = new ValueSet(propertySet, this.rootElement);
-    valueSet.overwriteValues(structuredClone(property.defaultValue));
+    valueSet.overwriteValues(clone(property.defaultValue));
     return valueSet;
   }
   /**
@@ -2510,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;
@@ -2548,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;
@@ -5080,7 +5103,7 @@ class AddNodeCollabAction {
       node.label.text = this.label || '';
     }
     if (this.values !== undefined) {
-      node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
+      node.valueSet.setValues(clone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
     } else {
       node.valueSet.resetValues();
     }
@@ -6282,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.
  */
@@ -7128,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) {
@@ -7307,7 +7346,7 @@ class DiagramUserSelection extends DiagramElementSet {
     if (selectedValueSet) {
       this.propertyEditorSelection = selection;
       if (makeUpdateValuesAction) {
-        this.propertyEditorValues = structuredClone(selectedValueSet.getValues());
+        this.propertyEditorValues = clone(selectedValueSet.getValues());
       }
       if (propertyEditor) {
         if (selection instanceof DiagramNode || selection instanceof DiagramConnection) {
@@ -7351,7 +7390,7 @@ class DiagramUserSelection extends DiagramElementSet {
       return;
     }
     const from = this.propertyEditorValues;
-    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
+    const to = clone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
     const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === void 0 ? void 0 : _c.valueSet);
     const currentAction = new UpdateValuesAction(this.canvas, previousSelectionId, fromDiff, toDiff);
     currentAction.do();
@@ -7678,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();
     }));
@@ -8338,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()
@@ -8564,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
@@ -9088,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;
@@ -10306,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

@@ -1165,6 +1165,29 @@ const numberOfRows = s => {
   return ((_a = s.match(/\n/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
 };
 
+/**
+ * Clones an object with support for functions.
+ * @private
+ */
+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)) {
+    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;
+};
+
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -2029,7 +2052,7 @@ class ValueSet {
       if (property.type === Type.Object) {
         this.valueSets[key] = this.constructSubValueSet(key);
       } else {
-        this.values[key] = structuredClone(property.defaultValue);
+        this.values[key] = clone(property.defaultValue);
       }
       if (rootAttribute !== undefined && rootAttribute !== null) {
         if (property.defaultValue !== undefined && !equals(this.getRootElementValue(rootAttribute), property.defaultValue)) {
@@ -2053,7 +2076,7 @@ class ValueSet {
     const property = this.propertySet.getProperty(key);
     const propertySet = new PropertySet(property.properties);
     const valueSet = new ValueSet(propertySet, this.rootElement);
-    valueSet.overwriteValues(structuredClone(property.defaultValue));
+    valueSet.overwriteValues(clone(property.defaultValue));
     return valueSet;
   }
   /**
@@ -2489,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;
@@ -2527,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;
@@ -5059,7 +5082,7 @@ class AddNodeCollabAction {
       node.label.text = this.label || '';
     }
     if (this.values !== undefined) {
-      node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
+      node.valueSet.setValues(clone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
     } else {
       node.valueSet.resetValues();
     }
@@ -6261,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.
  */
@@ -7107,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) {
@@ -7286,7 +7325,7 @@ class DiagramUserSelection extends DiagramElementSet {
     if (selectedValueSet) {
       this.propertyEditorSelection = selection;
       if (makeUpdateValuesAction) {
-        this.propertyEditorValues = structuredClone(selectedValueSet.getValues());
+        this.propertyEditorValues = clone(selectedValueSet.getValues());
       }
       if (propertyEditor) {
         if (selection instanceof DiagramNode || selection instanceof DiagramConnection) {
@@ -7330,7 +7369,7 @@ class DiagramUserSelection extends DiagramElementSet {
       return;
     }
     const from = this.propertyEditorValues;
-    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
+    const to = clone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
     const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === void 0 ? void 0 : _c.valueSet);
     const currentAction = new UpdateValuesAction(this.canvas, previousSelectionId, fromDiff, toDiff);
     currentAction.do();
@@ -7657,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();
     }));
@@ -8317,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()
@@ -8543,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
@@ -9067,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;
@@ -10243,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.9",
+  "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.

package/src/lib/util/object-util.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clones an object with support for functions.
+ * @private
+ */
+export declare const clone: <T>(o: T) => T;

package/src/lib/util/test-util.d.ts

@@ -1,9 +1,4 @@
 import { DiagramConfig } from '../diagram/config/diagram-config';
-/**
- * Creates the structuredClone function if it doesn't exist.
- * @private
- */
-export declare const createStructuredClone: () => void;
 /**
  * Generic diagram configuration used for testing.
  * @private