From 369b3ecf96373e9fb67abb05285bb5b6afff8f50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= <4921914+csouchet@users.noreply.github.com> Date: Wed, 1 Mar 2023 14:58:49 +0100 Subject: [PATCH] refactor(demo): use the new flow/flownode links from the bpmn semantic in the draw path demo (#468) --- demo/draw-path/js/path-use-case.js | 15 ++++++---- demo/draw-path/js/paths.js | 45 +++++++++++++----------------- 2 files changed, 29 insertions(+), 31 deletions(-) diff --git a/demo/draw-path/js/path-use-case.js b/demo/draw-path/js/path-use-case.js index de0c9c08..11b050f4 100644 --- a/demo/draw-path/js/path-use-case.js +++ b/demo/draw-path/js/path-use-case.js @@ -6,6 +6,8 @@ class PathUseCase extends UseCase { _style; + _pathManager; + constructor(getDiagram) { super('path', getDiagram, true); @@ -30,6 +32,7 @@ class PathUseCase extends UseCase { const allShapes = [...shapesWithoutEndEvent, ...shapesOfEndEvent]; const allEdges = bpmnElementsRegistry.getElementsByKinds(Object.values(bpmnvisu.FlowKind)); + this._pathManager = new PathManager(allEdges); const bpmnElementIdsOfEndEvent = this._getBpmnElementIds(shapesOfEndEvent); const bpmnElementIdsWithoutEndEvent = this._getBpmnElementIds([...shapesWithoutEndEvent, ...allEdges]); @@ -102,7 +105,7 @@ class PathUseCase extends UseCase { this._state.firstSelectedShape = currentId; this._steps.goToStep2(); } else { // Only one shape is selected - doActionOnPath(filterForPath,(filteredPath) => { + this._pathManager.doActionOnPath(filterForPath,(filteredPath) => { this._style.highlight([filteredPath.edgeId, filteredPath.targetId]); this._style.activatePointerOn(bpmnElementIdsWithoutEndEvent); this._state.secondSelectedShape = currentId; @@ -112,14 +115,14 @@ class PathUseCase extends UseCase { }; item.htmlElement.onmouseenter = () => { if (this._hasOnlyOneSelectedShape()) { - doActionOnPath(filterForPath, (filteredPath) => this._displayPossibleNextPath(filteredPath)); + this._pathManager.doActionOnPath(filterForPath, (filteredPath) => this._displayPossibleNextPath(filteredPath)); } else if (!this._isEndEvent(item)) { this._style.displayPossibleNextElements(currentId); } }; item.htmlElement.onmouseleave = () => { if (this._hasOnlyOneSelectedShape()) { - doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath)); + this._pathManager.doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath)); } else if (!this._isEndEvent(item)) { this._style.nonDisplayPossibleNextElements(currentId); } @@ -144,7 +147,7 @@ class PathUseCase extends UseCase { this._reset(allBpmnElementsIds); } - doActionOnPath(filterForPath, (filteredPath) => { + this._pathManager.doActionOnPath(filterForPath, (filteredPath) => { if (this._hasNoSelectedShape()) { this._style.disableAllShapesAndEdgesExcept(allBpmnElementsIds, [filteredPath.sourceId]); this._style.highlight(filteredPath.sourceId); @@ -157,10 +160,10 @@ class PathUseCase extends UseCase { }); }; item.htmlElement.onmouseenter = () => { - doActionOnPath(filterForPath,(filteredPath) => this._displayPossibleNextPath(filteredPath)); + this._pathManager.doActionOnPath(filterForPath,(filteredPath) => this._displayPossibleNextPath(filteredPath)); }; item.htmlElement.onmouseleave = () => { - doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath)); + this._pathManager.doActionOnPath(filterForPath, (filteredPath) => this._nonDisplayPossibleNextPath(filteredPath)); }; }); } diff --git a/demo/draw-path/js/paths.js b/demo/draw-path/js/paths.js index c03a6755..76bb0b56 100644 --- a/demo/draw-path/js/paths.js +++ b/demo/draw-path/js/paths.js @@ -22,30 +22,25 @@ class Path { } } -const paths = [ - new Path('start_event', "sequence_flow_1", "parallel_gateway_1"), - new Path('parallel_gateway_1', "sequence_flow_2", "task_1"), - new Path('parallel_gateway_1', "sequence_flow_18", "task_2"), - new Path('task_1', "sequence_flow_3", "exclusive_gateway_1"), - new Path('task_2', "sequence_flow_15", "parallel_gateway_2"), - new Path('exclusive_gateway_1', "sequence_flow_4", "task_3"), - new Path('exclusive_gateway_1', "sequence_flow_5", "task_5"), - new Path('exclusive_gateway_2', "sequence_flow_14", "parallel_gateway_2"), - new Path('parallel_gateway_2', "sequence_flow_16", "task_8"), - new Path('task_8', "sequence_flow_17", "end_event"), - new Path('task_3', "sequence_flow_12", "task_4"), - new Path('task_4', "sequence_flow_13", "exclusive_gateway_2"), - new Path('task_5', "sequence_flow_6", "inclusive_gateway_1"), - new Path('inclusive_gateway_1', "sequence_flow_7", "task_7"), - new Path('inclusive_gateway_1', "sequence_flow_8", "task_6"), - new Path('inclusive_gateway_2', "sequence_flow_11", "exclusive_gateway_2"), - new Path('task_7', "sequence_flow_10", "inclusive_gateway_2"), - new Path('task_6', "sequence_flow_9", "inclusive_gateway_2") -]; - -const doActionOnPath = (filter, actionOnFilteredPath) => { - const filteredPaths = paths.filter(path => filter(path)); - if (filteredPaths.length > 0) { - actionOnFilteredPath(filteredPaths[0]); +class PathManager { + + #paths; + + constructor(edges) { + this.#paths = this.#buildPaths(edges); + } + + doActionOnPath(filter, actionOnFilteredPath) { + const filteredPaths = this.#paths.filter(path => filter(path)); + if (filteredPaths.length > 0) { + actionOnFilteredPath(filteredPaths[0]); + } + } + + #buildPaths(edges) { + return edges.map(edge => { + const bpmnSemantic = edge.bpmnSemantic; + return new Path(bpmnSemantic.sourceRefId, bpmnSemantic.id , bpmnSemantic.targetRefId); + }); } }