GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#5237 passing cssStyles and cssCompiled style arrays

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-06-17 15:42:45 +02:00
parent 5bd3a28667
commit a6f3316ddb
8 changed files with 255 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
packages/mermaid/src/diagrams/state/dataFetcher.js
View File

@ -54,21 +54,39 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM
return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
}
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look) => {
const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look, classes) => {
// graphItemCount = 0;
log.trace('items', doc);
doc.forEach((item) => {
switch (item.stmt) {
case STMT_STATE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look, classes);
break;
case DEFAULT_STATE_TYPE:
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look, classes);
break;
case STMT_RELATION:
{
dataFetcher(parentParsedItem, item.state1, diagramStates, nodes, edges, altFlag, look);
dataFetcher(parentParsedItem, item.state2, diagramStates, nodes, edges, altFlag, look);
dataFetcher(
parentParsedItem,
item.state1,
diagramStates,
nodes,
edges,
altFlag,
look,
classes
);
dataFetcher(
parentParsedItem,
item.state2,
diagramStates,
nodes,
edges,
altFlag,
look,
classes
);
const edgeData = {
id: 'edge' + graphItemCount,
start: item.state1.id,
@ -135,7 +153,7 @@ let cssClasses = newClassesList(); // style classes defined by a classDef
* @param nodes
* @param nodeData
*/
function insertOrUpdateNode(nodes, nodeData) {
function insertOrUpdateNode(nodes, nodeData, classes) {
if (!nodeData.id || nodeData.id === '</join></fork>' || nodeData.id === '</choice>') {
return;
}
@ -143,29 +161,62 @@ function insertOrUpdateNode(nodes, nodeData) {
//Populate node style attributes if nodeData has classes defined
if (nodeData.cssClasses) {
nodeData.cssClasses.split(' ').forEach((cssClass) => {
if (cssClasses[cssClass]) {
cssClasses[cssClass].styles.forEach((style) => {
// Populate nodeData with style attributes specifically to be used by rough.js
if (style && style.startsWith('fill:')) {
nodeData.backgroundColor = style.replace('fill:', '');
}
if (style && style.startsWith('stroke:')) {
nodeData.borderColor = style.replace('stroke:', '');
}
if (style && style.startsWith('stroke-width:')) {
nodeData.borderWidth = style.replace('stroke-width:', '');
}
if (classes.get(cssClass)) {
const classDef = classes.get(cssClass);
// classDef.styles.forEach((style) => {
// nodeData.cssCompiledStyles += style + ',';
// // Populate nodeData with style attributes specifically to be used by rough.js
// if (style && style.startsWith('fill:')) {
// nodeData.backgroundColor = style.replace('fill:', '');
// }
// if (style && style.startsWith('stroke:')) {
// nodeData.borderColor = style.replace('stroke:', '');
// }
// if (style && style.startsWith('stroke-width:')) {
// nodeData.borderWidth = style.replace('stroke-width:', '');
// }
nodeData.cssStyles += style + ';';
});
cssClasses[cssClass].textStyles.forEach((style) => {
nodeData.labelStyle += style + ';';
if (style && style.startsWith('fill:')) {
nodeData.labelTextColor = style.replace('fill:', '');
}
});
// nodeData.cssStyles += style + ';';
// });
// classDef.textStyles.forEach((style) => {
// nodeData.labelStyle += style + ';';
// if (style && style.startsWith('fill:')) {
// nodeData.labelTextColor = style.replace('fill:', '');
// }
// });
nodeData.cssCompiledStyles = [...nodeData.cssCompiledStyles, ...classDef.styles];
}
});
//Populate node style attributes if nodeData has classes defined
if (nodeData.cssStyles) {
// nodeData.cssStyles.split(' ').forEach((csStyle) => {
// if (classes[cssClass]) {
// classes[cssClass].styles.forEach((style) => {
// // Populate nodeData with style attributes specifically to be used by rough.js
// if (style && style.startsWith('fill:')) {
// nodeData.backgroundColor = style.replace('fill:', '');
// }
// if (style && style.startsWith('stroke:')) {
// nodeData.borderColor = style.replace('stroke:', '');
// }
// if (style && style.startsWith('stroke-width:')) {
// nodeData.borderWidth = style.replace('stroke-width:', '');
// }
// nodeData.cssStyles += style + ';';
// });
// classes[cssClass].textStyles.forEach((style) => {
// nodeData.labelStyle += style + ';';
// if (style && style.startsWith('fill:')) {
// nodeData.labelTextColor = style.replace('fill:', '');
// }
// });
// }
// });
}
// nodeData.labelTextColor = '#ffffff';
// nodeData.labelStyle = 'color:#ffffff';
// nodeData.cssStyles = 'fill:#f77';
}
const existingNodeData = nodes.find((node) => node.id === nodeData.id);
if (existingNodeData) {
@ -197,7 +248,7 @@ function getClassesFromDbInfo(dbInfoItem) {
}
//add comma for all other classes
else {
classStr += dbInfoItem.classes[i] + ' ';
classStr += dbInfoItem.classes[i] + ',';
}
}
return classStr;
@ -206,9 +257,41 @@ function getClassesFromDbInfo(dbInfoItem) {
}
}
}
export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, look) => {
/**
* Get classes from the db for the info item.
* If there aren't any or if dbInfoItem isn't defined, return an empty string.
* Else create 1 string from the list of classes found
*
* @param {undefined | null | object} dbInfoItem
* @returns {string}
*/
function getStylesFromDbInfo(dbInfoItem) {
if (dbInfoItem === undefined || dbInfoItem === null) {
return;
} else {
if (dbInfoItem.styles) {
return dbInfoItem.styles;
} else {
return [];
}
}
}
export const dataFetcher = (
parent,
parsedItem,
diagramStates,
nodes,
edges,
altFlag,
look,
classes
) => {
const itemId = parsedItem.id;
const classStr = getClassesFromDbInfo(diagramStates.get(itemId));
const dbState = diagramStates.get(itemId);
const classStr = getClassesFromDbInfo(dbState);
const style = getStylesFromDbInfo(dbState);
log.info('dataFetcher parsedItem', parsedItem, dbState, style);
if (itemId !== 'root') {
let shape = SHAPE_STATE;
@ -229,6 +312,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
shape,
description: common.sanitizeText(itemId, getConfig()),
cssClasses: `${classStr} ${CSS_DIAGRAM_STATE}`,
cssStyles: style,
};
}
@ -287,7 +371,8 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
shape: newNode.shape,
label: newNode.description,
cssClasses: newNode.cssClasses,
cssStyles: '',
cssCompiledStyles: [],
cssStyles: newNode.cssStyles,
id: itemId,
dir: newNode.dir,
domId: stateDomId(itemId, graphItemCount),
@ -319,7 +404,8 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
label: parsedItem.note.text,
cssClasses: CSS_DIAGRAM_NOTE,
// useHtmlLabels: false,
cssStyles: '', // styles.style,
cssStyles: [],
cssCompilesStyles: [],
id: itemId + NOTE_ID + '-' + graphItemCount,
domId: stateDomId(itemId, graphItemCount, NOTE),
type: newNode.type,
@ -334,7 +420,7 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
shape: SHAPE_NOTEGROUP,
label: parsedItem.note.text,
cssClasses: newNode.cssClasses,
cssStyles: '', // styles.style,
cssStyles: [],
id: itemId + PARENT_ID,
domId: stateDomId(itemId, graphItemCount, PARENT),
type: 'group',
@ -352,11 +438,11 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
nodeData.parentId = parentNodeId;
//insert groupData
insertOrUpdateNode(nodes, groupData);
insertOrUpdateNode(nodes, groupData, classes);
//insert noteData
insertOrUpdateNode(nodes, noteData);
insertOrUpdateNode(nodes, noteData, classes);
//insert nodeData
insertOrUpdateNode(nodes, nodeData);
insertOrUpdateNode(nodes, nodeData, classes);
let from = itemId;
let to = noteData.id;
@ -382,12 +468,12 @@ export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, alt
look,
});
} else {
insertOrUpdateNode(nodes, nodeData);
insertOrUpdateNode(nodes, nodeData, classes);
}
}
if (parsedItem.doc) {
log.trace('Adding nodes children ');
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look);
setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look, classes);
}
};

