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

#5237 Adding roughjs

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-04-24 15:21:28 +02:00
parent 01350467bd
commit da40dbf1dd
1 changed files with 40 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
packages/mermaid/src/rendering-util/rendering-elements/shapes/rect.ts
View File

@@ -2,7 +2,8 @@ import { log } from '$root/logger.js';
import { labelHelper, updateNodeBounds } from './util.js'; import { labelHelper, updateNodeBounds } from './util.js';
import intersect from '../intersect/index.js'; import intersect from '../intersect/index.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 { select } from 'd3';
/** /**
* *
* @param rect * @param rect
@@ -54,6 +55,20 @@ function applyNodePropertyBorders(
rect.attr('stroke-dasharray', strokeDashArray.join(' ')); rect.attr('stroke-dasharray', strokeDashArray.join(' '));
} }
function roundedRect(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
}
export const rect = async (parent: SVGAElement, node: Node) => { export const rect = async (parent: SVGAElement, node: Node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper( const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent, parent,
@@ -62,25 +77,34 @@ export const rect = async (parent: SVGAElement, node: Node) => {
true true
); );
console.log('new rect node', node); const useRough = true;
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
const totalWidth = bbox.width + node.padding; const totalWidth = bbox.width + node.padding;
const totalHeight = bbox.height + node.padding; const totalHeight = bbox.height + node.padding;
const x = -bbox.width / 2 - halfPadding;
const y = -bbox.height / 2 - halfPadding;
rect let rect;
.attr('class', 'basic label-container') if (useRough) {
.attr('style', node.style) const rc = rough.svg(shapeSvg);
.attr('rx', node.rx) // add the rect
.attr('ry', node.ry) const rnode = rc.rectangle(x, y, totalWidth, totalHeight);
// .attr('x', -bbox.width / 2 - node.padding) const svgNode = shapeSvg.node();
// .attr('y', -bbox.height / 2 - node.padding) svgNode.insertBefore(rnode, svgNode.firstChild);
.attr('x', -bbox.width / 2 - halfPadding) rect = select(rnode);
.attr('y', -bbox.height / 2 - halfPadding) } else {
.attr('width', totalWidth) rect = shapeSvg.insert('rect', ':first-child');
.attr('height', totalHeight);
rect
.attr('class', 'basic label-container')
.attr('style', node.style)
.attr('rx', node.rx)
.attr('ry', node.ry)
.attr('x', x)
.attr('y', y)
.attr('width', totalWidth)
.attr('height', totalHeight);
}
if (node.props) { if (node.props) {
const propKeys = new Set(Object.keys(node.props)); const propKeys = new Set(Object.keys(node.props));