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 Style support in rects

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-05-10 15:51:48 +02:00
parent ab077992f5
commit f5fefc0499
2 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
import type { Node } from '$root/rendering-util/types.d.ts';
// Striped fill like start or fork nodes in state diagrams // Striped fill like start or fork nodes in state diagrams
export const solidStateFill = (color: string) => { export const solidStateFill = (color: string) => {
@ -12,3 +13,12 @@ export const solidStateFill = (color: string) => {
seed: handdrawnSeed, seed: handdrawnSeed,
}; };
}; };
// Striped fill like start or fork nodes in state diagrams
// TODO remove any
export const userNodeOverrides = (node: Node, options: any) => {
const result = Object.assign({}, options);
result.fill = node.backgroundColor || options.fill;
result.stroke = node.borderColor || options.stroke;
return result;
};

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
View File

@ -4,6 +4,7 @@ import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import { createRoundedRectPathD } from './roundedRectPath.js'; import { createRoundedRectPathD } from './roundedRectPath.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { getConfig } from '$root/diagram-api/diagramAPI.js';
import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import rough from 'roughjs'; import rough from 'roughjs';
/** /**
@ -77,13 +78,13 @@ export const rect = async (parent: SVGAElement, node: Node) => {
const { rx, ry, style, useRough } = node; const { rx, ry, style, useRough } = node;
if (useRough) { if (useRough) {
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
const options = { const options = userNodeOverrides(node, {
roughness: 0.7, roughness: 0.7,
fill: mainBkg, fill: mainBkg,
fillStyle: 'solid', // solid fill' fillStyle: 'solid', // solid fill'
stroke: nodeBorder, stroke: nodeBorder,
seed: handdrawnSeed, seed: handdrawnSeed,
}; });
const roughNode = const roughNode =
rx || ry rx || ry
? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options) ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), options)