GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

#5237 Fix of issue with styling of nodes for flowcharts

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-06-25 09:42:55 +02:00
parent 9b56cb3feb
commit 469acbe810
6 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -829,7 +829,7 @@ function getCompiledStyles(classDefs: string[]) {
let compiledStyles: string[] = []; let compiledStyles: string[] = [];
for (const customClass of classDefs) { for (const customClass of classDefs) {
const cssClass = classes.get(customClass); const cssClass = classes.get(customClass);
log.debug('IPI cssClass in flowDb', cssClass); // log.debug('IPI cssClass in flowDb', cssClass);
if (cssClass) { if (cssClass) {
if (cssClass.styles) { if (cssClass.styles) {
compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim()); compiledStyles = [...compiledStyles, ...(cssClass.styles ?? [])].map((s) => s.trim());
@ -907,7 +907,7 @@ export const getData = () => {
edges.push(edge); edges.push(edge);
}); });
log.debug('IPI nodes', JSON.stringify(nodes, null, 2)); // log.debug('IPI nodes', JSON.stringify(nodes, null, 2));
return { nodes, edges, other: {}, config }; return { nodes, edges, other: {}, config };
}; };

2
packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
View File

@ -1,7 +1,7 @@
// @ts-ignore: JISON doesn't support types // @ts-ignore: JISON doesn't support types
import flowParser from './parser/flow.jison'; import flowParser from './parser/flow.jison';
import flowDb from './flowDb.js'; import flowDb from './flowDb.js';
//import flowRendererV2 from './flowRenderer-v2.js'; import flowRendererV2 from './flowRenderer-v2.js';
import flowRendererV3 from './flowRenderer-v3-unified.js'; import flowRendererV3 from './flowRenderer-v3-unified.js';
import flowStyles from './styles.js'; import flowStyles from './styles.js';
import type { MermaidConfig } from '../../config.type.js'; import type { MermaidConfig } from '../../config.type.js';

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

@ -205,16 +205,16 @@ export const createText = async (
} = {}, } = {},
config: MermaidConfig config: MermaidConfig
) => { ) => {
log.info( // log.info(
'IPI createText', // 'IPI createText',
text, // text,
style, // style,
isTitle, // isTitle,
classes, // classes,
useHtmlLabels, // useHtmlLabels,
isNode, // isNode,
addSvgBackground // addSvgBackground
); // );
if (useHtmlLabels) { if (useHtmlLabels) {
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that? // TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
View File

@ -14,6 +14,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
const { look } = getConfig(); const { look } = getConfig();
const { labelStyles, nodeStyles } = styles2String(node); const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.labelStyle = labelStyles;
// console.log('IPI labelStyles:', labelStyles);
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0); const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
@ -21,7 +22,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
const x = -totalWidth / 2; const x = -totalWidth / 2;
const y = -totalHeight / 2; const y = -totalHeight / 2;
log.info('IPI node = ', node); // log.info('IPI node = ', node);
let rect; let rect;
node.look = look; node.look = look;

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/handdrawnStyles.ts
View File

@ -19,7 +19,6 @@ export const compileStyles = (node: Node) => {
// node.cssCompiledStyles is an array of strings in the form of 'key: value' where jey is the css property and value is the value // node.cssCompiledStyles is an array of strings in the form of 'key: value' where jey is the css property and value is the value
// the array is the styles of node node from the classes it is using // the array is the styles of node node from the classes it is using
// node.cssStyles is an array of styles directly set on the node // node.cssStyles is an array of styles directly set on the node
// concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates // concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates
const stylesMap = styles2Map([...(node.cssCompiledStyles || []), ...(node.cssStyles || [])]); const stylesMap = styles2Map([...(node.cssCompiledStyles || []), ...(node.cssStyles || [])]);
return { stylesMap, stylesArray: [...stylesMap] }; return { stylesMap, stylesArray: [...stylesMap] };
@ -75,7 +74,7 @@ export const styles2String = (node: Node) => {
export const userNodeOverrides = (node: Node, options: any) => { export const userNodeOverrides = (node: Node, options: any) => {
const { themeVariables, handdrawnSeed } = getConfig(); const { themeVariables, handdrawnSeed } = getConfig();
const { nodeBorder, mainBkg } = themeVariables; const { nodeBorder, mainBkg } = themeVariables;
const { stylesArray: styles, stylesMap } = compileStyles(node); const { stylesMap } = compileStyles(node);
// index the style array to a map object // index the style array to a map object
const result = Object.assign( const result = Object.assign(

1
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -44,6 +44,7 @@ interface Node {
height?: number; height?: number;
// Specific properties for State Diagram nodes TODO remove and use generic properties // Specific properties for State Diagram nodes TODO remove and use generic properties
intersect?: (point: any) => any; intersect?: (point: any) => any;
intersect2?: (node: Node, point: any) => any;
// Non-generic properties // Non-generic properties
rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc. rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.