refactor: extract the styling for the prediction demo in dedicated cl…

…asses (#514)
process-analytics · Jun 23, 2023 · 1b341be · 1b341be
1 parent 914e508
commit 1b341be
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 63 deletions.
diff --git a/demo/predictions/index.html b/demo/predictions/index.html
@@ -28,6 +28,7 @@
     <script defer src="../../examples/static/js/diagram/bpmn-diagram-bpmn-spec-pizza.js"></script>
     <script defer src="../static/js/use-case.js"></script>
     <script defer src="./js/data.js"></script>
+    <script defer src="./js/style.js"></script>
     <script defer src="./js/prediction-use-case.js"></script>
     <script defer src="./js/index.js"></script>
 </head>

diff --git a/demo/predictions/js/data.js b/demo/predictions/js/data.js
@@ -46,28 +46,22 @@ class ExecutionData {
 
 class PredicatedLateExecutionData extends ExecutionData {
 
-    _runningElementWithPrediction = {
-        bpmnId: this._vendorBakeThePizzaId,
-        cssClasses: 'state-predicted-late',
-    };
-
-    _predictedPaths = {
-        ids: [
-            // customer elements
-            this._customerEvtBasedGwId,
-            '_6-424', // sequence flow between 'event-based gateway' (running element) and timer event
-            '_6-219', // timer event
-            '_6-426', // sequence flow between 'timer event' and 'Ask for the pizza'
-            '_6-236', // 'Ask for the pizza'
-            // message flow
-            '_6-642',
-            // vendor elements
-            this._vendorWhereIsMyPizzaId,
-            '_6-748', // sequence flow between 'where is my pizza' and 'Calm customer'
-            '_6-695', // 'Calm customer'
-        ],
-        cssClasses: 'path-predicted-late',
-    };
+    _runningElementWithPrediction = this._vendorBakeThePizzaId;
+
+    _predictedPaths = [
+        // customer elements
+        this._customerEvtBasedGwId,
+        '_6-424', // sequence flow between 'event-based gateway' (running element) and timer event
+        '_6-219', // timer event
+        '_6-426', // sequence flow between 'timer event' and 'Ask for the pizza'
+        '_6-236', // 'Ask for the pizza'
+        // message flow
+        '_6-642',
+        // vendor elements
+        this._vendorWhereIsMyPizzaId,
+        '_6-748', // sequence flow between 'where is my pizza' and 'Calm customer'
+        '_6-695', // 'Calm customer'
+    ];
 
     get executedElements() {
         return this._commonExecutedElements;
@@ -85,27 +79,22 @@ class PredicatedLateExecutionData extends ExecutionData {
 
 class PredictedOnTimeExecutionData extends ExecutionData {
 
-    _runningElementWithPrediction = {
-        bpmnId: '_6-514', // vendor 'Deliver the pizza'
-        cssClasses: 'state-predicted-on-time',
-    };
-
-    _predictedPaths = {
-        ids: [
-            // customer elements
-            this._customerEvtBasedGwId,
-            '_6-422', // sequence flow between 'event-based gateway' (running element) and msg event
-            '_6-202', // msg event 'Pizza received'
-            '_6-428', // sequence flow between 'msg event' and 'Pay the pizza'
-            '_6-304', // 'Pay the pizza'
-            // message flow
-            '_6-640', // from vendor 'Deliver the pizza' to customer 'msg event'
-            // vendor elements
-            '_6-634', // sequence flow between 'Deliver the pizza' and 'Receive payment'
-            '_6-565', // 'Receive payment'
-        ],
-        cssClasses: 'path-predicted-on-time'
-    };
+    // vendor 'Deliver the pizza'
+    _runningElementWithPrediction = '_6-514';
+
+    _predictedPaths = [
+        // customer elements
+        this._customerEvtBasedGwId,
+        '_6-422', // sequence flow between 'event-based gateway' (running element) and msg event
+        '_6-202', // msg event 'Pizza received'
+        '_6-428', // sequence flow between 'msg event' and 'Pay the pizza'
+        '_6-304', // 'Pay the pizza'
+        // message flow
+        '_6-640', // from vendor 'Deliver the pizza' to customer 'msg event'
+        // vendor elements
+        '_6-634', // sequence flow between 'Deliver the pizza' and 'Receive payment'
+        '_6-565', // 'Receive payment'
+    ];
 
     _executedElements = [...this._commonExecutedElements,
         // vendor

diff --git a/demo/predictions/js/prediction-use-case.js b/demo/predictions/js/prediction-use-case.js
@@ -1,42 +1,38 @@
 class PredicatedLateUseCase extends UseCase {
+
+    _style;
+    _executionData;
+
     constructor(type) {
         super(type, () => pizzaDiagram(), true, {fit: {type: 'Center', margin: 20}});
         this._executionData = new PredicatedLateExecutionData();
     }
 
     _postLoadDiagram() {
-        this._reduceVisibilityOfAlreadyExecutedElements();
-        this._highlightRunningElementsWithPrediction();
-        this._toggleHighlightRunningElementsWithoutPrediction();
-        this._registerInteractions();
+        this._initManager();
+
+        this._style.reduceVisibilityOfExecutedElements(this._executionData.executedElements);
+        this._style.highlightRunningElementsWithPrediction(this._executionData.runningElementWithPrediction);
+        this._style.toggleHighlightRunningElementsWithoutPrediction(this._executionData.runningElementsWithoutPrediction);
+        this._registerInteractions(this._executionData.predictedPaths, this._executionData.runningElementsWithoutPrediction, this._executionData.runningElementWithPrediction);
     }
 
-    _reduceVisibilityOfAlreadyExecutedElements() {
-        this._bpmnVisualization.bpmnElementsRegistry.addCssClasses(this._executionData.executedElements, 'state-already-executed');
+    _initManager() {
+        this._style = new PredicatedLateStyle(this._bpmnVisualization.bpmnElementsRegistry);
     }
 
-    _registerInteractions() {
+    _registerInteractions(predictedPath, runningElementsWithoutPrediction, runningElementWithPrediction) {
         // on hover, highlight the predicted path
-        const elementTogglingPath = this._bpmnVisualization.bpmnElementsRegistry.getElementsByIds(this._executionData.runningElementWithPrediction.bpmnId)[0]; // exist and only one
+        const elementTogglingPath = this._bpmnVisualization.bpmnElementsRegistry.getElementsByIds(runningElementWithPrediction)[0]; // exist and only one
 
         const highlightPredictedPath = () => {
-            this._toggleHighlightRunningElementsWithoutPrediction();
-            const predictedPath = this._executionData.predictedPaths;
-            this._bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(predictedPath.ids, predictedPath.cssClasses);
+            this._style.toggleHighlightRunningElementsWithoutPrediction(runningElementsWithoutPrediction);
+            this._style.toggleHighlightPredictedPath(predictedPath);
         }
 
         elementTogglingPath.htmlElement.addEventListener('mouseenter', highlightPredictedPath);
         elementTogglingPath.htmlElement.addEventListener('mouseleave', highlightPredictedPath);
     }
-
-    _toggleHighlightRunningElementsWithoutPrediction() {
-        this._bpmnVisualization.bpmnElementsRegistry.toggleCssClasses(this._executionData.runningElementsWithoutPrediction, 'state-running');
-    }
-
-    _highlightRunningElementsWithPrediction() {
-        const elementWithPrediction =  this._executionData.runningElementWithPrediction;
-        this._bpmnVisualization.bpmnElementsRegistry.addCssClasses(elementWithPrediction.bpmnId, elementWithPrediction.cssClasses);
-    }
 }
 
 
@@ -45,4 +41,8 @@ class PredictedOnTimeUseCase extends PredicatedLateUseCase {
         super(type);
         this._executionData = new PredictedOnTimeExecutionData();
     }
+
+    _initManager() {
+        this._style = new PredictedOnTimeStyle(this._bpmnVisualization.bpmnElementsRegistry);
+    }
 }
diff --git a/demo/predictions/js/style.js b/demo/predictions/js/style.js
@@ -0,0 +1,77 @@
+class Style {
+
+    _bpmnElementsRegistry;
+
+    constructor(bpmnElementsRegistry) {
+        this._bpmnElementsRegistry = bpmnElementsRegistry;
+    }
+
+    /**
+     * @param {string[]} ids
+     */
+    reduceVisibilityOfExecutedElements(ids) {
+        this._bpmnElementsRegistry.addCssClasses(ids, 'state-already-executed');
+    }
+
+    /**
+     * @param {string[]} ids
+     */
+    toggleHighlightRunningElementsWithoutPrediction(ids) {
+        this._bpmnElementsRegistry.toggleCssClasses(ids, 'state-running');
+    }
+
+    /**
+     * @param {string[]} ids
+     */
+    toggleHighlightPredictedPath(ids) {
+    }
+
+    /**
+     * @param {string[] | string} ids
+     */
+    highlightRunningElementsWithPrediction(ids) {
+    }
+}
+
+class PredicatedLateStyle extends Style {
+
+    constructor(bpmnElementsRegistry) {
+       super(bpmnElementsRegistry);
+    }
+
+    /**
+     * @param {string[]} ids
+     */
+    toggleHighlightPredictedPath(ids) {
+        this._bpmnElementsRegistry.toggleCssClasses(ids, 'path-predicted-late');
+    }
+
+    /**
+     * @param {string[] | string} ids
+     */
+    highlightRunningElementsWithPrediction(ids) {
+        this._bpmnElementsRegistry.addCssClasses(ids, 'state-predicted-late');
+    }
+}
+
+
+class PredictedOnTimeStyle extends Style {
+
+    constructor(bpmnElementsRegistry) {
+        super(bpmnElementsRegistry);
+    }
+
+    /**
+     * @param {string[]} ids
+     */
+    toggleHighlightPredictedPath(ids) {
+        this._bpmnElementsRegistry.toggleCssClasses(ids, 'path-predicted-on-time');
+    }
+
+    /**
+     * @param {string[] | string} ids
+     */
+    highlightRunningElementsWithPrediction(ids) {
+        this._bpmnElementsRegistry.addCssClasses(ids, 'state-predicted-on-time');
+    }
+}