From 4da857a813dad433b9a146d662e3935fea801a9a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souchet=20C=C3=A9line?= <4921914+csouchet@users.noreply.github.com> Date: Thu, 12 Oct 2023 16:51:06 +0200 Subject: [PATCH] refactor(demo): simplify the UseCase classes and how to set theme (#564) --- demo/hacktoberfest-custom-themes/index.html | 4 +- demo/hacktoberfest-custom-themes/js/index.js | 16 +++-- .../js/theme-bpmn-visualization.js | 33 +++++++---- .../js/use-case/hacktoberfest-use-case.js | 20 +++---- .../js/use-case/theme-use-case.js | 49 +-------------- .../index.html | 4 +- .../js/index.js | 14 +++-- .../js/monitoring-use-case.js | 28 +++------ demo/prediction/index.html | 4 +- demo/prediction/js/index.js | 8 +-- demo/prediction/js/prediction-use-case.js | 15 +++-- demo/static/js/use-case.js | 59 ++++--------------- 12 files changed, 87 insertions(+), 167 deletions(-) diff --git a/demo/hacktoberfest-custom-themes/index.html b/demo/hacktoberfest-custom-themes/index.html index 9858d061..a2b717c0 100644 --- a/demo/hacktoberfest-custom-themes/index.html +++ b/demo/hacktoberfest-custom-themes/index.html @@ -121,10 +121,10 @@
Theme Year
-

+

-
+
diff --git a/demo/hacktoberfest-custom-themes/js/index.js b/demo/hacktoberfest-custom-themes/js/index.js index a916bf78..01200de4 100644 --- a/demo/hacktoberfest-custom-themes/js/index.js +++ b/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(); } diff --git a/demo/hacktoberfest-custom-themes/js/theme-bpmn-visualization.js b/demo/hacktoberfest-custom-themes/js/theme-bpmn-visualization.js index 78159966..3c0cd2cf 100644 --- a/demo/hacktoberfest-custom-themes/js/theme-bpmn-visualization.js +++ b/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; } diff --git a/demo/hacktoberfest-custom-themes/js/use-case/hacktoberfest-use-case.js b/demo/hacktoberfest-custom-themes/js/use-case/hacktoberfest-use-case.js index da53f7b2..23d7b133 100644 --- a/demo/hacktoberfest-custom-themes/js/use-case/hacktoberfest-use-case.js +++ b/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()); - } - } \ No newline at end of file diff --git a/demo/hacktoberfest-custom-themes/js/use-case/theme-use-case.js b/demo/hacktoberfest-custom-themes/js/use-case/theme-use-case.js index dcecb86f..e5a4d924 100644 --- a/demo/hacktoberfest-custom-themes/js/use-case/theme-use-case.js +++ b/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; } } diff --git a/demo/monitoring-all-process-instances/index.html b/demo/monitoring-all-process-instances/index.html index a5c89b9b..82d3b988 100644 --- a/demo/monitoring-all-process-instances/index.html +++ b/demo/monitoring-all-process-instances/index.html @@ -106,7 +106,7 @@
Displayed information
-

+

@@ -145,7 +145,7 @@

-
+
diff --git a/demo/monitoring-all-process-instances/js/index.js b/demo/monitoring-all-process-instances/js/index.js index b98182c1..c5559919 100644 --- a/demo/monitoring-all-process-instances/js/index.js +++ b/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 diff --git a/demo/monitoring-all-process-instances/js/monitoring-use-case.js b/demo/monitoring-all-process-instances/js/monitoring-use-case.js index 6523db27..81a13b5b 100644 --- a/demo/monitoring-all-process-instances/js/monitoring-use-case.js +++ b/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); } } diff --git a/demo/prediction/index.html b/demo/prediction/index.html index 3d77073d..14acd3dc 100644 --- a/demo/prediction/index.html +++ b/demo/prediction/index.html @@ -94,7 +94,7 @@
Use case
-

+

@@ -108,7 +108,7 @@

-
+
diff --git a/demo/prediction/js/index.js b/demo/prediction/js/index.js index eebe6c67..7bee8882 100644 --- a/demo/prediction/js/index.js +++ b/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 = { diff --git a/demo/prediction/js/prediction-use-case.js b/demo/prediction/js/prediction-use-case.js index a39e2624..01c3c30b 100644 --- a/demo/prediction/js/prediction-use-case.js +++ b/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); diff --git a/demo/static/js/use-case.js b/demo/static/js/use-case.js index dd6d0c16..795f57c5 100644 --- a/demo/static/js/use-case.js +++ b/demo/static/js/use-case.js @@ -3,7 +3,6 @@ const defaultLoadOptions = { } class UseCase { - #type; #getDiagram; #navigationEnabled; #loadOptions; @@ -13,35 +12,24 @@ class UseCase { */ _bpmnVisualization; - #alreadyLoad = false; - - constructor(type, getDiagram, navigationEnabled, loadOptions) { - this.#type = type; + constructor({ getDiagram, navigationEnabled, loadOptions, title }) { this.#getDiagram = getDiagram; this.#navigationEnabled = navigationEnabled; this.#loadOptions = {...defaultLoadOptions, ...loadOptions}; - } - get type() { - return this.#type; + document.querySelector(`[id*="title"]`).textContent = title; + document.querySelector(`[id*="bpmn-container"]`).textContent = undefined; } /** - * Display the panel containing the bpmn container, and load the diagram if it is not already done. - * - * @param {string} dataType + * Initialize bpmn-visualization and load the diagram. */ - display(dataType) { - this._displayPanel(); - - if (!this.#alreadyLoad) { - this._bpmnVisualization = this._initBpmnVisualization({container: `${this.#type}-bpmn-container`, navigation: {enabled: this.#navigationEnabled}}); - this._displayVersionInfoInFooter(); // This is called by each use case available in the page, but this is not an issue. All use the same bpmn-visualization version - this._preLoadDiagram(); - this._bpmnVisualization.load(this.#getDiagram(), this.#loadOptions); - this._postLoadDiagram(); - this.#alreadyLoad = true; - } + display() { + this._bpmnVisualization = this._initBpmnVisualization({ container: 'bpmn-container', navigation: { enabled: this.#navigationEnabled } }); + this._displayVersionInfoInFooter(); // This is called by each use case available in the page, but this is not an issue. All use the same bpmn-visualization version + this._preLoadDiagram(); + this._bpmnVisualization.load(this.#getDiagram(), this.#loadOptions); + this._postLoadDiagram(); } _displayVersionInfoInFooter() { @@ -70,31 +58,4 @@ class UseCase { */ _postLoadDiagram() { } - - /** - * Generic implementation - */ - _displayPanel() { - this._displayElementAndHideOthers("bpmn-container"); - this._displayElementAndHideOthers("title"); - } - - /** - * Generic implementation - */ - _displayElementAndHideOthers(subId) { - // Hide all corresponding HTML elements - const bpmnContainers = document.querySelectorAll(`[id*="${subId}"]`); - for (let i = 0; i < bpmnContainers.length; i++) { - bpmnContainers.item(i).classList.add('d-hide'); - } - - // Display corresponding HTML element - const element = document.getElementById(`${this.#type}-${subId}`); - if(element) { - element.classList.remove('d-hide'); - console.info('%s displayed', `${this.#type}-${subId}`); - } - } - }