@metadev/daga 4.2.16 → 4.2.18

package/Changelog.md

@@ -6,7 +6,13 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
-## v. 4.2.16
+## v. 4.2.18
+
+- Remove usage of `<foreignObject>` elements for diagram fields [#375](https://github.com/metadevpro/daga/pull/375)
+- Add a `DiagramDraggingNodeEvent` for when the user drags a node to enable listening to the active dragging of a node if unfinished [#376](https://github.com/metadevpro/daga/pull/376)
+- Add `multiline` property to label configuration to enable toggling whether a label should be multiline or not [#378](https://github.com/metadevpro/daga/pull/378)
+
+## v. 4.2.17
 
 - Fix bug where the `DagaImporter` fails to create a node's label if it's blank [#373](https://github.com/metadevpro/daga/pull/373)
 - Add `openTextInput` method to `Canvas` to enable opening a text box editor for a text via API [#374](https://github.com/metadevpro/daga/pull/374)

package/index.cjs.js

@@ -2701,6 +2701,7 @@ const DIAGRAM_FIELD_DEFAULTS = {
   horizontalAlign: exports.HorizontalAlign.Center,
   verticalAlign: exports.VerticalAlign.Center,
   orientation: exports.Side.Top,
+  multiline: false,
   fit: false,
   shrink: true
 };
@@ -2730,7 +2731,7 @@ class DiagramField extends DiagramElement {
       (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id, this.shrink);
     }
   }
-  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink) {
+  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
     const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
     if (model.fields.get(id) !== undefined) {
       throw new Error('DiagramField for rootElement already exists');
@@ -2771,6 +2772,7 @@ class DiagramField extends DiagramElement {
           this.orientation = 0;
       }
     }
+    this.multiline = multiline;
     this.defaultText = text;
     this._text = text;
     this.editable = editable;
@@ -2815,8 +2817,8 @@ class DiagramFieldSet extends DiagramElementSet {
    * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
    * @private
    */
-  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink);
+  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -3455,7 +3457,7 @@ class DiagramSectionSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
@@ -3463,7 +3465,7 @@ class DiagramSectionSet extends DiagramElementSet {
     const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[indexYInNode]) === null || _j === void 0 ? void 0 : _j[indexXInNode]) === null || _k === void 0 ? void 0 : _k.label;
     if (sectionLabel) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), sectionLabel);
-      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     return section;
   }
@@ -4383,14 +4385,14 @@ class DiagramNodeSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
     // add node label
     if (nodeType.label) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), nodeType.label);
