diff --git a/docs/bpmn-support.adoc b/docs/bpmn-support.adoc
index 8a55831922..03666a5f85 100644
--- a/docs/bpmn-support.adoc
+++ b/docs/bpmn-support.adoc
@@ -51,16 +51,16 @@ The default rendering uses `white` as fill color and `black` as stroke color.
|Comments
|Abstract Task
-|icon:flask[]
-|Rounded corner and stroke color are subject to change
+|icon:check-circle[]
+|
|Service Task
-|
-|
+|icon:flask[]
+|Stroke color and icon are subject to change
|User Task
-|
-|
+|icon:flask[]
+|Stroke color and icon are subject to change
|===
diff --git a/src/component/mxgraph/ShapeConfigurator.ts b/src/component/mxgraph/ShapeConfigurator.ts
index 03dba4d897..8e47ea2227 100644
--- a/src/component/mxgraph/ShapeConfigurator.ts
+++ b/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 {
diff --git a/src/component/mxgraph/StyleConfigurator.ts b/src/component/mxgraph/StyleConfigurator.ts
index 4a40bc7368..e6d8eb62f4 100644
--- a/src/component/mxgraph/StyleConfigurator.ts
+++ b/src/component/mxgraph/StyleConfigurator.ts
@@ -33,6 +33,8 @@ export default class StyleConfigurator {
constructor(private graph: mxgraph.mxGraph) {}
public configureStyles(): void {
+ this.mxConstants.RECTANGLE_ROUNDING_FACTOR = 0.1;
+
this.configureDefaultVertexStyle();
this.configurePoolStyle();
this.configureLaneStyle();
@@ -125,8 +127,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);
}
diff --git a/src/component/mxgraph/shape/task-shapes.ts b/src/component/mxgraph/shape/task-shapes.ts
new file mode 100644
index 0000000000..adfdaf7983
--- /dev/null
+++ b/src/component/mxgraph/shape/task-shapes.ts
@@ -0,0 +1,31 @@
+/**
+ * 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');
+
+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;
+ }
+}
diff --git a/src/service/MxGraphFactoryService.ts b/src/service/MxGraphFactoryService.ts
index a2f1827924..0b3b76ad08 100644
--- a/src/service/MxGraphFactoryService.ts
+++ b/src/service/MxGraphFactoryService.ts
@@ -20,6 +20,7 @@ type MxGraphProperty =
| 'mxClient'
| 'mxConstants'
| 'mxEllipse'
+ | 'mxRectangleShape'
| 'mxGeometry'
| 'mxGraph'
| 'mxGraphModel'
diff --git a/test/e2e/View.test.ts b/test/e2e/View.test.ts
index ffde3dc71a..4c33934874 100644
--- a/test/e2e/View.test.ts
+++ b/test/e2e/View.test.ts
@@ -44,7 +44,7 @@ describe('BPMN Visualization JS', () => {
-
+
_e16564d7-0c4c-413e-95f6-f668a3f851fb
_d77dd5ec-e4e7-420e-bbe7-8ac9cd1df599
@@ -60,8 +60,8 @@ describe('BPMN Visualization JS', () => {
_8e8fe679-eb3b-4c43-a4d6-891e7087ff80
-
-
+
+
@@ -76,7 +76,7 @@ describe('BPMN Visualization JS', () => {
-
+
@@ -169,6 +169,7 @@ describe('BPMN Visualization JS', () => {
expectModelContainsBpmnEvent('startEvent_1', ShapeBpmnElementKind.EVENT_START, ShapeBpmnEventKind.NONE);
expectModelContainsBpmnEvent('startEvent_2_timer', ShapeBpmnElementKind.EVENT_START, ShapeBpmnEventKind.TIMER);
expectModelContainsBpmnEvent('endEvent_1', ShapeBpmnElementKind.EVENT_END, ShapeBpmnEventKind.TERMINATE);
+ expectModelContainsCell('task_1', ShapeBpmnElementKind.TASK);
});
function expectModelContainsCellWithGeometry(cellId: string, parentId: string, geometry: mxgraph.mxGeometry): void {