5237 Replaced useRough by look

packages/mermaid/src/diagrams/flowchart/flowDb.ts

@@ -793,7 +793,7 @@ const addNodeFromVertex = (
   parentDB: Map<string, string>,
   subGraphDB: Map<string, boolean>,
   config: any,
-  useRough: boolean
+  look: string
 ) => {
   let parentId = parentDB.get(vertex.id);
   let isGroup = subGraphDB.get(vertex.id) || false;
@@ -812,7 +812,7 @@ const addNodeFromVertex = (
       dir: vertex.dir,
       domId: vertex.domId,
       isGroup,
-      useRough,
+      look,
     });
   }
 };
@@ -822,7 +822,6 @@ export const getData = () => {
   const nodes: Node[] = [];
   const edges: Edge[] = [];
 
-  const useRough = config.look === 'handdrawn';
   const subGraphs = getSubGraphs();
   log.info('Subgraphs - APA12', subGraphs);
   const parentDB = new Map<string, string>();
@@ -847,7 +846,7 @@ export const getData = () => {
       shape: 'rect',
       dir: subGraph.dir,
       isGroup: true,
-      useRough,
+      look: config.look,
     });
   }
 
@@ -873,7 +872,7 @@ export const getData = () => {
       arrowTypeEnd,
       arrowheadStyle: 'fill: #333',
       pattern: rawEdge.stroke,
-      useRough,
+      look: config.look,
     };
     console.log('rawEdge SPLIT', rawEdge, index);
     edges.push(edge);

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

@@ -54,16 +54,16 @@ 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:
         {
@@ -73,8 +73,7 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
             diagramStates,
             nodes,
             edges,
-            altFlag,
+            altFlag,,
-            useRough,
             look
           );
           dataFetcher(
@@ -84,7 +83,6 @@ const setupDoc = (parentParsedItem, doc, diagramStates, nodes, edges, altFlag, u
             nodes,
             edges,
             altFlag,
-            useRough,
             look
           );
           const edgeData = {
@@ -101,7 +99,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);
@@ -232,7 +229,6 @@ export const dataFetcher = (
   nodes,
   edges,
   altFlag,
-  useRough,
   look
 ) => {
   const itemId = parsedItem.id;
@@ -324,7 +320,6 @@ export const dataFetcher = (
       padding: 8,
       rx: 10,
       ry: 10,
-      useRough,
       look,
     };
 
@@ -354,7 +349,6 @@ export const dataFetcher = (
         type: newNode.type,
         isGroup: newNode.type === 'group',
         padding: 0, //getConfig().flowchart.padding
-        useRough,
         look,
         position: parsedItem.note.position,
       };
@@ -369,7 +363,6 @@ export const dataFetcher = (
         type: 'group',
         isGroup: true,
         padding: 16, //getConfig().flowchart.padding
-        useRough,
         look,
         position: parsedItem.note.position,
       };
@@ -410,7 +403,6 @@ export const dataFetcher = (
         labelpos: G_EDGE_LABELPOS,
         labelType: G_EDGE_LABELTYPE,
         thickness: G_EDGE_THICKNESS,
-        useRough,
         look,
       });
     } else {
@@ -419,7 +411,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);
   }
 };
 

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

@@ -228,10 +228,9 @@ const extract = (_doc) => {
 
   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);
 };
 
 /**

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

@@ -15,7 +15,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);
@@ -60,7 +59,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) => {
 
   // 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 =
@@ -305,7 +304,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',

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

@@ -592,11 +592,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)), {

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) {

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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -58,9 +58,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const outerPathData = createOuterCylinderPathD(0, 0, w, h, rx, ry);

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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const outerOptions = userNodeOverrides(node, { roughness: 0.2, strokeWidth: 2.5 });

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

@@ -21,7 +21,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
 
   let rect;
   let { rx, ry } = node;
-  const { cssStyles, useRough } = node;
+  const { cssStyles } = node;
 
   //use options rx, ry overrides if present
   if (options && options.rx && options.ry) {
@@ -29,7 +29,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt
     ry = options.ry;
   }
 
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore TODO: Fix rough typings
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

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

@@ -47,9 +47,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -35,9 +35,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -34,9 +34,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -34,9 +34,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

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

@@ -31,9 +31,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -34,9 +34,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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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;
+  const { cssStyles } = node;
-  if (useRough) {
+  if (node.look === 'handdrawn') {
     // @ts-ignore - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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 });

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

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 - rough is not typed
     const rc = rough.svg(shapeSvg);
     const options = userNodeOverrides(node, {});

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

@@ -34,9 +34,9 @@ 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) {
+  if (node.look === 'handdrawn') {
     console.log('Trapezoid: Inside use useRough');
     // @ts-ignore
     const rc = rough.svg(shapeSvg);

packages/mermaid/src/rendering-util/types.d.ts

@@ -47,7 +47,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
@@ -62,6 +61,8 @@ interface Node {
   // Flowchart specific properties
   x?: number;
   y?: number;
+
+  look?: string;
 }
 
 // Common properties for any edge in the system
@@ -92,7 +93,7 @@ interface Edge {
   minlen?: number;
   pattern?: string;
   thickness?: 'normal' | 'thick' | 'invisible';
-  useRough?: boolean;
+  look?: string;
 }
 
 interface RectOptions {