mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-20 15:59:51 +02:00
fix remaining rendering of circles
This commit is contained in:
@@ -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;
|
||||
|
||||
|
@@ -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;
|
||||
|
@@ -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
|
||||
|
@@ -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;
|
||||
|
@@ -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);
|
||||
|
||||
|
Reference in New Issue
Block a user