@metadev/daga 4.2.10 → 4.2.12

package/Changelog.md

@@ -6,6 +6,18 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.2.12
+
+- Force location of field `<foreignObject>` tags in webkit browsers [#356](https://github.com/metadevpro/daga/pull/356)
+- Use `<g>` instead of `<foreignObject>` for containers of diagram decorators and objects [#357](https://github.com/metadevpro/daga/pull/357)
+
+## v. 4.2.11
+
+- Version branch to avoid error in ng-packagr
+- 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)

package/index.cjs.js

@@ -231,7 +231,7 @@ const distanceBetweenPoints = (point1, point2) => {
   return Math.pow(Math.pow(point1[0] - point2[0], 2) + Math.pow(point1[1] - point2[1], 2), 0.5);
 };
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.
@@ -2529,18 +2529,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 +2567,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 +6301,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 +7163,6 @@ class DiagramUserSelection extends DiagramElementSet {
     this.canvas.propertyEditorChanges$.pipe(rxjs.debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7399,6 +7414,9 @@ const unrotate = (width, height, orientation) => {
   return [oldWidth, oldHeight];
 };
 
+var _a;
+const isWebkit = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.indexOf('AppleWebKit')) >= 0;
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7696,7 +7714,12 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3__namespace.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
+      if (isWebkit) {
+        // force update fields to compensate for a rendering bug in webkit
+        this.updateFieldsInView();
+      }
       this.contextMenu.close();
+      this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(exports.ZoomEvents.End, () => {
       setCursorStyle();
     }));
@@ -8357,7 +8380,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()
@@ -8653,11 +8676,15 @@ class DiagramCanvas {
       this.secondaryButton = false;
     })).append('xhtml:div').style('width', '100%').style('height', '100%').style('display', 'flex').append('xhtml:p').style('box-sizing', 'border-box').style('outline', 0).style('margin', 0).style('border', 0).style('padding', 0).style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
     mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'center' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === exports.VerticalAlign.Center ? 'center' : d.verticalAlign === exports.VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[0]}px`).style('max-height', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[1]}px`).style('overflow', d => d.fit ? 'default' : 'clip').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'center' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'end' : 'start').style('transform', d => `rotate(${d.orientation}deg)`).style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
+    if (isWebkit) {
+      const zoomFactor = this.zoomTransform.k;
+      mergeSelection.attr('width', d => `${d.width * zoomFactor}px`).attr('height', d => `${d.height * zoomFactor}px`).select('div').style('position', 'absolute').style('left', d => `${d.coords[0] * zoomFactor + this.zoomTransform.x}px`).style('top', d => `${d.coords[1] * zoomFactor + this.zoomTransform.y}px`).select('p').style('font-size', d => `${d.fontSize * zoomFactor}px`);
+    }
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-object');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -8698,9 +8725,9 @@ class DiagramCanvas {
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-decorator');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -9107,13 +9134,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 +10352,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

@@ -210,7 +210,7 @@ const distanceBetweenPoints = (point1, point2) => {
   return Math.pow(Math.pow(point1[0] - point2[0], 2) + Math.pow(point1[1] - point2[1], 2), 0.5);
 };
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.
@@ -2508,18 +2508,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 +2546,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 +6280,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 +7142,6 @@ class DiagramUserSelection extends DiagramElementSet {
     this.canvas.propertyEditorChanges$.pipe(debounceTime(2000)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
-    console.log(diagramPropertiesText);
     this.diagramPropertiesText = diagramPropertiesText !== undefined ? diagramPropertiesText : DIAGRAM_PROPERTIES_DEFAULT_TEXT;
   }
   add(element) {
@@ -7378,6 +7393,9 @@ const unrotate = (width, height, orientation) => {
   return [oldWidth, oldHeight];
 };
 
+var _a;
+const isWebkit = ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.indexOf('AppleWebKit')) >= 0;
+
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7675,7 +7693,12 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
+      if (isWebkit) {
+        // force update fields to compensate for a rendering bug in webkit
+        this.updateFieldsInView();
+      }
       this.contextMenu.close();
+      this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(ZoomEvents.End, () => {
       setCursorStyle();
     }));
@@ -8336,7 +8359,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()
@@ -8632,11 +8655,15 @@ class DiagramCanvas {
       this.secondaryButton = false;
     })).append('xhtml:div').style('width', '100%').style('height', '100%').style('display', 'flex').append('xhtml:p').style('box-sizing', 'border-box').style('outline', 0).style('margin', 0).style('border', 0).style('padding', 0).style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
     mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === VerticalAlign.Center ? 'center' : d.verticalAlign === VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[0]}px`).style('max-height', d => d.fit ? 'default' : `${unrotate(d.width, d.height, d.orientation)[1]}px`).style('overflow', d => d.fit ? 'default' : 'clip').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').style('transform', d => `rotate(${d.orientation}deg)`).style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
+    if (isWebkit) {
+      const zoomFactor = this.zoomTransform.k;
+      mergeSelection.attr('width', d => `${d.width * zoomFactor}px`).attr('height', d => `${d.height * zoomFactor}px`).select('div').style('position', 'absolute').style('left', d => `${d.coords[0] * zoomFactor + this.zoomTransform.x}px`).style('top', d => `${d.coords[1] * zoomFactor + this.zoomTransform.y}px`).select('p').style('font-size', d => `${d.fontSize * zoomFactor}px`);
+    }
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-object');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -8677,9 +8704,9 @@ class DiagramCanvas {
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-decorator');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -9086,13 +9113,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 +10289,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": "4.2.12",
   "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/browser-util.d.ts

@@ -0,0 +1 @@
+export declare const isWebkit: boolean;

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

@@ -144,7 +144,7 @@ export declare const linesOverlap: (line1: Line, line2: Line) => boolean;
  */
 export declare const lineIntersectsRectangle: (line: Line, rectangle: Rectangle) => boolean;
 /**
- * Checks whether the two given reactangles share at least one point.
+ * Checks whether the two given rectangles share at least one point.
  * @public
  * @param rectangle1 A rectangle.
  * @param rectangle2 A rectangle.