From 1b5bd999e2911345ca7f02e1de3a8a6b37ddc0dc Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Wed, 12 Jun 2024 12:10:20 +0200 Subject: [PATCH] 5237 Replaced useRough by look --- .../mermaid/src/diagrams/flowchart/flowDb.ts | 9 ++++----- .../mermaid/src/diagrams/state/dataFetcher.js | 18 +++++------------- packages/mermaid/src/diagrams/state/stateDb.js | 3 +-- .../rendering-elements/clusters.js | 7 +++---- .../rendering-util/rendering-elements/edges.js | 3 +-- .../rendering-elements/shapes/choice.ts | 2 +- .../rendering-elements/shapes/circle.ts | 4 ++-- .../rendering-elements/shapes/cylinder.ts | 4 ++-- .../rendering-elements/shapes/doubleCircle.ts | 4 ++-- .../rendering-elements/shapes/drawRect.ts | 4 ++-- .../rendering-elements/shapes/forkJoin.ts | 2 +- .../rendering-elements/shapes/hexagon.ts | 4 ++-- .../shapes/invertedTrapezoid.ts | 4 ++-- .../rendering-elements/shapes/leanLeft.ts | 4 ++-- .../rendering-elements/shapes/leanRight.ts | 4 ++-- .../rendering-elements/shapes/note.ts | 4 ++-- .../rendering-elements/shapes/question.ts | 4 ++-- .../shapes/rectLeftInvArrow.ts | 4 ++-- .../rendering-elements/shapes/stadium.ts | 4 ++-- .../rendering-elements/shapes/stateEnd.ts | 2 +- .../rendering-elements/shapes/stateStart.ts | 2 +- .../rendering-elements/shapes/subroutine.ts | 4 ++-- .../rendering-elements/shapes/trapezoid.ts | 4 ++-- packages/mermaid/src/rendering-util/types.d.ts | 5 +++-- 24 files changed, 49 insertions(+), 60 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index 01a33120c..0faa5c048 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -793,7 +793,7 @@ const addNodeFromVertex = ( parentDB: Map, subGraphDB: Map, 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(); @@ -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); diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 3bdf1abe0..2f0edb7a7 100644 --- a/packages/mermaid/src/diagrams/state/dataFetcher.js +++ b/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, - useRough, + altFlag,, 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); } }; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index e2f643af3..d4de32889 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/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); }; /** diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index b66d44987..2bbb13c62 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/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', diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index bdf20a966..b802c2ca8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/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)), { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts index 8248f3ddd..809b543ed 100644 --- 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) { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts index a77525b65..17b555bbe 100644 --- 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 { const h = bbox.height + ry + node.padding; let cylinder: d3.Selection; - 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); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts index 096b3ded1..fa6182c32 100644 --- 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 { 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)); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts index 00737a49e..07f5e9c6a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts @@ -47,9 +47,9 @@ export const hexagon = async (parent: SVGAElement, node: Node): Promise; - 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, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts index f7753ba07..f53fbf92c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts @@ -35,9 +35,9 @@ export const inv_trapezoid = async (parent: SVGAElement, node: Node): Promise; - 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, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts index 6c8a0451f..06a408a93 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts @@ -34,9 +34,9 @@ export const lean_left = async (parent: SVGAElement, node: Node): Promise; - 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, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts index 61f14dc4a..c2a5aac70 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts @@ -34,9 +34,9 @@ export const lean_right = async (parent: SVGAElement, node: Node): Promise; - 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, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index 5843f558b..79c7129a1 100644 --- 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); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts index 4c971a651..df87648c5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts @@ -31,9 +31,9 @@ export const question = async (parent: SVGAElement, node: Node): Promise; - 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, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index 9b743d89d..a5d0b733c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/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, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts index 67531da5e..4adf9d474 100644 --- 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 - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index 5f93d7a41..4d4d21d86 100644 --- 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 }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts index c045266fd..575e7d2b0 100644 --- 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)); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts index b2fbdebb2..cecd0d8b6 100644 --- 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 - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts index 22a68de3c..1677ef8cf 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -34,9 +34,9 @@ export const trapezoid = async (parent: SVGAElement, node: Node): Promise; - 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); diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index 3d7e70a07..e1f16737b 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/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 {