From 1c105154a601afaa81d181af7c484e4bf1aa371f Mon Sep 17 00:00:00 2001 From: saurabhg772244 Date: Mon, 23 Sep 2024 12:17:42 +0530 Subject: [PATCH] Updated icon shape positions --- cypress/platform/saurabh.html | 14 +++++++++----- .../rendering-elements/shapes/icon.ts | 4 ++-- .../rendering-elements/shapes/iconCircle.ts | 4 ++-- .../rendering-elements/shapes/iconRounded.ts | 4 ++-- .../rendering-elements/shapes/iconSquare.ts | 4 ++-- 5 files changed, 17 insertions(+), 13 deletions(-) diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html index 3c3bdff4e..89b314e68 100644 --- a/cypress/platform/saurabh.html +++ b/cypress/platform/saurabh.html @@ -63,10 +63,14 @@ 
       flowchart LR
-      n21@{ shape: subproc,label: "Untitled Node"}
-      n52@{ shape: internal-storage,label: "Untitled Node"}
-      n53@{ shape: div-rect,label: "Untitled Node"}
-      n54@{ shape: lin-doc,label: "Untitled Node"}
+      A@{ icon: "fa:window-minimize", form: circle }
+      E@{ icon: "fa:window-minimize", form: circle }
+      B@{ icon: "fa:bell", form: circle }
+      B2@{ icon: "fa:bell", form: circle }
+      C@{ icon: "fa:address-book",  form: square  }
+      D@{ icon: "fa:star-half",  form: square  }
+      A --> E
+      B --> B2
@@ -142,7 +146,7 @@ // layout: 'elk', // layout: 'fixed', // htmlLabels: false, - flowchart: { titleTopMargin: 10, htmlLabels: true }, + flowchart: { titleTopMargin: 10, padding: 0, htmlLabels: true }, // fontFamily: 'Caveat', // fontFamily: 'Kalam', fontFamily: 'courier', 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..a3e88d927 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts @@ -49,7 +49,7 @@ export const icon = async ( const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { ...options, - fill: 'none', + fill: 'transparent', stroke: 'none', }); @@ -68,7 +68,7 @@ export const icon = async ( const iconY = iconBBox.y; iconElem.attr( 'transform', - `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : -outerHeight / 2 - iconY})` + `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY : outerHeight / 2 - iconHeight - iconY - bbox.height - labelPadding})` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); } 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..14dab00b7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts @@ -57,7 +57,7 @@ export const iconCircle = async ( const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { ...options, - fill: 'none', + fill: 'transparent', stroke: 'none', }); @@ -65,7 +65,7 @@ export const iconCircle = async ( const outerShape = shapeSvg.insert(() => outerNode); iconElem.attr( 'transform', - `translate(${-iconWidth / 2 - iconX},${topLabel ? diameter / 2 - iconHeight - padding + bbox.height / 2 - iconY + labelPadding / 2 : -diameter / 2 + padding - bbox.height / 2 - labelPadding / 2 - iconY})` + `translate(${-iconWidth / 2 - iconX},${topLabel ? outerHeight / 2 - iconHeight - iconY - padding : outerHeight / 2 - iconHeight - iconY - padding - bbox.height - labelPadding})` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); label.attr( 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..a0e7e3911 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconRounded.ts @@ -54,7 +54,7 @@ export const iconRounded = async ( const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { ...options, - fill: 'none', + fill: 'transparent', stroke: 'none', }); @@ -73,7 +73,7 @@ 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 - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); } 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..53025581b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts @@ -53,7 +53,7 @@ export const iconSquare = async ( const outerNode = rc.rectangle(-outerWidth / 2, -outerHeight / 2, outerWidth, outerHeight, { ...options, - fill: 'none', + fill: 'transparent', stroke: 'none', }); @@ -72,7 +72,7 @@ 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 - iconY - halfPadding : outerHeight / 2 - iconHeight - iconY - halfPadding - bbox.height - labelPadding})` ); iconElem.selectAll('path').attr('fill', stylesMap.get('stroke') || nodeBorder); }