bpmn-auto-layout 0.3.0 → 0.4.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import BPMNModdle from 'bpmn-moddle';
-import { assign, map, pick } from 'min-dash';
+import { assign, map, pick, isFunction } from 'min-dash';
 
 function isConnection(element) {
   return !!element.sourceRef;
@@ -14,8 +14,34 @@ class Grid {
     this.grid = [];
   }
 
-  add(element) {
-    this._addStart(element);
+  add(element, position) {
+    if (!position) {
+      this._addStart(element);
+      return;
+    }
+
+    const [ row, col ] = position;
+    if (!row && !col) {
+      this._addStart(element);
+    }
+
+    if (!this.grid[row]) {
+      this.grid[row] = [];
+    }
+
+    if (this.grid[row][col]) {
+      throw new Error('Grid is occupied please ensure the place you insert at is not occupied');
+    }
+
+    this.grid[row][col] = element;
+  }
+
+  createRow(afterIndex) {
+    if (!afterIndex) {
+      this.grid.push([]);
+    }
+
+    this.grid.splice(afterIndex + 1, 0, []);
   }
 
   _addStart(element) {
@@ -215,7 +241,7 @@ function is(element, type) {
 }
 
 const DEFAULT_CELL_WIDTH = 150;
-const DEFAULT_CELL_HEIGHT = 110;
+const DEFAULT_CELL_HEIGHT = 140;
 
 function getMid(bounds) {
   return {
@@ -281,18 +307,19 @@ function connectElements(source, target, layoutGrid) {
 
   // 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: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: sourceMid.y },
-      { x: sourceMid.x + DEFAULT_CELL_WIDTH / 2, y: sourceMid.y - DEFAULT_CELL_HEIGHT / 2 },
-      { x: targetMid.x, y: sourceMid.y - DEFAULT_CELL_HEIGHT / 2 },
+      { 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)
     ];
   }
 
   // connect horizontally
   if (dY === 0) {
-    if (layoutGrid.getElementsInRange(source.gridPosition, target.gridPosition).length > 2) {
+    if (isDirectPathBlocked(source, target, layoutGrid)) {
 
       // Route on top
       return [
@@ -313,7 +340,7 @@ function connectElements(source, target, layoutGrid) {
 
   // connect vertically
   if (dX === 0) {
-    if (layoutGrid.getElementsInRange(source.gridPosition, target.gridPosition).length > 2) {
+    if (isDirectPathBlocked(source, target, layoutGrid)) {
 
       // Route parallel
       const yOffset = -Math.sign(dY) * DEFAULT_CELL_HEIGHT / 2;
@@ -333,6 +360,20 @@ function connectElements(source, target, layoutGrid) {
     }
   }
 
+  const directManhattan = directManhattanConnect(source, target, layoutGrid);
+
+  if (directManhattan) {
+    const startPoint = getDockingPoint(sourceMid, sourceBounds, directManhattan[0], dockingSource);
+    const endPoint = getDockingPoint(targetMid, targetBounds, directManhattan[1], dockingTarget);
+
+    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;
 
   return [
@@ -346,6 +387,15 @@ function connectElements(source, target, layoutGrid) {
 }
 
 // helpers /////
+function coordinatesToPosition(row, col) {
+  return {
+    width: DEFAULT_CELL_WIDTH,
+    height: DEFAULT_CELL_HEIGHT,
+    x: col * DEFAULT_CELL_WIDTH,
+    y: row * DEFAULT_CELL_HEIGHT
+  };
+}
+
 function getBounds(element, row, col, attachedTo) {
   const { width, height } = getDefaultSize(element);
 
@@ -367,10 +417,264 @@ function getBounds(element, row, col, attachedTo) {
   };
 }
 
+function isDirectPathBlocked(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;
+
+  let totalElements = 0;
+
+  if (dX) {
+    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: sourceCol }, { row: sourceRow, col: targetCol }).length;
+  }
+
+  if (dY) {
+    totalElements += layoutGrid.getElementsInRange({ row: sourceRow, col: targetCol }, { row: targetRow, col: targetCol }).length;
+  }
+
+  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;
+  }
+
+  // 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' ];
+  }
+}
+
+var attacherHandler = {
+  'addToGrid': ({ element, grid, visited }) => {
+    const nextElements = [];
+
+    const attachedOutgoing = (element.attachers || [])
+      .map(att => att.outgoing.reverse())
+      .flat()
+      .map(out => out.targetRef);
+
+    // handle boundary events
+    attachedOutgoing.forEach((nextElement, index, arr) => {
+      if (visited.has(nextElement)) {
+        return;
+      }
+
+      // Add below and to the right of the element
+      insertIntoGrid(nextElement, element, grid);
+      nextElements.push(nextElement);
+    });
+
+    return nextElements;
+  },
+
+  'createElementDi': ({ element, row, col, diFactory }) => {
+    const hostBounds = getBounds(element, row, col);
+
+    const DIs = [];
+    (element.attachers || []).forEach((att, i, arr) => {
+      att.gridPosition = { row, col };
+      const bounds = getBounds(att, row, col, element);
+
+      // distribute along lower edge
+      bounds.x = hostBounds.x + (i + 1) * (hostBounds.width / (arr.length + 1)) - bounds.width / 2;
+
+      const attacherDi = diFactory.createDiShape(att, bounds, {
+        id: att.id + '_di'
+      });
+      att.di = attacherDi;
+      att.gridPosition = { row, col };
+
+      DIs.push(attacherDi);
+    });
+
+    return DIs;
+  },
+
+  'createConnectionDi': ({ element, row, col, layoutGrid, diFactory }) => {
+    const attachers = element.attachers || [];
+
+    return attachers.flatMap(att => {
+      const outgoing = att.outgoing || [];
+
+      return outgoing.map(out => {
+        const target = out.targetRef;
+        const waypoints = connectElements(att, target, layoutGrid);
+
+        // Correct waypoints if they don't automatically attach to the bottom
+        ensureExitBottom(att, waypoints, [ row, col ]);
+
+        const connectionDi = diFactory.createDiEdge(out, waypoints, {
+          id: out.id + '_di'
+        });
+
+        return connectionDi;
+      });
+    });
+  }
+};
+
+
+function insertIntoGrid(newElement, host, grid) {
+  const [ row, col ] = grid.find(host);
+
+  // Grid is occupied
+  if (grid.get(row + 1, col) || grid.get(row + 1, col + 1)) {
+    grid.createRow(row);
+  }
+
+  // Host has element directly after, add space
+  if (grid.get(row, col + 1)) {
+    grid.addAfter(host, null);
+  }
+
+  grid.add(newElement, [ row + 1, col + 1 ]);
+}
+
+function ensureExitBottom(source, waypoints, [ row, col ]) {
+
+  const sourceDi = source.di;
+  const sourceBounds = sourceDi.get('bounds');
+  const sourceMid = getMid(sourceBounds);
+
+  const dockingPoint = getDockingPoint(sourceMid, sourceBounds, 'b');
+  if (waypoints[0].x === dockingPoint.x && waypoints[0].y === dockingPoint.y) {
+    return;
+  }
+
+  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 },
+    ];
+
+    waypoints.splice(0, 1, ...newStart);
+    return;
+  }
+
+  // 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 },
+  ];
+
+  waypoints.splice(0, 1, ...newStart);
+  return;
+}
+
+var elementHandler = {
+  'createElementDi': ({ element, row, col, diFactory }) => {
+
+    const bounds = getBounds(element, row, col);
+
+    const options = {
+      id: element.id + '_di'
+    };
+
+    if (is(element, 'bpmn:ExclusiveGateway')) {
+      options.isMarkerVisible = true;
+    }
+
+    const shapeDi = diFactory.createDiShape(element, bounds, options);
+    element.di = shapeDi;
+    element.gridPosition = { row, col };
+
+    return shapeDi;
+  }
+};
+
+var outgoingHandler = {
+  'addToGrid': ({ element, grid, visited }) => {
+    const nextElements = [];
+
+    // Handle outgoing paths
+    const outgoing = (element.outgoing || [])
+      .map(out => out.targetRef)
+      .filter(el => el);
+
+    let previousElement = null;
+    outgoing.forEach((nextElement, index, arr) => {
+      if (visited.has(nextElement)) {
+        return;
+      }
+
+      if (!previousElement) {
+        grid.addAfter(element, nextElement);
+      }
+      else {
+        grid.addBelow(arr[index - 1], nextElement);
+      }
+
+      // Is self-looping
+      if (nextElement !== element) {
+        previousElement = nextElement;
+      }
+
+      nextElements.unshift(nextElement);
+      visited.add(nextElement);
+    });
+
+    return nextElements;
+  },
+  'createConnectionDi': ({ element, row, col, layoutGrid, diFactory }) => {
+    const outgoing = element.outgoing || [];
+
+    return outgoing.map(out => {
+      const target = out.targetRef;
+      const waypoints = connectElements(element, target, layoutGrid);
+
+      const connectionDi = diFactory.createDiEdge(out, waypoints, {
+        id: out.id + '_di'
+      });
+
+      return connectionDi;
+    });
+
+  }
+};
+
+const handlers = [ elementHandler, outgoingHandler, attacherHandler ];
+
 class Layouter {
   constructor() {
     this.moddle = new BPMNModdle();
     this.diFactory = new DiFactory(this.moddle);
+    this._handlers = handlers;
+  }
+
+  handle(operation, options) {
+    return this._handlers
+      .filter(handler => isFunction(handler[operation]))
+      .map(handler => handler[operation](options));
+
   }
 
   async layoutProcess(xml) {
@@ -398,7 +702,6 @@ class Layouter {
   createGridLayout(root) {
     const grid = new Grid();
 
-    // const process = this.getProcess();
     const flowElements = root.flowElements;
 
     const startingElements = flowElements.filter(el => {
@@ -429,54 +732,11 @@ class Layouter {
         this.handlePlane(currentElement);
       }
 
-      // Handle outgoing paths
-      const outgoing = (currentElement.outgoing || [])
-        .map(out => out.targetRef)
-        .filter(el => el);
-
-      let previousElement = null;
-      outgoing.forEach((nextElement, index, arr) => {
-        if (visited.has(nextElement)) {
-          return;
-        }
-
-        if (!previousElement) {
-          grid.addAfter(currentElement, nextElement);
-        }
-        else {
-          grid.addBelow(arr[index - 1], nextElement);
-        }
-
-        // Is self-looping
-        if (nextElement !== currentElement) {
-          previousElement = nextElement;
-        }
-      });
-
-      const attachedOutgoing = (currentElement.attachers || [])
-        .map(att => att.outgoing)
-        .flat()
-        .map(out => out.targetRef);
+      const nextElements = this.handle('addToGrid', { element: currentElement, grid, visited });
 
-      // handle boundary events
-      attachedOutgoing.forEach((nextElement, index, arr) => {
-        if (visited.has(nextElement)) {
-          return;
-        }
-
-        const below = arr[index - 1] || currentElement;
-        grid.addBelow(below, nextElement);
-        stack.push(nextElement);
-        visited.add(nextElement);
-      });
-
-      // add to stack in reverse order: first element should be first of the stack
-      outgoing.reverse().forEach(el => {
-        if (visited.has(el)) {
-          return;
-        }
-        visited.add(el);
+      nextElements.flat().forEach(el => {
         stack.push(el);
+        visited.add(el);
       });
     }
 
@@ -505,62 +765,20 @@ class Layouter {
 
     // Step 1: Create DI for all elements
     layoutGrid.elementsByPosition().forEach(({ element, row, col }) => {
-      const bounds = getBounds(element, row, col);
+      const dis = this
+        .handle('createElementDi', { element, row, col, layoutGrid, diFactory })
+        .flat();
 
-      const shapeDi = diFactory.createDiShape(element, bounds, {
-        id: element.id + '_di'
-      });
-      element.di = shapeDi;
-      element.gridPosition = { row, col };
-
-      planeElement.push(shapeDi);
-
-      // handle attachers
-      (element.attachers || []).forEach(att => {
-        att.gridPosition = { row, col };
-        const attacherBounds = getBounds(att, row, col, element);
-
-        const attacherDi = diFactory.createDiShape(att, attacherBounds, {
-          id: att.id + '_di'
-        });
-        att.di = attacherDi;
-        att.gridPosition = { row, col };
-
-        planeElement.push(attacherDi);
-      });
+      planeElement.push(...dis);
     });
 
     // Step 2: Create DI for all connections
     layoutGrid.elementsByPosition().forEach(({ element, row, col }) => {
-      const outgoing = element.outgoing || [];
-
-      outgoing.forEach(out => {
-        const target = out.targetRef;
-        const waypoints = connectElements(element, target, layoutGrid);
-
-        const connectionDi = diFactory.createDiEdge(out, waypoints, {
-          id: out.id + '_di'
-        });
-
-        planeElement.push(connectionDi);
-      });
-
-      // handle attachers
-      (element.attachers || []).forEach(att => {
-        const outgoing = att.outgoing || [];
-
-        outgoing.forEach(out => {
-          const target = out.targetRef;
-          const waypoints = connectElements(att, target, layoutGrid);
-
-          const connectionDi = diFactory.createDiEdge(out, waypoints, {
-            id: out.id + '_di'
-          });
-
-          planeElement.push(connectionDi);
-        });
-      });
+      const dis = this
+        .handle('createConnectionDi', { element, row, col, layoutGrid, diFactory })
+        .flat();
 
+      planeElement.push(...dis);
     });
   }