From 1f4414c37b372a4adad4e6679930129da4677c0d Mon Sep 17 00:00:00 2001 From: Marcin Michniewicz <45601541+aibcmars@users.noreply.github.com> Date: Wed, 6 May 2020 13:57:15 +0200 Subject: [PATCH 1/6] Render inclusive gateway --- src/component/mxgraph/ShapeConfigurator.ts | 3 +- src/component/mxgraph/shape/gateway-shapes.ts | 28 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/component/mxgraph/ShapeConfigurator.ts b/src/component/mxgraph/ShapeConfigurator.ts index 394f68d0c4..a0330aff3f 100644 --- a/src/component/mxgraph/ShapeConfigurator.ts +++ b/src/component/mxgraph/ShapeConfigurator.ts @@ -17,7 +17,7 @@ import { MxGraphFactoryService } from '../../service/MxGraphFactoryService'; import { mxgraph } from 'ts-mxgraph'; import { ShapeBpmnElementKind } from '../../model/bpmn/shape/ShapeBpmnElementKind'; import { EndEventShape, StartEventShape, ThrowIntermediateEventShape, CatchIntermediateEventShape } from './shape/event-shapes'; -import { ExclusiveGatewayShape, ParallelGatewayShape } from './shape/gateway-shapes'; +import { ExclusiveGatewayShape, ParallelGatewayShape, InclusiveGatewayShape } from './shape/gateway-shapes'; import { ServiceTaskShape, TaskShape, UserTaskShape } from './shape/task-shapes'; export default class ShapeConfigurator { @@ -38,6 +38,7 @@ export default class ShapeConfigurator { this.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, CatchIntermediateEventShape); // gateways this.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape); + this.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape); this.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape); // tasks this.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape); diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index 73b1f53d80..f96ee4baba 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -110,3 +110,31 @@ export class ParallelGatewayShape extends GatewayShape { canvas.fillAndStroke(); } } + +export class InclusiveGatewayShape extends GatewayShape { + public constructor(bounds: mxgraph.mxRectangle, fill: string, stroke: string, strokewidth: number = StyleConstant.STROKE_WIDTH_THIN) { + super(bounds, fill, stroke, strokewidth); + } + + protected paintInnerShape(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void { + this.addInclusiveGatewaySymbol(c, x, y, w, h); + } + + private addInclusiveGatewaySymbol(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void { + const canvas = this.configureCanvasForIcon(c, w, h, 0); + this.translateToStartingIconPosition(c, x, y, w, h); + c.setFillColor('#fff'); + c.setStrokeWidth(StyleConstant.STROKE_WIDTH_THICK); + + const arcRay = w / 6; + const arcX = w / 6; + const arcY = h / 6; + canvas.begin(); + canvas.moveTo(arcX, arcY); + canvas.arcTo(arcRay, arcRay, 0, 0, 0, 5 * arcX, 5 * arcY); + canvas.arcTo(arcRay, arcRay, 0, 0, 0, arcX, arcY); + canvas.close(); + + canvas.fillAndStroke(); + } +} From fe7e1c91d6b195390714848db8f404ba5fb9dd2d Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 13 May 2020 11:20:23 +0200 Subject: [PATCH 2/6] remove the temporary style which is not needed anymore (use shape instead) --- src/component/mxgraph/StyleConfigurator.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/component/mxgraph/StyleConfigurator.ts b/src/component/mxgraph/StyleConfigurator.ts index b799496571..b1738e6cfa 100644 --- a/src/component/mxgraph/StyleConfigurator.ts +++ b/src/component/mxgraph/StyleConfigurator.ts @@ -139,19 +139,6 @@ export default class StyleConfigurator { this.putCellStyle(kind, style); }); - // TODO: this is temporary rendering - to be removed with proper rendering implementation - const temporaryStyle = this.cloneDefaultVertexStyle(); - temporaryStyle[this.mxConstants.STYLE_SHAPE] = this.mxConstants.SHAPE_RHOMBUS; - temporaryStyle[this.mxConstants.STYLE_PERIMETER] = this.mxPerimeter.RhombusPerimeter; - temporaryStyle[this.mxConstants.STYLE_VERTICAL_ALIGN] = 'top'; - temporaryStyle[this.mxConstants.STYLE_STROKECOLOR] = '#f00'; - temporaryStyle[this.mxConstants.STYLE_STROKEWIDTH] = 2; - temporaryStyle[this.mxConstants.STYLE_FILLCOLOR] = '#f00'; - temporaryStyle[this.mxConstants.STYLE_FILL_OPACITY] = 25; - - temporaryStyle[this.mxConstants.STYLE_SPACING_TOP] = 55; - temporaryStyle[this.mxConstants.STYLE_SPACING_RIGHT] = 110; - this.putCellStyle(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, temporaryStyle); } private configureSequenceFlowsStyle(): void { From d362c1b334409d1ad3c21d0e2c0c5540b8e89e6e Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 13 May 2020 11:36:23 +0200 Subject: [PATCH 3/6] add e2e test for inclusive gateway --- test/e2e/View.test.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/test/e2e/View.test.ts b/test/e2e/View.test.ts index 0e4ec2705d..043512ff38 100644 --- a/test/e2e/View.test.ts +++ b/test/e2e/View.test.ts @@ -85,6 +85,8 @@ describe('BPMN Visualization JS', () => { + + @@ -145,6 +147,12 @@ describe('BPMN Visualization JS', () => { + + + + + + @@ -250,6 +258,7 @@ describe('BPMN Visualization JS', () => { expectModelContainsShape('userTask_3', ShapeBpmnElementKind.TASK_USER); expectModelContainsEdge('default_sequence_flow_id', SequenceFlowKind.DEFAULT); expectModelContainsEdge('normal_sequence_flow_id', SequenceFlowKind.NORMAL); + expectModelContainsCell('inclusiveGateway_1', ShapeBpmnElementKind.GATEWAY_INCLUSIVE); }); function expectModelContainsCellWithGeometry(cellId: string, parentId: string, geometry: mxgraph.mxGeometry): void { From 84898c0beeb94cd707b22d46ab66094b81abf810 Mon Sep 17 00:00:00 2001 From: Marcin Michniewicz <45601541+aibcmars@users.noreply.github.com> Date: Wed, 13 May 2020 12:33:13 +0200 Subject: [PATCH 4/6] size of the icon corrected --- src/component/mxgraph/shape/gateway-shapes.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index f96ee4baba..ca0f3cfa89 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -121,14 +121,14 @@ export class InclusiveGatewayShape extends GatewayShape { } private addInclusiveGatewaySymbol(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void { - const canvas = this.configureCanvasForIcon(c, w, h, 0); + const canvas = this.configureCanvasForIcon(c, w, h, 0.5); this.translateToStartingIconPosition(c, x, y, w, h); c.setFillColor('#fff'); c.setStrokeWidth(StyleConstant.STROKE_WIDTH_THICK); - const arcRay = w / 6; - const arcX = w / 6; - const arcY = h / 6; + const arcRay = 1 / 6; + const arcX = 1 / 6; + const arcY = 1 / 6; canvas.begin(); canvas.moveTo(arcX, arcY); canvas.arcTo(arcRay, arcRay, 0, 0, 0, 5 * arcX, 5 * arcY); From 24e829e5e63bb4d7fffb7a20bcf28bbdcd860ddd Mon Sep 17 00:00:00 2001 From: Marcin Michniewicz <45601541+aibcmars@users.noreply.github.com> Date: Wed, 13 May 2020 14:13:08 +0200 Subject: [PATCH 5/6] merge fix --- test/e2e/View.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/View.test.ts b/test/e2e/View.test.ts index 043512ff38..fd96f95885 100644 --- a/test/e2e/View.test.ts +++ b/test/e2e/View.test.ts @@ -258,7 +258,7 @@ describe('BPMN Visualization JS', () => { expectModelContainsShape('userTask_3', ShapeBpmnElementKind.TASK_USER); expectModelContainsEdge('default_sequence_flow_id', SequenceFlowKind.DEFAULT); expectModelContainsEdge('normal_sequence_flow_id', SequenceFlowKind.NORMAL); - expectModelContainsCell('inclusiveGateway_1', ShapeBpmnElementKind.GATEWAY_INCLUSIVE); + expectModelContainsShape('inclusiveGateway_1', ShapeBpmnElementKind.GATEWAY_INCLUSIVE); }); function expectModelContainsCellWithGeometry(cellId: string, parentId: string, geometry: mxgraph.mxGeometry): void { From 508c3f43f0995cb6c7cf812a83a7384266574a70 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 13 May 2020 15:10:23 +0200 Subject: [PATCH 6/6] avoid hard coded fill color for the inner circle of the inclusive icon use the configured fill color instead. this will help in the future for extensions --- src/component/mxgraph/shape/gateway-shapes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index ca0f3cfa89..10d76e24fb 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -123,7 +123,7 @@ export class InclusiveGatewayShape extends GatewayShape { private addInclusiveGatewaySymbol(c: mxgraph.mxXmlCanvas2D, x: number, y: number, w: number, h: number): void { const canvas = this.configureCanvasForIcon(c, w, h, 0.5); this.translateToStartingIconPosition(c, x, y, w, h); - c.setFillColor('#fff'); + c.setFillColor(this.fill); c.setStrokeWidth(StyleConstant.STROKE_WIDTH_THICK); const arcRay = 1 / 6;