updated styles for shapes

packages/mermaid/src/rendering-util/rendering-elements/shapes/crossedCircle.ts

@@ -2,10 +2,7 @@ import { log } from '$root/logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
 import type { SVG } from '$root/diagram-api/types.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import {
+import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 
@@ -24,8 +21,6 @@ function createLine(r: number) {
 }
 
 export const crossedCircle = (parent: SVG, node: Node) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
-  node.labelStyle = labelStyles;
   node.label = '';
   const shapeSvg = parent
     .insert('g')
@@ -54,10 +49,6 @@ export const crossedCircle = (parent: SVG, node: Node) => {
     crossedCircle.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles && node.look !== 'handDrawn') {
-    crossedCircle.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, crossedCircle);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/filledCircle.ts

@@ -2,17 +2,12 @@ import { log } from '$root/logger.js';
 import { getNodeClasses, updateNodeBounds } from './util.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
-import {
+import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
 
 export const filledCircle = (parent: SVG, node: Node) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
   node.label = '';
-  node.labelStyle = labelStyles;
   const shapeSvg = parent
     .insert('g')
     .attr('class', getNodeClasses(node))
@@ -33,16 +28,12 @@ export const filledCircle = (parent: SVG, node: Node) => {
 
   const filledCircle = shapeSvg.insert(() => circleNode, ':first-child');
 
-  // filledCircle.attr('class', 'basic label-container');
+  filledCircle.attr('class', 'basic label-container');
 
   if (cssStyles && node.look !== 'handDrawn') {
     filledCircle.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles && node.look !== 'handDrawn') {
-    filledCircle.selectAll('path').attr('style', nodeStyles);
-  }
-
   updateNodeBounds(node, filledCircle);
 
   node.intersect = function (point) {

packages/mermaid/src/rendering-util/rendering-elements/shapes/hourglass.ts

@@ -2,23 +2,15 @@ import { log } from '$root/logger.js';
 import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
 import intersect from '../intersect/index.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
-import {
+import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const hourglass = async (parent: SVGAElement, node: Node) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
   node.label = '';
-  node.labelStyle = labelStyles;
   const { shapeSvg } = await labelHelper(parent, node, getNodeClasses(node));
-
   const w = 100;
   const h = 100;
-
   const { cssStyles } = node;
-
   // @ts-ignore - rough is not typed
   const rc = rough.svg(shapeSvg);
   const options = userNodeOverrides(node, {});
@@ -44,16 +36,10 @@ export const hourglass = async (parent: SVGAElement, node: Node) => {
     polygon.selectChildren('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles && node.look !== 'handDrawn') {
-    polygon.selectChildren('path').attr('style', nodeStyles);
-  }
-
   polygon.attr('transform', `translate(${-w / 2}, ${-h / 2})`);
 
   updateNodeBounds(node, polygon);
 
-  // label.attr('transform', `translate(${-bbox.width / 2}, ${(h/2)})`); // To transform text below hourglass shape
-
   node.intersect = function (point) {
     log.info('Pill intersect', node, { points });
     const pos = intersect.polygon(node, points, point);

packages/mermaid/src/rendering-util/rendering-elements/shapes/lightningBolt.ts

@@ -1,19 +1,13 @@
 import { log } from '$root/logger.js';
-import { getNodeClasses, updateNodeBounds } from './util.js';
+import { getNodeClasses, updateNodeBounds, createPathFromPoints } from './util.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
 import type { SVG } from '$root/diagram-api/types.js';
-import {
+import { userNodeOverrides } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import intersect from '../intersect/index.js';
-import { createPathFromPoints } from './util.js';
 
 export const lightningBolt = (parent: SVG, node: Node) => {
-  const { labelStyles, nodeStyles } = styles2String(node);
   node.label = '';
-  node.labelStyle = labelStyles;
   const shapeSvg = parent
     .insert('g')
     .attr('class', getNodeClasses(node))
@@ -50,10 +44,6 @@ export const lightningBolt = (parent: SVG, node: Node) => {
     lightningBolt.selectAll('path').attr('style', cssStyles);
   }
 
-  if (nodeStyles && node.look !== 'handDrawn') {
-    lightningBolt.selectAll('path').attr('style', nodeStyles);
-  }
-
   lightningBolt.attr('transform', `translate(-${width / 2},${-height})`);
 
   updateNodeBounds(node, lightningBolt);

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

@@ -24,11 +24,16 @@ function createInnerPathD(rx: number, ry: number, w: number, h: number) {
 export const tiltedCylinder = async (parent: SVGAElement, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox, label, halfPadding } = await labelHelper(
-  const h = bbox.height + node.padding;
+    parent,
+    node,
+    getNodeClasses(node)
+  );
+  const labelPadding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
+  const h = bbox.height + labelPadding;
   const ry = h / 2;
   const rx = ry / (2.5 + h / 50);
-  const w = bbox.width + rx + node.padding;
+  const w = bbox.width + rx + labelPadding;
   const { cssStyles } = node;
 
   // @ts-ignore - rough is not typed