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

Updated Note Shape

Browse Source
This commit is contained in:
omkarht
2024-08-26 17:39:16 +05:30
parent e842b72aaa
commit 23329f1ee9
1 changed files with 29 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts
View File

@@ -1,52 +1,46 @@
import { log } from '$root/logger.js'; import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds } from './util.js'; import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.js';
import { getConfig } from '$root/diagram-api/diagramAPI.js';
import type { Node } from '$root/rendering-util/types.d.ts'; import type { Node } from '$root/rendering-util/types.d.ts';
import rough from 'roughjs'; import rough from 'roughjs';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
export const note = async (parent: SVGAElement, node: Node) => { export const note = async (parent: SVGAElement, node: Node) => {
const { themeVariables, handDrawnSeed } = getConfig(); const { labelStyles, nodeStyles } = styles2String(node);
const { noteBorderColor, noteBkgColor } = themeVariables; node.labelStyle = labelStyles;
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const totalWidth = Math.max(bbox.width + (node.padding ?? 0) * 2, node?.width ?? 0);
const totalHeight = Math.max(bbox.height + (node.padding ?? 0) * 2, node?.height ?? 0);
const x = -totalWidth / 2;
const y = -totalHeight / 2;
const { cssStyles } = node;
const useHtmlLabels = node.useHtmlLabels; const useHtmlLabels = node.useHtmlLabels;
if (!useHtmlLabels) { if (!useHtmlLabels) {
node.centerLabel = true; node.centerLabel = true;
} }
const { shapeSvg, bbox } = await labelHelper(parent, node, 'node ' + node.cssClasses);
log.info('Classes = ', node.cssClasses); log.info('Classes = ', node.cssClasses);
const { cssStyles } = node; // add the rect
let rect; // @ts-ignore TODO: Fix rough typings
const totalWidth = bbox.width + node.padding; const rc = rough.svg(shapeSvg);
const totalHeight = bbox.height + node.padding; const options = userNodeOverrides(node, {});
const x = -totalWidth / 2;
const y = -totalHeight / 2;
if (node.look === 'handDrawn') { if (node.look !== 'handDrawn') {
// add the rect options.roughness = 0;
// @ts-ignore TODO: Fix rough typings options.fillStyle = 'solid';
const rc = rough.svg(shapeSvg); }
const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, {
roughness: 0.7,
fill: noteBkgColor,
fillWeight: 3,
seed: handDrawnSeed,
// fillStyle: 'solid', // solid fill'
stroke: noteBorderColor,
});
rect = shapeSvg.insert(() => roughNode, ':first-child'); const noteShapeNode = rc.rectangle(x, y, totalWidth, totalHeight, options);
rect.attr('class', 'basic label-container').attr('style', cssStyles);
} else { const rect = shapeSvg.insert(() => noteShapeNode, ':first-child');
rect = shapeSvg.insert('rect', ':first-child'); rect.attr('class', 'basic label-container');
rect
.attr('rx', node.rx) if (cssStyles && node.look !== 'handDrawn') {
.attr('ry', node.ry) rect.selectAll('path').attr('style', cssStyles);
.attr('x', x) }
.attr('y', y)
.attr('width', totalWidth) if (nodeStyles && node.look !== 'handDrawn') {
.attr('height', totalHeight); rect.selectAll('path').attr('style', nodeStyles);
} }
updateNodeBounds(node, rect); updateNodeBounds(node, rect);