forked from process-analytics/bpmn-visualization-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
58 lines (44 loc) · 3.85 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
const bpmn = getGettingStartedBpmnDiagram();
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// default colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-default' });
bpmnVisualization.load(bpmn);
bpmnVisualization.bpmnElementsRegistry.addOverlays('Activity_1potg3p', { position: 'bottom-center', label: 'OK 👌' });
bpmnVisualization.bpmnElementsRegistry.addOverlays('Flow_1wkfbb0', { position: 'middle', label: '763' });
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default font color
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalOverlayDefaultFontColor = bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FONT_COLOR;
const originalOverlayDefaultFontSize = bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FONT_SIZE;
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FONT_COLOR = 'LimeGreen';
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FONT_SIZE = 22;
const bpmnVisualizationOverlayCustomDefaultFont = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-default-font' });
bpmnVisualizationOverlayCustomDefaultFont.load(bpmn);
bpmnVisualizationOverlayCustomDefaultFont.bpmnElementsRegistry.addOverlays('Activity_1potg3p', { position: 'bottom-center', label: 'OK 👌' });
bpmnVisualizationOverlayCustomDefaultFont.bpmnElementsRegistry.addOverlays('Flow_1wkfbb0', { position: 'middle', label: '763' });
// restore StyleConstant defaults
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FONT_COLOR = originalOverlayDefaultFontColor;
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FONT_SIZE = originalOverlayDefaultFontSize;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom default fill and stroke colors
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalOverlayDefaultFillColor = bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FILL_COLOR;
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FILL_COLOR = 'LightBlue';
const bpmnVisualizationOverlayCustomDefaultFill = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-default-fill' });
bpmnVisualizationOverlayCustomDefaultFill.load(bpmn);
bpmnVisualizationOverlayCustomDefaultFill.bpmnElementsRegistry.addOverlays('Activity_1potg3p', { position: 'bottom-center', label: 'OK 👌' });
bpmnVisualizationOverlayCustomDefaultFill.bpmnElementsRegistry.addOverlays('Flow_1wkfbb0', { position: 'middle', label: '763' });
// restore StyleConstant defaults
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_FILL_COLOR = originalOverlayDefaultFillColor;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// custom fill and stroke colors depending on BPMN elements
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
const originalOverlayDefaultStrokeColor = bpmnvisu.StyleDefault.DEFAULT_OVERLAY_STROKE_COLOR;
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_STROKE_COLOR = 'Red';
const bpmnVisualizationOverlayCustomDefaultStroke = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container-custom-default-stroke' });
bpmnVisualizationOverlayCustomDefaultStroke.load(bpmn);
bpmnVisualizationOverlayCustomDefaultStroke.bpmnElementsRegistry.addOverlays('Activity_1potg3p', { position: 'bottom-center', label: 'OK 👌' });
bpmnVisualizationOverlayCustomDefaultStroke.bpmnElementsRegistry.addOverlays('Flow_1wkfbb0', { position: 'middle', label: '763' });
// restore StyleConstant defaults
bpmnvisu.StyleDefault.DEFAULT_OVERLAY_STROKE_COLOR = originalOverlayDefaultStrokeColor;