Skip to content

Commit b4bd015

Browse files
tbouffardtbouffard
committed
[FEAT] Add new theme for Hacktoberfest 2022
For the 1st time, use a dedicated font to better match the brand guidelines. Improve the label bounds in the BPMN diagram, especially for the Hacktoberfest 2022 theme. Use the right wording for the lib name: "BPMN Visualization" --> "bpmn-visualization" General improvements in theme management - let configure the default font size - remove duplication when applying the mxgraph styles and better manage default values
1 parent 24a89d6 commit b4bd015

File tree

6 files changed

+161
-43
lines changed

6 files changed

+161
-43
lines changed

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@
2121
<link rel="stylesheet" href="../../examples/static/css/icons.min.css" type="text/css">
2222
<link rel="stylesheet" href="../../examples/static/css/main.css" type="text/css">
2323
<link rel="stylesheet" href="../static/css/style.css" type="text/css">
24+
<style>
25+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500&display=swap');
26+
</style>
2427
<script defer src="../../examples/static/js/link-to-sources.js"></script>
2528
<!-- load bpmn-visualization -->
2629
<script defer src="https://cdn.jsdelivr.net/npm/bpmn-visualization@0.26.2/dist/bpmn-visualization.min.js"></script>
@@ -75,7 +78,7 @@ <h2>Hacktoberfest diagram</h2>
7578
<div class="column col-4">
7679
<div>
7780
<h5>Project name</h5>
78-
<input id="project-name-input" type="text" value="BPMN Visualization">
81+
<input id="project-name-input" type="text" value="bpmn-visualization">
7982
</div>
8083
</div>
8184
<div id="choose-use-case-panel" class="column col-4">
@@ -100,7 +103,8 @@ <h5>Theme Year</h5>
100103
<div class="form-group">
101104
<select id="theme-year-select" class="form-select">
102105
<option>2020</option>
103-
<option selected>2021</option>
106+
<option>2021</option>
107+
<option selected>2022</option>
104108
</select>
105109
</div>
106110
</div>
@@ -112,13 +116,17 @@ <h4 id="2020-light-title" class="d-hide">Light Hacktoberfest 2020 Theme</h4>
112116
<h4 id="2020-dark-title">Dark Hacktoberfest 2020 Theme</h4>
113117
<h4 id="2021-light-title" class="d-hide">Light Hacktoberfest 2021 Theme</h4>
114118
<h4 id="2021-dark-title">Dark Hacktoberfest 2021 Theme</h4>
119+
<h4 id="2022-light-title" class="d-hide" style="font-family: 'JetBrains Mono', monospace;">Light Hacktoberfest 2022 Theme</h4>
120+
<h4 id="2022-dark-title" style="font-family: 'JetBrains Mono', monospace;">Dark Hacktoberfest 2022 Theme</h4>
115121
<h4 id="default-title" class="d-hide">Default Theme</h4>
116122
</div>
117123
<div class="column col-12">
118124
<div id="2020-light-bpmn-container" class="column col-12 bpmn-container d-hide" style="background-color:inherit"></div>
119125
<div id="2020-dark-bpmn-container" class="column col-12 bpmn-container" style="background-color:inherit"></div>
120126
<div id="2021-light-bpmn-container" class="column col-12 bpmn-container d-hide" style="background-color:inherit"></div>
121127
<div id="2021-dark-bpmn-container" class="column col-12 bpmn-container" style="background-color:inherit"></div>
128+
<div id="2022-light-bpmn-container" class="column col-12 bpmn-container d-hide" style="background-color:inherit"></div>
129+
<div id="2022-dark-bpmn-container" class="column col-12 bpmn-container" style="background-color:inherit"></div>
122130
<div id="default-bpmn-container" class="column col-12 bpmn-container d-hide" style="background-color:inherit"></div>
123131
</div>
124132
</div>

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

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,54 +11,47 @@ class ThemeBpmnVisualization extends bpmnvisu.BpmnVisualization {
1111
const styleSheet = this.graph.getStylesheet(); // mxStylesheet
1212

1313
// START EVENT
14-
let style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_START];
15-
style[StyleIdentifiers.STYLE_STROKECOLOR] = this._theme.startEvent.stroke;
16-
if (this._theme.startEvent.fill) {
17-
style[StyleIdentifiers.STYLE_FILLCOLOR] = this._theme.startEvent.fill;
18-
}
14+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_START], this._theme.startEvent);
1915

