@metadev/daga 4.0.2 → 4.1.0

package/Changelog.md

@@ -6,6 +6,20 @@ List of releases and changes.
 
 ## Next release Joyeuse
 
+## v. 4.1.0
+
+- Add methods for adding and removing rows and columns of sections in a node.
+- Allow toggling gapSize in layout algorithms [#279](https://github.com/metadevpro/daga/pull/279)
+- Raise ports after raising sections inside nodes so that sections don't hide ports [#280](https://github.com/metadevpro/daga/pull/280)
+- Add `fieldRootFitsInView()` method to canvas [#281](https://github.com/metadevpro/daga/pull/281)
+- Add `shrink` parameter to canvas method `fitFieldRootInView()` to toggle whether nodes and sections should be shrunk as part of the fitting process [#282](https://github.com/metadevpro/daga/pull/282)
+- Set root vlaue of property to default value when resetting values [#284](https://github.com/metadevpro/daga/pull/284)
+
+## v. 4.0.3
+
+- Allow angular 20.
+- Fix bug with connections breaking when they have an id which is not a valid CSS selector [#277](https://github.com/metadevpro/daga/pull/277)
+
 ## v. 4.0.2
 
 - Add grid style [#261](https://github.com/metadevpro/daga/pull/261)

package/index.cjs.js

@@ -1691,10 +1691,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) {
@@ -3160,15 +3158,15 @@ class DiagramNode extends DiagramElement {
   raise() {
     var _a;
     (_a = this.select()) === null || _a === undefined ? undefined : _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();
     }
@@ -3602,6 +3600,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 === undefined ? undefined : _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(exports.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 === undefined ? undefined : _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(exports.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 === undefined ? undefined : _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(exports.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 === undefined ? undefined : _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(exports.Side.Bottom, margin + rowHeight);
+  }
 }
 class DiagramNodeSet extends DiagramElementSet {
   /**
@@ -4439,6 +4537,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
@@ -4855,6 +5001,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);
@@ -5017,6 +5169,12 @@ exports.DiagramActions = void 0;
    * @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
@@ -7991,7 +8149,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);
@@ -8033,7 +8191,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) {
@@ -8047,13 +8205,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 === undefined ? undefined : _a.label) + getRightMargin((_b = field.rootElement.type) === null || _b === undefined ? undefined : _b.label) - field.rootElement.width;
+      const stretchY = fieldDimensions[1] + getTopMargin((_c = field.rootElement.type) === null || _c === undefined ? undefined : _c.label) + getBottomMargin((_d = field.rootElement.type) === null || _d === undefined ? undefined : _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;
@@ -8068,10 +8240,14 @@ class DiagramCanvas {
       if (field.rootElement.height + stretchY < field.rootElement.type.minHeight) {
         stretchY = field.rootElement.type.minHeight - field.rootElement.height;
       }
-      field.rootElement.stretch(exports.Side.Right, stretchX);
-      field.rootElement.stretch(exports.Side.Bottom, stretchY);
+      if (shrink !== false || stretchX > 0) {
+        field.rootElement.stretch(exports.Side.Right, stretchX);
+      }
+      if (shrink !== false || stretchY > 0) {
+        field.rootElement.stretch(exports.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];
@@ -8104,8 +8280,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(exports.Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
-      (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(exports.Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      if (shrink !== false || stretchX > 0) {
+        (_b = field.rootElement.node) === null || _b === undefined ? undefined : _b.stretchSections(exports.Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      }
+      if (shrink !== false || stretchY > 0) {
+        (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(exports.Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      }
     }
   }
   fitNodeInView(id) {
@@ -8794,6 +8974,9 @@ class Grid {
  * @public
  */
 class AdjacencyLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8809,7 +8992,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 === undefined ? undefined : _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]);
@@ -8837,6 +9020,9 @@ const arrangeNode = (node, nodeArrangement, coords, nodesToBeArranged) => {
  * @public
  */
 class BreadthAdjacencyLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8874,7 +9060,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 === undefined ? undefined : _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]);
@@ -8892,13 +9078,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 === undefined ? undefined : _a.gridSize) || 0) * 2;
     let nodesToBeArranged = model.nodes.filter(n => !n.parent);
     // Arrange nodes by a breadth first search
     const firstNode = nodesToBeArranged[0];
@@ -8954,6 +9143,9 @@ class BreadthLayout {
  * @public
  */
 class ForceLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8962,7 +9154,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 === undefined ? undefined : _a.gridSize) || 0) * 2;
     const coolingFactor = 0.99;
     const minimumTemperature = 1;
     const attractionFactor = 0.1;
@@ -9049,13 +9241,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 === undefined ? undefined : _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;
@@ -9072,6 +9267,9 @@ class HorizontalLayout {
  * @public
  */
 class PriorityLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9085,7 +9283,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 === undefined ? undefined : _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);
@@ -9179,6 +9377,9 @@ class PriorityLayout {
  * @public
  */
 class TreeLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9192,7 +9393,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 === undefined ? undefined : _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) {
@@ -9277,13 +9478,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 === undefined ? undefined : _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;

package/index.esm.js

@@ -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) {
@@ -3139,15 +3137,15 @@ class DiagramNode extends DiagramElement {
   raise() {
     var _a;
     (_a = this.select()) === null || _a === undefined ? undefined : _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();
     }
@@ -3581,6 +3579,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 === undefined ? undefined : _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 === undefined ? undefined : _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 === undefined ? undefined : _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 === undefined ? undefined : _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 {
   /**
@@ -4418,6 +4516,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
@@ -4834,6 +4980,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 +5148,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
@@ -7970,7 +8128,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);
@@ -8012,7 +8170,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 +8184,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 === undefined ? undefined : _a.label) + getRightMargin((_b = field.rootElement.type) === null || _b === undefined ? undefined : _b.label) - field.rootElement.width;
+      const stretchY = fieldDimensions[1] + getTopMargin((_c = field.rootElement.type) === null || _c === undefined ? undefined : _c.label) + getBottomMargin((_d = field.rootElement.type) === null || _d === undefined ? undefined : _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,10 +8219,14 @@ 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];
@@ -8083,8 +8259,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 === undefined ? undefined : _b.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      }
+      if (shrink !== false || stretchY > 0) {
+        (_c = field.rootElement.node) === null || _c === undefined ? undefined : _c.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      }
     }
   }
   fitNodeInView(id) {
@@ -8773,6 +8953,9 @@ class Grid {
  * @public
  */
 class AdjacencyLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8788,7 +8971,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 === undefined ? undefined : _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 +8999,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 +9039,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 === undefined ? undefined : _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 +9057,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 === undefined ? undefined : _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 +9122,9 @@ class BreadthLayout {
  * @public
  */
 class ForceLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8941,7 +9133,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 === undefined ? undefined : _a.gridSize) || 0) * 2;
     const coolingFactor = 0.99;
     const minimumTemperature = 1;
     const attractionFactor = 0.1;
@@ -9028,13 +9220,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 === undefined ? undefined : _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 +9246,9 @@ class HorizontalLayout {
  * @public
  */
 class PriorityLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9064,7 +9262,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 === undefined ? undefined : _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 +9356,9 @@ class PriorityLayout {
  * @public
  */
 class TreeLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9171,7 +9372,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 === undefined ? undefined : _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 +9457,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 === undefined ? undefined : _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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metadev/daga",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "dependencies": {},
   "peerDependencies": {
     "d3": "^7.9.0",

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

@@ -116,7 +116,8 @@ export declare class DiagramCanvas implements Canvas {
     updateDecoratorsInView(...ids: string[]): void;
     private updateConnectionLabelsInView;
     private updateConnectionMarkersInView;
-    fitFieldRootInView(id: string): void;
+    fieldRootFitsInView(id: string): boolean;
+    fitFieldRootInView(id: string, shrink?: boolean): void;
     fitNodeInView(id: string): void;
     selectRoot(): d3.Selection<HTMLDivElement, unknown, null, unknown>;
     selectSVGElement(): d3.Selection<SVGElement, unknown, null, unknown>;

package/src/lib/diagram/collab/collab-action.d.ts

@@ -32,7 +32,7 @@ export interface CollabAction {
 /**
  * @private
  */
-export type CollabActionSerialized = AddNodeSerialized | ApplyLayoutSerialized | MoveSerialized | SetGeometrySerialized | SetParentSerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
+export type CollabActionSerialized = AddNodeSerialized | AddSectionSerialized | ApplyLayoutSerialized | MoveSerialized | SetGeometrySerialized | SetParentSerialized | AddConnectionSerialized | EditFieldSerialized | UpdateValuesSerialized | SetSelfRemovedSerialized | PasteSerialized;
 /**
  * @private
  */
@@ -69,6 +69,36 @@ export declare class AddNodeCollabAction implements CollabAction {
     serialize(): AddNodeSerialized;
     static deserialize(canvas: Canvas, serialized: AddNodeSerialized): AddNodeCollabAction;
 }
+/**
+ * @private
+ */
+export type AddSectionSerialized = {
+    type: 'addSection';
+    nodeId: string;
+    copyColumnIndex: number | undefined;
+    copyRowIndex: number | undefined;
+    removeColumnIndex: number | undefined;
+    removeRowIndex: number | undefined;
+    timestamp: CollabTimestamp;
+};
+/**
+ * Collaborative action which consists of adding or removing sections in a node.
+ * @private
+ * @see AddNodeAction
+ */
+export declare class AddSectionCollabAction implements CollabAction {
+    readonly canvas: Canvas;
+    readonly nodeId: string;
+    readonly copyColumnIndex: number | undefined;
+    readonly copyRowIndex: number | undefined;
+    readonly removeColumnIndex: number | undefined;
+    readonly removeRowIndex: number | undefined;
+    readonly timestamp: CollabTimestamp;
+    constructor(canvas: Canvas, nodeId: string, copyColumnIndex: number | undefined, copyRowIndex: number | undefined, removeColumnIndex: number | undefined, removeRowIndex: number | undefined, timestamp: CollabTimestamp);
+    do(): void;
+    serialize(): AddSectionSerialized;
+    static deserialize(canvas: Canvas, serialized: AddSectionSerialized): AddSectionCollabAction;
+}
 /**
  * @private
  */

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

@@ -3,8 +3,8 @@ import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
 import { DiagramActions } from '../diagram-action';
 import { Property } from '../property/property';
 import { CanvasConfig } from './diagram-canvas-config';
-import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 import { ComponentsConfig } from './diagram-components-config';
+import { ConnectionLookConfig, ImageLookConfig, MarkerImageLookConfig, ShapedLookConfig, StretchableImageLookConfig } from './diagram-look-config';
 /**
  * The configuration for a diagram.
  * @public

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

@@ -102,6 +102,12 @@ export declare enum DiagramActions {
      * @see AddNodeAction
      */
     AddNode = "add-node",
+    /**
+     * Action that corresponds to the addition or removal of sections in a node.
+     * @public
+     * @see AddSectionAction
+     */
+    AddSectionAction = "add-section",
     /**
      * Action that corresponds to applying a layout which changes the location of several nodes.
      * @public
@@ -192,6 +198,23 @@ export declare class AddNodeAction implements DiagramAction {
     undo(): boolean;
     redo(): boolean;
 }
+/**
+ * Action which consists of adding or removing sections in a node.
+ * @private
+ * @see DiagramSection
+ */
+export declare class AddSectionAction implements DiagramAction {
+    readonly canvas: Canvas;
+    nodeId: string;
+    copyColumnIndex: number | undefined;
+    copyRowIndex: number | undefined;
+    removeColumnIndex: number | undefined;
+    removeRowIndex: number | undefined;
+    constructor(canvas: Canvas, nodeId: string, copyColumnIndex: number | undefined, copyRowIndex: number | undefined, removeColumnIndex: number | undefined, removeRowIndex: number | undefined);
+    do(): boolean;
+    undo(): boolean;
+    redo(): boolean;
+}
 /**
  * Action which consists of applying a layout to the diagram which can change the location of several nodes.
  * @private

package/src/lib/diagram/layout/adjacency-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class AdjacencyLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/breadth-adjacency-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class BreadthAdjacencyLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/breadth-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class BreadthLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/force-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class ForceLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/horizontal-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class HorizontalLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/priority-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class PriorityLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/tree-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class TreeLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

package/src/lib/diagram/layout/vertical-layout.d.ts

@@ -5,5 +5,7 @@ import { DiagramLayout } from './diagram-layout';
  * @public
  */
 export declare class VerticalLayout implements DiagramLayout {
+    gapSize?: number;
+    constructor(gapSize?: number);
     apply(model: DiagramModel): DiagramModel;
 }

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

@@ -276,6 +276,26 @@ export declare class DiagramNode extends DiagramElement implements LabeledElemen
      * @public
      */
     setGeometry(geometry: DiagramNodeGeometry): void;
+    /**
+     * Removes all sections with the given index along the x axis.
+     * @public
+     */
+    removeSectionColumn(columnIndex: number): void;
+    /**
+     * Removes all sections with the given index along the y axis.
+     * @public
+     */
+    removeSectionRow(rowIndex: number): void;
+    /**
+     * Creates a copy of all sections with the given index along the x axis.
+     * @public
+     */
+    copySectionColumn(columnIndex: number): void;
+    /**
+     * Creates a copy of all sections with the given index along the y axis.
+     * @public
+     */
+    copySectionRow(rowIndex: number): void;
 }
 export declare class DiagramNodeSet extends DiagramElementSet<DiagramNode> {
     private model;

package/src/lib/interfaces/canvas.d.ts

@@ -284,11 +284,18 @@ export interface Canvas {
      * @public
      */
     updateDecoratorsInView(...ids: string[]): void;
+    /**
+     * Checks whether the root of a diagram field encompasses the totality of the field.
+     * @param id The id of a diagram field
+     * @returns `true` if the root of a diagram field encompasses the totality of the field, `false` otherwise.
+     */
+    fieldRootFitsInView(id: string): boolean;
     /**
      * Fit the root of a diagram field to encompass the totality of the field.
      * @param id The id of a diagram field
+     * @param shrink Whether the root of the diagram field should shrink if there is excess space; `true` by default
      */
-    fitFieldRootInView(id: string): void;
+    fitFieldRootInView(id: string, shrink?: boolean): void;
     /**
      * Fit a node to encompass the totality of its sections.
      * @param id The id of a node