[FEAT] Render signal event

docs/bpmn-support.adoc

@@ -90,6 +90,7 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 *Note*: the following icons are derived from existing solutions
 
 * message: https://github.com/jgraph/drawio/blob/0e19be6b42755790a749af30450c78c0d83be765/src/main/webapp/shapes/bpmn/mxBpmnShape2.js#L465[draw.io bpmn mxgraph stencil]
+* signal: https://thenounproject.com/term/triangle/2452089/[triangle] By https://thenounproject.com/imamdji99[Imam], ID from https://thenounproject.com 
 * timer: https://www.flaticon.com/free-icon/clock_223404[Timer Icon] "Icons made by https://www.flaticon.com/authors/kirill-kazachek[Kirill Kazachek] from https://www.flaticon.com"
 
 
@@ -113,8 +114,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke & icon width may be adjusted
 
 |Signal Start Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 
@@ -134,8 +135,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke & icon width may be adjusted
 
 |Signal Intermediate Catch Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 
@@ -155,8 +156,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke & icon width may be adjusted
 
 |Signal Intermediate Throw Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 
@@ -176,8 +177,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke & icon width may be adjusted
 
 |Signal Interrupting Boundary Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 
@@ -197,8 +198,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke & icon width may be adjusted
 
 |Signal Non-interrupting Boundary Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 
@@ -222,8 +223,8 @@ The default rendering uses `white` as fill color and `black` as stroke color.
 |The stroke & icon width may be adjusted
 
 |Signal End Event
-|
-|
+|icon:check-circle-o[]
+|The stroke & icon width may be adjusted
 |===
 
 

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

@@ -25,6 +25,7 @@ abstract class EventShape extends mxEllipse {
     [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.SIGNAL, (paintParameter: PaintParameter) => this.iconPainter.paintTriangleIcon({ ...paintParameter, ratioFromParent: 0.5 })],
   ]);
 
   protected withFilledIcon = false;
@@ -34,20 +35,20 @@ abstract class EventShape extends mxEllipse {
   }
 
   public paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void {
-    // TODO: This will be removed after implementation of all supported events
     this.markNonFullyRenderedEvents(c);
     const paintParameter = buildPaintParameter(c, x, y, w, h, this, 0.25, this.withFilledIcon);
     this.paintOuterShape(paintParameter);
     this.paintInnerShape(paintParameter);
   }
 
   // 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.SIGNAL) {
-      c.setFillColor('deeppink');
-      c.setFillAlpha(0.3);
-    }
+    // const eventKind = StyleUtils.getBpmnEventKind(this.style);
+    // if (eventKind == ShapeBpmnEventKind.SIGNAL) {
+    //   c.setFillColor('deeppink');
+    //   c.setFillAlpha(0.3);
+    // }
   }
 
   protected paintOuterShape({ c, shape: { x, y, w, h } }: PaintParameter): void {

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

@@ -16,7 +16,7 @@
 
 import { mxgraph } from 'ts-mxgraph';
 import BpmnCanvas from './BpmnCanvas';
-import StyleUtils from '../../StyleUtils';
+import StyleUtils, { StyleDefault } from '../../StyleUtils';
 import { IconStyleConfiguration, ShapeConfiguration } from './render-types';
 
 export interface PaintParameter {
@@ -233,6 +233,33 @@ export default class IconPainter {
     canvas.fillAndStroke();
   }
 
+  // implementation adapted from https://thenounproject.com/term/triangle/2452089/
+  public paintTriangleIcon({ c, ratioFromParent, 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,
+        style: icon,
+      },
+    });
+    c.setStrokeWidth(StyleDefault.STROKE_WIDTH_THIN); // TODO should be done via icon style, but in that case, the strokeWidth change the ratio from shape
+    canvas.setIconOriginPosition(4);
+
+    canvas.begin();
+    canvas.moveTo(497, 55);
+    canvas.lineTo(817, 609);
+    canvas.curveTo(849, 665, 808, 735, 744, 735);
+    canvas.lineTo(105, 735);
+    canvas.curveTo(40, 735, 0, 665, 32, 609);
+    canvas.lineTo(352, 55);
+    canvas.curveTo(384, 0, 465, 0, 497, 55);
+    canvas.close();
+
+    canvas.fillAndStroke();
+  }
+
   public paintXCrossIcon({ c, ratioFromParent, shape, icon }: PaintParameter): void {
     const canvas = new BpmnCanvas({
       mxCanvas: c,