2016
// END EVENT
21-
style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_END];
22-
style[StyleIdentifiers.STYLE_STROKECOLOR] = this._theme.endEvent.stroke;
23-
style[StyleIdentifiers.STYLE_FILLCOLOR] = this._theme.endEvent.fill;
24-
if (this._theme.endEvent.gradient) {
25-
style[StyleIdentifiers.STYLE_GRADIENT_DIRECTION] = Directions.DIRECTION_WEST;
26-
style[StyleIdentifiers.STYLE_GRADIENTCOLOR] = this._theme.endEvent.gradient;
27-
}
17+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.EVENT_END], this._theme.endEvent);
2818

2919
// USER TASK
30-
style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.TASK_USER];
31-
style[StyleIdentifiers.STYLE_FILLCOLOR] = this._theme.userTask.fill;
32-
if (this._theme.userTask.font) {
33-
style[StyleIdentifiers.STYLE_FONTCOLOR] = this._theme.userTask.font;
34-
}
20+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.TASK_USER], this._theme.userTask);
3521

3622
// EXCLUSIVE GATEWAY
37-
if (this._theme.exclusiveGateway.fill) {
38-
style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE];
39-
style[StyleIdentifiers.STYLE_FILLCOLOR] = this._theme.exclusiveGateway.fill;
40-
}
23+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.GATEWAY_EXCLUSIVE], this._theme.exclusiveGateway);
4124

4225
// CALL ACTIVITY
43-
style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY];
44-
style[StyleIdentifiers.STYLE_FILLCOLOR] = this._theme.callActivity.fill;
45-
style[StyleIdentifiers.STYLE_FONTCOLOR] = this._theme.callActivity.font;
46-
if (this._theme.callActivity.stroke) {
47-
style[StyleIdentifiers.STYLE_STROKECOLOR] = this._theme.callActivity.stroke;
48-
}
26+
configureStyle(styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.CALL_ACTIVITY], this._theme.callActivity);
4927

5028
// POOL
51-
style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.POOL];
52-
style[StyleIdentifiers.STYLE_FILLCOLOR] = this._theme.pool.labelFill;
53-
style[StyleIdentifiers.STYLE_SWIMLANE_FILLCOLOR] = this._theme.pool.swimlaneFill;
54-
style[StyleIdentifiers.STYLE_FONTSIZE] = 16;
55-
if (this._theme.pool.font) {
56-
style[StyleIdentifiers.STYLE_FONTCOLOR] = this._theme.pool.font;
57-
}
29+
const style = styleSheet.styles[bpmnvisu.ShapeBpmnElementKind.POOL];
30+
const themePool = this._theme.pool;
31+
configureStyle(style, themePool);
32+
style[StyleIdentifiers.STYLE_FILLCOLOR] = themePool.labelFill;
33+
style[StyleIdentifiers.STYLE_SWIMLANE_FILLCOLOR] = themePool.swimlaneFill;
34+
style[StyleIdentifiers.STYLE_FONTSIZE] = themePool.fontSize ?? 16;
5835
}
5936

6037
}
6138

