diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index 16c945918..68383debb 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -109,34 +109,27 @@ stateDiagram-v2
- %%{init: {"handdrawn": "true"} }%% -stateDiagram-v2 - state ProActive { - state Active { - Chimp --> A:One - Chimp --> B:Two - Chimp --> C:Three - state InActive { - D - } - } - } + stateDiagram-v2 + TN1: The state with a note + note right of TN1 + Important information! You can write + notes. + end note + TN1 --> TN2 + note left of TN2 : This is the note to the left.
%%{init: {"handdrawn": false} }%% -stateDiagram-v2 - state ProActive { - state Active { - Chimp --> A:One - Chimp --> B:Two - Chimp --> C:Three - state InActive { - D - } - } - } -TN4 + note left of TN4 : This is the note to the left. +
block-beta diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index 2c3948e70..7b340c336 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -102,6 +102,21 @@ const rect = (parent, node) => { * @returns {any} ShapeSvg */ const noteGroup = (parent, node) => { + const { themeVariables } = getConfig(); + const { + textColor, + clusterTextColor, + altBackground, + compositeBackground, + compositeTitleBackground, + compositeBorder, + noteBorderColor, + noteBkgColor, + nodeBorder, + mainBkg, + stateBorder, + } = themeVariables; + // Add outer g element const shapeSvg = parent.insert('g').attr('class', 'note-cluster').attr('id', node.id); @@ -134,8 +149,6 @@ const noteGroup = (parent, node) => { const roundedWithTitle = (parent, node) => { const siteConfig = getConfig(); - console.log('DAGO node in roundedWithTitle', siteConfig.themeVariables); - const { themeVariables } = siteConfig; const { altBackground, compositeBackground, compositeTitleBackground, nodeBorder } = themeVariables; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index 5acc86c86..ecb144e26 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -1,10 +1,15 @@ import { log } from '$root/logger.js'; import { labelHelper, updateNodeBounds } from './util.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 rough from 'roughjs'; export const note = async (parent: SVGAElement, node: Node) => { - const useHtmlLabels = node.useHtmlLabels ; + const { themeVariables } = getConfig(); + const { noteBorderColor, noteBkgColor } = themeVariables; + + const useHtmlLabels = node.useHtmlLabels; if (!useHtmlLabels) { node.centerLabel = true; } @@ -16,16 +21,35 @@ export const note = async (parent: SVGAElement, node: Node) => { ); log.info('Classes = ', node.classes); - // add the rect - const rect = shapeSvg.insert('rect', ':first-child'); + const { style, useRough } = node; + let rect; + const totalWidth = bbox.width + node.padding; + const totalHeight = bbox.height + node.padding; + const x = -bbox.width / 2 - halfPadding; + const y = -bbox.height / 2 - halfPadding; - rect - .attr('rx', node.rx) - .attr('ry', node.ry) - .attr('x', -bbox.width / 2 - halfPadding) - .attr('y', -bbox.height / 2 - halfPadding) - .attr('width', bbox.width + node.padding) - .attr('height', bbox.height + node.padding); + if (useRough) { + // add the rect + const rc = rough.svg(shapeSvg); + const roughNode = rc.rectangle(x, y, totalWidth, totalHeight, { + roughness: 0.7, + fill: noteBkgColor, + fillStyle: 'solid', // solid fill' + stroke: noteBorderColor, + }); + + rect = shapeSvg.insert(() => roughNode, ':first-child'); + rect.attr('class', 'basic label-container').attr('style', style); + } else { + rect = shapeSvg.insert('rect', ':first-child'); + rect + .attr('rx', node.rx) + .attr('ry', node.ry) + .attr('x', x) + .attr('y', y) + .attr('width', totalWidth) + .attr('height', totalHeight); + } updateNodeBounds(node, rect);