[REFACTOR] Call position methods in PaintParameter

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

@@ -17,6 +17,7 @@ import StyleUtils, { StyleDefault } from '../StyleUtils';
 import { buildPaintParameter, IconPainterProvider, PaintParameter } from './render/IconPainter';
 import { ShapeBpmnSubProcessKind } from '../../../model/bpmn/shape/ShapeBpmnSubProcessKind';
 import { ShapeBpmnMarkerKind } from '../../../model/bpmn/shape/ShapeBpmnMarkerKind';
+import BpmnCanvas from './render/BpmnCanvas';
 
 export abstract class BaseActivityShape extends mxRectangleShape {
   protected iconPainter = IconPainterProvider.get();
@@ -40,6 +41,8 @@ export abstract class BaseActivityShape extends mxRectangleShape {
   protected paintMarkerIcons(paintParameter: PaintParameter): void {
     const markers = StyleUtils.getBpmnMarkers(this.style);
     if (markers) {
+      paintParameter = { ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginToShapeBottomLeft() };
+
       markers.split(',').forEach(marker => {
         switch (marker) {
           case ShapeBpmnMarkerKind.LOOP:
@@ -52,7 +55,7 @@ export abstract class BaseActivityShape extends mxRectangleShape {
             this.iconPainter.paintParallelMultiInstanceIcon(paintParameter);
             break;
           case ShapeBpmnMarkerKind.EXPAND:
-            this.iconPainter.paintExpandIcon(paintParameter);
+            this.iconPainter.paintExpandIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginToShapeBottomCenter() });
             break;
         }
         // Restore original configuration to avoid side effects if the iconPainter changed the canvas configuration (colors, ....)
@@ -96,7 +99,7 @@ export class ServiceTaskShape extends BaseTaskShape {
   }
 
   protected paintTaskIcon(paintParameter: PaintParameter): void {
-    this.iconPainter.paintGearIcon(paintParameter);
+    this.iconPainter.paintGearIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginPosition(20) });
   }
 }
 
@@ -106,7 +109,7 @@ export class UserTaskShape extends BaseTaskShape {
   }
 
   protected paintTaskIcon(paintParameter: PaintParameter): void {
-    this.iconPainter.paintWomanIcon(paintParameter);
+    this.iconPainter.paintWomanIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginPosition(20) });
   }
 }
 

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

@@ -16,6 +16,7 @@
 import { ShapeBpmnEventKind } from '../../../model/bpmn/shape/ShapeBpmnEventKind';
 import { PaintParameter, buildPaintParameter, IconPainterProvider } from './render/IconPainter';
 import StyleUtils, { StyleDefault } from '../StyleUtils';
+import BpmnCanvas from './render/BpmnCanvas';
 
 abstract class EventShape extends mxEllipse {
   protected iconPainter = IconPainterProvider.get();
@@ -24,11 +25,19 @@ abstract class EventShape extends mxEllipse {
   private iconPainters: Map<ShapeBpmnEventKind, (paintParameter: PaintParameter) => void> = new Map([
     [ShapeBpmnEventKind.MESSAGE, (paintParameter: PaintParameter) => this.iconPainter.paintEnvelopeIcon({ ...paintParameter, ratioFromParent: 0.5 })],
     [ShapeBpmnEventKind.TERMINATE, (paintParameter: PaintParameter) => this.iconPainter.paintCircleIcon({ ...paintParameter, ratioFromParent: 0.6 })],
-    [ShapeBpmnEventKind.TIMER, (paintParameter: PaintParameter) => this.iconPainter.paintClockIcon(paintParameter)],
+    [
+      ShapeBpmnEventKind.TIMER,
+      (paintParameter: PaintParameter) => this.iconPainter.paintClockIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginPosition(5) }),
+    ],
     [
       ShapeBpmnEventKind.SIGNAL,
       (paintParameter: PaintParameter) =>
-        this.iconPainter.paintTriangleIcon({ ...paintParameter, ratioFromParent: 0.55, icon: { ...paintParameter.icon, strokeWidth: StyleDefault.STROKE_WIDTH_THIN.valueOf() } }),
+        this.iconPainter.paintTriangleIcon({
+          ...paintParameter,
+          ratioFromParent: 0.55,
+          icon: { ...paintParameter.icon, strokeWidth: StyleDefault.STROKE_WIDTH_THIN.valueOf() },
+          setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginPosition(4),
+        }),
     ],
   ]);
 

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

@@ -15,6 +15,7 @@
  */
 import { StyleDefault } from '../StyleUtils';
 import { PaintParameter, buildPaintParameter, IconPainterProvider } from './render/IconPainter';
+import BpmnCanvas from './render/BpmnCanvas';
 
 abstract class GatewayShape extends mxRhombus {
   protected iconPainter = IconPainterProvider.get();
@@ -42,7 +43,7 @@ export class ExclusiveGatewayShape extends GatewayShape {
   }
 
   protected paintInnerShape(paintParameter: PaintParameter): void {
-    this.iconPainter.paintXCrossIcon(paintParameter);
+    this.iconPainter.paintXCrossIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginPosition(4) });
   }
 }
 
