From 8b7001b8e3087f363e43562e66e0180cfb15de6e Mon Sep 17 00:00:00 2001 From: Per Brolin Date: Mon, 10 Jun 2024 13:55:08 +0200 Subject: [PATCH] Removed useRough in favor of node.look --- .../mermaid/src/diagrams/flowchart/flowDb.ts | 19 ++++---- .../mermaid/src/diagrams/state/dataFetcher.js | 48 ++++--------------- .../mermaid/src/diagrams/state/stateDb.js | 4 +- .../rendering-elements/clusters.js | 7 ++- .../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 | 6 +-- .../mermaid/src/rendering-util/types.d.ts | 4 +- 24 files changed, 58 insertions(+), 93 deletions(-) diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts index b2c38efe8..8bb3d0778 100644 --- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts +++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts @@ -775,12 +775,12 @@ const addNodeFromVertex = ( parentDB: Map, subGraphDB: Map, 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(); @@ -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 }; }; diff --git a/packages/mermaid/src/diagrams/state/dataFetcher.js b/packages/mermaid/src/diagrams/state/dataFetcher.js index 3bdf1abe0..6e4738038 100644 --- 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); } }; diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index f6bddf0ea..2d8ae7c3e 100644 --- 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 }; }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index d0133f7d6..344de8919 100644 --- 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', diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index c8e9a948a..68bb061ec 100644 --- 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)), { 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 48054cce3..1b3fdf47a 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 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 d3bda9c86..8cbbe75ff 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 0678e6013..2a05ac4cf 100644 --- 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; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore 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 2f5e2796d..e6a547f20 100644 --- 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; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore 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 dad213357..81a317e88 100644 --- 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; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore 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 c1dfbdbac..bb49621f6 100644 --- 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; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore 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 c72e567cf..274ccc398 100644 --- 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; - const { cssStyles, useRough } = node; + const { cssStyles } = node; - if (useRough) { + if (node.look === 'handdrawn') { // @ts-ignore 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 c73e00b37..b7b8fafa7 100644 --- 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, {}); 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 102e49069..e1155082c 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 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 4046cfcc9..0bdf0e019 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 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 1a6a2d1c2..61cc030ad 100644 --- 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; - 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, {}); diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index b4c1c0f68..949928a82 100644 --- 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 {