@metadev/daga 5.0.4 → 5.1.0

package/index.cjs.js

@@ -2687,6 +2687,11 @@ class DiagramConnectionSet extends DiagramElementSet {
   }
 }
 
+exports.ResizableMode = void 0;
+(function (ResizableMode) {
+  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
+})(exports.ResizableMode || (exports.ResizableMode = {}));
+
 /**
  * Default values of the parameters of a diagram field.
  * @private
@@ -2694,19 +2699,22 @@ class DiagramConnectionSet extends DiagramElementSet {
  */
 const DIAGRAM_FIELD_DEFAULTS = {
   editable: true,
-  fontSize: 0,
   margin: 0,
   padding: 0,
-  fontFamily: "'Wonder Unit Sans', sans-serif",
-  color: '#000000',
-  selectedColor: '#000000',
-  backgroundColor: '#00000000',
   horizontalAlign: exports.HorizontalAlign.Center,
   verticalAlign: exports.VerticalAlign.Center,
   orientation: exports.Side.Top,
   multiline: false,
   fit: false,
-  shrink: true
+  shrink: true,
+  look: {
+    lookType: 'field-look',
+    fillColor: 'transparent',
+    fontColor: '#000000',
+    fontFamily: "'Wonder Unit Sans', sans-serif",
+    fontSize: 10,
+    fontWeight: 400
+  }
 };
 /**
  * A field which displays text and is part of a diagram element.
@@ -2734,7 +2742,26 @@ class DiagramField extends DiagramElement {
       (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id, this.shrink);
     }
   }
-  constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
+  /**
+   * Current look of this field.
+   * @private
+   */
+  get look() {
+    if (this.selected) {
+      if (this.highlighted) {
+        return this.selectedAndHighlightedLook;
+      } else {
+        return this.selectedLook;
+      }
+    } else {
+      if (this.highlighted) {
+        return this.highlightedLook;
+      } else {
+        return this.defaultLook;
+      }
+    }
+  }
+  constructor(model, rootElement, coords, width, height, horizontalAlign, verticalAlign, orientation, multiline, look, text, editable, fit, shrink) {
     const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
     if (model.fields.get(id) !== undefined) {
       throw new Error('DiagramField for rootElement already exists');
@@ -2749,12 +2776,9 @@ class DiagramField extends DiagramElement {
     this.coords = coords;
     this.width = width;
     this.height = height;
-    this.fontSize = fontSize;
-    this.fontFamily = fontFamily;
-    this.color = color;
-    this.selectedColor = selectedColor;
     this.horizontalAlign = horizontalAlign;
     this.verticalAlign = verticalAlign;
+    this.multiline = multiline;
     if (!isNaN(Number(orientation))) {
       this.orientation = Number(orientation);
     } else {
@@ -2775,7 +2799,11 @@ class DiagramField extends DiagramElement {
           this.orientation = 0;
       }
     }
-    this.multiline = multiline;
+    const looks = extractLooksFromConfig(look);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
     this.defaultText = text;
     this._text = text;
     this.editable = editable;
@@ -2820,8 +2848,8 @@ class DiagramFieldSet extends DiagramElementSet {
    * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
    * @private
    */
-  new(rootElement, coords, fontSize, fontFamily, color, selectedColor, width, height, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink) {
-    const field = new DiagramField(this.model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, orientation, multiline, text, editable, fit, shrink);
+  new(rootElement, coords, width, height, horizontalAlign, verticalAlign, orientation, multiline, look, text, editable, fit, shrink) {
+    const field = new DiagramField(this.model, rootElement, coords, width, height, horizontalAlign, verticalAlign, orientation, multiline, look, text, editable, fit, shrink);
     super.add(field);
     field.updateInView();
     // add this field to its root element
@@ -3000,11 +3028,6 @@ const getTopPadding$1 = config => {
   }
 };
 
-exports.ResizableMode = void 0;
-(function (ResizableMode) {
-  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
-})(exports.ResizableMode || (exports.ResizableMode = {}));
-
 /**
  * Default value of the default width of a diagram section.
  * @private
@@ -3445,8 +3468,9 @@ class DiagramSectionSet extends DiagramElementSet {
         const port = this.model.ports.new(portConfig.type !== undefined ? this.model.ports.types.get(portConfig.type) : undefined, section, [section.coords[0] + (portConfig.coords[0] || 0), section.coords[1] + (portConfig.coords[1] || 0)], portConfig.connectionPoint !== undefined ? [section.coords[0] + (portConfig.connectionPoint[0] || 0), section.coords[1] + (portConfig.connectionPoint[1] || 0)] : undefined, portConfig === null || portConfig === void 0 ? void 0 : portConfig.direction, `${section.id}_${i}`, portConfig.anchorPointX || 'floating', portConfig.anchorPointY || 'floating');
         if ((_e = port.type) === null || _e === void 0 ? void 0 : _e.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === void 0 ? void 0 : _f.label);
-          const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
-          const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
+          labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+          const labelWidth = 6 * (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+          const labelHeight = (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
           switch (port.direction) {
             case exports.Side.Bottom:
@@ -3460,7 +3484,7 @@ class DiagramSectionSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
@@ -3468,7 +3492,8 @@ class DiagramSectionSet extends DiagramElementSet {
     const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[indexYInNode]) === null || _j === void 0 ? void 0 : _j[indexXInNode]) === null || _k === void 0 ? void 0 : _k.label;
     if (sectionLabel) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), sectionLabel);
-      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+      this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     return section;
   }
@@ -4373,8 +4398,9 @@ class DiagramNodeSet extends DiagramElementSet {
         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}`, portConfig.anchorPointX || 'floating', portConfig.anchorPointY || 'floating');
         if ((_e = port.type) === null || _e === void 0 ? void 0 : _e.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_f = port.type) === null || _f === void 0 ? void 0 : _f.label);
-          const labelWidth = 6 * labelConfiguration.fontSize + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
-          const labelHeight = labelConfiguration.fontSize + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
+          labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+          const labelWidth = 6 * (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+          const labelHeight = (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
           let labelCoords;
           switch (port.direction) {
             case exports.Side.Bottom:
@@ -4388,20 +4414,21 @@ class DiagramNodeSet extends DiagramElementSet {
             default:
               labelCoords = port.coords;
           }
-          this.model.fields.new(port, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          this.model.fields.new(port, labelCoords, labelWidth, labelHeight, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         }
       }
     }
     // add node label
     if (nodeType.label) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), nodeType.label);
-      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+      labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+      this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
     }
     // 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}`, decoratorConfig.anchorPointX || 'floating', decoratorConfig.anchorPointY || 'floating');
+        this.model.decorators.new(node, [node.coords[0] + decoratorConfig.coords[0], node.coords[1] + decoratorConfig.coords[1]], decoratorConfig.width, decoratorConfig.height, node.getPriority(), decoratorConfig.svg, `${node.id}_decorator_${i}`, decoratorConfig.anchorPointX || 'floating', decoratorConfig.anchorPointY || 'floating');
       }
     }
     node.valueSet.resetValues();
@@ -4573,6 +4600,183 @@ const getTopPadding = config => {
   }
 };
 
+/**
+ * A foreign object which is inserted with arbitrary SVG code into a diagram.
+ * Similar to a diagram object, but it's part of a node or section and it moves and stretches as its geometry changes.
+ * Diagram decorators are not serialized with other diagram elements.
+ * @public
+ * @see DiagramNode
+ * @see DiagramObject
+ * @see DiagramSection
+ */
+class DiagramDecorator extends DiagramElement {
+  constructor(model, rootElement, coords, width, height, priority, svg, id, anchorPointX = 'floating', anchorPointY = 'floating') {
+    if (model.objects.get(id) !== undefined) {
+      throw new Error(`DiagramDecorator with id "${id}" already exists`);
+    }
+    if (!id) {
+      throw new Error(`DiagramDecorator cannot have an empty or null id`);
+    }
+    super(model, id);
+    this.rootElement = rootElement;
+    this.coords = coords;
+    this.width = width;
+    this.height = height;
+    this.priority = priority;
+    this.svg = svg;
+    this.anchorPointX = anchorPointX;
+    this.anchorPointY = anchorPointY;
+  }
+  get removed() {
+    return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
+  }
+  updateInView() {
+    var _a;
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateDecoratorsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
+  }
+  /**
+   * Change the coordinates of this decorator to the given coordinates.
+   * @public
+   * @param coords A point in the diagram.
+   */
+  move(coords) {
+    this.coords = coords;
+    this.updateInView();
+  }
+  getPriority() {
+    return this.priority;
+  }
+}
+class DiagramDecoratorSet extends DiagramElementSet {
+  /**
+   * Instance a set of decorators for the given model. This method is used internally.
+   * @private
+   */
+  constructor(model) {
+    super();
+    this.model = model;
+  }
+  /**
+   * Instance a new decorator and add it to this set.
+   * @public
+   * @param coords The coordinates of the top left corner of the decorator in the diagram.
+   * @param width The dimension of the decorator along the x axis.
+   * @param height The dimension of the decorator along the y axis.
+   * @param priority The priority of the decorator. Used when filtering by priority.
+   * @param svg The SVG contents of the decorator.
+   * @param id The id of the decorator. Cannot be an empty string.
+   * @returns The instanced decorator.
+   */
+  new(rootElement, coords, width, height, priority, svg, id, anchorPointX = 'floating', anchorPointY = 'floating') {
+    const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, svg, id, anchorPointX, anchorPointY);
+    super.add(decorator);
+    decorator.updateInView();
+    // add this port to its root element
+    if (rootElement !== undefined) {
+      rootElement.decorators.push(decorator);
+    }
+    return decorator;
+  }
+  remove(id) {
+    const decorator = this.get(id, true);
+    if (decorator) {
+      // remove from root element
+      if (decorator.rootElement instanceof DiagramNode || decorator.rootElement instanceof DiagramSection) {
+        removeIfExists(decorator.rootElement.decorators, decorator);
+      }
+      // remove from set of objects
+      super.remove(id);
+      // remove from canvas
+      decorator.updateInView();
+    }
+  }
+}
+
+/**
+ * A foreign object which is inserted with arbitrary SVG code into a diagram.
+ * Diagram objects are not serialized with other diagram elements.
+ * @public
+ */
+class DiagramObject extends DiagramElement {
+  constructor(model, coords, width, height, priority, svg, id) {
+    if (model.objects.get(id) !== undefined) {
+      throw new Error(`DiagramObject with id "${id}" already exists`);
+    }
+    if (!id) {
+      throw new Error(`DiagramObject cannot have an empty or null id`);
+    }
+    super(model, id);
+    this.coords = coords;
+    this.width = width;
+    this.height = height;
+    this.priority = priority;
+    this.svg = svg;
+  }
+  get removed() {
+    return this.selfRemoved;
+  }
+  updateInView() {
+    var _a;
+    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateObjectsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
+  }
+  /**
+   * Change the coordinates of this object to the given coordinates.
+   * @public
+   * @param coords A point in the diagram.
+   */
+  move(coords) {
+    this.coords = coords;
+    this.updateInView();
+  }
+  getPriority() {
+    return this.priority;
+  }
+}
+class DiagramObjectSet extends DiagramElementSet {
+  /**
+   * Instance a set of objects for the given model. This method is used internally.
+   * @private
+   */
+  constructor(model) {
+    super();
+    this.model = model;
+  }
+  /**
+   * Instance a new object and add it to this set.
+   * @public
+   * @param coords The coordinates of the top left corner of the object in the diagram.
+   * @param width The dimension of the object along the x axis.
+   * @param height The dimension of the object along the y axis.
+   * @param priority The priority of the object. Used when filtering by priority.
+   * @param svg The SVG contents of the object.
+   * @param id The id of the object. Cannot be an empty string.
+   * @returns The instanced object.
+   */
+  new(coords, width, height, priority, svg, id) {
+    const object = new DiagramObject(this.model, coords, width, height, priority, svg, id);
+    super.add(object);
+    object.updateInView();
+    return object;
+  }
+  remove(id) {
+    const object = this.get(id, true);
+    if (object) {
+      // remove from set of objects
+      super.remove(id);
+      // remove from canvas
+      object.updateInView();
+    }
+  }
+}
+
 /**
  * Default values of the look of a diagram port.
  * @private
@@ -4938,6 +5142,14 @@ class DagaImporter {
     for (const connection of data.connections || []) {
       this.importConnection(model, connection);
     }
+    for (const object of data.objects || []) {
+      const newObject = new DiagramObject(model, object.coords, object.width, object.height, object.priority, object.svg, object.id);
+      if (object.collabMeta) {
+        newObject.selfRemoved = object.collabMeta.selfRemoved;
+      }
+      model.objects.add(newObject);
+      newObject.updateInView();
+    }
     if (data.data) {
       model.valueSet.setValues(data.data);
     }
@@ -4955,17 +5167,11 @@ class DagaImporter {
       model.nodes.add(newNode);
       newNode.width = node.width;
       newNode.height = node.height;
-      // 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);
-        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+        labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+        const newField = new DiagramField(model, newNode, [newNode.coords[0] + getLeftMargin(labelConfiguration), newNode.coords[1] + getTopMargin(labelConfiguration)], newNode.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newNode.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
         newField.text = node.label;
         newNode.label = newField;
         model.fields.add(newField);
@@ -4985,7 +5191,8 @@ class DagaImporter {
         // add section label
         if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[section.indexYInNode]) === null || _e === void 0 ? void 0 : _e[section.indexXInNode]) === null || _f === void 0 ? void 0 : _f.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[section.indexYInNode]) === null || _j === void 0 ? void 0 : _j[section.indexXInNode]) === null || _k === void 0 ? void 0 : _k.label);
-          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+          labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
+          const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
           newField.text = section.label;
           newSection.label = newField;
           model.fields.add(newField);
@@ -5001,22 +5208,23 @@ class DagaImporter {
             // add port label
             if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === void 0 ? void 0 : newPortType.label)) {
               const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === void 0 ? void 0 : newPortType.label);
+              labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
               let labelCoords;
               switch (newPort.direction) {
                 case exports.Side.Top:
                 case exports.Side.Left:
-                  labelCoords = [newPort.coords[0] - labelConfiguration.fontSize, newPort.coords[1] - labelConfiguration.fontSize];
+                  labelCoords = [newPort.coords[0] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize), newPort.coords[1] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)];
                   break;
                 case exports.Side.Bottom:
-                  labelCoords = [newPort.coords[0] - labelConfiguration.fontSize, newPort.coords[1] + labelConfiguration.fontSize];
+                  labelCoords = [newPort.coords[0] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize), newPort.coords[1] + (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)];
                   break;
                 case exports.Side.Right:
-                  labelCoords = [newPort.coords[0] + labelConfiguration.fontSize, newPort.coords[1] - labelConfiguration.fontSize];
+                  labelCoords = [newPort.coords[0] + (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize), newPort.coords[1] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)];
                   break;
                 default:
                   labelCoords = newPort.coords;
               }
-              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+              const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
               newField.text = port.label;
               newPort.label = newField;
               model.fields.add(newField);
@@ -5031,6 +5239,15 @@ class DagaImporter {
           }
           newPort.updateInView();
         }
+        for (const decorator of section.decorators || []) {
+          const newDecorator = new DiagramDecorator(model, newSection, decorator.coords, decorator.width, decorator.height, decorator.priority, decorator.svg, decorator.id, decorator.anchorPoints[0], decorator.anchorPoints[1]);
+          if (decorator.collabMeta) {
+            newDecorator.selfRemoved = decorator.collabMeta.selfRemoved;
+          }
+          newNode.decorators.push(newDecorator);
+          model.decorators.add(newDecorator);
+          newDecorator.updateInView();
+        }
         if (section.collabMeta) {
           newSection.selfRemoved = section.collabMeta.selfRemoved;
           newSection.selfRemovedTimestamp = section.collabMeta.selfRemovedTimestamp;
@@ -5048,22 +5265,23 @@ class DagaImporter {
           // add port label
           if (newNodeType.ports.length > portCounter && (newPortType === null || newPortType === void 0 ? void 0 : newPortType.label)) {
             const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), newPortType === null || newPortType === void 0 ? void 0 : newPortType.label);
+            labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
             let labelCoords;
             switch (newPort.direction) {
               case exports.Side.Top:
               case exports.Side.Left:
-                labelCoords = [newPort.coords[0] - labelConfiguration.fontSize, newPort.coords[1] - labelConfiguration.fontSize];
+                labelCoords = [newPort.coords[0] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize), newPort.coords[1] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)];
                 break;
               case exports.Side.Bottom:
-                labelCoords = [newPort.coords[0] - labelConfiguration.fontSize, newPort.coords[1] + labelConfiguration.fontSize];
+                labelCoords = [newPort.coords[0] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize), newPort.coords[1] + (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)];
                 break;
               case exports.Side.Right:
-                labelCoords = [newPort.coords[0] + labelConfiguration.fontSize, newPort.coords[1] - labelConfiguration.fontSize];
+                labelCoords = [newPort.coords[0] + (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize), newPort.coords[1] - (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)];
                 break;
               default:
                 labelCoords = newPort.coords;
             }
-            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
+            const newField = new DiagramField(model, newPort, labelCoords, labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, labelConfiguration.orientation, labelConfiguration.multiline, labelConfiguration.look, '', labelConfiguration.editable, labelConfiguration.fit, labelConfiguration.shrink);
             newField.text = port.label;
             newPort.label = newField;
             model.fields.add(newField);
@@ -5078,6 +5296,15 @@ class DagaImporter {
         }
         newPort.updateInView();
       }
+      for (const decorator of node.decorators || []) {
+        const newDecorator = new DiagramDecorator(model, newNode, decorator.coords, decorator.width, decorator.height, decorator.priority, decorator.svg, decorator.id, decorator.anchorPoints[0], decorator.anchorPoints[1]);
+        if (decorator.collabMeta) {
+          newDecorator.selfRemoved = decorator.collabMeta.selfRemoved;
+        }
+        newNode.decorators.push(newDecorator);
+        model.decorators.add(newDecorator);
+        newDecorator.updateInView();
+      }
       if (node.data) {
         newNode.valueSet.setValues(node.data);
       }
@@ -6369,7 +6596,8 @@ class DiagramZoomEvent extends DiagramEvent {
   /**
    * Create a diagram zoom event.
    *
-   * @param coords .
+   * @param coords Coordinates to which the user panned. Calling the method `canvas.translateTo()` with these coordinates after this event should cause no changes.
+   * @param zoom Zoom level to which the user zoomed. Calling the method `canvas.zoomTo()` with this zoom level after this event should cause no changes.
    */
   constructor(coords, zoom) {
     super(exports.DiagramEvents.Zoom);
@@ -6459,183 +6687,6 @@ class DiagramDraggingNodeEvent extends DiagramEvent {
   }
 }
 
-/**
- * A foreign object which is inserted with arbitrary html into a diagram.
- * Similar to a diagram object, but it's part of a node or section and it moves and stretches as its geometry changes.
- * Diagram decorators are not serialized with other diagram elements.
- * @public
- * @see DiagramNode
- * @see DiagramObject
- * @see DiagramSection
- */
-class DiagramDecorator extends DiagramElement {
-  constructor(model, rootElement, coords, width, height, priority, html, id, anchorPointX = 'floating', anchorPointY = 'floating') {
-    if (model.objects.get(id) !== undefined) {
-      throw new Error(`DiagramDecorator with id "${id}" already exists`);
-    }
-    if (!id) {
-      throw new Error(`DiagramDecorator cannot have an empty or null id`);
-    }
-    super(model, id);
-    this.rootElement = rootElement;
-    this.coords = coords;
-    this.width = width;
-    this.height = height;
-    this.priority = priority;
-    this.html = html;
-    this.anchorPointX = anchorPointX;
-    this.anchorPointY = anchorPointY;
-  }
-  get removed() {
-    return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
-  }
-  updateInView() {
-    var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateDecoratorsInView(this.id);
-  }
-  raise() {
-    var _a;
-    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
-  }
-  /**
-   * Change the coordinates of this decorator to the given coordinates.
-   * @public
-   * @param coords A point in the diagram.
-   */
-  move(coords) {
-    this.coords = coords;
-    this.updateInView();
-  }
-  getPriority() {
-    return this.priority;
-  }
-}
-class DiagramDecoratorSet extends DiagramElementSet {
-  /**
-   * Instance a set of decorators for the given model. This method is used internally.
-   * @private
-   */
-  constructor(model) {
-    super();
-    this.model = model;
-  }
-  /**
-   * Instance a new decorator and add it to this set.
-   * @public
-   * @param coords The coordinates of the top left corner of the decorator in the diagram.
-   * @param width The dimension of the decorator along the x axis.
-   * @param height The dimension of the decorator along the y axis.
-   * @param priority The priority of the decorator. Used when filtering by priority.
-   * @param html The html contents of the decorator.
-   * @param id The id of the decorator. Cannot be an empty string.
-   * @returns The instanced decorator.
-   */
-  new(rootElement, coords, width, height, priority, html, id, anchorPointX = 'floating', anchorPointY = 'floating') {
-    const decorator = new DiagramDecorator(this.model, rootElement, coords, width, height, priority, html, id, anchorPointX, anchorPointY);
-    super.add(decorator);
-    decorator.updateInView();
-    // add this port to its root element
-    if (rootElement !== undefined) {
-      rootElement.decorators.push(decorator);
-    }
-    return decorator;
-  }
-  remove(id) {
-    const decorator = this.get(id, true);
-    if (decorator) {
-      // remove from root element
-      if (decorator.rootElement instanceof DiagramNode || decorator.rootElement instanceof DiagramSection) {
-        removeIfExists(decorator.rootElement.decorators, decorator);
-      }
-      // remove from set of objects
-      super.remove(id);
-      // remove from canvas
-      decorator.updateInView();
-    }
-  }
-}
-
-/**
- * A foreign object which is inserted with arbitrary html into a diagram.
- * Diagram objects are not serialized with other diagram elements.
- * @public
- */
-class DiagramObject extends DiagramElement {
-  constructor(model, coords, width, height, priority, html, id) {
-    if (model.objects.get(id) !== undefined) {
-      throw new Error(`DiagramObject with id "${id}" already exists`);
-    }
-    if (!id) {
-      throw new Error(`DiagramObject cannot have an empty or null id`);
-    }
-    super(model, id);
-    this.coords = coords;
-    this.width = width;
-    this.height = height;
-    this.priority = priority;
-    this.html = html;
-  }
-  get removed() {
-    return this.selfRemoved;
-  }
-  updateInView() {
-    var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateObjectsInView(this.id);
-  }
-  raise() {
-    var _a;
-    (_a = this.select()) === null || _a === void 0 ? void 0 : _a.raise();
-  }
-  /**
-   * Change the coordinates of this object to the given coordinates.
-   * @public
-   * @param coords A point in the diagram.
-   */
-  move(coords) {
-    this.coords = coords;
-    this.updateInView();
-  }
-  getPriority() {
-    return this.priority;
-  }
-}
-class DiagramObjectSet extends DiagramElementSet {
-  /**
-   * Instance a set of objects for the given model. This method is used internally.
-   * @private
-   */
-  constructor(model) {
-    super();
-    this.model = model;
-  }
-  /**
-   * Instance a new object and add it to this set.
-   * @public
-   * @param coords The coordinates of the top left corner of the object in the diagram.
-   * @param width The dimension of the object along the x axis.
-   * @param height The dimension of the object along the y axis.
-   * @param priority The priority of the object. Used when filtering by priority.
-   * @param html The html contents of the object.
-   * @param id The id of the object. Cannot be an empty string.
-   * @returns The instanced object.
-   */
-  new(coords, width, height, priority, html, id) {
-    const object = new DiagramObject(this.model, coords, width, height, priority, html, id);
-    super.add(object);
-    object.updateInView();
-    return object;
-  }
-  remove(id) {
-    const object = this.get(id, true);
-    if (object) {
-      // remove from set of objects
-      super.remove(id);
-      // remove from canvas
-      object.updateInView();
-    }
-  }
-}
-
 /**
  * Stores the data of a diagram.
  * Represents the state of the diagram.
@@ -6737,7 +6788,7 @@ const isSecondaryButton = event => {
 const getConnectionPath = (shape, startCoords, endCoords, startDirection, endDirection, points, width, startMarkerWidth, endMarkerWidth) => {
   return linePath(shape, [startCoords, ...points, endCoords], startDirection, endDirection, Math.max(
   // reasonable value for the minimumDistanceBeforeTurn relative to the line width
-  10, startMarkerWidth || 0, endMarkerWidth || 0) * width);
+  10, startMarkerWidth !== null && startMarkerWidth !== void 0 ? startMarkerWidth : 0, endMarkerWidth !== null && endMarkerWidth !== void 0 ? endMarkerWidth : 0) * width);
 };
 const setCursorStyle = style => {
   if (!style) {
@@ -6747,11 +6798,12 @@ const setCursorStyle = style => {
   }
 };
 const getRelatedNodeOrItself = element => {
+  var _a;
   if (element instanceof DiagramNode) {
     return element;
   }
   if (element instanceof DiagramSection) {
-    return element.node || element;
+    return (_a = element.node) !== null && _a !== void 0 ? _a : element;
   }
   return element.rootElement instanceof DiagramNode || element.rootElement instanceof DiagramSection || element.rootElement instanceof DiagramPort ? getRelatedNodeOrItself(element.rootElement) : element;
 };
@@ -6803,9 +6855,21 @@ const SHAPED_LOOK_DEFAULTS = {
   borderStyle: exports.LineStyle.Solid
 };
 const updateLook = selection => {
-  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape || exports.ClosedShape.Rectangle, 0, 0, d.width, d.height)).attr('fill', d => d.look.fillColor || SHAPED_LOOK_DEFAULTS.fillColor).attr('stroke', d => d.look.borderColor || SHAPED_LOOK_DEFAULTS.borderColor).attr('stroke-width', d => `${d.look.borderThickness || SHAPED_LOOK_DEFAULTS.borderThickness}px`).attr('stroke-dasharray', d => {
-    var _a, _b, _c;
-    return lineStyleDasharray(d.look.borderStyle || SHAPED_LOOK_DEFAULTS.borderStyle, ((_b = (_a = d.type) === null || _a === void 0 ? void 0 : _a.defaultLook) === null || _b === void 0 ? void 0 : _b.borderThickness) || ((_c = d.look) === null || _c === void 0 ? void 0 : _c.borderThickness) || SHAPED_LOOK_DEFAULTS.borderThickness);
+  selection.filter('.shaped-look').select('path').attr('d', d => {
+    var _a;
+    return generalClosedPath((_a = d.look.shape) !== null && _a !== void 0 ? _a : exports.ClosedShape.Rectangle, 0, 0, d.width, d.height);
+  }).attr('fill', d => {
+    var _a;
+    return (_a = d.look.fillColor) !== null && _a !== void 0 ? _a : SHAPED_LOOK_DEFAULTS.fillColor;
+  }).attr('stroke', d => {
+    var _a;
+    return (_a = d.look.borderColor) !== null && _a !== void 0 ? _a : SHAPED_LOOK_DEFAULTS.borderColor;
+  }).attr('stroke-width', d => {
+    var _a;
+    return `${(_a = d.look.borderThickness) !== null && _a !== void 0 ? _a : SHAPED_LOOK_DEFAULTS.borderThickness}px`;
+  }).attr('stroke-dasharray', d => {
+    var _a, _b, _c, _d, _e, _f;
+    return lineStyleDasharray((_a = d.look.borderStyle) !== null && _a !== void 0 ? _a : SHAPED_LOOK_DEFAULTS.borderStyle, (_f = (_d = (_c = (_b = d.type) === null || _b === void 0 ? void 0 : _b.defaultLook) === null || _c === void 0 ? void 0 : _c.borderThickness) !== null && _d !== void 0 ? _d : (_e = d.look) === null || _e === void 0 ? void 0 : _e.borderThickness) !== null && _f !== void 0 ? _f : SHAPED_LOOK_DEFAULTS.borderThickness);
   });
   selection.filter('.image-look').select('image').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('href', d => d.look.backgroundImage);
   selection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => d.look.leftMargin).attr('height', d => d.look.topMargin).attr('href', d => d.look.backgroundImageTopLeft);
@@ -6818,30 +6882,91 @@ 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 BACKGROUND_DEFAULTS = {
+  style: 'solid',
+  color: '#FFFFFF'
+};
 const GRID_DEFAULTS = {
+  enabled: true,
+  style: 'none',
+  snap: false,
+  spacing: 1
+};
+const DOTS_GRID_DEFAULTS = Object.assign(Object.assign({}, GRID_DEFAULTS), {
   style: 'dots',
-  color: 'rgba(0, 0, 0, 0.1)',
   snap: false,
   spacing: 10,
-  thickness: 0.05
+  thickness: 0.05,
+  color: 'rgba(0, 0, 0, 0.1)'
+});
+const initializeBackground = (canvas, canvasView, backgroundConfig) => {
+  var _a, _b;
+  switch ((_a = backgroundConfig === null || backgroundConfig === void 0 ? void 0 : backgroundConfig.style) !== null && _a !== void 0 ? _a : '') {
+    case 'image':
+      return canvasView.append('image').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('href', backgroundConfig.image).attr('preserveAspectRatio', 'none');
+    case 'solid':
+    default:
+      return canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', (_b = backgroundConfig.color) !== null && _b !== void 0 ? _b : '#FFFFFF').attr('stroke-width', '0');
+  }
+};
+const applyGridDefaults = gridConfig => {
+  if (!gridConfig) {
+    return DOTS_GRID_DEFAULTS;
+  }
+  switch (gridConfig.style) {
+    case 'dots':
+    case 'lines':
+      // lines has the same parameters as dots
+      return Object.assign(Object.assign({}, DOTS_GRID_DEFAULTS), gridConfig);
+    default:
+      return Object.assign(Object.assign({}, GRID_DEFAULTS), gridConfig);
+  }
 };
-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) {
+const initializeGrid = (canvas, canvasView, canvasDefs, gridPatternId, gridConfig) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  if (getGridSpacingX(gridConfig) !== 0 && getGridSpacingY(gridConfig) !== 0) {
+    const canvasBackgroundPattern = canvasDefs.append('pattern').attr('id', gridPatternId).attr('x', -getGridSpacingX(gridConfig) / 2).attr('y', -getGridSpacingY(gridConfig) / 2).attr('width', getGridSpacingX(gridConfig)).attr('height', getGridSpacingY(gridConfig)).attr('patternUnits', 'userSpaceOnUse');
+    canvasBackgroundPattern.append('rect').attr('x', 0).attr('y', 0).attr('width', getGridSpacingX(gridConfig)).attr('height', getGridSpacingY(gridConfig)).attr('fill', 'transparent');
+    switch (gridConfig.style) {
       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);
+        canvasBackgroundPattern.append('circle').attr('cx', getGridSpacingX(gridConfig) / 2).attr('cy', getGridSpacingY(gridConfig) / 2).attr('r', Math.min(getGridSpacingX(gridConfig), getGridSpacingY(gridConfig)) * ((_a = gridConfig.thickness) !== null && _a !== void 0 ? _a : 0)).attr('fill', (_b = gridConfig.color) !== null && _b !== void 0 ? _b : '');
         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);
+        canvasBackgroundPattern.append('line').attr('x1', getGridSpacingX(gridConfig) / 2).attr('x2', getGridSpacingX(gridConfig) / 2).attr('y1', 0).attr('y2', getGridSpacingY(gridConfig)).attr('stroke-width', Math.min(getGridSpacingX(gridConfig), getGridSpacingY(gridConfig)) * ((_c = gridConfig.thickness) !== null && _c !== void 0 ? _c : 0)).attr('stroke', (_d = gridConfig.color) !== null && _d !== void 0 ? _d : '');
+        canvasBackgroundPattern.append('line').attr('x1', 0).attr('x2', (getGridSpacingX(gridConfig) - getGridSpacingX(gridConfig) * ((_e = gridConfig.thickness) !== null && _e !== void 0 ? _e : 0)) / 2).attr('y1', getGridSpacingY(gridConfig) / 2).attr('y2', getGridSpacingY(gridConfig) / 2).attr('stroke-width', Math.min(getGridSpacingX(gridConfig), getGridSpacingY(gridConfig)) * ((_f = gridConfig.thickness) !== null && _f !== void 0 ? _f : 0)).attr('stroke', (_g = gridConfig.color) !== null && _g !== void 0 ? _g : '');
+        canvasBackgroundPattern.append('line').attr('x1', (getGridSpacingX(gridConfig) + getGridSpacingX(gridConfig) * ((_h = gridConfig.thickness) !== null && _h !== void 0 ? _h : 0)) / 2).attr('x2', getGridSpacingX(gridConfig)).attr('y1', getGridSpacingY(gridConfig) / 2).attr('y2', getGridSpacingY(gridConfig) / 2).attr('stroke-width', Math.min(getGridSpacingX(gridConfig), getGridSpacingY(gridConfig)) * ((_j = gridConfig.thickness) !== null && _j !== void 0 ? _j : 0)).attr('stroke', (_k = gridConfig.color) !== null && _k !== void 0 ? _k : '');
+        break;
+      case 'image':
+        canvasBackgroundPattern.append('image').attr('x', 0).attr('y', 0).attr('width', getGridSpacingX(gridConfig)).attr('height', getGridSpacingY(gridConfig)).attr('href', gridConfig.image).attr('preserveAspectRatio', 'none');
         break;
     }
-    canvasView.select('rect').attr('fill', `url(#${backgroundPatternId})`);
+    return canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', `url(#${gridPatternId})`).attr('stroke-width', '0');
+  }
+  return undefined;
+};
+const getGridSpacingX = gridConfig => {
+  let value = 0;
+  if (typeof gridConfig.spacing === 'number') {
+    value = gridConfig.spacing;
+  } else if (Array.isArray(gridConfig.spacing) && typeof gridConfig.spacing[0] === 'number') {
+    value = gridConfig.spacing[0];
   }
+  if (!isFinite(value)) {
+    return 0;
+  }
+  return value;
+};
+const getGridSpacingY = gridConfig => {
+  let value = 0;
+  if (typeof gridConfig.spacing === 'number') {
+    value = gridConfig.spacing;
+  } else if (Array.isArray(gridConfig.spacing) && typeof gridConfig.spacing[1] === 'number') {
+    value = gridConfig.spacing[1];
+  }
+  if (!isFinite(value)) {
+    return 0;
+  }
+  return value;
 };
 
 const CONTEXT_MENU_MENU_RADIUS = 96;
@@ -7087,6 +7212,7 @@ const DAGA_FILE_VERSION = 1;
  */
 class DagaExporter {
   export(model, includeCollabMeta = false) {
+    var _a;
     const result = Object.assign({
       name: model.name,
       type: model.type,
@@ -7095,6 +7221,7 @@ class DagaExporter {
       updatedAt: model.updatedAt,
       nodes: [],
       connections: [],
+      objects: [],
       data: model.valueSet.getValues()
     }, includeCollabMeta ? {
       collabMeta: {
@@ -7117,6 +7244,21 @@ class DagaExporter {
       if (!includeCollabMeta && connection.removed) continue;
       result.connections.push(this.exportConnection(connection, includeCollabMeta));
     }
+    for (const object of model.objects.all(true)) {
+      (_a = result.objects) === null || _a === void 0 ? void 0 : _a.push(Object.assign({
+        id: object.id,
+        coords: roundPoint(object.coords),
+        width: object.width,
+        height: object.height,
+        priority: object.priority,
+        svg: object.svg
+      }, includeCollabMeta ? {
+        collabMeta: {
+          removed: object.removed,
+          selfRemoved: object.selfRemoved
+        }
+      } : {}));
+    }
     return result;
   }
   exportNode(node, includeCollabMeta = false) {
@@ -7144,9 +7286,27 @@ class DagaExporter {
           }, this.exportLabelCollabMeta(port))
         } : {}));
       }
+      const decorators = [];
+      for (const decorator of section.decorators) {
+        decorators.push(Object.assign({
+          id: decorator.id,
+          coords: roundPoint(decorator.coords),
+          width: decorator.width,
+          height: decorator.height,
+          priority: decorator.priority,
+          svg: decorator.svg,
+          anchorPoints: [decorator.anchorPointX, decorator.anchorPointY]
+        }, includeCollabMeta ? {
+          collabMeta: {
+            removed: decorator.removed,
+            selfRemoved: decorator.selfRemoved
+          }
+        } : {}));
+      }
       sections.push(Object.assign({
         id: section.id,
         ports,
+        decorators,
         label: ((_c = section.label) === null || _c === void 0 ? void 0 : _c.text) || '',
         indexXInNode: section.indexXInNode,
         indexYInNode: section.indexYInNode,
@@ -7178,12 +7338,30 @@ class DagaExporter {
         }, this.exportLabelCollabMeta(port))
       } : {}));
     }
+    const decorators = [];
+    for (const decorator of node.decorators) {
+      decorators.push(Object.assign({
+        id: decorator.id,
+        coords: roundPoint(decorator.coords),
+        width: decorator.width,
+        height: decorator.height,
+        priority: decorator.priority,
+        svg: decorator.svg,
+        anchorPoints: [decorator.anchorPointX, decorator.anchorPointY]
+      }, includeCollabMeta ? {
+        collabMeta: {
+          removed: decorator.removed,
+          selfRemoved: decorator.selfRemoved
+        }
+      } : {}));
+    }
     return Object.assign({
       id: node.id,
       type: node.type.id,
       children,
       sections,
       ports,
+      decorators,
       label: ((_f = node.label) === null || _f === void 0 ? void 0 : _f.text) || '',
       coords: roundPoint(node.coords),
       width: node.width,
@@ -7526,8 +7704,9 @@ 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, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
-    this.backgroundPatternId = `daga-background-pattern-id-${DiagramCanvas.canvasCount++}`;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    this.gridPatternId = `daga-grid-pattern-id-${++DiagramCanvas.canvasCount}`;
+    this.ancillaryGridPatternIds = [];
     this.zoomTransform = d3__namespace.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
     this.draggingFrom = [0, 0];
@@ -7544,23 +7723,25 @@ class DiagramCanvas {
     this.userSelection = new DiagramUserSelection(this, (_b = (_a = config.components) === null || _a === void 0 ? void 0 : _a.propertyEditor) === null || _b === void 0 ? void 0 : _b.title);
     this.userHighlight = new DiagramUserHighlight(this, ((_c = config.canvas) === null || _c === void 0 ? void 0 : _c.highlightSections) !== false);
     this.contextMenu = new DiagramContextMenu(this, (_d = config.canvas) === null || _d === void 0 ? void 0 : _d.contextMenu);
-    this.backgroundColor = ((_e = config.canvas) === null || _e === void 0 ? void 0 : _e.backgroundColor) || '#FFFFFF';
-    this.gridStyle = (_h = (_g = (_f = config.canvas) === null || _f === void 0 ? void 0 : _f.grid) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : GRID_DEFAULTS.style;
-    this.gridSize = ((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.enabled) === false || ((_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === undefined ? 0 : Math.abs(((_o = (_m = config.canvas) === null || _m === void 0 ? void 0 : _m.grid) === null || _o === void 0 ? void 0 : _o.spacing) || GRID_DEFAULTS.spacing);
-    this.gridThickness = Math.abs(((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.thickness) || GRID_DEFAULTS.thickness);
-    this.gridColor = ((_s = (_r = config.canvas) === null || _r === void 0 ? void 0 : _r.grid) === null || _s === void 0 ? void 0 : _s.color) || GRID_DEFAULTS.color;
-    this.snapToGrid = ((_u = (_t = config.canvas) === null || _t === void 0 ? void 0 : _t.grid) === null || _u === void 0 ? void 0 : _u.enabled) === false || ((_v = config.canvas) === null || _v === void 0 ? void 0 : _v.grid) === undefined ? false : ((_x = (_w = config.canvas) === null || _w === void 0 ? void 0 : _w.grid) === null || _x === void 0 ? void 0 : _x.snap) || GRID_DEFAULTS.snap;
-    this.zoomFactor = ((_y = config.canvas) === null || _y === void 0 ? void 0 : _y.zoomFactor) || 2;
-    this.panRate = ((_z = config.canvas) === null || _z === void 0 ? void 0 : _z.panRate) || 100;
-    this.inferConnectionType = ((_0 = config.connectionSettings) === null || _0 === void 0 ? void 0 : _0.inferConnectionType) || false;
-    this.autoTightenConnections = ((_1 = config.connectionSettings) === null || _1 === void 0 ? void 0 : _1.autoTighten) !== false;
-    this.tightenConnectionsAcrossPortTypes = ((_2 = config.connectionSettings) === null || _2 === void 0 ? void 0 : _2.tightenAcrossPortTypes) || false;
-    this.allowConnectionLoops = ((_3 = config.connectionSettings) === null || _3 === void 0 ? void 0 : _3.allowLoops) || false;
-    this.allowSharingPorts = ((_4 = config.connectionSettings) === null || _4 === void 0 ? void 0 : _4.sharePorts) !== false;
-    this.allowSharingBothPorts = ((_5 = config.connectionSettings) === null || _5 === void 0 ? void 0 : _5.shareBothPorts) || false;
-    this.portHighlightRadius = ((_6 = config.connectionSettings) === null || _6 === void 0 ? void 0 : _6.portHighlightRadius) || 100;
+    // TODO
+    this.backgroundConfig = (_f = (_e = config.canvas) === null || _e === void 0 ? void 0 : _e.background) !== null && _f !== void 0 ? _f : BACKGROUND_DEFAULTS;
+    this.gridConfig = applyGridDefaults((_g = config.canvas) === null || _g === void 0 ? void 0 : _g.grid);
+    this.ancillaryGridsConfig = [];
+    for (let i = 0; i < (((_j = (_h = config.canvas) === null || _h === void 0 ? void 0 : _h.ancillaryGrids) === null || _j === void 0 ? void 0 : _j.length) || 0); ++i) {
+      this.ancillaryGridsConfig.push(applyGridDefaults((_l = (_k = config.canvas) === null || _k === void 0 ? void 0 : _k.ancillaryGrids) === null || _l === void 0 ? void 0 : _l[i]));
+      this.ancillaryGridPatternIds.push(`${this.gridPatternId}-ancillary-${i}`);
+    }
+    this.zoomFactor = ((_m = config.canvas) === null || _m === void 0 ? void 0 : _m.zoomFactor) || 2;
+    this.panRate = ((_o = config.canvas) === null || _o === void 0 ? void 0 : _o.panRate) || 100;
+    this.inferConnectionType = ((_p = config.connectionSettings) === null || _p === void 0 ? void 0 : _p.inferConnectionType) || false;
+    this.autoTightenConnections = ((_q = config.connectionSettings) === null || _q === void 0 ? void 0 : _q.autoTighten) !== false;
+    this.tightenConnectionsAcrossPortTypes = ((_r = config.connectionSettings) === null || _r === void 0 ? void 0 : _r.tightenAcrossPortTypes) || false;
+    this.allowConnectionLoops = ((_s = config.connectionSettings) === null || _s === void 0 ? void 0 : _s.allowLoops) || false;
+    this.allowSharingPorts = ((_t = config.connectionSettings) === null || _t === void 0 ? void 0 : _t.sharePorts) !== false;
+    this.allowSharingBothPorts = ((_u = config.connectionSettings) === null || _u === void 0 ? void 0 : _u.shareBothPorts) || false;
+    this.portHighlightRadius = ((_v = config.connectionSettings) === null || _v === void 0 ? void 0 : _v.portHighlightRadius) || 100;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_7 = config.canvas) === null || _7 === void 0 ? void 0 : _7.priorityThresholds) || [];
+    this.priorityThresholds = ((_w = config.canvas) === null || _w === void 0 ? void 0 : _w.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -7587,7 +7768,7 @@ class DiagramCanvas {
         const connectionType = new DiagramConnectionType(Object.assign(Object.assign({}, config.connectionTypeDefaults), connectionTypeConfig));
         this.model.connections.types.add(connectionType);
       }
-      this._connectionType = ((_8 = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _8 === void 0 ? void 0 : _8.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
+      this._connectionType = ((_x = config === null || config === void 0 ? void 0 : config.connectionSettings) === null || _x === void 0 ? void 0 : _x.defaultConnection) !== undefined ? this.model.connections.types.get(config.connectionSettings.defaultConnection) : undefined;
     }
   }
   addValidator(validator) {
@@ -7619,13 +7800,13 @@ class DiagramCanvas {
     // remove all children
     appendToSelection.html('');
     this.diagramRoot = appendToSelection.append('div').node();
-    d3__namespace.select(this.diagramRoot).attr('tabindex', 0) // make element focusable
+    this.selectRoot().attr('tabindex', 0) // make element focusable
     .style('width', '100%').style('height', '100%').append('svg').style('width', '100%').style('height', '100%');
-    d3__namespace.select(this.diagramRoot).on(exports.Events.Click, () => {
+    this.selectRoot().on(exports.Events.Click, () => {
       var _a;
       // focus on the diagram when clicking so that we can focus on the diagram
       // keyboard events only work if we're focusing on the diagram
-      (_a = d3__namespace.select(this.diagramRoot).node()) === null || _a === void 0 ? void 0 : _a.focus();
+      (_a = this.selectRoot().node()) === null || _a === void 0 ? void 0 : _a.focus();
     }).on(exports.Events.ContextMenu, event => {
       if (this.dragging) {
         event.preventDefault();
@@ -7789,44 +7970,57 @@ class DiagramCanvas {
       this.zoomTransform = event.transform;
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
-      d3__namespace.select(`#${this.backgroundPatternId}`).attr('patternTransform', transformAttribute);
+      for (const gridPatternId of [this.gridPatternId, ...this.ancillaryGridPatternIds]) {
+        this.selectCanvasView().select(`#${gridPatternId}`).attr('patternTransform', transformAttribute);
+      }
       this.contextMenu.close();
       this.diagramEvent$.next(new DiagramZoomEvent([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
     }).on(exports.ZoomEvents.End, () => {
       setCursorStyle();
     }));
-    canvasView.append('rect').attr('x', 0).attr('y', 0).attr('width', `100%`).attr('height', `100%`).attr('fill', this.backgroundColor).attr('stroke-width', '0').on(exports.Events.MouseMove, event => {
-      if (this.unfinishedConnection !== undefined) {
-        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        this.unfinishedConnection.endCoords = pointerCoords;
-      }
-    }).on(exports.Events.MouseOver, () => {
-      if (this.userHighlight.size() > 0) {
-        this.userHighlight.clear();
-        this.diagramEvent$.next(new DiagramHighlightedEvent(null));
-      }
-    }).on(exports.Events.Click, () => {
-      if (this.userHighlight.size() > 0) {
-        this.userHighlight.clear();
-        this.diagramEvent$.next(new DiagramHighlightedEvent(null));
-      }
-      this.contextMenu.close();
-      if (this.userSelection.size() > 0) {
-        const deselectedElements = this.userSelection.all();
-        this.userSelection.clear();
-        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
-      }
-      this.userSelection.openInPropertyEditor(this.model);
-    }).call(d3__namespace.drag().filter(event => {
-      return this.multipleSelectionOn || isSecondaryButton(event);
-    }).on(exports.DragEvents.Start, event => {
-      this.startMultipleSelection(event);
-    }).on(exports.DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
-    }).on(exports.DragEvents.End, event => {
-      this.finishMultipleSelection(event);
-    }));
-    initializeGrid(this, canvasView, this.backgroundPatternId);
+    const canvasDefs = canvasView.append('defs');
+    const canvasBackground = [];
+    canvasBackground.push(initializeBackground(this, canvasView, this.backgroundConfig));
+    for (let i = 0; i < this.ancillaryGridsConfig.length; ++i) {
+      canvasBackground.push(initializeGrid(this, canvasView, canvasDefs, this.ancillaryGridPatternIds[i], this.ancillaryGridsConfig[i]));
+    }
+    canvasBackground.push(initializeGrid(this, canvasView, canvasDefs, this.gridPatternId, this.gridConfig));
+    for (const canvasBackgroundElement of canvasBackground) {
+      canvasBackgroundElement.on(exports.Events.MouseMove, event => {
+        if (this.unfinishedConnection !== undefined) {
+          const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+          this.unfinishedConnection.endCoords = pointerCoords;
+        }
+      });
+      canvasBackgroundElement.on(exports.Events.MouseOver, () => {
+        if (this.userHighlight.size() > 0) {
+          this.userHighlight.clear();
+          this.diagramEvent$.next(new DiagramHighlightedEvent(null));
+        }
+      });
+      canvasBackgroundElement.on(exports.Events.Click, () => {
+        if (this.userHighlight.size() > 0) {
+          this.userHighlight.clear();
+          this.diagramEvent$.next(new DiagramHighlightedEvent(null));
+        }
+        this.contextMenu.close();
+        if (this.userSelection.size() > 0) {
+          const deselectedElements = this.userSelection.all();
+          this.userSelection.clear();
+          this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
+        }
+        this.userSelection.openInPropertyEditor(this.model);
+      });
+      canvasBackgroundElement.call(d3__namespace.drag().filter(event => {
+        return this.multipleSelectionOn || isSecondaryButton(event);
+      }).on(exports.DragEvents.Start, event => {
+        this.startMultipleSelection(event);
+      }).on(exports.DragEvents.Drag, event => {
+        this.continueMultipleSelection(event);
+      }).on(exports.DragEvents.End, event => {
+        this.finishMultipleSelection(event);
+      }));
+    }
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   getZoomLevel() {
@@ -7886,7 +8080,7 @@ class DiagramCanvas {
             this.zoomBehavior.translateTo(this.selectCanvasView(), currentX, currentY);
           }
         } catch (e) {
-          console.warn('Animation has been interrupted');
+          console.warn('Animation has been interrupted.', e);
           animationInterrupted = true;
         }
       };
@@ -7921,10 +8115,17 @@ class DiagramCanvas {
     }
   }
   getClosestGridPoint(point) {
-    if (this.gridSize === 0 || !isFinite(this.gridSize)) {
-      return point;
+    let pointX = point[0];
+    const spacingX = getGridSpacingX(this.gridConfig);
+    if (spacingX !== 0) {
+      pointX = Math.round(pointX / spacingX) * spacingX;
+    }
+    let pointY = point[1];
+    const spacingY = getGridSpacingY(this.gridConfig);
+    if (spacingY !== 0) {
+      pointY = Math.round(pointY / spacingY) * spacingY;
     }
-    return [Math.round(point[0] / this.gridSize) * this.gridSize, Math.round(point[1] / this.gridSize) * this.gridSize];
+    return [pointX, pointY];
   }
   getCoordinatesOnScreen() {
     var _a;
@@ -8059,7 +8260,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
           pointerCoords[0] += d.type.snapToGridOffset[0];
           pointerCoords[1] += d.type.snapToGridOffset[1];
@@ -8095,7 +8296,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
           pointerCoords[0] += d.type.snapToGridOffset[0];
           pointerCoords[1] += d.type.snapToGridOffset[1];
@@ -8131,7 +8332,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
           pointerCoords[0] += d.type.snapToGridOffset[2];
           pointerCoords[1] += d.type.snapToGridOffset[3];
@@ -8167,12 +8368,10 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
-          if (this.snapToGrid) {
-            pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
-            pointerCoords[0] += d.type.snapToGridOffset[2];
-            pointerCoords[1] += d.type.snapToGridOffset[3];
-          }
+        if (this.gridConfig.snap) {
+          pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[2], pointerCoords[1] - d.type.snapToGridOffset[3]]);
+          pointerCoords[0] += d.type.snapToGridOffset[2];
+          pointerCoords[1] += d.type.snapToGridOffset[3];
         }
         d.stretch(exports.Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
         this.currentAction.to = d.getGeometry();
@@ -8298,7 +8497,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(exports.Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
@@ -8332,7 +8531,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(exports.Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
@@ -8366,7 +8565,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(exports.Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
@@ -8400,7 +8599,7 @@ class DiagramCanvas {
     }).on(exports.DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(exports.DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === exports.DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(exports.Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
@@ -8771,9 +8970,9 @@ class DiagramCanvas {
       }
       this.secondaryButton = false;
     }));
-    enterSelection.append('text');
+    enterSelection.append('text').style('user-select', 'none').style('font-kerning', 'none').style('white-space', 'nowrap');
     enterSelection.append('rect');
-    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === exports.HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === exports.HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'middle' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === exports.VerticalAlign.Center ? d.height / 2 : d.verticalAlign === exports.VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === exports.VerticalAlign.Center ? 'middle' : d.verticalAlign === exports.VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.fontSize).attr('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.highlighted ? 600 : 400).attr('fill', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').each(d => {
+    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === exports.HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === exports.HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === exports.HorizontalAlign.Center ? 'middle' : d.horizontalAlign === exports.HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === exports.VerticalAlign.Center ? d.height / 2 : d.verticalAlign === exports.VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === exports.VerticalAlign.Center ? 'middle' : d.verticalAlign === exports.VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('font-family', d => d.look.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.look.fontWeight || DIAGRAM_FIELD_DEFAULTS.look.fontWeight).attr('fill', d => d.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).style('font-kerning', 'none').each(d => {
       this.setFieldTextAndWrap(d);
     });
     mergeSelection
@@ -8788,7 +8987,7 @@ class DiagramCanvas {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.svg);
     exitSelection.remove();
     enterSelection.on(exports.Events.ContextMenu, (event, d) => {
       if (this.dragging) {
@@ -8831,7 +9030,7 @@ class DiagramCanvas {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
     const mergeSelection = enterSelection.merge(updateSelection);
-    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
+    mergeSelection.attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.svg);
     exitSelection.remove();
     enterSelection.on(exports.Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
@@ -8932,6 +9131,7 @@ class DiagramCanvas {
     const pathSelection = connectionSelection.select('path');
     const pathNode = pathSelection.node();
     const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), connection.type.label);
+    labelConfiguration.look = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS.look), labelConfiguration.look);
     if (pathNode) {
       const pathLength = pathNode.getTotalLength();
       let startLabelShiftX = 0;
@@ -8940,7 +9140,7 @@ class DiagramCanvas {
       let middleLabelShiftY = 0;
       let endLabelShiftX = 0;
       let endLabelShiftY = 0;
-      if (labelConfiguration.backgroundColor === '#00000000') {
+      if (labelConfiguration.look.fillColor === 'transparent') {
         // background color is transparent / not set, so we find an alternative position for the label
         const deltaX = connection.endCoords[0] - connection.startCoords[0];
         const deltaY = connection.endCoords[1] - connection.startCoords[1];
@@ -8995,7 +9195,7 @@ class DiagramCanvas {
         }
       }
       // bind start labels
-      connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.startLabel);
+      connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).text(connection.startLabel);
       const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
       if (startLabelBoundingRect) {
         // don't create space for the label if the label is empty
@@ -9018,22 +9218,22 @@ class DiagramCanvas {
           default:
             pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
         }
-        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
         connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x + startLabelShiftX * boundingWidth},${pathStartLabelPoint.y + startLabelShiftY * boundingHeight})`);
       }
       // bind middle labels
-      connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.middleLabel);
+      connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).style('font-kerning', 'none').text(connection.middleLabel);
       const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
       if (middleLabelBoundingRect) {
         // don't create space for the label if the label is empty
         const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
         const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
-        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
         connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x + middleLabelShiftX * boundingWidth},${pathMiddleLabelPoint.y + middleLabelShiftY * boundingHeight})`);
       }
       // bind end labels
-      connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.endLabel);
+      connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', (labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily).attr('font-size', labelConfiguration.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize).attr('fill', labelConfiguration.look.fontColor || DIAGRAM_FIELD_DEFAULTS.look.fontColor).style('font-kerning', 'none').text(connection.endLabel);
       const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
       if (endLabelBoundingRect) {
         // don't create space for the label if the label is empty
@@ -9056,7 +9256,7 @@ class DiagramCanvas {
           default:
             pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
         }
-        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.backgroundColor).attr('stroke', 'none');
+        connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', labelConfiguration.look.fillColor || DIAGRAM_FIELD_DEFAULTS.look.fillColor).attr('stroke', 'none');
         connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x + endLabelShiftX * boundingWidth},${pathEndLabelPoint.y + endLabelShiftY * boundingHeight})`);
       }
     }
@@ -9100,9 +9300,13 @@ class DiagramCanvas {
       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;
-      if (this.snapToGrid) {
-        stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
-        stretchY = Math.ceil(stretchY / this.gridSize) * this.gridSize;
+      const spacingX = getGridSpacingX(this.gridConfig);
+      const spacingY = getGridSpacingY(this.gridConfig);
+      if (this.gridConfig.snap && spacingX !== 0) {
+        stretchX = Math.ceil(stretchX / spacingX) * spacingX;
+      }
+      if (this.gridConfig.snap && spacingY !== 0) {
+        stretchY = Math.ceil(stretchY / spacingY) * spacingY;
       }
       // ensure node is not stretched under its minimum dimensions
       if (field.rootElement.width + stretchX < field.rootElement.type.minWidth) {
@@ -9140,9 +9344,13 @@ class DiagramCanvas {
       const type = field.rootElement.type;
       let stretchX = fieldDimensions[0] + getLeftMargin(type === null || type === void 0 ? void 0 : type.label) + getRightMargin(type === null || type === void 0 ? void 0 : type.label) - field.rootElement.width;
       let stretchY = fieldDimensions[1] + getTopMargin(type === null || type === void 0 ? void 0 : type.label) + getBottomMargin(type === null || type === void 0 ? void 0 : type.label) - field.rootElement.height;
-      if (this.snapToGrid) {
-        stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
-        stretchY = Math.ceil(stretchY / this.gridSize) * this.gridSize;
+      const spacingX = getGridSpacingX(this.gridConfig);
+      const spacingY = getGridSpacingY(this.gridConfig);
+      if (this.gridConfig.snap && spacingX !== 0) {
+        stretchX = Math.ceil(stretchX / spacingX) * spacingX;
+      }
+      if (this.gridConfig.snap && spacingY !== 0) {
+        stretchY = Math.ceil(stretchY / spacingY) * spacingY;
       }
       // ensure section is not stretched under its minimum dimensions
       if (field.rootElement.width + stretchX < (field.rootElement.getMinWidth() || 0)) {
@@ -9192,13 +9400,13 @@ class DiagramCanvas {
     return d3__namespace.select(this.diagramRoot);
   }
   selectSVGElement() {
-    return d3__namespace.select(this.diagramRoot).select('svg');
+    return this.selectRoot().select('svg');
   }
   selectCanvasView() {
     return this.selectSVGElement().select(`.daga-canvas-view`);
   }
   selectCanvasElements() {
-    return this.selectSVGElement().select(`.daga-canvas-elements`);
+    return this.selectCanvasView().select(`.daga-canvas-elements`);
   }
   // User actions
   startConnection(port) {
@@ -9310,7 +9518,7 @@ class DiagramCanvas {
   openTextInput(id) {
     const field = this.model.fields.get(id);
     if (field) {
-      this.createInputField(field.text, field.coords, field.width, field.height, field.fontSize, field.fontFamily || DIAGRAM_FIELD_DEFAULTS.fontFamily, field.orientation, field.multiline, () => {
+      this.createInputField(field.text, field.coords, field.width, field.height, field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize, field.look.fontFamily || DIAGRAM_FIELD_DEFAULTS.look.fontFamily, field.orientation, field.multiline, () => {
         // (_text)
         /*
             Empty for now
@@ -9347,7 +9555,7 @@ class DiagramCanvas {
       }
     }).on(exports.Events.KeyUp, event => {
       event.stopPropagation();
-    }).on(exports.Events.Input, event => {
+    }).on(exports.Events.Input, () => {
       const value = inputField.property('value');
       inputField.attr('cols', numberOfColumns(value) + 1);
       inputField.attr('rows', numberOfRows(value) + 1);
@@ -9436,7 +9644,7 @@ class DiagramCanvas {
     const lines = text.split('\n');
     textSelection.html('');
     for (let i = 0; i < lines.length; ++i) {
-      textSelection.append('tspan').attr('x', field.horizontalAlign === exports.HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === exports.HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === exports.VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * field.fontSize + field.height / 2 : field.verticalAlign === exports.VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * field.fontSize : i * field.fontSize).text(lines[i]);
+      textSelection.append('tspan').attr('x', field.horizontalAlign === exports.HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === exports.HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === exports.VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + field.height / 2 : field.verticalAlign === exports.VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) : i * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize)).text(lines[i]);
     }
   }
   /**
@@ -9476,12 +9684,12 @@ class DiagramCanvas {
    * Method to call to finish the moving of a node triggered by a user drag event.
    */
   finishMovingNode(event, d) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (this.canUserPerformAction(exports.DiagramActions.MoveNode) && !d.removed) {
       // prevent drag behavior if mouse hasn't moved
       if (this.draggingFrom[0] !== event.x || this.draggingFrom[1] !== event.y) {
         let newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
-        if (this.snapToGrid) {
+        if ((_a = this.gridConfig) === null || _a === void 0 ? void 0 : _a.snap) {
           newNodeCoords = this.getClosestGridPoint([newNodeCoords[0] - d.type.snapToGridOffset[0], newNodeCoords[1] - d.type.snapToGridOffset[1]]);
           newNodeCoords[0] += d.type.snapToGridOffset[0];
           newNodeCoords[1] += d.type.snapToGridOffset[1];
@@ -9508,8 +9716,8 @@ class DiagramCanvas {
           if (droppedOn !== d.parent && (d.type.canBeParentless || droppedOn !== undefined)) {
             const ancestorOfDroppedOn = droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.getLastAncestor();
             const fromChildGeometry = this.currentAction.from;
-            const setParentAction = new SetParentAction(this, d.id, (_a = d.parent) === null || _a === void 0 ? void 0 : _a.id, droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id));
-            (_b = d.parent) === null || _b === void 0 ? void 0 : _b.removeChild(d);
+            const setParentAction = new SetParentAction(this, d.id, (_b = d.parent) === null || _b === void 0 ? void 0 : _b.id, droppedOn === null || droppedOn === void 0 ? void 0 : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === void 0 ? void 0 : ancestorOfDroppedOn.getGeometry(d.id));
+            (_c = d.parent) === null || _c === void 0 ? void 0 : _c.removeChild(d);
             if (droppedOn !== undefined) {
               droppedOn.addChild(d);
             }
@@ -9520,7 +9728,7 @@ class DiagramCanvas {
             const ancestorOfNode = d === null || d === void 0 ? void 0 : d.getLastAncestor();
             this.currentAction.ancestorId = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.id;
             this.currentAction.fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
-            (_c = d.parent) === null || _c === void 0 ? void 0 : _c.fitToChild(d);
+            (_d = d.parent) === null || _d === void 0 ? void 0 : _d.fitToChild(d);
             this.currentAction.to = d.getGeometry(d.id);
             this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === void 0 ? void 0 : ancestorOfNode.getGeometry(d.id);
           }
@@ -9931,7 +10139,7 @@ class AdjacencyLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b, _c, _d;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
@@ -9945,12 +10153,13 @@ 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 = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_c = model.canvas) === null || _c === void 0 ? void 0 : _c.gridConfig) ? getGridSpacingY((_d = model.canvas) === null || _d === void 0 ? void 0 : _d.gridConfig) * 2 : 0;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
         if (node !== undefined) {
-          node.move([x * (maximumWidth + gapSize), y * (maximumHeight + gapSize)]);
+          node.move([x * (maximumWidth + gapSizeX), y * (maximumHeight + gapSizeY)]);
         }
       }
     }
@@ -9977,7 +10186,7 @@ class BreadthAdjacencyLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b, _c, _d;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
@@ -10013,12 +10222,13 @@ 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 = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_c = model.canvas) === null || _c === void 0 ? void 0 : _c.gridConfig) ? getGridSpacingY((_d = model.canvas) === null || _d === void 0 ? void 0 : _d.gridConfig) * 2 : 0;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
         if (node !== undefined) {
-          node.move([x * (maximumWidth + gapSize), y * (maximumHeight + gapSize)]);
+          node.move([x * (maximumWidth + gapSizeX), y * (maximumHeight + gapSizeY)]);
         }
       }
     }
@@ -10035,12 +10245,13 @@ class BreadthLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b, _c, _d;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_c = model.canvas) === null || _c === void 0 ? void 0 : _c.gridConfig) ? getGridSpacingY((_d = model.canvas) === null || _d === void 0 ? void 0 : _d.gridConfig) * 2 : 0;
     let nodesToBeArranged = model.nodes.filter(n => !n.parent);
     // Arrange nodes by a breadth first search
     const firstNode = nodesToBeArranged[0];
@@ -10079,10 +10290,10 @@ class BreadthLayout {
       let heightAccumulator = 0;
       for (const node of nodeArrangementRow) {
         node.move([widthAccumulator, heightAccumulator]);
-        heightAccumulator += gapSize + node.height;
+        heightAccumulator += gapSizeY + node.height;
       }
       const maximumWidth = Math.max(...nodeArrangementRow.map(n => n.width));
-      widthAccumulator += gapSize + maximumWidth;
+      widthAccumulator += gapSizeX + maximumWidth;
     }
     for (const connection of model.connections) {
       connection.tighten();
@@ -10100,14 +10311,16 @@ class ForceLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b, _c, _d;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
     // as a starting point, we apply a simple layout
     new BreadthLayout(this.gapSize).apply(model);
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_c = model.canvas) === null || _c === void 0 ? void 0 : _c.gridConfig) ? getGridSpacingY((_d = model.canvas) === null || _d === void 0 ? void 0 : _d.gridConfig) * 2 : 0;
+    const gapSize = Math.max(gapSizeX, gapSizeY);
     const coolingFactor = 0.99;
     const minimumTemperature = 1;
     const attractionFactor = 0.1;
@@ -10176,7 +10389,7 @@ class ForceLayout {
         }
       }
     }
-    if (model.canvas && model.canvas.snapToGrid) {
+    if (model.canvas && model.canvas.gridConfig.snap) {
       for (const node of model.nodes) {
         const snappedCoords = model.canvas.getClosestGridPoint([node.coords[0] - node.type.snapToGridOffset[0], node.coords[1] - node.type.snapToGridOffset[1]]);
         snappedCoords[0] += node.type.snapToGridOffset[0];
@@ -10200,18 +10413,18 @@ class HorizontalLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let widthAccumulator = 0;
     for (const node of nodesToBeArranged) {
       node.move([widthAccumulator, 0]);
-      widthAccumulator += node.width + gapSize;
+      widthAccumulator += node.width + gapSizeX;
     }
     return model;
   }
@@ -10226,7 +10439,7 @@ class PriorityLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b, _c, _d;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
@@ -10238,7 +10451,8 @@ class PriorityLayout {
       new BreadthLayout(this.gapSize).apply(model);
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_c = model.canvas) === null || _c === void 0 ? void 0 : _c.gridConfig) ? getGridSpacingY((_d = model.canvas) === null || _d === void 0 ? void 0 : _d.gridConfig) * 2 : 0;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     const nodeArrangement = [];
     const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(n => !n.parent).filter(n => n.getPriority() >= maximumPriority);
@@ -10315,10 +10529,10 @@ class PriorityLayout {
       for (let j = 0; j < nodeArrangement[i].length; ++j) {
         const node = nodeArrangement[i][j];
         node.move([widthAccumulator, heightAccumulator]);
-        heightAccumulator += gapSize + node.height;
+        heightAccumulator += gapSizeY + node.height;
       }
       const maximumWidth = Math.max(...nodeArrangement[i].map(n => n.width));
-      widthAccumulator += gapSize + maximumWidth;
+      widthAccumulator += gapSizeX + maximumWidth;
     }
     for (const connection of model.connections) {
       connection.tighten();
@@ -10336,7 +10550,7 @@ class TreeLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b, _c, _d;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
@@ -10348,7 +10562,8 @@ class TreeLayout {
       new BreadthLayout(this.gapSize).apply(model);
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeX = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingX((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_c = model.canvas) === null || _c === void 0 ? void 0 : _c.gridConfig) ? getGridSpacingY((_d = model.canvas) === null || _d === void 0 ? void 0 : _d.gridConfig) * 2 : 0;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent).sort((n1, n2) => n2.getPriority() - n1.getPriority());
     const branches = [];
     while (nodesToBeArranged.length > 0) {
@@ -10370,10 +10585,10 @@ class TreeLayout {
       for (let j = 0; j < branchArrangement[i].length; ++j) {
         const branch = branchArrangement[i][j];
         branch.node.move([widthAccumulator, heightAccumulator]);
-        heightAccumulator += (gapSize + maximumHeight) * branch.countBranchHeight();
+        heightAccumulator += (gapSizeY + maximumHeight) * branch.countBranchHeight();
       }
       const maximumWidth = Math.max(...branchArrangement[i].map(b => b.node.width));
-      widthAccumulator += gapSize + maximumWidth;
+      widthAccumulator += gapSizeX + maximumWidth;
     }
     for (const connection of model.connections) {
       connection.tighten();
@@ -10437,18 +10652,18 @@ class VerticalLayout {
     this.gapSize = gapSize;
   }
   apply(model) {
-    var _a;
+    var _a, _b;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = this.gapSize !== undefined ? this.gapSize : (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSizeY = this.gapSize !== undefined ? this.gapSize : ((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridConfig) ? getGridSpacingY((_b = model.canvas) === null || _b === void 0 ? void 0 : _b.gridConfig) * 2 : 0;
     const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let heightAccumulator = 0;
     for (const node of nodesToBeArranged) {
       node.move([0, heightAccumulator]);
-      heightAccumulator += node.height + gapSize;
+      heightAccumulator += node.height + gapSizeY;
     }
     return model;
   }