#5237 Finishing the roughup of the nodes

cypress/platform/flowchart-sate.html

@@ -91,10 +91,8 @@
   <table>
     <tr>
       <th></th> <!-- Placeholder for the top left corner -->
-      <th>Dagre</th>
-      <th>Dagre with rough</th>
-      <th>ELK</th>
-      <th>ELK with rough</th>
+      <th>State rough</th>
+      <th>Flowchart rough</th>
     </tr>
     <tr>
       <th class="vertical-header">
@@ -111,7 +109,7 @@
       <td>
         <pre id="diagram1" class="mermaid">
 %%{init: {"look": "handdrawn"} }%%
-stateDiagram-v2 
+stateDiagram-v2
     stateA
 
       </pre>
@@ -120,14 +118,14 @@ stateDiagram-v2
         <pre id="diagram2" class="mermaid">
 %%{init: {"look": "handdrawn"} }%%
 flowchart LR
-    id1([This is the text in the box])
+    id1[[This is the text in the box]]
 
 
       </pre>
       </td>
- 
+
     </tr>
-   
+
 
   </table>
 

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

@@ -1,19 +1,15 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { 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 { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
-    'node ' + node.cssClasses,
+    getNodeClasses(node),
     true
   );
 
@@ -22,17 +18,9 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Circle: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.9,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const roughNode = rc.circle(0, 0, radius * 2, options);
 
     circleElem = shapeSvg.insert(() => roughNode, ':first-child');

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -33,17 +32,35 @@ export const createCylinderPathD = (
     `l0,${-height}`,
   ].join(' ');
 };
