diff options
Diffstat (limited to 'src/configuration.js')
| -rw-r--r-- | src/configuration.js | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/src/configuration.js b/src/configuration.js new file mode 100644 index 0000000..2c58e88 --- /dev/null +++ b/src/configuration.js @@ -0,0 +1,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; +} |