Removed useRough in favor of node.look

2025-09-19 15:30:03 +02:00 · 2024-06-10 13:55:08 +02:00
parent 4fe7e062b5
commit 8b7001b8e3
24 changed files with 58 additions and 93 deletions
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -775,12 +775,12 @@ const addNodeFromVertex = (
  parentDB: Map<string, string>,
  subGraphDB: Map<string, boolean>,
  config: any,
-  useRough: boolean
+  look: string
 ): Node => {
-  let parentId = parentDB.get(vertex.id);
-  let isGroup = subGraphDB.get(vertex.id) || false;
+  const parentId = parentDB.get(vertex.id);
+  const isGroup = subGraphDB.get(vertex.id) || false;

-  let node = findNode(nodes, vertex.id);
+  const node = findNode(nodes, vertex.id);
  if (!node) {
    nodes.push({
      id: vertex.id,
@@ -795,7 +795,7 @@ const addNodeFromVertex = (
      domId: vertex.domId,
      type: isGroup ? 'group' : undefined,
      isGroup,
-      useRough,
+      look,
    });
  }
 };
@@ -807,7 +807,6 @@ export const getData = () => {

  // extract(getRootDocV2());
  // const diagramStates = getStates();
-  const useRough = config.look === 'handdrawn';
  const subGraphs = getSubGraphs();
  log.info('Subgraphs - APA12', subGraphs);
  const parentDB = new Map<string, string>();
@@ -834,14 +833,14 @@ export const getData = () => {
      domId: subGraph.domId,
      type: 'group',
      isGroup: true,
-      useRough,
+      look: config.look,
    });
  }
  console.log('APA12 nodes - 1', nodes.length);

  const n = getVertices();
  n.forEach((vertex) => {
-    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, useRough);
+    const node = addNodeFromVertex(vertex, nodes, parentDB, subGraphDB, config, config.look);
    if (node) {
      nodes.push(node);
    }
@@ -874,14 +873,12 @@ export const getData = () => {
      //   domId: verawEdgertex.domId,
      //   rawEdge: undefined,
      //   isGroup: false,
-      useRough,
+      look: config.look,
    };
    // console.log('rawEdge SPLIT', rawEdge, index);
    edges.push(edge);
  });

-  //const useRough = config.look === 'handdrawn';
-
  return { nodes, edges, other: {}, config };
 };

--- a/packages/mermaid/src/diagrams/state/dataFetcher.js
+++ b/packages/mermaid/src/diagrams/state/dataFetcher.js
@@ -54,39 +54,23 @@ export function stateDomId(itemId = '', counter = 0, type = '', typeSpacer = DOM
  return `${DOMID_STATE}-${itemId}${typeStr}-${counter}`;
 }

