marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-12-02 18:45:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(arch): correctly utilize calculated style

Browse Source
This commit is contained in:
NicolasNewman
2024-07-06 17:32:07 -05:00
parent 1b128cae77
commit 4d6b92e5bf
7 changed files with 50 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/mermaid/src/diagrams/architecture/architectureStyles.ts
View File

@@ -4,8 +4,8 @@ import type { ArchitectureStyleOptions } from './architectureTypes.js';
const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) => const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
` `
.edge { .edge {
stroke-width: ${options.archEdgeStrokeWidth}; stroke-width: ${options.archEdgeWidth};
stroke: ${options.archEdgeStrokeColor}; stroke: ${options.archEdgeColor};
fill: none; fill: none;
} }
@@ -15,8 +15,8 @@ const getStyles: DiagramStylesProvider = (options: ArchitectureStyleOptions) =>
.node-bkg { .node-bkg {
fill: none; fill: none;
stroke: ${options.archGroupBorderStrokeColor}; stroke: ${options.archGroupBorderColor};
stroke-width: ${options.archGroupBorderStrokeWidth}; stroke-width: ${options.archGroupBorderWidth};
stroke-dasharray: 8; stroke-dasharray: 8;
} }
.node-icon-text { .node-icon-text {

8
packages/mermaid/src/diagrams/architecture/architectureTypes.ts
View File

@@ -171,11 +171,11 @@ export const getArchitectureDirectionXYFactors = function (
}; };
export interface ArchitectureStyleOptions { export interface ArchitectureStyleOptions {
archEdgeStrokeColor: string; archEdgeColor: string;
archEdgeArrowColor: string; archEdgeArrowColor: string;
archEdgeStrokeWidth: string; archEdgeWidth: string;
archGroupBorderStrokeColor: string; archGroupBorderColor: string;
archGroupBorderStrokeWidth: string; archGroupBorderWidth: string;
} }
export interface ArchitectureService { export interface ArchitectureService {

8
packages/mermaid/src/themes/theme-base.js
View File

@@ -221,11 +221,11 @@ class Theme {
this.pieOpacity = this.pieOpacity || '0.7'; this.pieOpacity = this.pieOpacity || '0.7';
/* architecture */ /* architecture */
this.archEdgeStrokeColor = this.archEdgeStrokeColor || '#777'; this.archEdgeColor = this.archEdgeColor || '#777';
this.archEdgeArrowColor = this.archEdgeArrowColor || '#777'; this.archEdgeArrowColor = this.archEdgeArrowColor || '#777';
this.archEdgeStrokeWidth = this.archEdgeStrokeWidth || '3'; this.archEdgeWidth = this.archEdgeWidth || '3';
this.archGroupBorderStrokeColor = this.archGroupBorderStrokeColor || '#000'; this.archGroupBorderColor = this.archGroupBorderColor || '#000';
this.archGroupBorderStrokeWidth = this.archGroupBorderStrokeWidth || '2px'; this.archGroupBorderWidth = this.archGroupBorderWidth || '2px';
/* quadrant-graph */ /* quadrant-graph */
this.quadrant1Fill = this.quadrant1Fill || this.primaryColor; this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;

12
packages/mermaid/src/themes/theme-dark.js
View File

@@ -86,11 +86,11 @@ class Theme {
this.personBkg = this.mainBkg; this.personBkg = this.mainBkg;
/* Architecture Diagram variables */ /* Architecture Diagram variables */
this.archEdgeStrokeColor = 'calculated'; this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated'; this.archEdgeArrowColor = 'calculated';
this.archEdgeStrokeWidth = 'calculated'; this.archEdgeWidth = '3';
this.archGroupBorderStrokeColor = '#FFF'; this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderStrokeWidth = 'calculated'; this.archGroupBorderWidth = '2px';
/* state colors */ /* state colors */
this.labelColor = 'calculated'; this.labelColor = 'calculated';
@@ -140,6 +140,10 @@ class Theme {
this.doneTaskBkgColor = this.mainContrastColor; this.doneTaskBkgColor = this.mainContrastColor;
this.taskTextDarkColor = this.darkTextColor; this.taskTextDarkColor = this.darkTextColor;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || this.lineColor; this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor;

12
packages/mermaid/src/themes/theme-default.js
View File

@@ -113,11 +113,11 @@ class Theme {
this.personBkg = this.mainBkg; this.personBkg = this.mainBkg;
/* Architecture Diagram variables */ /* Architecture Diagram variables */
this.archEdgeStrokeColor = 'calculated'; this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated'; this.archEdgeArrowColor = 'calculated';
this.archEdgeStrokeWidth = 'calculated'; this.archEdgeWidth = '3';
this.archGroupBorderStrokeColor = 'calculated'; this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderStrokeWidth = 'calculated'; this.archGroupBorderWidth = '2px';
/* state colors */ /* state colors */
this.labelColor = 'black'; this.labelColor = 'black';
@@ -201,6 +201,10 @@ class Theme {
this.taskTextColor = this.taskTextLightColor; this.taskTextColor = this.taskTextLightColor;
this.taskTextOutsideColor = this.taskTextDarkColor; this.taskTextOutsideColor = this.taskTextDarkColor;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || this.lineColor; this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor;

11
packages/mermaid/src/themes/theme-forest.js
View File

@@ -86,6 +86,13 @@ class Theme {
this.personBorder = this.primaryBorderColor; this.personBorder = this.primaryBorderColor;
this.personBkg = this.mainBkg; this.personBkg = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated';
this.archEdgeWidth = '3';
this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderWidth = '2px';
/* state colors */ /* state colors */
this.labelColor = 'black'; this.labelColor = 'black';
@@ -162,6 +169,10 @@ class Theme {
this.activeTaskBorderColor = this.taskBorderColor; this.activeTaskBorderColor = this.taskBorderColor;
this.activeTaskBkgColor = this.mainBkg; this.activeTaskBkgColor = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || this.lineColor; this.transitionColor = this.transitionColor || this.lineColor;
this.transitionLabelColor = this.transitionLabelColor || this.textColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor;

11
packages/mermaid/src/themes/theme-neutral.js
View File

@@ -98,6 +98,13 @@ class Theme {
this.personBorder = this.primaryBorderColor; this.personBorder = this.primaryBorderColor;
this.personBkg = this.mainBkg; this.personBkg = this.mainBkg;
/* Architecture Diagram variables */
this.archEdgeColor = 'calculated';
this.archEdgeArrowColor = 'calculated';
this.archEdgeWidth = '3';
this.archGroupBorderColor = this.primaryBorderColor;
this.archGroupBorderWidth = '2px';
/* state colors */ /* state colors */
this.labelColor = 'black'; this.labelColor = 'black';
@@ -199,6 +206,10 @@ class Theme {
this.todayLineColor = this.critBkgColor; this.todayLineColor = this.critBkgColor;
/* Architecture Diagram variables */
this.archEdgeColor = this.lineColor;
this.archEdgeArrowColor = this.lineColor;
/* state colors */ /* state colors */
this.transitionColor = this.transitionColor || '#000'; this.transitionColor = this.transitionColor || '#000';
this.transitionLabelColor = this.transitionLabelColor || this.textColor; this.transitionLabelColor = this.transitionLabelColor || this.textColor;