marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 14:29:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

added tilted cylinder

Browse Source
This commit is contained in:
saurabhg772244
2024-08-09 18:35:32 +05:30
parent ac48f01e25
commit 89e4de1dd0
3 changed files with 89 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
cypress/platform/saurabh.html
View File

@@ -63,14 +63,10 @@
<body> <body>
<pre id="diagram4" class="mermaid"> <pre id="diagram4" class="mermaid">
flowchart flowchart
A@{ shape: titledCylinder, label: "title" }@ --> B@{ shape: titledCylinder, label: "title B" }@
A@{ shape: stateStart }@
B@{ shape: crossedCircle, label: "This is crossed circle" }@ C@{ shape: titledCylinder, label: "title with very long text but on single line" }@ --> D@{ shape: titledCylinder, label: "title \n with \n multiple \n lines \n of n text" }@
C A --> D
D
A ---> B
C --> B
B --> D
</pre </pre
@@ -91,7 +87,7 @@ flowchart
// handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'classic', look: 'classic',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
'elk.nodePlacement.strategy': 'SIMPLE', // 'elk.nodePlacement.strategy': 'SIMPLE',
// 'elk.nodePlacement.strategy': 'LAYERED', // 'elk.nodePlacement.strategy': 'LAYERED',
// 'elk.mergeEdges': true, // 'elk.mergeEdges': true,
// layout: 'dagre', // layout: 'dagre',

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

@@ -34,6 +34,7 @@ import { bowTieRect } from './shapes/bowTieRect.js';
import { dividedRect } from './shapes/dividedRect.js'; import { dividedRect } from './shapes/dividedRect.js';
import { crossedCircle } from './shapes/crossedCircle.js'; import { crossedCircle } from './shapes/crossedCircle.js';
import { waveRectangle } from './shapes/waveRectangle.js'; import { waveRectangle } from './shapes/waveRectangle.js';
import { titledCylinder } from './shapes/tiltedCylinder.js';
const shapes = { const shapes = {
state, state,
@@ -71,6 +72,7 @@ const shapes = {
dividedRect, dividedRect,
crossedCircle, crossedCircle,
waveRectangle, waveRectangle,
titledCylinder,
}; };
const nodeElems = new Map(); const nodeElems = new Map();

82
packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts Normal file
View File

@@ -0,0 +1,82 @@
import { labelHelper, getNodeClasses, updateNodeBounds } from './util.js';
import type { Node } from '$root/rendering-util/types.d.ts';
import {
styles2String,
userNodeOverrides,
} from '$root/rendering-util/rendering-elements/shapes/handdrawnStyles.js';
import rough from 'roughjs';
import intersect from '../intersect/index.js';
function createCylinderPathD(rx: number, ry: number, w: number, h: number) {
return `M ${w / 2} ${-h / 2}
L ${-w / 2} ${-h / 2}
A ${rx} ${ry} 0 0 0 ${-w / 2} ${h / 2}
L ${w / 2} ${h / 2}
A ${rx} ${ry} 0 0 0 ${w / 2} ${-h / 2}
A ${rx} ${ry} 0 0 0 ${w / 2} ${h / 2}`;
}
export const titledCylinder = async (parent: SVGAElement, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const h = bbox.height + node.padding;
const ry = h / 2;
const rx = ry / (2.5 + h / 50);
const w = bbox.width + rx + node.padding;
const { cssStyles } = node;
// @ts-ignore - rough is not typed
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look !== 'handdrawn') {
options.roughness = 0;
options.fillStyle = 'solid';
}
const linePath = createCylinderPathD(rx, ry, w, h);
const lineNode = rc.path(linePath, options);
const crossedCircle = shapeSvg.insert('g', ':first-child');
crossedCircle.insert(() => lineNode, ':first-child');
crossedCircle.attr('class', 'basic label-container');
if (cssStyles) {
crossedCircle.attr('style', cssStyles);
}
if (nodeStyles) {
crossedCircle.attr('style', nodeStyles);
}
updateNodeBounds(node, crossedCircle);
node.intersect = function (point) {
const pos = intersect.rect(node, point);
const y = pos.y - (node.y ?? 0);
if (
ry != 0 &&
(Math.abs(y) < (node.height ?? 0) / 2 ||
(Math.abs(y) == (node.height ?? 0) / 2 &&
Math.abs(pos.x - (node.x ?? 0)) > (node.width ?? 0) / 2 - rx))
) {
let x = rx * rx * (1 - (y * y) / (ry * ry));
if (x != 0) {
x = Math.sqrt(x);
}
x = rx - x;
if (point.x - (node.x ?? 0) > 0) {
x = -x;
}
pos.x += x;
}
return pos;
};
return shapeSvg;
};