41
packages/mermaid/src/diagrams/state/parser/state-style.spec.js
View File

@ -217,4 +217,45 @@ describe('ClassDefs and classes when parsing a State diagram', () => {
});
});
});
describe('style statement for a state (style)', () => {
describe('defining (style)', () => {
it('has "style" as a keyword, an id, and can set a css style attribute', function () {
stateDiagram.parser.parse(`
stateDiagram-v2
style id1 background:#bbb;`);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
// const styleClasses = stateDb.getClasses();
// expect(styleClasses.get('exampleClass').styles.length).toEqual(1);
// expect(styleClasses.get('exampleClass').styles[0]).toEqual('background:#bbb');
});
it('has handles multiple ids', function () {
stateDiagram.parser.parse(`
stateDiagram-v2
style id1,id2 background:#bbb;`);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
// const styleClasses = stateDb.getClasses();
// expect(styleClasses.get('exampleClass').styles.length).toEqual(1);
// expect(styleClasses.get('exampleClass').styles[0]).toEqual('background:#bbb');
});
// it('can define multiple attributes separated by commas', function () {
// stateDiagram.parser.parse(
// 'stateDiagram-v2\n classDef exampleClass background:#bbb, font-weight:bold, font-style:italic;'
// );
// stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
// const styleClasses = stateDb.getClasses();
// expect(styleClasses.get('exampleClass').styles.length).toEqual(3);
// expect(styleClasses.get('exampleClass').styles[0]).toEqual('background:#bbb');
// expect(styleClasses.get('exampleClass').styles[1]).toEqual('font-weight:bold');
// expect(styleClasses.get('exampleClass').styles[2]).toEqual('font-style:italic');
// });
});
});
});

