marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-20 15:59:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix remaining rendering of circles

Browse Source
This commit is contained in:
Per Brolin
2024-09-29 22:40:08 +02:00
parent 8fa8fd6abd
commit 32d7f470dc
5 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
View File

@@ -8,10 +8,24 @@ import rough from 'roughjs';
export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
const padding = node.padding ?? 0;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - padding * 2;
if (node.width < 50) {
node.width = 50;
}
node.height = (node?.height ?? 0) - padding * 2;
if (node.height < 50) {
node.height = 50;
}
}
const { shapeSvg, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const radius = Math.max(bbox.width / 2 + labelPadding, (node?.width ?? 0) / 2);
const radius = (node.width ?? 0) / 2 + labelPadding;
let circleElem;
const { cssStyles } = node;

23
packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts
View File

@@ -7,12 +7,27 @@ import rough from 'roughjs';
export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
const gap = 5;
node.labelStyle = labelStyles;
const padding = node.padding ?? 0;
if (node.width || node.height) {
node.width = (node?.width ?? 0) - padding * 2 - gap * 2;
if (node.width < 50) {
node.width = 50;
}
node.height = (node?.height ?? 0) - padding * 2 - gap * 2;
if (node.height < 50) {
node.height = 50;
}
}
const { shapeSvg, halfPadding } = await labelHelper(parent, node, getNodeClasses(node));
const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
const outerRadius = bbox.width / 2 + labelPadding + gap;
const innerRadius = bbox.width / 2 + labelPadding;
const outerRadius = (node.width ?? 0) / 2 + labelPadding + gap;
const innerRadius = outerRadius - gap;
let circleGroup;
const { cssStyles } = node;

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts
View File

@@ -16,7 +16,7 @@ export const filledCircle = (
.insert('g')
.attr('class', getNodeClasses(node))
.attr('id', node.domId ?? node.id);
const radius = 7;
const radius = (node.width ?? 0) / 2;
const { cssStyles } = node;
// @ts-ignore - rough is not typed

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

@@ -28,13 +28,14 @@ export const stateEnd = (
options.fillStyle = 'solid';
}
const roughNode = rc.circle(0, 0, 14, {
const roughNode = rc.circle(0, 0, node.width, {
...options,
stroke: lineColor,
strokeWidth: 2,
});
const innerFill = stateBorder ?? nodeBorder;
const roughInnerNode = rc.circle(0, 0, 5, {
const innerNodeRadius = ((node.width ?? 0) * 5) / 14;
const roughInnerNode = rc.circle(0, 0, innerNodeRadius, {
...options,
fill: innerFill,
stroke: innerFill,
@@ -55,7 +56,7 @@ export const stateEnd = (
updateNodeBounds(node, circle);
node.intersect = function (point) {
return intersect.circle(node, 7, point);
return intersect.circle(node, (node.width ?? 0) / 2, point);
};
return shapeSvg;

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

@@ -17,11 +17,11 @@ export const stateStart = (
.attr('class', 'node default')
.attr('id', node.domId || node.id);
let circle;
let circle: d3.Selection<SVGCircleElement, unknown, Element | null, unknown>;
if (node.look === 'handDrawn') {
// @ts-ignore TODO: Fix rough typings
const rc = rough.svg(shapeSvg);
const roughNode = rc.circle(0, 0, 14, solidStateFill(lineColor));
const roughNode = rc.circle(0, 0, node.width, solidStateFill(lineColor));
circle = shapeSvg.insert(() => roughNode);
} else {
circle = shapeSvg.insert('circle', ':first-child');
@@ -29,7 +29,11 @@ export const stateStart = (
// center the circle around its coordinate
// @ts-ignore TODO: Fix typings
circle.attr('class', 'state-start').attr('r', 7).attr('width', 14).attr('height', 14);
circle
.attr('class', 'state-start')
.attr('r', (node.width ?? 0) / 2)
.attr('width', node.width ?? 0)
.attr('height', node.height ?? 0);
updateNodeBounds(node, circle);