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

updated choice shape

Browse Source
This commit is contained in:
omkarht
2024-08-27 15:22:01 +05:30
parent 5e5265c8b0
commit 5c6f3e66a6
1 changed files with 30 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts
View File

@@ -3,20 +3,17 @@ 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';
// @ts-ignore TODO: Fix rough typings // @ts-ignore TODO: Fix rough typings
import rough from 'roughjs'; import rough from 'roughjs';
import { solidStateFill, styles2String } from './handDrawnShapeStyles.js'; import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { createPathFromPoints, getNodeClasses, labelHelper } from './util.js';
export const choice = (parent: SVG, node: Node) => { export const choice = async (parent: SVG, node: Node) => {
const { labelStyles, nodeStyles } = styles2String(node); const { nodeStyles } = styles2String(node);
node.labelStyle = labelStyles; node.label = '';
const { themeVariables } = getConfig(); const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
const { lineColor } = themeVariables; const { cssStyles } = node;
const shapeSvg = parent
.insert('g') const s = Math.max(28, node.width ?? 0);
.attr('class', 'node default')
.attr('id', node.domId || node.id);
const s = 28;
const points = [ const points = [
{ x: 0, y: s / 2 }, { x: 0, y: s / 2 },
{ x: s / 2, y: 0 }, { x: s / 2, y: 0 },
@@ -24,40 +21,34 @@ export const choice = (parent: SVG, node: Node) => {
{ x: -s / 2, y: 0 }, { x: -s / 2, y: 0 },
]; ];
let choice; // @ts-ignore TODO: Fix rough typings
if (node.look === 'handDrawn') { const rc = rough.svg(shapeSvg);
// @ts-ignore TODO: Fix rough typings const options = userNodeOverrides(node, {});
const rc = rough.svg(shapeSvg);
const pointArr = points.map(function (d) { if (node.look !== 'handDrawn') {
return [d.x, d.y]; options.roughness = 0;
}); options.fillStyle = 'solid';
const roughNode = rc.polygon(pointArr, solidStateFill(lineColor));
choice = shapeSvg.insert(() => roughNode);
} else {
choice = shapeSvg.insert('polygon', ':first-child').attr(
'points',
points
.map(function (d) {
return d.x + ',' + d.y;
})
.join(' ')
);
} }
// center the circle around its coordinate const choicePath = createPathFromPoints(points);
choice const roughNode = rc.path(choicePath, options);
.attr('class', 'state-start') const choiceShape = shapeSvg.insert(() => roughNode, ':first-child');
// @ts-ignore TODO: Fix rough typings
.attr('r', 7) choiceShape.attr('class', 'basic label-container');
.attr('width', 28)
.attr('height', 28) if (cssStyles && node.look !== 'handDrawn') {
.attr('style', nodeStyles); choiceShape.selectAll('path').attr('style', cssStyles);
}
if (nodeStyles && node.look !== 'handDrawn') {
choiceShape.selectAll('path').attr('style', nodeStyles);
}
node.width = 28; node.width = 28;
node.height = 28; node.height = 28;
node.intersect = function (point) { node.intersect = function (point) {
return intersect.circle(node, 14, point); return intersect.polygon(node, points, point);
}; };
return shapeSvg; return shapeSvg;