Merge branch 'knsv/new-shapes' of https://github.com/mermaid-js/mermaid into knsv/new-shapes

cypress/integration/rendering/newShapes.spec.ts

@@ -60,7 +60,7 @@ looks.forEach((look) => {
         it(`without label`, () => {
           let flowchartCode = `flowchart ${direction}\n`;
           newShapesSet.forEach((newShape, index) => {
-            flowchartCode += `  n${index} --> n${index}${index}{ shape: ${newShape} }\n`;
+            flowchartCode += `  n${index} --> n${index}${index}@{ shape: ${newShape} }\n`;
           });
           imgSnapshotTest(flowchartCode, { look });
         });

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

@@ -5,7 +5,11 @@ import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 
-export const forkJoin = (parent: SVG, node: Node, { dir }: RenderOptions) => {
+export const forkJoin = (
+  parent: SVG,
+  node: Node,
+  { dir, config: { state, themeVariables } }: RenderOptions
+) => {
   const { nodeStyles } = styles2String(node);
   node.label = '';
   const shapeSvg = parent
@@ -27,7 +31,10 @@ export const forkJoin = (parent: SVG, node: Node, { dir }: RenderOptions) => {
 
   // @ts-ignore TODO: Fix rough typings
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, {});
+  const options = userNodeOverrides(node, {
+    stroke: themeVariables.lineColor,
+    fill: themeVariables.lineColor,
+  });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;
@@ -47,7 +54,11 @@ export const forkJoin = (parent: SVG, node: Node, { dir }: RenderOptions) => {
   }
 
   updateNodeBounds(node, shape);
-
+  const padding = state?.padding ?? 0;
+  if (node.width && node.height) {
+    node.width += padding / 2 || 0;
+    node.height += padding / 2 || 0;
+  }
   node.intersect = function (point) {
     return intersect.rect(node, point);
   };

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

@@ -1,11 +1,15 @@
-import { log } from '../../../logger.js';
 import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '../../types.js';
 import rough from 'roughjs';
 import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import type { RenderOptions } from '../../types.js';
 
-export const note = async (parent: SVGAElement, node: Node) => {
+export const note = async (
+  parent: SVGAElement,
+  node: Node,
+  { config: { themeVariables } }: RenderOptions
+) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
@@ -19,11 +23,13 @@ export const note = async (parent: SVGAElement, node: Node) => {
     node.centerLabel = true;
   }
 
-  log.info('Classes = ', node.cssClasses);
   // add the rect
   // @ts-ignore TODO: Fix rough typings
   const rc = rough.svg(shapeSvg);
-  const options = userNodeOverrides(node, {});
+  const options = userNodeOverrides(node, {
+    fill: themeVariables.noteBkgColor,
+    stroke: themeVariables.noteBorderColor,
+  });
 
   if (node.look !== 'handDrawn') {
     options.roughness = 0;

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

@@ -3,7 +3,7 @@ import intersect from '../intersect/index.js';
 import type { Node, RenderOptions } from '../../types.js';
 import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
-import { solidStateFill, styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 
 export const stateEnd = (
   parent: SVG,
@@ -13,7 +13,7 @@ export const stateEnd = (
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { cssStyles } = node;
-  const { lineColor } = themeVariables;
+  const { lineColor, stateBorder, nodeBorder } = themeVariables;
   const shapeSvg = parent
     .insert('g')
     .attr('class', 'node default')
@@ -29,14 +29,17 @@ export const stateEnd = (
   }
 
   const roughNode = rc.circle(0, 0, 14, {
-    ...solidStateFill(lineColor),
-    roughness: 0.5,
     ...options,
+    stroke: lineColor,
+    strokeWidth: 2,
   });
+  const innerFill = stateBorder ?? nodeBorder;
   const roughInnerNode = rc.circle(0, 0, 5, {
-    ...solidStateFill(lineColor),
-    fillStyle: 'solid',
     ...options,
+    fill: innerFill,
+    stroke: innerFill,
+    strokeWidth: 2,
+    fillStyle: 'solid',
   });
   const circle = shapeSvg.insert(() => roughNode, ':first-child');
   circle.insert(() => roughInnerNode);