refactor(demo): simplify the UseCase classes and how to set theme

demo/hacktoberfest-custom-themes/index.html

@@ -121,10 +121,10 @@ <h5>Theme Year</h5>
             </div>
             <div id="use-case-panel" class="column bg-gray">
                 <div class="column col-12 text-center">
-                    <h4 id="hacktoberfest-title" class="title"></h4>
+                    <h4 id="title" class="title"></h4>
                 </div>
                 <div class="column col-12">
-                    <div id="hacktoberfest-bpmn-container" class="column col-12 bpmn-container"></div>
+                    <div id="bpmn-container" class="column col-12 bpmn-container"></div>
                 </div>
             </div>
         </div>

demo/hacktoberfest-custom-themes/js/index.js

@@ -1,17 +1,21 @@
-function buildUseCase(type, year, projectName) {
-    switch (type) {
+function buildUseCase() {
+    const year = state.themeYear;
+    const mode = state.useCaseType;
+    const projectName = state.projectName;
+
+    switch (mode) {
         case 'light':
-            return new ThemeUseCase( projectName, { year, mode: type }, `Light Hacktoberfest ${year} Theme`);
+            return new ThemeUseCase(projectName, { year, mode }, `Light Hacktoberfest ${year} Theme`);
         case 'dark':
-            return new ThemeUseCase( projectName, { year, mode: type }, `Dark Hacktoberfest ${year} Theme`);
+            return new ThemeUseCase(projectName, { year, mode }, `Dark Hacktoberfest ${year} Theme`);
         case 'default':
         default:
-            return new HacktoberfestUseCase(  projectName, `Default Theme`);
+            return new HacktoberfestUseCase(projectName, `Default Theme`);
     }
 }
 
 function changeUseCase() {
-    state.useCase = buildUseCase(state.useCaseType, state.themeYear, state.projectName);
+    state.useCase = buildUseCase();
     state.useCase.display();
 }
 

demo/hacktoberfest-custom-themes/js/theme-bpmn-visualization.js

@@ -1,37 +1,39 @@
 class ThemeBpmnVisualization extends bpmnvisu.BpmnVisualization {
-    _theme;
 
     constructor(options, theme) {
         super(options);
-        this._theme = theme;
-        this._configureStyle();
+        this._configureStyle(theme);
     }
 
-    _configureStyle() {
+    _configureStyle(theme) {
         const styleSheet = this.graph.getStylesheet(); // mxStylesheet
 
+        theme.default.fontFamily ??= 'Inter, Helvetica, sans-serif';
+        configureStyle(styleSheet.getDefaultVertexStyle(), theme.default);
+        configureStyle(styleSheet.getDefaultEdgeStyle(), theme.default);
+
         // START EVENT
-        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_START], this._theme.startEvent);
+        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_START], theme.startEvent);
 
         // END EVENT
-        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_END], this._theme.endEvent);
+        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_END], theme.endEvent);
 
         // USER TASK
-        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.TASK_USER], this._theme.userTask);
+        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.TASK_USER], theme.userTask);
 
         // EXCLUSIVE GATEWAY
-        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE], this._theme.exclusiveGateway);
+        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE], theme.exclusiveGateway);
 
         // CALL ACTIVITY
-        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY], this._theme.callActivity);
+        configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY], theme.callActivity);
 
         // POOL
         const style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.POOL];
-        const themePool = this._theme.pool;
+        const themePool = theme.pool;
+        themePool.fontSize ??= 16;
         configureStyle(style, themePool);
         style[StyleIdentifiers.STYLE_FILLCOLOR] = themePool.labelFill;
         style[StyleIdentifiers.STYLE_SWIMLANE_FILLCOLOR] = themePool.swimlaneFill;
-        style[StyleIdentifiers.STYLE_FONTSIZE] = themePool.fontSize ?? 16;
     }
 
 }
