diff --git a/cypress/platform/refactor.html b/cypress/platform/refactor.html new file mode 100644 index 000000000..f808fbf75 --- /dev/null +++ b/cypress/platform/refactor.html @@ -0,0 +1,303 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 267bff99c..04a2d04aa 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -55,7 +55,7 @@ export const drawRect = async (parent: SVGAElement, node: Node, options: RectOpt .attr('class', rectClass) .attr('style', nodeStyles) .attr('rx', rx) - .attr('data-id', 'abc') + .attr('data-id', node.id) .attr('data-et', 'node') .attr('ry', ry) .attr('x', x) diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts index a061a2b1c..0704df05b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts @@ -13,7 +13,5 @@ export const roundedRect = async (parent: SVGAElement, node: Node) => { classes: '', } as RectOptions; - console.log('Perra1, node, options: ', node, options); - return drawRect(parent, node, options); }; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts index 082759f1a..381e35baf 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts @@ -1,6 +1,7 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; import type { Node } from '$root/rendering-util/types.d.ts'; +import { getConfig } from '$root/diagram-api/diagramAPI.js'; import { styles2String, userNodeOverrides, @@ -35,14 +36,19 @@ export const createSubroutinePathD = ( }; export const subroutine = async (parent: SVGAElement, node: Node) => { + const { themeVariables } = getConfig(); + const { useGradient, mainBkg } = themeVariables; const { labelStyles, nodeStyles } = styles2String(node); node.labelStyle = labelStyles; const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node)); - const halfPadding = (node?.padding || 0) / 2; - const labelPaddingX = node.look === 'neo' ? node.padding * 3 : node.padding; - const labelPaddingY = node.look === 'neo' ? node.padding * 1.5 : node.padding; - const w = bbox.width + labelPaddingY; - const h = bbox.height + labelPaddingX; + const halfPadding = (node?.padding || 8) / 2; + const nodePadding = node?.padding || 8; + // const labelPaddingX = node.padding; + // const labelPaddingY = node.padding; + const labelPaddingX = node.look === 'neo' ? nodePadding * 3 : nodePadding; + const labelPaddingY = node.look === 'neo' ? nodePadding * 1.5 : nodePadding; + const w = bbox.width + labelPaddingX; + const h = bbox.height + labelPaddingY; const x = -bbox.width / 2 - labelPaddingX / 2; const y = -bbox.height / 2 - labelPaddingY / 2; let rect; @@ -60,20 +66,29 @@ export const subroutine = async (parent: SVGAElement, node: Node) => { { x: -8, y: 0 }, ]; - if (node.look === 'handdrawn') { + if (node.look === 'handdrawn' || (node.look === 'neo' && !useGradient)) { // @ts-ignore - rough is not typed const rc = rough.svg(shapeSvg); const options = userNodeOverrides(node, {}); + if (node.look === 'neo') { + options.roughness = 0; + options.fillStyle = 'solid'; + // options.stroke = 'none'; + // options.strokeWidth = 0 + } + const roughNode = rc.rectangle(x - 8, y, w + 16, h, options); const l1 = rc.line(x, y, x, y + h, options); const l2 = rc.line(x + w, y, x + w, y + h, options); - shapeSvg.insert(() => l1, ':first-child'); - shapeSvg.insert(() => l2, ':first-child'); + const l1El = shapeSvg.insert(() => l1, ':first-child'); + const l2El = shapeSvg.insert(() => l2, ':first-child'); + l1El.attr('class', 'neo-line'); + l2El.attr('class', 'neo-line'); rect = shapeSvg.insert(() => roughNode, ':first-child'); - rect.attr('class', 'basic label-container').attr('style', cssStyles); + // rect.attr('class', 'basic label-container').attr('style', cssStyles); } else { const el = insertPolygonShape(shapeSvg, w, h, points); if (nodeStyles) { diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts index 44c024294..5c277ddb1 100644 --- a/packages/mermaid/src/styles.ts +++ b/packages/mermaid/src/styles.ts @@ -85,10 +85,15 @@ const getStyles = ( [data-look="neo"].node rect, [data-look="neo"].node polygon , [data-look="neo"].node path { - stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; + stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : 'none'}; filter: ${options.dropShadow}; } + [data-look="neo"].node .neo-line path { + stroke: ${options.primaryBorderColor}; + filter: none; + } + [data-look="neo"].node circle{ stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder}; filter: ${options.dropShadow}; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 41555f32e..3bdc2092c 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -30,6 +30,7 @@ class Theme { this.secondBkg = '#ffffde'; this.lineColor = '#333333'; this.border1 = '#9370DB'; + this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode); this.border2 = '#aaaa33'; this.arrowheadColor = '#333333'; this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif'; @@ -117,7 +118,8 @@ class Theme { this.labelColor = 'black'; this.errorBkgColor = '#552222'; this.errorTextColor = '#552222'; - this.useGradient = true; + + this.useGradient = false; this.gradientStart = this.primaryBorderColor; this.gradientStop = this.secondaryBorderColor; this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';