bpmn-auto-layout 1.1.1 → 1.2.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var BPMNModdle = require('bpmn-moddle');
+var bpmnModdle = require('bpmn-moddle');
 var minDash = require('min-dash');
 
 function isConnection(element) {
@@ -32,576 +32,656 @@ function findElementInTree(currentElement, targetElement, visited = new Set()) {
   return false;
 }
 
-class Grid {
-  constructor() {
-    this.grid = [];
+const DEFAULT_TASK_HEIGHT = 80;
+const DEFAULT_TASK_WIDTH = 100;
+
+function getDefaultSize(element) {
+  if (is(element, 'bpmn:SubProcess')) {
+    return { width: DEFAULT_TASK_WIDTH, height: DEFAULT_TASK_HEIGHT };
   }
 
-  add(element, position) {
-    if (!position) {
-      this._addStart(element);
-      return;
-    }
+  if (is(element, 'bpmn:Task')) {
+    return { width: DEFAULT_TASK_WIDTH, height: DEFAULT_TASK_HEIGHT };
+  }
 
-    const [ row, col ] = position;
-    if (!row && !col) {
-      this._addStart(element);
-    }
+  if (is(element, 'bpmn:Gateway')) {
+    return { width: 50, height: 50 };
+  }
 
-    if (!this.grid[row]) {
-      this.grid[row] = [];
-    }
+  if (is(element, 'bpmn:Event')) {
+    return { width: 36, height: 36 };
+  }
 
-    if (this.grid[row][col]) {
-      throw new Error('Grid is occupied please ensure the place you insert at is not occupied');
-    }
+  if (is(element, 'bpmn:Participant')) {
+    return { width: 400, height: 100 };
+  }
 
-    this.grid[row][col] = element;
+  if (is(element, 'bpmn:Lane')) {
+    return { width: 400, height: 100 };
   }
 
-  createRow(afterIndex) {
-    if (!afterIndex && !Number.isInteger(afterIndex)) {
-      this.grid.push([]);
-    } else {
-      this.grid.splice(afterIndex + 1, 0, []);
-    }
+  if (is(element, 'bpmn:DataObjectReference')) {
+    return { width: 36, height: 50 };
   }
 
-  _addStart(element) {
-    this.grid.push([ element ]);
+  if (is(element, 'bpmn:DataStoreReference')) {
+    return { width: 50, height: 50 };
   }
 
-  addAfter(element, newElement) {
-    if (!element) {
-      this._addStart(newElement);
-    }
-    const [ row, col ] = this.find(element);
-    this.grid[row].splice(col + 1, 0, newElement);
+  if (is(element, 'bpmn:TextAnnotation')) {
+    return { width: DEFAULT_TASK_WIDTH, height: 30 };
   }
 
-  addBelow(element, newElement) {
-    if (!element) {
-      this._addStart(newElement);
-    }
+  return { width: DEFAULT_TASK_WIDTH, height: DEFAULT_TASK_HEIGHT };
+}
 
-    const [ row, col ] = this.find(element);
+function is(element, type) {
+  return element.$instanceOf(type);
+}
 
-    // We are at the bottom of the current grid - add empty row below
-    if (!this.grid[row + 1]) {
-      this.grid[row + 1] = [];
-    }
+const DEFAULT_CELL_WIDTH = 150;
+const DEFAULT_CELL_HEIGHT = 140;
 
-    // The element below is already occupied - insert new row
-    if (this.grid[row + 1][col]) {
-      this.grid.splice(row + 1, 0, []);
-    }
+function getMid(bounds) {
+  return {
+    x: bounds.x + bounds.width / 2,
+    y: bounds.y + bounds.height / 2
+  };
+}
 
-    if (this.grid[row + 1][col]) {
-      throw new Error('Grid is occupied and we could not find a place - this should not happen');
-    }
+function getDockingPoint(point, rectangle, dockingDirection = 'r', targetOrientation = 'top-left') {
 
-    this.grid[row + 1][col] = newElement;
+  // ensure we end up with a specific docking direction
+  // based on the targetOrientation, if <h|v> is being passed
+  if (dockingDirection === 'h') {
+    dockingDirection = /left/.test(targetOrientation) ? 'l' : 'r';
   }
 
-  find(element) {
-    let row, col;
-    row = this.grid.findIndex((row) => {
-      col = row.findIndex((el) => {
-        return el === element;
-      });
+  if (dockingDirection === 'v') {
+    dockingDirection = /top/.test(targetOrientation) ? 't' : 'b';
+  }
 
-      return col !== -1;
-    });
+  if (dockingDirection === 't') {
+    return { original: point, x: point.x, y: rectangle.y };
+  }
 
-    return [ row, col ];
+  if (dockingDirection === 'r') {
+    return { original: point, x: rectangle.x + rectangle.width, y: point.y };
   }
 
-  get(row, col) {
-    return (this.grid[row] || [])[col];
+  if (dockingDirection === 'b') {
+    return { original: point, x: point.x, y: rectangle.y + rectangle.height };
   }
 
-  getElementsInRange({ row: startRow, col: startCol }, { row: endRow, col: endCol }) {
-    const elements = [];
+  if (dockingDirection === 'l') {
+    return { original: point, x: rectangle.x, y: point.y };
+  }
 
-    if (startRow > endRow) {
-      [ startRow, endRow ] = [ endRow, startRow ];
-    }
+  throw new Error('unexpected dockingDirection: <' + dockingDirection + '>');
+}
 
-    if (startCol > endCol) {
-      [ startCol, endCol ] = [ endCol, startCol ];
-    }
+/**
+ * Modified Manhattan layout: Uses space between grid columns to route connections
+ * if direct connection is not possible.
+ * @param {*} source
+ * @param {*} target
+ * @param layoutGrid
+ * @returns waypoints
+ */
+function connectElements(source, target, layoutGrid) {
+  const sourceDi = source.di;
+  const targetDi = target.di;
 
-    for (let row = startRow; row <= endRow; row++) {
-      for (let col = startCol; col <= endCol; col++) {
-        const element = this.get(row, col);
+  const sourceBounds = sourceDi.get('bounds');
+  const targetBounds = targetDi.get('bounds');
 
-        if (element) {
-          elements.push(element);
-        }
-      }
-    }
+  const sourceMid = getMid(sourceBounds);
+  const targetMid = getMid(targetBounds);
 
-    return elements;
+  const dX = target.gridPosition.col - source.gridPosition.col;
+  const dY = target.gridPosition.row - source.gridPosition.row;
+
+  const dockingSource = `${(dY > 0 ? 'bottom' : 'top')}-${dX > 0 ? 'right' : 'left'}`;
+  const dockingTarget = `${(dY > 0 ? 'top' : 'bottom')}-${dX > 0 ? 'left' : 'right'}`;
+
+  const baseSourceGrid = source.grid || source.attachedToRef?.grid;
+  const baseTargetGrid = target.grid;
+
+  // Source === Target ==> Build loop
+  if (dX === 0 && dY === 0) {
+    const { x, y } = coordinatesToPosition(source.gridPosition.row, source.gridPosition.col);
+    return [
+      getDockingPoint(sourceMid, sourceBounds, 'r', dockingSource),
+      { x: baseSourceGrid ? x + (baseSourceGrid.getGridDimensions()[1] + 1) * DEFAULT_CELL_WIDTH : x + DEFAULT_CELL_WIDTH, y: sourceMid.y },
+      { x: baseSourceGrid ? x + (baseSourceGrid.getGridDimensions()[1] + 1) * DEFAULT_CELL_WIDTH : x + DEFAULT_CELL_WIDTH, y: y },
+      { x: targetMid.x, y: y },
+      getDockingPoint(targetMid, targetBounds, 't', dockingTarget)
+    ];
   }
 
-  adjustGridPosition(element) {
-    let [ row, col ] = this.find(element);
-    const [ , maxCol ] = this.getGridDimensions();
+  // negative dX indicates connection from future to past
+  if (dX < 0) {
 
-    if (col < maxCol - 1) {
+    const { y } = coordinatesToPosition(source.gridPosition.row, source.gridPosition.col);
 
-      // add element in next column
-      this.grid[row].length = maxCol;
-      this.grid[row][maxCol] = element;
-      this.grid[row][col] = null;
+    const offsetY = DEFAULT_CELL_HEIGHT / 2;
 
-    }
-  }
+    if (sourceMid.y >= targetMid.y) {
 
-  adjustRowForMultipleIncoming(elements, currentElement) {
-    const results = elements.map(element => this.find(element));
+      // edge goes below
+      const maxExpanded = getMaxExpandedBetween(source, target, layoutGrid);
+
+      if (maxExpanded) {
+        return [
+          getDockingPoint(sourceMid, sourceBounds, 'b'),
+          { x: sourceMid.x, y: !baseSourceGrid ? y + DEFAULT_CELL_HEIGHT + maxExpanded * DEFAULT_CELL_HEIGHT : y + (baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+          { x: targetMid.x, y: !baseSourceGrid ? y + DEFAULT_CELL_HEIGHT + maxExpanded * DEFAULT_CELL_HEIGHT : y + (baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+          getDockingPoint(targetMid, targetBounds, 'b')
+        ];
+      }
 
-    // filter only rows that currently exist, excluding any future or non-existent rows
-    const lowestRow = Math.min(...results
-      .map(result => result[0])
-      .filter(row => row >= 0));
+      return [
+        getDockingPoint(sourceMid, sourceBounds, 'b'),
+        { x: sourceMid.x, y: !baseSourceGrid ? y + DEFAULT_CELL_HEIGHT : y + (baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+        { x: targetMid.x, y: !baseSourceGrid ? y + DEFAULT_CELL_HEIGHT : y + (baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+        getDockingPoint(targetMid, targetBounds, 'b')
+      ];
+    } else {
 
-    const [ row , col ] = this.find(currentElement);
+      // edge goes above
+      const bendY = sourceMid.y - offsetY;
 
-    // if element doesn't already exist in current row, add element
-    if (lowestRow < row && !this.grid[lowestRow][col]) {
-      this.grid[lowestRow][col] = currentElement;
-      this.grid[row][col] = null;
+      return [
+        getDockingPoint(sourceMid, sourceBounds, 't'),
+        { x: sourceMid.x, y: bendY },
+        { x: targetMid.x, y: bendY },
+        getDockingPoint(targetMid, targetBounds, 't')
+      ];
     }
   }
 
-  adjustColumnForMultipleIncoming(elements, currentElement) {
-    const results = elements.map(element => this.find(element));
+  // connect horizontally
+  if (dY === 0) {
+    if (isDirectPathBlocked(source, target, layoutGrid)) {
+      const { y } = coordinatesToPosition(source.gridPosition.row, source.gridPosition.col);
 
-    // filter only col that currently exist, excluding any future or non-existent col
-    const maxCol = Math.max(...results
-      .map(result => result[1])
-      .filter(col => col >= 0));
+      // Route on bottom
+      return [
+        getDockingPoint(sourceMid, sourceBounds, 'b'),
+        { x: sourceMid.x, y: !baseSourceGrid ? y + DEFAULT_CELL_HEIGHT : y + (baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+        { x: targetMid.x, y: !baseSourceGrid ? y + DEFAULT_CELL_HEIGHT : y + (baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+        getDockingPoint(targetMid, targetBounds, 'b')
+      ];
+    } else {
 
-    const [ row , col ] = this.find(currentElement);
+      // if space is clear, connect directly
+      const firstPoint = getDockingPoint(sourceMid, sourceBounds, 'h', dockingSource);
+      const lastPoint = getDockingPoint(targetMid, targetBounds, 'h', dockingTarget);
+      if (baseSourceGrid) {
+        firstPoint.y = sourceBounds.y + DEFAULT_TASK_HEIGHT / 2 ;
+      }
 
-    // add to the next column
-    if (maxCol + 1 > col) {
-      this.grid[row][maxCol + 1] = currentElement;
-      this.grid[row][col] = null;
+      if (baseTargetGrid) {
+        lastPoint.y = targetBounds.y + DEFAULT_TASK_HEIGHT / 2 ;
+      }
+      return [
+        firstPoint,
+        lastPoint
+      ];
     }
   }
 
-  getAllElements() {
-    const elements = [];
+  // connect vertically
+  if (dX === 0) {
+    if (isDirectPathBlocked(source, target, layoutGrid)) {
 
-    for (let row = 0; row < this.grid.length; row++) {
-      for (let col = 0; col < this.grid[row].length; col++) {
-        const element = this.get(row, col);
+      // Route parallel
+      const yOffset = -Math.sign(dY) * DEFAULT_CELL_HEIGHT / 2;
+      return [
+        getDockingPoint(sourceMid, sourceBounds, 'r'),
+        { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: sourceMid.y }, // out right
+        { x: targetMid.x + DEFAULT_CELL_WIDTH / 2, y: targetMid.y + yOffset },
+        { x: targetMid.x, y: targetMid.y + yOffset },
+        getDockingPoint(targetMid, targetBounds, Math.sign(yOffset) > 0 ? 'b' : 't')
+      ];
+    } else {
 
-        if (element) {
-          elements.push(element);
-        }
-      }
+      // if space is clear, connect directly
+      return [ getDockingPoint(sourceMid, sourceBounds, 'v', dockingSource),
+        getDockingPoint(targetMid, targetBounds, 'v', dockingTarget)
+      ];
     }
-
-    return elements;
   }
 
-  getGridDimensions() {
-    const numRows = this.grid.length;
-    let maxCols = 0;
+  const directManhattan = directManhattanConnect(source, target, layoutGrid);
 
-    for (let i = 0; i < numRows; i++) {
-      const currentRowLength = this.grid[i].length;
-      if (currentRowLength > maxCols) {
-        maxCols = currentRowLength;
-      }
-    }
+  if (directManhattan) {
+    const startPoint = getDockingPoint(sourceMid, sourceBounds, directManhattan[0], dockingSource);
+    const endPoint = getDockingPoint(targetMid, targetBounds, directManhattan[1], dockingTarget);
 
-    return [ numRows , maxCols ];
+    const midPoint = directManhattan[0] === 'h' ? { x: endPoint.x, y: startPoint.y } : { x: startPoint.x, y: endPoint.y };
+
+    return [
+      startPoint,
+      midPoint,
+      endPoint
+    ];
   }
+  const yOffset = -Math.sign(dY) * DEFAULT_CELL_HEIGHT / 2;
 
-  elementsByPosition() {
-    const elements = [];
+  return [
+    getDockingPoint(sourceMid, sourceBounds, 'r', dockingSource),
+    { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: sourceMid.y }, // out right
+    { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: targetMid.y + yOffset }, // to target row
+    { x: targetMid.x - DEFAULT_CELL_WIDTH / 2, y: targetMid.y + yOffset }, // to target column
+    { x: targetMid.x - DEFAULT_CELL_WIDTH / 2, y: targetMid.y }, // to mid
+    getDockingPoint(targetMid, targetBounds, 'l', dockingTarget)
+  ];
+}
 
-    this.grid.forEach((row, rowIndex) => {
-      row.forEach((element, colIndex) => {
-        if (!element) {
-          return;
-        }
-        elements.push({
-          element,
-          row: rowIndex,
-          col: colIndex
-        });
-      });
-    });
+// helpers /////
+function coordinatesToPosition(row, col) {
+  return {
+    width: DEFAULT_CELL_WIDTH,
+    height: DEFAULT_CELL_HEIGHT,
+    x: col * DEFAULT_CELL_WIDTH,
+    y: row * DEFAULT_CELL_HEIGHT
+  };
+}
 
-    return elements;
-  }
+function getBounds(element, row, col, shift, attachedTo) {
+  let { width, height } = getDefaultSize(element);
+  const { x, y } = shift;
 
-  getElementsTotal() {
-    const flattenedGrid = this.grid.flat();
-    const uniqueElements = new Set(flattenedGrid.filter(value => value));
-    return uniqueElements.size;
+  // Center in cell
+  if (!attachedTo) {
+    return {
+      width: element.isExpanded ? element.grid.getGridDimensions()[1] * DEFAULT_CELL_WIDTH + width : width,
+      height: element.isExpanded ? element.grid.getGridDimensions()[0] * DEFAULT_CELL_HEIGHT + height : height,
+      x: (col * DEFAULT_CELL_WIDTH) + (DEFAULT_CELL_WIDTH - width) / 2 + x,
+      y: row * DEFAULT_CELL_HEIGHT + (DEFAULT_CELL_HEIGHT - height) / 2 + y
+    };
   }
+
+  const hostBounds = attachedTo.di.bounds;
+
+  return {
+    width, height,
+    x: Math.round(hostBounds.x + hostBounds.width / 2 - width / 2),
+    y: Math.round(hostBounds.y + hostBounds.height - height / 2)
+  };
 }
 
-class DiFactory {
-  constructor(moddle) {
-    this.moddle = moddle;
-  }
+function isDirectPathBlocked(source, target, layoutGrid) {
+  const { row: sourceRow, col: sourceCol } = source.gridPosition;
+  const { row: targetRow, col: targetCol } = target.gridPosition;
 
-  create(type, attrs) {
-    return this.moddle.create(type, attrs || {});
+  const dX = targetCol - sourceCol;
+  const dY = targetRow - sourceRow;
+
+  let totalElements = 0;
+
+  if (dX) {
+    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, { row: sourceRow, col: targetCol }).length;
   }
 
-  createDiBounds(bounds) {
-    return this.create('dc:Bounds', bounds);
+  if (dY) {
+    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: targetCol }, { row: targetRow, col: targetCol }).length;
   }
 
-  createDiLabel() {
-    return this.create('bpmndi:BPMNLabel', {
-      bounds: this.createDiBounds()
-    });
+  return totalElements > 2;
+}
+
+function directManhattanConnect(source, target, layoutGrid) {
+  const { row: sourceRow, col: sourceCol } = source.gridPosition;
+  const { row: targetRow, col: targetCol } = target.gridPosition;
+
+  const dX = targetCol - sourceCol;
+  const dY = targetRow - sourceRow;
+
+  // Only directly connect left-to-right flow
+  if (!(dX > 0 && dY !== 0)) {
+    return;
   }
 
-  createDiShape(semantic, bounds, attrs) {
-    return this.create('bpmndi:BPMNShape', minDash.assign({
-      bpmnElement: semantic,
-      bounds: this.createDiBounds(bounds)
-    }, attrs));
+  // If below, go down then horizontal
+  if (dY > 0) {
+    let totalElements = 0;
+    const bendPoint = { row: targetRow, col: sourceCol };
+    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, bendPoint).length;
+    totalElements += layoutGrid.getElementsInRange(bendPoint, { row: targetRow, col: targetCol }).length;
+
+    return totalElements > 2 ? false : [ 'v', 'h' ];
+  } else {
+
+    // If above, go horizontal than vertical
+    let totalElements = 0;
+    const bendPoint = { row: sourceRow, col: targetCol };
+
+    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, bendPoint).length;
+    totalElements += layoutGrid.getElementsInRange(bendPoint, { row: targetRow, col: targetCol }).length;
+
+    return totalElements > 2 ? false : [ 'h', 'v' ];
   }
+}
 
-  createDiWaypoints(waypoints) {
-    var self = this;
 
-    return minDash.map(waypoints, function(pos) {
-      return self.createDiWaypoint(pos);
-    });
-  }
+function getMaxExpandedBetween(source, target, layoutGrid) {
 
-  createDiWaypoint(point) {
-    return this.create('dc:Point', minDash.pick(point, [ 'x', 'y' ]));
-  }
+  const hostSource = source.attachedToRef ? source.attachedToRef : source;
+  const hostTarget = target.attachedToRef ? target.attachedToRef : target;
 
-  createDiEdge(semantic, waypoints, attrs) {
-    return this.create('bpmndi:BPMNEdge', minDash.assign({
-      bpmnElement: semantic,
-      waypoint: this.createDiWaypoints(waypoints)
-    }, attrs));
-  }
 
-  createDiPlane(attrs) {
-    return this.create('bpmndi:BPMNPlane', attrs);
-  }
+  const [ sourceRow, sourceCol ] = layoutGrid.find(hostSource);
+  const [ , targetCol ] = layoutGrid.find(hostTarget);
 
-  createDiDiagram(attrs) {
-    return this.create('bpmndi:BPMNDiagram', attrs);
-  }
+  const firstCol = sourceCol < targetCol ? sourceCol : targetCol;
+  const lastCol = sourceCol < targetCol ? targetCol : sourceCol;
+
+  const elementsInRange = layoutGrid.getAllElements().filter(element => element.gridPosition.row === sourceRow && element.gridPosition.col > firstCol && element.gridPosition.col < lastCol);
+
+  return elementsInRange.reduce((acc, cur) => {
+    if (cur.grid?.getGridDimensions()[0] > acc) return cur.grid?.getGridDimensions()[0];
+  }, 0);
 }
 
-function getDefaultSize(element) {
-  if (is(element, 'bpmn:SubProcess')) {
-    return { width: 100, height: 80 };
+class Grid {
+  constructor() {
+    this.grid = [];
   }
 
-  if (is(element, 'bpmn:Task')) {
-    return { width: 100, height: 80 };
-  }
+  add(element, position) {
+    if (!position) {
+      this._addStart(element);
+      return;
+    }
 
-  if (is(element, 'bpmn:Gateway')) {
-    return { width: 50, height: 50 };
-  }
+    const [ row, col ] = position;
+    if (!row && !col) {
+      this._addStart(element);
+    }
 
-  if (is(element, 'bpmn:Event')) {
-    return { width: 36, height: 36 };
-  }
+    if (!this.grid[row]) {
+      this.grid[row] = [];
+    }
 
-  if (is(element, 'bpmn:Participant')) {
-    return { width: 400, height: 100 };
-  }
+    if (this.grid[row][col]) {
+      throw new Error('Grid is occupied please ensure the place you insert at is not occupied');
+    }
 
-  if (is(element, 'bpmn:Lane')) {
-    return { width: 400, height: 100 };
+    this.grid[row][col] = element;
   }
 
-  if (is(element, 'bpmn:DataObjectReference')) {
-    return { width: 36, height: 50 };
+  createRow(afterIndex) {
+    if (!afterIndex && !Number.isInteger(afterIndex)) {
+      this.grid.push([]);
+    } else {
+      this.grid.splice(afterIndex + 1, 0, []);
+    }
   }
 
-  if (is(element, 'bpmn:DataStoreReference')) {
-    return { width: 50, height: 50 };
+  _addStart(element) {
+    this.grid.push([ element ]);
   }
 
-  if (is(element, 'bpmn:TextAnnotation')) {
-    return { width: 100, height: 30 };
+  addAfter(element, newElement) {
+    if (!element) {
+      this._addStart(newElement);
+    }
+    const [ row, col ] = this.find(element);
+    this.grid[row].splice(col + 1, 0, newElement);
   }
 
-  return { width: 100, height: 80 };
-}
-
-function is(element, type) {
-  return element.$instanceOf(type);
-}
+  addBelow(element, newElement) {
+    if (!element) {
+      this._addStart(newElement);
+    }
 
-const DEFAULT_CELL_WIDTH = 150;
-const DEFAULT_CELL_HEIGHT = 140;
+    const [ row, col ] = this.find(element);
 
-function getMid(bounds) {
-  return {
-    x: bounds.x + bounds.width / 2,
-    y: bounds.y + bounds.height / 2
-  };
-}
+    // We are at the bottom of the current grid - add empty row below
+    if (!this.grid[row + 1]) {
+      this.grid[row + 1] = [];
+    }
 
-function getDockingPoint(point, rectangle, dockingDirection = 'r', targetOrientation = 'top-left') {
+    // The element below is already occupied - insert new row
+    if (this.grid[row + 1][col]) {
+      this.grid.splice(row + 1, 0, []);
+    }
 
-  // ensure we end up with a specific docking direction
-  // based on the targetOrientation, if <h|v> is being passed
-  if (dockingDirection === 'h') {
-    dockingDirection = /left/.test(targetOrientation) ? 'l' : 'r';
-  }
+    if (this.grid[row + 1][col]) {
+      throw new Error('Grid is occupied and we could not find a place - this should not happen');
+    }
 
-  if (dockingDirection === 'v') {
-    dockingDirection = /top/.test(targetOrientation) ? 't' : 'b';
+    this.grid[row + 1][col] = newElement;
   }
 
-  if (dockingDirection === 't') {
-    return { original: point, x: point.x, y: rectangle.y };
-  }
+  find(element) {
+    let row, col;
+    row = this.grid.findIndex((row) => {
+      col = row.findIndex((el) => {
+        return el === element;
+      });
 
-  if (dockingDirection === 'r') {
-    return { original: point, x: rectangle.x + rectangle.width, y: point.y };
-  }
+      return col !== -1;
+    });
 
-  if (dockingDirection === 'b') {
-    return { original: point, x: point.x, y: rectangle.y + rectangle.height };
+    return [ row, col ];
   }
 
-  if (dockingDirection === 'l') {
-    return { original: point, x: rectangle.x, y: point.y };
+  get(row, col) {
+    return (this.grid[row] || [])[col];
   }
 
-  throw new Error('unexpected dockingDirection: <' + dockingDirection + '>');
-}
-
-/**
-     * Modified Manhattan layout: Uses space between grid coloumns to route connections
-     * if direct connection is not possible.
-     * @param {*} source
-     * @param {*} target
-     * @returns waypoints
-     */
-function connectElements(source, target, layoutGrid) {
-  const sourceDi = source.di;
-  const targetDi = target.di;
+  getElementsInRange({ row: startRow, col: startCol }, { row: endRow, col: endCol }) {
+    const elements = [];
 
-  const sourceBounds = sourceDi.get('bounds');
-  const targetBounds = targetDi.get('bounds');
+    if (startRow > endRow) {
+      [ startRow, endRow ] = [ endRow, startRow ];
+    }
 
-  const sourceMid = getMid(sourceBounds);
-  const targetMid = getMid(targetBounds);
+    if (startCol > endCol) {
+      [ startCol, endCol ] = [ endCol, startCol ];
+    }
 
-  const dX = target.gridPosition.col - source.gridPosition.col;
-  const dY = target.gridPosition.row - source.gridPosition.row;
+    for (let row = startRow; row <= endRow; row++) {
+      for (let col = startCol; col <= endCol; col++) {
+        const element = this.get(row, col);
 
-  const dockingSource = `${(dY > 0 ? 'bottom' : 'top')}-${dX > 0 ? 'right' : 'left'}`;
-  const dockingTarget = `${(dY > 0 ? 'top' : 'bottom')}-${dX > 0 ? 'left' : 'right'}`;
+        if (element) {
+          elements.push(element);
+        }
+      }
+    }
 
-  // Source === Target ==> Build loop
-  if (dX === 0 && dY === 0) {
-    const { x, y } = coordinatesToPosition(source.gridPosition.row, source.gridPosition.col);
-    return [
-      getDockingPoint(sourceMid, sourceBounds, 'r', dockingSource),
-      { x: x + DEFAULT_CELL_WIDTH, y: sourceMid.y },
-      { x: x + DEFAULT_CELL_WIDTH, y: y },
-      { x: targetMid.x, y: y },
-      getDockingPoint(targetMid, targetBounds, 't', dockingTarget)
-    ];
+    return elements;
   }
 
-  // negative dX indicates connection from future to past
-  if (dX < 0) {
-
-    const { y } = coordinatesToPosition(source.gridPosition.row, source.gridPosition.col);
-
-    const offsetY = DEFAULT_CELL_HEIGHT / 2;
-
-    if (sourceMid.y >= targetMid.y) {
+  adjustGridPosition(element) {
+    let [ row, col ] = this.find(element);
+    const [ , maxCol ] = this.getGridDimensions();
 
-      // edge goes below
-      return [
-        getDockingPoint(sourceMid, sourceBounds, 'b'),
-        { x: sourceMid.x, y: y + DEFAULT_CELL_HEIGHT },
-        { x: targetMid.x, y: y + DEFAULT_CELL_HEIGHT },
-        getDockingPoint(targetMid, targetBounds, 'b')
-      ];
-    } else {
+    if (col < maxCol - 1) {
 
-      // edge goes above
-      const bendY = sourceMid.y - offsetY;
+      // add element in next column
+      this.grid[row].length = maxCol;
+      this.grid[row][maxCol] = element;
+      this.grid[row][col] = null;
 
-      return [
-        getDockingPoint(sourceMid, sourceBounds, 't'),
-        { x: sourceMid.x, y: bendY },
-        { x: targetMid.x, y: bendY },
-        getDockingPoint(targetMid, targetBounds, 't')
-      ];
     }
   }
 
-  // connect horizontally
-  if (dY === 0) {
-    if (isDirectPathBlocked(source, target, layoutGrid)) {
+  adjustRowForMultipleIncoming(elements, currentElement) {
+    const results = elements.map(element => this.find(element));
 
-      // Route on bottom
-      return [
-        getDockingPoint(sourceMid, sourceBounds, 'b'),
-        { x: sourceMid.x, y: sourceMid.y + DEFAULT_CELL_HEIGHT / 2 },
-        { x: targetMid.x, y: sourceMid.y + DEFAULT_CELL_HEIGHT / 2 },
-        getDockingPoint(targetMid, targetBounds, 'b')
-      ];
-    } else {
+    // filter only rows that currently exist, excluding any future or non-existent rows
+    const lowestRow = Math.min(...results
+      .map(result => result[0])
+      .filter(row => row >= 0));
 
-      // if space is clear, connect directly
-      return [
-        getDockingPoint(sourceMid, sourceBounds, 'h', dockingSource),
-        getDockingPoint(targetMid, targetBounds, 'h', dockingTarget)
-      ];
+    const [ row , col ] = this.find(currentElement);
+
+    // if element doesn't already exist in current row, add element
+    if (lowestRow < row && !this.grid[lowestRow][col]) {
+      this.grid[lowestRow][col] = currentElement;
+      this.grid[row][col] = null;
     }
   }
 
-  // connect vertically
-  if (dX === 0) {
-    if (isDirectPathBlocked(source, target, layoutGrid)) {
+  adjustColumnForMultipleIncoming(elements, currentElement) {
+    const results = elements.map(element => this.find(element));
 
-      // Route parallel
-      const yOffset = -Math.sign(dY) * DEFAULT_CELL_HEIGHT / 2;
-      return [
-        getDockingPoint(sourceMid, sourceBounds, 'r'),
-        { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: sourceMid.y }, // out right
-        { x: targetMid.x + DEFAULT_CELL_WIDTH / 2, y: targetMid.y + yOffset },
-        { x: targetMid.x, y: targetMid.y + yOffset },
-        getDockingPoint(targetMid, targetBounds, Math.sign(yOffset) > 0 ? 'b' : 't')
-      ];
-    } else {
+    // filter only col that currently exist, excluding any future or non-existent col
+    const maxCol = Math.max(...results
+      .map(result => result[1])
+      .filter(col => col >= 0));
 
-      // if space is clear, connect directly
-      return [ getDockingPoint(sourceMid, sourceBounds, 'v', dockingSource),
-        getDockingPoint(targetMid, targetBounds, 'v', dockingTarget)
-      ];
+    const [ row , col ] = this.find(currentElement);
+
+    // add to the next column
+    if (maxCol + 1 > col) {
+      this.grid[row][maxCol + 1] = currentElement;
+      this.grid[row][col] = null;
     }
   }
 
-  const directManhattan = directManhattanConnect(source, target, layoutGrid);
+  getAllElements() {
+    const elements = [];
 
-  if (directManhattan) {
-    const startPoint = getDockingPoint(sourceMid, sourceBounds, directManhattan[0], dockingSource);
-    const endPoint = getDockingPoint(targetMid, targetBounds, directManhattan[1], dockingTarget);
+    for (let row = 0; row < this.grid.length; row++) {
+      for (let col = 0; col < this.grid[row].length; col++) {
+        const element = this.get(row, col);
 
-    const midPoint = directManhattan[0] === 'h' ? { x: endPoint.x, y: startPoint.y } : { x: startPoint.x, y: endPoint.y };
+        if (element) {
+          elements.push(element);
+        }
+      }
+    }
 
-    return [
-      startPoint,
-      midPoint,
-      endPoint
-    ];
+    return elements;
   }
-  const yOffset = -Math.sign(dY) * DEFAULT_CELL_HEIGHT / 2;
 
-  return [
-    getDockingPoint(sourceMid, sourceBounds, 'r', dockingSource),
-    { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: sourceMid.y }, // out right
-    { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: targetMid.y + yOffset }, // to target row
-    { x: targetMid.x - DEFAULT_CELL_WIDTH / 2, y: targetMid.y + yOffset }, // to target column
-    { x: targetMid.x - DEFAULT_CELL_WIDTH / 2, y: targetMid.y }, // to mid
-    getDockingPoint(targetMid, targetBounds, 'l', dockingTarget)
-  ];
-}
+  getGridDimensions() {
+    const numRows = this.grid.length;
+    let maxCols = 0;
 
-// helpers /////
-function coordinatesToPosition(row, col) {
-  return {
-    width: DEFAULT_CELL_WIDTH,
-    height: DEFAULT_CELL_HEIGHT,
-    x: col * DEFAULT_CELL_WIDTH,
-    y: row * DEFAULT_CELL_HEIGHT
-  };
-}
+    for (let i = 0; i < numRows; i++) {
+      const currentRowLength = this.grid[i].length;
+      if (currentRowLength > maxCols) {
+        maxCols = currentRowLength;
+      }
+    }
+
+    return [ numRows , maxCols ];
+  }
 
-function getBounds(element, row, col, attachedTo) {
-  const { width, height } = getDefaultSize(element);
+  elementsByPosition() {
+    const elements = [];
 
-  // Center in cell
-  if (!attachedTo) {
-    return {
-      width, height,
-      x: (col * DEFAULT_CELL_WIDTH) + (DEFAULT_CELL_WIDTH - width) / 2,
-      y: row * DEFAULT_CELL_HEIGHT + (DEFAULT_CELL_HEIGHT - height) / 2
-    };
+    this.grid.forEach((row, rowIndex) => {
+      row.forEach((element, colIndex) => {
+        if (!element) {
+          return;
+        }
+        elements.push({
+          element,
+          row: rowIndex,
+          col: colIndex
+        });
+      });
+    });
+
+    return elements;
   }
 
-  const hostBounds = getBounds(attachedTo, row, col);
+  getElementsTotal() {
+    const flattenedGrid = this.grid.flat();
+    const uniqueElements = new Set(flattenedGrid.filter(value => value));
+    return uniqueElements.size;
+  }
 
-  return {
-    width, height,
-    x: Math.round(hostBounds.x + hostBounds.width / 2 - width / 2),
-    y: Math.round(hostBounds.y + hostBounds.height - height / 2)
-  };
-}
+  /**
+   *
+   * @param {number} afterIndex - number is integer
+   * @param {number=} colCount - number is positive integer
+   */
+  createCol(afterIndex, colCount) {
+    this.grid.forEach((row, rowIndex) => {
+      this.expandRow(rowIndex, afterIndex, colCount);
+    });
+  }
 
-function isDirectPathBlocked(source, target, layoutGrid) {
-  const { row: sourceRow, col: sourceCol } = source.gridPosition;
-  const { row: targetRow, col: targetCol } = target.gridPosition;
+  /**
+   * @param {number} rowIndex - is positive integer
+   * @param {number} afterIndex - is integer
+   * @param {number=} colCount - is positive integer
+   */
+  expandRow(rowIndex, afterIndex, colCount) {
+    if (!Number.isInteger(rowIndex) || rowIndex < 0 || rowIndex > this.rowCount - 1) return;
 
-  const dX = targetCol - sourceCol;
-  const dY = targetRow - sourceRow;
+    const placeholder = Number.isInteger(colCount) && colCount > 0 ? Array(colCount) : Array(1);
 
-  let totalElements = 0;
+    const row = this.grid[rowIndex];
 
-  if (dX) {
-    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, { row: sourceRow, col: targetCol }).length;
+    if (!afterIndex && !Number.isInteger(afterIndex)) {
+      row.splice(row.length, 0, ...placeholder);
+    } else {
+      row.splice(afterIndex + 1, 0, ...placeholder);
+    }
   }
+}
 
-  if (dY) {
-    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: targetCol }, { row: targetRow, col: targetCol }).length;
+class DiFactory {
+  constructor(moddle) {
+    this.moddle = moddle;
   }
 
-  return totalElements > 2;
-}
+  create(type, attrs) {
+    return this.moddle.create(type, attrs || {});
+  }
 
-function directManhattanConnect(source, target, layoutGrid) {
-  const { row: sourceRow, col: sourceCol } = source.gridPosition;
-  const { row: targetRow, col: targetCol } = target.gridPosition;
+  createDiBounds(bounds) {
+    return this.create('dc:Bounds', bounds);
+  }
 
-  const dX = targetCol - sourceCol;
-  const dY = targetRow - sourceRow;
+  createDiLabel() {
+    return this.create('bpmndi:BPMNLabel', {
+      bounds: this.createDiBounds()
+    });
+  }
 
-  // Only directly connect left-to-right flow
-  if (!(dX > 0 && dY !== 0)) {
-    return;
+  createDiShape(semantic, bounds, attrs) {
+    return this.create('bpmndi:BPMNShape', minDash.assign({
+      bpmnElement: semantic,
+      bounds: this.createDiBounds(bounds)
+    }, attrs));
   }
 
-  // If below, go down then horizontal
-  if (dY > 0) {
-    let totalElements = 0;
-    const bendPoint = { row: targetRow, col: sourceCol };
-    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, bendPoint).length;
-    totalElements += layoutGrid.getElementsInRange(bendPoint, { row: targetRow, col: targetCol }).length;
+  createDiWaypoints(waypoints) {
+    var self = this;
 
-    return totalElements > 2 ? false : [ 'v', 'h' ];
-  } else {
+    return minDash.map(waypoints, function(pos) {
+      return self.createDiWaypoint(pos);
+    });
+  }
 
-    // If above, go horizontal than vertical
-    let totalElements = 0;
-    const bendPoint = { row: sourceRow, col: targetCol };
+  createDiWaypoint(point) {
+    return this.create('dc:Point', minDash.pick(point, [ 'x', 'y' ]));
+  }
 
-    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, bendPoint).length;
-    totalElements += layoutGrid.getElementsInRange(bendPoint, { row: targetRow, col: targetCol }).length;
+  createDiEdge(semantic, waypoints, attrs) {
+    return this.create('bpmndi:BPMNEdge', minDash.assign({
+      bpmnElement: semantic,
+      waypoint: this.createDiWaypoints(waypoints)
+    }, attrs));
+  }
 
-    return totalElements > 2 ? false : [ 'h', 'v' ];
+  createDiPlane(attrs) {
+    return this.create('bpmndi:BPMNPlane', attrs);
+  }
+
+  createDiDiagram(attrs) {
+    return this.create('bpmndi:BPMNDiagram', attrs);
   }
 }
 
@@ -629,13 +709,13 @@ var attacherHandler = {
     return nextElements;
   },
 
-  'createElementDi': ({ element, row, col, diFactory }) => {
-    const hostBounds = getBounds(element, row, col);
+  'createElementDi': ({ element, row, col, diFactory, shift }) => {
+    const hostBounds = getBounds(element, row, col, shift);
 
     const DIs = [];
     (element.attachers || []).forEach((att, i, arr) => {
       att.gridPosition = { row, col };
-      const bounds = getBounds(att, row, col, element);
+      const bounds = getBounds(att, row, col, shift, element);
 
       // distribute along lower edge
       bounds.x = hostBounds.x + (i + 1) * (hostBounds.width / (arr.length + 1)) - bounds.width / 2;
@@ -652,7 +732,7 @@ var attacherHandler = {
     return DIs;
   },
 
-  'createConnectionDi': ({ element, row, col, layoutGrid, diFactory }) => {
+  'createConnectionDi': ({ element, row, col, layoutGrid, diFactory, shift }) => {
     const attachers = element.attachers || [];
 
     return attachers.flatMap(att => {
@@ -665,11 +745,9 @@ var attacherHandler = {
         // Correct waypoints if they don't automatically attach to the bottom
         ensureExitBottom(att, waypoints, [ row, col ]);
 
-        const connectionDi = diFactory.createDiEdge(out, waypoints, {
+        return diFactory.createDiEdge(out, waypoints, {
           id: out.id + '_di'
         });
-
-        return connectionDi;
       });
     });
   }
@@ -698,12 +776,14 @@ function ensureExitBottom(source, waypoints, [ row, col ]) {
     return;
   }
 
+  const baseSourceGrid = source.grid || source.attachedToRef?.grid;
+
   if (waypoints.length === 2) {
     const newStart = [
       dockingPoint,
-      { x: dockingPoint.x, y: (row + 1) * DEFAULT_CELL_HEIGHT },
-      { x: (col + 1) * DEFAULT_CELL_WIDTH, y: (row + 1) * DEFAULT_CELL_HEIGHT },
-      { x: (col + 1) * DEFAULT_CELL_WIDTH, y: (row + 0.5) * DEFAULT_CELL_HEIGHT },
+      { x: dockingPoint.x, y: !baseSourceGrid ? (row + 1) * DEFAULT_CELL_HEIGHT : (row + baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+      { x: !baseSourceGrid ? (col + 1) * DEFAULT_CELL_WIDTH : (col + baseSourceGrid.getGridDimensions()[1] + 1) * DEFAULT_CELL_WIDTH, y: !baseSourceGrid ? (row + 1) * DEFAULT_CELL_HEIGHT : (row + baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+      { x: !baseSourceGrid ? (col + 1) * DEFAULT_CELL_WIDTH : (col + baseSourceGrid.getGridDimensions()[1] + 1) * DEFAULT_CELL_WIDTH, y: !baseSourceGrid ? (row + 0.5) * DEFAULT_CELL_HEIGHT : row * DEFAULT_CELL_HEIGHT + DEFAULT_CELL_HEIGHT / 2 },
     ];
 
     waypoints.splice(0, 1, ...newStart);
@@ -713,18 +793,17 @@ function ensureExitBottom(source, waypoints, [ row, col ]) {
   // add waypoints to exit bottom and connect to existing path
   const newStart = [
     dockingPoint,
-    { x: dockingPoint.x, y: (row + 1) * DEFAULT_CELL_HEIGHT },
-    { x: waypoints[1].x, y: (row + 1) * DEFAULT_CELL_HEIGHT },
+    { x: dockingPoint.x, y: !baseSourceGrid ? (row + 1) * DEFAULT_CELL_HEIGHT : (row + baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
+    { x: waypoints[1].x, y: !baseSourceGrid ? (row + 1) * DEFAULT_CELL_HEIGHT : (row + baseSourceGrid.getGridDimensions()[0] + 1) * DEFAULT_CELL_HEIGHT },
   ];
 
   waypoints.splice(0, 1, ...newStart);
-  return;
 }
 
 var elementHandler = {
-  'createElementDi': ({ element, row, col, diFactory }) => {
+  'createElementDi': ({ element, row, col, diFactory, shift }) => {
 
-    const bounds = getBounds(element, row, col);
+    const bounds = getBounds(element, row, col, shift);
 
     const options = {
       id: element.id + '_di'
@@ -734,6 +813,10 @@ var elementHandler = {
       options.isMarkerVisible = true;
     }
 
+    if (element.isExpanded) {
+      options.isExpanded = true;
+    }
+
     const shapeDi = diFactory.createDiShape(element, bounds, options);
     element.di = shapeDi;
     element.gridPosition = { row, col };
@@ -865,7 +948,7 @@ const handlers = [ elementHandler, incomingHandler, outgoingHandler, attacherHan
 
 class Layouter {
   constructor() {
-    this.moddle = new BPMNModdle();
+    this.moddle = new bpmnModdle.BpmnModdle();
     this.diFactory = new DiFactory(this.moddle);
     this._handlers = handlers;
   }
@@ -878,23 +961,76 @@ class Layouter {
   }
 
   async layoutProcess(xml) {
-    const { rootElement } = await this.moddle.fromXML(xml);
+    const moddleObj = await this.moddle.fromXML(xml);
+    const { rootElement } = moddleObj;
 
     this.diagram = rootElement;
 
-    const root = this.getProcess();
+    const firstRootProcess = this.getProcess();
+
+    if (firstRootProcess) {
+
+      this.setExpandedPropertyToModdleElements(moddleObj);
+
+      this.setExecutedProcesses(firstRootProcess);
+
+      this.createGridsForProcesses();
 
-    if (root) {
       this.cleanDi();
-      this.handlePlane(root);
+
+      this.createRootDi(firstRootProcess);
+
+      this.drawProcesses();
     }
 
     return (await this.moddle.toXML(this.diagram, { format: true })).xml;
   }
 
-  handlePlane(planeElement) {
-    const layout = this.createGridLayout(planeElement);
-    this.generateDi(planeElement, layout);
+  createGridsForProcesses() {
+    const processes = this.layoutedProcesses.sort((a, b) => b.level - a.level);
+
+    // create and add grids for each process
+    // root processes should be processed last for element expanding
+    for (const process of processes) {
+
+      // add base grid with collapsed elements
+      process.grid = this.createGridLayout(process);
+
+      expandGridHorizontally(process.grid);
+      expandGridVertically(process.grid);
+
+      if (process.isExpanded) {
+        const [ rowCount, colCount ] = process.grid.getGridDimensions();
+        if (rowCount === 0) process.grid.createRow();
+        if (colCount === 0) process.grid.createCol();
+      }
+
+    }
+  }
+
+  setExpandedPropertyToModdleElements(bpmnModel) {
+    const allElements = bpmnModel.elementsById;
+    if (allElements) {
+      for (const element of Object.values(allElements)) {
+        if (element.$type === 'bpmndi:BPMNShape' && element.isExpanded === true) element.bpmnElement.isExpanded = true;
+      }
+    }
+  }
+
+  setExecutedProcesses(firstRootProcess) {
+    this.layoutedProcesses = [];
+
+    const executionStack = [ firstRootProcess ];
+
+    while (executionStack.length > 0) {
+      const executedProcess = executionStack.pop();
+      this.layoutedProcesses.push(executedProcess);
+      executedProcess.level = executedProcess.$parent === this.diagram ? 0 : executedProcess.$parent.level + 1;
+
+      const nextProcesses = executedProcess.flowElements?.filter(flowElement => flowElement.$type === 'bpmn:SubProcess') || [];
+
+      executionStack.splice(executionStack.length, 0, ...nextProcesses);
+    }
   }
 
   cleanDi() {
@@ -912,20 +1048,16 @@ class Layouter {
       return grid;
     }
 
-    const boundaryEvents = flowElements.filter(el => isBoundaryEvent(el));
-    boundaryEvents.forEach(boundaryEvent => {
-      const attachedTask = boundaryEvent.attachedToRef;
-      const attachers = attachedTask.attachers || [];
-      attachers.push(boundaryEvent);
-      attachedTask.attachers = attachers;
-    });
+    bindBoundaryEventsWithHosts (flowElements);
 
     // Depth-first-search
     const visited = new Set();
     while (visited.size < elements.filter(element => !element.attachedToRef).length) {
-
       const startingElements = flowElements.filter(el => {
-        return !isConnection(el) && !isBoundaryEvent(el) && (!el.incoming || el.length === 0) && !visited.has(el);
+        return !isConnection(el) &&
+            !isBoundaryEvent(el) &&
+            (!el.incoming || !hasOtherIncoming(el)) &&
+            !visited.has(el);
       });
 
       const stack = [ ...startingElements ];
@@ -937,7 +1069,7 @@ class Layouter {
 
       this.handleGrid(grid,visited,stack);
 
-      if (grid.getElementsTotal() != elements.length) {
+      if (grid.getElementsTotal() !== elements.length) {
         const gridElements = grid.getAllElements();
         const missingElements = elements.filter(el => !gridElements.includes(el) && !isBoundaryEvent(el));
         if (missingElements.length > 0) {
@@ -951,30 +1083,17 @@ class Layouter {
     return grid;
   }
 
-  generateDi(root, layoutGrid) {
+  generateDi(layoutGrid , shift, procDi) {
     const diFactory = this.diFactory;
 
-    // Step 0: Create Root element
-    const diagram = this.diagram;
-
-    var planeDi = diFactory.createDiPlane({
-      id: 'BPMNPlane_' + root.id,
-      bpmnElement: root
-    });
-    var diagramDi = diFactory.createDiDiagram({
-      id: 'BPMNDiagram_' + root.id,
-      plane: planeDi
-    });
-
-    // deepest subprocess is added first - insert at the front
-    diagram.diagrams.unshift(diagramDi);
+    const prePlaneElement = procDi ? procDi : this.diagram.diagrams[0];
 
-    const planeElement = planeDi.get('planeElement');
+    const planeElement = prePlaneElement.plane.get('planeElement');
 
     // Step 1: Create DI for all elements
     layoutGrid.elementsByPosition().forEach(({ element, row, col }) => {
       const dis = this
-        .handle('createElementDi', { element, row, col, layoutGrid, diFactory })
+        .handle('createElementDi', { element, row, col, layoutGrid, diFactory, shift })
         .flat();
 
       planeElement.push(...dis);
@@ -983,7 +1102,7 @@ class Layouter {
     // Step 2: Create DI for all connections
     layoutGrid.elementsByPosition().forEach(({ element, row, col }) => {
       const dis = this
-        .handle('createConnectionDi', { element, row, col, layoutGrid, diFactory })
+        .handle('createConnectionDi', { element, row, col, layoutGrid, diFactory, shift })
         .flat();
 
       planeElement.push(...dis);
@@ -994,10 +1113,6 @@ class Layouter {
     while (stack.length > 0) {
       const currentElement = stack.pop();
 
-      if (is(currentElement, 'bpmn:SubProcess')) {
-        this.handlePlane(currentElement);
-      }
-
       const nextElements = this.handle('addToGrid', { element: currentElement, grid, visited, stack });
 
       nextElements.flat().forEach(el => {
@@ -1010,6 +1125,146 @@ class Layouter {
   getProcess() {
     return this.diagram.get('rootElements').find(el => el.$type === 'bpmn:Process');
   }
+
+  createRootDi(processes) {
+    this.createProcessDi(processes);
+  }
+
+  createProcessDi(element) {
+    const diFactory = this.diFactory;
+
+    const planeDi = diFactory.createDiPlane({
+      id: 'BPMNPlane_' + element.id,
+      bpmnElement: element
+    });
+    const diagramDi = diFactory.createDiDiagram({
+      id: 'BPMNDiagram_' + element.id,
+      plane: planeDi
+    });
+
+    const diagram = this.diagram;
+
+    diagram.diagrams.push(diagramDi);
+
+    return diagramDi;
+  }
+
+  /**
+   * Draw processes.
+   * Root processes should be processed first for element expanding
+   */
+  drawProcesses() {
+    const sortedProcesses = this.layoutedProcesses.sort((a, b) => a.level - b.level);
+
+    for (const process of sortedProcesses) {
+
+      // draw processes in expanded elements
+      if (process.isExpanded) {
+        const baseProcDi = this.getElementDi(process);
+        const diagram = this.getProcDi(baseProcDi);
+        let { x, y } = baseProcDi.bounds;
+        const { width, height } = getDefaultSize(process);
+        x += DEFAULT_CELL_WIDTH / 2 - width / 4;
+        y += DEFAULT_CELL_HEIGHT - height - height / 4;
+        this.generateDi(process.grid, { x, y }, diagram);
+        continue;
+      }
+
+      // draw other processes
+      const diagram = this.diagram.diagrams.find(diagram => diagram.plane.bpmnElement === process);
+      this.generateDi(process.grid, { x: 0, y: 0 }, diagram);
+    }
+  }
+
+  getElementDi(element) {
+    return this.diagram.diagrams
+      .map(diagram => diagram.plane.planeElement).flat()
+      .find(item => item.bpmnElement === element);
+  }
+
+  getProcDi(element) {
+    return this.diagram.diagrams.find(diagram => diagram.plane.planeElement.includes(element));
+  }
+}
+
+function bindBoundaryEventsWithHosts(elements) {
+  const boundaryEvents = elements.filter(element => isBoundaryEvent(element));
+  boundaryEvents.forEach(boundaryEvent => {
+    const attachedTask = boundaryEvent.attachedToRef;
+    const attachers = attachedTask.attachers || [];
+    attachers.push(boundaryEvent);
+    attachedTask.attachers = attachers;
+  });
+}
+
+/**
+ * Check grid by columns.
+ * If column has elements with isExpanded === true,
+ * find the maximum size of elements grids and expand the parent grid horizontally.
+ * @param grid
+ */
+function expandGridHorizontally(grid) {
+  const [ numRows , maxCols ] = grid.getGridDimensions();
+  for (let i = maxCols - 1 ; i >= 0; i--) {
+    const elementsInCol = [];
+    for (let j = 0; j < numRows; j++) {
+      const candidate = grid.get(j, i);
+      if (candidate && candidate.isExpanded) elementsInCol.push(candidate);
+    }
+
+    if (elementsInCol.length === 0) continue;
+
+    const maxColCount = elementsInCol.reduce((acc,cur) => {
+      const [ ,curCols ] = cur.grid.getGridDimensions();
+      if (acc === undefined || curCols > acc) return curCols;
+      return acc;
+    }, undefined);
+
+    const shift = !maxColCount ? 2 : maxColCount;
+    grid.createCol(i, shift);
+  }
+}
+
+/**
+ * Check grid by rows.
+ * If row has elements with isExpanded === true,
+ * find the maximum size of elements grids and expand the parent grid vertically.
+ * @param grid
+ */
+function expandGridVertically(grid) {
+  const [ numRows , maxCols ] = grid.getGridDimensions();
+
+  for (let i = numRows - 1 ; i >= 0; i--) {
+    const elementsInRow = [];
+    for (let j = 0; j < maxCols; j++) {
+      const candidate = grid.get(i, j);
+      if (candidate && candidate.isExpanded) elementsInRow.push(candidate);
+    }
+
+    if (elementsInRow.length === 0) continue;
+
+    const maxRowCount = elementsInRow.reduce((acc,cur) => {
+      const [ curRows ] = cur.grid.getGridDimensions();
+      if (acc === undefined || curRows > acc) return curRows;
+      return acc;
+    }, undefined);
+
+    const shift = !maxRowCount ? 1 : maxRowCount;
+
+    // expand the parent grid vertically
+    for (let index = 0; index < shift; index++) {
+      grid.createRow(i);
+    }
+  }
+}
+
+function hasOtherIncoming(element) {
+  const fromHost = element.incoming?.filter(edge => edge.sourceRef !== element && edge.sourceRef.attachedToRef === undefined) || [];
+
+  const fromAttached = element.incoming?.filter(edge => edge.sourceRef !== element
+      && edge.sourceRef.attachedToRef !== element);
+
+  return fromHost?.length > 0 || fromAttached?.length > 0;
 }
 
 function layoutProcess(xml) {