-
+export const createOuterCylinderPathD = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rx: number,
+  ry: number
+): string => {
+  return [
+    `M${x},${y + ry}`,
+    `M${x + width},${y + ry}`,
+    `a${rx},${ry} 0,0,0 ${-width},0`,
+    `l0,${height}`,
+    `a${rx},${ry} 0,0,0 ${width},0`,
+    `l0,${-height}`,
+  ].join(' ');
+};
+export const createInnerCylinderPathD = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rx: number,
+  ry: number
+): string => {
+  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 { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses, // + ' ' + node.class,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const rx = w / 2;
@@ -54,21 +71,15 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Cylinder: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
-    const pathData = createCylinderPathD(0, 0, w, h, rx, ry);
-    const roughNode = rc.path(pathData, options);
+    const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
+    const innerPathData = createInnerCylinderPathD(0, ry, w, h, rx, ry);
+    const outerNode = rc.path(outerPathData, userNodeOverrides(node, {}));
+    const innerLine = rc.path(innerPathData, userNodeOverrides(node, { fill: 'none' }));
 
-    cylinder = shapeSvg.insert(() => roughNode, ':first-child');
+    cylinder = shapeSvg.insert(() => innerLine, ':first-child');
+    cylinder = shapeSvg.insert(() => outerNode, ':first-child');
     cylinder.attr('class', 'basic label-container');
     if (cssStyles) {
       cylinder.attr('style', cssStyles);

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

@@ -1,5 +1,5 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
@@ -8,8 +8,8 @@ import rough from 'roughjs';
 //import d3 from 'd3';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
+  const { themeVariables } = getConfig();
+  const { mainBkg } = themeVariables;
 
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
@@ -25,17 +25,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('DoubleCircle: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const outerOptions = userNodeOverrides(node, {
-      roughness: 0.9,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const outerOptions = userNodeOverrides(node, {});
 
     const innerOptions = { ...outerOptions, fill: mainBkg };
     const outerRoughNode = rc.circle(0, 0, outerRadius * 2, outerOptions);
@@ -43,8 +35,6 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
 
     circleGroup = shapeSvg.insert('g', ':first-child');
     circleGroup.attr('class', node.cssClasses).attr('style', cssStyles);
-    // d3.select(outerRoughNode).attr('class', 'outer-circle').attr('style', cssStyles);
-    // d3.select(innerRoughNode).attr('class', 'inner-circle').attr('style', cssStyles);
 
     circleGroup.node()?.appendChild(outerRoughNode);
     circleGroup.node()?.appendChild(innerRoughNode);

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

@@ -1,64 +1,16 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node, RectOptions } from '$root/rendering-util/types.d.ts';
 import { createRoundedRectPathD } from './roundedRectPath.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
 
-// function applyNodePropertyBorders(
-//   rect: d3.Selection<SVGRectElement, unknown, null, undefined>,
-//   borders: string | undefined,
-//   totalWidth: number,
-//   totalHeight: number
-// ) {
-//   if (!borders) {
-//     return;
-//   }
-//   const strokeDashArray: number[] = [];
-//   const addBorder = (length: number) => {
-//     strokeDashArray.push(length, 0);
-//   };
-//   const skipBorder = (length: number) => {
-//     strokeDashArray.push(0, length);
-//   };
-//   if (borders.includes('t')) {
-//     log.debug('add top border');
-//     addBorder(totalWidth);
-//   } else {
-//     skipBorder(totalWidth);
-//   }
-//   if (borders.includes('r')) {
-//     log.debug('add right border');
-//     addBorder(totalHeight);
-//   } else {
-//     skipBorder(totalHeight);
-//   }
-//   if (borders.includes('b')) {
-//     log.debug('add bottom border');
-//     addBorder(totalWidth);
-//   } else {
-//     skipBorder(totalWidth);
-//   }
-//   if (borders.includes('l')) {
-//     log.debug('add left border');
-//     addBorder(totalHeight);
-//   } else {
-//     skipBorder(totalHeight);
-//   }
-
-//   rect.attr('stroke-dasharray', strokeDashArray.join(' '));
-// }
-
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
-    'node ' + node.cssClasses, // + ' ' + node.class,
+    getNodeClasses(node),
     true
   );
 
@@ -79,15 +31,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
   if (useRough) {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      // fillStyle: 'solid', // solid fill'
-      fillStyle: 'hachure', // solid fill'
-      fillWeight: 3.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-    });
+    const options = userNodeOverrides(node, {});
 
     console.log('rect options: ', options);
     const roughNode =

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

@@ -18,8 +18,25 @@ export const solidStateFill = (color: string) => {
 // 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;
+  const { themeVariables, handdrawnSeed } = getConfig();
+  const { nodeBorder, mainBkg } = themeVariables;
+  const result = Object.assign(
+    {
+      roughness: 0.7,
+      fill: mainBkg,
+      fillStyle: 'hachure', // solid fill
+      fillWeight: 3.5,
+      stroke: nodeBorder,
+      seed: handdrawnSeed,
+      strokeWidth: 1,
+    },
+    options
+  );
+  if (node.backgroundColor) {
+    result.fill = node.backgroundColor;
+  }
+  if (node.borderColor) {
+    result.stroke = node.borderColor;
+  }
   return result;
 };

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -36,13 +35,10 @@ export const createHexagonPathD = (
 };
 
 export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
   const { shapeSvg, bbox, halfPadding } = await labelHelper(
     parent,
     node,
-    'node ' + node.cssClasses,
+    getNodeClasses(node),
     true
   );
 
@@ -63,17 +59,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Hexagon: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createHexagonPathD(0, 0, w, h, m);
     const roughNode = rc.path(pathData, options);
 

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

@@ -1,5 +1,5 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
 import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
@@ -31,15 +31,7 @@ export const createInvertedTrapezoidPathD = (
 };
 
 export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -54,17 +46,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Inverted Trapezoid: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createInvertedTrapezoidPathD(0, 0, w, h);
     const roughNode = rc.path(pathData, options);
 

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -31,15 +30,7 @@ export const createLeanLeftPathD = (
 };
 
 export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -54,17 +45,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Lean Left: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createLeanLeftPathD(0, 0, w, h);
     const roughNode = rc.path(pathData, options);
 

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -31,15 +30,7 @@ export const createLeanRightPathD = (
 };
 
 export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -54,17 +45,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Lean Right: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createLeanRightPathD(0, 0, w, h);
     const roughNode = rc.path(pathData, options);
 

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -25,15 +24,7 @@ export const createDecisionBoxPathD = (x: number, y: number, size: number): stri
 };
 
 export const question = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -50,17 +41,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('DecisionBox: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createDecisionBoxPathD(0, 0, s);
     const roughNode = rc.path(pathData, options);
 

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -30,15 +29,7 @@ export const rect_left_inv_arrow = async (
   parent: SVGAElement,
   node: Node
 ): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -54,17 +45,9 @@ export const rect_left_inv_arrow = async (
   const { cssStyles, useRough } = node;
 
   if (useRough) {
-    console.log('Polygon: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createPolygonPathD(0, 0, w, h);
     const roughNode = rc.path(pathData, options);
 

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -53,15 +52,7 @@ export const createStadiumPathD = (
 };
 
 export const stadium = async (parent: SVGAElement, node: Node) => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses, // + ' ' + node.class,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const h = bbox.height + node.padding;
   const w = bbox.width + h / 4 + node.padding;
@@ -69,20 +60,11 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
   let rect;
   const { cssStyles, useRough } = node;
   if (useRough) {
-    console.log('Stadium:Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure', // solid fill
-      fillWeight: 3.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      // strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
 
-    console.log('Stadium options: ', options);
-    const pathData = createRoundedRectPathD(-w / 2, -h / 2, w, h, h / 3);
+    const pathData = createRoundedRectPathD(-w / 2, -h / 2, w, h, h / 2);
     const roughNode = rc.path(pathData, options);
 
     rect = shapeSvg.insert(() => roughNode, ':first-child');

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -34,39 +33,14 @@ export const createSubroutinePathD = (
 };
 
 export const subroutine = async (parent: SVGAElement, node: Node) => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses, // + ' ' + node.class,
-    true
-  );
-
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
+  const halfPadding = (node?.padding || 0) / 2;
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
-
+  const x = -bbox.width / 2 - halfPadding;
+  const y = -bbox.height / 2 - halfPadding;
   let rect;
   const { cssStyles, useRough } = node;
-  if (useRough) {
-    const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      stroke: nodeBorder,
-      seed: handdrawnSeed,
-      strokeWidth: 1,
-    });
-    const pathData = createSubroutinePathD(-w / 2, -h / 2, w, h);
-    const roughNode = rc.path(pathData, options);
-
-    rect = shapeSvg.insert(() => roughNode, ':first-child');
-    rect.attr('class', 'basic label-container').attr('style', cssStyles);
-  }
-
   const points = [
     { x: 0, y: 0 },
     { x: w, y: 0 },
@@ -80,12 +54,28 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
     { x: -8, y: 0 },
   ];
 
-  const el = insertPolygonShape(shapeSvg, w, h, points);
-  if (cssStyles) {
-    el.attr('style', cssStyles);
-  }
+  if (useRough) {
+    // @ts-ignore
+    const rc = rough.svg(shapeSvg);
+    const options = userNodeOverrides(node, {});
+    const pathData = createSubroutinePathD(-w / 2, -h / 2, w, h);
 
-  updateNodeBounds(node, el);
+    const roughNode = rc.rectangle(x - 8, y, w + 16, h, options);
+    const l1 = rc.line(x, y, x, y + h, options);
+    const l2 = rc.line(x + w, y, x + w, y + h, options);
+
+    shapeSvg.insert(() => l1, ':first-child');
+    shapeSvg.insert(() => l2, ':first-child');
+    rect = shapeSvg.insert(() => roughNode, ':first-child');
+
+    rect.attr('class', 'basic label-container').attr('style', cssStyles);
+  } else {
+    const el = insertPolygonShape(shapeSvg, w, h, points);
+    if (cssStyles) {
+      el.attr('style', cssStyles);
+    }
+    updateNodeBounds(node, el);
+  }
 
   node.intersect = function (point) {
     return intersect.polygon(node, points, point);

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

@@ -1,7 +1,6 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds } from './util.js';
+import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
 import rough from 'roughjs';
@@ -31,15 +30,7 @@ export const createTrapezoidPathD = (
 };
 
 export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
-  const { themeVariables, handdrawnSeed } = getConfig();
-  const { nodeBorder, mainBkg } = themeVariables;
-
-  const { shapeSvg, bbox, halfPadding } = await labelHelper(
-    parent,
-    node,
-    'node ' + node.cssClasses,
-    true
-  );
+  const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node), true);
 
   const w = bbox.width + node.padding;
   const h = bbox.height + node.padding;
@@ -55,16 +46,9 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
 
   if (useRough) {
     console.log('Trapezoid: Inside use useRough');
+    // @ts-ignore
     const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {
-      roughness: 0.7,
-      fill: mainBkg,
-      fillStyle: 'hachure',
-      fillWeight: 1.5,
-      //stroke: nodeBorder,
-      seed: handdrawnSeed,
-      //strokeWidth: 1,
-    });
+    const options = userNodeOverrides(node, {});
     const pathData = createTrapezoidPathD(0, 0, w, h);
     const roughNode = rc.path(pathData, options);
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js

@@ -139,3 +139,6 @@ export function insertPolygonShape(parent, w, h, points) {
     .attr('class', 'label-container')
     .attr('transform', 'translate(' + -w / 2 + ',' + h / 2 + ')');
 }
+
+export const getNodeClasses = (node, extra) =>
+  (node.useRough ? 'rough-node' : 'node') + ' ' + node.cssClasses + ' ' + (extra || '');