-      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     // add node decorators
     if (nodeType.decorators.length > 0) {
@@ -4960,7 +4962,7 @@ class DagaImporter {
       // add node label
       if (newNodeType.label) {
         const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
-        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         newField.text = node.label;
         newNode.label = newField;
         model.fields.add(newField);
@@ -4980,7 +4982,7 @@ class DagaImporter {
         // add section label
         if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
-          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
           newField.text = section.label;
           newSection.label = newField;
           model.fields.add(newField);
@@ -5011,7 +5013,7 @@ class DagaImporter {
                 default:
                   labelCoords = newPort.coords;
               }
-              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
               newField.text = port.label;
               newPort.label = newField;
               model.fields.add(newField);
@@ -5058,7 +5060,7 @@ class DagaImporter {
               default:
                 labelCoords = newPort.coords;
             }
-            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
             newField.text = port.label;
             newPort.label = newField;
             model.fields.add(newField);
@@ -6355,6 +6357,7 @@ exports.DiagramEvents = void 0;
   DiagramEvents[DiagramEvents["SecondaryClick"] = 2] = "SecondaryClick";
   DiagramEvents[DiagramEvents["Selection"] = 3] = "Selection";
   DiagramEvents[DiagramEvents["Highlight"] = 4] = "Highlight";
+  DiagramEvents[DiagramEvents["DraggingNode"] = 5] = "DraggingNode";
 })(exports.DiagramEvents || (exports.DiagramEvents = {}));
 /**
  * Diagram event which consists of the user zooming or panning.
@@ -6438,6 +6441,20 @@ class DiagramHighlightedEvent extends DiagramEvent {
     this.target = target;
   }
 }
+/**
+ * Diagram event which consists of the user dragging a diagram node.
+ */
+class DiagramDraggingNodeEvent extends DiagramEvent {
+  /**
+   * Create a diagram dragging node event.
+   *
+   * @param target Diagram node which is targeted by the event.
+   */
+  constructor(target) {
+    super(exports.DiagramEvents.DraggingNode);
+    this.target = target;
+  }
+}
 
 /**
  * A foreign object which is inserted with arbitrary html into a diagram.
@@ -7471,29 +7488,6 @@ class DiagramUserSelection extends DiagramElementSet {
   }
 }
 
-const degreesToRadians = theta => theta * Math.PI / 180;
-/**
- * Calculates the original size of the a rectangle that has been rotated by the given number of degrees resulting in a bounding box of the given size.
- *
- * @param width The width of a bounding box.
- * @param height The height of a bounding box.
- * @param orientation A rotation in degrees.
- * @returns The size of the original rectangle.
- */
-const unrotate = (width, height, orientation) => {
-  // TODO: this method fails under certain edge cases
-  // like for example, when angle is 45 degrees so sin(theta) == cos(theta)
-  const theta = degreesToRadians(orientation);
-  const orientationSine = Math.sin(theta);
-  const orientationCosine = Math.cos(theta);
-  const oldWidth = (Math.abs(width * orientationCosine) - Math.abs(height * orientationSine)) / (orientationCosine * orientationCosine - orientationSine * orientationSine);
-  const oldHeight = (Math.abs(width * orientationSine) - Math.abs(height * orientationCosine)) / (orientationSine * orientationSine - orientationCosine * orientationCosine);
-  return [oldWidth, oldHeight];
-};
-
-const isUserAgentSafari = userAgent => /^((?!chrome|android).)*safari/i.test(userAgent);
-const isSafari = isUserAgentSafari(navigator.userAgent);
-
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7792,10 +7786,6 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3__namespace.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
-      if (isSafari) {
-        // 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, () => {
@@ -8042,7 +8032,7 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     initializeLook(enterSelection);
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
@@ -8078,7 +8068,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
@@ -8114,7 +8104,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
@@ -8150,7 +8140,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
@@ -8281,7 +8271,7 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     initializeLook(enterSelection);
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
@@ -8315,7 +8305,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
@@ -8349,7 +8339,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(exports.CursorStyle.EWResize);
       }
@@ -8383,7 +8373,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(exports.Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(exports.CursorStyle.NSResize);
       }
@@ -8664,28 +8654,28 @@ class DiagramCanvas {
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
       return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
+    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
       return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${(d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
+    .attr('pointer-events', 'stroke').attr('stroke-width', d => (d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);
     });
   }
   updateFieldsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-field').data(this.model.fields.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-field');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-field');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
-    enterSelection.style('box-sizing', 'border-box').on(exports.Events.MouseOver, (_event, d) => {
+    enterSelection.on(exports.Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
@@ -8776,12 +8766,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 (isSafari) {
-      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`);
-    }
+    }));
+    enterSelection.append('text');
+    enterSelection.append('rect');
+    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === exports.HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === exports.HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'middle' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === exports.VerticalAlign.Center ? d.height / 2 : d.verticalAlign === exports.VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === exports.VerticalAlign.Center ? 'middle' : d.verticalAlign === exports.VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.fontSize).attr('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.highlighted ? 600 : 400).attr('fill', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').each(d => {
+      this.setFieldTextAndWrap(d);
+    });
+    mergeSelection
+    // add a transparent rectangle to capture pointer events on the text
+    .select('rect').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('fill', 'transparent');
   }
   updateObjectsInView(...ids) {
     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);
@@ -8791,7 +8784,7 @@ class DiagramCanvas {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
     enterSelection.on(exports.Events.ContextMenu, (event, d) => {
       if (this.dragging) {
@@ -8834,7 +8827,7 @@ class DiagramCanvas {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
     enterSelection.on(exports.Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
@@ -9313,7 +9306,7 @@ class DiagramCanvas {
   openTextInput(id) {
     const field = this.model.fields.get(id);
     if (field) {
-      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, () => {
+      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, field.multiline, () => {
         // (_text)
         /*
             Empty for now
@@ -9331,7 +9324,7 @@ class DiagramCanvas {
       });
     }
   }
-  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, changeCallback, finishCallback) {
+  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, multiline, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();
     const inputFieldContainer = this.selectCanvasElements().append('foreignObject').attr('x', `${coords[0]}px`).attr('y', `${coords[1]}px`).attr('width', `${width}px`).attr('height', `${height}px`).style('box-sizing', 'border-box').style('border', '1px solid');
@@ -9341,16 +9334,16 @@ class DiagramCanvas {
     let inputFieldHeight;
     inputField.text(text).style('box-sizing', 'border-box').style('width', `${width}px`).style('height', `${height}px`).style('font-size', `${fontSize}px`).style('font-family', fontFamily).style('resize', 'none').style('outline', 0).style('border', 0).style('margin', 0).style('padding', 0).on(exports.Events.KeyDown, event => {
       event.stopPropagation();
-    }).on(exports.Events.KeyUp, event => {
-      event.stopPropagation();
-      if (event.key === exports.Keys.Escape) {
-        const value = inputField.property('value');
+      if (event.key === exports.Keys.Escape || event.key === exports.Keys.Enter && !multiline) {
+        const value = inputField.property('value') || '';
         this.removeInputField();
         if (finishCallback) {
           finishCallback(value);
         }
       }
-    }).on(exports.Events.Input, () => {
+    }).on(exports.Events.KeyUp, event => {
+      event.stopPropagation();
+    }).on(exports.Events.Input, event => {
       const value = inputField.property('value');
       inputField.attr('cols', numberOfColumns(value) + 1);
       inputField.attr('rows', numberOfRows(value) + 1);
@@ -9393,13 +9386,54 @@ class DiagramCanvas {
   }
   minimumSizeOfField(field) {
     var _a, _b;
-    const pNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('p')) === null || _b === void 0 ? void 0 : _b.node();
-    if (!pNode) {
+    const textNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text')) === null || _b === void 0 ? void 0 : _b.node();
+    if (!textNode) {
       // happens when a field has been created but not updated in view yet
       return [0, 0];
     }
-    const pBoundingBox = pNode.getBoundingClientRect();
-    return [pBoundingBox.width / this.zoomTransform.k, pBoundingBox.height / this.zoomTransform.k];
+    const textBoundingBox = textNode.getBoundingClientRect();
+    return [textBoundingBox.width / this.zoomTransform.k, textBoundingBox.height / this.zoomTransform.k];
+  }
+  setFieldTextAndWrap(field) {
+    var _a, _b, _c, _d;
+    const textSelection = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text');
+    const textNode = textSelection === null || textSelection === void 0 ? void 0 : textSelection.node();
+    if (textSelection && textNode) {
+      this.setFieldText(field, textSelection, field.text);
+    } else {
+      // can happen if a field has been created but not updated in view yet
+      // not sure if this still happens but should check just in case
+      return;
+    }
+    if (field.fit) {
+      // no need to wrap
+      return;
+    }
+    let minimumSize = this.minimumSizeOfField(field);
+    while (minimumSize[0] > field.width || minimumSize[1] > field.height) {
+      const textString = ((_d = (_c = (_b = textSelection === null || textSelection === void 0 ? void 0 : textSelection.html()) === null || _b === void 0 ? void 0 : _b.replace(/<\/tspan>/g, '\n')) === null || _c === void 0 ? void 0 : _c.replace(/<tspan[^>]*>/g, '')) === null || _d === void 0 ? void 0 : _d.slice(0, -1)) || '';
+      let newTextString = '...';
+      if (textString.endsWith('...')) {
+        newTextString = textString.slice(0, -4) + '...';
+      } else {
+        newTextString = textString.slice(0, -1) + '...';
+      }
+      if (textSelection) {
+        this.setFieldText(field, textSelection, newTextString);
+      }
+      if (newTextString === '...') {
+        // if no more characters can be removed and the new text is a bare ellipsis, stop the execution
+        return;
+      }
+      minimumSize = this.minimumSizeOfField(field);
+    }
+  }
+  setFieldText(field, textSelection, text) {
+    const lines = text.split('\n');
+    textSelection.html('');
+    for (let i = 0; i < lines.length; ++i) {
+      textSelection.append('tspan').attr('x', field.horizontalAlign === exports.HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === exports.HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === exports.VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * field.fontSize + field.height / 2 : field.verticalAlign === exports.VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * field.fontSize : i * field.fontSize).text(lines[i]);
+    }
   }
   /**
    * Method to call to start the moving of a node triggered by a user drag event.
@@ -9431,6 +9465,7 @@ class DiagramCanvas {
       }
       this.userHighlight.clear();
       this.dragging = true;
+      this.diagramEvent$.next(new DiagramDraggingNodeEvent(d));
     }
   }
   /**
@@ -10456,6 +10491,7 @@ exports.DiagramContextMenu = DiagramContextMenu;
 exports.DiagramDecorator = DiagramDecorator;
 exports.DiagramDecoratorSet = DiagramDecoratorSet;
 exports.DiagramDoubleClickEvent = DiagramDoubleClickEvent;
+exports.DiagramDraggingNodeEvent = DiagramDraggingNodeEvent;
 exports.DiagramElement = DiagramElement;
 exports.DiagramElementSet = DiagramElementSet;
 exports.DiagramEntitySet = DiagramEntitySet;

package/index.esm.js

@@ -2680,6 +2680,7 @@ const DIAGRAM_FIELD_DEFAULTS = {
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
   orientation: Side.Top,
+  multiline: false,
   fit: false,
   shrink: true
 };
@@ -2709,7 +2710,7 @@ class DiagramField extends DiagramElement {
       (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id, this.shrink);
     }
   }
-  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink) {
+  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
     const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
     if (model.fields.get(id) !== undefined) {
       throw new Error('DiagramField for rootElement already exists');
@@ -2750,6 +2751,7 @@ class DiagramField extends DiagramElement {
           this.orientation = 0;
       }
     }
+    this.multiline = multiline;
     this.defaultText = text;
     this._text = text;
     this.editable = editable;
@@ -2794,8 +2796,8 @@ class DiagramFieldSet extends DiagramElementSet {
    * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
    * @private
    */
-  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit, shrink);
+  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -3434,7 +3436,7 @@ class DiagramSectionSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
@@ -3442,7 +3444,7 @@ class DiagramSectionSet extends DiagramElementSet {
     const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[indexYInNode]) === null || _j === void 0 ? void 0 : _j[indexXInNode]) === null || _k === void 0 ? void 0 : _k.label;
     if (sectionLabel) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), sectionLabel);
-      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     return section;
   }
@@ -4362,14 +4364,14 @@ class DiagramNodeSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
     // add node label
     if (nodeType.label) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), nodeType.label);
-      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     // add node decorators
     if (nodeType.decorators.length > 0) {
@@ -4939,7 +4941,7 @@ class DagaImporter {
       // add node label
       if (newNodeType.label) {
         const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
-        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         newField.text = node.label;
         newNode.label = newField;
         model.fields.add(newField);
@@ -4959,7 +4961,7 @@ class DagaImporter {
         // add section label
         if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
-          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
           newField.text = section.label;
           newSection.label = newField;
           model.fields.add(newField);
@@ -4990,7 +4992,7 @@ class DagaImporter {
                 default:
                   labelCoords = newPort.coords;
               }
-              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
               newField.text = port.label;
               newPort.label = newField;
               model.fields.add(newField);
@@ -5037,7 +5039,7 @@ class DagaImporter {
               default:
                 labelCoords = newPort.coords;
             }
-            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
             newField.text = port.label;
             newPort.label = newField;
             model.fields.add(newField);
@@ -6334,6 +6336,7 @@ var DiagramEvents;
   DiagramEvents[DiagramEvents["SecondaryClick"] = 2] = "SecondaryClick";
   DiagramEvents[DiagramEvents["Selection"] = 3] = "Selection";
   DiagramEvents[DiagramEvents["Highlight"] = 4] = "Highlight";
+  DiagramEvents[DiagramEvents["DraggingNode"] = 5] = "DraggingNode";
 })(DiagramEvents || (DiagramEvents = {}));
 /**
  * Diagram event which consists of the user zooming or panning.
@@ -6417,6 +6420,20 @@ class DiagramHighlightedEvent extends DiagramEvent {
     this.target = target;
   }
 }
+/**
+ * Diagram event which consists of the user dragging a diagram node.
+ */
+class DiagramDraggingNodeEvent extends DiagramEvent {
+  /**
+   * Create a diagram dragging node event.
+   *
+   * @param target Diagram node which is targeted by the event.
+   */
+  constructor(target) {
+    super(DiagramEvents.DraggingNode);
+    this.target = target;
+  }
+}
 
 /**
  * A foreign object which is inserted with arbitrary html into a diagram.
@@ -7450,29 +7467,6 @@ class DiagramUserSelection extends DiagramElementSet {
   }
 }
 
-const degreesToRadians = theta => theta * Math.PI / 180;
-/**
- * Calculates the original size of the a rectangle that has been rotated by the given number of degrees resulting in a bounding box of the given size.
- *
- * @param width The width of a bounding box.
- * @param height The height of a bounding box.
- * @param orientation A rotation in degrees.
- * @returns The size of the original rectangle.
- */
-const unrotate = (width, height, orientation) => {
-  // TODO: this method fails under certain edge cases
-  // like for example, when angle is 45 degrees so sin(theta) == cos(theta)
-  const theta = degreesToRadians(orientation);
-  const orientationSine = Math.sin(theta);
-  const orientationCosine = Math.cos(theta);
-  const oldWidth = (Math.abs(width * orientationCosine) - Math.abs(height * orientationSine)) / (orientationCosine * orientationCosine - orientationSine * orientationSine);
-  const oldHeight = (Math.abs(width * orientationSine) - Math.abs(height * orientationCosine)) / (orientationSine * orientationSine - orientationCosine * orientationCosine);
-  return [oldWidth, oldHeight];
-};
-
-const isUserAgentSafari = userAgent => /^((?!chrome|android).)*safari/i.test(userAgent);
-const isSafari = isUserAgentSafari(navigator.userAgent);
-
 /**
  * Thickness of the invisible path around a connection used to make it easier to click on, in diagram units.
  * @private
@@ -7771,10 +7765,6 @@ class DiagramCanvas {
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
       d3.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
-      if (isSafari) {
-        // 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, () => {
@@ -8021,7 +8011,7 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     initializeLook(enterSelection);
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8057,7 +8047,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8093,7 +8083,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8129,7 +8119,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8260,7 +8250,7 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     initializeLook(enterSelection);
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8294,7 +8284,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8328,7 +8318,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8362,7 +8352,7 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8643,28 +8633,28 @@ class DiagramCanvas {
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
       return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
-    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
+    }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.look.color || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.color).attr('stroke-width', d => d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
       return getConnectionPath(d.look.shape || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.points, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness, (_a = d.type.defaultStartMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.type.defaultEndMarkerLook) === null || _b === void 0 ? void 0 : _b.width);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
-    .attr('pointer-events', 'stroke').attr('stroke-width', d => `${(d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
+    .attr('pointer-events', 'stroke').attr('stroke-width', d => (d.look.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness) + CONNECTION_PATH_BOX_THICKNESS).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.style, d.type.defaultLook.thickness || DIAGRAM_CONNECTION_TYPE_DEFAULTS.look.thickness)).attr('fill', 'none');
     mergeSelection.data().forEach(connection => {
       this.updateConnectionLabelsInView(connection);
       this.updateConnectionMarkersInView(connection);
     });
   }
   updateFieldsInView(...ids) {
-    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-field').data(this.model.fields.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-field');
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-field');
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
     exitSelection.remove();
-    enterSelection.style('box-sizing', 'border-box').on(Events.MouseOver, (_event, d) => {
+    enterSelection.on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
         this.userHighlight.focusOn(d);
         this.diagramEvent$.next(new DiagramHighlightedEvent(d));
@@ -8755,12 +8745,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 (isSafari) {
-      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`);
-    }
+    }));
+    enterSelection.append('text');
+    enterSelection.append('rect');
+    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === HorizontalAlign.Center ? 'middle' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === VerticalAlign.Center ? d.height / 2 : d.verticalAlign === VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === VerticalAlign.Center ? 'middle' : d.verticalAlign === VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.fontSize).attr('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.highlighted ? 600 : 400).attr('fill', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').each(d => {
+      this.setFieldTextAndWrap(d);
+    });
+    mergeSelection
+    // add a transparent rectangle to capture pointer events on the text
+    .select('rect').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('fill', 'transparent');
   }
   updateObjectsInView(...ids) {
     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);
@@ -8770,7 +8763,7 @@ class DiagramCanvas {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
     enterSelection.on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
@@ -8813,7 +8806,7 @@ class DiagramCanvas {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
     enterSelection.on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
@@ -9292,7 +9285,7 @@ class DiagramCanvas {
   openTextInput(id) {
     const field = this.model.fields.get(id);
     if (field) {
-      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, () => {
+      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, field.multiline, () => {
         // (_text)
         /*
             Empty for now
@@ -9310,7 +9303,7 @@ class DiagramCanvas {
       });
     }
   }
-  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, changeCallback, finishCallback) {
+  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, multiline, changeCallback, finishCallback) {
     // if we have a text input open, close it before creating a new one
     this.removeInputField();
     const inputFieldContainer = this.selectCanvasElements().append('foreignObject').attr('x', `${coords[0]}px`).attr('y', `${coords[1]}px`).attr('width', `${width}px`).attr('height', `${height}px`).style('box-sizing', 'border-box').style('border', '1px solid');
@@ -9320,16 +9313,16 @@ class DiagramCanvas {
     let inputFieldHeight;
     inputField.text(text).style('box-sizing', 'border-box').style('width', `${width}px`).style('height', `${height}px`).style('font-size', `${fontSize}px`).style('font-family', fontFamily).style('resize', 'none').style('outline', 0).style('border', 0).style('margin', 0).style('padding', 0).on(Events.KeyDown, event => {
       event.stopPropagation();
-    }).on(Events.KeyUp, event => {
-      event.stopPropagation();
-      if (event.key === Keys.Escape) {
-        const value = inputField.property('value');
+      if (event.key === Keys.Escape || event.key === Keys.Enter && !multiline) {
+        const value = inputField.property('value') || '';
         this.removeInputField();
         if (finishCallback) {
           finishCallback(value);
         }
       }
-    }).on(Events.Input, () => {
+    }).on(Events.KeyUp, event => {
+      event.stopPropagation();
+    }).on(Events.Input, event => {
       const value = inputField.property('value');
       inputField.attr('cols', numberOfColumns(value) + 1);
       inputField.attr('rows', numberOfRows(value) + 1);
@@ -9372,13 +9365,54 @@ class DiagramCanvas {
   }
   minimumSizeOfField(field) {
     var _a, _b;
-    const pNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('p')) === null || _b === void 0 ? void 0 : _b.node();
-    if (!pNode) {
+    const textNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text')) === null || _b === void 0 ? void 0 : _b.node();
+    if (!textNode) {
       // happens when a field has been created but not updated in view yet
       return [0, 0];
     }
-    const pBoundingBox = pNode.getBoundingClientRect();
-    return [pBoundingBox.width / this.zoomTransform.k, pBoundingBox.height / this.zoomTransform.k];
+    const textBoundingBox = textNode.getBoundingClientRect();
+    return [textBoundingBox.width / this.zoomTransform.k, textBoundingBox.height / this.zoomTransform.k];
+  }
+  setFieldTextAndWrap(field) {
+    var _a, _b, _c, _d;
+    const textSelection = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('text');
+    const textNode = textSelection === null || textSelection === void 0 ? void 0 : textSelection.node();
+    if (textSelection && textNode) {
+      this.setFieldText(field, textSelection, field.text);
+    } else {
+      // can happen if a field has been created but not updated in view yet
+      // not sure if this still happens but should check just in case
+      return;
+    }
+    if (field.fit) {
+      // no need to wrap
+      return;
+    }
+    let minimumSize = this.minimumSizeOfField(field);
+    while (minimumSize[0] > field.width || minimumSize[1] > field.height) {
+      const textString = ((_d = (_c = (_b = textSelection === null || textSelection === void 0 ? void 0 : textSelection.html()) === null || _b === void 0 ? void 0 : _b.replace(/<\/tspan>/g, '\n')) === null || _c === void 0 ? void 0 : _c.replace(/<tspan[^>]*>/g, '')) === null || _d === void 0 ? void 0 : _d.slice(0, -1)) || '';
+      let newTextString = '...';
+      if (textString.endsWith('...')) {
+        newTextString = textString.slice(0, -4) + '...';
+      } else {
+        newTextString = textString.slice(0, -1) + '...';
+      }
+      if (textSelection) {
+        this.setFieldText(field, textSelection, newTextString);
+      }
+      if (newTextString === '...') {
+        // if no more characters can be removed and the new text is a bare ellipsis, stop the execution
+        return;
+      }
+      minimumSize = this.minimumSizeOfField(field);
+    }
+  }
+  setFieldText(field, textSelection, text) {
+    const lines = text.split('\n');
+    textSelection.html('');
+    for (let i = 0; i < lines.length; ++i) {
+      textSelection.append('tspan').attr('x', field.horizontalAlign === HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * field.fontSize + field.height / 2 : field.verticalAlign === VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * field.fontSize : i * field.fontSize).text(lines[i]);
+    }
   }
   /**
    * Method to call to start the moving of a node triggered by a user drag event.
@@ -9410,6 +9444,7 @@ class DiagramCanvas {
       }
       this.userHighlight.clear();
       this.dragging = true;
+      this.diagramEvent$.next(new DiagramDraggingNodeEvent(d));
     }
   }
   /**
@@ -10415,4 +10450,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, DiagramZoomEvent, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, ResizableMode, 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, DiagramDraggingNodeEvent, 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, ResizableMode, 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,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.2.16",
+  "version": "4.2.18",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

package/src/index.d.ts

@@ -19,7 +19,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, DiagramZoomEvent } from './lib/diagram/diagram-event';
+export { DiagramDoubleClickEvent, DiagramEvent, DiagramEvents, DiagramHighlightedEvent, DiagramDraggingNodeEvent, 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/canvas/diagram-canvas.d.ts

@@ -142,6 +142,8 @@ export declare class DiagramCanvas implements Canvas {
     private createInputField;
     private removeInputField;
     private minimumSizeOfField;
+    private setFieldTextAndWrap;
+    private setFieldText;
     /**
      * Method to call to start the moving of a node triggered by a user drag event.
      */

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

@@ -386,6 +386,11 @@ export interface FieldConfig {
      * @default 'top'
      */
     orientation?: Side | number;
+    /**
+     * Whether this field can have multiple lines.
+     * @default false
+     */
+    multiline?: boolean;
     /**
      * Whether this field and its root element should be resized automatically if the size of the text increases.
      * Setting this to true should also entail setting reasonable `minWidth` and `minHeight` values for the configuration of any nodes or sections that contain this field.

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

@@ -1,5 +1,6 @@
 import { Point } from '../util/canvas-util';
 import { DiagramElement } from './model/diagram-element';
+import { DiagramNode } from './model/diagram-node';
 /**
  * Represents an action taken by the user on the diagram which doesn't have an impact on the diagram's model.
  * Contrast with {@link DiagramAction} which does have an impact on the diagram's model.
@@ -20,7 +21,8 @@ export declare enum DiagramEvents {
     DoubleClick = 1,
     SecondaryClick = 2,
     Selection = 3,
-    Highlight = 4
+    Highlight = 4,
+    DraggingNode = 5
 }
 /**
  * Diagram event which consists of the user zooming or panning.
@@ -94,3 +96,15 @@ export declare class DiagramHighlightedEvent extends DiagramEvent {
      */
     constructor(target: DiagramElement | null);
 }
+/**
+ * Diagram event which consists of the user dragging a diagram node.
+ */
+export declare class DiagramDraggingNodeEvent extends DiagramEvent {
+    target: DiagramNode;
+    /**
+     * Create a diagram dragging node event.
+     *
+     * @param target Diagram node which is targeted by the event.
+     */
+    constructor(target: DiagramNode);
+}

package/src/lib/diagram/model/diagram-field.d.ts

@@ -21,6 +21,7 @@ export declare const DIAGRAM_FIELD_DEFAULTS: {
     horizontalAlign: HorizontalAlign;
     verticalAlign: VerticalAlign;
     orientation: Side;
+    multiline: boolean;
     fit: boolean;
     shrink: boolean;
 };
@@ -90,6 +91,11 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     orientation: number;
+    /**
+     * Whether this field can have multiple lines.
+     * @public
+     */
+    multiline: boolean;
     private _text;
     /**
      * Default text that this field's text resets to when empty.
@@ -122,7 +128,7 @@ export declare class DiagramField extends DiagramElement {
      * @public
      */
     shrink: boolean;
-    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, text: string, editable: boolean, fit: boolean, shrink: boolean);
+    constructor(model: DiagramModel, rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, width: number, height: number, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean);
     get removed(): boolean;
     updateInView(): void;
     raise(): void;
@@ -145,7 +151,7 @@ export declare class DiagramFieldSet extends DiagramElementSet<DiagramField> {
      * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
      * @private
      */
-    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
+    new(rootElement: (LabeledElement & DiagramElement) | undefined, coords: Point, fontSize: number, fontFamily: string | null, color: string, selectedColor: string, width: number, height: number, horizontalAlign: HorizontalAlign, verticalAlign: VerticalAlign, orientation: Side | number, multiline: boolean, text: string, editable: boolean, fit: boolean, shrink: boolean): DiagramField;
     remove(id: string): void;
 }
 export declare const getBottomMargin: (config?: FieldConfig | null) => number;

package/src/lib/util/trig.d.ts

@@ -9,12 +9,3 @@ export declare const radiansToDegrees: (theta: number) => number;
  * @returns The size of the bounding box.
  */
 export declare const rotate: (width: number, height: number, orientation: number) => [number, number];
-/**
- * Calculates the original size of the a rectangle that has been rotated by the given number of degrees resulting in a bounding box of the given size.
- *
- * @param width The width of a bounding box.
- * @param height The height of a bounding box.
- * @param orientation A rotation in degrees.
- * @returns The size of the original rectangle.
- */
-export declare const unrotate: (width: number, height: number, orientation: number) => [number, number];