#5237 Fix for the styling on different shapes

packages/mermaid/src/diagrams/state/stateDb.js

@@ -200,10 +200,13 @@ const extract = (_doc) => {
           const ids = item.id.trim().split(',');
           const styles = item.styleClass.split(',');
           ids.forEach((id) => {
-            const state = getState(id);
-            if (state !== undefined) {
-              state.styles = styles.map((s) => s.replace(/;/g, '')?.trim());
+            let foundState = getState(id);
+            if (foundState === undefined) {
+              const trimmedId = id.trim();
+              addState(trimmedId);
+              foundState = getState(trimmedId);
             }
+            foundState.styles = styles.map((s) => s.replace(/;/g, '')?.trim());
           });
         }
         break;

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

@@ -2,10 +2,12 @@ import intersect from '../intersect/index.js';
 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 { solidStateFill, styles2String } from './handdrawnStyles.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 
 export const choice = (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { themeVariables } = getConfig();
   const { lineColor } = themeVariables;
   const shapeSvg = parent
@@ -43,7 +45,13 @@ export const choice = (parent: SVG, node: Node) => {
 
   // center the circle around its coordinate
   // @ts-ignore TODO: Fix rough typings
-  choice.attr('class', 'state-start').attr('r', 7).attr('width', 28).attr('height', 28);
+  choice
+    .attr('class', 'state-start')
+    .attr('r', 7)
+    .attr('width', 28)
+    .attr('height', 28)
+    .attr('style', nodeStyles);
+
   node.width = 28;
   node.height = 28;
 

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

@@ -2,10 +2,15 @@ import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
 
   const radius = bbox.width / 2 + halfPadding;
@@ -24,7 +29,7 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
     circleElem = shapeSvg
       .insert('circle', ':first-child')
       .attr('class', 'basic label-container')
-      .attr('style', cssStyles)
+      .attr('style', nodeStyles)
       .attr('r', radius)
       .attr('cx', 0)
       .attr('cy', 0);

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
 export const createCylinderPathD = (
@@ -49,8 +52,9 @@ export const createInnerCylinderPathD = (
   return [`M${x - width / 2},${-height / 2}`, `a${rx},${ry} 0,0,0 ${width},0`].join(' ');
 };
 export const cylinder = async (parent: SVGAElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
-
   const w = bbox.width + node.padding;
   const rx = w / 2;
   const ry = rx / (2.5 + w / 50);
@@ -79,7 +83,8 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
       .insert('path', ':first-child')
       .attr('d', pathData)
       .attr('class', 'basic label-container')
-      .attr('style', cssStyles);
+      .attr('style', cssStyles)
+      .attr('style', nodeStyles);
   }
 
   cylinder.attr('label-offset-y', ry);

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

@@ -2,11 +2,15 @@ import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
-//import d3 from 'd3';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
   const gap = 5;
   const outerRadius = bbox.width / 2 + halfPadding + gap;
@@ -32,21 +36,21 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
     circleGroup.node()?.appendChild(innerRoughNode);
   } else {
     circleGroup = shapeSvg.insert('g', ':first-child');
-    const outerCircle = circleGroup.insert('circle', ':first-child');
-    const innerCircle = circleGroup.insert('circle', ':first-child');
 
-    circleGroup.attr('class', 'basic label-container').attr('style', cssStyles);
+    const outerCircle = circleGroup.insert('circle', ':first-child');
+    const innerCircle = circleGroup.insert('circle');
+    circleGroup.attr('class', 'basic label-container').attr('style', nodeStyles);
 
     outerCircle
       .attr('class', 'outer-circle')
-      .attr('style', cssStyles)
+      .attr('style', nodeStyles)
       .attr('r', outerRadius)
       .attr('cx', 0)
       .attr('cy', 0);
 
     innerCircle
       .attr('class', 'inner-circle')
-      .attr('style', cssStyles)
+      .attr('style', nodeStyles)
       .attr('r', innerRadius)
       .attr('cx', 0)
       .attr('cy', 0);

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';
@@ -25,6 +28,8 @@ export const createHexagonPathD = (
 };
 
 export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const f = 4;
@@ -61,8 +66,8 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
     polygon = insertPolygonShape(shapeSvg, w, h, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
 
   node.width = w;

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -21,6 +24,8 @@ export const createInvertedTrapezoidPathD = (
 };
 
 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const w = bbox.width + node.padding;
@@ -53,8 +58,8 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
     polygon = insertPolygonShape(shapeSvg, w, h, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
 
   node.width = w;

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -21,6 +24,8 @@ export const createLeanLeftPathD = (
 };
 
 export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const w = bbox.width + node.padding;
@@ -53,8 +58,8 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
     polygon = insertPolygonShape(shapeSvg, w, h, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
 
   node.width = w;

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -21,6 +24,8 @@ export const createLeanRightPathD = (
 };
 
 export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const w = bbox.width + node.padding;
@@ -53,8 +58,8 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
     polygon = insertPolygonShape(shapeSvg, w, h, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
 
   node.width = w;

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

@@ -2,7 +2,10 @@ import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -17,6 +20,8 @@ export const createDecisionBoxPathD = (x: number, y: number, size: number): stri
 };
 
 export const question = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const w = bbox.width + node.padding;
@@ -51,8 +56,8 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
     polygon = insertPolygonShape(shapeSvg, s, s, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
 
   updateNodeBounds(node, polygon);

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -20,6 +23,8 @@ export const rect_left_inv_arrow = async (
   parent: SVGAElement,
   node: Node
 ): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const w = bbox.width + node.padding;
@@ -52,8 +57,8 @@ export const rect_left_inv_arrow = async (
     polygon = insertPolygonShape(shapeSvg, w, h, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
   node.width = w + h;
   node.height = h;

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

@@ -4,13 +4,18 @@ import { evaluate } from '$root/diagrams/common/common.js';
 import { updateNodeBounds } from './util.js';
 import createLabel from '../createLabel.js';
 import intersect from '../intersect/index.js';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 import { log } from '$root/logger.js';
 
 export const rectWithTitle = async (parent: SVGElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   let classes;
   if (!node.cssClasses) {
     classes = 'node default';
@@ -28,7 +33,7 @@ export const rectWithTitle = async (parent: SVGElement, node: Node) => {
   // Create the title label and insert it after the rect
   const g = shapeSvg.insert('g');
 
-  const label = shapeSvg.insert('g').attr('class', 'label');
+  const label = shapeSvg.insert('g').attr('class', 'label').attr('style', nodeStyles);
 
   const description = node.description;
 

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { createRoundedRectPathD } from './roundedRectPath.js';
 
@@ -51,6 +54,8 @@ export const createStadiumPathD = (
 };
 
 export const stadium = async (parent: SVGAElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const h = bbox.height + node.padding;
@@ -73,7 +78,7 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
 
     rect
       .attr('class', 'basic label-container')
-      .attr('style', cssStyles)
+      .attr('style', nodeStyles)
       .attr('rx', h / 2)
       .attr('ry', h / 2)
       .attr('x', -w / 2)

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -32,6 +35,8 @@ export const createSubroutinePathD = (
 };
 
 export const subroutine = async (parent: SVGAElement, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
   const halfPadding = (node?.padding || 0) / 2;
   const w = bbox.width + node.padding;
@@ -69,8 +74,8 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
     rect.attr('class', 'basic label-container').attr('style', cssStyles);
   } else {
     const el = insertPolygonShape(shapeSvg, w, h, points);
-    if (cssStyles) {
-      el.attr('style', cssStyles);
+    if (nodeStyles) {
+      el.attr('style', nodeStyles);
     }
     updateNodeBounds(node, el);
   }

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

@@ -1,7 +1,10 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
+import {
+  styles2String,
+  userNodeOverrides,
+} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 
@@ -21,6 +24,8 @@ export const createTrapezoidPathD = (
 };
 
 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
   const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
 
   const w = bbox.width + node.padding;
@@ -53,8 +58,8 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
     polygon = insertPolygonShape(shapeSvg, w, h, points);
   }
 
-  if (cssStyles) {
-    polygon.attr('style', cssStyles);
+  if (nodeStyles) {
+    polygon.attr('style', nodeStyles);
   }
 
   node.width = w;