39+
function configureStyle(style, themeElement) {
40+
if (themeElement.fill) {
41+
style[StyleIdentifiers.STYLE_FILLCOLOR] = themeElement.fill;
42+
}
43+
if (themeElement.font) {
44+
style[StyleIdentifiers.STYLE_FONTCOLOR] = themeElement.font;
45+
}
46+
if (themeElement.gradient) {
47+
style[StyleIdentifiers.STYLE_GRADIENT_DIRECTION] = themeElement.gradientDirection ?? Directions.DIRECTION_WEST;
48+
style[StyleIdentifiers.STYLE_GRADIENTCOLOR] = themeElement.gradient;
49+
}
50+
if (themeElement.stroke) {
51+
style[StyleIdentifiers.STYLE_STROKECOLOR] = themeElement.stroke;
52+
}
53+
}
54+
6255
class ThemeIconPainter extends bpmnvisu.IconPainter {
6356
_theme;
6457

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,28 @@ const colors2021 = {
2525
orangeDark: '#B53A25',
2626
};
2727

28+
// Colors are taken from the Figma official design (https://do.co/hacktoberbrand)
29+
const colors2022 = {
30+
// Primary colors (background and font)
31+
// Primary/Manga (kind of white)
32+
primaryManga:'#E5E1E6',
33+
// Primary/Void (kind of black)
34+
primaryVoid: '#170F1E',
35+
36+
// Secondary colors (in the Hacktoberfest logo)
37+
// Secondary/Spark (kind of yellow)
38+
secondarySpark: '#FFE27D',
39+
// Secondary/Surf (kind of green)
40+
secondarySurf: '#64E3FF',
41+
// Secondary/Psybeam (kind of purple)
42+
secondaryPsybeam: '#9092FF',
43+
};
44+
const fonts2022= {
45+
family: 'JetBrains Mono, monospace',
46+
size: 9,
47+
poolFontSize: 14,
48+
}
49+
2850
const themes = new Map();
2951
themes.set("2020",
3052
new Map([['dark', {
@@ -165,3 +187,93 @@ themes.set("2021",
165187
}
166188
}]]));
167189

190+
191+
themes.set("2022", new Map([
192+
['dark', {
193+
default: {
194+
// TODO when disabling this, the gradient of the gateway doesn't work anymore
195+
fill: colors2022.primaryVoid,
196+
stroke: colors2022.primaryManga,
197+
font: colors2022.primaryManga,
198+
fontFamily: fonts2022.family,
199+
fontSize: fonts2022.size,
200+
},
201+
startEvent: {
202+
fill: colors2022.primaryManga,
203+
gradient: colors2022.secondaryPsybeam,
204+
gradientDirection: Directions.DIRECTION_WEST,
205+
stroke: colors2022.secondaryPsybeam,
206+
icon: colors2022.secondaryPsybeam
207+
},
208+
endEvent: {
209+
fill: colors2022.primaryManga,
210+
gradient: colors2022.secondarySurf,
211+
gradientDirection: Directions.DIRECTION_EAST,
212+
stroke: colors2022.secondaryPsybeam,
213+
},
214+
exclusiveGateway: {
215+
fill: colors2022.secondaryManga,
216+
gradient: colors2022.secondarySpark,
217+
gradientDirection: Directions.DIRECTION_EAST,
218+
insideIcon: colors2022.secondarySpark,
219+
},
220+
userTask: {
221+
icon: colors2022.primaryManga
222+
},
223+
callActivity: {
224+
icon: colors2022.primaryManga
225+
},
226+
pool: {
227+
// labelFill: 'rgba(23, 15, 30, 0.5)',
228+
labelFill: colors2022.primaryVoid,
229+
// TODO find a way to have gradient (introduce a fake bpmn lane if no other solution is possible)
230+
swimlaneFill: colors2022.primaryVoid,
231+
// font: colors2021.brownLight
232+
fontSize: fonts2022.poolFontSize,
233+
}
234+
}],
235+
['light', {
236+
default: {
237+
stroke: colors2022.primaryVoid,
238+
font: colors2022.primaryVoid,
239+
fontFamily: fonts2022.family,
240+
fontSize: fonts2022.size,
241+
},
242+
startEvent: {
243+
stroke: colors2022.primaryManga,
244+
fill: colors2022.secondaryPsybeam,
245+
gradient: colors2022.secondarySurf,
246+
gradientDirection: Directions.DIRECTION_WEST,
247+
icon: colors2022.primaryManga,
248+
},
249+
endEvent: {
250+
fill: colors2022.secondaryPsybeam,
251+
gradient: colors2022.secondarySpark,
252+
stroke: colors2022.secondaryPsybeam,
253+
},
254+
exclusiveGateway: {
255+
fill: colors2022.secondarySpark,
256+
gradient: colors2022.primaryManga,
257+
gradientDirection: Directions.DIRECTION_EAST,
258+
insideIcon: colors2022.primaryManga
259+
},
260+
userTask: {
261+
fill: colors2022.secondarySurf,
262+
gradient: colors2022.secondaryPsybeam,
263+
gradientDirection: Directions.DIRECTION_EAST,
264+
icon: colors2022.primaryVoid,
265+
},
266+
callActivity: {
267+
fill: colors2022.primaryManga,
268+
gradient: colors2022.secondarySurf,
269+
gradientDirection: Directions.DIRECTION_WEST,
270+
icon: colors2022.primaryVoid,
271+
},
272+
pool: {
273+
labelFill: colors2022.secondaryPsybeam,
274+
gradient: colors2022.secondarySurf,
275+
gradientDirection: Directions.DIRECTION_NORTH,
276+
fontSize: fonts2022.poolFontSize,
277+
}
278+
}]
279+
]));

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ class ThemeUseCase extends HacktoberfestUseCase {
55
// Default BPMN Visualization theme
66
#originalDefaultFontColor;
77
#originalDefaultFontFamily;
8+
#originalDefaultFontSize;
89
#originalDefaultStrokeColor;
910
#originalDefaultFillColor;
1011
#originalPoolLabelFillColor;
@@ -21,7 +22,8 @@ class ThemeUseCase extends HacktoberfestUseCase {
2122
bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = this._theme.default.fill;
2223
bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = this._theme.default.stroke;
2324
bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = this._theme.default.font;
24-
bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = 'Inter, Helvetica, sans-serif';
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;
2527

2628
const bpmnVisualization = this._internalBuildBpmnVisualization(options);
2729
this._restoreDefaultTheme();
@@ -34,6 +36,7 @@ class ThemeUseCase extends HacktoberfestUseCase {
3436
_saveDefaultTheme() {
3537
this.#originalDefaultFontColor = bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR;
3638
this.#originalDefaultFontFamily = bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY;
39+
this.#originalDefaultFontSize = bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE;
3740
this.#originalDefaultStrokeColor = bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR;
3841
this.#originalDefaultFillColor = bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR;
3942
this.#originalPoolLabelFillColor = bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR;
@@ -46,6 +49,7 @@ class ThemeUseCase extends HacktoberfestUseCase {
4649
_restoreDefaultTheme() {
4750
bpmnvisu.StyleDefault.DEFAULT_FONT_COLOR = this.#originalDefaultFontColor;
4851
bpmnvisu.StyleDefault.DEFAULT_FONT_FAMILY = this.#originalDefaultFontFamily;
52+
bpmnvisu.StyleDefault.DEFAULT_FONT_SIZE = this.#originalDefaultFontSize;
4953
bpmnvisu.StyleDefault.DEFAULT_STROKE_COLOR = this.#originalDefaultStrokeColor;
5054
bpmnvisu.StyleDefault.DEFAULT_FILL_COLOR = this.#originalDefaultFillColor;
5155
bpmnvisu.StyleDefault.POOL_LABEL_FILL_COLOR = this.#originalPoolLabelFillColor;

‎examples/static/js/diagram/bpmn-diagrams.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1677,7 +1677,7 @@ function getHacktoberfestBpmnDiagram(projectName) {
16771677
<bpmn:outgoing>sequence_flow_2</bpmn:outgoing>
16781678
<bpmn:outgoing>sequence_flow_4</bpmn:outgoing>
16791679
</bpmn:exclusiveGateway>
1680-
<bpmn:userTask id="user_task_1" name="Register on https://hacktoberfest.&#10;digitalocean.com">
1680+
<bpmn:userTask id="user_task_1" name="Register on https://hacktoberfest.com/">
16811681
<bpmn:incoming>sequence_flow_2</bpmn:incoming>
16821682
<bpmn:outgoing>sequence_flow_3</bpmn:outgoing>
16831683
</bpmn:userTask>
@@ -1740,13 +1740,13 @@ function getHacktoberfestBpmnDiagram(projectName) {
17401740
<bpmndi:BPMNEdge id="edge_sequence_flow_2" bpmnElement="sequence_flow_2">
17411741
<di:waypoint x="400" y="185" />
17421742
<di:waypoint x="400" y="119" />
1743-
<di:waypoint x="470" y="119" />
1743+
<di:waypoint x="450" y="119" />
17441744
<bpmndi:BPMNLabel>
17451745
<dc:Bounds x="372" y="150" width="15" height="14" />
17461746
</bpmndi:BPMNLabel>
17471747
</bpmndi:BPMNEdge>
17481748
<bpmndi:BPMNEdge id="edge_sequence_flow_3" bpmnElement="sequence_flow_3">
1749-
<di:waypoint x="590" y="119" />
1749+
<di:waypoint x="600" y="119" />
17501750
<di:waypoint x="660" y="119" />
17511751
<di:waypoint x="660" y="185" />
17521752
</bpmndi:BPMNEdge>
@@ -1806,15 +1806,15 @@ function getHacktoberfestBpmnDiagram(projectName) {
18061806
</bpmndi:BPMNLabel>
18071807
</bpmndi:BPMNShape>
18081808
<bpmndi:BPMNShape id="shape_user_task_1" bpmnElement="user_task_1">
1809-
<dc:Bounds x="470" y="84" width="120" height="70" />
1809+
<dc:Bounds x="450" y="84" width="150" height="70" />
18101810
</bpmndi:BPMNShape>
18111811
<bpmndi:BPMNShape id="shape_exclusive_gateway_2" bpmnElement="exclusive_gateway_2" isMarkerVisible="true">
18121812
<dc:Bounds x="635" y="185" width="50" height="50" />
18131813
</bpmndi:BPMNShape>
18141814
<bpmndi:BPMNShape id="shape_user_task_2" bpmnElement="user_task_2">
18151815
<dc:Bounds x="785" y="170" width="130" height="70" />
18161816
<bpmndi:BPMNLabel>
1817-
<dc:Bounds x="795" y="195" width="110" height="45" />
1817+
<dc:Bounds x="792" y="193" width="113" height="45" />
18181818
</bpmndi:BPMNLabel>
18191819
</bpmndi:BPMNShape>
18201820
<bpmndi:BPMNShape id="shape_call_activity" bpmnElement="call_activity">
@@ -1997,7 +1997,7 @@ function getGettingStartedBpmnDiagram() {
19971997
<bpmn:startEvent id="StartEvent_08hc3xj" name="Start coding">
19981998
<bpmn:outgoing>Flow_1wkfbb0</bpmn:outgoing>
19991999
</bpmn:startEvent>
2000-
<bpmn:task id="Activity_1potg3p" name="Enjoy using &#39;BPMN Visualization&#39;">
2000+
<bpmn:task id="Activity_1potg3p" name="Enjoy using &#39;bpmn-visualization&#39;">
20012001
<bpmn:incoming>Flow_1wkfbb0</bpmn:incoming>
20022002
<bpmn:outgoing>Flow_133a5kz</bpmn:outgoing>
20032003
</bpmn:task>

‎examples/static/js/style-identifiers.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const StyleIdentifiers = {
1818

1919
const Directions = {
2020
DIRECTION_EAST: 'east',
21+
DIRECTION_NORTH: 'north',
2122
DIRECTION_SOUTH: 'south',
2223
DIRECTION_WEST: 'west',
2324
}

0 commit comments

Comments
 (0)