@metadev/daga 5.0.5 → 5.1.1

package/index.esm.js

@@ -1151,7 +1151,9 @@ var CursorStyle;
   CursorStyle["Grabbing"] = "grabbing";
   CursorStyle["Move"] = "move";
   CursorStyle["NoDrop"] = "no-drop";
+  CursorStyle["NESWResize"] = "nesw-resize";
   CursorStyle["NSResize"] = "ns-resize";
+  CursorStyle["NWSEResize"] = "nwse-resize";
   CursorStyle["NotAllowed"] = "not-allowed";
   CursorStyle["ZoomIn"] = "zoom-in";
   CursorStyle["ZoomOut"] = "zoom-out";
@@ -1250,283 +1252,6 @@ const extractLooksFromConfig = lookConfig => {
   };
 };
 
-/**
- * Represents a collection of diagram entities of a type that exists as part of a diagram model.
- * @public
- * @see DiagramEntity
- * @see DiagramModel
- */
-class DiagramEntitySet {
-  constructor() {
-    /**
-     * The list of entities contained in this set.
-     * @private
-     */
-    this.entities = [];
-    /**
-     * A mapping of entity ids to their corresponding entity in this set for quickly fetching entities based on their id.
-     * @private
-     */
-    this.entityMap = {};
-  }
-  /**
-   * The number of entities in this set.
-   * @public
-   */
-  get length() {
-    return this.size();
-  }
-  /**
-   * Gets all of the entities of this set.
-   * @public
-   * @returns An array containing all of the entities of this set.
-   */
-  all() {
-    return [...this.entities];
-  }
-  /**
-   * Adds an entity to this set if there are no entities with the same id. Has no effect if there already exists an entity with the same id as the given entity.
-   * For creating entities with relationships with other entities, the new() method should be used instead. The add() method adds an entity but doesn't take care of setting that entity's relationships with other entities.
-   * @private
-   * @param entity An entity to be added to this set.
-   */
-  add(entity) {
-    if (this.entityMap[entity.id] === undefined) {
-      this.entityMap[entity.id] = entity;
-      this.entities.push(entity);
-    }
-  }
-  /**
-   * Removes all the entities in this set.
-   * @public
-   */
-  clear() {
-    // remove each entity individually in case classes that extend this implement their own specific cleanup
-    while (this.entities.length > 0) {
-      this.remove(this.entities[0].id);
-    }
-  }
-  /**
-   * Checks if this set contains an entity with the given id.
-   * @public
-   * @param id An id.
-   * @returns `true` if this set contains an entity with the given id, `false` otherwise.
-   */
-  contains(id) {
-    return this.entityMap[id] !== undefined;
-  }
-  /**
-   * Counts the number of entities of this set following the given criteria.
-   * @public
-   * @returns The number of entities of this set following the given criteria.
-   */
-  count(predicate) {
-    return this.entities.filter(predicate).length;
-  }
-  /**
-   * Gets all of the entities of this set filtered following given criteria.
-   * @public
-   * @returns An array containing the entities of this set that meet the given criteria.
-   */
-  filter(predicate) {
-    return this.entities.filter(predicate);
-  }
-  /**
-   * Gets an entity of this set matching specific criteria.
-   * @public
-   * @returns An entity of this set.
-   */
-  find(predicate) {
-    return this.entities.find(predicate);
-  }
-  /**
-   * Gets an entity from this set.
-   * @public
-   * @param id An id.
-   * @returns An entity with the given id, or `undefined` if there are no entities with the given id.
-   */
-  get(id) {
-    return this.entityMap[id];
-  }
-  /**
-   * Gets all of the entities of this set mapped to the result of the given function applied to them.
-   * @public
-   * @returns An array containing the entities of this set that meet the given criteria.
-   */
-  map(callback) {
-    return this.entities.map(callback);
-  }
-  /**
-   * Attempts to find and remove an entity with the given id. Has no effect if there are no entities with the given id.
-   * @public
-   * @param id An id.
-   */
-  remove(id) {
-    const entity = this.get(id);
-    if (entity !== undefined) {
-      delete this.entityMap[id];
-      removeIfExists(this.entities, entity);
-    }
-  }
-  /**
-   * Gets the number of entities in this set.
-   * @public
-   */
-  size() {
-    return this.entities.length;
-  }
-  /**
-   * Iterator to iterate over the entities of this set.
-   * @public
-   */
-  *[Symbol.iterator]() {
-    for (const entity of this.entities) {
-      yield entity;
-    }
-  }
-}
-
-/**
- * Default priority value for diagram elements.
- * @private
- */
-const DEFAULT_PRIORITY = 0;
-/**
- * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
- * @public
- * @see DiagramModel
- * @see DiagramCanvas
- */
-class DiagramElement {
-  /**
-   * Identifier that uniquely identifies this element within its diagram model. Cannot be an empty string.
-   * @public
-   */
-  get id() {
-    return this._id;
-  }
-  /**
-   * Whether this diagram element is currently in the user highlight.
-   * @private
-   */
-  get highlighted() {
-    var _a, _b;
-    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userHighlight) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
-  }
-  /**
-   * Whether this diagram element is currently in the user selection.
-   */
-  get selected() {
-    var _a, _b;
-    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
-  }
-  constructor(model, id) {
-    /**
-     * Whether this diagram element has itself been explicitly removed.
-     *
-     * Override the `removed` getter so that it returns true if and only if:
-     * - `selfRemoved` is true, or
-     * - `removed` is true for any of this element's dependencies.
-     *
-     * For example, a DiagramConnection is removed if either of its ports are removed,
-     * even if the connection's own `selfRemoved` field is false.
-     * @private
-     */
-    this.selfRemoved = false;
-    /**
-     * Collaborative timestamp for selfRemoved.
-     * @private
-     */
-    this.selfRemovedTimestamp = null;
-    this.model = model;
-    this._id = id;
-  }
-  /**
-   * Obtain the selection of this element.
-   * @private
-   */
-  select() {
-    var _a, _b;
-    return (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select(`[id='${escapeSelector(this.id)}']`);
-  }
-}
-class DiagramElementSet extends DiagramEntitySet {
-  all(includeRemoved = false) {
-    if (includeRemoved) {
-      return super.all();
-    } else {
-      return super.filter(e => !e.removed);
-    }
-  }
-  contains(id, includeRemoved = false) {
-    if (includeRemoved) {
-      return super.contains(id);
-    } else {
-      return super.contains(id) && !this.entityMap[id].removed;
-    }
-  }
-  count(predicate, includeRemoved = false) {
-    if (includeRemoved) {
-      return super.count(predicate);
-    } else {
-      return super.count((e, i, a) => predicate(e, i, a) && !e.removed);
-    }
-  }
-  filter(predicate, includeRemoved = false) {
-    if (includeRemoved) {
-      return super.filter(predicate);
-    } else {
-      return super.filter((e, i, a) => predicate(e, i, a) && !e.removed);
-    }
-  }
-  find(predicate, includeRemoved = false) {
-    if (includeRemoved) {
-      return super.find(predicate);
-    } else {
-      return super.find((e, i, a) => predicate(e, i, a) && !e.removed);
-    }
-  }
-  get(id, includeRemoved = false) {
-    if (includeRemoved) {
-      return super.get(id);
-    } else {
-      return this.contains(id) ? super.get(id) : undefined;
-    }
-  }
-  map(callback, includeRemoved = false) {
-    if (includeRemoved) {
-      return super.map(callback);
-    } else {
-      return super.filter(e => !e.removed).map(callback);
-    }
-  }
-  remove(id) {
-    const entity = this.get(id, true);
-    if (entity !== undefined) {
-      delete this.entityMap[id];
-      removeIfExists(this.entities, entity);
-    }
-  }
-  size(includeRemoved = false) {
-    if (includeRemoved) {
-      return super.size();
-    } else {
-      return super.filter(e => !e.removed).length;
-    }
-  }
-  *[Symbol.iterator](includeRemoved = false) {
-    if (includeRemoved) {
-      for (const entity of this.entities) {
-        yield entity;
-      }
-    } else {
-      for (const entity of this.entities.filter(e => !e.removed)) {
-        yield entity;
-      }
-    }
-  }
-}
-
 /**
  * A property which is part of a property set and defines what values a value in a value set can take.
  * @public
@@ -2041,76 +1766,353 @@ class ValueSet {
     }
   }
   /**
-   * Sets all the values of this set to the defaults.
-   * If this set has a root element and any of its properties have root attributes, the root element's attributes are also set to the property's default value if one is provided.
-   * @private
+   * Sets all the values of this set to the defaults.
+   * If this set has a root element and any of its properties have root attributes, the root element's attributes are also set to the property's default value if one is provided.
+   * @private
+   */
+  resetValues() {
+    this.displayedProperties = [];
+    this.hiddenProperties = [];
+    this.ownTimestamps = {};
+    for (const key in this.propertySet.propertyMap) {
+      const property = this.propertySet.getProperty(key);
+      const rootAttribute = property.rootAttribute;
+      if (property.type === Type.Object) {
+        this.valueSets[key] = this.constructSubValueSet(key);
+      } else {
+        this.values[key] = clone(property.defaultValue);
+      }
+      if (rootAttribute !== undefined && rootAttribute !== null) {
+        if (property.defaultValue !== undefined && !equals(this.getRootElementValue(rootAttribute), property.defaultValue)) {
+          this.setRootElementValue(rootAttribute, this.values[key]);
+        }
+      }
+      if (property.basic !== false) {
+        this.displayedProperties.push(property);
+      } else {
+        this.hiddenProperties.push(property);
+      }
+    }
+  }
+  /**
+   * Constructs a ValueSet with its corresponding PropertySet representing the values of the object.
+   * @private
+   * @param key Key that the ValueSet is under.
+   * @returns The constructed ValueSet.
+   */
+  constructSubValueSet(key) {
+    const property = this.propertySet.getProperty(key);
+    const propertySet = new PropertySet(property.properties);
+    const valueSet = new ValueSet(propertySet, this.rootElement);
+    valueSet.overwriteValues(clone(property.defaultValue));
+    return valueSet;
+  }
+  /**
+   * Gets the ValueSet under the given key when there are nested ValueSets.
+   * @private
+   * @param key A key.
+   * @returns A ValueSet.
+   */
+  getSubValueSet(key) {
+    return this.valueSets[key];
+  }
+  /**
+   * Moves the given property to the list of displayed properties.
+   * @private
+   * @param property A property.
+   */
+  displayProperty(property) {
+    if (!this.displayedProperties.includes(property)) {
+      this.displayedProperties.push(property);
+      removeIfExists(this.hiddenProperties, property);
+    }
+  }
+  /**
+   * Moves the given property to the list of hidden properties.
+   * @private
+   * @param property A property.
+   */
+  hideProperty(property) {
+    if (!this.hiddenProperties.includes(property)) {
+      this.hiddenProperties.push(property);
+      removeIfExists(this.displayedProperties, property);
+    }
+  }
+}
+
+/**
+ * Represents a collection of diagram entities of a type that exists as part of a diagram model.
+ * @public
+ * @see DiagramEntity
+ * @see DiagramModel
+ */
+class DiagramEntitySet {
+  constructor() {
+    /**
+     * The list of entities contained in this set.
+     * @private
+     */
+    this.entities = [];
+    /**
+     * A mapping of entity ids to their corresponding entity in this set for quickly fetching entities based on their id.
+     * @private
+     */
+    this.entityMap = {};
+  }
+  /**
+   * The number of entities in this set.
+   * @public
+   */
+  get length() {
+    return this.size();
+  }
+  /**
+   * Gets all of the entities of this set.
+   * @public
+   * @returns An array containing all of the entities of this set.
+   */
+  all() {
+    return [...this.entities];
+  }
+  /**
+   * Adds an entity to this set if there are no entities with the same id. Has no effect if there already exists an entity with the same id as the given entity.
+   * For creating entities with relationships with other entities, the new() method should be used instead. The add() method adds an entity but doesn't take care of setting that entity's relationships with other entities.
+   * @private
+   * @param entity An entity to be added to this set.
+   */
+  add(entity) {
+    if (this.entityMap[entity.id] === undefined) {
+      this.entityMap[entity.id] = entity;
+      this.entities.push(entity);
+    }
+  }
+  /**
+   * Removes all the entities in this set.
+   * @public
+   */
+  clear() {
+    // remove each entity individually in case classes that extend this implement their own specific cleanup
+    while (this.entities.length > 0) {
+      this.remove(this.entities[0].id);
+    }
+  }
+  /**
+   * Checks if this set contains an entity with the given id.
+   * @public
+   * @param id An id.
+   * @returns `true` if this set contains an entity with the given id, `false` otherwise.
+   */
+  contains(id) {
+    return this.entityMap[id] !== undefined;
+  }
+  /**
+   * Counts the number of entities of this set following the given criteria.
+   * @public
+   * @returns The number of entities of this set following the given criteria.
+   */
+  count(predicate) {
+    return this.entities.filter(predicate).length;
+  }
+  /**
+   * Gets all of the entities of this set filtered following given criteria.
+   * @public
+   * @returns An array containing the entities of this set that meet the given criteria.
+   */
+  filter(predicate) {
+    return this.entities.filter(predicate);
+  }
+  /**
+   * Gets an entity of this set matching specific criteria.
+   * @public
+   * @returns An entity of this set.
+   */
+  find(predicate) {
+    return this.entities.find(predicate);
+  }
+  /**
+   * Gets an entity from this set.
+   * @public
+   * @param id An id.
+   * @returns An entity with the given id, or `undefined` if there are no entities with the given id.
+   */
+  get(id) {
+    return this.entityMap[id];
+  }
+  /**
+   * Gets all of the entities of this set mapped to the result of the given function applied to them.
+   * @public
+   * @returns An array containing the entities of this set that meet the given criteria.
+   */
+  map(callback) {
+    return this.entities.map(callback);
+  }
+  /**
+   * Attempts to find and remove an entity with the given id. Has no effect if there are no entities with the given id.
+   * @public
+   * @param id An id.
+   */
+  remove(id) {
+    const entity = this.get(id);
+    if (entity !== undefined) {
+      delete this.entityMap[id];
+      removeIfExists(this.entities, entity);
+    }
+  }
+  /**
+   * Gets the number of entities in this set.
+   * @public
    */
-  resetValues() {
-    this.displayedProperties = [];
-    this.hiddenProperties = [];
-    this.ownTimestamps = {};
-    for (const key in this.propertySet.propertyMap) {
-      const property = this.propertySet.getProperty(key);
-      const rootAttribute = property.rootAttribute;
-      if (property.type === Type.Object) {
-        this.valueSets[key] = this.constructSubValueSet(key);
-      } else {
-        this.values[key] = clone(property.defaultValue);
-      }
-      if (rootAttribute !== undefined && rootAttribute !== null) {
-        if (property.defaultValue !== undefined && !equals(this.getRootElementValue(rootAttribute), property.defaultValue)) {
-          this.setRootElementValue(rootAttribute, this.values[key]);
-        }
-      }
-      if (property.basic !== false) {
-        this.displayedProperties.push(property);
-      } else {
-        this.hiddenProperties.push(property);
-      }
+  size() {
+    return this.entities.length;
+  }
+  /**
+   * Iterator to iterate over the entities of this set.
+   * @public
+   */
+  *[Symbol.iterator]() {
+    for (const entity of this.entities) {
+      yield entity;
     }
   }
+}
+
+/**
+ * Default priority value for diagram elements.
+ * @private
+ */
+const DEFAULT_PRIORITY = 0;
+/**
+ * Represents an object which exists as part of a specific diagram model and has a visual representation in a diagram canvas.
+ * @public
+ * @see DiagramModel
+ * @see DiagramCanvas
+ */
+class DiagramElement {
   /**
-   * Constructs a ValueSet with its corresponding PropertySet representing the values of the object.
-   * @private
-   * @param key Key that the ValueSet is under.
-   * @returns The constructed ValueSet.
+   * Identifier that uniquely identifies this element within its diagram model. Cannot be an empty string.
+   * @public
    */
-  constructSubValueSet(key) {
-    const property = this.propertySet.getProperty(key);
-    const propertySet = new PropertySet(property.properties);
-    const valueSet = new ValueSet(propertySet, this.rootElement);
-    valueSet.overwriteValues(clone(property.defaultValue));
-    return valueSet;
+  get id() {
+    return this._id;
   }
   /**
-   * Gets the ValueSet under the given key when there are nested ValueSets.
+   * Whether this diagram element is currently in the user highlight.
    * @private
-   * @param key A key.
-   * @returns A ValueSet.
    */
-  getSubValueSet(key) {
-    return this.valueSets[key];
+  get highlighted() {
+    var _a, _b;
+    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userHighlight) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
   }
   /**
-   * Moves the given property to the list of displayed properties.
-   * @private
-   * @param property A property.
+   * Whether this diagram element is currently in the user selection.
    */
-  displayProperty(property) {
-    if (!this.displayedProperties.includes(property)) {
-      this.displayedProperties.push(property);
-      removeIfExists(this.hiddenProperties, property);
-    }
+  get selected() {
+    var _a, _b;
+    return ((_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.userSelection) === null || _b === void 0 ? void 0 : _b.contains(this.id)) || false;
+  }
+  constructor(model, id) {
+    /**
+     * Whether this diagram element has itself been explicitly removed.
+     *
+     * Override the `removed` getter so that it returns true if and only if:
+     * - `selfRemoved` is true, or
+     * - `removed` is true for any of this element's dependencies.
+     *
+     * For example, a DiagramConnection is removed if either of its ports are removed,
+     * even if the connection's own `selfRemoved` field is false.
+     * @private
+     */
+    this.selfRemoved = false;
+    /**
+     * Collaborative timestamp for selfRemoved.
+     * @private
+     */
+    this.selfRemovedTimestamp = null;
+    this.model = model;
+    this._id = id;
   }
   /**
-   * Moves the given property to the list of hidden properties.
+   * Obtain the selection of this element.
    * @private
-   * @param property A property.
    */
-  hideProperty(property) {
-    if (!this.hiddenProperties.includes(property)) {
-      this.hiddenProperties.push(property);
-      removeIfExists(this.displayedProperties, property);
+  select() {
+    var _a, _b;
+    return (_b = (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.selectCanvasView()) === null || _b === void 0 ? void 0 : _b.select(`[id='${escapeSelector(this.id)}']`);
+  }
+}
+class DiagramElementSet extends DiagramEntitySet {
+  all(includeRemoved = false) {
+    if (includeRemoved) {
+      return super.all();
+    } else {
+      return super.filter(e => !e.removed);
+    }
+  }
+  contains(id, includeRemoved = false) {
+    if (includeRemoved) {
+      return super.contains(id);
+    } else {
+      return super.contains(id) && !this.entityMap[id].removed;
+    }
+  }
+  count(predicate, includeRemoved = false) {
+    if (includeRemoved) {
+      return super.count(predicate);
+    } else {
+      return super.count((e, i, a) => predicate(e, i, a) && !e.removed);
+    }
+  }
+  filter(predicate, includeRemoved = false) {
+    if (includeRemoved) {
+      return super.filter(predicate);
+    } else {
+      return super.filter((e, i, a) => predicate(e, i, a) && !e.removed);
+    }
+  }
+  find(predicate, includeRemoved = false) {
+    if (includeRemoved) {
+      return super.find(predicate);
+    } else {
+      return super.find((e, i, a) => predicate(e, i, a) && !e.removed);
+    }
+  }
+  get(id, includeRemoved = false) {
+    if (includeRemoved) {
+      return super.get(id);
+    } else {
+      return this.contains(id) ? super.get(id) : undefined;
+    }
+  }
+  map(callback, includeRemoved = false) {
+    if (includeRemoved) {
+      return super.map(callback);
+    } else {
+      return super.filter(e => !e.removed).map(callback);
+    }
+  }
+  remove(id) {
+    const entity = this.get(id, true);
+    if (entity !== undefined) {
+      delete this.entityMap[id];
+      removeIfExists(this.entities, entity);
+    }
+  }
+  size(includeRemoved = false) {
+    if (includeRemoved) {
+      return super.size();
+    } else {
+      return super.filter(e => !e.removed).length;
+    }
+  }
+  *[Symbol.iterator](includeRemoved = false) {
+    if (includeRemoved) {
+      for (const entity of this.entities) {
+        yield entity;
+      }
+    } else {
+      for (const entity of this.entities.filter(e => !e.removed)) {
+        yield entity;
+      }
     }
   }
 }
@@ -2124,7 +2126,6 @@ const DIAGRAM_CONNECTION_TYPE_DEFAULTS = {
   name: '',
   label: null,
   look: {
-    lookType: 'connection-look',
     color: '#000000',
     thickness: 1,
     shape: LineShape.Straight,
@@ -2666,6 +2667,28 @@ class DiagramConnectionSet extends DiagramElementSet {
   }
 }
 
+/**
+ * The different modes for when a node or section can be resized.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
+var ResizableMode;
+(function (ResizableMode) {
+  /**
+   * Resizable mode for always being resizable.
+   */
+  ResizableMode[ResizableMode["Always"] = 0] = "Always";
+  /**
+   * Resizable mode for only being resizable while selected.
+   */
+  ResizableMode[ResizableMode["OnlyWhenSelected"] = 1] = "OnlyWhenSelected";
+  /**
+   * Resizable mode for never being resizable.
+   */
+  ResizableMode[ResizableMode["Never"] = 2] = "Never";
+})(ResizableMode || (ResizableMode = {}));
+
 /**
  * Default values of the parameters of a diagram field.
  * @private
@@ -2673,19 +2696,21 @@ 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: 'transparent',
   horizontalAlign: HorizontalAlign.Center,
   verticalAlign: VerticalAlign.Center,
   orientation: Side.Top,
   multiline: false,
   fit: false,
-  shrink: true
+  shrink: true,
+  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.
@@ -2713,7 +2738,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');
@@ -2728,12 +2772,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 {
@@ -2754,7 +2795,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;
@@ -2799,8 +2844,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
@@ -2832,9 +2877,7 @@ const getBottomMargin = config => {
   } else if (typeof config.margin === 'number') {
     return config.margin;
   } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
+    if (config.margin.length === 1) {
       return config.margin[0];
     } else if (config.margin.length === 2) {
       return config.margin[0];
@@ -2851,9 +2894,7 @@ const getLeftMargin = config => {
   } else if (typeof config.margin === 'number') {
     return config.margin;
   } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
+    if (config.margin.length === 1) {
       return config.margin[0];
     } else if (config.margin.length === 2) {
       return config.margin[1];
@@ -2870,9 +2911,7 @@ const getRightMargin = config => {
   } else if (typeof config.margin === 'number') {
     return config.margin;
   } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
+    if (config.margin.length === 1) {
       return config.margin[0];
     } else if (config.margin.length === 2) {
       return config.margin[1];
@@ -2889,9 +2928,7 @@ const getTopMargin = config => {
   } else if (typeof config.margin === 'number') {
     return config.margin;
   } else {
-    if (config.margin.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.margin;
-    } else if (config.margin.length === 1) {
+    if (config.margin.length === 1) {
       return config.margin[0];
     } else if (config.margin.length === 2) {
       return config.margin[0];
@@ -2908,9 +2945,7 @@ const getBottomPadding$1 = config => {
   } else if (typeof config.padding === 'number') {
     return config.padding;
   } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
+    if (config.padding.length === 1) {
       return config.padding[0];
     } else if (config.padding.length === 2) {
       return config.padding[0];
@@ -2927,9 +2962,7 @@ const getLeftPadding$1 = config => {
   } else if (typeof config.padding === 'number') {
     return config.padding;
   } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
+    if (config.padding.length === 1) {
       return config.padding[0];
     } else if (config.padding.length === 2) {
       return config.padding[1];
@@ -2946,9 +2979,7 @@ const getRightPadding$1 = config => {
   } else if (typeof config.padding === 'number') {
     return config.padding;
   } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
+    if (config.padding.length === 1) {
       return config.padding[0];
     } else if (config.padding.length === 2) {
       return config.padding[1];
@@ -2965,24 +2996,88 @@ const getTopPadding$1 = config => {
   } else if (typeof config.padding === 'number') {
     return config.padding;
   } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
+    if (config.padding.length === 1) {
       return config.padding[0];
     } else if (config.padding.length === 2) {
       return config.padding[0];
     } else if (config.padding.length === 3) {
       return config.padding[0];
     } else {
-      return config.padding[0];
+      return config.padding[0];
+    }
+  }
+};
+
+/**
+ * Default values of the parameters of a diagram field.
+ * @private
+ * @see ResizerConfig
+ */
+const DIAGRAM_RESIZER_DEFAULTS = {
+  mode: ResizableMode.Never,
+  thickness: 10,
+  outerMargin: 0,
+  look: {
+    fillColor: 'transparent',
+    borderColor: 'transparent',
+    borderThickness: 0
+  }
+};
+/**
+ * Holds the data for the resizers of a type of node or section.
+ * @public
+ * @see DiagramNode
+ * @see DiagramSection
+ */
+class DiagramResizer {
+  constructor(options) {
+    var _a;
+    let config;
+    if (typeof options === 'boolean') {
+      config = {
+        mode: options ? ResizableMode.Always : ResizableMode.Never
+      };
+    } else if (typeof options === 'string' || typeof options === 'number') {
+      config = {
+        mode: options
+      };
+    } else {
+      config = options;
+    }
+    config = Object.assign(Object.assign({}, DIAGRAM_RESIZER_DEFAULTS), config);
+    this.mode = config.mode;
+    this.thickness = config.thickness;
+    this.outerMargin = config.outerMargin;
+    const looks = extractLooksFromConfig((_a = config.look) !== null && _a !== void 0 ? _a : DIAGRAM_RESIZER_DEFAULTS.look);
+    this.defaultLook = looks.defaultLook;
+    this.selectedLook = looks.selectedLook;
+    this.highlightedLook = looks.highlightedLook;
+    this.selectedAndHighlightedLook = looks.selectedAndHighlightedLook;
+  }
+  /**
+   * Current look of this resizer.
+   * @private
+   */
+  getLook(rootElement) {
+    if (!rootElement) {
+      return this.defaultLook;
+    }
+    if (rootElement.selected) {
+      if (rootElement.highlighted) {
+        return this.selectedAndHighlightedLook;
+      } else {
+        return this.selectedLook;
+      }
+    } else {
+      if (rootElement.highlighted) {
+        return this.highlightedLook;
+      } else {
+        return this.defaultLook;
+      }
     }
   }
-};
-
-var ResizableMode;
-(function (ResizableMode) {
-  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
-})(ResizableMode || (ResizableMode = {}));
+}
+const DIAGRAM_DEFAULT_RESIZER = new DiagramResizer(DIAGRAM_RESIZER_DEFAULTS);
 
 /**
  * Default value of the default width of a diagram section.
@@ -3036,8 +3131,21 @@ class DiagramSectionType {
     this.label = options.label || null;
     this.ports = options.ports || [];
     this.priority = options.priority || DEFAULT_PRIORITY;
-    this.resizableX = options.resizableX;
-    this.resizableY = options.resizableY;
+    if (typeof options.resizableX === 'undefined') {
+      this.resizerX = undefined;
+    } else {
+      this.resizerX = new DiagramResizer(options.resizableX);
+    }
+    if (typeof options.resizableY === 'undefined') {
+      this.resizerY = undefined;
+    } else {
+      this.resizerY = new DiagramResizer(options.resizableY);
+    }
+    if (typeof options.resizableXY === 'undefined') {
+      this.resizerXY = undefined;
+    } else {
+      this.resizerXY = new DiagramResizer(options.resizableXY);
+    }
     const looks = extractLooksFromConfig(options.look || DIAGRAM_NODE_LOOK_DEFAULTS);
     this.defaultLook = looks.defaultLook;
     this.selectedLook = looks.selectedLook;
@@ -3181,6 +3289,30 @@ class DiagramSection extends DiagramElement {
     var _a, _b, _c, _d, _e, _f;
     return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.sectionGrid) === null || _c === void 0 ? void 0 : _c.sections) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) === null || _e === void 0 ? void 0 : _e[this.indexXInNode]) === null || _f === void 0 ? void 0 : _f.priority) || DEFAULT_PRIORITY;
   }
+  /**
+   * Returns the horizontal resizer of this section.
+   * @public
+   */
+  getResizerX() {
+    var _a, _b, _c, _d;
+    return (_d = (_b = (_a = this.type) === null || _a === void 0 ? void 0 : _a.resizerX) !== null && _b !== void 0 ? _b : (_c = this.node) === null || _c === void 0 ? void 0 : _c.getResizerX()) !== null && _d !== void 0 ? _d : DIAGRAM_DEFAULT_RESIZER;
+  }
+  /**
+   * Returns the vertical resizer of this section.
+   * @public
+   */
+  getResizerY() {
+    var _a, _b, _c, _d;
+    return (_d = (_b = (_a = this.type) === null || _a === void 0 ? void 0 : _a.resizerY) !== null && _b !== void 0 ? _b : (_c = this.node) === null || _c === void 0 ? void 0 : _c.getResizerY()) !== null && _d !== void 0 ? _d : DIAGRAM_DEFAULT_RESIZER;
+  }
+  /**
+   * Returns the diagonal resizer of this section.
+   * @public
+   */
+  getResizerXY() {
+    var _a, _b, _c, _d;
+    return (_d = (_b = (_a = this.type) === null || _a === void 0 ? void 0 : _a.resizerXY) !== null && _b !== void 0 ? _b : (_c = this.node) === null || _c === void 0 ? void 0 : _c.getResizerXY()) !== null && _d !== void 0 ? _d : DIAGRAM_DEFAULT_RESIZER;
+  }
   /**
    * Returns whether this section can be resized horizontally.
    * If the section has a specific resizableX setting, it uses that.
@@ -3190,11 +3322,16 @@ class DiagramSection extends DiagramElement {
   getResizableX() {
     var _a;
     const sectionType = this.type;
-    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableX) !== undefined) {
-      if (sectionType.resizableX === ResizableMode.OnlyWhenSelected) {
-        return this.selected;
+    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizerX) !== undefined) {
+      switch (sectionType.resizerX.mode) {
+        case ResizableMode.OnlyWhenSelected:
+          return this.selected;
+        case ResizableMode.Always:
+          return true;
+        case ResizableMode.Never:
+        default:
+          return false;
       }
-      return sectionType.resizableX;
     }
     return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableX()) || false;
   }
@@ -3207,14 +3344,41 @@ class DiagramSection extends DiagramElement {
   getResizableY() {
     var _a;
     const sectionType = this.type;
-    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizableY) !== undefined) {
-      if (sectionType.resizableY === ResizableMode.OnlyWhenSelected) {
-        return this.selected;
+    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizerY) !== undefined) {
+      switch (sectionType.resizerY.mode) {
+        case ResizableMode.OnlyWhenSelected:
+          return this.selected;
+        case ResizableMode.Always:
+          return true;
+        case ResizableMode.Never:
+        default:
+          return false;
       }
-      return sectionType.resizableY;
     }
     return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableY()) || false;
   }
+  /**
+   * Returns whether this section can be resized diagonally.
+   * If the section has a specific resizableXY setting, it uses that.
+   * Otherwise, it inherits from the parent node's resizableXY setting.
+   * @public
+   */
+  getResizableXY() {
+    var _a;
+    const sectionType = this.type;
+    if ((sectionType === null || sectionType === void 0 ? void 0 : sectionType.resizerXY) !== undefined) {
+      switch (sectionType.resizerXY.mode) {
+        case ResizableMode.OnlyWhenSelected:
+          return this.selected;
+        case ResizableMode.Always:
+          return true;
+        case ResizableMode.Never:
+        default:
+          return false;
+      }
+    }
+    return ((_a = this.node) === null || _a === void 0 ? void 0 : _a.getResizableXY()) || false;
+  }
   /**
    * Get the port of this section which is closest to the given coordinates.
    * @param coords A point in the diagram.
@@ -3424,8 +3588,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 Side.Bottom:
@@ -3439,7 +3604,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);
         }
       }
     }
@@ -3447,7 +3612,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;
   }
@@ -3533,8 +3699,27 @@ class DiagramNodeType {
     this.defaultHeight = values.defaultHeight;
     this.minWidth = values.minWidth;
     this.minHeight = values.minHeight;
-    this.resizableX = values.resizableX;
-    this.resizableY = values.resizableY;
+    if (typeof options.resizableX === 'undefined') {
+      this.resizerX = new DiagramResizer({
+        mode: ResizableMode.Never
+      });
+    } else {
+      this.resizerX = new DiagramResizer(options.resizableX);
+    }
+    if (typeof options.resizableY === 'undefined') {
+      this.resizerY = new DiagramResizer({
+        mode: ResizableMode.Never
+      });
+    } else {
+      this.resizerY = new DiagramResizer(options.resizableY);
+    }
+    if (typeof options.resizableXY === 'undefined') {
+      this.resizerXY = new DiagramResizer({
+        mode: ResizableMode.Never
+      });
+    } else {
+      this.resizerXY = new DiagramResizer(options.resizableXY);
+    }
     this.snapToGridOffset = values.snapToGridOffset;
     this.bottomPadding = getBottomPadding(values);
     this.leftPadding = getLeftPadding(values);
@@ -3603,7 +3788,7 @@ class DiagramNode extends DiagramElement {
     }
   }
   /**
-   * Current look of this port.
+   * Current look of this node.
    * @private
    */
   get look() {
@@ -3724,27 +3909,71 @@ class DiagramNode extends DiagramElement {
   getPriority() {
     return this.type.priority;
   }
+  /**
+   * Returns the horizontal resizer of this node.
+   * @public
+   */
+  getResizerX() {
+    return this.type.resizerX;
+  }
+  /**
+   * Returns the vertical resizer of this node.
+   * @public
+   */
+  getResizerY() {
+    return this.type.resizerY;
+  }
+  /**
+   * Returns the diagonal resizer of this node.
+   * @public
+   */
+  getResizerXY() {
+    return this.type.resizerXY;
+  }
   /**
    * Returns whether this node can be resized horizontally.
    * @public
    */
   getResizableX() {
-    const resizableX = this.type.resizableX;
-    if (resizableX === ResizableMode.OnlyWhenSelected) {
-      return this.selected;
+    switch (this.type.resizerX.mode) {
+      case ResizableMode.OnlyWhenSelected:
+        return this.selected;
+      case ResizableMode.Always:
+        return true;
+      case ResizableMode.Never:
+      default:
+        return false;
     }
-    return resizableX;
   }
   /**
    * Returns whether this node can be resized vertically.
    * @public
    */
   getResizableY() {
-    const resizableY = this.type.resizableY;
-    if (resizableY === ResizableMode.OnlyWhenSelected) {
-      return this.selected;
+    switch (this.type.resizerY.mode) {
+      case ResizableMode.OnlyWhenSelected:
+        return this.selected;
+      case ResizableMode.Always:
+        return true;
+      case ResizableMode.Never:
+      default:
+        return false;
+    }
+  }
+  /**
+   * Returns whether this node can be resized diagonally.
+   * @public
+   */
+  getResizableXY() {
+    switch (this.type.resizerXY.mode) {
+      case ResizableMode.OnlyWhenSelected:
+        return this.selected;
+      case ResizableMode.Always:
+        return true;
+      case ResizableMode.Never:
+      default:
+        return false;
     }
-    return resizableY;
   }
   /**
    * Get the port of this node which is closest to the given coordinates.
@@ -4352,8 +4581,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 Side.Bottom:
@@ -4367,20 +4597,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();
@@ -4481,9 +4712,7 @@ const getBottomPadding = config => {
   } else if (typeof config.padding === 'number') {
     return config.padding;
   } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
+    if (config.padding.length === 1) {
       return config.padding[0];
     } else if (config.padding.length === 2) {
       return config.padding[0];
@@ -4493,64 +4722,235 @@ const getBottomPadding = config => {
       return config.padding[2];
     }
   }
-};
-const getLeftPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[1];
-    } else if (config.padding.length === 3) {
-      return config.padding[1];
-    } else {
-      return config.padding[3];
-    }
+};
+const getLeftPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[1];
+    } else if (config.padding.length === 3) {
+      return config.padding[1];
+    } else {
+      return config.padding[3];
+    }
+  }
+};
+const getRightPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[1];
+    } else if (config.padding.length === 3) {
+      return config.padding[1];
+    } else {
+      return config.padding[1];
+    }
+  }
+};
+const getTopPadding = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[0];
+    } else if (config.padding.length === 3) {
+      return config.padding[0];
+    } else {
+      return config.padding[0];
+    }
+  }
+};
+
+/**
+ * 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();
   }
-};
-const getRightPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[1];
-    } else if (config.padding.length === 3) {
-      return config.padding[1];
-    } else {
-      return config.padding[1];
-    }
+  getPriority() {
+    return this.priority;
   }
-};
-const getTopPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
-    } else if (config.padding.length === 1) {
-      return config.padding[0];
-    } else if (config.padding.length === 2) {
-      return config.padding[0];
-    } else if (config.padding.length === 3) {
-      return config.padding[0];
-    } else {
-      return config.padding[0];
+}
+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.
@@ -4917,6 +5317,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);
     }
@@ -4934,17 +5342,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);
@@ -4964,7 +5366,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);
@@ -4980,22 +5383,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 Side.Top:
                 case 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 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 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);
@@ -5010,6 +5414,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;
@@ -5027,22 +5440,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 Side.Top:
               case 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 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 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);
@@ -5057,6 +5471,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);
       }
@@ -6348,7 +6771,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(DiagramEvents.Zoom);
@@ -6408,210 +6832,33 @@ class DiagramSelectionEvent extends DiagramEvent {
     this.selected = selected;
   }
 }
-/**
- * Diagram event which consists of the user highlighting a diagram element.
- * If the target is `null`, that means that the previously highlighted element was unhighlighted.
- */
-class DiagramHighlightedEvent extends DiagramEvent {
-  /**
-   * Create a diagram highlight event.
-   *
-   * @param target Diagram element which is targeted by the event.
-   */
-  constructor(target) {
-    super(DiagramEvents.Highlight);
-    this.target = target;
-  }
-}
-/**
- * Diagram event which consists of the user dragging a diagram node.
- */
-class DiagramDraggingNodeEvent extends DiagramEvent {
-  /**
-   * Create a diagram dragging node event.
-   *
-   * @param target Diagram node which is targeted by the event.
-   */
-  constructor(target) {
-    super(DiagramEvents.DraggingNode);
-    this.target = target;
-  }
-}
-
-/**
- * A foreign object which is inserted with arbitrary html into a diagram.
- * 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 {
+/**
+ * Diagram event which consists of the user highlighting a diagram element.
+ * If the target is `null`, that means that the previously highlighted element was unhighlighted.
+ */
+class DiagramHighlightedEvent extends DiagramEvent {
   /**
-   * Instance a set of objects for the given model. This method is used internally.
-   * @private
+   * Create a diagram highlight event.
+   *
+   * @param target Diagram element which is targeted by the event.
    */
-  constructor(model) {
-    super();
-    this.model = model;
+  constructor(target) {
+    super(DiagramEvents.Highlight);
+    this.target = target;
   }
+}
+/**
+ * Diagram event which consists of the user dragging a diagram node.
+ */
+class DiagramDraggingNodeEvent extends DiagramEvent {
   /**
-   * 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.
+   * Create a diagram dragging node event.
+   *
+   * @param target Diagram node which is targeted by the event.
    */
-  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();
-    }
+  constructor(target) {
+    super(DiagramEvents.DraggingNode);
+    this.target = target;
   }
 }
 
@@ -6716,7 +6963,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) {
@@ -6726,21 +6973,23 @@ 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;
 };
 const needsResizerX = element => {
+  var _a;
   if (element instanceof DiagramNode) {
-    return element.type.resizableX !== false;
+    return element.type.resizerX.mode !== ResizableMode.Never;
   }
   if (element instanceof DiagramSection) {
-    if (element.type !== undefined) {
-      return element.type.resizableX !== false;
+    if (((_a = element.type) === null || _a === void 0 ? void 0 : _a.resizerX) !== undefined) {
+      return element.type.resizerX.mode !== ResizableMode.Never;
     }
     if (element.node !== undefined) {
       return needsResizerX(element.node);
@@ -6749,12 +6998,13 @@ const needsResizerX = element => {
   return false;
 };
 const needsResizerY = element => {
+  var _a;
   if (element instanceof DiagramNode) {
-    return element.type.resizableY !== false;
+    return element.type.resizerY.mode !== ResizableMode.Never;
   }
   if (element instanceof DiagramSection) {
-    if (element.type !== undefined) {
-      return element.type.resizableY !== false;
+    if (((_a = element.type) === null || _a === void 0 ? void 0 : _a.resizerY) !== undefined) {
+      return element.type.resizerY.mode !== ResizableMode.Never;
     }
     if (element.node !== undefined) {
       return needsResizerY(element.node);
@@ -6762,6 +7012,21 @@ const needsResizerY = element => {
   }
   return false;
 };
+const needsResizerXY = element => {
+  var _a;
+  if (element instanceof DiagramNode) {
+    return element.type.resizerXY.mode !== ResizableMode.Never;
+  }
+  if (element instanceof DiagramSection) {
+    if (((_a = element.type) === null || _a === void 0 ? void 0 : _a.resizerXY) !== undefined) {
+      return element.type.resizerXY.mode !== ResizableMode.Never;
+    }
+    if (element.node !== undefined) {
+      return needsResizerXY(element.node);
+    }
+  }
+  return false;
+};
 const initializeLook = selection => {
   selection.filter('.shaped-look').append('path');
   selection.filter('.image-look').append('image').attr('preserveAspectRatio', 'none');
@@ -6782,9 +7047,21 @@ const SHAPED_LOOK_DEFAULTS = {
   borderStyle: LineStyle.Solid
 };
 const updateLook = selection => {
-  selection.filter('.shaped-look').select('path').attr('d', d => generalClosedPath(d.look.shape || 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 : 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);
@@ -6797,30 +7074,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 = (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 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 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, 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;
@@ -7066,6 +7404,7 @@ const DAGA_FILE_VERSION = 1;
  */
 class DagaExporter {
   export(model, includeCollabMeta = false) {
+    var _a;
     const result = Object.assign({
       name: model.name,
       type: model.type,
@@ -7074,6 +7413,7 @@ class DagaExporter {
       updatedAt: model.updatedAt,
       nodes: [],
       connections: [],
+      objects: [],
       data: model.valueSet.getValues()
     }, includeCollabMeta ? {
       collabMeta: {
@@ -7096,6 +7436,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) {
@@ -7123,9 +7478,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,
@@ -7157,12 +7530,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,
@@ -7476,11 +7867,6 @@ class DiagramUserSelection extends DiagramElementSet {
  * @private
  */
 const CONNECTION_PATH_BOX_THICKNESS = 12;
-/**
- * Thickness of the resizer line used to resize nodes and sections on drag, in diagram units.
- * @private
- */
-const RESIZER_THICKNESS = 6;
 /**
  * Maximum number of user actions that can be recorded in the user action stack.
  * @private
@@ -7505,8 +7891,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.zoomIdentity;
     // used to distinguish drags from clicks when dragging elements and during multiple selection
     this.draggingFrom = [0, 0];
@@ -7523,23 +7910,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 || {};
@@ -7566,7 +7955,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) {
@@ -7598,13 +7987,13 @@ class DiagramCanvas {
     // remove all children
     appendToSelection.html('');
     this.diagramRoot = appendToSelection.append('div').node();
-    d3.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.select(this.diagramRoot).on(Events.Click, () => {
+    this.selectRoot().on(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.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(Events.ContextMenu, event => {
       if (this.dragging) {
         event.preventDefault();
@@ -7768,44 +8157,57 @@ class DiagramCanvas {
       this.zoomTransform = event.transform;
       const transformAttribute = event.transform.toString();
       this.selectCanvasElements().attr('transform', transformAttribute);
-      d3.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(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(Events.MouseMove, event => {
-      if (this.unfinishedConnection !== undefined) {
-        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        this.unfinishedConnection.endCoords = pointerCoords;
-      }
-    }).on(Events.MouseOver, () => {
-      if (this.userHighlight.size() > 0) {
-        this.userHighlight.clear();
-        this.diagramEvent$.next(new DiagramHighlightedEvent(null));
-      }
-    }).on(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.drag().filter(event => {
-      return this.multipleSelectionOn || isSecondaryButton(event);
-    }).on(DragEvents.Start, event => {
-      this.startMultipleSelection(event);
-    }).on(DragEvents.Drag, event => {
-      this.continueMultipleSelection(event);
-    }).on(DragEvents.End, event => {
-      this.finishMultipleSelection(event);
-    }));
-    initializeGrid(this, canvasView, this.backgroundPatternId);
+    const canvasDefs = canvasView.append('defs');
+    const canvasBackground = [];
+    canvasBackground.push(initializeBackground(canvasView, this.backgroundConfig).attr('class', 'daga-background'));
+    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(Events.MouseMove, event => {
+        if (this.unfinishedConnection !== undefined) {
+          const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+          this.unfinishedConnection.endCoords = pointerCoords;
+        }
+      });
+      canvasBackgroundElement.on(Events.MouseOver, () => {
+        if (this.userHighlight.size() > 0) {
+          this.userHighlight.clear();
+          this.diagramEvent$.next(new DiagramHighlightedEvent(null));
+        }
+      });
+      canvasBackgroundElement.on(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.drag().filter(event => {
+        return this.multipleSelectionOn || isSecondaryButton(event);
+      }).on(DragEvents.Start, event => {
+        this.startMultipleSelection(event);
+      }).on(DragEvents.Drag, event => {
+        this.continueMultipleSelection(event);
+      }).on(DragEvents.End, event => {
+        this.finishMultipleSelection(event);
+      }));
+    }
     canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   getZoomLevel() {
@@ -7823,7 +8225,7 @@ class DiagramCanvas {
   }
   getViewCoordinates() {
     var _a, _b, _c;
-    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('rect')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
+    const canvasViewBoundingBox = (_c = (_b = (_a = this.selectCanvasView()) === null || _a === void 0 ? void 0 : _a.select('.daga-background')) === null || _b === void 0 ? void 0 : _b.node()) === null || _c === void 0 ? void 0 : _c.getBBox();
     /*
     transform the coordinates of the zoomTransform to the coordinates
     needed to point the zoomTransfrom to the center of the screen to
@@ -7875,7 +8277,11 @@ class DiagramCanvas {
     var _a;
     // if there are no nodes, we have nothing to do here
     if (this.model.nodes.length > 0) {
-      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('rect').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
+      const canvasViewBoundingBox = (_a = this.selectCanvasView().select('.daga-background').node()) === null || _a === void 0 ? void 0 : _a.getBBox();
+      if (!canvasViewBoundingBox.width || !canvasViewBoundingBox.height) {
+        // prevent errors if the width or height is invalid
+        return;
+      }
       const nonRemovedNodes = (nodeIds === null || nodeIds === void 0 ? void 0 : nodeIds.map(i => this.model.nodes.get(i)).filter(n => !!n)) || this.model.nodes.all();
       const minimumX = Math.min(...nonRemovedNodes.map(n => n.coords[0]));
       const maximumX = Math.max(...nonRemovedNodes.map(n => n.coords[0] + n.width));
@@ -7900,10 +8306,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;
@@ -7952,7 +8365,7 @@ class DiagramCanvas {
   updateNodesInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
-    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${d.type.defaultLook.lookType}`);
+    const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => `diagram-node${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''}${needsResizerXY(d) ? ' resizable-xy' : ''} ${d.type.defaultLook.lookType}`);
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
     }
@@ -7988,62 +8401,208 @@ class DiagramCanvas {
         this.diagramEvent$.next(new DiagramSelectionEvent([d], true));
         this.contextMenu.open(event);
       }
-    }).on(Events.DoubleClick, (event, d) => {
-      const diagramEvent = new DiagramDoubleClickEvent(event, d);
-      this.diagramEvent$.next(diagramEvent);
-    }).call(d3.drag().filter(event => {
-      this.secondaryButton = isSecondaryButton(event);
-      return true;
-    }).on(DragEvents.Start, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.startMultipleSelection(event);
+    }).on(Events.DoubleClick, (event, d) => {
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
+      this.diagramEvent$.next(diagramEvent);
+    }).call(d3.drag().filter(event => {
+      this.secondaryButton = isSecondaryButton(event);
+      return true;
+    }).on(DragEvents.Start, (event, d) => {
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.startMultipleSelection(event);
+      } else {
+        this.startMovingNode(event, d);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.continueMultipleSelection(event);
+      } else {
+        this.continueMovingNode(event, d);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.multipleSelectionOn || this.secondaryButton) {
+        this.finishMultipleSelection(event);
+      } else {
+        this.finishMovingNode(event, d);
+      }
+      this.secondaryButton = false;
+    }));
+    initializeLook(enterSelection);
+    enterSelection.filter('.resizable-x').append('rect').attr('class', 'left-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        setCursorStyle(CursorStyle.EWResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        setCursorStyle(CursorStyle.EWResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        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];
+        }
+        d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
+        this.currentAction.to = d.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-x').append('rect').attr('class', 'right-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        setCursorStyle(CursorStyle.EWResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        setCursorStyle(CursorStyle.EWResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        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(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
+        this.currentAction.to = d.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-y').append('rect').attr('class', 'top-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        setCursorStyle(CursorStyle.NSResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        setCursorStyle(CursorStyle.NSResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        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];
+        }
+        d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
+        this.currentAction.to = d.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-y').append('rect').attr('class', 'bottom-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        setCursorStyle(CursorStyle.NSResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        setCursorStyle(CursorStyle.NSResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
-        this.startMovingNode(event, d);
+        setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.continueMultipleSelection(event);
-      } else {
-        this.continueMovingNode(event, d);
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.multipleSelectionOn || this.secondaryButton) {
-        this.finishMultipleSelection(event);
-      } else {
-        this.finishMovingNode(event, d);
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        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(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
+        this.currentAction.to = d.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
       }
-      this.secondaryButton = false;
+      setCursorStyle();
     }));
-    initializeLook(enterSelection);
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
-        setCursorStyle(CursorStyle.EWResize);
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'top-left-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NWSEResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
-        setCursorStyle(CursorStyle.EWResize);
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NWSEResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
+        d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === 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];
         }
         d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
+        d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
         this.currentAction.to = d.getGeometry();
         this.currentAction.do();
         this.actionStack.add(this.currentAction);
@@ -8051,34 +8610,36 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
-        setCursorStyle(CursorStyle.NSResize);
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'top-right-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NESWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
-        setCursorStyle(CursorStyle.NSResize);
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NESWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === 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];
         }
+        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         d.stretch(Side.Top, d.coords[1] - pointerCoords[1]);
         this.currentAction.to = d.getGeometry();
         this.currentAction.do();
@@ -8087,35 +8648,37 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
-        setCursorStyle(CursorStyle.EWResize);
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'bottom-left-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NESWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
-        setCursorStyle(CursorStyle.EWResize);
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NESWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
+        d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
+        d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        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[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
+          pointerCoords[0] += d.type.snapToGridOffset[0];
+          pointerCoords[1] += d.type.snapToGridOffset[1];
         }
-        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
+        d.stretch(Side.Left, d.coords[0] - pointerCoords[0]);
+        d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
         this.currentAction.to = d.getGeometry();
         this.currentAction.do();
         this.actionStack.add(this.currentAction);
@@ -8123,36 +8686,36 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
-        setCursorStyle(CursorStyle.NSResize);
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'bottom-right-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NWSEResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
-        setCursorStyle(CursorStyle.NSResize);
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NWSEResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchNode, d.id, d.getGeometry(), d.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchNode) {
+      if (this.canUserPerformAction(DiagramActions.StretchNode) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === 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[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
+          pointerCoords[0] += d.type.snapToGridOffset[0];
+          pointerCoords[1] += d.type.snapToGridOffset[1];
         }
+        d.stretch(Side.Right, pointerCoords[0] - (d.coords[0] + d.width));
         d.stretch(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height));
         this.currentAction.to = d.getGeometry();
         this.currentAction.do();
@@ -8163,17 +8726,21 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('rect.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x', d => -d.getResizerX().outerMargin).attr('y', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('width', d => d.getResizerX().thickness).attr('height', d => d.height - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('fill', d => d.getResizerX().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerX().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerX().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-x').select('rect.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerX().thickness + d.getResizerX().outerMargin).attr('y', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('width', d => d.getResizerX().thickness).attr('height', d => d.height - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('fill', d => d.getResizerX().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerX().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerX().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-y').select('rect.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('y', d => -d.getResizerY().outerMargin).attr('width', d => d.width - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('height', d => d.getResizerY().thickness).attr('fill', d => d.getResizerY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-y').select('rect.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerY().thickness + d.getResizerY().outerMargin).attr('width', d => d.width - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('height', d => d.getResizerY().thickness).attr('fill', d => d.getResizerY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.top-left-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => -d.getResizerXY().outerMargin).attr('y', d => -d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.top-right-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('y', d => -d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.bottom-left-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => -d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.bottom-right-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
   }
   updateSectionsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', d => {
       var _a;
-      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
+      return `diagram-section${needsResizerX(d) ? ' resizable-x' : ''}${needsResizerY(d) ? ' resizable-y' : ''}${needsResizerXY(d) ? ' resizable-xy' : ''} ${(_a = d.look) === null || _a === void 0 ? void 0 : _a.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -8254,7 +8821,7 @@ class DiagramCanvas {
       this.secondaryButton = false;
     }));
     initializeLook(enterSelection);
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('rect').attr('class', 'left-resizer').on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
@@ -8277,7 +8844,7 @@ class DiagramCanvas {
     }).on(DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
@@ -8288,7 +8855,41 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
+    enterSelection.filter('.resizable-x').append('rect').attr('class', 'right-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
+        setCursorStyle(CursorStyle.EWResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
+        setCursorStyle(CursorStyle.EWResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        if (this.gridConfig.snap) {
+          pointerCoords = this.getClosestGridPoint(pointerCoords);
+        }
+        d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
+        this.currentAction.to = d.node.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-y').append('rect').attr('class', 'top-resizer').on(Events.MouseOver, (_event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
@@ -8311,7 +8912,7 @@ class DiagramCanvas {
     }).on(DragEvents.End, (event, d) => {
       if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
@@ -8322,33 +8923,105 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
-        setCursorStyle(CursorStyle.EWResize);
+    enterSelection.filter('.resizable-y').append('rect').attr('class', 'bottom-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
+        setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
-        setCursorStyle(CursorStyle.EWResize);
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
+        setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        if (this.gridConfig.snap) {
+          pointerCoords = this.getClosestGridPoint(pointerCoords);
+        }
+        d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
+        this.currentAction.to = d.node.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'top-left-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NWSEResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
+        setCursorStyle(CursorStyle.NWSEResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
+        d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        if (this.gridConfig.snap) {
+          pointerCoords = this.getClosestGridPoint(pointerCoords);
+        }
+        d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
+        d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
+        this.currentAction.to = d.node.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'top-right-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NESWResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
+        setCursorStyle(CursorStyle.NESWResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
+        d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableX() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
         d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
+        d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
         this.currentAction.to = d.node.getGeometry();
         this.currentAction.do();
         this.actionStack.add(this.currentAction);
@@ -8356,32 +9029,70 @@ class DiagramCanvas {
       }
       setCursorStyle();
     }));
-    enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', RESIZER_THICKNESS).on(Events.MouseOver, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
-        setCursorStyle(CursorStyle.NSResize);
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'bottom-left-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NESWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
-        setCursorStyle(CursorStyle.NSResize);
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
+        setCursorStyle(CursorStyle.NESWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
         setCursorStyle(CursorStyle.NotAllowed);
       }
     }).on(DragEvents.Drag, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
+        let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        if (this.gridConfig.snap) {
+          pointerCoords = this.getClosestGridPoint(pointerCoords);
+        }
+        d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
+        d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
+        this.currentAction.to = d.node.getGeometry();
+        this.currentAction.do();
+        this.actionStack.add(this.currentAction);
+        this.currentAction = undefined;
+      }
+      setCursorStyle();
+    }));
+    enterSelection.filter('.resizable-xy').append('rect').attr('class', 'bottom-right-resizer').on(Events.MouseOver, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle(CursorStyle.NWSEResize);
+      }
+    }).on(Events.MouseOut, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed) {
+        setCursorStyle();
+      }
+    }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
+        setCursorStyle(CursorStyle.NWSEResize);
+        this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
+      } else {
+        setCursorStyle(CursorStyle.NotAllowed);
+      }
+    }).on(DragEvents.Drag, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && d.node) {
+        const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
+        d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
+        d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
+      }
+    }).on(DragEvents.End, (event, d) => {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && d.getResizableXY() && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection && d.node) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-        if (this.snapToGrid) {
+        if (this.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
         }
+        d.node.stretchSections(Side.Right, pointerCoords[0] - (d.coords[0] + d.width), d.indexXInNode, d.indexYInNode);
         d.node.stretchSections(Side.Bottom, pointerCoords[1] - (d.coords[1] + d.height), d.indexXInNode, d.indexYInNode);
         this.currentAction.to = d.node.getGeometry();
         this.currentAction.do();
@@ -8392,10 +9103,14 @@ class DiagramCanvas {
     }));
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     updateLook(mergeSelection);
-    mergeSelection.filter('.resizable-x').select('line.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', RESIZER_THICKNESS / 2).attr('x2', RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
-    mergeSelection.filter('.resizable-x').select('line.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x1', d => d.width - RESIZER_THICKNESS / 2).attr('x2', d => d.width - RESIZER_THICKNESS / 2).attr('y1', 0).attr('y2', d => d.height);
-    mergeSelection.filter('.resizable-y').select('line.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
+    mergeSelection.filter('.resizable-x').select('rect.left-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x', d => -d.getResizerX().outerMargin).attr('y', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('width', d => d.getResizerX().thickness).attr('height', d => d.height - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('fill', d => d.getResizerX().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerX().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerX().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-x').select('rect.right-resizer').style('pointer-events', d => d.getResizableX() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerX().thickness + d.getResizerX().outerMargin).attr('y', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('width', d => d.getResizerX().thickness).attr('height', d => d.height - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('fill', d => d.getResizerX().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerX().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerX().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-y').select('rect.top-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('y', d => -d.getResizerY().outerMargin).attr('width', d => d.width - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('height', d => d.getResizerY().thickness).attr('fill', d => d.getResizerY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-y').select('rect.bottom-resizer').style('pointer-events', d => d.getResizableY() ? 'initial' : 'none').attr('x', d => d.getResizerXY().thickness - d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerY().thickness + d.getResizerY().outerMargin).attr('width', d => d.width - d.getResizerXY().thickness * 2 + d.getResizerXY().outerMargin * 2).attr('height', d => d.getResizerY().thickness).attr('fill', d => d.getResizerY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.top-left-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => -d.getResizerXY().outerMargin).attr('y', d => -d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.top-right-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('y', d => -d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.bottom-left-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => -d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
+    mergeSelection.filter('.resizable-xy').select('rect.bottom-right-resizer').style('pointer-events', d => d.getResizableXY() ? 'initial' : 'none').attr('x', d => d.width - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('y', d => d.height - d.getResizerXY().thickness + d.getResizerXY().outerMargin).attr('width', d => d.getResizerXY().thickness).attr('height', d => d.getResizerXY().thickness).attr('fill', d => d.getResizerXY().getLook(d).fillColor || 'transparent').attr('stroke', d => d.getResizerXY().getLook(d).borderColor || 'transparent').attr('stroke-width', d => d.getResizerXY().getLook(d).borderThickness || 0);
   }
   updatePortsInView(...ids) {
     let updateSelection = this.selectCanvasElements().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
@@ -8750,9 +9465,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 === HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === HorizontalAlign.Center ? 'middle' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === VerticalAlign.Center ? d.height / 2 : d.verticalAlign === VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === VerticalAlign.Center ? 'middle' : d.verticalAlign === VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.fontSize).attr('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").attr('font-weight', d => d.highlighted ? 600 : 400).attr('fill', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').each(d => {
+    mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]}) rotate(${d.orientation} ${d.width / 2} ${d.height / 2})`).attr('opacity', d => d.removed ? 0.5 : 1).select('text').attr('x', d => d.horizontalAlign === HorizontalAlign.Center ? d.width / 2 : d.horizontalAlign === HorizontalAlign.Right ? d.width : 0).attr('text-anchor', d => d.horizontalAlign === HorizontalAlign.Center ? 'middle' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').attr('y', d => d.verticalAlign === VerticalAlign.Center ? d.height / 2 : d.verticalAlign === VerticalAlign.Bottom ? d.height : 0).attr('dominant-baseline', d => d.verticalAlign === VerticalAlign.Center ? 'middle' : d.verticalAlign === VerticalAlign.Bottom ? 'auto' : 'hanging').attr('font-size', d => d.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
@@ -8767,7 +9482,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(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
@@ -8810,7 +9525,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(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
@@ -8911,6 +9626,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;
@@ -8919,7 +9635,7 @@ class DiagramCanvas {
       let middleLabelShiftY = 0;
       let endLabelShiftX = 0;
       let endLabelShiftY = 0;
-      if (labelConfiguration.backgroundColor === 'transparent') {
+      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];
@@ -8974,7 +9690,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
@@ -8997,22 +9713,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
@@ -9035,7 +9751,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})`);
       }
     }
@@ -9079,9 +9795,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) {
@@ -9119,9 +9839,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)) {
@@ -9171,13 +9895,13 @@ class DiagramCanvas {
     return d3.select(this.diagramRoot);
   }
   selectSVGElement() {
-    return d3.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) {
@@ -9289,7 +10013,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
@@ -9326,7 +10050,7 @@ class DiagramCanvas {
       }
     }).on(Events.KeyUp, event => {
       event.stopPropagation();
-    }).on(Events.Input, _event => {
+    }).on(Events.Input, () => {
       const value = inputField.property('value');
       inputField.attr('cols', numberOfColumns(value) + 1);
       inputField.attr('rows', numberOfRows(value) + 1);
@@ -9415,7 +10139,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 === HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * field.fontSize + field.height / 2 : field.verticalAlign === VerticalAlign.Bottom ? field.height - (lines.length - i - 1) * field.fontSize : i * field.fontSize).text(lines[i]);
+      textSelection.append('tspan').attr('x', field.horizontalAlign === HorizontalAlign.Center ? field.width / 2 : field.horizontalAlign === HorizontalAlign.Right ? field.width : 0).attr('y', field.verticalAlign === VerticalAlign.Center ? (i + 0.5 - lines.length / 2) * (field.look.fontSize || DIAGRAM_FIELD_DEFAULTS.look.fontSize) + field.height / 2 : field.verticalAlign === 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]);
     }
   }
   /**
@@ -9455,12 +10179,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(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];
@@ -9487,8 +10211,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);
             }
@@ -9499,7 +10223,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);
           }
@@ -9910,7 +10634,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;
@@ -9924,12 +10648,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)]);
         }
       }
     }
@@ -9956,7 +10681,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;
@@ -9992,12 +10717,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)]);
         }
       }
     }
@@ -10014,12 +10740,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];
@@ -10058,10 +10785,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();
@@ -10079,14 +10806,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;
@@ -10155,7 +10884,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];
@@ -10179,18 +10908,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;
   }
@@ -10205,7 +10934,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;
@@ -10217,7 +10946,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);
@@ -10294,10 +11024,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();
@@ -10315,7 +11045,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;
@@ -10327,7 +11057,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) {
@@ -10349,10 +11080,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();
@@ -10416,18 +11147,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;
   }