GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

#5237 More rough shapes

Browse Source
This commit is contained in:
Knut Sveidqvist 2024-04-26 14:15:07 +02:00
parent 8102ba4d52
commit 7fe4a2ce6c
9 changed files with 112 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
cypress/platform/knsv2.html
View File

@ -14,6 +14,10 @@
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap" rel="stylesheet">
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@ -54,6 +58,21 @@
/* tspan { /* tspan {
font-size: 6px !important; font-size: 6px !important;
} */ } */
<style class="style-fonts">
@font-face {
font-family: "Virgil";
src: url("https://excalidraw.com/Virgil.woff2");
}
@font-face {
font-family: "Cascadia";
src: url("https://excalidraw.com/Cascadia.woff2");
}
@font-face {
font-family: "Assistant";
src: url("https://excalidraw.com/Assistant-Regular.woff2");
}
</style>
</style> </style>
</head> </head>
<body> <body>
@ -459,7 +478,7 @@ mindmap
// }); // });
mermaid.initialize({ mermaid.initialize({
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
fontFamily: 'courier', fontFamily: 'Kalam',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',

16
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -552,12 +552,11 @@ const dataFetcher = (parentId, doc, nodes, edges) => {
extract(doc); extract(doc);
//states //states
const useRough = true;
const stateKeys = Object.keys(currentDocument.states); const stateKeys = Object.keys(currentDocument.states);
stateKeys.forEach((key) => { stateKeys.forEach((key) => {
const item = currentDocument.states[key]; const item = currentDocument.states[key];
console.log('Item:', item);
let itemShape = 'rect'; let itemShape = 'rect';
if (item.type === 'default' && item.id === 'root_start') { if (item.type === 'default' && item.id === 'root_start') {
itemShape = 'stateStart'; itemShape = 'stateStart';
@ -585,7 +584,14 @@ const dataFetcher = (parentId, doc, nodes, edges) => {
} }
if (parentId) { 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 { } else {
nodes.push({ nodes.push({
...item, ...item,
@ -597,6 +603,9 @@ const dataFetcher = (parentId, doc, nodes, edges) => {
shape: itemShape, shape: itemShape,
padding: 15, padding: 15,
classes: ' statediagram-state', classes: ' statediagram-state',
rx: 10,
ry: 10,
useRough,
}); });
} }
}); });
@ -617,6 +626,7 @@ const dataFetcher = (parentId, doc, nodes, edges) => {
labelType: G_EDGE_LABELTYPE, labelType: G_EDGE_LABELTYPE,
thickness: G_EDGE_THICKNESS, thickness: G_EDGE_THICKNESS,
classes: CSS_EDGE, classes: CSS_EDGE,
useRough,
}); });
}); });

2
packages/mermaid/src/rendering-util/rendering-elements/edges.js
View File

@ -448,7 +448,7 @@ export const insertEdge = function (elem, e, edge, clusterDb, diagramType, graph
strokeClasses += ' edge-pattern-dashed'; strokeClasses += ' edge-pattern-dashed';
break; break;
} }
let useRough = true; let useRough = edge.useRough;
let svgPath; let svgPath;
let path = ''; let path = '';
const pointArr = []; const pointArr = [];

17
packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts
View File

@ -3,6 +3,8 @@ import { updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js'; 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) => { export const forkJoin = (parent: SVG, node: Node, dir: string) => {
const shapeSvg = parent const shapeSvg = parent
@ -17,14 +19,23 @@ export const forkJoin = (parent: SVG, node: Node, dir: string) => {
width = 10; width = 10;
height = 70; height = 70;
} }
const x = (-1 * width) / 2;
const y = (-1 * height) / 2;
const shape = shapeSvg 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') .append('rect')
.attr('x', (-1 * width) / 2) .attr('x', x)
.attr('y', (-1 * height) / 2) .attr('y', y)
.attr('width', width) .attr('width', width)
.attr('height', height) .attr('height', height)
.attr('class', 'fork-join'); .attr('class', 'fork-join');
}
updateNodeBounds(node, shape); updateNodeBounds(node, shape);
let nodeHeight = 0; let nodeHeight = 0;

41
packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
View File

@ -111,20 +111,6 @@ function createRoundedRectPathD(
].join(' '); ].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) => { export const rect = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper( const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent, parent,
@ -133,34 +119,31 @@ export const rect = async (parent: SVGAElement, node: Node) => {
true true
); );
const useRough = true;
const totalWidth = bbox.width + node.padding; const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding; const totalHeight = bbox.height + node.padding;
const x = -bbox.width / 2 - halfPadding; const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding; const y = -bbox.height / 2 - halfPadding;
let rect; let rect;
const { rx, ry, style, useRough } = node;
if (useRough) { if (useRough) {
const rc = rough.svg(shapeSvg); const rc = rough.svg(shapeSvg);
let roughNode; const roughNode =
if (node.rx || node.ry) { rx || ry
// add the rect ? rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, rx || 0), {
roughNode = rc.path(createRoundedRectPathD(x, y, totalWidth, totalHeight, 6)); roughness: 0.7,
} else { })
roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { radius: 60 }); : rc.rectangle(x, y, totalWidth, totalHeight);
}
const svgNode = shapeSvg.node(); rect = shapeSvg.insert(() => roughNode);
svgNode.insertBefore(roughNode, svgNode.firstChild);
rect = select(roughNode);
} else { } else {
rect = shapeSvg.insert('rect', ':first-child'); rect = shapeSvg.insert('rect', ':first-child');
rect rect
.attr('class', 'basic label-container') .attr('class', 'basic label-container')
.attr('style', node.style) .attr('style', style)
.attr('rx', node.rx) .attr('rx', rx)
.attr('ry', node.ry) .attr('ry', ry)
.attr('x', x) .attr('x', x)
.attr('y', y) .attr('y', y)
.attr('width', totalWidth) .attr('width', totalWidth)

10
packages/mermaid/src/rendering-util/rendering-elements/shapes/solidFillOptions.ts Normal file
View File

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

26
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts
View File

@ -3,18 +3,40 @@ import { updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js'; 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) => { export const stateEnd = (parent: SVG, node: Node) => {
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
.attr('class', 'node default') .attr('class', 'node default')
.attr('id', node.domId || node.id); .attr('id', node.domId || node.id);
const innerCircle = shapeSvg.insert('circle', ':first-child');
const circle = shapeSvg.insert('circle', ':first-child'); // const roughNode = rc.circle(0, 0, 14, {
// fill: 'white',
// fillStyle: 'solid',
// roughness: 1,
// stroke: 'black',
// strokeWidth: 1,
// });
// 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); 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); innerCircle.attr('class', 'state-end').attr('r', 5).attr('width', 10).attr('height', 10);
}
updateNodeBounds(node, circle); updateNodeBounds(node, circle);

12
packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts
View File

@ -3,13 +3,23 @@ import { updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import type { SVG } from '$root/diagram-api/types.js'; 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) => { export const stateStart = (parent: SVG, node: Node) => {
const shapeSvg = parent const shapeSvg = parent
.insert('g') .insert('g')
.attr('class', 'node default') .attr('class', 'node default')
.attr('id', node.domId || node.id); .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 // center the circle around its coordinate
circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14); circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);

1
packages/mermaid/src/rendering-util/types.d.ts vendored
View File

@ -40,6 +40,7 @@ interface Node {
style?: string; style?: string;
class?: string; class?: string;
borders?: string; borders?: string;
useRough?: boolean;
} }
// Common properties for any edge in the system // Common properties for any edge in the system