Add Task final render

Author: csouchet

src/component/mxgraph/ShapeConfigurator.ts

@@ -17,6 +17,7 @@ import { MxGraphFactoryService } from '../../service/MxGraphFactoryService';
 import { mxgraph } from 'ts-mxgraph';
 import { ShapeBpmnElementKind } from '../../model/bpmn/shape/ShapeBpmnElementKind';
 import { EndEventShape, StartEventShape } from './shape/event-shapes';
+import { TaskShape } from './shape/task-shapes';
 
 export default class ShapeConfigurator {
   private mxClient: typeof mxgraph.mxClient = MxGraphFactoryService.getMxGraphProperty('mxClient');
@@ -31,6 +32,7 @@ export default class ShapeConfigurator {
   private registerShapes(): void {
     this.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_END, EndEventShape);
     this.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_START, StartEventShape);
+    this.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape);
   }
 
   private initMxShapePrototype(isFF: boolean): void {

src/component/mxgraph/StyleConfigurator.ts

@@ -125,8 +125,9 @@ export default class StyleConfigurator {
   }
 
   private configureTaskStyle(): void {
-    const style = this.mxUtils.clone(this.getStylesheet().getCellStyle(ShapeBpmnElementKind.TASK_USER), this.getDefaultVertexStyle());
-    style[this.mxConstants.STYLE_STROKECOLOR] = '#663399';
+    const style = this.cloneDefaultVertexStyle();
+    style[this.mxConstants.STYLE_SHAPE] = ShapeBpmnElementKind.TASK;
+    style[this.mxConstants.STYLE_VERTICAL_ALIGN] = 'middle';
     this.putCellStyle(ShapeBpmnElementKind.TASK, style);
   }
 

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright 2020 Bonitasoft S.A.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { MxGraphFactoryService } from '../../../service/MxGraphFactoryService';
+import { mxgraph } from 'ts-mxgraph';
+import { StyleConstant } from '../StyleConfigurator';
+
+const mxRectangleShape: typeof mxgraph.mxRectangleShape = MxGraphFactoryService.getMxGraphProperty('mxRectangleShape');
+const mxUtils: typeof mxgraph.mxUtils = MxGraphFactoryService.getMxGraphProperty('mxUtils');
+const mxConstants: typeof mxgraph.mxConstants = MxGraphFactoryService.getMxGraphProperty('mxConstants');
+
+export class TaskShape extends mxRectangleShape {
+  isRounded: boolean;
+
+  protected constructor(bounds: mxgraph.mxRectangle, fill: string, stroke: string, strokewidth: number = StyleConstant.STROKE_WIDTH_THIN) {
+    super(bounds, fill, stroke, strokewidth);
+
+    this.isRounded = true;
+  }
+}

src/service/MxGraphFactoryService.ts

@@ -20,6 +20,7 @@ type MxGraphProperty =
   | 'mxClient'
   | 'mxConstants'
   | 'mxEllipse'
+  | 'mxRectangleShape'
   | 'mxGeometry'
   | 'mxGraph'
   | 'mxGraphModel'