[FEAT] Render Cancel Events (#789)

docs/bpmn-support.adoc

@@ -318,13 +318,13 @@ The event definition can be defined on the event or on the definitions.
 |icon:check-circle-o[]
 |The stroke & icon width may be adjusted
 
-|Cancel Interrupting Boundary Event
-|
-|
-
 |Conditional Interrupting Boundary Event
 |
 |
+
+|Cancel Interrupting Boundary Event
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 
@@ -385,8 +385,8 @@ The event definition can be defined on the event or on the definitions.
 |The icon width may be adjusted
 
 |Cancel End Event
-|
-|
+|icon:check-circle-o[]
+|The icon width may be adjusted
 |===
 
 

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

@@ -52,6 +52,11 @@ abstract class EventShape extends mxEllipse {
       ShapeBpmnEventKind.COMPENSATION,
       (paintParameter: PaintParameter) => this.iconPainter.paintCompensationIcon({ ...paintParameter, ratioFromParent: 0.7, icon: { ...paintParameter.icon, strokeWidth: 1.5 } }),
     ],
+    [
+      ShapeBpmnEventKind.CANCEL,
+      (paintParameter: PaintParameter) =>
+        this.iconPainter.paintXCrossIcon({ ...paintParameter, ratioFromParent: 0.39, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginToShapeTopLeftProportionally(9) }),
+    ],
   ]);
 
   protected withFilledIcon = false;
@@ -72,12 +77,10 @@ abstract class EventShape extends mxEllipse {
   }
 
   // This will be removed after implementation of all supported events
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private markNonFullyRenderedEvents(c: mxAbstractCanvas2D): void {
     const eventKind = StyleUtils.getBpmnEventKind(this.style);
-    if (eventKind == ShapeBpmnEventKind.CANCEL) {
-      c.setFillColor('deeppink');
-      c.setFillAlpha(0.3);
-    } else if (eventKind == ShapeBpmnEventKind.CONDITIONAL) {
+    if (eventKind == ShapeBpmnEventKind.CONDITIONAL) {
       c.setFillColor('chartreuse');
       c.setFillAlpha(0.3);
     }

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

@@ -43,7 +43,11 @@ export class ExclusiveGatewayShape extends GatewayShape {
   }
 
   protected paintInnerShape(paintParameter: PaintParameter): void {
-    this.iconPainter.paintXCrossIcon({ ...paintParameter, setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginToShapeTopLeftProportionally(4) });
+    this.iconPainter.paintXCrossIcon({
+      ...paintParameter,
+      icon: { ...paintParameter.icon, isFilled: true },
+      setIconOrigin: (canvas: BpmnCanvas) => canvas.setIconOriginToShapeTopLeftProportionally(4),
+    });
   }
 }
 

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

@@ -311,15 +311,32 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
+  private static drawCrossIcon(canvas: BpmnCanvas): void {
+    canvas.begin();
+    canvas.moveTo(0.38, 0);
+    canvas.lineTo(0.62, 0);
+    canvas.lineTo(0.62, 0.38);
+    canvas.lineTo(1, 0.38);
+    canvas.lineTo(1, 0.62);
+    canvas.lineTo(0.62, 0.62);
+    canvas.lineTo(0.62, 1);
+    canvas.lineTo(0.38, 1);
+    canvas.lineTo(0.38, 0.62);
+    canvas.lineTo(0, 0.62);
+    canvas.lineTo(0, 0.38);
+    canvas.lineTo(0.38, 0.38);
+    canvas.close();
+  }
+
   /**
    * This icon is used by `exclusive gateway`.
    */
-  public paintXCrossIcon({ c, ratioFromParent, setIconOrigin, shape, icon }: PaintParameter): void {
-    const canvas = this.newBpmnCanvas({ c, ratioFromParent, setIconOrigin, shape, icon: { ...icon, isFilled: true } }, { height: 0.5, width: 0.5 });
+  public paintXCrossIcon(paintParameter: PaintParameter): void {
+    const canvas = this.newBpmnCanvas(paintParameter, { height: 0.5, width: 0.5 });
 
     IconPainter.drawCrossIcon(canvas);
-    const rotationCenterX = shape.w / 4;
-    const rotationCenterY = shape.h / 4;
+    const rotationCenterX = paintParameter.shape.w * paintParameter.ratioFromParent;
+    const rotationCenterY = paintParameter.shape.h * paintParameter.ratioFromParent;
     canvas.rotate(45, false, false, rotationCenterX, rotationCenterY);
     canvas.fillAndStroke();
   }
@@ -334,23 +351,6 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
-  private static drawCrossIcon(canvas: BpmnCanvas): void {
-    canvas.begin();
-    canvas.moveTo(0.38, 0);
-    canvas.lineTo(0.62, 0);
-    canvas.lineTo(0.62, 0.38);
-    canvas.lineTo(1, 0.38);
-    canvas.lineTo(1, 0.62);
-    canvas.lineTo(0.62, 0.62);
-    canvas.lineTo(0.62, 1);
-    canvas.lineTo(0.38, 1);
-    canvas.lineTo(0.38, 0.62);
-    canvas.lineTo(0, 0.62);
-    canvas.lineTo(0, 0.38);
-    canvas.lineTo(0.38, 0.38);
-    canvas.close();
-  }
-
   /**
    * This icon is used by `user task`.
    */