marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-03 22:29:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Third Set of shapes updated for drop shadow syling in redux theme

Browse Source
This commit is contained in:
omkarht
2025-01-21 19:06:04 +05:30
parent fa4d93483a
commit 7afd7a9729
7 changed files with 15 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts
View File

@@ -15,13 +15,14 @@ export async function circle<T extends SVGGraphicsElement>(parent: D3Selection<T
// also check if the width or height is less than minimum default values (50),
// if so set it to min value
const padding = node.padding ?? 0;
const labelPadding = node.look === 'neo' ? 16 : padding;
if (node.width || node.height) {
node.width = (node.width ?? 6) - padding * 2;
node.width = (node.width ?? 6) - labelPadding * 2;
node.height = node.width;
}
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
const radius = (node?.width ? node?.width / 2 : bbox.width / 2) + padding;
const radius = (node?.width ? node?.width / 2 : bbox.width / 2) + labelPadding * 2;
let circleElem;
const { cssStyles } = node;

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/flippedTriangle.ts
View File

@@ -57,7 +57,8 @@ export async function flippedTriangle<T extends SVGGraphicsElement>(
const flippedTriangle = shapeSvg
.insert(() => roughNode, ':first-child')
.attr('transform', `translate(${-h / 2}, ${h / 2})`);
.attr('transform', `translate(${-h / 2}, ${h / 2})`)
.attr('class', 'outer-path');
if (cssStyles && node.look !== 'handDrawn') {
flippedTriangle.selectChildren('path').attr('style', cssStyles);

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/slopedRect.ts
View File

@@ -53,7 +53,7 @@ export async function slopedRect<T extends SVGGraphicsElement>(parent: D3Selecti
const shapeNode = rc.path(pathData, options);
const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
polygon.attr('class', 'basic label-container');
polygon.attr('class', 'basic label-container outer-path');
if (cssStyles && node.look !== 'handDrawn') {
polygon.selectChildren('path').attr('style', cssStyles);

16
packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts
View File

@@ -4,7 +4,6 @@ import type { Node } from '../../types.js';
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
import rough from 'roughjs';
import { insertPolygonShape } from './insertPolygonShape.js';
import { getConfig } from '../../../config.js';
import type { D3Selection } from '../../../types.js';
import { handleUndefinedAttr } from '../../../utils.js';
@@ -38,12 +37,10 @@ export const createSubroutinePathD = (
const FRAME_WIDTH = 8;
export async function subroutine<T extends SVGGraphicsElement>(parent: D3Selection<T>, node: Node) {
const { themeVariables } = getConfig();
const { useGradient } = themeVariables;
const { labelStyles, nodeStyles } = styles2String(node);
node.labelStyle = labelStyles;
const nodePadding = node?.padding || 8;
const nodePadding = node?.padding ?? 8;
const labelPaddingX = node.look === 'neo' ? 28 : nodePadding;
const labelPaddingY = node.look === 'neo' ? 12 : nodePadding;
@@ -79,16 +76,11 @@ export async function subroutine<T extends SVGGraphicsElement>(parent: D3Selecti
{ x: -FRAME_WIDTH, y: 0 },
];
if (node.look === 'handDrawn' || (node.look === 'neo' && !useGradient)) {
if (node.look === 'handDrawn') {
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
const rc = rough.svg(shapeSvg);
const options = userNodeOverrides(node, {});
if (node.look === 'neo') {
options.roughness = 0;
options.fillStyle = 'solid';
}
const roughNode = rc.rectangle(x - FRAME_WIDTH, y, w + 2 * FRAME_WIDTH, h, options);
const l1 = rc.line(x, y, x, y + h, options);
const l2 = rc.line(x + w, y, x + w, y + h, options);
@@ -99,7 +91,9 @@ export async function subroutine<T extends SVGGraphicsElement>(parent: D3Selecti
l2El.attr('class', 'neo-line');
const rect = shapeSvg.insert(() => roughNode, ':first-child');
const { cssStyles } = node;
rect.attr('class', 'basic label-container').attr('style', handleUndefinedAttr(cssStyles));
rect
.attr('class', 'basic label-container outer-path')
.attr('style', handleUndefinedAttr(cssStyles));
updateNodeBounds(node, rect);
} else {
const el = insertPolygonShape(shapeSvg, w, h, points);

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/tiltedCylinder.ts
View File

@@ -108,7 +108,7 @@ export async function tiltedCylinder<T extends SVGGraphicsElement>(
.attr('class', 'basic label-container')
.attr('style', handleUndefinedAttr(cssStyles))
.attr('style', nodeStyles);
cylinder.attr('class', 'basic label-container');
cylinder.attr('class', 'basic label-container outer-path');
if (cssStyles) {
cylinder.selectAll('path').attr('style', cssStyles);

2
packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoidalPentagon.ts
View File

@@ -57,7 +57,7 @@ export async function trapezoidalPentagon<T extends SVGGraphicsElement>(
const shapeNode = rc.path(pathData, options);
const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
polygon.attr('class', 'basic label-container');
polygon.attr('class', 'basic label-container outer-path');
if (cssStyles && node.look !== 'handDrawn') {
polygon.selectChildren('path').attr('style', cssStyles);

3
packages/mermaid/src/rendering-util/rendering-elements/shapes/triangle.ts
View File

@@ -53,7 +53,8 @@ export async function triangle<T extends SVGGraphicsElement>(parent: D3Selection
const polygon = shapeSvg
.insert(() => roughNode, ':first-child')
.attr('transform', `translate(${-h / 2}, ${h / 2})`);
.attr('transform', `translate(${-h / 2}, ${h / 2})`)
.attr('class', 'outer-path');
if (cssStyles && node.look !== 'handDrawn') {
polygon.selectChildren('path').attr('style', cssStyles);