#5237 Rough rendering of notes
This commit is contained in:
parent
ce6f2739b5
commit
4c0b8f6f40
|
@ -109,34 +109,27 @@ stateDiagram-v2
|
|||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{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.
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid">
|
||||
%%{init: {"handdrawn": false} }%%
|
||||
stateDiagram-v2
|
||||
state ProActive {
|
||||
state Active {
|
||||
Chimp --> A:One
|
||||
Chimp --> B:Two
|
||||
Chimp --> C:Three
|
||||
state InActive {
|
||||
D
|
||||
}
|
||||
}
|
||||
}
|
||||
</pre
|
||||
stateDiagram-v2
|
||||
TN3: The state with a note
|
||||
note right of TN3
|
||||
Important information! You can write
|
||||
notes.
|
||||
end note
|
||||
TN3 --> TN4
|
||||
note left of TN4 : This is the note to the left.
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram" class="mermaid2">
|
||||
block-beta
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in New Issue