marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-13 11:09:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #32 from Mermaid-Chart/shape-theme-styling-issue-fix

Browse Source 
fixed issues of  border radius and styling, label padding
This commit is contained in:
Ashish Jain
2025-01-28 11:08:59 +01:00
committed by GitHub
parent 579d1ee33c db2295db24
commit 88b28e8fc3
3 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts
View File

@@ -1,11 +1,14 @@
import type { Node, RectOptions } from '../../types.js'; import type { Node, RectOptions } from '../../types.js';
import type { D3Selection } from '../../../types.js'; import type { D3Selection } from '../../../types.js';
import { drawRect } from './drawRect.js'; import { drawRect } from './drawRect.js';
import { getConfig } from '../../../config.js';
export async function roundedRect<T extends SVGGraphicsElement>( export async function roundedRect<T extends SVGGraphicsElement>(
parent: D3Selection<T>, parent: D3Selection<T>,
node: Node node: Node
) { ) {
const { themeVariables } = getConfig();
const { radius } = themeVariables;
const nodePadding = node.padding ?? 0; const nodePadding = node.padding ?? 0;
let labelPaddingX = 0; let labelPaddingX = 0;
let labelPaddingY = 0; let labelPaddingY = 0;
@@ -16,10 +19,10 @@ export async function roundedRect<T extends SVGGraphicsElement>(
case 'neo': case 'neo':
labelPaddingX = 16; labelPaddingX = 16;
labelPaddingY = 12; labelPaddingY = 12;
rx = ry = 12; rx = ry = radius;
break; break;
default: default:
labelPaddingX = nodePadding * 2; labelPaddingX = nodePadding;
labelPaddingY = nodePadding; labelPaddingY = nodePadding;
rx = ry = 5; rx = ry = 5;
} }

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

@@ -29,7 +29,7 @@ class Theme {
this.mainBkg = '#ECECFF'; this.mainBkg = '#ECECFF';
this.secondBkg = '#ffffde'; this.secondBkg = '#ffffde';
this.lineColor = '#333333'; this.lineColor = '#333333';
this.border1 = '#9370DB'; this.border1 = '#B8B8FF';
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
this.border2 = '#aaaa33'; this.border2 = '#aaaa33';
this.arrowheadColor = '#333333'; this.arrowheadColor = '#333333';

2
packages/mermaid/src/themes/theme-redux.js
View File

@@ -21,7 +21,7 @@ class Theme {
this.noteTextColor = '#28253D'; this.noteTextColor = '#28253D';
this.THEME_COLOR_LIMIT = 12; this.THEME_COLOR_LIMIT = 12;
this.radius = 3; this.radius = 12;
this.strokeWidth = 2; this.strokeWidth = 2;
this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);