[FEAT] Render Collapsed Embedded Sub-Process (#378)

Co-authored-by: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com>

src/component/mxgraph/StyleUtils.ts

@@ -23,6 +23,7 @@ export enum MarkerIdentifier {
 export enum StyleDefault {
   STROKE_WIDTH_THIN = 2,
   STROKE_WIDTH_THICK = 5,
+  TASK_SHAPE_BOTTOM_MARGIN = 7,
   DEFAULT_FILL_COLOR = 'White',
   DEFAULT_STROKE_COLOR = 'Black',
   DEFAULT_FONT_FAMILY = 'Arial, Helvetica, sans-serif', // define our own to not depend on eventual mxGraph default change

src/component/mxgraph/extension/MxScaleFactorCanvas.ts

@@ -15,6 +15,7 @@
  */
 import { mxgraph } from 'ts-mxgraph';
 import { ShapeConfiguration, Size } from '../shape/IconPainter';
+import { StyleDefault } from '../StyleUtils';
 
 /**
  * Scale dimensions passed to the method of the original {@link mxgraph.mxXmlCanvas2D}
@@ -111,4 +112,10 @@ export class MxCanvasUtil {
     const insetH = (shape.h - iconSize.height) / 2;
     c.translate(shape.x + insetW, shape.y + insetH);
   }
+
+  public static translateIconToShapeBottomCenter(canvas: mxgraph.mxXmlCanvas2D, shape: ShapeConfiguration, iconSize: Size): void {
+    const insetW = (shape.w - iconSize.width) / 2;
+    const insetH = shape.h - iconSize.height - StyleDefault.TASK_SHAPE_BOTTOM_MARGIN;
+    canvas.translate(shape.x + insetW, shape.y + insetH);
+  }
 }

src/component/mxgraph/shape/IconPainter.ts

@@ -502,4 +502,29 @@ export default class IconPainter {
     canvas.close();
     canvas.fillAndStroke();
   }
+
+  public static paintExpandIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+    this.updateCanvasStyle(c, icon);
+
+    const initialIconSize = { width: 16, height: 16 };
+    const iconSize = this.calculateIconSize(initialIconSize, icon, shape, ratioFromParent);
+    MxCanvasUtil.translateIconToShapeBottomCenter(c, shape, iconSize);
+
+    const w = iconSize.width;
+    const h = iconSize.height;
+
+    // Rounded rectangle
+    c.roundrect(0, 0, w, h, 2, 2);
+    c.stroke();
+
+    // Cross
+    c.begin();
+    c.moveTo(w / 2, h / 4);
+    c.lineTo(w / 2, (h * 3) / 4);
+    c.close();
+    c.moveTo(w / 4, h / 2);
+    c.lineTo((w * 3) / 4, h / 2);
+    c.close();
+    c.fillAndStroke();
+  }
 }

src/component/mxgraph/shape/activity-shapes.ts

@@ -119,11 +119,8 @@ export class SubProcessShape extends BaseActivityShape {
     }
 
     if (StyleUtils.getBpmnIsExpanded(this.style) === 'false') {
-      c.setStrokeColor('Fuchsia');
-
-      if (subProcessKind === ShapeBpmnSubProcessKind.EMBEDDED) {
-        c.setFillColor('Lavender');
-      } else if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) {
+      if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) {
+        c.setStrokeColor('Fuchsia');
         c.setFillColor('LightCyan');
       }
     }
@@ -135,4 +132,16 @@ export class SubProcessShape extends BaseActivityShape {
     xmlCanvas.setDashed(StyleUtils.isDashed(this.style), StyleUtils.getFixDash(this.style));
     xmlCanvas.setDashPattern(StyleUtils.getDashPattern(this.style));
   }
+
+  public paintForeground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void {
+    super.paintForeground(c, x, y, w, h);
+
+    if (StyleUtils.getBpmnIsExpanded(this.style) === 'false') {
+      const subProcessKind = StyleUtils.getBpmnSubProcessKind(this.style);
+      if (subProcessKind === ShapeBpmnSubProcessKind.EMBEDDED) {
+        const paintParameter = IconPainter.buildPaintParameter((c as unknown) as mxgraph.mxXmlCanvas2D, x, y, w, h, (this as unknown) as mxgraph.mxShape, 0.17, false, 1.5);
+        IconPainter.paintExpandIcon(paintParameter);
+      }
+    }
+  }
 }