marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-29 12:19:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

#5237 Theme support for stateStart, stateEnd, choice and fork/join

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-05-15 15:28:39 +02:00
parent 42a12a62ac
commit 55afd8cdb8
5 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,8 +3,11 @@ import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import rough from 'roughjs';
import { solidStateFill } from './handdrawnStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const choice = (parent: SVG, node: Node) => {
const { themeVariables } = getConfig();
const { lineColor } = themeVariables;
const shapeSvg = parent
.insert('g')
.attr('class', 'node default')
@@ -24,7 +27,7 @@ export const choice = (parent: SVG, node: Node) => {
const pointArr = points.map(function (d) {
return [d.x, d.y];
});
const roughNode = rc.polygon(pointArr, solidStateFill('black'));
const roughNode = rc.polygon(pointArr, solidStateFill(lineColor));
choice = shapeSvg.insert(() => roughNode);
} else {
choice = shapeSvg.insert('polygon', ':first-child').attr(

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

@@ -5,8 +5,11 @@ import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import rough from 'roughjs';
import { solidStateFill } from './handdrawnStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const forkJoin = (parent: SVG, node: Node, dir: string) => {
const { themeVariables } = getConfig();
const { lineColor } = themeVariables;
const shapeSvg = parent
.insert('g')
.attr('class', 'node default')
@@ -25,7 +28,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
let shape;
if (node.useRough) {
const rc = rough.svg(shapeSvg);
const roughNode = rc.rectangle(x, y, width, height, solidStateFill('black'));
const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));
shape = shapeSvg.insert(() => roughNode);
} else {
shape = shapeSvg

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

@@ -10,6 +10,7 @@ export const solidStateFill = (color: string) => {
hachureGap: 4,
fillWeight: 2,
roughness: 0.7,
stroke: color,
seed: handdrawnSeed,
};
};

16
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@@ -5,28 +5,22 @@ import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import rough from 'roughjs';
import { solidStateFill } from './handdrawnStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const stateEnd = (parent: SVG, node: Node) => {
const { themeVariables } = getConfig();
const { lineColor } = themeVariables;
const shapeSvg = parent
.insert('g')
.attr('class', 'node default')
.attr('id', node.domId || node.id);
// const roughNode = rc.circle(0, 0, 14, {
// fill: 'white',
// fillStyle: 'solid',
// roughness: 1,
// stroke: 'black',
// strokeWidth: 1,
// });
// circle = shapeSvg.insert(() => roughNode);
let circle;
let innerCircle;
if (node.useRough) {
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, { ...solidStateFill('black'), roughness: 0.5 });
const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill('black'), fillStyle: 'solid' });
const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });
const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill(lineColor), fillStyle: 'solid' });
circle = shapeSvg.insert(() => roughNode);
innerCircle = shapeSvg.insert(() => roughInnerNode);
} else {

6
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
View File

@@ -5,8 +5,12 @@ import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js';
import rough from 'roughjs';
import { solidStateFill } from './handdrawnStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
export const stateStart = (parent: SVG, node: Node) => {
const { themeVariables } = getConfig();
const { lineColor } = themeVariables;
const shapeSvg = parent
.insert('g')
.attr('class', 'node default')
@@ -15,7 +19,7 @@ export const stateStart = (parent: SVG, node: Node) => {
let circle;
if (node.useRough) {
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, solidStateFill('black'));
const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
circle = shapeSvg.insert(() => roughNode);
} else {
circle = shapeSvg.insert('circle', ':first-child');