@metadev/daga 4.0.2 → 4.2.0

package/index.esm.js

@@ -804,7 +804,7 @@ const numberOfColumns = s => {
 };
 const numberOfRows = s => {
   var _a;
-  return ((_a = s.match(/\n/g)) === null || _a === undefined ? undefined : _a.length) || 0;
+  return ((_a = s.match(/\n/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
 };
 
 /******************************************************************************
@@ -1030,14 +1030,14 @@ class DiagramElement {
    */
   get highlighted() {
     var _a, _b;
-    return ((_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userHighlight) === null || _b === undefined ? undefined : _b.contains(this.id)) || false;
+    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userHighlight) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
   }
   /**
    * Whether this diagram element is currently in the user selection.
    */
   get selected() {
     var _a, _b;
-    return ((_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.contains(this.id)) || false;
+    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
   }
   constructor(model, id) {
     /**
@@ -1066,7 +1066,7 @@ class DiagramElement {
    */
   select() {
     var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`[id='${escapeSelector(this.id)}']`);
+    return (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select(`[id='${escapeSelector(this.id)}']`);
   }
 }
 class DiagramElementSet extends DiagramEntitySet {
@@ -1464,7 +1464,7 @@ class ValueSet {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getValue(key) {
     var _a;
-    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === undefined ? undefined : _a.rootAttribute;
+    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === void 0 ? void 0 : _a.rootAttribute;
     if (rootAttribute !== undefined && rootAttribute !== null) {
       this.values[key] = this.getRootElementValue(rootAttribute);
     }
@@ -1549,7 +1549,7 @@ class ValueSet {
     if (property && property.type === Type.Object) {
       return this.getSubValueSet(key).hasAnySetValue();
     }
-    return !empty(value) && !equals(value, property === null || property === undefined ? undefined : property.defaultValue);
+    return !empty(value) && !equals(value, property === null || property === void 0 ? void 0 : property.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -1670,10 +1670,8 @@ class ValueSet {
         this.values[key] = structuredClone(property.defaultValue);
       }
       if (rootAttribute !== undefined && rootAttribute !== null) {
-        if (property.defaultValue !== undefined && !equals(this.values[key], property.defaultValue)) {
+        if (property.defaultValue !== undefined && !equals(this.getRootElementValue(rootAttribute), property.defaultValue)) {
           this.setRootElementValue(rootAttribute, this.values[key]);
-        } else {
-          this.values[key] = this.getRootElementValue(rootAttribute);
         }
       }
       if (property.basic) {
@@ -1818,7 +1816,7 @@ class DiagramConnection extends DiagramElement {
   }
   set type(type) {
     var _a, _b;
-    (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.openInPropertyEditor(undefined);
+    (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.openInPropertyEditor(undefined);
     this._type = type;
     if (this.valueSet) {
       this.valueSet = new ValueSet(type.propertySet, this);
@@ -2007,11 +2005,11 @@ class DiagramConnection extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateConnectionsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateConnectionsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
@@ -2027,12 +2025,12 @@ class DiagramConnection extends DiagramElement {
       this.start = start;
       if (start !== undefined) {
         start.outgoingConnections.push(this);
-        this.startDirection = start === null || start === undefined ? undefined : start.direction;
-        this.startCoords = (start === null || start === undefined ? undefined : start.connectionPoint) || [0, 0];
+        this.startDirection = start === null || start === void 0 ? void 0 : start.direction;
+        this.startCoords = (start === null || start === void 0 ? void 0 : start.connectionPoint) || [0, 0];
       }
     } else {
-      this.startDirection = start === null || start === undefined ? undefined : start.direction;
-      this.startCoords = (start === null || start === undefined ? undefined : start.connectionPoint) || [0, 0];
+      this.startDirection = start === null || start === void 0 ? void 0 : start.direction;
+      this.startCoords = (start === null || start === void 0 ? void 0 : start.connectionPoint) || [0, 0];
     }
     this.updateInView();
   }
@@ -2050,12 +2048,12 @@ class DiagramConnection extends DiagramElement {
       this.end = end;
       if (end !== undefined) {
         end.incomingConnections.push(this);
-        this.endDirection = end === null || end === undefined ? undefined : end.direction;
-        this.endCoords = (end === null || end === undefined ? undefined : end.connectionPoint) || [0, 0];
+        this.endDirection = end === null || end === void 0 ? void 0 : end.direction;
+        this.endCoords = (end === null || end === void 0 ? void 0 : end.connectionPoint) || [0, 0];
       }
     } else {
-      this.endDirection = end === null || end === undefined ? undefined : end.direction;
-      this.endCoords = (end === null || end === undefined ? undefined : end.connectionPoint) || [0, 0];
+      this.endDirection = end === null || end === void 0 ? void 0 : end.direction;
+      this.endCoords = (end === null || end === void 0 ? void 0 : end.connectionPoint) || [0, 0];
     }
     this.updateInView();
   }
@@ -2066,7 +2064,7 @@ class DiagramConnection extends DiagramElement {
    */
   tighten() {
     var _a, _b;
-    if (((_a = this.start) === null || _a === undefined ? undefined : _a.rootElement) && this.end) {
+    if (((_a = this.start) === null || _a === void 0 ? void 0 : _a.rootElement) && this.end) {
       const alternativeStartPortsSortedByDistanceAscending = this.start.rootElement.ports.map(p => [p, p.distanceTo(this.end.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeStartPorts: for (const alternativeStartPort of alternativeStartPortsSortedByDistanceAscending) {
         if (alternativeStartPort === this.end) {
@@ -2100,7 +2098,7 @@ class DiagramConnection extends DiagramElement {
         }
       }
     }
-    if (((_b = this.end) === null || _b === undefined ? undefined : _b.rootElement) && this.start) {
+    if (((_b = this.end) === null || _b === void 0 ? void 0 : _b.rootElement) && this.start) {
       const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports.map(p => [p, p.distanceTo(this.start.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
         if (alternativeEndPort === this.start) {
@@ -2196,8 +2194,8 @@ class DiagramConnectionSet extends DiagramElementSet {
     const connection = this.get(id, true);
     if (connection) {
       // remove from ports
-      removeIfExists(((_a = connection.start) === null || _a === undefined ? undefined : _a.outgoingConnections) || [], connection);
-      removeIfExists(((_b = connection.end) === null || _b === undefined ? undefined : _b.incomingConnections) || [], connection);
+      removeIfExists(((_a = connection.start) === null || _a === void 0 ? void 0 : _a.outgoingConnections) || [], connection);
+      removeIfExists(((_b = connection.end) === null || _b === void 0 ? void 0 : _b.incomingConnections) || [], connection);
       // remove from set of connections
       super.remove(id);
       // remove from canvas
@@ -2221,6 +2219,7 @@ const DIAGRAM_FIELD_DEFAULTS = {
   selectedColor: '#000000',
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
+  orientation: Side.Top,
   fit: false
 };
 /**
@@ -2240,17 +2239,17 @@ class DiagramField extends DiagramElement {
   }
   set text(value) {
     var _a;
-    if (value === null || value === undefined || (value === null || value === undefined ? undefined : value.trim()) === '') {
+    if (value === null || value === undefined || (value === null || value === void 0 ? void 0 : value.trim()) === '') {
       value = this.defaultText;
     }
     this._text = value;
     this.updateInView();
     if (this.fit) {
-      (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.fitFieldRootInView(this.id);
+      (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id);
     }
   }
-  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit) {
-    const id = `${rootElement === null || rootElement === undefined ? undefined : rootElement.id}_field`;
+  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit) {
+    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');
     }
@@ -2270,6 +2269,7 @@ class DiagramField extends DiagramElement {
     this.selectedColor = selectedColor;
     this.horizontalAlign = horizontalAlign;
     this.verticalAlign = verticalAlign;
+    this.orientation = orientation;
     this.defaultText = text;
     this._text = text;
     this.editable = editable;
@@ -2280,11 +2280,11 @@ class DiagramField extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateFieldsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateFieldsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Change the coordinates of this field to the given coordinates.
@@ -2297,7 +2297,7 @@ class DiagramField extends DiagramElement {
   }
   getPriority() {
     var _a;
-    return ((_a = this.rootElement) === null || _a === undefined ? undefined : _a.getPriority()) || DEFAULT_PRIORITY;
+    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
   }
 }
 class DiagramFieldSet extends DiagramElementSet {
@@ -2313,8 +2313,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, text, editable, fit) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit);
+  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, text, editable, fit) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, text, editable, fit);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -2328,7 +2328,7 @@ class DiagramFieldSet extends DiagramElementSet {
     const field = this.get(id, true);
     if (field) {
       // remove from root element
-      if (((_a = field.rootElement) === null || _a === undefined ? undefined : _a.label) !== undefined) {
+      if (((_a = field.rootElement) === null || _a === void 0 ? void 0 : _a.label) !== undefined) {
         if (field.rootElement.label === field) {
           field.rootElement.label = undefined;
         }
@@ -2341,7 +2341,7 @@ class DiagramFieldSet extends DiagramElementSet {
   }
 }
 const getBottomMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2360,7 +2360,7 @@ const getBottomMargin = config => {
   }
 };
 const getLeftMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2379,7 +2379,7 @@ const getLeftMargin = config => {
   }
 };
 const getRightMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2398,7 +2398,7 @@ const getRightMargin = config => {
   }
 };
 const getTopMargin = config => {
-  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2417,7 +2417,7 @@ const getTopMargin = config => {
   }
 };
 const getBottomPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2436,7 +2436,7 @@ const getBottomPadding$1 = config => {
   }
 };
 const getLeftPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2455,7 +2455,7 @@ const getLeftPadding$1 = config => {
   }
 };
 const getRightPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2474,7 +2474,7 @@ const getRightPadding$1 = config => {
   }
 };
 const getTopPadding$1 = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2566,7 +2566,7 @@ class DiagramSection extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -2581,15 +2581,15 @@ class DiagramSection extends DiagramElement {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     if (this.selected) {
       if (this.highlighted) {
-        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : ((_a = this.type) === null || _a === undefined ? undefined : _a.selectedAndHighlightedLook) || ((_b = this.node) === null || _b === undefined ? undefined : _b.look);
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : ((_a = this.type) === null || _a === void 0 ? void 0 : _a.selectedAndHighlightedLook) || ((_b = this.node) === null || _b === void 0 ? void 0 : _b.look);
       } else {
-        return this._selectedLook !== undefined ? this._selectedLook : ((_c = this.type) === null || _c === undefined ? undefined : _c.selectedLook) || ((_d = this.node) === null || _d === undefined ? undefined : _d.look);
+        return this._selectedLook !== undefined ? this._selectedLook : ((_c = this.type) === null || _c === void 0 ? void 0 : _c.selectedLook) || ((_d = this.node) === null || _d === void 0 ? void 0 : _d.look);
       }
     } else {
       if (this.highlighted) {
-        return this._highlightedLook !== undefined ? this._highlightedLook : ((_e = this.type) === null || _e === undefined ? undefined : _e.highlightedLook) || ((_f = this.node) === null || _f === undefined ? undefined : _f.look);
+        return this._highlightedLook !== undefined ? this._highlightedLook : ((_e = this.type) === null || _e === void 0 ? void 0 : _e.highlightedLook) || ((_f = this.node) === null || _f === void 0 ? void 0 : _f.look);
       } else {
-        return this._defaultLook !== undefined ? this._defaultLook : ((_g = this.type) === null || _g === undefined ? undefined : _g.defaultLook) || ((_h = this.node) === null || _h === undefined ? undefined : _h.look);
+        return this._defaultLook !== undefined ? this._defaultLook : ((_g = this.type) === null || _g === void 0 ? void 0 : _g.defaultLook) || ((_h = this.node) === null || _h === void 0 ? void 0 : _h.look);
       }
     }
   }
@@ -2642,11 +2642,11 @@ class DiagramSection extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateSectionsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateSectionsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
     if (this.label) {
       this.label.raise();
     }
@@ -2659,19 +2659,19 @@ class DiagramSection extends DiagramElement {
   }
   get type() {
     var _a, _b, _c, _d, _e;
-    return (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode];
+    return (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) === null || _e === void 0 ? void 0 : _e[this.indexXInNode];
   }
   getMinWidth() {
     var _a, _b, _c, _d;
-    return ((_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.minWidths) === null || _d === undefined ? undefined : _d[this.indexXInNode]) || DIAGRAM_SECTION_MIN_WIDTH;
+    return ((_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.minWidths) === null || _d === void 0 ? void 0 : _d[this.indexXInNode]) || DIAGRAM_SECTION_MIN_WIDTH;
   }
   getMinHeight() {
     var _a, _b, _c, _d;
-    return ((_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.minHeights) === null || _d === undefined ? undefined : _d[this.indexYInNode]) || DIAGRAM_SECTION_MIN_HEIGHT;
+    return ((_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.minHeights) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) || DIAGRAM_SECTION_MIN_HEIGHT;
   }
   getPriority() {
     var _a, _b, _c, _d, _e, _f;
-    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode]) === null || _f === undefined ? undefined : _f.priority) || DEFAULT_PRIORITY;
+    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) === null || _e === void 0 ? void 0 : _e[this.indexXInNode]) === null || _f === void 0 ? void 0 : _f.priority) || DEFAULT_PRIORITY;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -2836,9 +2836,9 @@ class DiagramSection extends DiagramElement {
     // Set label's dimensions as a function of ours.
     const type = this.type;
     if (this.label) {
-      this.label.coords = [this.coords[0] + getLeftMargin(type === null || type === undefined ? undefined : type.label), this.coords[1] + getTopMargin(type === null || type === undefined ? undefined : type.label)];
-      this.label.width = this.width - getLeftMargin(type === null || type === undefined ? undefined : type.label) - getRightMargin(type === null || type === undefined ? undefined : type.label);
-      this.label.height = this.height - getTopMargin(type === null || type === undefined ? undefined : type.label) - getBottomMargin(type === null || type === undefined ? undefined : type.label);
+      this.label.coords = [this.coords[0] + getLeftMargin(type === null || type === void 0 ? void 0 : type.label), this.coords[1] + getTopMargin(type === null || type === void 0 ? void 0 : type.label)];
+      this.label.width = this.width - getLeftMargin(type === null || type === void 0 ? void 0 : type.label) - getRightMargin(type === null || type === void 0 ? void 0 : type.label);
+      this.label.height = this.height - getTopMargin(type === null || type === void 0 ? void 0 : type.label) - getBottomMargin(type === null || type === void 0 ? void 0 : type.label);
       this.label.updateInView();
     }
     // Move decorators to match the new coords.
@@ -2872,13 +2872,13 @@ class DiagramSectionSet extends DiagramElementSet {
     node.sections.push(section);
     node.updateInView();
     // add section ports
-    const sectionPorts = (_d = (_c = (_b = (_a = node.type.sectionGrid) === null || _a === undefined ? undefined : _a.sections) === null || _b === undefined ? undefined : _b[indexYInNode]) === null || _c === undefined ? undefined : _c[indexXInNode]) === null || _d === undefined ? undefined : _d.ports;
+    const sectionPorts = (_d = (_c = (_b = (_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.sections) === null || _b === void 0 ? void 0 : _b[indexYInNode]) === null || _c === void 0 ? void 0 : _c[indexXInNode]) === null || _d === void 0 ? void 0 : _d.ports;
     if (sectionPorts && sectionPorts.length > 0) {
       for (let i = 0; i < sectionPorts.length; ++i) {
         const portConfig = sectionPorts[i];
-        const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === undefined ? undefined : portConfig.direction, `${section.id}_${i}`);
-        if ((_e = port.type) === null || _e === undefined ? undefined : _e.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === undefined ? undefined : _f.label);
+        const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === void 0 ? void 0 : portConfig.direction, `${section.id}_${i}`);
+        if ((_e = port.type) === null || _e === void 0 ? void 0 : _e.label) {
+          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === void 0 ? void 0 : _f.label);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
           const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
@@ -2894,15 +2894,15 @@ 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.editable, labelConfiguration.fit);
+          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);
         }
       }
     }
     // add section label
-    const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === undefined ? undefined : _g.sections) === null || _h === undefined ? undefined : _h[indexYInNode]) === null || _j === undefined ? undefined : _j[indexXInNode]) === null || _k === undefined ? undefined : _k.label;
+    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.editable, labelConfiguration.fit);
+      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);
     }
     return section;
   }
@@ -3006,7 +3006,7 @@ class DiagramNodeType {
     this.canBeParentless = values.canBeParentless;
     this.childrenTypes = values.childrenTypes;
     this.priority = values.priority;
-    this.propertySet = new PropertySet((options === null || options === undefined ? undefined : options.properties) || []);
+    this.propertySet = new PropertySet((options === null || options === void 0 ? void 0 : options.properties) || []);
   }
 }
 /**
@@ -3022,7 +3022,7 @@ class DiagramNode extends DiagramElement {
   }
   set type(type) {
     var _a, _b;
-    (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.openInPropertyEditor(undefined);
+    (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.openInPropertyEditor(undefined);
     this._type = type;
     if (this.valueSet) {
       this.valueSet = new ValueSet(type.propertySet, this);
@@ -3044,7 +3044,7 @@ class DiagramNode extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -3134,20 +3134,20 @@ class DiagramNode extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateNodesInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateNodesInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
+    for (const section of this.sections) {
+      section.raise();
+    }
     if (this.label) {
       this.label.raise();
     }
     for (const port of this.ports) {
       port.raise();
     }
-    for (const section of this.sections) {
-      section.raise();
-    }
     for (const decorator of this.decorators) {
       decorator.raise();
     }
@@ -3245,7 +3245,7 @@ class DiagramNode extends DiagramElement {
         if (!includeRemoved && incomingConnection.removed) {
           continue;
         }
-        const otherNode = (_a = incomingConnection.start) === null || _a === undefined ? undefined : _a.getNode();
+        const otherNode = (_a = incomingConnection.start) === null || _a === void 0 ? void 0 : _a.getNode();
         if (otherNode) {
           if (!includeRemoved && otherNode.removed) {
             continue;
@@ -3257,7 +3257,7 @@ class DiagramNode extends DiagramElement {
         if (!includeRemoved && outgoingConnection.removed) {
           continue;
         }
-        const otherNode = (_b = outgoingConnection.end) === null || _b === undefined ? undefined : _b.getNode();
+        const otherNode = (_b = outgoingConnection.end) === null || _b === void 0 ? void 0 : _b.getNode();
         if (otherNode) {
           if (!includeRemoved && otherNode.removed) {
             continue;
@@ -3276,7 +3276,7 @@ class DiagramNode extends DiagramElement {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     let node = this;
     while (node.parent !== undefined) {
-      node = node === null || node === undefined ? undefined : node.parent;
+      node = node === null || node === void 0 ? void 0 : node.parent;
     }
     return node;
   }
@@ -3581,6 +3581,106 @@ class DiagramNode extends DiagramElement {
     this.getConnections().forEach(c => c.tighten());
     this.updateInView();
   }
+  /**
+   * Removes all sections with the given index along the x axis.
+   * @public
+   */
+  removeSectionColumn(columnIndex) {
+    var _a;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
+    let columnWidth = 0;
+    const sections = [...this.sections];
+    for (const section of sections) {
+      if (section.indexYInNode === columnIndex) {
+        columnWidth = Math.max(columnWidth, section.width);
+        this.model.sections.remove(section.id);
+      }
+    }
+    for (const section of sections) {
+      if (section.indexYInNode > columnIndex) {
+        --section.indexYInNode;
+        section.move([section.coords[0] - columnWidth - margin, section.coords[1]]);
+      }
+    }
+    this.stretch(Side.Right, -margin - columnWidth);
+  }
+  /**
+   * Removes all sections with the given index along the y axis.
+   * @public
+   */
+  removeSectionRow(rowIndex) {
+    var _a;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
+    let rowHeight = 0;
+    const sections = [...this.sections];
+    for (const section of sections) {
+      if (section.indexXInNode === rowIndex) {
+        rowHeight = Math.max(rowHeight, section.height);
+        this.model.sections.remove(section.id);
+      }
+    }
+    for (const section of sections) {
+      if (section.indexYInNode > rowIndex) {
+        --section.indexXInNode;
+        section.move([section.coords[0], section.coords[1] - rowHeight - margin]);
+      }
+    }
+    this.stretch(Side.Bottom, -margin - rowHeight);
+  }
+  /**
+   * Creates a copy of all sections with the given index along the x axis.
+   * @public
+   */
+  copySectionColumn(columnIndex) {
+    var _a;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
+    let columnWidth = 0;
+    const sections = [...this.sections];
+    for (const section of sections) {
+      if (section.indexXInNode === columnIndex) {
+        columnWidth = Math.max(columnWidth, section.width);
+        let newSectionIdIndexX = section.indexXInNode + 1;
+        while (this.model.sections.get(`${section.id}_copy_${newSectionIdIndexX}_${section.indexYInNode}`, true) !== undefined) {
+          ++newSectionIdIndexX;
+        }
+        this.model.sections.new(this, section.indexXInNode + 1, section.indexYInNode, [section.coords[0] + section.width + margin, section.coords[1]], section.width, section.height, `${section.id}_copy_${newSectionIdIndexX}_${section.indexYInNode}`);
+      }
+    }
+    for (const section of sections) {
+      if (section.indexXInNode > columnIndex) {
+        ++section.indexXInNode;
+        section.move([section.coords[0] + columnWidth + margin, section.coords[1]]);
+      }
+    }
+    this.stretch(Side.Right, margin + columnWidth);
+  }
+  /**
+   * Creates a copy of all sections with the given index along the y axis.
+   * @public
+   */
+  copySectionRow(rowIndex) {
+    var _a;
+    const margin = ((_a = this.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
+    let rowHeight = 0;
+    const sections = [...this.sections];
+    for (const section of sections) {
+      if (section.indexYInNode === rowIndex) {
+        rowHeight = Math.max(rowHeight, section.height);
+        let newSectionIdIndexY = section.indexYInNode + 1;
+        while (this.model.sections.get(`${section.id}_copy_${section.indexXInNode}_${newSectionIdIndexY}`, true) !== undefined) {
+          ++newSectionIdIndexY;
+        }
+        this.model.sections.new(this, section.indexXInNode, section.indexYInNode + 1, [section.coords[0], section.coords[1] + section.height + margin], section.width, section.height, `${section.id}_copy_${section.indexXInNode}_${newSectionIdIndexY}`);
+      }
+    }
+    for (const section of sections) {
+      if (section.indexYInNode > rowIndex) {
+        ++section.indexYInNode;
+        section.move([section.coords[0], section.coords[1] + rowHeight + margin]);
+      }
+    }
+    this.stretch(Side.Bottom, margin + rowHeight);
+  }
 }
 class DiagramNodeSet extends DiagramElementSet {
   /**
@@ -3626,10 +3726,10 @@ class DiagramNodeSet extends DiagramElementSet {
       for (let j = 0; j < nodeType.sectionGrid.sections.length; ++j) {
         let widthAccumulator = node.coords[0] + (nodeType.sectionGrid.margin || 0);
         for (let i = 0; i < nodeType.sectionGrid.sections[j].length; ++i) {
-          this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], ((_a = nodeType.sectionGrid.defaultWidths) === null || _a === undefined ? undefined : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === undefined ? undefined : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
-          widthAccumulator += (((_c = nodeType.sectionGrid.defaultWidths) === null || _c === undefined ? undefined : _c[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH) + (nodeType.sectionGrid.margin || 0);
+          this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], ((_a = nodeType.sectionGrid.defaultWidths) === null || _a === void 0 ? void 0 : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === void 0 ? void 0 : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
+          widthAccumulator += (((_c = nodeType.sectionGrid.defaultWidths) === null || _c === void 0 ? void 0 : _c[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH) + (nodeType.sectionGrid.margin || 0);
         }
-        heightAccumulator += (((_d = nodeType.sectionGrid.defaultHeights) === null || _d === undefined ? undefined : _d[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT) + (nodeType.sectionGrid.margin || 0);
+        heightAccumulator += (((_d = nodeType.sectionGrid.defaultHeights) === null || _d === void 0 ? void 0 : _d[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT) + (nodeType.sectionGrid.margin || 0);
       }
     }
     // add node ports
@@ -3638,8 +3738,8 @@ class DiagramNodeSet extends DiagramElementSet {
         const portConfig = nodeType.ports[i];
         const portType = portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined;
         const port = this.model.ports.new(portType, node, [node.coords[0] + portConfig.coords[0], node.coords[1] + portConfig.coords[1]], portConfig.connectionPoint !== undefined ? [node.coords[0] + (portConfig.connectionPoint[0] || 0), node.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig.direction, `${node.id}_port_${i}`);
-        if ((_e = port.type) === null || _e === undefined ? undefined : _e.label) {
-          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === undefined ? undefined : _f.label);
+        if ((_e = port.type) === null || _e === void 0 ? void 0 : _e.label) {
+          const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === void 0 ? void 0 : _f.label);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
           const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
@@ -3655,14 +3755,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.editable, labelConfiguration.fit);
+          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);
         }
       }
     }
     // 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.editable, labelConfiguration.fit);
+      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);
     }
     // add node decorators
     if (nodeType.decorators.length > 0) {
@@ -3672,7 +3772,7 @@ class DiagramNodeSet extends DiagramElementSet {
       }
     }
     node.valueSet.resetValues();
-    (_g = node.model.canvas) === null || _g === undefined ? undefined : _g.fitNodeInView(node.id);
+    (_g = node.model.canvas) === null || _g === void 0 ? void 0 : _g.fitNodeInView(node.id);
     return node;
   }
   remove(id) {
@@ -3764,7 +3864,7 @@ const filterByOnlyDescendants = nodes => {
   return nodes;
 };
 const getBottomPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3783,7 +3883,7 @@ const getBottomPadding = config => {
   }
 };
 const getLeftPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3802,7 +3902,7 @@ const getLeftPadding = config => {
   }
 };
 const getRightPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3821,7 +3921,7 @@ const getRightPadding = config => {
   }
 };
 const getTopPadding = config => {
-  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
     return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -3910,7 +4010,7 @@ class DiagramPort extends DiagramElement {
   }
   get typeString() {
     var _a;
-    return (_a = this.type) === null || _a === undefined ? undefined : _a.id;
+    return (_a = this.type) === null || _a === void 0 ? void 0 : _a.id;
   }
   set typeString(typeString) {
     if (typeString === undefined) {
@@ -3927,14 +4027,14 @@ class DiagramPort extends DiagramElement {
    */
   get allowsOutgoing() {
     var _a, _b;
-    return ((_a = this.type) === null || _a === undefined ? undefined : _a.allowsOutgoing) !== undefined ? (_b = this.type) === null || _b === undefined ? undefined : _b.allowsOutgoing : true;
+    return ((_a = this.type) === null || _a === void 0 ? void 0 : _a.allowsOutgoing) !== undefined ? (_b = this.type) === null || _b === void 0 ? void 0 : _b.allowsOutgoing : true;
   }
   /**
    * Whether this port can be used as a connection end point.
    */
   get allowsIncoming() {
     var _a, _b;
-    return ((_a = this.type) === null || _a === undefined ? undefined : _a.allowsIncoming) !== undefined ? (_b = this.type) === null || _b === undefined ? undefined : _b.allowsIncoming : true;
+    return ((_a = this.type) === null || _a === void 0 ? void 0 : _a.allowsIncoming) !== undefined ? (_b = this.type) === null || _b === void 0 ? void 0 : _b.allowsIncoming : true;
   }
   /**
    * Name of this port. Alias for this port's label's text.
@@ -3942,7 +4042,7 @@ class DiagramPort extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
+    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -3957,15 +4057,15 @@ class DiagramPort extends DiagramElement {
     var _a, _b, _c, _d;
     if (this.selected) {
       if (this.highlighted) {
-        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : (_a = this.type || DIAGRAM_PORT_LOOKS) === null || _a === undefined ? undefined : _a.selectedAndHighlightedLook;
+        return this._selectedAndHighlightedLook !== undefined ? this._selectedAndHighlightedLook : (_a = this.type || DIAGRAM_PORT_LOOKS) === null || _a === void 0 ? void 0 : _a.selectedAndHighlightedLook;
       } else {
-        return this._selectedLook !== undefined ? this._selectedLook : (_b = this.type || DIAGRAM_PORT_LOOKS) === null || _b === undefined ? undefined : _b.selectedLook;
+        return this._selectedLook !== undefined ? this._selectedLook : (_b = this.type || DIAGRAM_PORT_LOOKS) === null || _b === void 0 ? void 0 : _b.selectedLook;
       }
     } else {
       if (this.highlighted) {
-        return this._highlightedLook !== undefined ? this._highlightedLook : (_c = this.type || DIAGRAM_PORT_LOOKS) === null || _c === undefined ? undefined : _c.highlightedLook;
+        return this._highlightedLook !== undefined ? this._highlightedLook : (_c = this.type || DIAGRAM_PORT_LOOKS) === null || _c === void 0 ? void 0 : _c.highlightedLook;
       } else {
-        return this._defaultLook !== undefined ? this._defaultLook : (_d = this.type || DIAGRAM_PORT_LOOKS) === null || _d === undefined ? undefined : _d.defaultLook;
+        return this._defaultLook !== undefined ? this._defaultLook : (_d = this.type || DIAGRAM_PORT_LOOKS) === null || _d === void 0 ? void 0 : _d.defaultLook;
       }
     }
   }
@@ -3994,7 +4094,7 @@ class DiagramPort extends DiagramElement {
    */
   get width() {
     var _a;
-    return ((_a = this.type) === null || _a === undefined ? undefined : _a.width) || DIAGRAM_PORT_TYPE_DEFAULTS.width;
+    return ((_a = this.type) === null || _a === void 0 ? void 0 : _a.width) || DIAGRAM_PORT_TYPE_DEFAULTS.width;
   }
   /**
    * Current height of this port. Same as the width.
@@ -4032,11 +4132,11 @@ class DiagramPort extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updatePortsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updatePortsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
     if (this.label) {
       this.label.raise();
     }
@@ -4078,7 +4178,7 @@ class DiagramPort extends DiagramElement {
   }
   getPriority() {
     var _a;
-    return ((_a = this.rootElement) === null || _a === undefined ? undefined : _a.getPriority()) || DEFAULT_PRIORITY;
+    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -4209,7 +4309,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.editable, labelConfiguration.fit);
+          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);
           newField.text = node.label;
           newNode.label = newField;
           model.fields.add(newField);
@@ -4219,19 +4319,19 @@ class DagaImporter {
       for (const child of node.children || []) {
         const newChild = this.importNode(model, child);
         if (newChild !== undefined) {
-          (_a = newNode.children) === null || _a === undefined ? undefined : _a.push(newChild);
+          (_a = newNode.children) === null || _a === void 0 ? void 0 : _a.push(newChild);
           newChild.parent = newNode;
         }
       }
       for (const section of node.sections || []) {
         const newSection = new DiagramSection(model, newNode, section.indexXInNode, section.indexYInNode, section.coords, section.width, section.height, section.id);
-        (_b = newNode.sections) === null || _b === undefined ? undefined : _b.push(newSection);
+        (_b = newNode.sections) === null || _b === void 0 ? void 0 : _b.push(newSection);
         model.sections.add(newSection);
         if (section.label) {
           // add section label
-          if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[section.indexYInNode]) === null || _e === undefined ? undefined : _e[section.indexXInNode]) === null || _f === undefined ? undefined : _f.label) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === undefined ? undefined : _g.sections) === null || _h === undefined ? undefined : _h[section.indexYInNode]) === null || _j === undefined ? undefined : _j[section.indexXInNode]) === null || _k === undefined ? undefined : _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.editable, labelConfiguration.fit);
+          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);
             newField.text = section.label;
             newSection.label = newField;
             model.fields.add(newField);
@@ -4246,8 +4346,8 @@ class DagaImporter {
           model.ports.add(newPort);
           if (port.label) {
             // add port label
-            if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === undefined ? undefined : newPortType.label)) {
-              const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === undefined ? undefined : newPortType.label);
+            if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === void 0 ? void 0 : newPortType.label)) {
+              const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === void 0 ? void 0 : newPortType.label);
               let labelCoords;
               switch (newPort.direction) {
                 case Side.Top:
@@ -4263,7 +4363,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.editable, labelConfiguration.fit);
+              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);
               newField.text = port.label;
               newPort.label = newField;
               model.fields.add(newField);
@@ -4293,8 +4393,8 @@ class DagaImporter {
         model.ports.add(newPort);
         if (port.label) {
           // add port label
-          if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === undefined ? undefined : newPortType.label)) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === undefined ? undefined : newPortType.label);
+          if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === void 0 ? void 0 : newPortType.label)) {
+            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === void 0 ? void 0 : newPortType.label);
             let labelCoords;
             switch (newPort.direction) {
               case Side.Top:
@@ -4310,7 +4410,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.editable, labelConfiguration.fit);
+            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);
             newField.text = port.label;
             newPort.label = newField;
             model.fields.add(newField);
@@ -4394,14 +4494,16 @@ class AddNodeCollabAction {
     var _a;
     const node = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
     if (this.parentId !== undefined) {
-      (_a = this.canvas.model.nodes.get(this.parentId)) === null || _a === undefined ? undefined : _a.addChild(node);
-    }
-    if (this.values !== undefined) {
-      node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
+      (_a = this.canvas.model.nodes.get(this.parentId)) === null || _a === void 0 ? void 0 : _a.addChild(node);
     }
     if (node.label) {
       node.label.text = this.label || '';
     }
+    if (this.values !== undefined) {
+      node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
+    } else {
+      node.valueSet.resetValues();
+    }
   }
   serialize() {
     return {
@@ -4418,6 +4520,54 @@ class AddNodeCollabAction {
     return new AddNodeCollabAction(canvas, serialized.id, serialized.typeId, serialized.coords, serialized.parentId, serialized.label, serialized.values);
   }
 }
+/**
+ * Collaborative action which consists of adding or removing sections in a node.
+ * @private
+ * @see AddNodeAction
+ */
+class AddSectionCollabAction {
+  constructor(canvas, nodeId, copyColumnIndex, copyRowIndex, removeColumnIndex, removeRowIndex, timestamp) {
+    this.canvas = canvas;
+    this.nodeId = nodeId;
+    this.copyColumnIndex = copyColumnIndex;
+    this.copyRowIndex = copyRowIndex;
+    this.removeColumnIndex = removeColumnIndex;
+    this.removeRowIndex = removeRowIndex;
+    this.timestamp = timestamp;
+  }
+  do() {
+    const node = this.canvas.model.nodes.get(this.nodeId);
+    if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
+      if (this.copyColumnIndex !== undefined) {
+        node.copySectionColumn(this.copyColumnIndex);
+      }
+      if (this.copyRowIndex !== undefined) {
+        node.copySectionRow(this.copyRowIndex);
+      }
+      if (this.removeColumnIndex !== undefined) {
+        node.removeSectionColumn(this.removeColumnIndex);
+      }
+      if (this.removeRowIndex !== undefined) {
+        node.removeSectionRow(this.removeRowIndex);
+      }
+      node.geometryTimestamp = this.timestamp;
+    }
+  }
+  serialize() {
+    return {
+      type: 'addSection',
+      nodeId: this.nodeId,
+      copyColumnIndex: this.copyColumnIndex,
+      copyRowIndex: this.copyRowIndex,
+      removeColumnIndex: this.removeColumnIndex,
+      removeRowIndex: this.removeRowIndex,
+      timestamp: this.timestamp
+    };
+  }
+  static deserialize(canvas, serialized) {
+    return new AddSectionCollabAction(canvas, serialized.nodeId, serialized.copyColumnIndex, serialized.copyRowIndex, serialized.removeColumnIndex, serialized.removeRowIndex, serialized.timestamp);
+  }
+}
 /**
  * Collaborative which consists of applying a layout to the diagram which can change the location of several nodes.
  * @private
@@ -4468,7 +4618,7 @@ class MoveCollabAction {
       const node = this.canvas.model.nodes.get(nodeId, true);
       if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
         node.move([node.coords[0] + this.delta[0], node.coords[1] + this.delta[1]]);
-        (_a = node.parent) === null || _a === undefined ? undefined : _a.fitToChild(node);
+        (_a = node.parent) === null || _a === void 0 ? void 0 : _a.fitToChild(node);
         node.geometryTimestamp = this.timestamp;
       }
     }
@@ -4503,15 +4653,15 @@ class SetGeometryCollabAction {
     if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
       node.setGeometry(this.to);
       // Re-fit the labels, in case their text has changed since `this.to` was measured.
-      if ((_a = node.label) === null || _a === undefined ? undefined : _a.fit) {
+      if ((_a = node.label) === null || _a === void 0 ? void 0 : _a.fit) {
         this.canvas.fitFieldRootInView(node.label.id);
       }
       for (const section of node.sections) {
-        if ((_b = section.label) === null || _b === undefined ? undefined : _b.fit) {
+        if ((_b = section.label) === null || _b === void 0 ? void 0 : _b.fit) {
           this.canvas.fitFieldRootInView(section.label.id);
         }
       }
-      (_c = node.parent) === null || _c === undefined ? undefined : _c.fitToChild(node);
+      (_c = node.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(node);
       node.geometryTimestamp = this.timestamp;
     }
   }
@@ -4545,9 +4695,9 @@ class SetParentCollabAction {
     const childNode = this.canvas.model.nodes.get(this.childId, true);
     const parentNode = this.parentId !== undefined ? this.canvas.model.nodes.get(this.parentId, true) : undefined;
     if (childNode && (this.parentId !== undefined ? parentNode : true) && timestampWins(this.timestamp, childNode.geometryTimestamp)) {
-      (_a = childNode.parent) === null || _a === undefined ? undefined : _a.removeChild(childNode);
+      (_a = childNode.parent) === null || _a === void 0 ? void 0 : _a.removeChild(childNode);
       childNode.setGeometry(this.childGeometry);
-      parentNode === null || parentNode === undefined ? undefined : parentNode.addChild(childNode);
+      parentNode === null || parentNode === void 0 ? void 0 : parentNode.addChild(childNode);
     }
   }
   serialize() {
@@ -4644,12 +4794,12 @@ class UpdateValuesCollabAction {
     if (this.id === undefined) {
       return this.canvas.model.valueSet;
     } else {
-      return (_a = this.canvas.model.nodes.get(this.id, true) || this.canvas.model.connections.get(this.id, true)) === null || _a === undefined ? undefined : _a.valueSet;
+      return (_a = this.canvas.model.nodes.get(this.id, true) || this.canvas.model.connections.get(this.id, true)) === null || _a === void 0 ? void 0 : _a.valueSet;
     }
   }
   do() {
     var _a;
-    (_a = this.getValueSet()) === null || _a === undefined ? undefined : _a.overwriteValuesLww(this.to, this.timestamp);
+    (_a = this.getValueSet()) === null || _a === void 0 ? void 0 : _a.overwriteValuesLww(this.to, this.timestamp);
   }
   serialize() {
     return {
@@ -4834,6 +4984,12 @@ class CollabEngine {
           action.do();
           break;
         }
+      case 'addSection':
+        {
+          const action = AddSectionCollabAction.deserialize(this.canvas, message);
+          action.do();
+          break;
+        }
       case 'applyLayout':
         {
           const action = ApplyLayoutCollabAction.deserialize(this.canvas, message);
@@ -4996,6 +5152,12 @@ var DiagramActions;
    * @see AddNodeAction
    */
   DiagramActions["AddNode"] = "add-node";
+  /**
+   * Action that corresponds to the addition or removal of sections in a node.
+   * @public
+   * @see AddSectionAction
+   */
+  DiagramActions["AddSectionAction"] = "add-section";
   /**
    * Action that corresponds to applying a layout which changes the location of several nodes.
    * @public
@@ -5637,11 +5799,11 @@ class DiagramDecorator extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateDecoratorsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateDecoratorsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Change the coordinates of this decorator to the given coordinates.
@@ -5726,11 +5888,11 @@ class DiagramObject extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateObjectsInView(this.id);
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateObjectsInView(this.id);
   }
   raise() {
     var _a;
-    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
   }
   /**
    * Change the coordinates of this object to the given coordinates.
@@ -5847,7 +6009,7 @@ class DiagramModel {
    */
   clear() {
     var _a, _b;
-    (_a = this.canvas) === null || _a === undefined ? undefined : _a.cancelAllUserActions();
+    (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.cancelAllUserActions();
     this.id = undefined;
     this.name = '';
     this.description = undefined;
@@ -5862,7 +6024,7 @@ class DiagramModel {
     this.objects.clear();
     this.decorators.clear();
     this.valueSet.resetValues();
-    (_b = this.canvas) === null || _b === undefined ? undefined : _b.updateModelInView();
+    (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.updateModelInView();
   }
 }
 
@@ -5928,7 +6090,6 @@ const updateLook = selection => {
   selection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => d.width - d.look.rightMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.look.rightMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottomRight);
 };
 const GRID_DEFAULTS = {
-  enabled: true,
   style: 'dots',
   color: 'rgba(0, 0, 0, 0.1)',
   snap: false,
@@ -6086,7 +6247,7 @@ class DiagramContextMenu {
    */
   close() {
     var _a;
-    (_a = this.contextMenuContainer) === null || _a === undefined ? undefined : _a.remove();
+    (_a = this.contextMenuContainer) === null || _a === void 0 ? void 0 : _a.remove();
     this.contextMenuContainer = undefined;
   }
 }
@@ -6222,11 +6383,11 @@ class DagaExporter {
       for (const port of section.ports) {
         ports.push(Object.assign({
           id: port.id,
-          type: (_a = port.type) === null || _a === undefined ? undefined : _a.id,
+          type: (_a = port.type) === null || _a === void 0 ? void 0 : _a.id,
           coords: roundPoint(port.coords),
           connectionPoint: roundPoint(port.connectionPoint),
           direction: port.direction,
-          label: ((_b = port.label) === null || _b === undefined ? undefined : _b.text) || ''
+          label: ((_b = port.label) === null || _b === void 0 ? void 0 : _b.text) || ''
         }, includeCollabMeta ? {
           collabMeta: Object.assign({
             removed: port.removed,
@@ -6238,7 +6399,7 @@ class DagaExporter {
       sections.push(Object.assign({
         id: section.id,
         ports,
-        label: ((_c = section.label) === null || _c === undefined ? undefined : _c.text) || '',
+        label: ((_c = section.label) === null || _c === void 0 ? void 0 : _c.text) || '',
         indexXInNode: section.indexXInNode,
         indexYInNode: section.indexYInNode,
         coords: roundPoint(section.coords),
@@ -6256,11 +6417,11 @@ class DagaExporter {
     for (const port of node.ports) {
       ports.push(Object.assign({
         id: port.id,
-        type: (_d = port.type) === null || _d === undefined ? undefined : _d.id,
+        type: (_d = port.type) === null || _d === void 0 ? void 0 : _d.id,
         coords: roundPoint(port.coords),
         connectionPoint: roundPoint(port.connectionPoint),
         direction: port.direction,
-        label: ((_e = port.label) === null || _e === undefined ? undefined : _e.text) || ''
+        label: ((_e = port.label) === null || _e === void 0 ? void 0 : _e.text) || ''
       }, includeCollabMeta ? {
         collabMeta: Object.assign({
           removed: port.removed,
@@ -6275,7 +6436,7 @@ class DagaExporter {
       children,
       sections,
       ports,
-      label: ((_f = node.label) === null || _f === undefined ? undefined : _f.text) || '',
+      label: ((_f = node.label) === null || _f === void 0 ? void 0 : _f.text) || '',
       coords: roundPoint(node.coords),
       width: node.width,
       height: node.height,
@@ -6295,8 +6456,8 @@ class DagaExporter {
     return Object.assign({
       id: connection.id,
       type: connection.type.id,
-      start: ((_a = connection.start) === null || _a === undefined ? undefined : _a.id) || '',
-      end: ((_b = connection.end) === null || _b === undefined ? undefined : _b.id) || '',
+      start: ((_a = connection.start) === null || _a === void 0 ? void 0 : _a.id) || '',
+      end: ((_b = connection.end) === null || _b === void 0 ? void 0 : _b.id) || '',
       startLabel: connection.startLabel,
       middleLabel: connection.middleLabel,
       endLabel: connection.endLabel,
@@ -6516,11 +6677,11 @@ class DiagramUserSelection extends DiagramElementSet {
   openInPropertyEditor(selection) {
     var _a;
     this.makeUpdateValuesAction();
-    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === undefined ? undefined : _a.propertyEditor;
+    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === void 0 ? void 0 : _a.propertyEditor;
     if (propertyEditor === undefined) {
       return;
     }
-    const selectedValueSet = selection === null || selection === undefined ? undefined : selection.valueSet;
+    const selectedValueSet = selection === null || selection === void 0 ? void 0 : selection.valueSet;
     if (selectedValueSet) {
       this.propertyEditorSelection = selection;
       this.propertyEditorValues = structuredClone(selectedValueSet.getValues());
@@ -6562,12 +6723,12 @@ class DiagramUserSelection extends DiagramElementSet {
     const previousSelectionId = this.propertyEditorSelection instanceof DiagramModel ? undefined : this.propertyEditorSelection.id;
     // check if there have been changes in the previously selected ValueSet,
     // and create an UpdateValuesAction if there have
-    if (equals(this.propertyEditorValues, (_a = this.propertyEditorSelection) === null || _a === undefined ? undefined : _a.valueSet.getValues())) {
+    if (equals(this.propertyEditorValues, (_a = this.propertyEditorSelection) === null || _a === void 0 ? void 0 : _a.valueSet.getValues())) {
       return;
     }
     const from = this.propertyEditorValues;
-    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === undefined ? undefined : _b.valueSet.getValues());
-    const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === undefined ? undefined : _c.valueSet);
+    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
+    const [fromDiff, toDiff] = diffProperties(from, to, (_c = this.propertyEditorSelection) === null || _c === void 0 ? void 0 : _c.valueSet);
     const currentAction = new UpdateValuesAction(this.canvas, previousSelectionId, fromDiff, toDiff);
     currentAction.do();
     this.canvas.actionStack.add(currentAction);
@@ -6601,7 +6762,7 @@ class DiagramCanvas {
     var _a, _b;
     this._connectionType = value;
     // refresh the palette every time connectionType is set so that the palette keeps track of updates to the connectionType
-    (_b = (_a = this.parentComponent) === null || _a === undefined ? undefined : _a.palette) === null || _b === undefined ? undefined : _b.refreshPalette();
+    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
   }
   /**
    * Constructs a canvas object.
@@ -6627,18 +6788,18 @@ class DiagramCanvas {
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
     this.userSelection = new DiagramUserSelection(this);
     this.userHighlight = new DiagramUserHighlight(this);
-    this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === undefined ? undefined : _a.contextMenu);
-    this.backgroundColor = ((_b = config.canvas) === null || _b === undefined ? undefined : _b.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === undefined ? undefined : _c.grid) === null || _d === undefined ? undefined : _d.style) !== null && _e !== undefined ? _e : GRID_DEFAULTS.style;
-    this.gridSize = ((_g = (_f = config.canvas) === null || _f === undefined ? undefined : _f.grid) === null || _g === undefined ? undefined : _g.enabled) === false || ((_h = config.canvas) === null || _h === undefined ? undefined : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === undefined ? undefined : _j.grid) === null || _k === undefined ? undefined : _k.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === undefined ? undefined : _l.grid) === null || _m === undefined ? undefined : _m.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_p = (_o = config.canvas) === null || _o === undefined ? undefined : _o.grid) === null || _p === undefined ? undefined : _p.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === undefined ? undefined : _q.grid) === null || _r === undefined ? undefined : _r.enabled) === false || ((_s = config.canvas) === null || _s === undefined ? undefined : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === undefined ? undefined : _t.grid) === null || _u === undefined ? undefined : _u.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_v = config.canvas) === null || _v === undefined ? undefined : _v.zoomFactor) || 2;
-    this.panRate = ((_w = config.canvas) === null || _w === undefined ? undefined : _w.panRate) || 100;
+    this.contextMenu = new DiagramContextMenu(this, (_a = config.canvas) === null || _a === void 0 ? void 0 : _a.contextMenu);
+    this.backgroundColor = ((_b = config.canvas) === null || _b === void 0 ? void 0 : _b.backgroundColor) || '#FFFFFF';
+    this.gridStyle = (_e = (_d = (_c = config.canvas) === null || _c === void 0 ? void 0 : _c.grid) === null || _d === void 0 ? void 0 : _d.style) !== null && _e !== void 0 ? _e : GRID_DEFAULTS.style;
+    this.gridSize = ((_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.enabled) === false || ((_h = config.canvas) === null || _h === void 0 ? void 0 : _h.grid) === undefined ? 0 : Math.abs(((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.spacing) || GRID_DEFAULTS.spacing);
+    this.gridThickness = Math.abs(((_m = (_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === null || _m === void 0 ? void 0 : _m.thickness) || GRID_DEFAULTS.thickness);
+    this.gridColor = ((_p = (_o = config.canvas) === null || _o === void 0 ? void 0 : _o.grid) === null || _p === void 0 ? void 0 : _p.color) || GRID_DEFAULTS.color;
+    this.snapToGrid = ((_r = (_q = config.canvas) === null || _q === void 0 ? void 0 : _q.grid) === null || _r === void 0 ? void 0 : _r.enabled) === false || ((_s = config.canvas) === null || _s === void 0 ? void 0 : _s.grid) === undefined ? false : ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.snap) || GRID_DEFAULTS.snap;
+    this.zoomFactor = ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.zoomFactor) || 2;
+    this.panRate = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.panRate) || 100;
     this.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_x = config.canvas) === null || _x === undefined ? undefined : _x.priorityThresholds) || [];
+    this.priorityThresholds = ((_x = config.canvas) === null || _x === void 0 ? void 0 : _x.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -6689,7 +6850,7 @@ class DiagramCanvas {
     for (const node of this.model.nodes) {
       this.fitNodeInView(node.id);
     }
-    (_b = (_a = this.parentComponent) === null || _a === undefined ? undefined : _a.palette) === null || _b === undefined ? undefined : _b.refreshPalette();
+    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
   }
   // View methods
   initView(appendTo) {
@@ -6703,7 +6864,7 @@ class DiagramCanvas {
       var _a;
       // focus on the diagram when clicking so that we can focus on the diagram
       // keyboard events only work if we're focusing on the diagram
-      (_a = d3.select(this.diagramRoot).node()) === null || _a === undefined ? undefined : _a.focus();
+      (_a = d3.select(this.diagramRoot).node()) === null || _a === void 0 ? void 0 : _a.focus();
     }).on(Events.ContextMenu, event => {
       if (this.dragging) {
         event.preventDefault();
@@ -6926,7 +7087,7 @@ class DiagramCanvas {
     var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
-      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === undefined ? undefined : _a.getBBox();
+      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
       const nonRemovedNodes = this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
@@ -6958,8 +7119,8 @@ class DiagramCanvas {
   }
   getCoordinatesOnScreen() {
     var _a;
-    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
-    const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.height) || 0];
+    const rootBoundingClientRect = (_a = this.selectSVGElement().node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.height) || 0];
     return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -7214,7 +7375,7 @@ class DiagramCanvas {
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
       var _a, _b, _c, _d, _e;
-      return `diagram-section${((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.resizableY) ? ' resizable-y' : ''} ${(_e = d.look) === null || _e === undefined ? undefined : _e.lookType}`;
+      return `diagram-section${((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.resizableY) ? ' resizable-y' : ''} ${(_e = d.look) === null || _e === void 0 ? void 0 : _e.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -7263,7 +7424,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        const node = d === null || d === undefined ? undefined : d.node;
+        const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
           this.startMovingNode(event, node);
         } else {
@@ -7274,7 +7435,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.continueMultipleSelection(event);
       } else {
-        const node = d === null || d === undefined ? undefined : d.node;
+        const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
           this.continueMovingNode(event, node);
         } else {
@@ -7285,7 +7446,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.finishMultipleSelection(event);
       } else {
-        const node = d === null || d === undefined ? undefined : d.node;
+        const node = d === null || d === void 0 ? void 0 : d.node;
         if (node) {
           this.finishMovingNode(event, node);
         } else {
@@ -7297,17 +7458,17 @@ class DiagramCanvas {
     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) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -7315,13 +7476,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7336,17 +7497,17 @@ class DiagramCanvas {
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -7354,13 +7515,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7375,17 +7536,17 @@ class DiagramCanvas {
     }));
     enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -7393,13 +7554,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7414,17 +7575,17 @@ class DiagramCanvas {
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -7432,13 +7593,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -7477,13 +7638,13 @@ class DiagramCanvas {
       if (this.unfinishedConnection) {
         const canConnectionFinishAtThisPort =
         // can start at the starting port
-        this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === undefined ? undefined : _a.getNode()) === null || _b === undefined ? undefined : _b.type) === null || _c === undefined ? undefined : _c.id) || '') && ((_d = this.unfinishedConnection.start) === null || _d === undefined ? undefined : _d.allowsOutgoing) &&
+        this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === void 0 ? void 0 : _a.getNode()) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) || '') && ((_d = this.unfinishedConnection.start) === null || _d === void 0 ? void 0 : _d.allowsOutgoing) &&
         // can end at the ending port
-        this.unfinishedConnection.type.canFinishOnType(((_f = (_e = d.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '') && d.allowsIncoming ||
+        this.unfinishedConnection.type.canFinishOnType(((_f = (_e = d.getNode()) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.id) || '') && d.allowsIncoming ||
         // can start at the ending port
-        this.unfinishedConnection.type.canStartFromType(((_h = (_g = d.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && d.allowsOutgoing &&
+        this.unfinishedConnection.type.canStartFromType(((_h = (_g = d.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && d.allowsOutgoing &&
         // can end at the starting port
-        this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = this.unfinishedConnection.start) === null || _j === undefined ? undefined : _j.getNode()) === null || _k === undefined ? undefined : _k.type) === null || _l === undefined ? undefined : _l.id) || '') && ((_m = this.unfinishedConnection.start) === null || _m === undefined ? undefined : _m.allowsIncoming);
+        this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.getNode()) === null || _k === void 0 ? void 0 : _k.type) === null || _l === void 0 ? void 0 : _l.id) || '') && ((_m = this.unfinishedConnection.start) === null || _m === void 0 ? void 0 : _m.allowsIncoming);
         if (!canConnectionFinishAtThisPort) {
           setCursorStyle(CursorStyle.NoDrop);
         }
@@ -7548,8 +7709,8 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === undefined ? undefined : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === undefined ? undefined : _c.width));
-            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === undefined ? undefined : _d.node();
+            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.look.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.look.thickness, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.width, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.width));
+            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
               const unfinishedConnectionTotalLength = unfinishedConnectionGhostNode.getTotalLength();
@@ -7590,7 +7751,7 @@ class DiagramCanvas {
         this.finishMultipleSelection(event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
-          (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _a.remove();
+          (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.remove();
           const userHighlight = this.userHighlight.getFocus();
           if (userHighlight instanceof DiagramPort) {
             this.finishConnection(userHighlight);
@@ -7696,11 +7857,11 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     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, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.width, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.width);
+      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === 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).attr('stroke-width', d => `${d.look.thickness}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.width, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.width);
+      return getConnectionPath(d.look.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.look.thickness, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.width, (_b = d.endMarkerLook) === 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 + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.look.style, d.look.thickness)).attr('fill', 'none');
@@ -7755,8 +7916,12 @@ class DiagramCanvas {
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.EditField) && d.editable && !d.removed) {
         this.currentAction = new EditFieldAction(this, d.id, d.text, '');
-        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, text => {
-          d.text = text;
+        this.createInputField(d.text, d.coords, d.width, d.height, d.fontSize, d.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, d.orientation, text => {
+          /*
+          Empty for now
+          We should create a better function to stretch the root element as the text expands
+          Bear in mind that DiagramNode.setGeometry() calls DiagramNode.raise(), which breaks the input field
+          */
         }, text => {
           d.text = text;
           if (this.currentAction instanceof EditFieldAction) {
@@ -7820,7 +7985,24 @@ 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' : '100%').style('max-height', d => d.fit ? 'default' : '100%').style('overflow', d => d.fit ? 'default' : 'hidden').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').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/>'));
+    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' : '100%').style('max-height', d => d.fit ? 'default' : '100%').style('overflow', d => d.fit ? 'default' : 'hidden').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 => {
+      if (!isNaN(Number(d.orientation))) {
+        return `rotate(${d.orientation}deg)`;
+      } else {
+        switch (d.orientation) {
+          case Side.Top:
+            return 'rotate(0deg)';
+          case Side.Right:
+            return 'rotate(90deg)';
+          case Side.Bottom:
+            return 'rotate(180deg)';
+          case Side.Left:
+            return 'rotate(270deg)';
+          default:
+            return 'rotate(0deg)';
+        }
+      }
+    }).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/>'));
   }
   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);
@@ -7970,7 +8152,7 @@ class DiagramCanvas {
   }
   updateConnectionLabelsInView(connection) {
     var _a, _b, _c;
-    const connectionSelection = this.selectCanvasView().select(`g.diagram-connection#${connection.id}`);
+    const connectionSelection = this.selectCanvasView().select(`[id='${escapeSelector(connection.id)}']`);
     const pathSelection = connectionSelection.select('path');
     const pathNode = pathSelection.node();
     const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), connection.type.label);
@@ -7978,7 +8160,7 @@ class DiagramCanvas {
       const pathLength = pathNode.getTotalLength();
       // bind start labels
       connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.startLabel);
-      const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
+      const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
       if (startLabelBoundingRect) {
         // don't create space for the label if the label is empty
         const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
@@ -7989,7 +8171,7 @@ class DiagramCanvas {
       }
       // bind middle labels
       connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.middleLabel);
-      const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === undefined ? undefined : _b.getBoundingClientRect();
+      const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
       if (middleLabelBoundingRect) {
         // don't create space for the label if the label is empty
         const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
@@ -8000,7 +8182,7 @@ class DiagramCanvas {
       }
       // bind end labels
       connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.endLabel);
-      const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
+      const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
       if (endLabelBoundingRect) {
         // don't create space for the label if the label is empty
         const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
@@ -8012,7 +8194,7 @@ class DiagramCanvas {
     }
   }
   updateConnectionMarkersInView(connection) {
-    const connectionSelection = this.selectCanvasView().select(`g.diagram-connection#${connection.id}`);
+    const connectionSelection = this.selectCanvasView().select(`[id='${escapeSelector(connection.id)}']`);
     const startMarkerSelection = connectionSelection.select('marker.diagram-connection-start-marker');
     const endMarkerSelection = connectionSelection.select('marker.diagram-connection-end-marker');
     if (connection.startMarkerLook !== null) {
@@ -8026,13 +8208,27 @@ class DiagramCanvas {
       endMarkerSelection.attr('orient', 'auto-start-reverse').attr('markerWidth', 0).attr('markerHeight', 0);
     }
   }
-  fitFieldRootInView(id) {
+  fieldRootFitsInView(id) {
+    var _a, _b, _c, _d;
+    const field = this.model.fields.get(id);
+    if (!field) {
+      return false;
+    }
+    if (field.rootElement instanceof DiagramNode || field.rootElement instanceof DiagramSection) {
+      const fieldDimensions = this.minimumSizeOfField(field);
+      const stretchX = fieldDimensions[0] + getLeftMargin((_a = field.rootElement.type) === null || _a === void 0 ? void 0 : _a.label) + getRightMargin((_b = field.rootElement.type) === null || _b === void 0 ? void 0 : _b.label) - field.rootElement.width;
+      const stretchY = fieldDimensions[1] + getTopMargin((_c = field.rootElement.type) === null || _c === void 0 ? void 0 : _c.label) + getBottomMargin((_d = field.rootElement.type) === null || _d === void 0 ? void 0 : _d.label) - field.rootElement.height;
+      return stretchX <= 0 && stretchY <= 0;
+    }
+    return true;
+  }
+  fitFieldRootInView(id, shrink) {
     var _a, _b, _c;
     const field = this.model.fields.get(id);
     if (!field) {
       return;
     }
-    if (field.rootElement instanceof DiagramNode && field.fit) {
+    if (field.rootElement instanceof DiagramNode) {
       const fieldDimensions = this.minimumSizeOfField(field);
       let stretchX = fieldDimensions[0] + getLeftMargin(field.rootElement.type.label) + getRightMargin(field.rootElement.type.label) - field.rootElement.width;
       let stretchY = fieldDimensions[1] + getTopMargin(field.rootElement.type.label) + getBottomMargin(field.rootElement.type.label) - field.rootElement.height;
@@ -8047,14 +8243,18 @@ class DiagramCanvas {
       if (field.rootElement.height + stretchY < field.rootElement.type.minHeight) {
         stretchY = field.rootElement.type.minHeight - field.rootElement.height;
       }
-      field.rootElement.stretch(Side.Right, stretchX);
-      field.rootElement.stretch(Side.Bottom, stretchY);
+      if (shrink !== false || stretchX > 0) {
+        field.rootElement.stretch(Side.Right, stretchX);
+      }
+      if (shrink !== false || stretchY > 0) {
+        field.rootElement.stretch(Side.Bottom, stretchY);
+      }
     }
-    if (field.rootElement instanceof DiagramSection && field.fit) {
+    if (field.rootElement instanceof DiagramSection) {
       const fieldDimensions = this.minimumSizeOfField(field);
       let minimumFieldWidth = fieldDimensions[0];
       let minimumFieldHeight = fieldDimensions[1];
-      for (const section of ((_a = field.rootElement.node) === null || _a === undefined ? undefined : _a.sections) || []) {
+      for (const section of ((_a = field.rootElement.node) === null || _a === void 0 ? void 0 : _a.sections) || []) {
         if (section.label) {
           if (section.indexXInNode === field.rootElement.indexXInNode && section.indexYInNode !== field.rootElement.indexYInNode) {
             minimumFieldWidth = Math.max(minimumFieldWidth, this.minimumSizeOfField(section.label)[0]);
@@ -8070,8 +8270,8 @@ class DiagramCanvas {
         fieldDimensions[1] = minimumFieldHeight;
       }
       const type = field.rootElement.type;
-      let stretchX = fieldDimensions[0] + getLeftMargin(type === null || type === undefined ? undefined : type.label) + getRightMargin(type === null || type === undefined ? undefined : type.label) - field.rootElement.width;
-      let stretchY = fieldDimensions[1] + getTopMargin(type === null || type === undefined ? undefined : type.label) + getBottomMargin(type === null || type === undefined ? undefined : type.label) - field.rootElement.height;
+      let stretchX = fieldDimensions[0] + getLeftMargin(type === null || type === void 0 ? void 0 : type.label) + getRightMargin(type === null || type === void 0 ? void 0 : type.label) - field.rootElement.width;
+      let stretchY = fieldDimensions[1] + getTopMargin(type === null || type === void 0 ? void 0 : type.label) + getBottomMargin(type === null || type === void 0 ? void 0 : type.label) - field.rootElement.height;
       if (this.snapToGrid) {
         stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
         stretchY = Math.ceil(stretchY / this.gridSize) * this.gridSize;
@@ -8083,8 +8283,12 @@ class DiagramCanvas {
       if (field.rootElement.height + stretchY < (field.rootElement.getMinHeight() || 0)) {
         stretchY = (field.rootElement.getMinHeight() || 0) - field.rootElement.height;
       }
-      (_b = field.rootElement.node) === null || _b === undefined ? undefined : _b.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
-      (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      if (shrink !== false || stretchX > 0) {
+        (_b = field.rootElement.node) === null || _b === void 0 ? void 0 : _b.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      }
+      if (shrink !== false || stretchY > 0) {
+        (_c = field.rootElement.node) === null || _c === void 0 ? void 0 : _c.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      }
     }
   }
   fitNodeInView(id) {
@@ -8106,8 +8310,8 @@ class DiagramCanvas {
         }
       }
       // add the margin that goes between the rightmost and bottommost points of the sections and the edge of the node
-      newNodeWidth += ((_a = node.type.sectionGrid) === null || _a === undefined ? undefined : _a.margin) || 0;
-      newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === undefined ? undefined : _b.margin) || 0;
+      newNodeWidth += ((_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
+      newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === void 0 ? void 0 : _b.margin) || 0;
       node.stretch(Side.Right, newNodeWidth - node.width);
       node.stretch(Side.Bottom, newNodeHeight - node.height);
     }
@@ -8128,18 +8332,18 @@ class DiagramCanvas {
   startConnection(port) {
     var _a, _b, _c, _d;
     if (port.allowsOutgoing || port.allowsIncoming) {
-      if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && port.allowsIncoming)) {
+      if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '') && port.allowsOutgoing || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && port.allowsIncoming)) {
         this.unfinishedConnection = new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID);
       } else {
         if (this.inferConnectionType) {
           let differentConnectionType = this.model.connections.types.all().find(t => {
             var _a, _b;
-            return port.allowsOutgoing && t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
+            return port.allowsOutgoing && t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '');
           });
           if (differentConnectionType === undefined) {
             differentConnectionType = this.model.connections.types.all().find(t => {
               var _a, _b;
-              return port.allowsIncoming && t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
+              return port.allowsIncoming && t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '');
             });
           }
           if (differentConnectionType !== undefined) {
@@ -8154,14 +8358,14 @@ class DiagramCanvas {
     this.userHighlight.clear();
     if (this.unfinishedConnection !== undefined) {
       if (this.unfinishedConnection.start !== port) {
-        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsIncoming) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === undefined ? undefined : _j.id, port.id);
+        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming) {
+          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_j = this.unfinishedConnection.start) === null || _j === void 0 ? void 0 : _j.id, port.id);
           // clean up the previous unfinished connection
           this.dropConnection();
           addConnectionAction.do();
           this.actionStack.add(addConnectionAction);
-        } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === undefined ? undefined : _k.start) === null || _l === undefined ? undefined : _l.getNode()) === null || _m === undefined ? undefined : _m.type) === null || _o === undefined ? undefined : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === undefined ? undefined : _p.start) === null || _q === undefined ? undefined : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === undefined ? undefined : _r.type) === null || _s === undefined ? undefined : _s.id) || '') && port.allowsOutgoing) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === undefined ? undefined : _t.id);
+        } else if (this.unfinishedConnection.type.canFinishOnType(((_o = (_m = (_l = (_k = this.unfinishedConnection) === null || _k === void 0 ? void 0 : _k.start) === null || _l === void 0 ? void 0 : _l.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '') && ((_q = (_p = this.unfinishedConnection) === null || _p === void 0 ? void 0 : _p.start) === null || _q === void 0 ? void 0 : _q.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(((_s = (_r = port.getNode()) === null || _r === void 0 ? void 0 : _r.type) === null || _s === void 0 ? void 0 : _s.id) || '') && port.allowsOutgoing) {
+          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_t = this.unfinishedConnection.start) === null || _t === void 0 ? void 0 : _t.id);
           // clean up the previous unfinished connection
           this.dropConnection();
           addConnectionAction.do();
@@ -8170,18 +8374,18 @@ class DiagramCanvas {
           if (this.inferConnectionType) {
             let differentConnectionType = this.model.connections.types.all().find(t => {
               var _a, _b, _c, _d, _e, _f, _g, _h;
-              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsIncoming;
+              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsOutgoing) && t.canFinishOnType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsIncoming;
             });
             let invertConnection = false;
             if (differentConnectionType === undefined) {
               differentConnectionType = this.model.connections.types.all().find(t => {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
-                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === undefined ? undefined : _e.start) === null || _f === undefined ? undefined : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === undefined ? undefined : _g.type) === null || _h === undefined ? undefined : _h.id) || '') && port.allowsOutgoing;
+                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && ((_f = (_e = this.unfinishedConnection) === null || _e === void 0 ? void 0 : _e.start) === null || _f === void 0 ? void 0 : _f.allowsIncoming) && t.canStartFromType(((_h = (_g = port.getNode()) === null || _g === void 0 ? void 0 : _g.type) === null || _h === void 0 ? void 0 : _h.id) || '') && port.allowsOutgoing;
               });
               invertConnection = true;
             }
             if (differentConnectionType !== undefined) {
-              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === undefined ? undefined : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === undefined ? undefined : _v.id : port.id);
+              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_u = this.unfinishedConnection.start) === null || _u === void 0 ? void 0 : _u.id, invertConnection ? (_v = this.unfinishedConnection.start) === null || _v === void 0 ? void 0 : _v.id : port.id);
               // clean up the previous unfinished connection
               this.dropConnection();
               addConnectionAction.do();
@@ -8203,9 +8407,9 @@ class DiagramCanvas {
   }
   dropConnection() {
     var _a, _b, _c, _d;
-    (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.setStart(undefined);
-    (_b = this.unfinishedConnection) === null || _b === undefined ? undefined : _b.setEnd(undefined);
-    (_d = (_c = this.unfinishedConnection) === null || _c === undefined ? undefined : _c.select()) === null || _d === undefined ? undefined : _d.remove();
+    (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.setStart(undefined);
+    (_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.setEnd(undefined);
+    (_d = (_c = this.unfinishedConnection) === null || _c === void 0 ? void 0 : _c.select()) === null || _d === void 0 ? void 0 : _d.remove();
     this.unfinishedConnection = undefined;
   }
   cancelAllUserActions() {
@@ -8218,7 +8422,7 @@ class DiagramCanvas {
   canUserPerformAction(action) {
     return this.userActions[action] !== false;
   }
-  createInputField(text, coords, width, height, fontSize, fontFamily, changeCallback, finishCallback) {
+  createInputField(text, coords, width, height, fontSize, fontFamily, orientation, 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');
@@ -8250,9 +8454,9 @@ class DiagramCanvas {
       // keep the field from shrinking below its original size
       const newWidth = Math.max(inputFieldWidth, width);
       const newHeight = Math.max(inputFieldHeight, height);
-      inputFieldContainer === null || inputFieldContainer === undefined ? undefined : inputFieldContainer.attr('width', `${newWidth}px`);
+      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('width', `${newWidth}px`);
       inputField.style('width', `${newWidth}px`);
-      inputFieldContainer === null || inputFieldContainer === undefined ? undefined : inputFieldContainer.attr('height', `${newHeight}px`);
+      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('height', `${newHeight}px`);
       inputField.style('height', `${newHeight}px`);
       if (changeCallback) {
         changeCallback(value);
@@ -8274,13 +8478,13 @@ class DiagramCanvas {
     var _a, _b, _c;
     // when removing an element, a blur event is emitted
     // we remove the listener for blur so that it doesn't shoot again on element removal
-    (_b = (_a = this.inputFieldContainer) === null || _a === undefined ? undefined : _a.select('input')) === null || _b === undefined ? undefined : _b.on(Events.Blur, null);
-    (_c = this.inputFieldContainer) === null || _c === undefined ? undefined : _c.remove();
+    (_b = (_a = this.inputFieldContainer) === null || _a === void 0 ? void 0 : _a.select('input')) === null || _b === void 0 ? void 0 : _b.on(Events.Blur, null);
+    (_c = this.inputFieldContainer) === null || _c === void 0 ? void 0 : _c.remove();
     this.inputFieldContainer = undefined;
   }
   minimumSizeOfField(field) {
     var _a, _b;
-    const pNode = (_b = (_a = field.select()) === null || _a === undefined ? undefined : _a.select('p')) === null || _b === undefined ? undefined : _b.node();
+    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) {
       // happens when a field has been created but not updated in view yet
       return [0, 0];
@@ -8299,7 +8503,7 @@ class DiagramCanvas {
         this.currentAction = new MoveAction(this, this.userSelection.filter(e => e instanceof DiagramNode).map(n => n.id), d.coords);
       } else {
         const ancestorOfNode = d.getLastAncestor();
-        this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, d.id, d.getGeometry(), d.getGeometry(), ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.id, ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id), ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id));
+        this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, d.id, d.getGeometry(), d.getGeometry(), ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id, ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id), ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id));
       }
     } else {
       setCursorStyle(CursorStyle.NotAllowed);
@@ -8352,23 +8556,23 @@ class DiagramCanvas {
           const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
           const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
           if (droppedOn !== d.parent && (d.type.canBeParentless || droppedOn !== undefined)) {
-            const ancestorOfDroppedOn = droppedOn === null || droppedOn === undefined ? undefined : droppedOn.getLastAncestor();
+            const ancestorOfDroppedOn = droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.getLastAncestor();
             const fromChildGeometry = this.currentAction.from;
-            const setParentAction = new SetParentAction(this, d.id, (_a = d.parent) === null || _a === undefined ? undefined : _a.id, droppedOn === null || droppedOn === undefined ? undefined : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id));
-            (_b = d.parent) === null || _b === undefined ? undefined : _b.removeChild(d);
+            const setParentAction = new SetParentAction(this, d.id, (_a = d.parent) === null || _a === void 0 ? void 0 : _a.id, droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id));
+            (_b = d.parent) === null || _b === void 0 ? void 0 : _b.removeChild(d);
             if (droppedOn !== undefined) {
               droppedOn.addChild(d);
             }
             setParentAction.toChildGeometry = d.getGeometry(d.id);
-            setParentAction.toAncestorGeometry = ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id);
+            setParentAction.toAncestorGeometry = ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id);
             this.currentAction = setParentAction;
           } else {
-            const ancestorOfNode = d === null || d === undefined ? undefined : d.getLastAncestor();
-            this.currentAction.ancestorId = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.id;
-            this.currentAction.fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id);
-            (_c = d.parent) === null || _c === undefined ? undefined : _c.fitToChild(d);
+            const ancestorOfNode = d === null || d === void 0 ? void 0 : d.getLastAncestor();
+            this.currentAction.ancestorId = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id;
+            this.currentAction.fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
+            (_c = d.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(d);
             this.currentAction.to = d.getGeometry(d.id);
-            this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id);
+            this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
           }
         }
         if (this.currentAction !== undefined) {
@@ -8394,14 +8598,14 @@ class DiagramCanvas {
       setCursorStyle(CursorStyle.Crosshair);
       // since the multiple selection rectangle is not affected by zoom,
       // we compensate its coordinates based in the zoom transform to draw it
-      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]) * this.zoomTransform.k + this.zoomTransform.x)) === null || _b === undefined ? undefined : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]) * this.zoomTransform.k + this.zoomTransform.y)) === null || _c === undefined ? undefined : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]) * this.zoomTransform.k)) === null || _d === undefined ? undefined : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]) * this.zoomTransform.k);
+      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]) * this.zoomTransform.k + this.zoomTransform.x)) === null || _b === void 0 ? void 0 : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]) * this.zoomTransform.k + this.zoomTransform.y)) === null || _c === void 0 ? void 0 : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]) * this.zoomTransform.k)) === null || _d === void 0 ? void 0 : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]) * this.zoomTransform.k);
       this.dragging = true;
     }
   }
   finishMultipleSelection(event) {
     var _a;
     const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-    (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.remove();
+    (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.remove();
     this.multipleSelectionContainer = undefined;
     this.userSelection.clear();
     for (const node of this.model.nodes) {
@@ -8495,7 +8699,7 @@ class CollabClient {
           const initialModel = message.initialModel;
           new DagaImporter().import(session.canvas.model, initialModel);
           this.startSyncing(session);
-          (_a = session.joinRoomResolve) === null || _a === undefined ? undefined : _a.call(session);
+          (_a = session.joinRoomResolve) === null || _a === void 0 ? void 0 : _a.call(session);
           session.joinRoomResolve = undefined;
           break;
         }
@@ -8518,7 +8722,7 @@ class CollabClient {
           session.locator = message.locator;
           this.pendingSessions.delete(message.refId);
           this.sessions.set(session.locator, session);
-          (_b = session.createRoomResolve) === null || _b === undefined ? undefined : _b.call(session, session.locator);
+          (_b = session.createRoomResolve) === null || _b === void 0 ? void 0 : _b.call(session, session.locator);
           session.createRoomResolve = undefined;
           // Deliver queued AddMessages now that we have a locator.
           for (const message of session.addQueue) {
@@ -8773,6 +8977,9 @@ class Grid {
  * @public
  */
 class AdjacencyLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8788,7 +8995,7 @@ class AdjacencyLayout {
     // place nodes according to arrangement
     const maximumWidth = Math.max(...model.nodes.map(n => n.width));
     const maximumHeight = Math.max(...model.nodes.map(n => n.height));
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
@@ -8816,6 +9023,9 @@ const arrangeNode = (node, nodeArrangement, coords, nodesToBeArranged) => {
  * @public
  */
 class BreadthAdjacencyLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8853,7 +9063,7 @@ class BreadthAdjacencyLayout {
     // place nodes according to arrangement
     const maximumWidth = Math.max(...model.nodes.map(n => n.width));
     const maximumHeight = Math.max(...model.nodes.map(n => n.height));
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
@@ -8871,13 +9081,16 @@ class BreadthAdjacencyLayout {
  * @public
  */
 class BreadthLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     let nodesToBeArranged = model.nodes.filter(n => !n.parent);
     // Arrange nodes by a breadth first search
     const firstNode = nodesToBeArranged[0];
@@ -8933,6 +9146,9 @@ class BreadthLayout {
  * @public
  */
 class ForceLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8941,7 +9157,7 @@ class ForceLayout {
     }
     // as a starting point, we apply a simple layout
     new BreadthLayout().apply(model);
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const coolingFactor = 0.99;
     const minimumTemperature = 1;
     const attractionFactor = 0.1;
@@ -9028,13 +9244,16 @@ class ForceLayout {
  * @public
  */
 class HorizontalLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let widthAccumulator = 0;
@@ -9051,6 +9270,9 @@ class HorizontalLayout {
  * @public
  */
 class PriorityLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9064,7 +9286,7 @@ class PriorityLayout {
       new BreadthLayout().apply(model);
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     const nodeArrangement = [];
     const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(n => !n.parent).filter(n => n.getPriority() >= maximumPriority);
@@ -9158,6 +9380,9 @@ class PriorityLayout {
  * @public
  */
 class TreeLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9171,7 +9396,7 @@ class TreeLayout {
       new BreadthLayout().apply(model);
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent).sort((n1, n2) => n2.getPriority() - n1.getPriority());
     const branches = [];
     while (nodesToBeArranged.length > 0) {
@@ -9256,13 +9481,16 @@ class Branch {
  * @public
  */
 class VerticalLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let heightAccumulator = 0;