@@ -40,13 +42,22 @@ function configureStyle(style, themeElement) {
     if (themeElement.fill) {
         style[StyleIdentifiers.STYLE_FILLCOLOR] = themeElement.fill;
     }
+
     if (themeElement.font) {
         style[StyleIdentifiers.STYLE_FONTCOLOR] = themeElement.font;
     }
+    if (themeElement.fontFamily) {
+        style[StyleIdentifiers.STYLE_FONTFAMILY] = themeElement.fontFamily;
+    }
+    if (themeElement.fontSize) {
+        style[StyleIdentifiers.STYLE_FONTSIZE] = themeElement.fontSize;
+    }
+
     if (themeElement.gradient) {
         style[StyleIdentifiers.STYLE_GRADIENT_DIRECTION] = themeElement.gradientDirection ?? Directions.DIRECTION_WEST;
         style[StyleIdentifiers.STYLE_GRADIENTCOLOR] = themeElement.gradient;
     }
+
     if (themeElement.stroke) {
         style[StyleIdentifiers.STYLE_STROKECOLOR] = themeElement.stroke;
     }

demo/hacktoberfest-custom-themes/js/use-case/hacktoberfest-use-case.js

@@ -1,9 +1,16 @@
 class HacktoberfestUseCase extends UseCase {
 
     constructor(inputProjectName, title) {
-        document.querySelector(`[id*="hacktoberfest-title"]`).textContent = title;
-        document.querySelector(`[id*="hacktoberfest-bpmn-container"]`).textContent = undefined;
-        super('hacktoberfest', () => getHacktoberfestBpmnDiagram(inputProjectName), false);
+        super({
+            getDiagram: () => getHacktoberfestBpmnDiagram(inputProjectName),
+            navigationEnabled: false,
+            title
+        });
+    }
+
+    _initBpmnVisualization(options) {
+        bpmnvisu.IconPainterProvider.set(new bpmnvisu.IconPainter());
+        return super._initBpmnVisualization(options);
     }
 
     updateCellsLabel(projectName) {
@@ -19,11 +26,4 @@ class HacktoberfestUseCase extends UseCase {
         this._bpmnVisualization.graph.model.setValue(cell, value);
     }
 
-    /**
-     * Generic implementation
-     */
-    _preLoadDiagram() {
-        bpmnvisu.IconPainterProvider.set(new bpmnvisu.IconPainter());
-    }
-
 }

demo/hacktoberfest-custom-themes/js/use-case/theme-use-case.js

@@ -2,61 +2,14 @@ class ThemeUseCase extends HacktoberfestUseCase {
 
     _theme;
 
-    // Default bpmn-visualization theme
-    #originalDefaultFontColor;
-    #originalDefaultFontFamily;
-    #originalDefaultFontSize;
-    #originalDefaultStrokeColor;
-    #originalDefaultFillColor;
-    #originalPoolLabelFillColor;
-    #originalConfigureCommonDefaultStyle;
-
     constructor(inputProjectName, themeState, title) {
         super(inputProjectName, title);
         this._theme = themes.get(themeState.year).get(themeState.mode);
     }
 
     _initBpmnVisualization(options) {
-        this._saveDefaultTheme();
-
-        bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = this._theme.default.fill;
-        bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = this._theme.default.stroke;
-        bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = this._theme.default.font;
-        bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = this._theme.default.fontFamily ?? 'Inter, Helvetica, sans-serif';
-        bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE = this._theme.default.fontSize ?? bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE;
-
         const bpmnVisualization = new ThemeBpmnVisualization(options, this._theme);
-        this._restoreDefaultTheme();
-        return bpmnVisualization;
-    }
-
-    /**
-     * Generic implementation
-     */
-    _saveDefaultTheme() {
-        this.#originalDefaultFontColor = bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR;
-        this.#originalDefaultFontFamily = bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY;
-        this.#originalDefaultFontSize = bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE;
-        this.#originalDefaultStrokeColor = bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR;
-        this.#originalDefaultFillColor = bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR;
-        this.#originalPoolLabelFillColor = bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR;
-        this.#originalConfigureCommonDefaultStyle = bpmnvisu.StyleConfigurator.configureCommonDefaultStyle;
-    }
-
-    /**
-     * Generic implementation
-     */
-    _restoreDefaultTheme() {
-        bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = this.#originalDefaultFontColor;
-        bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = this.#originalDefaultFontFamily;
-        bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE = this.#originalDefaultFontSize;
-        bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = this.#originalDefaultStrokeColor;
-        bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = this.#originalDefaultFillColor;
-        bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR = this.#originalPoolLabelFillColor;
-        bpmnvisu.StyleConfigurator.configureCommonDefaultStyle = this.#originalConfigureCommonDefaultStyle;
-    }
-
-    _preLoadDiagram() {
         bpmnvisu.IconPainterProvider.set(new ThemeIconPainter(this._theme));
+        return bpmnVisualization;
     }
 }

demo/monitoring-all-process-instances/index.html

@@ -106,7 +106,7 @@ <h5>Displayed information</h5>
             </div>
             <div id="use-case-panel" class="bg-gray">
                 <div class="text-center">
-                    <h4 id="monitoring-title"></h4>
+                    <h4 id="title"></h4>
                 </div>
                 <div class="columns">
                     <div id="legend" class="column col-auto col-mx-auto">
@@ -145,7 +145,7 @@ <h4 id="monitoring-title"></h4>
                         </div>
                     </div>
                     <div class="column col-10 col-mx-auto">
-                        <div id="monitoring-bpmn-container" class="col-12 bpmn-container"></div>
+                        <div id="bpmn-container" class="col-12 bpmn-container"></div>
                     </div>
                 </div>
             </div>

demo/monitoring-all-process-instances/js/index.js

@@ -1,16 +1,18 @@
-function buildUseCase(type) {
-    switch (type) {
+function buildUseCase() {
+    const dataType = state.dataType;
+
+    switch (state.useCaseType) {
         case 'time':
-            return  new MonitoringUseCase(  getHardwareRetailerDiagram, new TimeExecutionData(), "Average run time");
+            return new MonitoringUseCase({ getDiagram: getHardwareRetailerDiagram, executionData: new TimeExecutionData(), dataType, title: "Average run time" });
         case 'frequency':
         default:
-            return new MonitoringUseCase(  getHardwareRetailerDiagram, new FrequencyExecutionData(), "Number of execution");
+            return new MonitoringUseCase({ getDiagram: getHardwareRetailerDiagram, executionData: new FrequencyExecutionData(), dataType, title: "Number of execution" });
     }
 }
 
 function changeUseCase() {
-    state.useCase = buildUseCase(state.useCaseType);
-    state.useCase.display(state.dataType);
+    state.useCase = buildUseCase();
+    state.useCase.display();
 }
 
 // Initialize the state and the radio buttons

demo/monitoring-all-process-instances/js/monitoring-use-case.js

@@ -1,21 +1,17 @@
 class MonitoringUseCase extends UseCase {
     #executionData;
+    #dataType;
 
-    constructor(getDiagram, executionData, title) {
-        document.querySelector(`[id*="monitoring-title"]`).textContent = title;
-        document.querySelector(`[id*="monitoring-bpmn-container"]`).textContent = undefined;
-        super('monitoring', getDiagram, true);
+    constructor({ getDiagram, executionData, title, dataType }) {
+        super({ getDiagram, navigationEnabled: true, title });
         this.#executionData = executionData;
+        this.#executionData.updateLegends();
+        this.#dataType = dataType;
     }
 
-    display(dataType) {
-        super.display(dataType);
-        this.displayData(dataType);
-    }
-
-    displayData(dataType) {
-        console.info('Setting %s data', dataType);
-        switch (dataType) {
+    _postLoadDiagram() {
+        console.info('Setting %s data', this.#dataType);
+        switch (this.#dataType) {
             case 'overlays':
                 this.#executionData.hidePathLegend();
                 this.#executionData.displayOverlaysLegends();
@@ -53,12 +49,6 @@ class MonitoringUseCase extends UseCase {
                     }
                 });
         }
-        console.info('%s data set', dataType);
-    }
-
-
-    _displayPanel() {
-        super._displayPanel();
-        this.#executionData.updateLegends();
+        console.info('%s data set', this.#dataType);
     }
 }

demo/prediction/index.html

@@ -94,7 +94,7 @@ <h5>Use case</h5>
             </div>
             <div id="use-case-panel" class="bg-gray">
                 <div class="text-center">
-                    <h4 id="prediction-title"></h4>
+                    <h4 id="title"></h4>
                 </div>
                 <div class="columns" style="padding: 0 1rem">
                     <div id="legend" class="column col-2 col-mx-auto state-predicted-late" style="margin: auto; padding-right: 0.7rem">
@@ -108,7 +108,7 @@ <h4 id="prediction-title"></h4>
                         </fieldset>
                     </div>
                     <div class="column col-10 col-mx-auto">
-                        <div id="prediction-bpmn-container" class="col-12 bpmn-container"></div>
+                        <div id="bpmn-container" class="col-12 bpmn-container"></div>
                     </div>
                 </div>
             </div>

demo/prediction/js/index.js

@@ -1,5 +1,5 @@
-function buildUseCase(type) {
-    switch (type) {
+function buildUseCase() {
+    switch (state.dataType) {
         case 'late':
             return new PredicatedLateUseCase('Predicted Late');
         case 'onTime':
@@ -9,8 +9,8 @@ function buildUseCase(type) {
 }
 
 function changeUseCase() {
-    state.useCase = buildUseCase(state.dataType);
-    state.useCase.display(state.dataType);
+    state.useCase = buildUseCase();
+    state.useCase.display();
 }
 
 const state = {

demo/prediction/js/prediction-use-case.js

@@ -4,18 +4,17 @@ class PredicatedLateUseCase extends UseCase {
     _executionData;
 
     constructor(title) {
-        document.querySelector(`[id*="prediction-title"]`).textContent = title;
-        document.querySelector(`[id*="prediction-bpmn-container"]`).textContent = undefined;
-        super('prediction', () => pizzaDiagram(), false, {fit: {type: 'Center', margin: 20}});
-    }
-
-    display(dataType) {
-        super.display(dataType);
-        this._style.switchLegend();
+        super({
+            getDiagram: pizzaDiagram,
+            navigationEnabled: false,
+            loadOptions: { fit: {type: 'Center', margin: 20} },
+            title
+        });
     }
 
     _postLoadDiagram() {
         this._initManagers();
+        this._style.switchLegend();
 
         this._style.reduceVisibilityOfExecutedElements(this._executionData.executedElements);
         this._style.highlightRunningElementWithPrediction(this._executionData.runningElementWithPrediction);