-const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, useRough, look) => {
+const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, look) => {
  // graphItemCount = 0;
  log.trace('items', doc);
  doc.forEach((item) => {
    switch (item.stmt) {
      case STMT_STATE:
-        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
+        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
+
        break;
      case DEFAULT_STATE_TYPE:
-        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, useRough, look);
+        dataFetcher(parentParsedItem, item, diagramStates, nodes, edges, altFlag, look);
+
        break;
      case STMT_RELATION:
        {
-          dataFetcher(
-            parentParsedItem,
-            item.state1,
-            diagramStates,
-            nodes,
-            edges,
-            altFlag,
-            useRough,
-            look
-          );
-          dataFetcher(
-            parentParsedItem,
-            item.state2,
-            diagramStates,
-            nodes,
-            edges,
-            altFlag,
-            useRough,
-            look
-          );
+          dataFetcher(parentParsedItem, item.state1, diagramStates, nodes, edges, altFlag, look);
+          dataFetcher(parentParsedItem, item.state2, diagramStates, nodes, edges, altFlag, look);
          const edgeData = {
            id: 'edge' + graphItemCount,
            start: item.state1.id,
@@ -101,7 +85,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
            labelType: G_EDGE_LABELTYPE,
            thickness: G_EDGE_THICKNESS,
            classes: CSS_EDGE,
-            useRough,
            look,
          };
          edges.push(edgeData);
@@ -225,16 +208,7 @@ function getClassesFromDbInfo(dbInfoItem) {
    }
  }
 }
-export const dataFetcher = (
-  parent,
-  parsedItem,
-  diagramStates,
-  nodes,
-  edges,
-  altFlag,
-  useRough,
-  look
-) => {
+export const dataFetcher = (parent, parsedItem, diagramStates, nodes, edges, altFlag, look) => {
  const itemId = parsedItem.id;
  const classStr = getClassesFromDbInfo(diagramStates.get(itemId));

@@ -324,7 +298,6 @@ export const dataFetcher = (
      padding: 8,
      rx: 10,
      ry: 10,
-      useRough,
      look,
    };

@@ -354,7 +327,6 @@ export const dataFetcher = (
        type: newNode.type,
        isGroup: newNode.type === 'group',
        padding: 0, //getConfig().flowchart.padding
-        useRough,
        look,
        position: parsedItem.note.position,
      };
@@ -369,7 +341,6 @@ export const dataFetcher = (
        type: 'group',
        isGroup: true,
        padding: 16, //getConfig().flowchart.padding
-        useRough,
        look,
        position: parsedItem.note.position,
      };
@@ -410,7 +381,6 @@ export const dataFetcher = (
        labelpos: G_EDGE_LABELPOS,
        labelType: G_EDGE_LABELTYPE,
        thickness: G_EDGE_THICKNESS,
-        useRough,
        look,
      });
    } else {
@@ -419,7 +389,7 @@ export const dataFetcher = (
  }
  if (parsedItem.doc) {
    log.trace('Adding nodes children ');
-    setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, useRough, look);
+    setupDoc(parsedItem, parsedItem.doc, diagramStates, nodes, edges, !altFlag, look);
  }
 };

--- a/packages/mermaid/src/diagrams/state/stateDb.js
+++ b/packages/mermaid/src/diagrams/state/stateDb.js
@@ -581,10 +581,10 @@ export const getData = () => {
  // }
  const diagramStates = getStates();
  const config = getConfig();
-  const useRough = config.look === 'handdrawn';
  const look = config.look;
  resetDataFetching();
-  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, useRough, look);
+  dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look);
+
  return { nodes, edges, other: {}, config };
 };

--- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js
@@ -20,7 +20,6 @@ const rect = (parent, node) => {
  const siteConfig = getConfig();
  const { themeVariables, handdrawnSeed } = siteConfig;
  const { clusterBkg, clusterBorder } = themeVariables;
-  let { useRough } = node;

  // Add outer g element
  const shapeSvg = parent.insert('g').attr('class', 'cluster').attr('id', node.id);
@@ -65,7 +64,7 @@ const rect = (parent, node) => {

  log.trace('Data ', node, JSON.stringify(node));
  let rect;
-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {
@@ -223,7 +222,7 @@ const roundedWithTitle = (parent, node) => {
  const look = siteConfig.look;
  // add the rect
  let rect;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
    const isAlt = node.cssClasses.includes('statediagram-cluster-alt');
    const rc = rough.svg(shapeSvg);
    const roughOuterNode =
@@ -308,7 +307,7 @@ const divider = (parent, node) => {
  const y = node.y - node.height / 2;
  const width = node.width + padding;
  const height = node.height + padding;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
    const rc = rough.svg(shapeSvg);
    const roughNode = rc.rectangle(x, y, width, height, {
      fill: 'lightgrey',
--- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js
@@ -594,11 +594,10 @@ export const insertEdge = function (elem, edge, clusterDb, diagramType, startNod
    default:
      strokeClasses += ' edge-pattern-solid';
  }
-  let useRough = edge.useRough;
  let svgPath;
  let path = '';
  let linePath = lineFunction(lineData);
-  if (useRough) {
+  if (edge.look === 'handdrawn') {
    const rc = rough.svg(elem);
    const ld = Object.assign([], lineData);
    // const svgPathNode = rc.path(lineFunction(ld.splice(0, ld.length-1)), {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
@@ -22,7 +22,7 @@ export const choice = (parent: SVG, node: Node) => {
  ];

  let choice;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
    const pointArr = points.map(function (d) {
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
@@ -15,9 +15,9 @@ export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAEleme

  const radius = bbox.width / 2 + halfPadding;
  let circleElem;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts
@@ -68,9 +68,9 @@ export const cylinder = async (parent: SVGAElement, node: Node) => {
  const h = bbox.height + ry + node.padding;

  let cylinder: d3.Selection<SVGPathElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
@@ -18,9 +18,9 @@ export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVG
  const innerRadius = bbox.width / 2 + halfPadding;

  let circleGroup;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts
@@ -25,14 +25,14 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
  let rect;
  node.look = look;
  let { rx, ry } = node;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

  //use options rx, ry overrides if present
  if (options && options.rx && options.ry) {
    rx = options.rx;
    ry = options.ry;
  }
-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
@@ -25,7 +25,7 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
  const y = (-1 * height) / 2;

  let shape;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
    const roughNode = rc.rectangle(x, y, width, height, solidStateFill(lineColor));
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts
@@ -56,9 +56,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise<SVGAElem
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts
@@ -43,9 +43,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise<SV
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts
@@ -42,9 +42,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise<SVGAEl
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts
@@ -42,9 +42,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise<SVGAE
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
@@ -21,14 +21,14 @@ export const note = async (parent: SVGAElement, node: Node) => {
  );

  log.info('Classes = ', node.cssClasses);
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
  let rect;
  const totalWidth = bbox.width + node.padding;
  const totalHeight = bbox.height + node.padding;
  const x = -bbox.width / 2 - halfPadding;
  const y = -bbox.height / 2 - halfPadding;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // add the rect
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts
@@ -38,9 +38,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise<SVGAEle
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts
@@ -42,9 +42,9 @@ export const rect_left_inv_arrow = async (
  ];

  let polygon;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts
@@ -58,8 +58,8 @@ export const stadium = async (parent: SVGAElement, node: Node) => {
  const w = bbox.width + h / 4 + node.padding;

  let rect;
-  const { cssStyles, useRough } = node;
-  if (useRough) {
+  const { cssStyles } = node;
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
@@ -17,7 +17,7 @@ export const stateEnd = (parent: SVG, node: Node) => {

  let circle;
  let innerCircle;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
    const roughNode = rc.circle(0, 0, 14, { ...solidStateFill(lineColor), roughness: 0.5 });
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
@@ -17,7 +17,7 @@ export const stateStart = (parent: SVG, node: Node) => {
    .attr('id', node.domId || node.id);

  let circle;
-  if (node.useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore TODO: Fix rough typings
    const rc = rough.svg(shapeSvg);
    const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
@@ -40,7 +40,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
  const x = -bbox.width / 2 - halfPadding;
  const y = -bbox.height / 2 - halfPadding;
  let rect;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
  const points = [
    { x: 0, y: 0 },
    { x: w, y: 0 },
@@ -54,7 +54,7 @@ export const subroutine = async (parent: SVGAElement, node: Node) => {
    { x: -8, y: 0 },
  ];

-  if (useRough) {
+  if (node.look === 'handdrawn') {
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts
@@ -42,10 +42,10 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise<SVGAEl
  ];

  let polygon: d3.Selection<SVGPolygonElement | SVGGElement, unknown, null, undefined>;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;

-  if (useRough) {
-    console.log('Trapezoid: Inside use useRough');
+  if (node.look === 'handdrawn') {
+    console.log('Trapezoid: Inside use handdrawn');
    // @ts-ignore
    const rc = rough.svg(shapeSvg);
    const options = userNodeOverrides(node, {});
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -46,7 +46,6 @@ interface Node {
  rx?: number; // Used for rounded corners in Rect, Ellipse, etc.Maybe it to specialized RectNode, EllipseNode, etc.
  ry?: number;

-  useRough?: boolean;
  useHtmlLabels?: boolean;
  centerLabel?: boolean; //keep for now.
  //Candidate for removal, maybe rely on labelStyle or a specific property labelPosition: Top, Center, Bottom
@@ -94,7 +93,8 @@ interface Edge {
  minlen?: number;
  pattern?: string;
  thickness?: 'normal' | 'thick' | 'invisible';
-  useRough?: boolean;
+
+  look?: string;
 }

 interface RectOptions {