@metadev/daga 5.1.0 → 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
@@ -2023,94 +1748,371 @@ class ValueSet {
     }
   }
   /**
-   * Variant of `overwriteValues` that applies last-writer-wins to each key, updating timestamps if appropriate.
-   * @private
-   * @param values An object containing all values to set the values to.
+   * Variant of `overwriteValues` that applies last-writer-wins to each key, updating timestamps if appropriate.
+   * @private
+   * @param values An object containing all values to set the values to.
+   */
+  overwriteValuesLww(values, timestamp) {
+    for (const key in values) {
+      const property = this.propertySet.getProperty(key);
+      if (property.type === Type.Object) {
+        this.valueSets[key].overwriteValuesLww(values[key], timestamp);
+      } else {
+        if (timestampWins(timestamp, this.ownTimestamps[key])) {
+          this.setValue(key, values[key]);
+          this.ownTimestamps[key] = timestamp;
+        }
+      }
+    }
+  }
+  /**
+   * 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
    */
-  overwriteValuesLww(values, timestamp) {
-    for (const key in values) {
-      const property = this.propertySet.getProperty(key);
-      if (property.type === Type.Object) {
-        this.valueSets[key].overwriteValuesLww(values[key], timestamp);
-      } else {
-        if (timestampWins(timestamp, this.ownTimestamps[key])) {
-          this.setValue(key, values[key]);
-          this.ownTimestamps[key] = timestamp;
-        }
-      }
-    }
+  size() {
+    return this.entities.length;
   }
   /**
-   * 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
+   * Iterator to iterate over the entities of 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);
-      }
+  *[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,9 +2667,26 @@ 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) {
-  ResizableMode[ResizableMode["OnlyWhenSelected"] = 0] = "OnlyWhenSelected";
+  /**
+   * 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 = {}));
 
 /**
@@ -2687,7 +2705,6 @@ const DIAGRAM_FIELD_DEFAULTS = {
   fit: false,
   shrink: true,
   look: {
-    lookType: 'field-look',
     fillColor: 'transparent',
     fontColor: '#000000',
     fontFamily: "'Wonder Unit Sans', sans-serif",
@@ -2860,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];
@@ -2879,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];
@@ -2898,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];
@@ -2917,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];
@@ -2936,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];
@@ -2955,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];
@@ -2974,38 +2979,105 @@ 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];
     } else if (config.padding.length === 3) {
       return config.padding[1];
     } else {
-      return config.padding[1];
+      return config.padding[1];
+    }
+  }
+};
+const getTopPadding$1 = config => {
+  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+    return DIAGRAM_FIELD_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } 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];
+    }
+  }
+};
+
+/**
+ * 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;
   }
-};
-const getTopPadding$1 = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
-    return DIAGRAM_FIELD_DEFAULTS.padding;
-  } else if (typeof config.padding === 'number') {
-    return config.padding;
-  } else {
-    if (config.padding.length === 0) {
-      return DIAGRAM_FIELD_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];
+  /**
+   * 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 {
-      return config.padding[0];
+      if (rootElement.highlighted) {
+        return this.highlightedLook;
+      } else {
+        return this.defaultLook;
+      }
     }
   }
-};
+}
+const DIAGRAM_DEFAULT_RESIZER = new DiagramResizer(DIAGRAM_RESIZER_DEFAULTS);
 
 /**
  * Default value of the default width of a diagram section.
@@ -3059,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;
@@ -3204,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.
@@ -3213,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;
   }
@@ -3230,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.
@@ -3558,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);
@@ -3628,7 +3788,7 @@ class DiagramNode extends DiagramElement {
     }
   }
   /**
-   * Current look of this port.
+   * Current look of this node.
    * @private
    */
   get look() {
@@ -3749,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.
@@ -4508,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];
@@ -4527,9 +4729,7 @@ const getLeftPadding = 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[1];
@@ -4546,9 +4746,7 @@ const getRightPadding = 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[1];
@@ -4565,9 +4763,7 @@ const getTopPadding = 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];
@@ -6787,12 +6983,13 @@ const getRelatedNodeOrItself = 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);
@@ -6801,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);
@@ -6814,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');
@@ -6878,7 +7091,7 @@ const DOTS_GRID_DEFAULTS = Object.assign(Object.assign({}, GRID_DEFAULTS), {
   thickness: 0.05,
   color: 'rgba(0, 0, 0, 0.1)'
 });
-const initializeBackground = (canvas, canvasView, backgroundConfig) => {
+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':
@@ -7654,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
@@ -7959,7 +8167,7 @@ class DiagramCanvas {
     }));
     const canvasDefs = canvasView.append('defs');
     const canvasBackground = [];
-    canvasBackground.push(initializeBackground(this, canvasView, this.backgroundConfig));
+    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]));
     }
@@ -8017,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
@@ -8069,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));
@@ -8153,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));
     }
@@ -8179,65 +8391,210 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
-      this.diagramEvent$.next(diagramEvent);
-      if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
-        event.preventDefault();
-        this.userHighlight.focusOn(d);
-        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
-        this.userSelection.add(d);
-        this.diagramEvent$.next(new DiagramSelectionEvent([d], true));
-        this.contextMenu.open(event);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
+      this.diagramEvent$.next(diagramEvent);
+      if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
+        event.preventDefault();
+        this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
+        this.userSelection.add(d);
+        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);
+      } 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.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.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.gridConfig.snap) {
           pointerCoords = this.getClosestGridPoint([pointerCoords[0] - d.type.snapToGridOffset[0], pointerCoords[1] - d.type.snapToGridOffset[1]]);
@@ -8245,6 +8602,7 @@ class DiagramCanvas {
           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);
@@ -8252,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.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();
@@ -8288,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.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];
+          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);
@@ -8324,34 +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.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];
+          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();
@@ -8362,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));
@@ -8453,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);
       }
@@ -8487,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);
       }
@@ -8521,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.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);
@@ -8555,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.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();
@@ -8591,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);