18
packages/mermaid/src/diagrams/state/parser/stateDiagram.jison
View File

@ -27,6 +27,13 @@
%x CLASSDEFID
%x CLASS
%x CLASS_STYLE
// Style statement states
%x STYLE
%x STYLE_IDS
%x STYLEDEF_STYLES
%x STYLEDEF_STYLEOPTS
%x NOTE
%x NOTE_ID
%x NOTE_TEXT
@ -75,6 +82,10 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<CLASS>(\w+)+((","\s*\w+)*) { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
<CLASS_STYLE>[^\n]* { this.popState(); return 'STYLECLASS' }
<INITIAL,struct>"style"\s+ { this.pushState('STYLE'); return 'style'; }
<STYLE>[\w,]+\s+ { this.popState(); this.pushState('STYLEDEF_STYLES'); return 'STYLE_IDS' }
<STYLEDEF_STYLES>[^\n]* { this.popState(); return 'STYLEDEF_STYLEOPTS' }
"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
<SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();}
@ -168,6 +179,7 @@ line
statement
: classDefStatement
| styleStatement
| cssClassStatement
| idStatement { /* console.log('got id', $1); */
$$=$1;
@ -246,6 +258,12 @@ classDefStatement
}
;
styleStatement
: style STYLE_IDS STYLEDEF_STYLEOPTS {
$$ = { stmt: 'style', id: $2.trim(), styleClass: $3.trim() };
}
;
cssClassStatement
: class CLASSENTITY_IDS STYLECLASS {
//console.log('apply class: id(s): ',$2, ' style class: ', $3);

2
packages/mermaid/src/diagrams/state/stateCommon.ts
View File

@ -14,6 +14,7 @@ export const STMT_STATE = 'state';
export const STMT_RELATION = 'relation';
// parsed statement type for a classDef
export const STMT_CLASSDEF = 'classDef';
export const STMT_STYLEDEF = 'style';
// parsed statement type for applyClass
export const STMT_APPLYCLASS = 'applyClass';
@ -64,6 +65,7 @@ export default {
STMT_STATE,
STMT_RELATION,
STMT_CLASSDEF,
STMT_STYLEDEF,
STMT_APPLYCLASS,
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,

22
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -18,6 +18,7 @@ import {
STMT_STATE,
STMT_RELATION,
STMT_CLASSDEF,
STMT_STYLEDEF,
STMT_APPLYCLASS,
DEFAULT_STATE_TYPE,
DIVIDER_TYPE,
@ -171,9 +172,10 @@ const extract = (_doc) => {
log.info(doc);
clear(true);
log.info('Extract', doc);
log.info('Extract initial document:', doc);
doc.forEach((item) => {
log.warn('Statement', item.stmt);
switch (item.stmt) {
case STMT_STATE:
addState(
@ -193,8 +195,20 @@ const extract = (_doc) => {
case STMT_CLASSDEF:
addStyleClass(item.id.trim(), item.classes);
break;
case STMT_STYLEDEF:
{
const ids = item.id.trim().split(',');
const styles = item.styleClass.split(',');
ids.forEach((id) => {
const state = getState(id);
if (state !== undefined) {
state.styles = styles;
}
});
}
break;
case STMT_APPLYCLASS:
setCssClass(item.id.trim(), item.styleClass);
setStyle(item.id.trim(), item.styleClass);
break;
}
});
@ -203,7 +217,7 @@ const extract = (_doc) => {
const config = getConfig();
const look = config.look;
resetDataFetching();
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look, classes);
nodes.forEach((node) => {
if (Array.isArray(node.label)) {
// add the rest as description
@ -538,7 +552,7 @@ export const setCssClass = function (itemIds, cssClassName) {
export const setStyle = function (itemId, styleText) {
const item = getState(itemId);
if (item !== undefined) {
item.textStyles.push(styleText);
item.styles.push(styleText);
}
};

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

@ -2,13 +2,18 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
import intersect from '../intersect/index.js';
import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
import { createRoundedRectPathD } from './roundedRectPath.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import {
userNodeOverrides,
styles2String,
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import rough from 'roughjs';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
import { log } from '$root/logger.js';
export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
const { look } = getConfig();
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width + options.labelPaddingX * 2, node?.width || 0);
@ -16,6 +21,8 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
const x = -totalWidth / 2;
const y = -totalHeight / 2;
log.info('IPI node = ', node);
let rect;
node.look = look;
let { rx, ry } = node;
@ -44,7 +51,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
rect
.attr('class', 'basic label-container')
.attr('style', cssStyles)
.attr('style', nodeStyles)
.attr('rx', rx)
.attr('data-id', 'abc')
.attr('data-et', 'node')

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

@ -1,5 +1,6 @@
import { getConfig } from '$root/diagram-api/diagramAPI.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import styles from '../../../../dist/diagrams/packet/styles';
// Striped fill like start or fork nodes in state diagrams
export const solidStateFill = (color: string) => {
@ -15,28 +16,61 @@ export const solidStateFill = (color: string) => {
};
};
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
// 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
// concat the arrays and remove duplicates such that the values from node.cssStyles are used if there are duplicates
return [...(node.cssCompiledStyles || []), ...(node.cssStyles || [])];
};
export const styles2Map = (styles: string[]) => {
const styleMap = new Map();
styles.forEach((style) => {
const [key, value] = style.split(':');
styleMap.set(key.trim(), value.trim());
});
return styleMap;
};
export const styles2String = (node: Node) => {
const styles = compileStyles(node);
const labelStyles: string[] = [];
const nodeStyles: string[] = [];
styles.forEach((style) => {
const [key, value] = style.split(':');
if (key === 'color') {
labelStyles.push(style);
} else {
nodeStyles.push(style);
}
});
return { labelStyles: labelStyles.join(';'), nodeStyles: nodeStyles.join(';') };
};
// Striped fill like start or fork nodes in state diagrams
// TODO remove any
export const userNodeOverrides = (node: Node, options: any) => {
const { themeVariables, handdrawnSeed } = getConfig();
const { nodeBorder, mainBkg } = themeVariables;
const styles = compileStyles(node);
// index the style array to a map object
const styleMap = styles2Map(styles);
const result = Object.assign(
{
roughness: 0.7,
fill: mainBkg,
fill: styleMap.get('fill') || mainBkg,
fillStyle: 'hachure', // solid fill
fillWeight: 3.5,
stroke: nodeBorder,
stroke: styleMap.get('stroke') || nodeBorder,
seed: handdrawnSeed,
strokeWidth: 1.3,
},
options
);
if (node.backgroundColor) {
result.fill = node.backgroundColor;
}
if (node.borderColor) {
result.stroke = node.borderColor;
}
return result;
};

1
packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js
View File

@ -35,6 +35,7 @@ export const labelHelper = async (parent, node, _classes) => {
useHtmlLabels,
width: node.width || getConfig().flowchart.wrappingWidth,
cssClasses: 'markdown-node-label',
style: node.labelStyle,
});
// Get the size of the label
let bbox = text.getBBox();