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

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

@@ -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(

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

@@ -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

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

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

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

@@ -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 roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });
-    const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill('black'), fillStyle: 'solid' });
+    const roughInnerNode = rc.circle(0, 0, 5, { ...solidStateFill(lineColor), fillStyle: 'solid' });
     circle = shapeSvg.insert(() => roughNode);
     innerCircle = shapeSvg.insert(() => roughInnerNode);
   } else {

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

@@ -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');