mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-02 13:49:37 +02:00
Third Set of shapes updated for drop shadow syling in redux theme
This commit is contained in:
@@ -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;
|
||||
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
||||
|
Reference in New Issue
Block a user