@metadev/daga 3.0.0 → 3.1.1

package/index.esm.js

@@ -303,6 +303,9 @@ const MINIMUM_DISTANCE_BEFORE_TURN = 20;
  * @private
  */
 const linePath = (shape, points, startDirection, endDirection, minimumDistanceBeforeTurn) => {
+  if (typeof shape === 'function') {
+    return shape(points, startDirection, endDirection, minimumDistanceBeforeTurn);
+  }
   if (points.length === 0) {
     return '';
   } else if (points.length === 1) {
@@ -665,6 +668,9 @@ var ClosedShape;
  * @private
  */
 const generalClosedPath = (shape, x, y, width, height) => {
+  if (typeof shape === 'function') {
+    return shape(x, y, width, height);
+  }
   switch (shape) {
     case ClosedShape.Ellipse:
       return ellipsePath(x, y, width, height);
@@ -798,7 +804,7 @@ const numberOfColumns = s => {
 };
 const numberOfRows = s => {
   var _a;
-  return ((_a = s.match(/\n/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
+  return ((_a = s.match(/\n/g)) === null || _a === undefined ? undefined : _a.length) || 0;
 };
 
 /**
@@ -958,14 +964,14 @@ class DiagramElement {
    */
   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;
+    return ((_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userHighlight) === null || _b === undefined ? undefined : _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;
+    return ((_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.userSelection) === null || _b === undefined ? undefined : _b.contains(this.id)) || false;
   }
   constructor(model, id) {
     /**
@@ -994,7 +1000,7 @@ class DiagramElement {
    */
   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(`g#${this.id}`);
+    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`g#${this.id}`);
   }
 }
 class DiagramElementSet extends DiagramEntitySet {
@@ -1217,6 +1223,7 @@ class ValueSet {
   constructor(propertySet, rootElement) {
     this.displayedProperties = [];
     this.hiddenProperties = [];
+    // TODO JC: make this private after reviewing how it's used from React
     this.values = {};
     this.valueSets = {};
     /**
@@ -1295,7 +1302,7 @@ class ValueSet {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getValue(key) {
     var _a;
-    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === void 0 ? void 0 : _a.rootAttribute;
+    const rootAttribute = (_a = this.propertySet.getProperty(key)) === null || _a === undefined ? undefined : _a.rootAttribute;
     if (rootAttribute !== undefined && rootAttribute !== null) {
       this.values[key] = this.getRootElementValue(rootAttribute);
     }
@@ -1380,7 +1387,7 @@ class ValueSet {
     if (property && property.type === Type.Object) {
       return this.getSubValueSet(key).hasAnySetValue();
     }
-    return !empty(value) && !equals(value, property === null || property === void 0 ? void 0 : property.defaultValue);
+    return !empty(value) && !equals(value, property === null || property === undefined ? undefined : property.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -1739,7 +1746,11 @@ class DiagramConnection extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateConnectionsInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateConnectionsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
   }
   /**
    * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
@@ -1755,12 +1766,12 @@ class DiagramConnection extends DiagramElement {
       this.start = start;
       if (start !== undefined) {
         start.outgoingConnections.push(this);
-        this.startDirection = start === null || start === void 0 ? void 0 : start.direction;
-        this.startCoords = (start === null || start === void 0 ? void 0 : start.coords) || [0, 0];
+        this.startDirection = start === null || start === undefined ? undefined : start.direction;
+        this.startCoords = (start === null || start === undefined ? undefined : start.coords) || [0, 0];
       }
     } else {
-      this.startDirection = start === null || start === void 0 ? void 0 : start.direction;
-      this.startCoords = (start === null || start === void 0 ? void 0 : start.coords) || [0, 0];
+      this.startDirection = start === null || start === undefined ? undefined : start.direction;
+      this.startCoords = (start === null || start === undefined ? undefined : start.coords) || [0, 0];
     }
     this.updateInView();
   }
@@ -1778,12 +1789,12 @@ class DiagramConnection extends DiagramElement {
       this.end = end;
       if (end !== undefined) {
         end.incomingConnections.push(this);
-        this.endDirection = end === null || end === void 0 ? void 0 : end.direction;
-        this.endCoords = (end === null || end === void 0 ? void 0 : end.coords) || [0, 0];
+        this.endDirection = end === null || end === undefined ? undefined : end.direction;
+        this.endCoords = (end === null || end === undefined ? undefined : end.coords) || [0, 0];
       }
     } else {
-      this.endDirection = end === null || end === void 0 ? void 0 : end.direction;
-      this.endCoords = (end === null || end === void 0 ? void 0 : end.coords) || [0, 0];
+      this.endDirection = end === null || end === undefined ? undefined : end.direction;
+      this.endCoords = (end === null || end === undefined ? undefined : end.coords) || [0, 0];
     }
     this.updateInView();
   }
@@ -1794,7 +1805,7 @@ class DiagramConnection extends DiagramElement {
    */
   tighten() {
     var _a, _b;
-    if (((_a = this.start) === null || _a === void 0 ? void 0 : _a.rootElement) && this.end) {
+    if (((_a = this.start) === null || _a === undefined ? undefined : _a.rootElement) && this.end) {
       const alternativeStartPortsSortedByDistanceAscending = this.start.rootElement.ports.map(p => [p, p.distanceTo(this.end.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeStartPorts: for (const alternativeStartPort of alternativeStartPortsSortedByDistanceAscending) {
         if (alternativeStartPort === this.end) {
@@ -1824,7 +1835,7 @@ class DiagramConnection extends DiagramElement {
         }
       }
     }
-    if (((_b = this.end) === null || _b === void 0 ? void 0 : _b.rootElement) && this.start) {
+    if (((_b = this.end) === null || _b === undefined ? undefined : _b.rootElement) && this.start) {
       const alternativeEndPortsSortedByDistanceAscending = this.end.rootElement.ports.map(p => [p, p.distanceTo(this.start.coords)]).sort((a, b) => a[1] - b[1]).map(a => a[0]);
       checkAlternativeEndPorts: for (const alternativeEndPort of alternativeEndPortsSortedByDistanceAscending) {
         if (alternativeEndPort === this.start) {
@@ -1916,8 +1927,8 @@ class DiagramConnectionSet extends DiagramElementSet {
     const connection = this.get(id, true);
     if (connection) {
       // remove from ports
-      removeIfExists(((_a = connection.start) === null || _a === void 0 ? void 0 : _a.outgoingConnections) || [], connection);
-      removeIfExists(((_b = connection.end) === null || _b === void 0 ? void 0 : _b.incomingConnections) || [], connection);
+      removeIfExists(((_a = connection.start) === null || _a === undefined ? undefined : _a.outgoingConnections) || [], connection);
+      removeIfExists(((_b = connection.end) === null || _b === undefined ? undefined : _b.incomingConnections) || [], connection);
       // remove from set of connections
       super.remove(id);
       // remove from canvas
@@ -1966,11 +1977,11 @@ class DiagramField extends DiagramElement {
     this._text = value;
     this.updateInView();
     if (this.fit) {
-      (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.fitFieldRootInView(this.id);
+      (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.fitFieldRootInView(this.id);
     }
   }
   constructor(model, rootElement, coords, width, height, fontSize, fontFamily, color, selectedColor, horizontalAlign, verticalAlign, text, editable, fit) {
-    const id = `${rootElement === null || rootElement === void 0 ? void 0 : rootElement.id}_field`;
+    const id = `${rootElement === null || rootElement === undefined ? undefined : rootElement.id}_field`;
     if (model.fields.get(id) !== undefined) {
       throw new Error('DiagramField for rootElement already exists');
     }
@@ -1997,14 +2008,18 @@ class DiagramField extends DiagramElement {
   }
   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(`foreignObject#${this.id}`);
+    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`foreignObject#${this.id}`);
   }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateFieldsInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateFieldsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
   }
   /**
    * Change the coordinates of this field to the given coordinates.
@@ -2017,7 +2032,7 @@ class DiagramField extends DiagramElement {
   }
   getPriority() {
     var _a;
-    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
+    return ((_a = this.rootElement) === null || _a === undefined ? undefined : _a.getPriority()) || DEFAULT_PRIORITY;
   }
 }
 class DiagramFieldSet extends DiagramElementSet {
@@ -2048,7 +2063,7 @@ class DiagramFieldSet extends DiagramElementSet {
     const field = this.get(id, true);
     if (field) {
       // remove from root element
-      if (((_a = field.rootElement) === null || _a === void 0 ? void 0 : _a.label) !== undefined) {
+      if (((_a = field.rootElement) === null || _a === undefined ? undefined : _a.label) !== undefined) {
         if (field.rootElement.label === field) {
           field.rootElement.label = undefined;
         }
@@ -2061,7 +2076,7 @@ class DiagramFieldSet extends DiagramElementSet {
   }
 }
 const getBottomMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2080,7 +2095,7 @@ const getBottomMargin = config => {
   }
 };
 const getLeftMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2099,7 +2114,7 @@ const getLeftMargin = config => {
   }
 };
 const getRightMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2118,7 +2133,7 @@ const getRightMargin = config => {
   }
 };
 const getTopMargin = config => {
-  if ((config === null || config === void 0 ? void 0 : config.margin) === null || (config === null || config === void 0 ? void 0 : config.margin) === undefined) {
+  if ((config === null || config === undefined ? undefined : config.margin) === null || (config === null || config === undefined ? undefined : config.margin) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.margin;
   } else if (typeof config.margin === 'number') {
     return config.margin;
@@ -2136,8 +2151,8 @@ const getTopMargin = config => {
     }
   }
 };
-const getBottomPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+const getBottomPadding$1 = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2155,8 +2170,8 @@ const getBottomPadding = config => {
     }
   }
 };
-const getLeftPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+const getLeftPadding$1 = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2174,8 +2189,8 @@ const getLeftPadding = config => {
     }
   }
 };
-const getRightPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+const getRightPadding$1 = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2193,8 +2208,8 @@ const getRightPadding = config => {
     }
   }
 };
-const getTopPadding = config => {
-  if ((config === null || config === void 0 ? void 0 : config.padding) === null || (config === null || config === void 0 ? void 0 : config.padding) === undefined) {
+const getTopPadding$1 = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
     return DIAGRAM_FIELD_DEFAULTS.padding;
   } else if (typeof config.padding === 'number') {
     return config.padding;
@@ -2275,7 +2290,7 @@ class DiagramSection extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
+    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -2309,23 +2324,36 @@ class DiagramSection extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateSectionsInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateSectionsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    if (this.label) {
+      this.label.raise();
+    }
+    for (const port of this.ports) {
+      port.raise();
+    }
+    for (const decorator of this.decorators) {
+      decorator.raise();
+    }
   }
   getConfig() {
     var _a, _b, _c, _d, _e;
-    return (_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];
+    return (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode];
   }
   getMinWidth() {
     var _a, _b, _c, _d;
-    return ((_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.minWidths) === null || _d === void 0 ? void 0 : _d[this.indexXInNode]) || DIAGRAM_SECTION_MIN_WIDTH;
+    return ((_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.minWidths) === null || _d === undefined ? undefined : _d[this.indexXInNode]) || DIAGRAM_SECTION_MIN_WIDTH;
   }
   getMinHeight() {
     var _a, _b, _c, _d;
-    return ((_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.minHeights) === null || _d === void 0 ? void 0 : _d[this.indexYInNode]) || DIAGRAM_SECTION_MIN_HEIGHT;
+    return ((_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.minHeights) === null || _d === undefined ? undefined : _d[this.indexYInNode]) || DIAGRAM_SECTION_MIN_HEIGHT;
   }
   getPriority() {
     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) || DIAGRAM_SECTION_DEFAULTS.priority;
+    return ((_f = (_e = (_d = (_c = (_b = (_a = this.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[this.indexYInNode]) === null || _e === undefined ? undefined : _e[this.indexXInNode]) === null || _f === undefined ? undefined : _f.priority) || DIAGRAM_SECTION_DEFAULTS.priority;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -2490,9 +2518,9 @@ class DiagramSection extends DiagramElement {
     }
     // Set label's dimensions as a function of ours.
     if (this.label) {
-      this.label.coords = [this.coords[0] + getLeftMargin((_a = this.getConfig()) === null || _a === void 0 ? void 0 : _a.label), this.coords[1] + getTopMargin((_b = this.getConfig()) === null || _b === void 0 ? void 0 : _b.label)];
-      this.label.width = this.width - getLeftMargin((_c = this.getConfig()) === null || _c === void 0 ? void 0 : _c.label) - getRightMargin((_d = this.getConfig()) === null || _d === void 0 ? void 0 : _d.label);
-      this.label.height = this.height - getTopMargin((_e = this.getConfig()) === null || _e === void 0 ? void 0 : _e.label) - getBottomMargin((_f = this.getConfig()) === null || _f === void 0 ? void 0 : _f.label);
+      this.label.coords = [this.coords[0] + getLeftMargin((_a = this.getConfig()) === null || _a === undefined ? undefined : _a.label), this.coords[1] + getTopMargin((_b = this.getConfig()) === null || _b === undefined ? undefined : _b.label)];
+      this.label.width = this.width - getLeftMargin((_c = this.getConfig()) === null || _c === undefined ? undefined : _c.label) - getRightMargin((_d = this.getConfig()) === null || _d === undefined ? undefined : _d.label);
+      this.label.height = this.height - getTopMargin((_e = this.getConfig()) === null || _e === undefined ? undefined : _e.label) - getBottomMargin((_f = this.getConfig()) === null || _f === undefined ? undefined : _f.label);
       this.label.updateInView();
     }
     // Move decorators to match the new coords.
@@ -2526,11 +2554,11 @@ class DiagramSectionSet extends DiagramElementSet {
     node.sections.push(section);
     node.updateInView();
     // add section ports
-    const sectionPorts = (_d = (_c = (_b = (_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.sections) === null || _b === void 0 ? void 0 : _b[indexYInNode]) === null || _c === void 0 ? void 0 : _c[indexXInNode]) === null || _d === void 0 ? void 0 : _d.ports;
+    const sectionPorts = (_d = (_c = (_b = (_a = node.type.sectionGrid) === null || _a === undefined ? undefined : _a.sections) === null || _b === undefined ? undefined : _b[indexYInNode]) === null || _c === undefined ? undefined : _c[indexXInNode]) === null || _d === undefined ? undefined : _d.ports;
     if (sectionPorts && sectionPorts.length > 0) {
       for (let i = 0; i < sectionPorts.length; ++i) {
         const portConfig = sectionPorts[i];
-        const port = this.model.ports.new(section, [section.coords[0] + (((_e = portConfig === null || portConfig === void 0 ? void 0 : portConfig.coords) === null || _e === void 0 ? void 0 : _e[0]) || 0), section.coords[1] + (((_f = portConfig === null || portConfig === void 0 ? void 0 : portConfig.coords) === null || _f === void 0 ? void 0 : _f[1]) || 0)], portConfig === null || portConfig === void 0 ? void 0 : portConfig.direction, `${section.id}_${i}`);
+        const port = this.model.ports.new(section, [section.coords[0] + (((_e = portConfig === null || portConfig === undefined ? undefined : portConfig.coords) === null || _e === undefined ? undefined : _e[0]) || 0), section.coords[1] + (((_f = portConfig === null || portConfig === undefined ? undefined : portConfig.coords) === null || _f === undefined ? undefined : _f[1]) || 0)], portConfig === null || portConfig === undefined ? undefined : portConfig.direction, `${section.id}_${i}`);
         if (portConfig.label) {
           const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), portConfig.label);
           let labelCoords;
@@ -2553,7 +2581,7 @@ class DiagramSectionSet extends DiagramElementSet {
       }
     }
     // add section label
-    const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === void 0 ? void 0 : _g.sections) === null || _h === void 0 ? void 0 : _h[indexYInNode]) === null || _j === void 0 ? void 0 : _j[indexXInNode]) === null || _k === void 0 ? void 0 : _k.label;
+    const sectionLabel = (_k = (_j = (_h = (_g = node.type.sectionGrid) === null || _g === undefined ? undefined : _g.sections) === null || _h === undefined ? undefined : _h[indexYInNode]) === null || _j === undefined ? undefined : _j[indexXInNode]) === null || _k === undefined ? undefined : _k.label;
     if (sectionLabel) {
       const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), sectionLabel);
       this.model.fields.new(section, [section.coords[0] + getLeftMargin(labelConfiguration), section.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, section.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), section.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
@@ -2609,11 +2637,14 @@ const DIAGRAM_NODE_TYPE_DEFAULTS = {
   minHeight: 1,
   resizableX: false,
   resizableY: false,
+  padding: 0,
   label: null,
   ports: [],
   sectionGrid: null,
   look: DIAGRAM_NODE_LOOK_DEFAULTS,
   isUnique: false,
+  canBeParentless: true,
+  childrenTypes: [],
   priority: DEFAULT_PRIORITY,
   properties: []
 };
@@ -2633,13 +2664,19 @@ class DiagramNodeType {
     this.minHeight = values.minHeight;
     this.resizableX = values.resizableX;
     this.resizableY = values.resizableY;
+    this.bottomPadding = getBottomPadding(values);
+    this.leftPadding = getLeftPadding(values);
+    this.rightPadding = getRightPadding(values);
+    this.topPadding = getTopPadding(values);
     this.label = values.label;
     this.ports = values.ports;
     this.sectionGrid = values.sectionGrid;
     this.look = values.look;
     this.isUnique = values.isUnique;
+    this.canBeParentless = values.canBeParentless;
+    this.childrenTypes = values.childrenTypes;
     this.priority = values.priority;
-    this.propertySet = new PropertySet((options === null || options === void 0 ? void 0 : options.properties) || []);
+    this.propertySet = new PropertySet((options === null || options === undefined ? undefined : options.properties) || []);
   }
 }
 /**
@@ -2656,7 +2693,7 @@ class DiagramNode extends DiagramElement {
    */
   get name() {
     var _a;
-    return ((_a = this.label) === null || _a === void 0 ? void 0 : _a.text) || '';
+    return ((_a = this.label) === null || _a === undefined ? undefined : _a.text) || '';
   }
   set name(name) {
     if (this.label) {
@@ -2668,6 +2705,11 @@ class DiagramNode extends DiagramElement {
       throw new Error(`DiagramNode with id "${id}" already exists`);
     }
     super(model, id);
+    /**
+     * Nodes contained within this node.
+     * @public
+     */
+    this.children = [];
     /**
      * Sections of this node.
      * @public
@@ -2684,7 +2726,7 @@ class DiagramNode extends DiagramElement {
      */
     this.decorators = [];
     /**
-     * Collaborative timestamp for SetGeometryCollabActions.
+     * Collaborative timestamp for MoveCollabAction, SetGeometryCollabAction and SetParentCollabAction.
      * @public
      */
     this.geometryTimestamp = null;
@@ -2700,7 +2742,26 @@ class DiagramNode extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateNodesInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateNodesInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    if (this.label) {
+      this.label.raise();
+    }
+    for (const port of this.ports) {
+      port.raise();
+    }
+    for (const section of this.sections) {
+      section.raise();
+    }
+    for (const decorator of this.decorators) {
+      decorator.raise();
+    }
+    for (const child of this.children) {
+      child.raise();
+    }
   }
   getPriority() {
     return this.type.priority;
@@ -2792,7 +2853,7 @@ class DiagramNode extends DiagramElement {
         if (!includeRemoved && incomingConnection.removed) {
           continue;
         }
-        const otherNode = (_a = incomingConnection.start) === null || _a === void 0 ? void 0 : _a.getNode();
+        const otherNode = (_a = incomingConnection.start) === null || _a === undefined ? undefined : _a.getNode();
         if (otherNode) {
           if (!includeRemoved && otherNode.removed) {
             continue;
@@ -2804,7 +2865,7 @@ class DiagramNode extends DiagramElement {
         if (!includeRemoved && outgoingConnection.removed) {
           continue;
         }
-        const otherNode = (_b = outgoingConnection.end) === null || _b === void 0 ? void 0 : _b.getNode();
+        const otherNode = (_b = outgoingConnection.end) === null || _b === undefined ? undefined : _b.getNode();
         if (otherNode) {
           if (!includeRemoved && otherNode.removed) {
             continue;
@@ -2815,6 +2876,94 @@ class DiagramNode extends DiagramElement {
     }
     return result;
   }
+  /**
+   * Return the ancestor of this node which has no ancestors. If this node has no ancestors, returns itself.
+   * @returns The ancestor of this node which has no ancestors.
+   */
+  getLastAncestor() {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    let node = this;
+    while (node.parent !== undefined) {
+      node = node === null || node === undefined ? undefined : node.parent;
+    }
+    return node;
+  }
+  /**
+   * Return true if this node is among the ancestors of the given node.
+   * @param child A node.
+   * @returns `true` if this node is among the ancestors of the given node, `false` otherwise.
+   */
+  isAncestorOf(child) {
+    let node = child;
+    while (node !== undefined) {
+      if (this.id === node.id) {
+        return true;
+      }
+      node = node.parent;
+    }
+    return false;
+  }
+  /**
+   * Return true if the given node is among the ancestors of this node.
+   * @param child A node.
+   * @returns `true` if the given node is among the ancestors of this node, `false` otherwise.
+   */
+  isDescendantOf(child) {
+    return child.isAncestorOf(this);
+  }
+  addChild(child) {
+    if (child.id === this.id) {
+      // do nothing; a node can't be its own child
+      return;
+    }
+    let node = this.parent;
+    let isChildParentOfThis = false;
+    while (node !== undefined) {
+      if (node.id === child.id) {
+        isChildParentOfThis = true;
+        break;
+      }
+      node = node.parent;
+    }
+    if (isChildParentOfThis) {
+      // do nothing; a node can't be its own ancestor
+      return;
+    }
+    if (this.children.indexOf(child) >= 0) {
+      // do nothing, child is already among the node's children
+      return;
+    }
+    this.fitToChild(child);
+    this.children.push(child);
+    child.parent = this;
+    child.raise();
+  }
+  removeChild(child) {
+    removeIfExists(this.children, child);
+    child.parent = undefined;
+  }
+  fitToChild(child) {
+    const excessLeft = this.coords[0] - child.coords[0] + this.type.leftPadding;
+    if (excessLeft >= 0) {
+      this.stretch(Side.Left, excessLeft);
+    }
+    const excessTop = this.coords[1] - child.coords[1] + this.type.topPadding;
+    if (excessTop >= 0) {
+      this.stretch(Side.Top, excessTop);
+    }
+    const excessRight = child.coords[0] + child.width - (this.coords[0] + this.width) + this.type.rightPadding;
+    if (excessRight >= 0) {
+      this.stretch(Side.Right, excessRight);
+    }
+    const excessBottom = child.coords[1] + child.height - (this.coords[1] + this.height) + this.type.bottomPadding;
+    if (excessBottom >= 0) {
+      this.stretch(Side.Bottom, excessBottom);
+    }
+    if (this.parent) {
+      // ensure this node also fits inside its parent after stretching
+      this.parent.fitToChild(this);
+    }
+  }
   /**
    * Change the coordinates of this node to the given coordinates and move its sections, ports and labels correspondingly.
    * @public
@@ -2822,6 +2971,9 @@ class DiagramNode extends DiagramElement {
    */
   move(coords) {
     const coordDifferences = [coords[0] - this.coords[0], coords[1] - this.coords[1]];
+    for (const child of this.children) {
+      child.move([child.coords[0] + coordDifferences[0], child.coords[1] + coordDifferences[1]]);
+    }
     for (const section of this.sections) {
       section.move([section.coords[0] + coordDifferences[0], section.coords[1] + coordDifferences[1]]);
     }
@@ -2830,7 +2982,9 @@ class DiagramNode extends DiagramElement {
       width: this.width,
       height: this.height,
       // We already moved the sections above - skip changing them in setDimensions.
-      sections: {}
+      sections: {},
+      // We don't change the children when stretching
+      children: {}
     });
   }
   /**
@@ -2879,7 +3033,9 @@ class DiagramNode extends DiagramElement {
       width: newCoordsX[1] - newCoordsX[0],
       height: newCoordsY[1] - newCoordsY[0],
       // we ignore this.sections, the stretching of a node with sections is handled in the stretchSections method
-      sections: {}
+      sections: {},
+      // we ignore this.children
+      children: {}
     });
   }
   /**
@@ -2968,16 +3124,23 @@ class DiagramNode extends DiagramElement {
    * Returns the current values of all geometric properties (coordinates and dimensions) of this node and its sections.
    * @public
    */
-  getGeometry() {
+  getGeometry(excludeId) {
     const sections = {};
     for (const section of this.sections) {
       sections[section.id] = section.getGeometry();
     }
+    const children = {};
+    for (const child of this.children) {
+      if (child.id !== excludeId) {
+        children[child.id] = child.getGeometry(excludeId);
+      }
+    }
     return {
       coords: [...this.coords],
       width: this.width,
       height: this.height,
-      sections
+      sections,
+      children
     };
   }
   /**
@@ -2985,6 +3148,7 @@ class DiagramNode extends DiagramElement {
    * @public
    */
   setGeometry(geometry) {
+    this.raise();
     const oldCoordsX = [this.coords[0], this.coords[0] + this.width];
     const oldCoordsY = [this.coords[1], this.coords[1] + this.height];
     this.coords = [...geometry.coords];
@@ -2992,6 +3156,13 @@ class DiagramNode extends DiagramElement {
     this.height = geometry.height;
     const newCoordsX = [this.coords[0], this.coords[0] + this.width];
     const newCoordsY = [this.coords[1], this.coords[1] + this.height];
+    // Update children, if supplied.
+    for (const child of this.children) {
+      const childGeometry = geometry.children[child.id];
+      if (childGeometry) {
+        child.setGeometry(childGeometry);
+      }
+    }
     // Update sections, if supplied.
     for (const section of this.sections) {
       const sectionGeometry = geometry.sections[section.id];
@@ -3063,10 +3234,10 @@ class DiagramNodeSet extends DiagramElementSet {
       for (let j = 0; j < nodeType.sectionGrid.sections.length; ++j) {
         let widthAccumulator = node.coords[0] + (nodeType.sectionGrid.margin || 0);
         for (let i = 0; i < nodeType.sectionGrid.sections[j].length; ++i) {
-          this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], ((_a = nodeType.sectionGrid.defaultWidths) === null || _a === void 0 ? void 0 : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === void 0 ? void 0 : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
-          widthAccumulator += (((_c = nodeType.sectionGrid.defaultWidths) === null || _c === void 0 ? void 0 : _c[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH) + (nodeType.sectionGrid.margin || 0);
+          this.model.sections.new(node, i, j, [widthAccumulator, heightAccumulator], ((_a = nodeType.sectionGrid.defaultWidths) === null || _a === undefined ? undefined : _a[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH, ((_b = nodeType.sectionGrid.defaultHeights) === null || _b === undefined ? undefined : _b[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT, `${node.id}_${j}_${i}`);
+          widthAccumulator += (((_c = nodeType.sectionGrid.defaultWidths) === null || _c === undefined ? undefined : _c[i]) || DIAGRAM_SECTION_DEFAULT_WIDTH) + (nodeType.sectionGrid.margin || 0);
         }
-        heightAccumulator += (((_d = nodeType.sectionGrid.defaultHeights) === null || _d === void 0 ? void 0 : _d[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT) + (nodeType.sectionGrid.margin || 0);
+        heightAccumulator += (((_d = nodeType.sectionGrid.defaultHeights) === null || _d === undefined ? undefined : _d[j]) || DIAGRAM_SECTION_DEFAULT_HEIGHT) + (nodeType.sectionGrid.margin || 0);
       }
     }
     // add node ports
@@ -3101,12 +3272,20 @@ class DiagramNodeSet extends DiagramElementSet {
       this.model.fields.new(node, [node.coords[0] + getLeftMargin(labelConfiguration), node.coords[1] + getTopMargin(labelConfiguration)], labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, node.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), node.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
     }
     node.valueSet.resetValues();
-    (_e = node.model.canvas) === null || _e === void 0 ? void 0 : _e.fitNodeInView(node.id);
+    (_e = node.model.canvas) === null || _e === undefined ? undefined : _e.fitNodeInView(node.id);
     return node;
   }
   remove(id) {
     const node = this.get(id, true);
     if (node) {
+      // remove from parent
+      if (node.parent) {
+        removeIfExists(node.parent.children, node);
+      }
+      // remove all children
+      while (node.children.length > 0) {
+        this.model.nodes.remove(node.children[0].id);
+      }
       // remove all sections
       while (node.sections.length > 0) {
         this.model.sections.remove(node.sections[0].id);
@@ -3129,7 +3308,137 @@ class DiagramNodeSet extends DiagramElementSet {
       node.updateInView();
     }
   }
+  /**
+   * Gets all the nodes that overlap with the given coordinates.
+   * @public
+   * @param x A coordinate along the x axis.
+   * @param y A coordinate along the y axis.
+   * @returns All the nodes that overlap with the given coordinates.
+   */
+  getAtCoordinates(x, y) {
+    const nodesAtLocation = [];
+    for (const node of this) {
+      if (node.coords[0] < x && x < node.coords[0] + node.width && node.coords[1] < y && y < node.coords[1] + node.height) {
+        nodesAtLocation.push(node);
+      }
+    }
+    return nodesAtLocation;
+  }
 }
+/**
+ * Removes any nodes from the given list which are a descendant of another node in the list.
+ * @param nodes A list of nodes.
+ * @returns The given list of nodes minus any node that is a descendant of another node in the list.
+ */
+const filterByOnlyAncestors = nodes => {
+  for (let i = 0; i < nodes.length; ++i) {
+    for (let j = 0; j < nodes.length; ++j) {
+      if (j !== i && nodes[j].isDescendantOf(nodes[i])) {
+        nodes.splice(j, 1);
+        --j;
+        if (i > j) {
+          --i;
+        }
+      }
+    }
+  }
+  return nodes;
+};
+/**
+ * Removes any nodes from the given list which are an ancestor of another node in the list.
+ * @param nodes A list of nodes.
+ * @returns The given list of nodes minus any node that is an ancestor of another node in the list.
+ */
+const filterByOnlyDescendants = nodes => {
+  for (let i = 0; i < nodes.length; ++i) {
+    for (let j = 0; j < nodes.length; ++j) {
+      if (j !== i && nodes[j].isAncestorOf(nodes[i])) {
+        nodes.splice(j, 1);
+        --j;
+        if (i > j) {
+          --i;
+        }
+      }
+    }
+  }
+  return nodes;
+};
+const getBottomPadding = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[0];
+    } else if (config.padding.length === 3) {
+      return config.padding[2];
+    } else {
+      return config.padding[2];
+    }
+  }
+};
+const getLeftPadding = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[1];
+    } else if (config.padding.length === 3) {
+      return config.padding[1];
+    } else {
+      return config.padding[3];
+    }
+  }
+};
+const getRightPadding = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[1];
+    } else if (config.padding.length === 3) {
+      return config.padding[1];
+    } else {
+      return config.padding[1];
+    }
+  }
+};
+const getTopPadding = config => {
+  if ((config === null || config === undefined ? undefined : config.padding) === null || (config === null || config === undefined ? undefined : config.padding) === undefined) {
+    return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+  } else if (typeof config.padding === 'number') {
+    return config.padding;
+  } else {
+    if (config.padding.length === 0) {
+      return DIAGRAM_NODE_TYPE_DEFAULTS.padding;
+    } else if (config.padding.length === 1) {
+      return config.padding[0];
+    } else if (config.padding.length === 2) {
+      return config.padding[0];
+    } else if (config.padding.length === 3) {
+      return config.padding[0];
+    } else {
+      return config.padding[0];
+    }
+  }
+};
 
 /**
  * Default values of the parameters of a diagram port.
@@ -3173,7 +3482,17 @@ class DiagramPort extends DiagramElement {
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updatePortsInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updatePortsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
+    for (const connection of this.incomingConnections) {
+      connection.raise();
+    }
+    for (const connection of this.outgoingConnections) {
+      connection.raise();
+    }
   }
   /**
    * Add a connection to this port's list of outgoing connections.
@@ -3206,7 +3525,7 @@ class DiagramPort extends DiagramElement {
   }
   getPriority() {
     var _a;
-    return ((_a = this.rootElement) === null || _a === void 0 ? void 0 : _a.getPriority()) || DEFAULT_PRIORITY;
+    return ((_a = this.rootElement) === null || _a === undefined ? undefined : _a.getPriority()) || DEFAULT_PRIORITY;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -3312,7 +3631,7 @@ class DagaImporter {
     return model;
   }
   importNode(model, node) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const newNodeType = model.nodes.types.get(node.type);
     if (newNodeType) {
       const newNode = new DiagramNode(model, newNodeType, node.coords, node.id);
@@ -3330,14 +3649,21 @@ class DagaImporter {
           newField.updateInView();
         }
       }
+      for (const child of node.children || []) {
+        const newChild = this.importNode(model, child);
+        if (newChild !== undefined) {
+          (_a = newNode.children) === null || _a === undefined ? undefined : _a.push(newChild);
+          newChild.parent = newNode;
+        }
+      }
       for (const section of node.sections || []) {
         const newSection = new DiagramSection(model, newNode, section.indexXInNode, section.indexYInNode, section.coords, section.width, section.height, section.id);
-        (_a = newNode.sections) === null || _a === void 0 ? void 0 : _a.push(newSection);
+        (_b = newNode.sections) === null || _b === undefined ? undefined : _b.push(newSection);
         model.sections.add(newSection);
         if (section.label) {
           // add section label
-          if ((_e = (_d = (_c = (_b = newNodeType.sectionGrid) === null || _b === void 0 ? void 0 : _b.sections) === null || _c === void 0 ? void 0 : _c[section.indexYInNode]) === null || _d === void 0 ? void 0 : _d[section.indexXInNode]) === null || _e === void 0 ? void 0 : _e.label) {
-            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_j = (_h = (_g = (_f = newNodeType.sectionGrid) === null || _f === void 0 ? void 0 : _f.sections) === null || _g === void 0 ? void 0 : _g[section.indexYInNode]) === null || _h === void 0 ? void 0 : _h[section.indexXInNode]) === null || _j === void 0 ? void 0 : _j.label);
+          if ((_f = (_e = (_d = (_c = newNodeType.sectionGrid) === null || _c === undefined ? undefined : _c.sections) === null || _d === undefined ? undefined : _d[section.indexYInNode]) === null || _e === undefined ? undefined : _e[section.indexXInNode]) === null || _f === undefined ? undefined : _f.label) {
+            const labelConfiguration = Object.assign(Object.assign({}, DIAGRAM_FIELD_DEFAULTS), (_k = (_j = (_h = (_g = newNodeType.sectionGrid) === null || _g === undefined ? undefined : _g.sections) === null || _h === undefined ? undefined : _h[section.indexYInNode]) === null || _j === undefined ? undefined : _j[section.indexXInNode]) === null || _k === undefined ? undefined : _k.label);
             const newField = new DiagramField(model, newSection, [newSection.coords[0] + getLeftMargin(labelConfiguration), newSection.coords[1] + getTopMargin(labelConfiguration)], newSection.width - getLeftMargin(labelConfiguration) - getRightMargin(labelConfiguration), newSection.height - getTopMargin(labelConfiguration) - getBottomMargin(labelConfiguration), labelConfiguration.fontSize, labelConfiguration.fontFamily, labelConfiguration.color, labelConfiguration.selectedColor, labelConfiguration.horizontalAlign, labelConfiguration.verticalAlign, '', labelConfiguration.editable, labelConfiguration.fit);
             newField.text = section.label;
             newSection.label = newField;
@@ -3482,16 +3808,21 @@ class DagaImporter {
  * @see AddNodeAction
  */
 class AddNodeCollabAction {
-  constructor(canvas, id, typeId, coords, label, values) {
+  constructor(canvas, id, typeId, coords, parentId, label, values) {
     this.canvas = canvas;
     this.id = id;
     this.typeId = typeId;
     this.coords = coords;
+    this.parentId = parentId;
     this.label = label;
     this.values = values;
   }
   do() {
+    var _a;
     const node = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
+    if (this.parentId !== undefined) {
+      (_a = this.canvas.model.nodes.get(this.parentId)) === null || _a === undefined ? undefined : _a.addChild(node);
+    }
     if (this.values !== undefined) {
       node.valueSet.setValues(structuredClone(Object.assign(Object.assign({}, node.valueSet.getValues()), this.values)));
     }
@@ -3505,12 +3836,45 @@ class AddNodeCollabAction {
       id: this.id,
       typeId: this.typeId,
       coords: this.coords,
+      parentId: this.parentId,
       label: this.label,
       values: this.values
     };
   }
   static deserialize(canvas, serialized) {
-    return new AddNodeCollabAction(canvas, serialized.id, serialized.typeId, serialized.coords, serialized.label, serialized.values);
+    return new AddNodeCollabAction(canvas, serialized.id, serialized.typeId, serialized.coords, serialized.parentId, serialized.label, serialized.values);
+  }
+}
+/**
+ * Collaborative which consists of applying a layout to the diagram which can change the location of several nodes.
+ * @private
+ * @see ApplyLayoutAction
+ */
+class ApplyLayoutCollabAction {
+  constructor(canvas, to, timestamp) {
+    this.canvas = canvas;
+    this.to = to;
+    this.timestamp = timestamp;
+  }
+  do() {
+    for (const nodeId in this.to) {
+      const node = this.canvas.model.nodes.get(nodeId, true);
+      if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
+        const point = this.to[nodeId];
+        node.move([point[0], point[1]]);
+        node.geometryTimestamp = this.timestamp;
+      }
+    }
+  }
+  serialize() {
+    return {
+      type: 'applyLayout',
+      to: this.to,
+      timestamp: this.timestamp
+    };
+  }
+  static deserialize(canvas, serialized) {
+    return new ApplyLayoutCollabAction(canvas, serialized.to, serialized.timestamp);
   }
 }
 /**
@@ -3526,10 +3890,12 @@ class MoveCollabAction {
     this.timestamp = timestamp;
   }
   do() {
+    var _a;
     for (const nodeId of this.nodeIds) {
       const node = this.canvas.model.nodes.get(nodeId, true);
       if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
         node.move([node.coords[0] + this.delta[0], node.coords[1] + this.delta[1]]);
+        (_a = node.parent) === null || _a === undefined ? undefined : _a.fitToChild(node);
         node.geometryTimestamp = this.timestamp;
       }
     }
@@ -3559,19 +3925,20 @@ class SetGeometryCollabAction {
     this.timestamp = timestamp;
   }
   do() {
-    var _a, _b;
+    var _a, _b, _c;
     const node = this.canvas.model.nodes.get(this.nodeId, true);
     if (node && timestampWins(this.timestamp, node.geometryTimestamp)) {
       node.setGeometry(this.to);
       // Re-fit the labels, in case their text has changed since `this.to` was measured.
-      if ((_a = node.label) === null || _a === void 0 ? void 0 : _a.fit) {
+      if ((_a = node.label) === null || _a === undefined ? undefined : _a.fit) {
         this.canvas.fitFieldRootInView(node.label.id);
       }
       for (const section of node.sections) {
-        if ((_b = section.label) === null || _b === void 0 ? void 0 : _b.fit) {
+        if ((_b = section.label) === null || _b === undefined ? undefined : _b.fit) {
           this.canvas.fitFieldRootInView(section.label.id);
         }
       }
+      (_c = node.parent) === null || _c === undefined ? undefined : _c.fitToChild(node);
       node.geometryTimestamp = this.timestamp;
     }
   }
@@ -3587,6 +3954,42 @@ class SetGeometryCollabAction {
     return new SetGeometryCollabAction(canvas, serialized.nodeId, serialized.to, serialized.timestamp);
   }
 }
+/**
+ * Collaborative action which consists of setting a node's parent.
+ * @private
+ * @see SetParentAction
+ */
+class SetParentCollabAction {
+  constructor(canvas, childId, parentId, childGeometry, timestamp) {
+    this.canvas = canvas;
+    this.childId = childId;
+    this.parentId = parentId;
+    this.childGeometry = childGeometry;
+    this.timestamp = timestamp;
+  }
+  do() {
+    var _a;
+    const childNode = this.canvas.model.nodes.get(this.childId, true);
+    const parentNode = this.parentId !== undefined ? this.canvas.model.nodes.get(this.parentId, true) : undefined;
+    if (childNode && (this.parentId !== undefined ? parentNode : true) && timestampWins(this.timestamp, childNode.geometryTimestamp)) {
+      (_a = childNode.parent) === null || _a === undefined ? undefined : _a.removeChild(childNode);
+      childNode.setGeometry(this.childGeometry);
+      parentNode === null || parentNode === undefined ? undefined : parentNode.addChild(childNode);
+    }
+  }
+  serialize() {
+    return {
+      type: 'setParent',
+      childId: this.childId,
+      parentId: this.parentId,
+      childGeometry: this.childGeometry,
+      timestamp: this.timestamp
+    };
+  }
+  static deserialize(canvas, serialized) {
+    return new SetParentCollabAction(canvas, serialized.childId, serialized.parentId, serialized.childGeometry, serialized.timestamp);
+  }
+}
 /**
  * Collaborative action which consists of adding a connection.
  * @private
@@ -3668,12 +4071,12 @@ class UpdateValuesCollabAction {
     if (this.id === undefined) {
       return this.canvas.model.valueSet;
     } else {
-      return (_a = this.canvas.model.nodes.get(this.id, true) || this.canvas.model.connections.get(this.id, true)) === null || _a === void 0 ? void 0 : _a.valueSet;
+      return (_a = this.canvas.model.nodes.get(this.id, true) || this.canvas.model.connections.get(this.id, true)) === null || _a === undefined ? undefined : _a.valueSet;
     }
   }
   do() {
     var _a;
-    (_a = this.getValueSet()) === null || _a === void 0 ? void 0 : _a.overwriteValuesLww(this.to, this.timestamp);
+    (_a = this.getValueSet()) === null || _a === undefined ? undefined : _a.overwriteValuesLww(this.to, this.timestamp);
   }
   serialize() {
     return {
@@ -3858,6 +4261,12 @@ class CollabEngine {
           action.do();
           break;
         }
+      case 'applyLayout':
+        {
+          const action = ApplyLayoutCollabAction.deserialize(this.canvas, message);
+          action.do();
+          break;
+        }
       case 'move':
         {
           const action = MoveCollabAction.deserialize(this.canvas, message);
@@ -3870,6 +4279,12 @@ class CollabEngine {
           action.do();
           break;
         }
+      case 'setParent':
+        {
+          const action = SetParentCollabAction.deserialize(this.canvas, message);
+          action.do();
+          break;
+        }
       case 'addConnection':
         {
           const action = AddConnectionCollabAction.deserialize(this.canvas, message);
@@ -3910,7 +4325,7 @@ class CollabEngine {
 }
 
 /**
- * A stack of recent actions taken by the user that can be undone and redone.
+ * A stack of recent actions taken by the user.
  * @private
  */
 class ActionStack {
@@ -3935,37 +4350,60 @@ class ActionStack {
       this.history.push(action);
       ++this.index;
     }
-    this.canvas.diagramChange$.next();
+    this.canvas.diagramChange$.next({
+      action,
+      method: DiagramActionMethod.Do
+    });
   }
   /**
    * Undoes the last action in the history, not counting undone actions.
    * @private
    */
   undo() {
+    let action;
     if (this.index > 0) {
       let hasEffect;
       do {
         --this.index;
-        hasEffect = this.history[this.index].undo();
+        action = this.history[this.index];
+        hasEffect = action.undo();
       } while (!hasEffect && this.index > 0);
     }
-    this.canvas.diagramChange$.next();
+    this.canvas.diagramChange$.next({
+      action,
+      method: DiagramActionMethod.Undo
+    });
   }
   /**
    * Redoes the last undone action in the history.
    * @private
    */
   redo() {
+    let action;
     if (this.index < this.history.length) {
       let hasEffect;
       do {
-        hasEffect = this.history[this.index].redo();
+        action = this.history[this.index];
+        hasEffect = action.redo();
         ++this.index;
       } while (!hasEffect && this.index < this.history.length);
     }
-    this.canvas.diagramChange$.next();
+    this.canvas.diagramChange$.next({
+      action,
+      method: DiagramActionMethod.Redo
+    });
   }
 }
+/**
+ * The different methods of an action.
+ * @private
+ */
+var DiagramActionMethod;
+(function (DiagramActionMethod) {
+  DiagramActionMethod[DiagramActionMethod["Do"] = 0] = "Do";
+  DiagramActionMethod[DiagramActionMethod["Undo"] = 1] = "Undo";
+  DiagramActionMethod[DiagramActionMethod["Redo"] = 2] = "Redo";
+})(DiagramActionMethod || (DiagramActionMethod = {}));
 /**
  * Enum listing the actions that can be taken by the user.
  * The actions can correspond to a DiagramAction that can be recorded in the action stack of a diagram or they may not correspond to any DiagramAction implementations.
@@ -3985,6 +4423,12 @@ var DiagramActions;
    * @see AddNodeAction
    */
   DiagramActions["AddNode"] = "add-node";
+  /**
+   * Action that corresponds to applying a layout which changes the location of several nodes.
+   * @public
+   * @see ApplyLayoutAction
+   */
+  DiagramActions["ApplyLayout"] = "apply-layout";
   /**
    * Action that corresponds to copying diagram elements to the clipboard.
    * @public
@@ -4050,17 +4494,25 @@ var DiagramActions;
  * @see DiagramNode
  */
 class AddNodeAction {
-  constructor(canvas, type, coords, label, values) {
+  constructor(canvas, type, coords, parentId, ancestorId, fromAncestorGeometry, toAncestorGeometry, label, values) {
     this.canvas = canvas;
     this.type = type;
     this.coords = coords;
+    this.parentId = parentId;
+    this.ancestorId = ancestorId;
+    this.fromAncestorGeometry = fromAncestorGeometry;
+    this.toAncestorGeometry = toAncestorGeometry;
     this.label = label;
     this.values = values;
     this.id = this.canvas.collabEngine.freshId();
   }
   do() {
-    const collabAction = new AddNodeCollabAction(this.canvas, this.id, this.type.id, this.coords, this.label, this.values);
+    const collabAction = new AddNodeCollabAction(this.canvas, this.id, this.type.id, this.coords, this.parentId, this.label, this.values);
     this.canvas.collabEngine.doCollaboratively(collabAction);
+    if (this.ancestorId !== undefined && this.toAncestorGeometry !== undefined) {
+      const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+      this.canvas.collabEngine.doCollaboratively(collabAction2);
+    }
     // creating a node always has an effect
     return true;
   }
@@ -4068,6 +4520,10 @@ class AddNodeAction {
     const node = this.canvas.model.nodes.get(this.id);
     const collabAction = new SetSelfRemovedCollabAction(this.canvas, [this.id], [], [], [], [], true, this.canvas.collabEngine.freshTimestamp());
     this.canvas.collabEngine.doCollaboratively(collabAction);
+    if (this.ancestorId !== undefined && this.fromAncestorGeometry !== undefined) {
+      const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.fromAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+      this.canvas.collabEngine.doCollaboratively(collabAction2);
+    }
     // undoing creating a node has an effect if the node was not already removed
     return node !== undefined;
   }
@@ -4075,10 +4531,38 @@ class AddNodeAction {
     const node = this.canvas.model.nodes.get(this.id);
     const collabAction = new SetSelfRemovedCollabAction(this.canvas, [this.id], [], [], [], [], false, this.canvas.collabEngine.freshTimestamp());
     this.canvas.collabEngine.doCollaboratively(collabAction);
+    if (this.ancestorId !== undefined && this.toAncestorGeometry !== undefined) {
+      const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+      this.canvas.collabEngine.doCollaboratively(collabAction2);
+    }
     // redoing creating a node has an effect if the node was removed
     return node === undefined;
   }
 }
+/**
+ * Action which consists of applying a layout to the diagram which can change the location of several nodes.
+ * @private
+ */
+class ApplyLayoutAction {
+  constructor(canvas, from, to) {
+    this.canvas = canvas;
+    this.from = from;
+    this.to = to;
+  }
+  do() {
+    const collabAction = new ApplyLayoutCollabAction(this.canvas, this.to, this.canvas.collabEngine.freshTimestamp());
+    this.canvas.collabEngine.doCollaboratively(collabAction);
+    return true;
+  }
+  undo() {
+    const collabAction = new ApplyLayoutCollabAction(this.canvas, this.from, this.canvas.collabEngine.freshTimestamp());
+    this.canvas.collabEngine.doCollaboratively(collabAction);
+    return true;
+  }
+  redo() {
+    return this.do();
+  }
+}
 /**
  * Action which consists of changing the coordinates of diagram elements by a fixed amount.
  * @private
@@ -4109,17 +4593,26 @@ class MoveAction {
  * @see DiagramNode
  */
 class SetGeometryAction {
-  constructor(canvas, intent, nodeId, from, to) {
+  constructor(canvas, intent, nodeId, from, to, ancestorId, fromAncestorGeometry, toAncestorGeometry) {
     this.canvas = canvas;
     this.intent = intent;
     this.nodeId = nodeId;
     this.from = from;
     this.to = to;
+    this.ancestorId = ancestorId;
+    this.fromAncestorGeometry = fromAncestorGeometry;
+    this.toAncestorGeometry = toAncestorGeometry;
   }
   do() {
     const node = this.canvas.model.nodes.get(this.nodeId);
-    const collabAction = new SetGeometryCollabAction(this.canvas, this.nodeId, this.to, this.canvas.collabEngine.freshTimestamp());
-    this.canvas.collabEngine.doCollaboratively(collabAction);
+    if (node) {
+      const collabAction = new SetGeometryCollabAction(this.canvas, this.nodeId, this.to, this.canvas.collabEngine.freshTimestamp());
+      this.canvas.collabEngine.doCollaboratively(collabAction);
+      if (this.ancestorId !== undefined && this.toAncestorGeometry !== undefined) {
+        const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction2);
+      }
+    }
     return node !== undefined;
   }
   undo() {
@@ -4128,6 +4621,10 @@ class SetGeometryAction {
       this.to = node.getGeometry();
       const collabAction = new SetGeometryCollabAction(this.canvas, this.nodeId, this.from, this.canvas.collabEngine.freshTimestamp());
       this.canvas.collabEngine.doCollaboratively(collabAction);
+      if (this.ancestorId !== undefined && this.fromAncestorGeometry !== undefined) {
+        const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.fromAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+        this.canvas.collabEngine.doCollaboratively(collabAction2);
+      }
     }
     return node !== undefined;
   }
@@ -4141,6 +4638,46 @@ class SetGeometryAction {
     return node !== undefined;
   }
 }
+/**
+ * Action which consists of setting a node's parent.
+ * @private
+ */
+class SetParentAction {
+  constructor(canvas, childId, fromParentId, toParentId, fromChildGeometry, toChildGeometry, ancestorId, fromAncestorGeometry, toAncestorGeometry) {
+    this.canvas = canvas;
+    this.childId = childId;
+    this.fromParentId = fromParentId;
+    this.toParentId = toParentId;
+    this.fromChildGeometry = fromChildGeometry;
+    this.toChildGeometry = toChildGeometry;
+    this.ancestorId = ancestorId;
+    this.fromAncestorGeometry = fromAncestorGeometry;
+    this.toAncestorGeometry = toAncestorGeometry;
+  }
+  do() {
+    const childNode = this.canvas.model.nodes.get(this.childId);
+    const collabAction1 = new SetParentCollabAction(this.canvas, this.childId, this.toParentId, this.toChildGeometry, this.canvas.collabEngine.freshTimestamp());
+    this.canvas.collabEngine.doCollaboratively(collabAction1);
+    if (this.ancestorId !== undefined && this.toAncestorGeometry !== undefined) {
+      const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+      this.canvas.collabEngine.doCollaboratively(collabAction2);
+    }
+    return childNode !== undefined;
+  }
+  undo() {
+    const childNode = this.canvas.model.nodes.get(this.childId);
+    const collabAction1 = new SetParentCollabAction(this.canvas, this.childId, this.fromParentId, this.fromChildGeometry, this.canvas.collabEngine.freshTimestamp());
+    this.canvas.collabEngine.doCollaboratively(collabAction1);
+    if (this.ancestorId !== undefined && this.fromAncestorGeometry !== undefined) {
+      const collabAction2 = new SetGeometryCollabAction(this.canvas, this.ancestorId, this.fromAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
+      this.canvas.collabEngine.doCollaboratively(collabAction2);
+    }
+    return childNode !== undefined;
+  }
+  redo() {
+    return this.do();
+  }
+}
 /**
  * Action which consists of adding a connection.
  * @private
@@ -4405,21 +4942,97 @@ class PasteAction {
 }
 
 /**
- * Represents an action taken by the user on the diagram.
+ * Represents an action taken by the user on the diagram which doesn't have an impact on the diagram's model.
+ * Contrast with {@link DiagramAction} which does have an impact on the diagram's model.
  * @public
  */
 class DiagramEvent {
-  constructor(cause, type, target, coords) {
-    this.cause = cause;
+  constructor(type) {
     this.type = type;
-    this.target = target;
-    this.coords = coords;
     this.defaultPrevented = false;
   }
   preventDefault() {
     this.defaultPrevented = true;
   }
 }
+/**
+ * Diagram user events.
+ * @public
+ */
+var DiagramEvents;
+(function (DiagramEvents) {
+  DiagramEvents[DiagramEvents["DoubleClick"] = 0] = "DoubleClick";
+  DiagramEvents[DiagramEvents["SecondaryClick"] = 1] = "SecondaryClick";
+  DiagramEvents[DiagramEvents["Selection"] = 2] = "Selection";
+  DiagramEvents[DiagramEvents["Highlight"] = 3] = "Highlight";
+})(DiagramEvents || (DiagramEvents = {}));
+/**
+ * Diagram event which consists of the user performing a double click on the diagram.
+ */
+class DiagramDoubleClickEvent extends DiagramEvent {
+  /**
+   * Create a diagram double click event.
+   *
+   * @param cause Mouse event which triggered this event.
+   * @param target Diagram element which is targeted by the event, or null if no element was targeted (the diagram background was targeted).
+   * @param coords Optionally, coordinates of the point of the diagram where the event happened.
+   */
+  constructor(cause, target, coords) {
+    super(DiagramEvents.DoubleClick);
+    this.cause = cause;
+    this.target = target;
+    this.coords = coords;
+  }
+}
+/**
+ * Diagram event which consists of the user performing a secondary click on the diagram.
+ */
+class DiagramSecondaryClickEvent extends DiagramEvent {
+  /**
+   * Create a diagram secondary click event.
+   *
+   * @param cause Mouse event which triggered this event.
+   * @param target Diagram element which is targeted by the event, or null if no element was targeted (the diagram background was targeted).
+   * @param coords Optionally, coordinates of the point of the diagram where the event happened.
+   */
+  constructor(cause, target, coords) {
+    super(DiagramEvents.SecondaryClick);
+    this.cause = cause;
+    this.target = target;
+    this.coords = coords;
+  }
+}
+/**
+ * Diagram event which consists of the user either adding or removing one or several diagram elements from the user selection.
+ */
+class DiagramSelectionEvent extends DiagramEvent {
+  /**
+   * Create a diagram selection event.
+   *
+   * @param targets Diagram elements which are targeted by the event.
+   * @param selected `true` if the targets were selected, `false` if the targets were deselected.
+   */
+  constructor(targets, selected) {
+    super(DiagramEvents.Selection);
+    this.targets = targets;
+    this.selected = selected;
+  }
+}
+/**
+ * Diagram event which consists of the user highlighting a diagram element.
+ * If the target is `null`, that means that the previously highlighted element was unhighlighted.
+ */
+class DiagramHighlightedEvent extends DiagramEvent {
+  /**
+   * Create a diagram highlight event.
+   *
+   * @param target Diagram element which is targeted by the event.
+   */
+  constructor(target) {
+    super(DiagramEvents.Highlight);
+    this.target = target;
+  }
+}
 
 /**
  * A foreign object which is inserted with arbitrary html into a diagram.
@@ -4445,14 +5058,18 @@ class DiagramDecorator extends DiagramElement {
   }
   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(`foreignObject#${this.id}`);
+    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`foreignObject#${this.id}`);
   }
   get removed() {
     return this.selfRemoved || this.rootElement !== undefined && this.rootElement.removed;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateDecoratorsInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateDecoratorsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
   }
   /**
    * Change the coordinates of this decorator to the given coordinates.
@@ -4524,14 +5141,18 @@ class DiagramObject extends DiagramElement {
   }
   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(`foreignObject#${this.id}`);
+    return (_b = (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.selectCanvasView()) === null || _b === undefined ? undefined : _b.select(`foreignObject#${this.id}`);
   }
   get removed() {
     return this.selfRemoved;
   }
   updateInView() {
     var _a;
-    (_a = this.model.canvas) === null || _a === void 0 ? void 0 : _a.updateObjectsInView(this.id);
+    (_a = this.model.canvas) === null || _a === undefined ? undefined : _a.updateObjectsInView(this.id);
+  }
+  raise() {
+    var _a;
+    (_a = this.select()) === null || _a === undefined ? undefined : _a.raise();
   }
   /**
    * Change the coordinates of this object to the given coordinates.
@@ -4641,7 +5262,7 @@ class DiagramModel {
    */
   clear() {
     var _a, _b;
-    (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.cancelAllUserActions();
+    (_a = this.canvas) === null || _a === undefined ? undefined : _a.cancelAllUserActions();
     this.id = undefined;
     this.name = '';
     this.description = undefined;
@@ -4656,7 +5277,7 @@ class DiagramModel {
     this.objects.clear();
     this.decorators.clear();
     this.valueSet.resetValues();
-    (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.updateModelInView();
+    (_b = this.canvas) === null || _b === undefined ? undefined : _b.updateModelInView();
   }
 }
 
@@ -4785,7 +5406,7 @@ class DiagramContextMenu {
    */
   close() {
     var _a;
-    (_a = this.contextMenuContainer) === null || _a === void 0 ? void 0 : _a.remove();
+    (_a = this.contextMenuContainer) === null || _a === undefined ? undefined : _a.remove();
     this.contextMenuContainer = undefined;
   }
 }
@@ -4900,6 +5521,7 @@ class DagaExporter {
     }
     for (const node of model.nodes.all(true)) {
       if (!includeCollabMeta && node.removed) continue;
+      if (node.parent !== undefined) continue;
       result.nodes.push(this.exportNode(node, includeCollabMeta));
     }
     for (const connection of model.connections.all(true)) {
@@ -4910,6 +5532,10 @@ class DagaExporter {
   }
   exportNode(node, includeCollabMeta = false) {
     var _a, _b, _c, _d;
+    const children = [];
+    for (const child of node.children) {
+      children.push(this.exportNode(child, includeCollabMeta));
+    }
     const sections = [];
     for (const section of node.sections) {
       const ports = [];
@@ -4918,7 +5544,7 @@ class DagaExporter {
           id: port.id,
           coords: roundPoint(port.coords),
           direction: port.direction,
-          label: ((_a = port.label) === null || _a === void 0 ? void 0 : _a.text) || ''
+          label: ((_a = port.label) === null || _a === undefined ? undefined : _a.text) || ''
         }, includeCollabMeta ? {
           collabMeta: Object.assign({
             removed: port.removed,
@@ -4930,7 +5556,7 @@ class DagaExporter {
       sections.push(Object.assign({
         id: section.id,
         ports,
-        label: ((_b = section.label) === null || _b === void 0 ? void 0 : _b.text) || '',
+        label: ((_b = section.label) === null || _b === undefined ? undefined : _b.text) || '',
         indexXInNode: section.indexXInNode,
         indexYInNode: section.indexYInNode,
         coords: roundPoint(section.coords),
@@ -4950,7 +5576,7 @@ class DagaExporter {
         id: port.id,
         coords: roundPoint(port.coords),
         direction: port.direction,
-        label: ((_c = port.label) === null || _c === void 0 ? void 0 : _c.text) || ''
+        label: ((_c = port.label) === null || _c === undefined ? undefined : _c.text) || ''
       }, includeCollabMeta ? {
         collabMeta: Object.assign({
           removed: port.removed,
@@ -4962,9 +5588,10 @@ class DagaExporter {
     return Object.assign({
       id: node.id,
       type: node.type.id,
+      children,
       sections,
       ports,
-      label: ((_d = node.label) === null || _d === void 0 ? void 0 : _d.text) || '',
+      label: ((_d = node.label) === null || _d === undefined ? undefined : _d.text) || '',
       coords: roundPoint(node.coords),
       width: node.width,
       height: node.height,
@@ -4984,8 +5611,8 @@ class DagaExporter {
     return Object.assign({
       id: connection.id,
       type: connection.type.id,
-      start: ((_a = connection.start) === null || _a === void 0 ? void 0 : _a.id) || '',
-      end: ((_b = connection.end) === null || _b === void 0 ? void 0 : _b.id) || '',
+      start: ((_a = connection.start) === null || _a === undefined ? undefined : _a.id) || '',
+      end: ((_b = connection.end) === null || _b === undefined ? undefined : _b.id) || '',
       startLabel: connection.startLabel,
       middleLabel: connection.middleLabel,
       endLabel: connection.endLabel,
@@ -5205,11 +5832,11 @@ class DiagramUserSelection extends DiagramElementSet {
   openInPropertyEditor(selection) {
     var _a;
     this.makeUpdateValuesAction();
-    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === void 0 ? void 0 : _a.propertyEditor;
+    const propertyEditor = (_a = this.canvas.parentComponent) === null || _a === undefined ? undefined : _a.propertyEditor;
     if (propertyEditor === undefined) {
       return;
     }
-    const selectedValueSet = selection === null || selection === void 0 ? void 0 : selection.valueSet;
+    const selectedValueSet = selection === null || selection === undefined ? undefined : selection.valueSet;
     if (selectedValueSet) {
       this.propertyEditorSelection = selection;
       this.propertyEditorValues = structuredClone(selectedValueSet.getValues());
@@ -5251,11 +5878,11 @@ class DiagramUserSelection extends DiagramElementSet {
     const previousSelectionId = this.propertyEditorSelection instanceof DiagramModel ? undefined : this.propertyEditorSelection.id;
     // check if there have been changes in the previously selected ValueSet,
     // and create an UpdateValuesAction if there have
-    if (equals(this.propertyEditorValues, (_a = this.propertyEditorSelection) === null || _a === void 0 ? void 0 : _a.valueSet.getValues())) {
+    if (equals(this.propertyEditorValues, (_a = this.propertyEditorSelection) === null || _a === undefined ? undefined : _a.valueSet.getValues())) {
       return;
     }
     const from = this.propertyEditorValues;
-    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === void 0 ? void 0 : _b.valueSet.getValues());
+    const to = structuredClone((_b = this.propertyEditorSelection) === null || _b === undefined ? undefined : _b.valueSet.getValues());
     const [fromDiff, toDiff] = diff(from, to);
     const currentAction = new UpdateValuesAction(this.canvas, previousSelectionId, fromDiff, toDiff);
     currentAction.do();
@@ -5290,7 +5917,7 @@ class DiagramCanvas {
     var _a, _b;
     this._connectionType = value;
     // refresh the palette every time connectionType is set so that the palette keeps track of updates to the connectionType
-    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
+    (_b = (_a = this.parentComponent) === null || _a === undefined ? undefined : _a.palette) === null || _b === undefined ? undefined : _b.refreshPalette();
   }
   /**
    * Constructs a canvas object.
@@ -5308,27 +5935,25 @@ class DiagramCanvas {
     this.dragging = false;
     // used to track whether a click is secondary or primary
     this.secondaryButton = false;
-    this.viewInitialized$ = new Subject();
     this.validatorChange$ = new Subject();
     this.diagramChange$ = new Subject();
-    this.diagramImportantChange$ = new Subject();
-    this.propertyEditorChanges$ = new Subject();
     this.diagramEvent$ = new Subject();
+    this.propertyEditorChanges$ = new Subject();
     this.parentComponent = parentComponent;
     this.model = new DiagramModel(this, undefined, config.name || 'unnamed', '', config.type || '', config.properties || []);
     this.userSelection = new DiagramUserSelection(this);
     this.userHighlight = new DiagramUserHighlight(this);
     this.contextMenu = new DiagramContextMenu(this);
-    this.backgroundColor = ((_a = config.canvas) === null || _a === void 0 ? void 0 : _a.backgroundColor) || '#FFFFFF';
-    this.gridSize = ((_c = (_b = config.canvas) === null || _b === void 0 ? void 0 : _b.grid) === null || _c === void 0 ? void 0 : _c.enabled) === false || ((_d = config.canvas) === null || _d === void 0 ? void 0 : _d.grid) === undefined ? 0 : Math.abs(((_f = (_e = config.canvas) === null || _e === void 0 ? void 0 : _e.grid) === null || _f === void 0 ? void 0 : _f.spacing) || 10);
-    this.gridThickness = Math.abs(((_h = (_g = config.canvas) === null || _g === void 0 ? void 0 : _g.grid) === null || _h === void 0 ? void 0 : _h.thickness) || 0.05);
-    this.gridColor = ((_k = (_j = config.canvas) === null || _j === void 0 ? void 0 : _j.grid) === null || _k === void 0 ? void 0 : _k.color) || 'rgba(0, 0, 0, 0.1)';
-    this.snapToGrid = ((_m = (_l = config.canvas) === null || _l === void 0 ? void 0 : _l.grid) === null || _m === void 0 ? void 0 : _m.enabled) === false || ((_o = config.canvas) === null || _o === void 0 ? void 0 : _o.grid) === undefined ? false : ((_q = (_p = config.canvas) === null || _p === void 0 ? void 0 : _p.grid) === null || _q === void 0 ? void 0 : _q.snap) || false;
-    this.zoomFactor = ((_r = config.canvas) === null || _r === void 0 ? void 0 : _r.zoomFactor) || 2;
-    this.panRate = ((_s = config.canvas) === null || _s === void 0 ? void 0 : _s.panRate) || 100;
+    this.backgroundColor = ((_a = config.canvas) === null || _a === undefined ? undefined : _a.backgroundColor) || '#FFFFFF';
+    this.gridSize = ((_c = (_b = config.canvas) === null || _b === undefined ? undefined : _b.grid) === null || _c === undefined ? undefined : _c.enabled) === false || ((_d = config.canvas) === null || _d === undefined ? undefined : _d.grid) === undefined ? 0 : Math.abs(((_f = (_e = config.canvas) === null || _e === undefined ? undefined : _e.grid) === null || _f === undefined ? undefined : _f.spacing) || 10);
+    this.gridThickness = Math.abs(((_h = (_g = config.canvas) === null || _g === undefined ? undefined : _g.grid) === null || _h === undefined ? undefined : _h.thickness) || 0.05);
+    this.gridColor = ((_k = (_j = config.canvas) === null || _j === undefined ? undefined : _j.grid) === null || _k === undefined ? undefined : _k.color) || 'rgba(0, 0, 0, 0.1)';
+    this.snapToGrid = ((_m = (_l = config.canvas) === null || _l === undefined ? undefined : _l.grid) === null || _m === undefined ? undefined : _m.enabled) === false || ((_o = config.canvas) === null || _o === undefined ? undefined : _o.grid) === undefined ? false : ((_q = (_p = config.canvas) === null || _p === undefined ? undefined : _p.grid) === null || _q === undefined ? undefined : _q.snap) || false;
+    this.zoomFactor = ((_r = config.canvas) === null || _r === undefined ? undefined : _r.zoomFactor) || 2;
+    this.panRate = ((_s = config.canvas) === null || _s === undefined ? undefined : _s.panRate) || 100;
     this.inferConnectionType = config.inferConnectionType || false;
     this.multipleSelectionOn = false;
-    this.priorityThresholds = ((_t = config.canvas) === null || _t === void 0 ? void 0 : _t.priorityThresholds) || [];
+    this.priorityThresholds = ((_t = config.canvas) === null || _t === undefined ? undefined : _t.priorityThresholds) || [];
     this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : undefined;
     this.layoutFormat = config.layoutFormat;
     this.userActions = config.userActions || {};
@@ -5372,18 +5997,21 @@ class DiagramCanvas {
     for (const node of this.model.nodes) {
       this.fitNodeInView(node.id);
     }
-    (_b = (_a = this.parentComponent) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.refreshPalette();
+    (_b = (_a = this.parentComponent) === null || _a === undefined ? undefined : _a.palette) === null || _b === undefined ? undefined : _b.refreshPalette();
   }
   // View methods
   initView(appendTo) {
-    this.diagramRoot = d3.select(appendTo).append('div').node();
+    const appendToSelection = d3.select(appendTo);
+    // remove all children
+    appendToSelection.html('');
+    this.diagramRoot = appendToSelection.append('div').node();
     d3.select(this.diagramRoot).attr('tabindex', 0) // make element focusable
     .style('width', '100%').style('height', '100%').append('svg').style('width', '100%').style('height', '100%');
     d3.select(this.diagramRoot).on(Events.Click, () => {
       var _a;
       // focus on the diagram when clicking so that we can focus on the diagram
       // keyboard events only work if we're focusing on the diagram
-      (_a = d3.select(this.diagramRoot).node()) === null || _a === void 0 ? void 0 : _a.focus();
+      (_a = d3.select(this.diagramRoot).node()) === null || _a === undefined ? undefined : _a.focus();
     }).on(Events.ContextMenu, event => {
       if (this.dragging) {
         event.preventDefault();
@@ -5391,14 +6019,14 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, undefined);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, null);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         this.contextMenu.open(event);
       }
     }).on(Events.DoubleClick, event => {
-      const diagramEvent = new DiagramEvent(event, Events.DoubleClick, undefined);
+      const diagramEvent = new DiagramDoubleClickEvent(event, null);
       this.diagramEvent$.next(diagramEvent);
     }).on(Events.KeyDown, event => {
       if (!event.ctrlKey && (event.key === Keys.Delete || event.key === Keys.Backspace) && this.canUserPerformAction(DiagramActions.Remove)) {
@@ -5414,15 +6042,34 @@ class DiagramCanvas {
         for (const connection of this.model.connections) {
           this.userSelection.add(connection);
         }
+        this.diagramEvent$.next(new DiagramSelectionEvent(this.userSelection.all(), true));
       }
       if (event.ctrlKey && event.key === 'i') {
         event.preventDefault();
         // invert selection
+        const selectedElements = [];
+        const deselectedElements = [];
         for (const node of this.model.nodes) {
           this.userSelection.toggle(node);
+          if (node.selected) {
+            selectedElements.push(node);
+          } else {
+            deselectedElements.push(node);
+          }
         }
         for (const connection of this.model.connections) {
           this.userSelection.toggle(connection);
+          if (connection.selected) {
+            selectedElements.push(connection);
+          } else {
+            deselectedElements.push(connection);
+          }
+        }
+        if (selectedElements.length > 0) {
+          this.diagramEvent$.next(new DiagramSelectionEvent(selectedElements, true));
+        }
+        if (deselectedElements.length > 0) {
+          this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
         }
       }
       if (event.ctrlKey && event.key === 'c') {
@@ -5467,12 +6114,12 @@ class DiagramCanvas {
       if (event.key === Keys.ArrowLeft) {
         event.preventDefault();
         // move left, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(-this.panRate / this.zoomTransform.k, 0);
+        this.translateBy(this.panRate / this.zoomTransform.k, 0);
       }
       if (event.key === Keys.ArrowRight) {
         event.preventDefault();
         // move right, faster if we're zoomed out and slower if we're zoomed in
-        this.translateBy(this.panRate / this.zoomTransform.k, 0);
+        this.translateBy(-this.panRate / this.zoomTransform.k, 0);
       }
       if (event.key === Keys.ArrowDown) {
         event.preventDefault();
@@ -5492,12 +6139,22 @@ class DiagramCanvas {
         this.unfinishedConnection.endCoords = pointerCoords;
       }
     }).on(Events.MouseOver, () => {
-      this.userHighlight.clear();
+      if (this.userHighlight.size() > 0) {
+        this.userHighlight.clear();
+        this.diagramEvent$.next(new DiagramHighlightedEvent(null));
+      }
     }).on(Events.Click, () => {
-      this.userHighlight.clear();
+      if (this.userHighlight.size() > 0) {
+        this.userHighlight.clear();
+        this.diagramEvent$.next(new DiagramHighlightedEvent(null));
+      }
       this.contextMenu.close();
-      this.userSelection.clear();
-      this.userSelection.openInPropertyEditor(this.model);
+      if (this.userSelection.size() > 0) {
+        const deselectedElements = this.userSelection.all();
+        this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
+        this.userSelection.openInPropertyEditor(this.model);
+      }
     }).call(d3.drag().filter(event => {
       return this.multipleSelectionOn || isSecondaryButton(event);
     }).on(DragEvents.Start, event => {
@@ -5539,15 +6196,7 @@ class DiagramCanvas {
       canvasBackgroundPattern.append('circle').attr('cx', this.gridSize / 2).attr('cy', this.gridSize / 2).attr('r', this.gridSize * this.gridThickness).attr('fill', this.gridColor);
       canvasBackground.attr('fill', `url(#${this.backgroundPatternId})`);
     }
-    const canvasElements = canvasView.append('g').attr('class', 'daga-canvas-elements');
-    canvasElements.append('g').attr('class', 'daga-canvas-nodes');
-    canvasElements.append('g').attr('class', 'daga-canvas-sections');
-    canvasElements.append('g').attr('class', 'daga-canvas-ports');
-    canvasElements.append('g').attr('class', 'daga-canvas-connections');
-    canvasElements.append('g').attr('class', 'daga-canvas-fields');
-    canvasElements.append('g').attr('class', 'daga-canvas-objects');
-    canvasElements.append('g').attr('class', 'daga-canvas-decorators');
-    this.viewInitialized$.next();
+    canvasView.append('g').attr('class', 'daga-canvas-elements');
   }
   zoomBy(factor) {
     if (!isNaN(factor)) {
@@ -5604,8 +6253,8 @@ class DiagramCanvas {
   }
   getCoordinatesOnScreen() {
     var _a;
-    const rootBoundingClientRect = (_a = this.selectRoot().node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-    const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === void 0 ? void 0 : rootBoundingClientRect.height) || 0];
+    const rootBoundingClientRect = (_a = this.selectRoot().node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
+    const rootDimensions = [(rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.width) || 0, (rootBoundingClientRect === null || rootBoundingClientRect === undefined ? undefined : rootBoundingClientRect.height) || 0];
     return [[-this.zoomTransform.x / this.zoomTransform.k, -this.zoomTransform.y / this.zoomTransform.k], [(rootDimensions[0] - this.zoomTransform.x) / this.zoomTransform.k, (rootDimensions[1] - this.zoomTransform.y) / this.zoomTransform.k]];
   }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -5647,7 +6296,7 @@ class DiagramCanvas {
     this.updateDecoratorsInView();
   }
   updateNodesInView(...ids) {
-    let updateSelection = this.selectCanvasNodes().selectAll('g.diagram-node').data(this.model.nodes.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    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${d.type.resizableX ? ' resizable-x' : ''}${d.type.resizableY ? ' resizable-y' : ''} ${d.type.look.lookType}`);
     if (ids && ids.length > 0) {
@@ -5658,12 +6307,16 @@ class DiagramCanvas {
     enterSelection.on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
         this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
     }).on(Events.Click, (event, d) => {
       if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
       }
       this.userSelection.toggle(d);
+      this.diagramEvent$.next(new DiagramSelectionEvent([d], d.selected));
     }).on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
@@ -5671,16 +6324,18 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+      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 DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -5870,11 +6525,11 @@ class DiagramCanvas {
     mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updateSectionsInView(...ids) {
-    let updateSelection = this.selectCanvasSections().selectAll('g.diagram-section').data(this.model.sections.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    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, _b, _c, _d, _e, _f;
-      return `diagram-section${((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.resizableY) ? ' resizable-y' : ''} ${(_f = (_e = d.getConfig()) === null || _e === void 0 ? void 0 : _e.look) === null || _f === void 0 ? void 0 : _f.lookType}`;
+      return `diagram-section${((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) ? ' resizable-x' : ''}${((_d = (_c = d.node) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.resizableY) ? ' resizable-y' : ''} ${(_f = (_e = d.getConfig()) === null || _e === undefined ? undefined : _e.look) === null || _f === undefined ? undefined : _f.lookType}`;
     });
     if (ids && ids.length > 0) {
       updateSelection = updateSelection.filter(d => ids.includes(d.id));
@@ -5884,12 +6539,17 @@ class DiagramCanvas {
     enterSelection.on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
         this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
     }).on(Events.Click, (event, d) => {
       if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
       }
-      this.userSelection.toggle(getRelatedNodeOrItself(d));
+      const elementToBeToggled = getRelatedNodeOrItself(d);
+      this.userSelection.toggle(elementToBeToggled);
+      this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
     }).on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
@@ -5897,17 +6557,19 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         const elementToSelect = getRelatedNodeOrItself(d);
         this.userHighlight.focusOn(elementToSelect);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(elementToSelect));
         this.userSelection.add(elementToSelect);
+        this.diagramEvent$.next(new DiagramSelectionEvent([elementToSelect], true));
         this.contextMenu.open(event);
       }
     }).on(Events.DoubleClick, (event, d) => {
-      const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -5916,7 +6578,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.startMultipleSelection(event);
       } else {
-        const node = d === null || d === void 0 ? void 0 : d.node;
+        const node = d === null || d === undefined ? undefined : d.node;
         if (node) {
           this.startMovingNode(event, node);
         } else {
@@ -5927,7 +6589,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.continueMultipleSelection(event);
       } else {
-        const node = d === null || d === void 0 ? void 0 : d.node;
+        const node = d === null || d === undefined ? undefined : d.node;
         if (node) {
           this.continueMovingNode(event, node);
         } else {
@@ -5938,7 +6600,7 @@ class DiagramCanvas {
       if (this.multipleSelectionOn || this.secondaryButton) {
         this.finishMultipleSelection(event);
       } else {
-        const node = d === null || d === void 0 ? void 0 : d.node;
+        const node = d === null || d === undefined ? undefined : d.node;
         if (node) {
           this.finishMovingNode(event, node);
         } else {
@@ -5960,17 +6622,17 @@ class DiagramCanvas {
     enterSelection.filter('.stretchable-image-look').append('image').attr('class', 'bottom-right-image').attr('preserveAspectRatio', 'none');
     enterSelection.filter('.resizable-x').append('line').attr('class', 'left-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -5978,13 +6640,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Left, d.coords[0] - pointerCoords[0], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -5999,17 +6661,17 @@ class DiagramCanvas {
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'top-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -6017,13 +6679,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         d.node.stretchSections(Side.Top, d.coords[1] - pointerCoords[1], d.indexXInNode, d.indexYInNode);
       }
     }).on(DragEvents.End, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -6038,17 +6700,17 @@ class DiagramCanvas {
     }));
     enterSelection.filter('.resizable-x').append('line').attr('class', 'right-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         setCursorStyle(CursorStyle.EWResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -6056,13 +6718,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed) {
         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) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableX) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -6077,17 +6739,17 @@ class DiagramCanvas {
     }));
     enterSelection.filter('.resizable-y').append('line').attr('class', 'bottom-resizer').attr('stroke', 'transparent').attr('stroke-width', `${RESIZER_THICKNESS}px`).on(Events.MouseOver, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
       }
     }).on(Events.MouseOut, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         setCursorStyle();
       }
     }).call(d3.drag().on(DragEvents.Start, (_event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         setCursorStyle(CursorStyle.NSResize);
         this.currentAction = new SetGeometryAction(this, DiagramActions.StretchSection, d.node.id, d.node.getGeometry(), d.node.getGeometry());
       } else {
@@ -6095,13 +6757,13 @@ class DiagramCanvas {
       }
     }).on(DragEvents.Drag, (event, d) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed) {
         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) => {
       var _a, _b;
-      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
+      if (this.canUserPerformAction(DiagramActions.StretchSection) && ((_b = (_a = d.node) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.resizableY) && !d.removed && this.currentAction instanceof SetGeometryAction && this.currentAction.intent === DiagramActions.StretchSection) {
         let pointerCoords = this.getPointerLocationRelativeToCanvas(event);
         if (this.snapToGrid) {
           pointerCoords = this.getClosestGridPoint(pointerCoords);
@@ -6117,143 +6779,143 @@ class DiagramCanvas {
     mergeSelection.attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1);
     mergeSelection.filter('.shaped-look').select('path').attr('d', d => {
       var _a;
-      return generalClosedPath(((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).shape, 0, 0, d.width, d.height);
+      return generalClosedPath(((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).shape, 0, 0, d.width, d.height);
     }).attr('fill', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedFillColor : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).fillColor;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedFillColor : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).fillColor;
     }).attr('stroke', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBorderColor : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).borderColor;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBorderColor : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).borderColor;
     }).attr('stroke-width', d => `${d.highlighted ? 3 : 1}px`);
     mergeSelection.filter('.image-look').select('image').attr('x', 0).attr('y', 0).attr('width', d => d.width).attr('height', d => d.height).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImage : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImage;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImage : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImage;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.top-left-image').attr('x', 0).attr('y', 0).attr('width', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).leftMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
     }).attr('height', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).topMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageTopLeft : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageTopLeft;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageTopLeft : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageTopLeft;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.top-image').attr('x', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).leftMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
     }).attr('y', 0).attr('width', d => {
       var _a, _b;
-      return d.width - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).leftMargin;
+      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).leftMargin;
     }).attr('height', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).topMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageTop : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageTop;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageTop : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageTop;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.top-right-image').attr('x', d => {
       var _a;
-      return d.width - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin;
+      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
     }).attr('y', 0).attr('width', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
     }).attr('height', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).topMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageTopRight : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageTopRight;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageTopRight : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageTopRight;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.left-image').attr('x', 0).attr('y', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).topMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
     }).attr('width', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).leftMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
     }).attr('height', d => {
       var _a, _b;
-      return d.height - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).topMargin;
+      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).topMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageLeft : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageLeft;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageLeft : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageLeft;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.center-image').attr('x', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).leftMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
     }).attr('y', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).topMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
     }).attr('width', d => {
       var _a, _b;
-      return d.width - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).leftMargin;
+      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).leftMargin;
     }).attr('height', d => {
       var _a, _b;
-      return d.height - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).topMargin;
+      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).topMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageCenter : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageCenter;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageCenter : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageCenter;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.right-image').attr('x', d => {
       var _a;
-      return d.width - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin;
+      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
     }).attr('y', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).topMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).topMargin;
     }).attr('width', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
     }).attr('height', d => {
       var _a, _b;
-      return d.height - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).topMargin;
+      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).topMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageRight : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageRight;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageRight : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageRight;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.bottom-left-image').attr('x', 0).attr('y', d => {
       var _a;
-      return d.height - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin;
+      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
     }).attr('width', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).leftMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
     }).attr('height', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageBottomLeft : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageBottomLeft;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageBottomLeft : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageBottomLeft;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.bottom-image').attr('x', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).leftMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).leftMargin;
     }).attr('y', d => {
       var _a;
-      return d.height - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin;
+      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
     }).attr('width', d => {
       var _a, _b;
-      return d.width - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).leftMargin;
+      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin - ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).leftMargin;
     }).attr('height', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageBottom : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageBottom;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageBottom : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageBottom;
     });
     mergeSelection.filter('.stretchable-image-look').select('image.bottom-right-image').attr('x', d => {
       var _a;
-      return d.width - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin;
+      return d.width - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
     }).attr('y', d => {
       var _a;
-      return d.height - ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin;
+      return d.height - ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
     }).attr('width', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).rightMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).rightMargin;
     }).attr('height', d => {
       var _a;
-      return ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).bottomMargin;
+      return ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).bottomMargin;
     }).attr('href', d => {
       var _a, _b;
-      return d.selected ? ((_a = d.getConfig()) === null || _a === void 0 ? void 0 : _a.look).selectedBackgroundImageBottomRight : ((_b = d.getConfig()) === null || _b === void 0 ? void 0 : _b.look).backgroundImageBottomRight;
+      return d.selected ? ((_a = d.getConfig()) === null || _a === undefined ? undefined : _a.look).selectedBackgroundImageBottomRight : ((_b = d.getConfig()) === null || _b === undefined ? undefined : _b.look).backgroundImageBottomRight;
     });
     mergeSelection.filter('.resizable-x').select('line.left-resizer').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').attr('x1', 0).attr('x2', d => d.width).attr('y1', RESIZER_THICKNESS / 2).attr('y2', RESIZER_THICKNESS / 2);
@@ -6261,7 +6923,7 @@ class DiagramCanvas {
     mergeSelection.filter('.resizable-y').select('line.bottom-resizer').attr('x1', 0).attr('x2', d => d.width).attr('y1', d => d.height - RESIZER_THICKNESS / 2).attr('y2', d => d.height - RESIZER_THICKNESS / 2);
   }
   updatePortsInView(...ids) {
-    let updateSelection = this.selectCanvasPorts().selectAll('g.diagram-port').data(this.model.ports.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    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);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-port');
     if (ids && ids.length > 0) {
@@ -6274,9 +6936,10 @@ class DiagramCanvas {
       if (!this.unfinishedConnection && !this.dragging) {
         // if there is an unfinished connection, the port will be highlighted automatically if the pointer is close
         this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
       if (this.unfinishedConnection) {
-        const canConnectionFinishAtThisPort = this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === void 0 ? void 0 : _a.getNode()) === null || _b === void 0 ? void 0 : _b.type) === null || _c === void 0 ? void 0 : _c.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_e = (_d = d.getNode()) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.id) || '') || this.unfinishedConnection.type.canStartFromType(((_g = (_f = d.getNode()) === null || _f === void 0 ? void 0 : _f.type) === null || _g === void 0 ? void 0 : _g.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_k = (_j = (_h = this.unfinishedConnection.start) === null || _h === void 0 ? void 0 : _h.getNode()) === null || _j === void 0 ? void 0 : _j.type) === null || _k === void 0 ? void 0 : _k.id) || '');
+        const canConnectionFinishAtThisPort = this.unfinishedConnection.type.canStartFromType(((_c = (_b = (_a = this.unfinishedConnection.start) === null || _a === undefined ? undefined : _a.getNode()) === null || _b === undefined ? undefined : _b.type) === null || _c === undefined ? undefined : _c.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_e = (_d = d.getNode()) === null || _d === undefined ? undefined : _d.type) === null || _e === undefined ? undefined : _e.id) || '') || this.unfinishedConnection.type.canStartFromType(((_g = (_f = d.getNode()) === null || _f === undefined ? undefined : _f.type) === null || _g === undefined ? undefined : _g.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_k = (_j = (_h = this.unfinishedConnection.start) === null || _h === undefined ? undefined : _h.getNode()) === null || _j === undefined ? undefined : _j.type) === null || _k === undefined ? undefined : _k.id) || '');
         if (!canConnectionFinishAtThisPort) {
           setCursorStyle(CursorStyle.NoDrop);
         }
@@ -6287,9 +6950,13 @@ class DiagramCanvas {
       }
     }).on(Events.Click, (event, d) => {
       if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
       }
-      this.userSelection.toggle(getRelatedNodeOrItself(d));
+      const elementToBeToggled = getRelatedNodeOrItself(d);
+      this.userSelection.toggle(elementToBeToggled);
+      this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
     }).on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
@@ -6297,17 +6964,19 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         const elementToSelect = getRelatedNodeOrItself(d);
         this.userHighlight.focusOn(elementToSelect);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(elementToSelect));
         this.userSelection.add(elementToSelect);
+        this.diagramEvent$.next(new DiagramSelectionEvent([elementToSelect], true));
         this.contextMenu.open(event);
       }
     }).on(Events.DoubleClick, (event, d) => {
-      const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -6335,8 +7004,8 @@ class DiagramCanvas {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
           if (this.unfinishedConnection !== undefined) {
             const endCoords = [event.x, event.y];
-            (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.attr('d', getConnectionPath(this.unfinishedConnection.type.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.type.width, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === void 0 ? void 0 : _b.markerWidth, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === void 0 ? void 0 : _c.markerWidth));
-            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === void 0 ? void 0 : _d.node();
+            (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _a.attr('d', getConnectionPath(this.unfinishedConnection.type.shape, this.unfinishedConnection.startCoords, endCoords, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.type.width, (_b = this.unfinishedConnection.startMarkerLook) === null || _b === undefined ? undefined : _b.markerWidth, (_c = this.unfinishedConnection.endMarkerLook) === null || _c === undefined ? undefined : _c.markerWidth));
+            const unfinishedConnectionGhostNode = (_d = this.unfinishedConnectionTracer) === null || _d === undefined ? undefined : _d.node();
             if (unfinishedConnectionGhostNode) {
               let margin = 2;
               const unfinishedConnectionTotalLength = unfinishedConnectionGhostNode.getTotalLength();
@@ -6377,7 +7046,7 @@ class DiagramCanvas {
         this.finishMultipleSelection(event);
       } else {
         if (this.canUserPerformAction(DiagramActions.AddConnection) && !d.removed) {
-          (_a = this.unfinishedConnectionTracer) === null || _a === void 0 ? void 0 : _a.remove();
+          (_a = this.unfinishedConnectionTracer) === null || _a === undefined ? undefined : _a.remove();
           const userHighlight = this.userHighlight.getFocus();
           if (userHighlight instanceof DiagramPort) {
             this.finishConnection(userHighlight);
@@ -6415,7 +7084,7 @@ class DiagramCanvas {
     if (this.unfinishedConnection) {
       connectionList.push(this.unfinishedConnection);
     }
-    let updateSelection = this.selectCanvasConnections().selectAll('g.diagram-connection').data(connectionList, d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('g.diagram-connection').data(connectionList, d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('g').attr('id', d => d.id).attr('class', 'diagram-connection');
     if (ids && ids.length > 0) {
@@ -6426,12 +7095,16 @@ class DiagramCanvas {
     enterSelection.on(Events.MouseOver, (_event, d) => {
       if (d.end !== undefined && !this.dragging) {
         this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
     }).on(Events.Click, (event, d) => {
       if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
       }
       this.userSelection.toggle(d);
+      this.diagramEvent$.next(new DiagramSelectionEvent([d], d.selected));
     }).on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
@@ -6439,16 +7112,18 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+      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 DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -6475,11 +7150,11 @@ class DiagramCanvas {
     enterSelection.select('g.diagram-connection-end-label').append('text').style('user-select', 'none');
     mergeSelection.attr('opacity', d => d.removed ? 0.5 : 1).select('path.diagram-connection-path').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.markerWidth, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.markerWidth);
+      return getConnectionPath(d.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.markerWidth, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.markerWidth);
     }).attr('marker-start', d => `url(#${d.id}-start-marker)`).attr('marker-end', d => `url(#${d.id}-end-marker)`).attr('stroke', d => d.selected ? d.type.selectedColor : d.type.color).attr('stroke-width', d => `${d.highlighted ? d.type.width + 1 : d.type.width}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.type.style, d.type.width)).attr('fill', 'none');
     mergeSelection.select('path.diagram-connection-path-box').attr('d', d => {
       var _a, _b;
-      return getConnectionPath(d.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, (_a = d.startMarkerLook) === null || _a === void 0 ? void 0 : _a.markerWidth, (_b = d.endMarkerLook) === null || _b === void 0 ? void 0 : _b.markerWidth);
+      return getConnectionPath(d.type.shape, d.startCoords, d.endCoords, d.startDirection, d.endDirection, d.type.width, (_a = d.startMarkerLook) === null || _a === undefined ? undefined : _a.markerWidth, (_b = d.endMarkerLook) === null || _b === undefined ? undefined : _b.markerWidth);
     }).attr('stroke', 'transparent')
     // allow generating pointer events even when it is transparent
     .attr('pointer-events', 'stroke').attr('stroke-width', d => `${d.type.width + CONNECTION_PATH_BOX_THICKNESS}px`).attr('stroke-dasharray', d => lineStyleDasharray(d.type.style, d.type.width)).attr('fill', 'none');
@@ -6489,7 +7164,7 @@ class DiagramCanvas {
     });
   }
   updateFieldsInView(...ids) {
-    let updateSelection = this.selectCanvasFields().selectAll('foreignObject.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-field').data(this.model.fields.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-field');
     if (ids && ids.length > 0) {
@@ -6500,12 +7175,17 @@ class DiagramCanvas {
     enterSelection.style('box-sizing', 'border-box').on(Events.MouseOver, (_event, d) => {
       if (!this.dragging) {
         this.userHighlight.focusOn(d);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(d));
       }
     }).on(Events.Click, (event, d) => {
       if (!event.ctrlKey && !event.shiftKey) {
+        const deselectedElements = this.userSelection.all();
         this.userSelection.clear();
+        this.diagramEvent$.next(new DiagramSelectionEvent(deselectedElements, false));
       }
-      this.userSelection.toggle(getRelatedNodeOrItself(d));
+      const elementToBeToggled = getRelatedNodeOrItself(d);
+      this.userSelection.toggle(elementToBeToggled);
+      this.diagramEvent$.next(new DiagramSelectionEvent([elementToBeToggled], elementToBeToggled.selected));
     }).on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
@@ -6513,17 +7193,19 @@ class DiagramCanvas {
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, d);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         const elementToSelect = getRelatedNodeOrItself(d);
         this.userHighlight.focusOn(elementToSelect);
+        this.diagramEvent$.next(new DiagramHighlightedEvent(elementToSelect));
         this.userSelection.add(elementToSelect);
+        this.diagramEvent$.next(new DiagramSelectionEvent([elementToSelect], true));
         this.contextMenu.open(event);
       }
     }).on(Events.DoubleClick, (event, d) => {
-      const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.EditField) && d.editable && !d.removed) {
         this.currentAction = new EditFieldAction(this, d.id, d.text, '');
@@ -6595,7 +7277,7 @@ class DiagramCanvas {
     mergeSelection.attr('x', 0).attr('y', 0).attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).attr('opacity', d => d.removed ? 0.5 : 1).select('div').style('justify-content', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'flex-end' : 'flex-start').style('align-items', d => d.verticalAlign === VerticalAlign.Center ? 'center' : d.verticalAlign === VerticalAlign.Bottom ? 'end' : 'start').select('p').style('max-width', d => d.fit ? 'default' : '100%').style('max-height', d => d.fit ? 'default' : '100%').style('overflow', d => d.fit ? 'default' : 'hidden').style('text-overflow', d => d.fit ? 'default' : 'ellipsis').style('text-align', d => d.horizontalAlign === HorizontalAlign.Center ? 'center' : d.horizontalAlign === HorizontalAlign.Right ? 'end' : 'start').style('font-size', d => `${d.fontSize}px`).style('font-family', d => d.fontFamily || "'Wonder Unit Sans', sans-serif").style('font-weight', d => d.highlighted ? 600 : 400).style('color', d => d.selected ? d.selectedColor || '#000000' : d.color || '#000000').html(d => d.text.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>'));
   }
   updateObjectsInView(...ids) {
-    let updateSelection = this.selectCanvasObjects().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-object').data(this.model.objects.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-object');
     if (ids && ids.length > 0) {
@@ -6604,21 +7286,21 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
-    enterSelection.on(Events.ContextMenu, event => {
+    enterSelection.on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
         event.stopPropagation();
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, undefined);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         this.contextMenu.open(event);
       }
     }).on(Events.DoubleClick, (event, d) => {
-      const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -6632,7 +7314,7 @@ class DiagramCanvas {
     }));
   }
   updateDecoratorsInView(...ids) {
-    let updateSelection = this.selectCanvasDecorators().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
+    let updateSelection = this.selectCanvasElements().selectAll('foreignObject.diagram-decorator').data(this.model.decorators.filter(e => this.priorityThreshold !== undefined ? e.getPriority() >= this.priorityThreshold : true), d => d.id);
     const exitSelection = updateSelection.exit();
     const enterSelection = updateSelection.enter().append('foreignObject').attr('id', d => d.id).attr('class', 'diagram-decorator');
     if (ids && ids.length > 0) {
@@ -6641,21 +7323,21 @@ class DiagramCanvas {
     const mergeSelection = enterSelection.merge(updateSelection);
     mergeSelection.attr('width', d => `${d.width}px`).attr('height', d => `${d.height}px`).attr('transform', d => `translate(${d.coords[0]},${d.coords[1]})`).html(d => d.html);
     exitSelection.remove();
-    enterSelection.on(Events.ContextMenu, event => {
+    enterSelection.on(Events.ContextMenu, (event, d) => {
       if (this.dragging) {
         event.preventDefault();
         event.stopPropagation();
         this.dragging = false;
         return;
       }
-      const diagramEvent = new DiagramEvent(event, Events.ContextMenu, undefined);
+      const diagramEvent = new DiagramSecondaryClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
       if (!diagramEvent.defaultPrevented && this.canUserPerformAction(DiagramActions.ContextMenu)) {
         event.preventDefault();
         this.contextMenu.open(event);
       }
     }).on(Events.DoubleClick, (event, d) => {
-      const diagramEvent = new DiagramEvent(event, Events.DoubleClick, d);
+      const diagramEvent = new DiagramDoubleClickEvent(event, d);
       this.diagramEvent$.next(diagramEvent);
     }).call(d3.drag().filter(event => {
       this.secondaryButton = isSecondaryButton(event);
@@ -6678,33 +7360,33 @@ class DiagramCanvas {
       const pathLength = pathNode.getTotalLength();
       // bind start labels
       connectionSelection.select('g.diagram-connection-start-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.startLabel);
-      const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+      const startLabelBoundingRect = (_a = connectionSelection.select('g.diagram-connection-start-label text').node()) === null || _a === undefined ? undefined : _a.getBoundingClientRect();
       if (startLabelBoundingRect) {
         // don't create space for the label if the label is empty
-        const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding(labelConfiguration) + getRightPadding(labelConfiguration);
-        const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding(labelConfiguration) + getBottomPadding(labelConfiguration);
+        const boundingWidth = !connection.startLabel ? 0 : startLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+        const boundingHeight = !connection.startLabel ? 0 : startLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathStartLabelPoint = pathNode.getPointAtLength(Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
         connectionSelection.select('g.diagram-connection-start-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.selected ? connection.type.selectedColor : connection.type.color).attr('stroke', 'none');
         connectionSelection.select('g.diagram-connection-start-label').attr('transform', `translate(${pathStartLabelPoint.x},${pathStartLabelPoint.y})`);
       }
       // bind middle labels
       connectionSelection.select('g.diagram-connection-middle-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.middleLabel);
-      const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+      const middleLabelBoundingRect = (_b = connectionSelection.select('g.diagram-connection-middle-label text').node()) === null || _b === undefined ? undefined : _b.getBoundingClientRect();
       if (middleLabelBoundingRect) {
         // don't create space for the label if the label is empty
-        const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding(labelConfiguration) + getRightPadding(labelConfiguration);
-        const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / this.zoomTransform.k + getTopPadding(labelConfiguration) + getBottomPadding(labelConfiguration);
+        const boundingWidth = !connection.middleLabel ? 0 : middleLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+        const boundingHeight = !connection.middleLabel ? 0 : middleLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathMiddleLabelPoint = pathNode.getPointAtLength(pathLength / 2);
         connectionSelection.select('g.diagram-connection-middle-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.selected ? connection.type.selectedColor : connection.type.color).attr('stroke', 'none');
         connectionSelection.select('g.diagram-connection-middle-label').attr('transform', `translate(${pathMiddleLabelPoint.x},${pathMiddleLabelPoint.y})`);
       }
       // bind end labels
       connectionSelection.select('g.diagram-connection-end-label text').attr('x', 0).attr('y', labelConfiguration.fontSize / 3).attr('text-anchor', 'middle').attr('font-family', labelConfiguration.fontFamily).attr('font-size', labelConfiguration.fontSize).attr('fill', connection.selected ? labelConfiguration.selectedColor : labelConfiguration.color).style('font-kerning', 'none').text(connection.endLabel);
-      const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+      const endLabelBoundingRect = (_c = connectionSelection.select('g.diagram-connection-end-label text').node()) === null || _c === undefined ? undefined : _c.getBoundingClientRect();
       if (endLabelBoundingRect) {
         // don't create space for the label if the label is empty
-        const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding(labelConfiguration) + getRightPadding(labelConfiguration);
-        const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding(labelConfiguration) + getBottomPadding(labelConfiguration);
+        const boundingWidth = !connection.endLabel ? 0 : endLabelBoundingRect.width / this.zoomTransform.k + getLeftPadding$1(labelConfiguration) + getRightPadding$1(labelConfiguration);
+        const boundingHeight = !connection.endLabel ? 0 : endLabelBoundingRect.height / this.zoomTransform.k + getTopPadding$1(labelConfiguration) + getBottomPadding$1(labelConfiguration);
         const pathEndLabelPoint = pathNode.getPointAtLength(pathLength - Math.max(getLeftMargin(labelConfiguration) + boundingWidth / 2, getRightMargin(labelConfiguration) + boundingWidth / 2, getTopMargin(labelConfiguration) + boundingHeight / 2, getBottomMargin(labelConfiguration) + boundingHeight / 2));
         connectionSelection.select('g.diagram-connection-end-label path').attr('d', pillPath(-boundingWidth / 2, -boundingHeight / 2, boundingWidth, boundingHeight)).attr('fill', connection.selected ? connection.type.selectedColor : connection.type.color).attr('stroke', 'none');
         connectionSelection.select('g.diagram-connection-end-label').attr('transform', `translate(${pathEndLabelPoint.x},${pathEndLabelPoint.y})`);
@@ -6754,7 +7436,7 @@ class DiagramCanvas {
       const fieldDimensions = this.minimumSizeOfField(field);
       let minimumFieldWidth = fieldDimensions[0];
       let minimumFieldHeight = fieldDimensions[1];
-      for (const section of ((_a = field.rootElement.node) === null || _a === void 0 ? void 0 : _a.sections) || []) {
+      for (const section of ((_a = field.rootElement.node) === null || _a === undefined ? undefined : _a.sections) || []) {
         if (section.label) {
           if (section.indexXInNode === field.rootElement.indexXInNode && section.indexYInNode !== field.rootElement.indexYInNode) {
             minimumFieldWidth = Math.max(minimumFieldWidth, this.minimumSizeOfField(section.label)[0]);
@@ -6769,8 +7451,8 @@ class DiagramCanvas {
       if (fieldDimensions[1] < minimumFieldHeight) {
         fieldDimensions[1] = minimumFieldHeight;
       }
-      let stretchX = fieldDimensions[0] + getLeftMargin((_c = (_b = field.rootElement) === null || _b === void 0 ? void 0 : _b.getConfig()) === null || _c === void 0 ? void 0 : _c.label) + getRightMargin((_e = (_d = field.rootElement) === null || _d === void 0 ? void 0 : _d.getConfig()) === null || _e === void 0 ? void 0 : _e.label) - field.rootElement.width;
-      let stretchY = fieldDimensions[1] + getTopMargin((_g = (_f = field.rootElement) === null || _f === void 0 ? void 0 : _f.getConfig()) === null || _g === void 0 ? void 0 : _g.label) + getBottomMargin((_j = (_h = field.rootElement) === null || _h === void 0 ? void 0 : _h.getConfig()) === null || _j === void 0 ? void 0 : _j.label) - field.rootElement.height;
+      let stretchX = fieldDimensions[0] + getLeftMargin((_c = (_b = field.rootElement) === null || _b === undefined ? undefined : _b.getConfig()) === null || _c === undefined ? undefined : _c.label) + getRightMargin((_e = (_d = field.rootElement) === null || _d === undefined ? undefined : _d.getConfig()) === null || _e === undefined ? undefined : _e.label) - field.rootElement.width;
+      let stretchY = fieldDimensions[1] + getTopMargin((_g = (_f = field.rootElement) === null || _f === undefined ? undefined : _f.getConfig()) === null || _g === undefined ? undefined : _g.label) + getBottomMargin((_j = (_h = field.rootElement) === null || _h === undefined ? undefined : _h.getConfig()) === null || _j === undefined ? undefined : _j.label) - field.rootElement.height;
       if (this.snapToGrid) {
         stretchX = Math.ceil(stretchX / this.gridSize) * this.gridSize;
         stretchY = Math.ceil(stretchY / this.gridSize) * this.gridSize;
@@ -6782,8 +7464,8 @@ class DiagramCanvas {
       if (field.rootElement.height + stretchY < (field.rootElement.getMinHeight() || 0)) {
         stretchY = (field.rootElement.getMinHeight() || 0) - field.rootElement.height;
       }
-      (_k = field.rootElement.node) === null || _k === void 0 ? void 0 : _k.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
-      (_l = field.rootElement.node) === null || _l === void 0 ? void 0 : _l.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      (_k = field.rootElement.node) === null || _k === undefined ? undefined : _k.stretchSections(Side.Right, stretchX, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
+      (_l = field.rootElement.node) === null || _l === undefined ? undefined : _l.stretchSections(Side.Bottom, stretchY, field.rootElement.indexXInNode, field.rootElement.indexYInNode);
     }
   }
   fitNodeInView(id) {
@@ -6805,8 +7487,8 @@ class DiagramCanvas {
         }
       }
       // add the margin that goes between the rightmost and bottommost points of the sections and the edge of the node
-      newNodeWidth += ((_a = node.type.sectionGrid) === null || _a === void 0 ? void 0 : _a.margin) || 0;
-      newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === void 0 ? void 0 : _b.margin) || 0;
+      newNodeWidth += ((_a = node.type.sectionGrid) === null || _a === undefined ? undefined : _a.margin) || 0;
+      newNodeHeight += ((_b = node.type.sectionGrid) === null || _b === undefined ? undefined : _b.margin) || 0;
       node.stretch(Side.Right, newNodeWidth - node.width);
       node.stretch(Side.Bottom, newNodeHeight - node.height);
     }
@@ -6820,42 +7502,21 @@ class DiagramCanvas {
   selectCanvasElements() {
     return this.selectRoot().select(`.daga-canvas-elements`);
   }
-  selectCanvasNodes() {
-    return this.selectRoot().select(`.daga-canvas-nodes`);
-  }
-  selectCanvasSections() {
-    return this.selectRoot().select(`.daga-canvas-sections`);
-  }
-  selectCanvasPorts() {
-    return this.selectRoot().select(`.daga-canvas-ports`);
-  }
-  selectCanvasConnections() {
-    return this.selectRoot().select(`.daga-canvas-connections`);
-  }
-  selectCanvasFields() {
-    return this.selectRoot().select(`.daga-canvas-fields`);
-  }
-  selectCanvasObjects() {
-    return this.selectRoot().select(`.daga-canvas-objects`);
-  }
-  selectCanvasDecorators() {
-    return this.selectRoot().select(`.daga-canvas-decorators`);
-  }
   // User actions
   startConnection(port) {
     var _a, _b, _c, _d;
-    if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '') || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || ''))) {
+    if (this.connectionType && (this.connectionType.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '') || this.connectionType.canFinishOnType(((_d = (_c = port.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || ''))) {
       this.unfinishedConnection = new DiagramConnection(this.model, this.connectionType, port, undefined, UNFINISHED_CONNECTION_ID);
     } else {
       if (this.inferConnectionType) {
         let differentConnectionType = this.model.connections.types.all().find(t => {
           var _a, _b;
-          return t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '');
+          return t.canStartFromType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
         });
         if (differentConnectionType === undefined) {
           differentConnectionType = this.model.connections.types.all().find(t => {
             var _a, _b;
-            return t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.id) || '');
+            return t.canFinishOnType(((_b = (_a = port.getNode()) === null || _a === undefined ? undefined : _a.type) === null || _b === undefined ? undefined : _b.id) || '');
           });
         }
         if (differentConnectionType !== undefined) {
@@ -6869,14 +7530,14 @@ class DiagramCanvas {
     this.userHighlight.clear();
     if (this.unfinishedConnection !== undefined) {
       if (this.unfinishedConnection.start !== port) {
-        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_f = (_e = port.getNode()) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.id) || '')) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_g = this.unfinishedConnection.start) === null || _g === void 0 ? void 0 : _g.id, port.id);
+        if (this.unfinishedConnection.type.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && this.unfinishedConnection.type.canFinishOnType(((_f = (_e = port.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '')) {
+          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, (_g = this.unfinishedConnection.start) === null || _g === undefined ? undefined : _g.id, port.id);
           // clean up the previous unfinished connection
           this.dropConnection();
           addConnectionAction.do();
           this.actionStack.add(addConnectionAction);
-        } else if (this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = (_h = this.unfinishedConnection) === null || _h === void 0 ? void 0 : _h.start) === null || _j === void 0 ? void 0 : _j.getNode()) === null || _k === void 0 ? void 0 : _k.type) === null || _l === void 0 ? void 0 : _l.id) || '') && this.unfinishedConnection.type.canStartFromType(((_o = (_m = port.getNode()) === null || _m === void 0 ? void 0 : _m.type) === null || _o === void 0 ? void 0 : _o.id) || '')) {
-          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_p = this.unfinishedConnection.start) === null || _p === void 0 ? void 0 : _p.id);
+        } else if (this.unfinishedConnection.type.canFinishOnType(((_l = (_k = (_j = (_h = this.unfinishedConnection) === null || _h === undefined ? undefined : _h.start) === null || _j === undefined ? undefined : _j.getNode()) === null || _k === undefined ? undefined : _k.type) === null || _l === undefined ? undefined : _l.id) || '') && this.unfinishedConnection.type.canStartFromType(((_o = (_m = port.getNode()) === null || _m === undefined ? undefined : _m.type) === null || _o === undefined ? undefined : _o.id) || '')) {
+          const addConnectionAction = new AddConnectionAction(this, this.unfinishedConnection.type, port.id, (_p = this.unfinishedConnection.start) === null || _p === undefined ? undefined : _p.id);
           // clean up the previous unfinished connection
           this.dropConnection();
           addConnectionAction.do();
@@ -6885,18 +7546,18 @@ class DiagramCanvas {
           if (this.inferConnectionType) {
             let differentConnectionType = this.model.connections.types.all().find(t => {
               var _a, _b, _c, _d, _e, _f;
-              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && t.canFinishOnType(((_f = (_e = port.getNode()) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.id) || '');
+              return t.canStartFromType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && t.canFinishOnType(((_f = (_e = port.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '');
             });
             let invertConnection = false;
             if (differentConnectionType === undefined) {
               differentConnectionType = this.model.connections.types.all().find(t => {
                 var _a, _b, _c, _d, _e, _f;
-                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.getNode()) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.id) || '') && t.canStartFromType(((_f = (_e = port.getNode()) === null || _e === void 0 ? void 0 : _e.type) === null || _f === void 0 ? void 0 : _f.id) || '');
+                return t.canFinishOnType(((_d = (_c = (_b = (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.start) === null || _b === undefined ? undefined : _b.getNode()) === null || _c === undefined ? undefined : _c.type) === null || _d === undefined ? undefined : _d.id) || '') && t.canStartFromType(((_f = (_e = port.getNode()) === null || _e === undefined ? undefined : _e.type) === null || _f === undefined ? undefined : _f.id) || '');
               });
               invertConnection = true;
             }
             if (differentConnectionType !== undefined) {
-              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_q = this.unfinishedConnection.start) === null || _q === void 0 ? void 0 : _q.id, invertConnection ? (_r = this.unfinishedConnection.start) === null || _r === void 0 ? void 0 : _r.id : port.id);
+              const addConnectionAction = new AddConnectionAction(this, differentConnectionType, invertConnection ? port.id : (_q = this.unfinishedConnection.start) === null || _q === undefined ? undefined : _q.id, invertConnection ? (_r = this.unfinishedConnection.start) === null || _r === undefined ? undefined : _r.id : port.id);
               // clean up the previous unfinished connection
               this.dropConnection();
               addConnectionAction.do();
@@ -6918,9 +7579,9 @@ class DiagramCanvas {
   }
   dropConnection() {
     var _a, _b, _c, _d;
-    (_a = this.unfinishedConnection) === null || _a === void 0 ? void 0 : _a.setStart(undefined);
-    (_b = this.unfinishedConnection) === null || _b === void 0 ? void 0 : _b.setEnd(undefined);
-    (_d = (_c = this.unfinishedConnection) === null || _c === void 0 ? void 0 : _c.select()) === null || _d === void 0 ? void 0 : _d.remove();
+    (_a = this.unfinishedConnection) === null || _a === undefined ? undefined : _a.setStart(undefined);
+    (_b = this.unfinishedConnection) === null || _b === undefined ? undefined : _b.setEnd(undefined);
+    (_d = (_c = this.unfinishedConnection) === null || _c === undefined ? undefined : _c.select()) === null || _d === undefined ? undefined : _d.remove();
     this.unfinishedConnection = undefined;
   }
   cancelAllUserActions() {
@@ -6965,9 +7626,9 @@ class DiagramCanvas {
       // keep the field from shrinking below its original size
       const newWidth = Math.max(inputFieldWidth, width);
       const newHeight = Math.max(inputFieldHeight, height);
-      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('width', `${newWidth}px`);
+      inputFieldContainer === null || inputFieldContainer === undefined ? undefined : inputFieldContainer.attr('width', `${newWidth}px`);
       inputField.style('width', `${newWidth}px`);
-      inputFieldContainer === null || inputFieldContainer === void 0 ? void 0 : inputFieldContainer.attr('height', `${newHeight}px`);
+      inputFieldContainer === null || inputFieldContainer === undefined ? undefined : inputFieldContainer.attr('height', `${newHeight}px`);
       inputField.style('height', `${newHeight}px`);
       if (changeCallback) {
         changeCallback(value);
@@ -6989,13 +7650,13 @@ class DiagramCanvas {
     var _a, _b, _c;
     // when removing an element, a blur event is emitted
     // we remove the listener for blur so that it doesn't shoot again on element removal
-    (_b = (_a = this.inputFieldContainer) === null || _a === void 0 ? void 0 : _a.select('input')) === null || _b === void 0 ? void 0 : _b.on(Events.Blur, null);
-    (_c = this.inputFieldContainer) === null || _c === void 0 ? void 0 : _c.remove();
+    (_b = (_a = this.inputFieldContainer) === null || _a === undefined ? undefined : _a.select('input')) === null || _b === undefined ? undefined : _b.on(Events.Blur, null);
+    (_c = this.inputFieldContainer) === null || _c === undefined ? undefined : _c.remove();
     this.inputFieldContainer = undefined;
   }
   minimumSizeOfField(field) {
     var _a, _b;
-    const pNode = (_b = (_a = field.select()) === null || _a === void 0 ? void 0 : _a.select('p')) === null || _b === void 0 ? void 0 : _b.node();
+    const pNode = (_b = (_a = field.select()) === null || _a === undefined ? undefined : _a.select('p')) === null || _b === undefined ? undefined : _b.node();
     if (!pNode) {
       // happens when a field has been created but not updated in view yet
       return [0, 0];
@@ -7010,10 +7671,11 @@ class DiagramCanvas {
     if (this.canUserPerformAction(DiagramActions.MoveNode) && !d.removed) {
       setCursorStyle(CursorStyle.Grabbing);
       this.draggingFrom = [event.x, event.y];
-      if (d.selected) {
+      if (d.selected && this.userSelection.count(e => e instanceof DiagramNode) > 1) {
         this.currentAction = new MoveAction(this, this.userSelection.filter(e => e instanceof DiagramNode).map(n => n.id), d.coords);
       } else {
-        this.currentAction = new MoveAction(this, [d.id], d.coords);
+        const ancestorOfNode = d.getLastAncestor();
+        this.currentAction = new SetGeometryAction(this, DiagramActions.MoveNode, d.id, d.getGeometry(), d.getGeometry(), ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.id, ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id), ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id));
       }
     } else {
       setCursorStyle(CursorStyle.NotAllowed);
@@ -7023,7 +7685,7 @@ class DiagramCanvas {
    * Method to call to continue the moving of a node triggered by a user drag event.
    */
   continueMovingNode(event, d) {
-    if (this.canUserPerformAction(DiagramActions.MoveNode) && this.currentAction instanceof MoveAction && !d.removed) {
+    if (this.canUserPerformAction(DiagramActions.MoveNode) && (this.currentAction instanceof MoveAction || this.currentAction instanceof SetGeometryAction) && !d.removed) {
       const newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
       if (d.selected) {
         this.userSelection.move([newNodeCoords[0] - d.coords[0], newNodeCoords[1] - d.coords[1]]);
@@ -7038,24 +7700,58 @@ class DiagramCanvas {
    * Method to call to finish the moving of a node triggered by a user drag event.
    */
   finishMovingNode(event, d) {
+    var _a, _b, _c;
     if (this.canUserPerformAction(DiagramActions.MoveNode) && !d.removed) {
       // prevent drag behavior if mouse hasn't moved
-      if ((this.draggingFrom[0] !== event.x || this.draggingFrom[1] !== event.y) && this.currentAction instanceof MoveAction) {
+      if (this.draggingFrom[0] !== event.x || this.draggingFrom[1] !== event.y) {
         let newNodeCoords = [event.x - d.width / 2, event.y - d.height / 2];
         if (this.snapToGrid) {
           newNodeCoords = this.getClosestGridPoint(newNodeCoords);
         }
-        const movingFrom = this.currentAction.delta;
-        this.currentAction.delta = [newNodeCoords[0] - movingFrom[0], newNodeCoords[1] - movingFrom[1]];
-        // reset position of node prior to moving it again
-        if (d.selected) {
-          this.userSelection.move([movingFrom[0] - d.coords[0], movingFrom[1] - d.coords[1]]);
-        } else {
-          d.move(movingFrom);
+        if (this.currentAction instanceof MoveAction) {
+          const movingFrom = this.currentAction.delta;
+          this.currentAction.delta = [newNodeCoords[0] - movingFrom[0], newNodeCoords[1] - movingFrom[1]];
+          // reset position of node prior to moving it again
+          if (d.selected) {
+            this.userSelection.move([movingFrom[0] - d.coords[0], movingFrom[1] - d.coords[1]]);
+          } else {
+            d.move(movingFrom);
+          }
+        } else if (this.currentAction instanceof SetGeometryAction) {
+          d.move(newNodeCoords);
+          // if moving a single node, we can change the node's parent,
+          // so we check whether we dropped this node on a potential parent
+          const nodesAtLocation = this.model.nodes.getAtCoordinates(event.x, event.y).filter(n => n.id !== d.id && !n.isDescendantOf(d));
+          // filter by which nodes can have this node as a child
+          const nodesAtLocationWhichCanHaveNodeAsAChild = nodesAtLocation.filter(n => n.type.childrenTypes.includes(d.type.id));
+          // filter by which nodes don't have descendants in this collection
+          const filteredNodesAtLocation = filterByOnlyDescendants(nodesAtLocationWhichCanHaveNodeAsAChild);
+          const droppedOn = filteredNodesAtLocation[filteredNodesAtLocation.length - 1];
+          if (droppedOn !== d.parent && (d.type.canBeParentless || droppedOn !== undefined)) {
+            const ancestorOfDroppedOn = droppedOn === null || droppedOn === undefined ? undefined : droppedOn.getLastAncestor();
+            const fromChildGeometry = this.currentAction.from;
+            const setParentAction = new SetParentAction(this, d.id, (_a = d.parent) === null || _a === undefined ? undefined : _a.id, droppedOn === null || droppedOn === undefined ? undefined : droppedOn.id, fromChildGeometry, d.getGeometry(), ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.id, ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id), ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id));
+            (_b = d.parent) === null || _b === undefined ? undefined : _b.removeChild(d);
+            if (droppedOn !== undefined) {
+              droppedOn.addChild(d);
+            }
+            setParentAction.toChildGeometry = d.getGeometry(d.id);
+            setParentAction.toAncestorGeometry = ancestorOfDroppedOn === null || ancestorOfDroppedOn === undefined ? undefined : ancestorOfDroppedOn.getGeometry(d.id);
+            this.currentAction = setParentAction;
+          } else {
+            const ancestorOfNode = d === null || d === undefined ? undefined : d.getLastAncestor();
+            this.currentAction.ancestorId = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.id;
+            this.currentAction.fromAncestorGeometry = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id);
+            (_c = d.parent) === null || _c === undefined ? undefined : _c.fitToChild(d);
+            this.currentAction.to = d.getGeometry(d.id);
+            this.currentAction.toAncestorGeometry = ancestorOfNode === null || ancestorOfNode === undefined ? undefined : ancestorOfNode.getGeometry(d.id);
+          }
+        }
+        if (this.currentAction !== undefined) {
+          this.currentAction.do();
+          this.actionStack.add(this.currentAction);
+          this.currentAction = undefined;
         }
-        this.currentAction.do();
-        this.actionStack.add(this.currentAction);
-        this.currentAction = undefined;
       }
     }
     setCursorStyle();
@@ -7074,14 +7770,14 @@ class DiagramCanvas {
     const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
     if (this.draggingFrom[0] !== pointerCoords[0] || this.draggingFrom[1] !== pointerCoords[1]) {
       setCursorStyle(CursorStyle.Crosshair);
-      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]))) === null || _b === void 0 ? void 0 : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]))) === null || _c === void 0 ? void 0 : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]))) === null || _d === void 0 ? void 0 : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]));
+      (_d = (_c = (_b = (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.attr('x', Math.min(this.draggingFrom[0], pointerCoords[0]))) === null || _b === undefined ? undefined : _b.attr('y', Math.min(this.draggingFrom[1], pointerCoords[1]))) === null || _c === undefined ? undefined : _c.attr('width', Math.abs(this.draggingFrom[0] - pointerCoords[0]))) === null || _d === undefined ? undefined : _d.attr('height', Math.abs(this.draggingFrom[1] - pointerCoords[1]));
       this.dragging = true;
     }
   }
   finishMultipleSelection(event) {
     var _a;
     const pointerCoords = this.getPointerLocationRelativeToCanvas(event);
-    (_a = this.multipleSelectionContainer) === null || _a === void 0 ? void 0 : _a.remove();
+    (_a = this.multipleSelectionContainer) === null || _a === undefined ? undefined : _a.remove();
     this.multipleSelectionContainer = undefined;
     this.userSelection.clear();
     for (const node of this.model.nodes) {
@@ -7090,6 +7786,7 @@ class DiagramCanvas {
       }
     }
     this.multipleSelectionOn = false;
+    this.diagramEvent$.next(new DiagramSelectionEvent(this.userSelection.all(), true));
     setCursorStyle();
   }
 }
@@ -7209,7 +7906,7 @@ class CollabClient {
           const initialModel = message.initialModel;
           new DagaImporter().import(session.canvas.model, initialModel);
           this.startSyncing(session);
-          (_a = session.joinRoomResolve) === null || _a === void 0 ? void 0 : _a.call(session);
+          (_a = session.joinRoomResolve) === null || _a === undefined ? undefined : _a.call(session);
           session.joinRoomResolve = undefined;
           break;
         }
@@ -7232,7 +7929,7 @@ class CollabClient {
           session.locator = message.locator;
           this.pendingSessions.delete(message.refId);
           this.sessions.set(session.locator, session);
-          (_b = session.createRoomResolve) === null || _b === void 0 ? void 0 : _b.call(session, session.locator);
+          (_b = session.createRoomResolve) === null || _b === undefined ? undefined : _b.call(session, session.locator);
           session.createRoomResolve = undefined;
           // Deliver queued AddMessages now that we have a locator.
           for (const message of session.addQueue) {
@@ -7488,21 +8185,21 @@ class Grid {
  */
 class AdjacencyLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
     // arrange nodes
     const nodeArrangement = new Grid();
-    const nodesToBeArranged = model.nodes.all();
+    const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     while (nodesToBeArranged.length > 0) {
       arrangeNode(nodesToBeArranged[0], nodeArrangement, [0, 0], nodesToBeArranged);
     }
     // place nodes according to arrangement
     const maximumWidth = Math.max(...model.nodes.map(n => n.width));
     const maximumHeight = Math.max(...model.nodes.map(n => n.height));
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
@@ -7511,7 +8208,6 @@ class AdjacencyLayout {
         }
       }
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7532,14 +8228,14 @@ const arrangeNode = (node, nodeArrangement, coords, nodesToBeArranged) => {
  */
 class BreadthAdjacencyLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
     // arrange nodes
     const nodeArrangement = new Grid();
-    const nodesToBeArranged = model.nodes.all();
+    const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     const nodeGridIndices = {};
     const firstNode = nodesToBeArranged[0];
     let currentNodeLevel = [firstNode];
@@ -7568,7 +8264,7 @@ class BreadthAdjacencyLayout {
     // place nodes according to arrangement
     const maximumWidth = Math.max(...model.nodes.map(n => n.width));
     const maximumHeight = Math.max(...model.nodes.map(n => n.height));
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
     for (let y = nodeArrangement.minY(); y <= nodeArrangement.maxY(); ++y) {
       for (let x = nodeArrangement.minX(); x <= nodeArrangement.maxX(); ++x) {
         const node = nodeArrangement.get([x, y]);
@@ -7577,7 +8273,6 @@ class BreadthAdjacencyLayout {
         }
       }
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7588,13 +8283,13 @@ class BreadthAdjacencyLayout {
  */
 class BreadthLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
-    let nodesToBeArranged = model.nodes.all();
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    let nodesToBeArranged = model.nodes.filter(n => !n.parent);
     // Arrange nodes by a breadth first search
     const firstNode = nodesToBeArranged[0];
     removeIfExists(nodesToBeArranged, firstNode);
@@ -7640,7 +8335,6 @@ class BreadthLayout {
     for (const connection of model.connections) {
       connection.tighten();
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7651,14 +8345,14 @@ class BreadthLayout {
  */
 class ForceLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
     // as a starting point, we apply a simple layout
     new BreadthLayout().apply(model);
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
     const coolingFactor = 0.99;
     const minimumTemperature = 1;
     const attractionFactor = 0.1;
@@ -7736,7 +8430,6 @@ class ForceLayout {
     for (const connection of model.connections) {
       connection.tighten();
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7747,20 +8440,19 @@ class ForceLayout {
  */
 class HorizontalLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
-    const nodesToBeArranged = model.nodes.all();
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let widthAccumulator = 0;
     for (const node of nodesToBeArranged) {
       node.move([widthAccumulator, 0]);
       widthAccumulator += node.width + gapSize;
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7771,7 +8463,7 @@ class HorizontalLayout {
  */
 class PriorityLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
@@ -7783,10 +8475,10 @@ class PriorityLayout {
       new BreadthLayout().apply(model);
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
-    const nodesToBeArranged = model.nodes.all();
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     const nodeArrangement = [];
-    const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(n => n.getPriority() >= maximumPriority);
+    const nodesWithMaximumPriorityToBeArranged = model.nodes.filter(n => !n.parent).filter(n => n.getPriority() >= maximumPriority);
     const nodesWithMaximumPriority = [];
     if (nodesWithMaximumPriorityToBeArranged.length > 1) {
       // use bfs to sort nodes by distance to the first node
@@ -7868,7 +8560,6 @@ class PriorityLayout {
     for (const connection of model.connections) {
       connection.tighten();
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7879,7 +8570,7 @@ class PriorityLayout {
  */
 class TreeLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
@@ -7891,8 +8582,8 @@ class TreeLayout {
       new BreadthLayout().apply(model);
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
-    const nodesToBeArranged = [...model.nodes].sort((n1, n2) => n2.getPriority() - n1.getPriority());
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const nodesToBeArranged = model.nodes.filter(n => !n.parent).sort((n1, n2) => n2.getPriority() - n1.getPriority());
     const branches = [];
     while (nodesToBeArranged.length > 0) {
       const nodeToBeArranged = nodesToBeArranged[0];
@@ -7921,7 +8612,6 @@ class TreeLayout {
     for (const connection of model.connections) {
       connection.tighten();
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -7978,20 +8668,19 @@ class Branch {
  */
 class VerticalLayout {
   apply(model) {
-    var _a, _b;
+    var _a;
     if (model.nodes.length === 0) {
       // nothing to arrange...
       return model;
     }
-    const gapSize = (((_a = model.canvas) === null || _a === void 0 ? void 0 : _a.gridSize) || 0) * 2;
-    const nodesToBeArranged = model.nodes.all();
+    const gapSize = (((_a = model.canvas) === null || _a === undefined ? undefined : _a.gridSize) || 0) * 2;
+    const nodesToBeArranged = model.nodes.filter(n => !n.parent);
     nodesToBeArranged.sort((a, b) => b.type.priority - a.type.priority);
     let heightAccumulator = 0;
     for (const node of nodesToBeArranged) {
       node.move([0, heightAccumulator]);
       heightAccumulator += node.height + gapSize;
     }
-    (_b = model.canvas) === null || _b === void 0 ? void 0 : _b.diagramChange$.next();
     return model;
   }
 }
@@ -8009,5 +8698,12 @@ const layouts = {
   tree: new TreeLayout(),
   vertical: new VerticalLayout()
 };
+const getLocationsOfNodes = model => {
+  const locations = {};
+  for (const node of model.nodes) {
+    locations[node.id] = node.coords;
+  }
+  return locations;
+};
 
-export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSection, DiagramSectionSet, DiagramUserHighlight, DiagramUserSelection, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, generalClosedPath, getBottomMargin, getBottomPadding, getLeftMargin, getLeftPadding, getRightMargin, getRightPadding, getTopMargin, getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };
+export { ACTION_STACK_SIZE, ActionStack, AddConnectionAction, AddNodeAction, AdjacencyLayout, ApplyLayoutAction, BreadthAdjacencyLayout, BreadthLayout, ClosedShape, CollabClient, Corner, CursorStyle, DIAGRAM_FIELD_DEFAULTS, DagaExporter, DagaImporter, DiagramActionMethod, DiagramActions, DiagramCanvas, DiagramConnection, DiagramConnectionSet, DiagramConnectionType, DiagramContextMenu, DiagramDecorator, DiagramDecoratorSet, DiagramDoubleClickEvent, DiagramElement, DiagramElementSet, DiagramEntitySet, DiagramEvent, DiagramEvents, DiagramField, DiagramFieldSet, DiagramModel, DiagramNode, DiagramNodeSet, DiagramNodeType, DiagramObject, DiagramObjectSet, DiagramPort, DiagramPortSet, DiagramSecondaryClickEvent, DiagramSection, DiagramSectionSet, DiagramUserHighlight, DiagramUserSelection, DragEvents, EditFieldAction, Events, ForceLayout, HorizontalAlign, HorizontalLayout, Keys, LineShape, LineStyle, MoveAction, PasteAction, PriorityLayout, Property, PropertySet, RemoveAction, SetGeometryAction, SetParentAction, Side, TreeLayout, Type, UpdateValuesAction, ValueSet, VerticalAlign, VerticalLayout, ZoomEvents, addIfNotExists, diff, equals, filterByOnlyAncestors, filterByOnlyDescendants, generalClosedPath, getBottomMargin, getBottomPadding$1 as getBottomPadding, getLeftMargin, getLeftPadding$1 as getLeftPadding, getLocationsOfNodes, getRightMargin, getRightPadding$1 as getRightPadding, getTopMargin, getTopPadding$1 as getTopPadding, isObject, layouts, linePath, lineStyleDasharray, removeIfExists, setCursorStyle };