GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#5237 Styling fixes

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-06-28 15:27:32 +02:00
parent 3f0ababca6
commit 35797f867f
4 changed files with 8841 additions and 11963 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/mermaid/src/diagrams/flowchart/flowDb.ts
View File

@ -201,9 +201,9 @@ export const updateLink = function (positions: ('default' | number)[], style: st
if (pos === 'default') { if (pos === 'default') {
edges.defaultStyle = style; edges.defaultStyle = style;
} else { } else {
if (utils.isSubstringInArray('fill', style) === -1) { // if (utils.isSubstringInArray('fill', style) === -1) {
style.push('fill:none'); // style.push('fill:none');
} // }
edges[pos].style = style; edges[pos].style = style;
} }
}); });
@ -807,8 +807,8 @@ const addNodeFromVertex = (
parentId, parentId,
padding: config.flowchart?.padding || 8, padding: config.flowchart?.padding || 8,
cssStyles: vertex.styles, cssStyles: vertex.styles,
cssCompiledStyles: getCompiledStyles(vertex.classes), cssCompiledStyles: getCompiledStyles(['default', 'node', ...vertex.classes]),
cssClasses: vertex.classes.join(' '), cssClasses: 'default ' + vertex.classes.join(' '),
shape: getTypeFromVertex(vertex), shape: getTypeFromVertex(vertex),
dir: vertex.dir, dir: vertex.dir,
domId: vertex.domId, domId: vertex.domId,
@ -888,7 +888,8 @@ export const getData = () => {
const e = getEdges(); const e = getEdges();
e.forEach((rawEdge, index) => { e.forEach((rawEdge, index) => {
const { arrowTypeStart, arrowTypeEnd } = destructEdgeType(rawEdge.type); const { arrowTypeStart, arrowTypeEnd } = destructEdgeType(rawEdge.type);
const styles = e.defaultStyle || []; const styles = [...(e.defaultStyle || [])];
if (rawEdge.style) { if (rawEdge.style) {
styles.push(...rawEdge.style); styles.push(...rawEdge.style);
} }

6
packages/mermaid/src/mermaidAPI.ts
View File

@ -145,7 +145,11 @@ export const createCssStyles = (
} }
// create the css styles for the tspan element and the text styles (only if there are textStyles) // create the css styles for the tspan element and the text styles (only if there are textStyles)
if (!isEmpty(styleClassDef.textStyles)) { if (!isEmpty(styleClassDef.textStyles)) {
cssStyles += cssImportantStyles(styleClassDef.id, 'tspan', styleClassDef.textStyles); cssStyles += cssImportantStyles(
styleClassDef.id,
'tspan',
(styleClassDef?.textStyles || []).map((s) => s.replace('color', 'fill'))
);
} }
}); });
} }

9
packages/mermaid/src/rendering-util/createText.ts
View File

@ -2,6 +2,7 @@
// @ts-nocheck TODO: Fix types // @ts-nocheck TODO: Fix types
import type { MermaidConfig } from '../config.type.js'; import type { MermaidConfig } from '../config.type.js';
import type { Group } from '../diagram-api/types.js'; import type { Group } from '../diagram-api/types.js';
import { select } from 'd3';
import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js'; import type { D3TSpanElement, D3TextElement } from '../diagrams/common/commonTypes.js';
import { log } from '../logger.js'; import { log } from '../logger.js';
import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js'; import { markdownToHTML, markdownToLines } from '../rendering-util/handle-markdown-text.js';
@ -223,14 +224,18 @@ export const createText = async (
const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground); const vertexNode = await addHtmlSpan(el, node, width, classes, addSvgBackground);
return vertexNode; return vertexNode;
} else { } else {
const structuredText = markdownToLines(text, config); const structuredText = markdownToLines(text.replace('<br>', '<br/>'), config);
const svgLabel = createFormattedText( const svgLabel = createFormattedText(
width, width,
el, el,
structuredText, structuredText,
text ? addSvgBackground : false text ? addSvgBackground : false
); );
svgLabel.setAttribute('style', style.replace('fill:', 'color:')); if (style.match('stroke:')) style = style.replace('stroke:', 'lineColor:');
select(svgLabel)
.select('text')
.attr('style', style.replace(/color\:/g, 'fill:'));
// svgLabel.setAttribute('style', style);
return svgLabel; return svgLabel;
} }
}; };

20776
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff