Skip to content

Commit 4da857a

Browse files
csouchetcsouchet
authored
refactor(demo): simplify the UseCase classes and how to set theme (#564)
1 parent 7a5dc1a commit 4da857a

File tree

12 files changed

+87
-167
lines changed

12 files changed

+87
-167
lines changed

‎demo/hacktoberfest-custom-themes/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,10 +121,10 @@ <h5>Theme Year</h5>
121121
</div>
122122
<div id="use-case-panel" class="column bg-gray">
123123
<div class="column col-12 text-center">
124-
<h4 id="hacktoberfest-title" class="title"></h4>
124+
<h4 id="title" class="title"></h4>
125125
</div>
126126
<div class="column col-12">
127-
<div id="hacktoberfest-bpmn-container" class="column col-12 bpmn-container"></div>
127+
<div id="bpmn-container" class="column col-12 bpmn-container"></div>
128128
</div>
129129
</div>
130130
</div>

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

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
1-
function buildUseCase(type, year, projectName) {
2-
switch (type) {
1+
function buildUseCase() {
2+
const year = state.themeYear;
3+
const mode = state.useCaseType;
4+
const projectName = state.projectName;
5+
6+
switch (mode) {
37
case 'light':
4-
return new ThemeUseCase( projectName, { year, mode: type }, `Light Hacktoberfest ${year} Theme`);
8+
return new ThemeUseCase(projectName, { year, mode }, `Light Hacktoberfest ${year} Theme`);
59
case 'dark':
6-
return new ThemeUseCase( projectName, { year, mode: type }, `Dark Hacktoberfest ${year} Theme`);
10+
return new ThemeUseCase(projectName, { year, mode }, `Dark Hacktoberfest ${year} Theme`);
711
case 'default':
812
default:
9-
return new HacktoberfestUseCase( projectName, `Default Theme`);
13+
return new HacktoberfestUseCase(projectName, `Default Theme`);
1014
}
1115
}
1216

1317
function changeUseCase() {
14-
state.useCase = buildUseCase(state.useCaseType, state.themeYear, state.projectName);
18+
state.useCase = buildUseCase();
1519
state.useCase.display();
1620
}
1721

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

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
11
class ThemeBpmnVisualization extends bpmnvisu.BpmnVisualization {
2-
_theme;
32

43
constructor(options, theme) {
54
super(options);
6-
this._theme = theme;
7-
this._configureStyle();
5+
this._configureStyle(theme);
86
}
97

10-
_configureStyle() {
8+
_configureStyle(theme) {
119
const styleSheet = this.graph.getStylesheet(); // mxStylesheet
1210

11+
theme.default.fontFamily ??= 'Inter, Helvetica, sans-serif';
12+
configureStyle(styleSheet.getDefaultVertexStyle(), theme.default);
13+
configureStyle(styleSheet.getDefaultEdgeStyle(), theme.default);
14+
1315
// START EVENT
14-
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_START], this._theme.startEvent);
16+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_START], theme.startEvent);
1517

1618
// END EVENT
17-
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_END], this._theme.endEvent);
19+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_END], theme.endEvent);
1820

1921
// USER TASK
20-
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.TASK_USER], this._theme.userTask);
22+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.TASK_USER], theme.userTask);
2123

2224
// EXCLUSIVE GATEWAY
23-
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE], this._theme.exclusiveGateway);
25+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE], theme.exclusiveGateway);
2426

2527
// CALL ACTIVITY
26-
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY], this._theme.callActivity);
28+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY], theme.callActivity);
2729

2830
// POOL
2931
const style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.POOL];
30-
const themePool = this._theme.pool;
32+
const themePool = theme.pool;
33+
themePool.fontSize ??= 16;
3134
configureStyle(style, themePool);
3235
style[StyleIdentifiers.STYLE_FILLCOLOR] = themePool.labelFill;
3336
style[StyleIdentifiers.STYLE_SWIMLANE_FILLCOLOR] = themePool.swimlaneFill;
34-
style[StyleIdentifiers.STYLE_FONTSIZE] = themePool.fontSize ?? 16;
3537
}
3638

