refactor(demo): use the new flow/flownode links from the bpmn semanti…

…c in the draw path demo (#468)
process-analytics · Mar 1, 2023 · 369b3ec · 369b3ec
1 parent d76ad38
commit 369b3ec
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git 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
@@ -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);
+        });
     }
 }