GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +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"
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>
body {
/* background: rgb(221, 208, 208); */
@ -54,6 +58,21 @@
/* tspan {
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>
</head>
<body>
@ -459,7 +478,7 @@ mindmap
// });
mermaid.initialize({
flowchart: { titleTopMargin: 10 },
fontFamily: 'courier',
fontFamily: 'Kalam',
sequence: {
actorFontFamily: '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);
//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,
});
});

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';
break;
}
let useRough = true;
let useRough = edge.useRough;
let svgPath;
let path = '';
const pointArr = [];

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

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

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

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;

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

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

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

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