3739
}
@@ -40,13 +42,22 @@ function configureStyle(style, themeElement) {
4042
if (themeElement.fill) {
4143
style[StyleIdentifiers.STYLE_FILLCOLOR] = themeElement.fill;
4244
}
45+
4346
if (themeElement.font) {
4447
style[StyleIdentifiers.STYLE_FONTCOLOR] = themeElement.font;
4548
}
49+
if (themeElement.fontFamily) {
50+
style[StyleIdentifiers.STYLE_FONTFAMILY] = themeElement.fontFamily;
51+
}
52+
if (themeElement.fontSize) {
53+
style[StyleIdentifiers.STYLE_FONTSIZE] = themeElement.fontSize;
54+
}
55+
4656
if (themeElement.gradient) {
4757
style[StyleIdentifiers.STYLE_GRADIENT_DIRECTION] = themeElement.gradientDirection ?? Directions.DIRECTION_WEST;
4858
style[StyleIdentifiers.STYLE_GRADIENTCOLOR] = themeElement.gradient;
4959
}
60+
5061
if (themeElement.stroke) {
5162
style[StyleIdentifiers.STYLE_STROKECOLOR] = themeElement.stroke;
5263
}

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
class HacktoberfestUseCase extends UseCase {
22

33
constructor(inputProjectName, title) {
4-
document.querySelector(`[id*="hacktoberfest-title"]`).textContent = title;
5-
document.querySelector(`[id*="hacktoberfest-bpmn-container"]`).textContent = undefined;
6-
super('hacktoberfest', () => getHacktoberfestBpmnDiagram(inputProjectName), false);
4+
super({
5+
getDiagram: () => getHacktoberfestBpmnDiagram(inputProjectName),
6+
navigationEnabled: false,
7+
title
8+
});
9+
}
10+
11+
_initBpmnVisualization(options) {
12+
bpmnvisu.IconPainterProvider.set(new bpmnvisu.IconPainter());
13+
return super._initBpmnVisualization(options);
714
}
815

916
updateCellsLabel(projectName) {
@@ -19,11 +26,4 @@ class HacktoberfestUseCase extends UseCase {
1926
this._bpmnVisualization.graph.model.setValue(cell, value);
2027
}
2128

22-
/**
23-
* Generic implementation
24-
*/
25-
_preLoadDiagram() {
26-
bpmnvisu.IconPainterProvider.set(new bpmnvisu.IconPainter());
27-
}
28-
2929
}

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

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,61 +2,14 @@ class ThemeUseCase extends HacktoberfestUseCase {
22

33
_theme;
44

5-
// Default bpmn-visualization theme
6-
#originalDefaultFontColor;
7-
#originalDefaultFontFamily;
8-
#originalDefaultFontSize;
9-
#originalDefaultStrokeColor;
10-
#originalDefaultFillColor;
11-
#originalPoolLabelFillColor;
12-
#originalConfigureCommonDefaultStyle;
13-
145
constructor(inputProjectName, themeState, title) {
156
super(inputProjectName, title);
167
this._theme = themes.get(themeState.year).get(themeState.mode);
178
}
189

1910
_initBpmnVisualization(options) {
20-
this._saveDefaultTheme();
21-
22-
bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = this._theme.default.fill;
23-
bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = this._theme.default.stroke;
24-
bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = this._theme.default.font;
25-
bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = this._theme.default.fontFamily ?? 'Inter, Helvetica, sans-serif';
26-
bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE = this._theme.default.fontSize ?? bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE;
27-
2811
const bpmnVisualization = new ThemeBpmnVisualization(options, this._theme);
29-
this._restoreDefaultTheme();
30-
return bpmnVisualization;
31-
}
32-
33-
/**
34-
* Generic implementation
35-
*/
36-
_saveDefaultTheme() {
37-
this.#originalDefaultFontColor = bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR;
38-
this.#originalDefaultFontFamily = bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY;
39-
this.#originalDefaultFontSize = bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE;
40-
this.#originalDefaultStrokeColor = bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR;
41-
this.#originalDefaultFillColor = bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR;
42-
this.#originalPoolLabelFillColor = bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR;
43-
this.#originalConfigureCommonDefaultStyle = bpmnvisu.StyleConfigurator.configureCommonDefaultStyle;
44-
}
45-
46-
/**
47-
* Generic implementation
48-
*/
49-
_restoreDefaultTheme() {
50-
bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = this.#originalDefaultFontColor;
51-
bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = this.#originalDefaultFontFamily;
52-
bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE = this.#originalDefaultFontSize;
53-
bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = this.#originalDefaultStrokeColor;
54-
bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = this.#originalDefaultFillColor;
55-
bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR = this.#originalPoolLabelFillColor;
56-
bpmnvisu.StyleConfigurator.configureCommonDefaultStyle = this.#originalConfigureCommonDefaultStyle;
57-
}
58-
59-
_preLoadDiagram() {
6012
bpmnvisu.IconPainterProvider.set(new ThemeIconPainter(this._theme));
13+
return bpmnVisualization;
6114
}
6215
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@ <h5>Displayed information</h5>
106106
</div>
107107
<div id="use-case-panel" class="bg-gray">
108108
<div class="text-center">
109-
<h4 id="monitoring-title"></h4>
109+
<h4 id="title"></h4>
110110
</div>
111111
<div class="columns">
112112
<div id="legend" class="column col-auto col-mx-auto">
@@ -145,7 +145,7 @@ <h4 id="monitoring-title"></h4>
145145
</div>
146146
</div>
147147
<div class="column col-10 col-mx-auto">
148-
<div id="monitoring-bpmn-container" class="col-12 bpmn-container"></div>
148+
<div id="bpmn-container" class="col-12 bpmn-container"></div>
149149
</div>
150150
</div>
151151
</div>

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
function buildUseCase(type) {
2-
switch (type) {
1+
function buildUseCase() {
2+
const dataType = state.dataType;
3+
4+
switch (state.useCaseType) {
35
case 'time':
4-
return new MonitoringUseCase( getHardwareRetailerDiagram, new TimeExecutionData(), "Average run time");
6+
return new MonitoringUseCase({ getDiagram: getHardwareRetailerDiagram, executionData: new TimeExecutionData(), dataType, title: "Average run time" });
57
case 'frequency':
68
default:
7-
return new MonitoringUseCase( getHardwareRetailerDiagram, new FrequencyExecutionData(), "Number of execution");
9+
return new MonitoringUseCase({ getDiagram: getHardwareRetailerDiagram, executionData: new FrequencyExecutionData(), dataType, title: "Number of execution" });
810
}
911
}
1012

1113
function changeUseCase() {
12-
state.useCase = buildUseCase(state.useCaseType);
13-
state.useCase.display(state.dataType);
14+
state.useCase = buildUseCase();
15+
state.useCase.display();
1416
}
1517

1618
// Initialize the state and the radio buttons

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

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
class MonitoringUseCase extends UseCase {
22
#executionData;
3+
#dataType;
34

4-
constructor(getDiagram, executionData, title) {
5-
document.querySelector(`[id*="monitoring-title"]`).textContent = title;
6-
document.querySelector(`[id*="monitoring-bpmn-container"]`).textContent = undefined;
7-
super('monitoring', getDiagram, true);
5+
constructor({ getDiagram, executionData, title, dataType }) {
6+
super({ getDiagram, navigationEnabled: true, title });
87
this.#executionData = executionData;
8+
this.#executionData.updateLegends();
9+
this.#dataType = dataType;
910
}
1011

11-
display(dataType) {
12-
super.display(dataType);
13-
this.displayData(dataType);
14-
}
15-
16-
displayData(dataType) {
17-
console.info('Setting %s data', dataType);
18-
switch (dataType) {
12+
_postLoadDiagram() {
13+
console.info('Setting %s data', this.#dataType);
14+
switch (this.#dataType) {
1915
case 'overlays':
2016
this.#executionData.hidePathLegend();
2117
this.#executionData.displayOverlaysLegends();
@@ -53,12 +49,6 @@ class MonitoringUseCase extends UseCase {
5349
}
5450
});
5551
}
56-
console.info('%s data set', dataType);
57-
}
58-
59-
60-
_displayPanel() {
61-
super._displayPanel();
62-
this.#executionData.updateLegends();
52+
console.info('%s data set', this.#dataType);
6353
}
6454
}

‎demo/prediction/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ <h5>Use case</h5>
9494
</div>
9595
<div id="use-case-panel" class="bg-gray">
9696
<div class="text-center">
97-
<h4 id="prediction-title"></h4>
97+
<h4 id="title"></h4>
9898
</div>
9999
<div class="columns" style="padding: 0 1rem">
100100
<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>
108108
</fieldset>
109109
</div>
110110
<div class="column col-10 col-mx-auto">
111-
<div id="prediction-bpmn-container" class="col-12 bpmn-container"></div>
111+
<div id="bpmn-container" class="col-12 bpmn-container"></div>
112112
</div>
113113
</div>
114114
</div>

‎demo/prediction/js/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
function buildUseCase(type) {
2-
switch (type) {
1+
function buildUseCase() {
2+
switch (state.dataType) {
33
case 'late':
44
return new PredicatedLateUseCase('Predicted Late');
55
case 'onTime':
@@ -9,8 +9,8 @@ function buildUseCase(type) {
99
}
1010

1111
function changeUseCase() {
12-
state.useCase = buildUseCase(state.dataType);
13-
state.useCase.display(state.dataType);
12+
state.useCase = buildUseCase();
13+
state.useCase.display();
1414
}
1515

1616
const state = {

0 commit comments

Comments
 (0)