diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index c01729c84..fd6b2d969 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -14,6 +14,10 @@ href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet" /> + + + + @@ -459,7 +478,7 @@ mindmap // }); mermaid.initialize({ flowchart: { titleTopMargin: 10 }, - fontFamily: 'courier', + fontFamily: 'Kalam', sequence: { actorFontFamily: 'courier', noteFontFamily: 'courier', diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index f1f7bc993..210d8199f 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -552,12 +552,11 @@ const dataFetcher = (parentId, doc, nodes, edges) => { extract(doc); //states + const useRough = true; const stateKeys = Object.keys(currentDocument.states); stateKeys.forEach((key) => { const item = currentDocument.states[key]; - console.log('Item:', item); - let itemShape = 'rect'; if (item.type === 'default' && item.id === 'root_start') { itemShape = 'stateStart'; @@ -585,7 +584,14 @@ const dataFetcher = (parentId, doc, nodes, edges) => { } if (parentId) { - nodes.push({ ...item, labelText: item.id, labelType: 'text', parentId, shape: itemShape }); + nodes.push({ + ...item, + labelText: item.id, + labelType: 'text', + parentId, + shape: itemShape, + useRough, + }); } else { nodes.push({ ...item, @@ -597,6 +603,9 @@ const dataFetcher = (parentId, doc, nodes, edges) => { shape: itemShape, padding: 15, classes: ' statediagram-state', + rx: 10, + ry: 10, + useRough, }); } }); @@ -617,6 +626,7 @@ const dataFetcher = (parentId, doc, nodes, edges) => { labelType: G_EDGE_LABELTYPE, thickness: G_EDGE_THICKNESS, classes: CSS_EDGE, + useRough, }); }); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 156f610bc..b87d9b332 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -448,7 +448,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph strokeClasses += ' edge-pattern-dashed'; break; } - let useRough = true; + let useRough = edge.useRough; let svgPath; let path = ''; const pointArr = []; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts index 657749051..f7f2f58a6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -3,6 +3,8 @@ import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import type { SVG } from '$root/diagram-api/types.js'; +import rough from 'roughjs'; +import solidFillOptions from './solidFillOptions.js'; export const forkJoin = (parent: SVG, node: Node, dir: string) => { const shapeSvg = parent @@ -17,14 +19,23 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => { width = 10; height = 70; } + const x = (-1 * width) / 2; + const y = (-1 * height) / 2; - const shape = shapeSvg - .append('rect') - .attr('x', (-1 * width) / 2) - .attr('y', (-1 * height) / 2) - .attr('width', width) - .attr('height', height) - .attr('class', 'fork-join'); + let shape; + if (node.useRough) { + const rc = rough.svg(shapeSvg); + const roughNode = rc.rectangle(x, y, width, height, solidFillOptions); + shape = shapeSvg.insert(() => roughNode); + } else { + shape = shapeSvg + .append('rect') + .attr('x', x) + .attr('y', y) + .attr('width', width) + .attr('height', height) + .attr('class', 'fork-join'); + } updateNodeBounds(node, shape); let nodeHeight = 0; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts index 30469e8d9..95f474e46 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts @@ -111,20 +111,6 @@ function createRoundedRectPathD( ].join(' '); } -function roundedRect(ctx, x, y, width, height, radius) { - ctx.beginPath(); - ctx.moveTo(x + radius, y); - ctx.lineTo(x + width - radius, y); - ctx.quadraticCurveTo(x + width, y, x + width, y + radius); - ctx.lineTo(x + width, y + height - radius); - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); - ctx.lineTo(x + radius, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - radius); - ctx.lineTo(x, y + radius); - ctx.quadraticCurveTo(x, y, x + radius, y); - ctx.closePath(); -} - export const rect = async (parent: SVGAElement, node: Node) => { const { shapeSvg, bbox, halfPadding } = await labelHelper( parent, @@ -133,34 +119,31 @@ export const rect = async (parent: SVGAElement, node: Node) => { true ); - const useRough = true; - const totalWidth = bbox.width + node.padding; const totalHeight = bbox.height + node.padding; const x = -bbox.width / 2 - halfPadding; const y = -bbox.height / 2 - halfPadding; let rect; + const { rx, ry, style, useRough } = node; if (useRough) { const rc = rough.svg(shapeSvg); - let roughNode; - if (node.rx || node.ry) { - // add the rect - roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 6)); - } else { - roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { radius: 60 }); - } - const svgNode = shapeSvg.node(); - svgNode.insertBefore(roughNode, svgNode.firstChild); - rect = select(roughNode); + const roughNode = + rx || ry + ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), { + roughness: 0.7, + }) + : rc.rectangle(x, y, totalWidth, totalHeight); + + rect = shapeSvg.insert(() => roughNode); } else { rect = shapeSvg.insert('rect', ':first-child'); rect .attr('class', 'basic label-container') - .attr('style', node.style) - .attr('rx', node.rx) - .attr('ry', node.ry) + .attr('style', style) + .attr('rx', rx) + .attr('ry', ry) .attr('x', x) .attr('y', y) .attr('width', totalWidth) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/solidFillOptions.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/solidFillOptions.ts new file mode 100644 index 000000000..76d9808e2 --- /dev/null +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/solidFillOptions.ts @@ -0,0 +1,10 @@ +const options = { + fill: 'black', + // fillStyle: 'solid', + hachureAngle: 120, // angle of hachure, + hachureGap: 4, + fillWeight: 2, + roughness: 0.7, +}; + +export default options; 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 3f968fe86..3a6b52c4a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -3,18 +3,40 @@ import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import type { SVG } from '$root/diagram-api/types.js'; +import rough from 'roughjs'; +import solidFillOptions from './solidFillOptions.js'; export const stateEnd = (parent: SVG, node: Node) => { const shapeSvg = parent .insert('g') .attr('class', 'node default') .attr('id', node.domId || node.id); - const innerCircle = shapeSvg.insert('circle', ':first-child'); - const circle = shapeSvg.insert('circle', ':first-child'); - circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); + // const roughNode = rc.circle(0, 0, 14, { + // fill: 'white', + // fillStyle: 'solid', + // roughness: 1, + // stroke: 'black', + // strokeWidth: 1, + // }); - innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10); + // circle = shapeSvg.insert(() => roughNode); + let circle; + let innerCircle; + if (node.useRough) { + const rc = rough.svg(shapeSvg); + const roughNode = rc.circle(0, 0, 14, { roughness: 0.5 }); + const roughInnerNode = rc.circle(0, 0, 5, { ...solidFillOptions, fillStyle: 'solid' }); + circle = shapeSvg.insert(() => roughNode); + innerCircle = shapeSvg.insert(() => roughInnerNode); + } else { + innerCircle = shapeSvg.insert('circle', ':first-child'); + circle = shapeSvg.insert('circle', ':first-child'); + + circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); + + innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10); + } updateNodeBounds(node, circle); 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 20dc861e9..1a5a2606e 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -3,13 +3,23 @@ import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; import type { SVG } from '$root/diagram-api/types.js'; +import rough from 'roughjs'; +import solidFillOptions from './solidFillOptions.js'; export const stateStart = (parent: SVG, node: Node) => { const shapeSvg = parent .insert('g') .attr('class', 'node default') .attr('id', node.domId || node.id); - const circle = shapeSvg.insert('circle', ':first-child'); + + let circle; + if (node.useRough) { + const rc = rough.svg(shapeSvg); + const roughNode = rc.circle(0, 0, 14, solidFillOptions); + circle = shapeSvg.insert(() => roughNode); + } else { + circle = shapeSvg.insert('circle', ':first-child'); + } // center the circle around its coordinate circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts index e69537e81..af24d4c76 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.d.ts @@ -40,6 +40,7 @@ interface Node { style?: string; class?: string; borders?: string; + useRough?: boolean; } // Common properties for any edge in the system