From b301138d93865e655b7ca590553af3481d35095d Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Fri, 20 Sep 2024 15:45:17 +0530 Subject: [PATCH] neoify icon shape --- cypress/platform/saurabh.html | 36 +++++++++---------- .../rendering-elements/shapes/icon.ts | 11 +++++- .../rendering-elements/shapes/iconCircle.ts | 11 +++++- .../rendering-elements/shapes/iconRounded.ts | 19 +++++++--- .../rendering-elements/shapes/iconSquare.ts | 19 +++++++--- packages/mermaid/src/styles.ts | 10 ++++++ 6 files changed, 78 insertions(+), 28 deletions(-) diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html index 45c350756..ecefa9c08 100644 --- a/cypress/platform/saurabh.html +++ b/cypress/platform/saurabh.html @@ -63,23 +63,21 @@ 
       flowchart TD
-       B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "t", h: 80 }@
-       
-
-       W --> B2
-       X --> B2
-       Y --> B2
-       Z --> B2
-       B2 --sas--> C
-
-
+       B2@{ icon: "fa:bell", form: "square", label: "B2 agsyua duadu", pos: "b" }
- 
-      flowchart TB
-       A --test2--> B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }@
-       B2 --test--> C
-       D --> B2 --> E
-       style B2 fill:#f9f,stroke:#333,stroke-width:4px
+    
+      flowchart TD
+        B2@{ icon: "fa:bell", form: "rounded", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
+  

+    
+      flowchart TD
+        B2@{ icon: "fa:bell", form: "circle", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
+  

+    
+      flowchart TD
+        B2@{ icon: "fa:bell", label: "B2 aiduaid uyawduad uaduabd uyduadb", pos: "b" }
   

     
@@ -125,7 +123,9 @@
         {
           name: 'fa',
           loader: () =>
-            fetch('https://unpkg.com/@iconify-json/fa6-solid/icons.json').then((res) => res.json()),
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
         },
       ]);
       mermaid.parseError = function (err, hash) {
@@ -137,7 +137,7 @@
       mermaid.initialize({
         // theme: 'base',
         // handdrawnSeed: 12,
-        look: 'classic',
+        // look: 'classic',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // 'elk.nodePlacement.strategy': 'SIMPLE',
         // 'elk.nodePlacement.strategy': 'LAYERED',
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
index d7ad58de9..b9bdb06b5 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -55,9 +55,9 @@ export const icon = async (
 
   const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
   const outerShape = shapeSvg.insert(() => outerNode);
+  const iconElem = shapeSvg.append('g');
 
   if (node.icon) {
-    const iconElem = shapeSvg.append('g');
     iconElem.html(
       `${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}`
     );
@@ -71,6 +71,7 @@ export const icon = async (
       `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+    iconElem.attr('class', 'icon');
   }
 
   label.attr(
@@ -83,6 +84,14 @@ export const icon = async (
     `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
   );
 
+  if (stylesMap.get('stroke')) {
+    iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
+  }
+
+  if (stylesMap.get('fill')) {
+    iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
+  }
+
   updateNodeBounds(node, outerShape);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
index 3b624a97f..c810e4a15 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -21,7 +21,7 @@ export const iconCircle = async (
   node.width = Math.max(iconSize, defaultWidth ?? 0);
   const { shapeSvg, bbox, label } = await labelHelper(parent, node, 'icon-shape default');
 
-  const padding = 20;
+  const padding = node.look === 'neo' ? 30 : 20;
   const labelPadding = node.label ? 8 : 0;
 
   const topLabel = node.pos === 't';
@@ -68,6 +68,7 @@ export const iconCircle = async (
     `translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY + labelPadding / 2 : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})`
   );
   iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+  iconElem.attr('class', 'icon');
   label.attr(
     'transform',
     `translate(${-bbox.width / 2},${topLabel ? -diameter / 2 - bbox.height / 2 - labelPadding / 2 : diameter / 2 - bbox.height / 2 + labelPadding / 2})`
@@ -78,6 +79,14 @@ export const iconCircle = async (
     `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
   );
 
+  if (stylesMap.get('stroke')) {
+    iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
+  }
+
+  if (stylesMap.get('fill')) {
+    iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
+  }
+
   updateNodeBounds(node, outerShape);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
index 0f5d6199d..dc7926a41 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts
@@ -28,8 +28,10 @@ export const iconRounded = async (
 
   const topLabel = node.pos === 't';
 
-  const height = iconSize + halfPadding * 2;
-  const width = iconSize + halfPadding * 2;
+  const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
+
+  const height = iconSize + padding * 2;
+  const width = iconSize + padding * 2;
   const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
@@ -60,9 +62,9 @@ export const iconRounded = async (
 
   const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
   const outerShape = shapeSvg.insert(() => outerNode);
+  const iconElem = shapeSvg.append('g');
 
   if (node.icon) {
-    const iconElem = shapeSvg.append('g');
     iconElem.html(
       `${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}`
     );
@@ -73,9 +75,10 @@ export const iconRounded = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - padding - iconY : -outerHeight / 2 + padding - iconY})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+    iconElem.attr('class', 'icon');
   }
 
   label.attr(
@@ -88,6 +91,14 @@ export const iconRounded = async (
     `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
   );
 
+  if (stylesMap.get('stroke')) {
+    iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
+  }
+
+  if (stylesMap.get('fill')) {
+    iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
+  }
+
   updateNodeBounds(node, outerShape);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
index cb465c031..163486768 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -27,8 +27,10 @@ export const iconSquare = async (
 
   const topLabel = node.pos === 't';
 
-  const height = iconSize + halfPadding * 2;
-  const width = iconSize + halfPadding * 2;
+  const padding = node.look === 'neo' ? halfPadding * 2 : halfPadding;
+
+  const height = iconSize + padding * 2;
+  const width = iconSize + padding * 2;
   const { nodeBorder, mainBkg } = themeVariables;
   const { stylesMap } = compileStyles(node);
 
@@ -59,9 +61,9 @@ export const iconSquare = async (
 
   const iconShape = shapeSvg.insert(() => iconNode, ':first-child');
   const outerShape = shapeSvg.insert(() => outerNode);
+  const iconElem = shapeSvg.append('g');
 
   if (node.icon) {
-    const iconElem = shapeSvg.append('g');
     iconElem.html(
       `${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}`
     );
@@ -72,9 +74,10 @@ export const iconSquare = async (
     const iconY = iconBBox.y;
     iconElem.attr(
       'transform',
-      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - halfPadding - iconY : -outerHeight / 2 + halfPadding - iconY})`
+      `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - padding - iconY : -outerHeight / 2 + padding - iconY})`
     );
     iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder);
+    iconElem.attr('class', 'icon');
   }
 
   label.attr(
@@ -87,6 +90,14 @@ export const iconSquare = async (
     `translate(${0},${topLabel ? bbox.height / 2 + labelPadding / 2 : -bbox.height / 2 - labelPadding / 2})`
   );
 
+  if (stylesMap.get('stroke')) {
+    iconElem.selectAll('path').attr('style', `fill: ${stylesMap.get('stroke')}`);
+  }
+
+  if (stylesMap.get('fill')) {
+    iconShape.selectAll('path').attr('style', `stroke: ${stylesMap.get('fill')}`);
+  }
+
   updateNodeBounds(node, outerShape);
 
   node.intersect = function (point) {
diff --git a/packages/mermaid/src/styles.ts b/packages/mermaid/src/styles.ts
index 10525a855..a90c737c7 100644
--- a/packages/mermaid/src/styles.ts
+++ b/packages/mermaid/src/styles.ts
@@ -115,6 +115,16 @@ const getStyles = (
     stroke-width: 1px;
   }
 
+  [data-look="neo"].icon-shape .icon path {
+    fill: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
+    filter: ${options.dropShadow};
+  }
+
+    [data-look="neo"].icon-shape path {
+    stroke: ${options.useGradient ? 'url(' + svgId + '-gradient)' : options.nodeBorder};
+    filter: ${options.dropShadow};
+  }
+
   ${userStyles}
 `;
 };