@metadev/daga 4.0.1 → 4.1.0

package/index.esm.js

@@ -1146,24 +1146,6 @@ class DiagramElementSet extends DiagramEntitySet {
   }
 }
 
-/**
- * Returns whether the incoming timestamp wins over the existing timestamp.
- *
- * In the DiagramModel, timestamps that have never been set are left null;
- * `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
- */
-function timestampWins(incoming, existing) {
-  if (!existing) return true;
-  if (incoming[0] > existing[0]) return true;
-  if (incoming[0] === existing[0]) {
-    // In case of equality, declare the incoming timestamp the "winner".
-    // This occurs if a client reuses a timestamp for multiple actions in a row,
-    // in which case the last created should win.
-    return incoming[1] >= existing[1];
-  }
-  return false;
-}
-
 /**
  * A property which is part of a property set and defines what values a value in a value set can take.
  * @public
@@ -1280,6 +1262,121 @@ class PropertySet {
     return this.propertyList.length > 0;
   }
 }
+
+/**
+ * Returns whether the incoming timestamp wins over the existing timestamp.
+ *
+ * In the DiagramModel, timestamps that have never been set are left null;
+ * `timestampWins` treats that as an "initial timestamp" that loses to all LogicalTimestamps.
+ */
+function timestampWins(incoming, existing) {
+  if (!existing) return true;
+  if (incoming[0] > existing[0]) return true;
+  if (incoming[0] === existing[0]) {
+    // In case of equality, declare the incoming timestamp the "winner".
+    // This occurs if a client reuses a timestamp for multiple actions in a row,
+    // in which case the last created should win.
+    return incoming[1] >= existing[1];
+  }
+  return false;
+}
+
+/**
+ * Checks if the given value is not empty.
+ * @private
+ * @param a A value.
+ * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
+ */
+const empty = a => {
+  return a === undefined || a === null || a === '' || a instanceof Array && a.length === 0 || a instanceof Object && Object.keys(a).length === 0;
+};
+/**
+ * Checks whether the given values are equal.
+ * @public
+ * @param a A value.
+ * @param b A value.
+ * @returns `true` if the given values are equal, `false` otherwise.
+ */
+const equals = (a, b) => {
+  return a === b || JSON.stringify(a) === JSON.stringify(b);
+};
+/**
+ * Calculates the differences between the two given objects and returns two objects containing the differences in each relative to the other.
+ *
+ * For each key that holds a different value in the two objects, the resulting objects will contain the differences in the values under that key.
+ *
+ * This function is recursive, that is, if the value under the key is an object, the function will be applied to that value recursively.
+ *
+ * @public
+ * @param a An object.
+ * @param b An object.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+const diff = (a, b) => {
+  const aDiff = {};
+  const bDiff = {};
+  const allKeys = [];
+  for (const key in a) {
+    allKeys.push(key);
+  }
+  for (const key in b) {
+    if (!(key in a)) {
+      allKeys.push(key);
+    }
+  }
+  for (const key of allKeys) {
+    if (isObject(a[key]) && isObject(b[key])) {
+      const diffAB = diff(a[key], b[key]);
+      // only add the key if differences are detected
+      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
+        aDiff[key] = diffAB[0];
+        bDiff[key] = diffAB[1];
+      }
+    } else {
+      if (!equals(a[key], b[key])) {
+        aDiff[key] = a[key];
+        bDiff[key] = b[key];
+      }
+    }
+  }
+  return [aDiff, bDiff];
+};
+/**
+ * Calculates the differences between the two given values of a valueset and returns two objects containing the differences in each relative to the other.
+ *
+ * @param a An object.
+ * @param b An object.
+ * @param valueSet A ValueSet to use as reference for the keys and types of each property.
+ * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
+ */
+const diffProperties = (a, b, valueSet) => {
+  const aDiff = {};
+  const bDiff = {};
+  for (const key in valueSet.propertySet.propertyMap) {
+    if (valueSet.propertySet.propertyMap[key].type === Type.Object) {
+      const diffAB = diffProperties(a[key], b[key], valueSet.getSubValueSet(key));
+      // only add the key if differences are detected
+      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
+        aDiff[key] = diffAB[0];
+        bDiff[key] = diffAB[1];
+      }
+    } else {
+      if (!equals(a[key], b[key])) {
+        aDiff[key] = a[key];
+        bDiff[key] = b[key];
+      }
+    }
+  }
+  return [aDiff, bDiff];
+};
+/**
+ * Checks if the given value is an object.
+ * @public
+ * @param x A value.
+ * @returns `true` if the given value is an object, `false` otherwise.
+ */
+const isObject = x => x !== undefined && x !== null && x.constructor === Object;
+
 /**
  * A set of values corresponding to a set of properties.
  * @public
@@ -1573,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) {
@@ -1631,101 +1726,6 @@ class ValueSet {
     }
   }
 }
-/**
- * Checks if the given value is not empty.
- * @private
- * @param a A value.
- * @returns `true` if the given value is not `undefined`, `null`, `''`, `[]` or `{}`; `false` otherwise.
- */
-const empty = a => {
-  return a === undefined || a === null || a === '' || a instanceof Array && a.length === 0 || a instanceof Object && Object.keys(a).length === 0;
-};
-/**
- * Checks whether the given values are equal.
- * @public
- * @param a A value.
- * @param b A value.
- * @returns `true` if the given values are equal, `false` otherwise.
- */
-const equals = (a, b) => {
-  return a === b || JSON.stringify(a) === JSON.stringify(b);
-};
-/**
- * Calculates the differences between the two given objects and returns two objects containing the differences in each relative to the other.
- *
- * For each key that holds a different value in the two objects, the resulting objects will contain the differences in the values under that key.
- *
- * This function is recursive, that is, if the value under the key is an object, the function will be applied to that value recursively.
- *
- * @public
- * @param a An object.
- * @param b An object.
- * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
- */
-const diff = (a, b) => {
-  const aDiff = {};
-  const bDiff = {};
-  const allKeys = [];
-  for (const key in a) {
-    allKeys.push(key);
-  }
-  for (const key in b) {
-    if (!(key in a)) {
-      allKeys.push(key);
-    }
-  }
-  for (const key of allKeys) {
-    if (isObject(a[key]) && isObject(b[key])) {
-      const diffAB = diff(a[key], b[key]);
-      // only add the key if differences are detected
-      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
-        aDiff[key] = diffAB[0];
-        bDiff[key] = diffAB[1];
-      }
-    } else {
-      if (!equals(a[key], b[key])) {
-        aDiff[key] = a[key];
-        bDiff[key] = b[key];
-      }
-    }
-  }
-  return [aDiff, bDiff];
-};
-/**
- * Calculates the differences between the two given values of a valueset and returns two objects containing the differences in each relative to the other.
- *
- * @param a An object.
- * @param b An object.
- * @param valueSet A ValueSet to use as reference for the keys and types of each property.
- * @returns A tuple of two objects with each containing the keys that have a different value in the corresponding argument compared to the other argument.
- */
-const diffProperties = (a, b, valueSet) => {
-  const aDiff = {};
-  const bDiff = {};
-  for (const key in valueSet.propertySet.propertyMap) {
-    if (valueSet.propertySet.propertyMap[key].type === Type.Object) {
-      const diffAB = diffProperties(a[key], b[key], valueSet.getSubValueSet(key));
-      // only add the key if differences are detected
-      if (Object.keys(diffAB[0]).length > 0 && Object.keys(diffAB[1]).length > 0) {
-        aDiff[key] = diffAB[0];
-        bDiff[key] = diffAB[1];
-      }
-    } else {
-      if (!equals(a[key], b[key])) {
-        aDiff[key] = a[key];
-        bDiff[key] = b[key];
-      }
-    }
-  }
-  return [aDiff, bDiff];
-};
-/**
- * Checks if the given value is an object.
- * @public
- * @param x A value.
- * @returns `true` if the given value is an object, `false` otherwise.
- */
-const isObject = x => x !== undefined && x !== null && x.constructor === Object;
 
 /**
  * Default values of the parameters of a diagram connection.
@@ -2962,6 +2962,7 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   padding: 0,
   label: null,
   ports: [],
+  decorators: [],
   sectionGrid: null,
   look: DIAGRAM_NODE_LOOK_DEFAULTS,
   isUnique: false,
@@ -2992,6 +2993,7 @@ class DiagramNodeType {
     this.topPadding = getTopPadding(values);
     this.label = values.label;
     this.ports = values.ports;
+    this.decorators = values.decorators;
     this.sectionGrid = values.sectionGrid ? new DiagramSectionGrid(values.sectionGrid) : null;
     const looks = extractLooksFromConfig(values.look);
     this.defaultLook = looks.defaultLook;
@@ -3135,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();
     }
@@ -3577,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 {
   /**
@@ -3633,7 +3735,7 @@ class DiagramNodeSet extends DiagramElementSet {
       for (let i = 0; i < nodeType.ports.length; ++i) {
         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}_${i}`);
+        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);
           const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
@@ -3660,6 +3762,13 @@ class DiagramNodeSet extends DiagramElementSet {
       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);
     }
+    // add node decorators
+    if (nodeType.decorators.length > 0) {
+      for (let i = 0; i < nodeType.decorators.length; ++i) {
+        const decoratorConfig = nodeType.decorators[i];
+        this.model.decorators.new(node, [node.coords[0] + decoratorConfig.coords[0], node.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, node.getPriority(), decoratorConfig.html, `${node.id}_decorator_${i}`);
+      }
+    }
     node.valueSet.resetValues();
     (_g = node.model.canvas) === null || _g === undefined ? undefined : _g.fitNodeInView(node.id);
     return node;
@@ -4188,6 +4297,13 @@ class DagaImporter {
       newNode.width = node.width;
       newNode.height = node.height;
       if (node.label) {
+        // add node decorators
+        if (newNodeType.decorators) {
+          for (let i = 0; i < newNodeType.decorators.length; ++i) {
+            const decoratorConfig = newNodeType.decorators[i];
+            model.decorators.new(newNode, [newNode.coords[0] + decoratorConfig.coords[0], newNode.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, newNode.getPriority(), decoratorConfig.html, `${newNode.id}_decorator_${i}`);
+          }
+        }
         // add node label
         if (newNodeType.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newNodeType.label);
@@ -4400,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
@@ -4816,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);
@@ -4978,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
@@ -5909,6 +6085,32 @@ const updateLook = selection => {
   selection.filter('.stretchable-image-look').select('image.bottom-image').attr('x', d => d.look.leftMargin).attr('y', d => d.height - d.look.bottomMargin).attr('width', d => d.width - d.look.rightMargin - d.look.leftMargin).attr('height', d => d.look.bottomMargin).attr('href', d => d.look.backgroundImageBottom);
   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,
+  spacing: 10,
+  thickness: 0.05
+};
+const initializeGrid = (canvas, canvasView, backgroundPatternId) => {
+  const canvasDefs = canvasView.append('defs');
+  if (canvas.gridSize > 0 && isFinite(canvas.gridSize)) {
+    const canvasBackgroundPattern = canvasDefs.append('pattern').attr('id', backgroundPatternId).attr('x', -canvas.gridSize / 2).attr('y', -canvas.gridSize / 2).attr('width', canvas.gridSize).attr('height', canvas.gridSize).attr('patternUnits', 'userSpaceOnUse');
+    canvasBackgroundPattern.append('rect').attr('x', 0).attr('y', 0).attr('width', canvas.gridSize).attr('height', canvas.gridSize).attr('fill', canvas.backgroundColor);
+    switch (canvas.gridStyle) {
+      case 'dots':
+        canvasBackgroundPattern.append('circle').attr('cx', canvas.gridSize / 2).attr('cy', canvas.gridSize / 2).attr('r', canvas.gridSize * canvas.gridThickness).attr('fill', canvas.gridColor);
+        break;
+      case 'lines':
+        canvasBackgroundPattern.append('line').attr('x1', canvas.gridSize / 2).attr('x2', canvas.gridSize / 2).attr('y1', 0).attr('y2', canvas.gridSize).attr('stroke-width', canvas.gridSize * canvas.gridThickness).attr('stroke', canvas.gridColor);
+        canvasBackgroundPattern.append('line').attr('x1', 0).attr('x2', (canvas.gridSize - canvas.gridSize * canvas.gridThickness) / 2).attr('y1', canvas.gridSize / 2).attr('y2', canvas.gridSize / 2).attr('stroke-width', canvas.gridSize * canvas.gridThickness).attr('stroke', canvas.gridColor);
+        canvasBackgroundPattern.append('line').attr('x1', (canvas.gridSize + canvas.gridSize * canvas.gridThickness) / 2).attr('x2', canvas.gridSize).attr('y1', canvas.gridSize / 2).attr('y2', canvas.gridSize / 2).attr('stroke-width', canvas.gridSize * canvas.gridThickness).attr('stroke', canvas.gridColor);
+        break;
+    }
+    canvasView.select('rect').attr('fill', `url(#${backgroundPatternId})`);
+  }
+};
 
 const CONTEXT_MENU_MENU_RADIUS = 96;
 const CONTEXT_MENU_BUTTON_RADIUS = 32;
@@ -6078,7 +6280,7 @@ class DiagramUserHighlight extends DiagramElementSet {
   focusOn(element) {
     this.clear();
     this.focus = element;
-    if (element instanceof DiagramField && element.rootElement) {
+    if ((element instanceof DiagramField || element instanceof DiagramDecorator) && element.rootElement) {
       this.focusOn(element.rootElement);
     } else {
       this.add(element);
@@ -6566,7 +6768,7 @@ class DiagramCanvas {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(parentComponent, config) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
     this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
     this.zoomTransform = d3.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
@@ -6585,15 +6787,16 @@ class DiagramCanvas {
     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.gridSize = ((_d = (_c = config.canvas) === null || _c === undefined ? undefined : _c.grid) === null || _d === undefined ? undefined : _d.enabled) === false || ((_e = config.canvas) === null || _e === undefined ? undefined : _e.grid) === undefined ? 0 : Math.abs(((_g = (_f = config.canvas) === null || _f === undefined ? undefined : _f.grid) === null || _g === undefined ? undefined : _g.spacing) || 10);
-    this.gridThickness = Math.abs(((_j = (_h = config.canvas) === null || _h === undefined ? undefined : _h.grid) === null || _j === undefined ? undefined : _j.thickness) || 0.05);
-    this.gridColor = ((_l = (_k = config.canvas) === null || _k === undefined ? undefined : _k.grid) === null || _l === undefined ? undefined : _l.color) || 'rgba(0, 0, 0, 0.1)';
-    this.snapToGrid = ((_o = (_m = config.canvas) === null || _m === undefined ? undefined : _m.grid) === null || _o === undefined ? undefined : _o.enabled) === false || ((_p = config.canvas) === null || _p === undefined ? undefined : _p.grid) === undefined ? false : ((_r = (_q = config.canvas) === null || _q === undefined ? undefined : _q.grid) === null || _r === undefined ? undefined : _r.snap) || false;
-    this.zoomFactor = ((_s = config.canvas) === null || _s === undefined ? undefined : _s.zoomFactor) || 2;
-    this.panRate = ((_t = config.canvas) === null || _t === undefined ? undefined : _t.panRate) || 100;
+    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.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_u = config.canvas) === null || _u === undefined ? undefined : _u.priorityThresholds) || [];
+    this.priorityThresholds = ((_x = config.canvas) === null || _x === undefined ? undefined : _x.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -6720,23 +6923,29 @@ class DiagramCanvas {
         }
       }
       if (event.ctrlKey && event.key === 'c') {
-        event.preventDefault();
-        // copy
-        this.userSelection.copyToClipboard();
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(DiagramActions.Clipboard)) {
+          event.preventDefault();
+          // copy
+          this.userSelection.copyToClipboard();
+          this.cancelAllUserActions();
+        }
       }
       if (event.ctrlKey && event.key === 'x') {
-        event.preventDefault();
-        // cut
-        this.userSelection.cutToClipboard();
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(DiagramActions.Clipboard) && this.canUserPerformAction(DiagramActions.Remove)) {
+          event.preventDefault();
+          // cut
+          this.userSelection.cutToClipboard();
+          this.cancelAllUserActions();
+        }
       }
       if (event.ctrlKey && event.key === 'v') {
-        event.preventDefault();
-        // paste
-        const coordinateRange = this.getCoordinatesOnScreen();
-        this.userSelection.pasteFromClipboard(this.getClosestGridPoint([(coordinateRange[0][0] + coordinateRange[1][0]) / 2, (coordinateRange[0][1] + coordinateRange[1][1]) / 2]));
-        this.cancelAllUserActions();
+        if (this.canUserPerformAction(DiagramActions.Paste)) {
+          event.preventDefault();
+          // paste
+          const coordinateRange = this.getCoordinatesOnScreen();
+          this.userSelection.pasteFromClipboard(this.getClosestGridPoint([(coordinateRange[0][0] + coordinateRange[1][0]) / 2, (coordinateRange[0][1] + coordinateRange[1][1]) / 2]));
+          this.cancelAllUserActions();
+        }
       }
       if (event.ctrlKey && event.key === 'y') {
         event.preventDefault();
@@ -6749,38 +6958,50 @@ class DiagramCanvas {
         this.actionStack.undo();
       }
       if (event.key === '+') {
-        event.preventDefault();
-        // zoom in
-        this.zoomBy(this.zoomFactor);
+        if (this.canUserPerformAction(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // zoom in
+          this.zoomBy(this.zoomFactor);
+        }
       }
       if (event.key === '-') {
-        event.preventDefault();
-        // zoom out
-        this.zoomBy(1 / this.zoomFactor);
+        if (this.canUserPerformAction(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // zoom out
+          this.zoomBy(1 / this.zoomFactor);
+        }
       }
       if (event.key === Keys.ArrowLeft) {
-        event.preventDefault();
-        // move left, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(this.panRate / this.zoomTransform.k, 0);
+        if (this.canUserPerformAction(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move left, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(this.panRate / this.zoomTransform.k, 0);
+        }
       }
       if (event.key === Keys.ArrowRight) {
-        event.preventDefault();
-        // move right, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(-this.panRate / this.zoomTransform.k, 0);
+        if (this.canUserPerformAction(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move right, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(-this.panRate / this.zoomTransform.k, 0);
+        }
       }
       if (event.key === Keys.ArrowDown) {
-        event.preventDefault();
-        // move down, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(0, -this.panRate / this.zoomTransform.k);
+        if (this.canUserPerformAction(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move down, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(0, -this.panRate / this.zoomTransform.k);
+        }
       }
       if (event.key === Keys.ArrowUp) {
-        event.preventDefault();
-        // move up, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(0, this.panRate / this.zoomTransform.k);
+        if (this.canUserPerformAction(DiagramActions.Zoom)) {
+          event.preventDefault();
+          // move up, faster if we're zoomed out and slower if we're zoomed in
+          this.translateBy(0, this.panRate / this.zoomTransform.k);
+        }
       }
     });
     const canvasView = this.selectSVGElement().append('g').attr('class', 'daga-canvas-view').attr('width', `100%`).attr('height', `100%`);
-    const canvasBackground = canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(Events.MouseMove, event => {
+    canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(Events.MouseMove, event => {
       if (this.unfinishedConnection !== undefined) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         this.unfinishedConnection.endCoords = pointerCoords;
@@ -6836,13 +7057,7 @@ class DiagramCanvas {
     }).on(ZoomEvents.End, () => {
       setCursorStyle();
     }));
-    const canvasDefs = canvasView.append('defs');
-    if (this.gridSize > 0 && isFinite(this.gridSize)) {
-      const canvasBackgroundPattern = canvasDefs.append('pattern').attr('id', this.backgroundPatternId).attr('x', -this.gridSize / 2).attr('y', -this.gridSize / 2).attr('width', this.gridSize).attr('height', this.gridSize).attr('patternUnits', 'userSpaceOnUse');
-      canvasBackgroundPattern.append('rect').attr('x', 0).attr('y', 0).attr('width', this.gridSize).attr('height', this.gridSize).attr('fill', this.backgroundColor);
-      canvasBackgroundPattern.append('circle').attr('cx', this.gridSize / 2).attr('cy', this.gridSize / 2).attr('r', this.gridSize * this.gridThickness).attr('fill', this.gridColor);
-      canvasBackground.attr('fill', `url(#${this.backgroundPatternId})`);
-    }
+    initializeGrid(this, canvasView, this.backgroundPatternId);
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   zoomBy(factor) {
@@ -7818,7 +8033,23 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
-    enterSelection.on(Events.ContextMenu, (event, d) => {
+    enterSelection.on(Events.MouseOver, (_event, d) => {
+      if (!this.dragging) {
+        this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
+      }
+    }).on(Events.Click, (event, d) => {
+      if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
+        this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
+      }
+      if (d.rootElement) {
+        const elementToBeToggled = getRelatedNodeOrItself(d.rootElement);
+        this.userSelection.toggle(elementToBeToggled);
+        this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
+      }
+    }).on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
         event.stopPropagation();
@@ -7828,8 +8059,15 @@ class DiagramCanvas {
       const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
-        event.preventDefault();
-        this.contextMenu.open(event);
+        if (d.rootElement) {
+          event.preventDefault();
+          const elementToSelect = getRelatedNodeOrItself(d.rootElement);
+          this.userHighlight.focusOn(elementToSelect);
+          this.diagramEvent$.next(new DiagramHighlightedEvent(elementToSelect));
+          this.userSelection.add(elementToSelect);
+          this.diagramEvent$.next(new DiagramSelectionEvent([elementToSelect], true));
+          this.contextMenu.open(event);
+        }
       }
     }).on(Events.DoubleClick, (event, d) => {
       const diagramEvent = new DiagramDoubleClickEvent(event, d);
@@ -7890,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);
@@ -7932,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) {
@@ -7946,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;
@@ -7967,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];
@@ -8003,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) {
@@ -8303,18 +8563,18 @@ class DiagramCanvas {
   }
   startMultipleSelection(event) {
     this.draggingFrom = this.getPointerLocationRelativeToCanvas(event);
-    /* TODO: would be a good idea to build the multipleSelectionContainer
-     * from selectRoot() instead of selectCanvasElements()
-     * to avoid having the thickness of the rectangle be affected by zoom
-     */
-    this.multipleSelectionContainer = this.selectCanvasElements().append('rect').attr('stroke', '#0E74B6').attr('fill', 'rgba(14, 116, 182, 0.06)');
+    // we put the multiple selection rectangle in the diagram svg element
+    // so it's not affected by the zoom level in the diagram elements
+    this.multipleSelectionContainer = this.selectSVGElement().append('rect').attr('stroke', '#0E74B6').attr('fill', 'rgba(14, 116, 182, 0.06)');
   }
   continueMultipleSelection(event) {
     var _a, _b, _c, _d;
     const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
     if (this.draggingFrom[0] !== pointerCoords[0] || this.draggingFrom[1] !== pointerCoords[1]) {
       setCursorStyle(CursorStyle.Crosshair);
-      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]))) === null || _b === undefined ? undefined : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]))) === null || _c === undefined ? undefined : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]))) === null || _d === undefined ? undefined : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]));
+      // 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);
       this.dragging = true;
     }
   }
@@ -8693,6 +8953,9 @@ class Grid {
  * @public
  */
 class AdjacencyLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8708,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]);
@@ -8736,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) {
@@ -8773,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]);
@@ -8791,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];
@@ -8853,6 +9122,9 @@ class BreadthLayout {
  * @public
  */
 class ForceLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8861,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;
@@ -8948,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;
@@ -8971,6 +9246,9 @@ class HorizontalLayout {
  * @public
  */
 class PriorityLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -8984,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);
@@ -9078,6 +9356,9 @@ class PriorityLayout {
  * @public
  */
 class TreeLayout {
+  constructor(gapSize) {
+    this.gapSize = gapSize;
+  }
   apply(model) {
     var _a;
     if (model.nodes.length === 0) {
@@ -9091,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) {
@@ -9176,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;