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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
/**
* The configuration options to control the render.
* @typedef {Object} tConfiguration
*
* @property {tConfigurationOptions} options - Options that control how the map is rendered.
* @property {tConfigurationTheme} theme - Options that control the look of the map.
*/
/**
* Options that control how the map is rendered
* @typedef {Object} tConfigurationOptions
*
* @property {boolean} showBackground - Whether to render the background patterns.
* @property {boolean} smartLabelPositioning - Whether to activate smart label positioning.
*/
/**
* Options that control how the map is rendered
* @typedef {Object} tConfigurationTheme
*
* @property {tConfigurationThemeColors} colors - The colors of map elements.
* @property {tConfigurationThemeSizes} sizes - The sizes of map elements.
* @property {tConfigurationThemeFonts} fonts - The font family and sizes.
* @property {tConfigurationThemeLineHeights} lineHeights - The line heights of map text.
* @property {tConfigurationThemeOpacity} opacity - Opacity of map elements.
*/
/**
* The colors of map elements
* @typedef {Object} tConfigurationThemeColors
*
* @property {string} background - The color of the background.
* @property {string} axis: - The color of the axis lines at the edge of the map.
* @property {string} vertex - The color of component shapes.
* @property {string} label - The color of component labels.
* @property {string} stageForeground - The first color of the stage bitmap when the background is drawn.
* @property {string} stageBackground - The second color of the stage bitmap when the background is drawn.
* @property {string} inertia - The color of the inertia element.
* @property {string} evolution - The color of the evolution arrow.
* @property {Array<string>} groups - A list of colors to use for groups.
*/
/**
* The sizes of map elements
* @typedef {Object} tConfigurationThemeSizes
*
* @property {number} mapWidth - The width of the map.
* @property {number} mapHeight - The height of the map.
* @property {number} padding - The padding around the map for axis labels.
* @property {number} lineWidth - The default line width.
* @property {number} vertexWidth - Width of component shapes.
* @property {number} vertexHeight - Height of component shapes.
* @property {number} arrowheadSize - Size of arrowheads.
* @property {number} stageHeight - Height of stage lines.
*/
/**
* The sizes of map elements
* @typedef {Object} tConfigurationThemeFonts
*
* @property {string} family - The font family to use, in CSS form.
* @property {number} axisLabel - Font size of the axis labels.
* @property {number} vertexLabel - Font size of vertex labels.
* @property {number} note - Font size of note text.
*/
/**
* The line heights of map text
* @typedef {Object} tConfigurationThemeLineHeights
*
* @property {number} vertexLabel - Line height of vertex labels.
* @property {number} note - Line height of note text.
*/
/**
* The opacity of map elements.
* @typedef {Object} tConfigurationThemeOpacity
*
* @property {number} groups - Opacity of the color in groups
*/
const internals = {
kDefaults: {
options: {
showBackground: true,
smartLabelPositioning: true,
},
theme: {
colors: {
background: "#FFFFFF",
axis: "#0F261F",
vertex: "#0F261F",
label: "#0F261F",
stageForeground: "#DAE6E3",
stageBackground: "#FFFFFF",
inertia: "#FA2B00",
evolution: "#4F8FE6",
groups: [
"#4F8FE6", // Olympic Blue
"#FA2B00", // Jasper Red
"#23C17C", // Light Porcelain Green
"#FAED8F", // Naples Yellow
"#FFB3F0", // Hermosa Pink
],
},
sizes: {
mapWidth: 1300,
mapHeight: 1000,
padding: 42,
lineWidth: 0.5,
vertexWidth: 25,
vertexHeight: 25,
arrowheadSize: 10,
stageHeight: 100,
},
fonts: {
family: '"Helvetica Neue", Helvetica, Arial, sans-serif',
axisLabel: 14,
vertexLabel: 12,
note: 12,
},
lineHeights: {
vertexLabel: 18,
note: 18,
},
opacity: {
groups: 0.1,
},
},
},
};
/**
* Returns a configuration by extending the defaults with the user overrides.
*
* @param {tConfiguration} [overrides={}] - User overrides.
* @returns {tConfiguration} The extended configuration.
*/
export function extendConfiguration(overrides = {}) {
const configuration = {
options: Object.assign(
{},
internals.kDefaults.options,
overrides.options,
),
theme: {
colors: Object.assign(
{},
internals.kDefaults.theme.colors,
overrides.theme?.colors,
),
sizes: Object.assign(
{},
internals.kDefaults.theme.sizes,
overrides.theme?.sizes,
),
fonts: Object.assign(
{},
internals.kDefaults.theme.fonts,
overrides.theme?.fonts,
),
lineHeights: Object.assign(
{},
internals.kDefaults.theme.lineHeights,
overrides.theme?.lineHeights,
),
opacity: Object.assign(
{},
internals.kDefaults.theme.opacity,
overrides.theme?.opacity,
),
},
};
return configuration;
}
|
