From 18278dc45e6b024b3f3877411b49a5edaff2222a Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 8 Jul 2024 20:05:12 +0530 Subject: [PATCH] make themeVars optional --- packages/mermaid/src/config.ts | 2 +- packages/mermaid/src/config.type.ts | 52 ++++++++++++++++++- .../mermaid/src/diagrams/pie/pieRenderer.ts | 26 +++++----- .../src/diagrams/quadrant-chart/quadrantDb.ts | 30 +++++------ .../mermaid/src/diagrams/xychart/xychartDb.ts | 2 +- packages/mermaid/src/mermaidAPI.ts | 4 +- 6 files changed, 83 insertions(+), 33 deletions(-) diff --git a/packages/mermaid/src/config.ts b/packages/mermaid/src/config.ts index 9abcc60021..1229bcd22b 100644 --- a/packages/mermaid/src/config.ts +++ b/packages/mermaid/src/config.ts @@ -189,7 +189,7 @@ export const addDirective = (directive: MermaidConfig) => { sanitizeDirective(directive); // If the directive has a fontFamily, but no themeVariables, add the fontFamily to the themeVariables - if (directive.fontFamily && !directive.themeVariables.fontFamily) { + if (directive.fontFamily && !directive.themeVariables?.fontFamily) { directive.themeVariables = { fontFamily: directive.fontFamily }; } diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index b7cf27e72b..b712b020d7 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -55,6 +55,56 @@ export type DOMPurifyConfiguration = import('dompurify').Config; */ export type CSSFontSize = string | number; +export interface ThemeVariables { + fontFamily?: string; + fontSize?: CSSFontSize; + fontWeight?: number; + primaryColor?: string; + primaryTextColor?: string; + pie1?: string; + pie2?: string; + pie3?: string; + pie4?: string; + pie5?: string; + pie6?: string; + pie7?: string; + pie8?: string; + pie9?: string; + pie10?: string; + pie11?: string; + pie12?: string; + pieOuterStrokeWidth?:number; + quadrant1Fill?: string; + quadrant2Fill?: string; + quadrant3Fill?: string; + quadrant4Fill?: string; + quadrant1TextFill?: string; + quadrant2TextFill?: string; + quadrant3TextFill?: string; + quadrant4TextFill?: string; + quadrantPointFill?: string; + quadrantPointTextFill?: string; + quadrantXAxisTextFill?: string; + quadrantYAxisTextFill?: string; + quadrantInternalBorderStrokeFill?: string; + quadrantExternalBorderStrokeFill?: string; + quadrantTitleFill?: string; + xyChart?: { + backgroundColor?: string; + titleColor?: string; + xAxisTitleColor?: string; + xAxisLabelColor?: string; + xAxisTickColor?: string; + xAxisLineColor?: string; + yAxisTitleColor?: string; + yAxisLabelColor?: string; + yAxisTickColor?: string; + yAxisLineColor?: string; + plotColorPalette?: string; + }; + THEME_COLOR_LIMIT?: number; + +} export interface MermaidConfig { /** * Theme, the CSS style sheet. @@ -62,7 +112,7 @@ export interface MermaidConfig { * */ theme?: 'default' | 'forest' | 'dark' | 'neutral' | 'null'; - themeVariables?: any; + themeVariables?: ThemeVariables; themeCSS?: string; /** * The maximum allowed size of the users text diagram diff --git a/packages/mermaid/src/diagrams/pie/pieRenderer.ts b/packages/mermaid/src/diagrams/pie/pieRenderer.ts index b82cb83fb2..16da81173c 100644 --- a/packages/mermaid/src/diagrams/pie/pieRenderer.ts +++ b/packages/mermaid/src/diagrams/pie/pieRenderer.ts @@ -50,7 +50,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')'); const { themeVariables } = globalConfig; - let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth); + let [outerStrokeWidth] = parseFontSize(themeVariables?.pieOuterStrokeWidth); outerStrokeWidth ??= 2; const textPosition: number = pieConfig.textPosition; @@ -76,18 +76,18 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => { const arcs: d3.PieArcDatum[] = createPieArcs(sections); const myGeneratedColors = [ - themeVariables.pie1 || null, - themeVariables.pie2 || null, - themeVariables.pie3 || null, - themeVariables.pie4 || null, - themeVariables.pie5 || null, - themeVariables.pie6 || null, - themeVariables.pie7 || null, - themeVariables.pie8 || null, - themeVariables.pie9 || null, - themeVariables.pie10 || null, - themeVariables.pie11 || null, - themeVariables.pie12 || null, + themeVariables?.pie1 || null, + themeVariables?.pie2 || null, + themeVariables?.pie3 || null, + themeVariables?.pie4 || null, + themeVariables?.pie5 || null, + themeVariables?.pie6 || null, + themeVariables?.pie7 || null, + themeVariables?.pie8 || null, + themeVariables?.pie9 || null, + themeVariables?.pie10 || null, + themeVariables?.pie11 || null, + themeVariables?.pie12 || null, ]; // Set the color scale const color: d3.ScaleOrdinal = scaleOrdinal(myGeneratedColors); diff --git a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts index 9e16defa1e..63f4a3c7e7 100644 --- a/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts +++ b/packages/mermaid/src/diagrams/quadrant-chart/quadrantDb.ts @@ -126,21 +126,21 @@ function getQuadrantData() { quadrantBuilder.setConfig(quadrantChartConfig); } quadrantBuilder.setThemeConfig({ - quadrant1Fill: themeVariables.quadrant1Fill, - quadrant2Fill: themeVariables.quadrant2Fill, - quadrant3Fill: themeVariables.quadrant3Fill, - quadrant4Fill: themeVariables.quadrant4Fill, - quadrant1TextFill: themeVariables.quadrant1TextFill, - quadrant2TextFill: themeVariables.quadrant2TextFill, - quadrant3TextFill: themeVariables.quadrant3TextFill, - quadrant4TextFill: themeVariables.quadrant4TextFill, - quadrantPointFill: themeVariables.quadrantPointFill, - quadrantPointTextFill: themeVariables.quadrantPointTextFill, - quadrantXAxisTextFill: themeVariables.quadrantXAxisTextFill, - quadrantYAxisTextFill: themeVariables.quadrantYAxisTextFill, - quadrantExternalBorderStrokeFill: themeVariables.quadrantExternalBorderStrokeFill, - quadrantInternalBorderStrokeFill: themeVariables.quadrantInternalBorderStrokeFill, - quadrantTitleFill: themeVariables.quadrantTitleFill, + quadrant1Fill: themeVariables?.quadrant1Fill, + quadrant2Fill: themeVariables?.quadrant2Fill, + quadrant3Fill: themeVariables?.quadrant3Fill, + quadrant4Fill: themeVariables?.quadrant4Fill, + quadrant1TextFill: themeVariables?.quadrant1TextFill, + quadrant2TextFill: themeVariables?.quadrant2TextFill, + quadrant3TextFill: themeVariables?.quadrant3TextFill, + quadrant4TextFill: themeVariables?.quadrant4TextFill, + quadrantPointFill: themeVariables?.quadrantPointFill, + quadrantPointTextFill: themeVariables?.quadrantPointTextFill, + quadrantXAxisTextFill: themeVariables?.quadrantXAxisTextFill, + quadrantYAxisTextFill: themeVariables?.quadrantYAxisTextFill, + quadrantExternalBorderStrokeFill: themeVariables?.quadrantExternalBorderStrokeFill, + quadrantInternalBorderStrokeFill: themeVariables?.quadrantInternalBorderStrokeFill, + quadrantTitleFill: themeVariables?.quadrantTitleFill, }); quadrantBuilder.setData({ titleText: getDiagramTitle() }); return quadrantBuilder.build(); diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 23b90724cd..0a545bf6b3 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -42,7 +42,7 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); - return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart); + return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables?.xyChart); } function getChartDefaultConfig(): XYChartConfig { const config = configApi.getConfig(); diff --git a/packages/mermaid/src/mermaidAPI.ts b/packages/mermaid/src/mermaidAPI.ts index da19a3f1ef..7bca4d995e 100644 --- a/packages/mermaid/src/mermaidAPI.ts +++ b/packages/mermaid/src/mermaidAPI.ts @@ -471,9 +471,9 @@ const render = async function ( /** * @param options - Initial Mermaid options */ -function initialize(options: MermaidConfig = { themeVariables: {} }) { +function initialize(options: MermaidConfig = {}) { // Handle legacy location of font-family configuration - if (options?.fontFamily && !options.themeVariables.fontFamily) { + if (options?.fontFamily && !options.themeVariables?.fontFamily) { if (!options.themeVariables) { options.themeVariables = {}; }