@@ -52,7 +53,7 @@ export class ParallelGatewayShape extends GatewayShape {
   }
 
   protected paintInnerShape(paintParameter: PaintParameter): void {
-    this.iconPainter.paintPlusCrossIcon(paintParameter);
+    this.iconPainter.paintPlusCrossIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginPosition(4) });
   }
 }
 

src/component/mxgraph/shape/render/BpmnCanvas.ts

@@ -70,11 +70,10 @@ export default class BpmnCanvas {
 
   private readonly shapeConfiguration: ShapeConfiguration;
 
-  constructor(config: BpmnCanvasConfiguration) {
-    this.c = config.mxCanvas;
-    this.shapeConfiguration = config.shapeConfiguration; // TODO clone?
+  constructor({ mxCanvas, shapeConfiguration, iconConfiguration }: BpmnCanvasConfiguration) {
+    this.c = mxCanvas;
+    this.shapeConfiguration = shapeConfiguration; // TODO clone?
 
-    const iconConfiguration = config.iconConfiguration;
     this.iconOriginalSize = iconConfiguration.originalSize;
 
     const ratioFromShape = iconConfiguration.ratioFromShape;
@@ -87,7 +86,8 @@ export default class BpmnCanvas {
       this.scaleY = 1;
     }
 
-    this.updateCanvasStyle(config.iconConfiguration.style);
+    this.updateCanvasStyle(iconConfiguration.style);
+    iconConfiguration.setIconOrigin(this);
   }
 
   /**

src/component/mxgraph/shape/render/IconPainter.ts

@@ -24,6 +24,7 @@ export interface PaintParameter {
   shape: ShapeConfiguration;
   icon: IconStyleConfiguration;
   ratioFromParent?: number;
+  setIconOrigin: (canvas: BpmnCanvas) => void;
 }
 
 export function buildPaintParameter(
@@ -47,6 +48,7 @@ export function buildPaintParameter(
   return {
     c,
     ratioFromParent,
+    setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginToShapeCenter(),
     shape: { x, y, w: width, h: height, strokeWidth: shapeStrokeWidth },
     icon: { isFilled, fillColor, strokeColor, strokeWidth: iconStrokeWidth, margin },
   };
@@ -59,7 +61,7 @@ export default class IconPainter {
 
   // this implementation is adapted from the draw.io BPMN 'message' symbol
   // https://github.com/jgraph/drawio/blob/0e19be6b42755790a749af30450c78c0d83be765/src/main/webapp/shapes/bpmn/mxBpmnShape2.js#L465
-  public paintEnvelopeIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintEnvelopeIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const originalIconSize = { width: 485.41, height: 321.76 };
     const canvas = new BpmnCanvas({
       mxCanvas: c,
@@ -68,9 +70,9 @@ export default class IconPainter {
         originalSize: originalIconSize,
         style: icon,
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginToShapeCenter();
 
     const w = originalIconSize.width;
     const h = originalIconSize.height;
@@ -104,7 +106,7 @@ export default class IconPainter {
   }
 
   // highly inspired from mxDoubleEllipse
-  public paintCircleIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintCircleIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const originalIconSize = { width: shape.w, height: shape.h };
     const canvas = new BpmnCanvas({
       mxCanvas: c,
@@ -113,9 +115,9 @@ export default class IconPainter {
         originalSize: originalIconSize,
         style: icon,
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginToShapeCenter();
 
     const w = originalIconSize.width;
     const h = originalIconSize.height;
@@ -131,17 +133,17 @@ export default class IconPainter {
   }
 
   // implementation adapted from https://www.flaticon.com/free-icon/clock_223404
-  public paintClockIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintClockIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,
       shapeConfiguration: shape,
       iconConfiguration: {
         originalSize: { height: 152, width: 152 },
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
         style: icon,
       },
     });
-    canvas.setIconOriginPosition(5);
 
     canvas.begin();
     canvas.moveTo(184, 60);
@@ -234,17 +236,17 @@ export default class IconPainter {
   }
 
   // implementation adapted from https://thenounproject.com/term/triangle/2452089/
-  public paintTriangleIcon({ c, ratioFromParent, shape: { x, y, w, h }, icon }: PaintParameter): void {
+  public paintTriangleIcon({ c, ratioFromParent, setIconOrigin, shape: { x, y, w, h }, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,
       shapeConfiguration: { x, y, w, h },
       iconConfiguration: {
         originalSize: { height: 735, width: 849 },
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
         style: icon,
       },
     });
-    canvas.setIconOriginPosition(4);
 
     canvas.begin();
     canvas.moveTo(497, 55);
@@ -259,17 +261,17 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
-  public paintXCrossIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintXCrossIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,
       shapeConfiguration: shape,
       iconConfiguration: {
         originalSize: { height: 0.5, width: 0.5 },
         ratioFromShape: ratioFromParent,
         style: { ...icon, isFilled: true },
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginPosition(4);
 
     IconPainter.drawCrossIcon(canvas);
     const rotationCenterX = shape.w / 4;
@@ -278,17 +280,17 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
-  public paintPlusCrossIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintPlusCrossIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,
       shapeConfiguration: shape,
       iconConfiguration: {
         originalSize: { height: 0.5, width: 0.5 },
         ratioFromShape: ratioFromParent,
         style: { ...icon, isFilled: true },
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginPosition(4);
 
     IconPainter.drawCrossIcon(canvas);
     canvas.fillAndStroke();
@@ -313,17 +315,17 @@ export default class IconPainter {
 
   // implementation adapted from https://www.flaticon.com/free-icon/employees_554768
   // use https://github.com/process-analytics/mxgraph-svg2shape to generate the xml stencil and port it to code
-  public paintWomanIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintWomanIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,
       shapeConfiguration: shape,
       iconConfiguration: {
         originalSize: { height: 239.68, width: 143.61 },
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
         style: { ...icon, isFilled: true },
       },
     });
-    canvas.setIconOriginPosition(20);
 
     canvas.begin();
     canvas.moveTo(124.31, 150.29);
@@ -406,18 +408,18 @@ export default class IconPainter {
 
   // this implementation is adapted from the draw.io BPMN 'Service Task' stencil
   // https://github.com/jgraph/drawio/blob/9394fb0f1430d2c869865827b2bbef5639f63478/src/main/webapp/stencils/bpmn.xml#L898
-  public paintGearIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintGearIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,
       shapeConfiguration: shape,
       iconConfiguration: {
         // icon coordinates fill a 100x100 rectangle (approximately: 90x90 + foreground translation)
         originalSize: { height: 100, width: 100 },
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
         style: icon,
       },
     });
-    canvas.setIconOriginPosition(20);
 
     // background
     IconPainter.paintGearIconBackground(canvas);
@@ -522,7 +524,7 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
-  public paintExpandIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  public paintExpandIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const originalIconSize = { width: 16, height: 16 };
     const canvas = new BpmnCanvas({
       mxCanvas: c,
@@ -531,9 +533,9 @@ export default class IconPainter {
         originalSize: originalIconSize,
         style: icon,
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginToShapeBottomCenter();
 
     const w = originalIconSize.width;
     const h = originalIconSize.height;
@@ -555,7 +557,7 @@ export default class IconPainter {
 
   // this implementation is adapted from the draw.io BPMN 'Loop'
   // https://github.com/jgraph/drawio/blob/9394fb0f1430d2c869865827b2bbef5639f63478/src/main/webapp/stencils/bpmn.xml#L543
-  paintLoopIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  paintLoopIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     icon.fillColor = icon.strokeColor;
     const originalIconSize = { width: 22.49, height: 21.62 };
     const canvas = new BpmnCanvas({
@@ -565,9 +567,9 @@ export default class IconPainter {
         originalSize: originalIconSize,
         style: icon,
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginToShapeBottomLeft();
 
     // Loop
     canvas.begin();
@@ -584,7 +586,7 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
-  paintSequentialMultiInstanceIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  paintSequentialMultiInstanceIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const originalIconSize = { width: 16, height: 16 };
     const canvas = new BpmnCanvas({
       mxCanvas: c,
@@ -593,9 +595,9 @@ export default class IconPainter {
         originalSize: originalIconSize,
         style: icon,
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginToShapeBottomLeft();
 
     c.setFillColor(icon.strokeColor);
     const barWidth = originalIconSize.width;
@@ -608,7 +610,7 @@ export default class IconPainter {
     canvas.fill();
   }
 
-  paintParallelMultiInstanceIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
+  paintParallelMultiInstanceIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
     const originalIconSize = { width: 16, height: 16 };
     const canvas = new BpmnCanvas({
       mxCanvas: c,
@@ -617,9 +619,9 @@ export default class IconPainter {
         originalSize: originalIconSize,
         style: icon,
         ratioFromShape: ratioFromParent,
+        setIconOrigin,
       },
     });
-    canvas.setIconOriginToShapeBottomLeft();
 
     c.setFillColor(icon.strokeColor);
     const barWidth = originalIconSize.width / 5; // 3 bars + 2 interspaces

src/component/mxgraph/shape/render/render-types.ts

@@ -1,3 +1,5 @@
+import BpmnCanvas from './BpmnCanvas';
+
 /**
  * Copyright 2020 Bonitasoft S.A.
  *
@@ -40,4 +42,5 @@ export interface IconConfiguration {
   /** If `undefined`, no scaling will be done in {@link BpmnCanvas}. */
   ratioFromShape?: number;
   style: IconStyleConfiguration;
+  setIconOrigin: (canvas: BpmnCanvas) => void;
 }