From b7fd21e17a0f32b6298e16a0c2263428f71ca84a Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Fri, 6 Sep 2024 10:17:24 +0530
Subject: [PATCH] Added basic for forms

---
 cypress/platform/saurabh.html                 | 16 +++-
 .../mermaid/src/diagrams/flowchart/flowDb.ts  | 18 ++++-
 .../mermaid/src/diagrams/flowchart/types.ts   |  2 +-
 .../rendering-elements/nodes.js               |  4 +-
 .../rendering-elements/shapes/icon.ts         | 66 ++++++++++++++++
 .../rendering-elements/shapes/iconCircle.ts   | 76 ++++++++++---------
 .../rendering-elements/shapes/iconSquare.ts   | 55 +++++++-------
 .../mermaid/src/rendering-util/types.d.ts     |  1 +
 packages/mermaid/src/types.ts                 |  2 +
 9 files changed, 173 insertions(+), 67 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index 938e46a7f..f074a9802 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -63,7 +63,17 @@
   <body>
     <pre id="diagram4" class="mermaid">
       flowchart
-       B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@ 
+       A --> B2@{ icon: "fa:image", form: "square", label: "test augfuyfavf ydvaubfuac" }@ --> C
+  </pre
+    >
+    <pre id="diagram5" class="mermaid">
+      flowchart
+       A --> B2@{ icon: "fa:image", form: "circle", label: "test augfuyfavf ydvaubfuac" }@ --> C
+  </pre
+    >
+    <pre id="diagram6" class="mermaid">
+      flowchart
+       A --> B2@{ icon: "fa:image", label: "test augfuyfavf ydvaubfuac" }@ --> C
   </pre
     >
     <script type="module">
@@ -93,7 +103,7 @@
       mermaid.initialize({
         // theme: 'base',
         // handdrawnSeed: 12,
-        look: 'handDrawn',
+        // look: 'handDrawn',
         // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
         // 'elk.nodePlacement.strategy': 'SIMPLE',
         // 'elk.nodePlacement.strategy': 'LAYERED',
@@ -102,7 +112,7 @@
         // layout: 'elk',
         // layout: 'fixed',
         // htmlLabels: false,
-        flowchart: { titleTopMargin: 10, padding: 5 },
+        flowchart: { titleTopMargin: 10, padding: 5, htmlLables: true },
         // fontFamily: 'Caveat',
         fontFamily: 'Kalam',
         // fontFamily: 'courier',
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index 5d6632159..020350a12 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -146,6 +146,15 @@ export const addVertex = function (
     }
     if (doc?.icon) {
       vertex.icon = doc?.icon;
+      if (vertex.text === id) {
+        vertex.text = '';
+      }
+    }
+    if (doc?.form) {
+      vertex.form = doc?.form;
+    }
+    if (doc?.pos) {
+      vertex.pos = doc?.pos;
     }
   }
 };
@@ -796,7 +805,13 @@ export const lex = {
 
 const getTypeFromVertex = (vertex: FlowVertex) => {
   if (vertex?.icon) {
-    return 'iconCircle';
+    if (vertex.form === 'circle') {
+      return 'iconCircle';
+    }
+    if (vertex.form === 'square') {
+      return 'iconSquare';
+    }
+    return 'icon';
   }
   if (vertex.type === 'square') {
     return 'squareRect';
@@ -864,6 +879,7 @@ const addNodeFromVertex = (
       linkTarget: vertex.linkTarget,
       tooltip: getTooltip(vertex.id),
       icon: vertex.icon,
+      pos: vertex.pos,
     });
   }
 };
diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts
index 5d2075f09..a1778e161 100644
--- a/packages/mermaid/src/diagrams/flowchart/types.ts
+++ b/packages/mermaid/src/diagrams/flowchart/types.ts
@@ -13,7 +13,7 @@ export interface FlowVertex {
   type?: string;
   icon?: string;
   form?: string;
-  pos?: 't';
+  pos?: 't' | 'b';
 }
 
 export interface FlowText {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
index 7a1cd3443..271144b91 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -53,13 +53,13 @@ import { curlyBraceRight } from './shapes/curlyBraceRight.js';
 import { curlyBraces } from './shapes/curlyBraces.js';
 import { iconSquare } from './shapes/iconSquare.js';
 import { iconCircle } from './shapes/iconCircle.js';
+import { icon } from './shapes/icon.js';
 
 //Use these names as the left side to render shapes.
 const shapes = {
   // States
   state,
   stateStart,
-  iconCircle,
   'small-circle': stateStart,
   'sm-circ': stateStart,
   start: stateStart,
@@ -228,6 +228,8 @@ const shapes = {
   'brace-r': curlyBraceRight,
   curlyBraces,
   iconSquare,
+  iconCircle,
+  icon,
 };
 
 const nodeElems = new Map();
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
new file mode 100644
index 000000000..c7ac6acc1
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/icon.ts
@@ -0,0 +1,66 @@
+import { log } from '$root/logger.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
+import type { Node } from '$root/rendering-util/types.d.ts';
+import type { SVG } from '$root/diagram-api/types.js';
+import { styles2String } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import intersect from '../intersect/index.js';
+import { getIconSVG } from '$root/rendering-util/icons.js';
+
+export const icon = async (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.labelStyle = labelStyles;
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    getNodeClasses(node)
+  );
+
+  const { cssStyles } = node;
+  const topLabel = node.pos === 't';
+  const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
+  const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
+
+  const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
+  const width = Math.max(labelWidth, iconSize);
+  const height = labelHeight + iconSize + halfPadding * 2;
+
+  const points = [
+    { x: 0, y: 0 },
+    { x: 0, y: height },
+    { x: width, y: height },
+    { x: width, y: 0 },
+  ];
+
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    iconElem.attr(
+      'transform',
+      `translate(${0}, ${topLabel ? labelHeight - halfPadding : 0 + halfPadding * 2})`
+    );
+  }
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    shapeSvg.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    shapeSvg.selectAll('path').attr('style', nodeStyles);
+  }
+
+  label.attr(
+    'transform',
+    `translate(${width / 2 - labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${(topLabel ? 0 : iconSize) + halfPadding * 2})`
+  );
+  updateNodeBounds(node, shapeSvg);
+
+  node.intersect = function (point) {
+    log.info('iconSquare intersect', node, point);
+    const pos = intersect.polygon(node, points, point);
+    return pos;
+  };
+
+  return shapeSvg;
+};
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 f278d9553..586cc29f2 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconCircle.ts
@@ -1,15 +1,16 @@
 import { log } from '$root/logger.js';
-import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
-import intersect from '../intersect/index.js';
+import { getNodeClasses, labelHelper, updateNodeBounds } from './util.js';
 import type { Node } from '$root/rendering-util/types.d.ts';
+import type { SVG } from '$root/diagram-api/types.js';
 import {
   styles2String,
   userNodeOverrides,
 } from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
 import rough from 'roughjs';
+import intersect from '../intersect/index.js';
 import { getIconSVG } from '$root/rendering-util/icons.js';
 
-export const iconCircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {
+export const iconCircle = async (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
   const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
@@ -18,51 +19,58 @@ export const iconCircle = async (parent: SVGAElement, node: Node): Promise<SVGAE
     getNodeClasses(node)
   );
 
-  let width = Math.max(bbox.width + (node.padding ?? 0));
-
-  if (node.width) {
-    width = node.width + (node.padding ?? 0);
-  }
-
-  const radius = width / 2 + halfPadding;
-
-  let circleElem;
   const { cssStyles } = node;
+  // const topLabel = node.pos === 't';
+  const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
+  const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
 
-  if (node.look === 'handDrawn') {
-    // @ts-ignore - rough is not typed
-    const rc = rough.svg(shapeSvg);
-    const options = userNodeOverrides(node, {});
-    const roughNode = rc.circle(0, 0, radius * 2, options);
+  const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
+  const radius = iconSize * 1.5 + halfPadding * 2;
 
-    circleElem = shapeSvg.insert(() => roughNode, ':first-child');
-    circleElem.attr('class', 'basic label-container').attr('style', cssStyles);
-  } else {
-    circleElem = shapeSvg
-      .insert('circle', ':first-child')
-      .attr('class', 'basic label-container')
-      .attr('style', nodeStyles)
-      .attr('r', radius)
-      .attr('cx', 0)
-      .attr('cy', 0);
+  // @ts-ignore - rough is not typed
+  const rc = rough.svg(shapeSvg);
+  const options = userNodeOverrides(node, {});
+
+  if (node.look !== 'handDrawn') {
+    options.roughness = 0;
+    options.fillStyle = 'solid';
   }
 
-  // Position label at the top
-  label.attr('transform', `translate(0, ${-radius + halfPadding})`);
+  const roughNode = rc.circle(0, 0, radius, options);
+  const point = rc.circle(0, 0, 2, options);
+
+  const iconShape = shapeSvg.insert(() => roughNode, ':first-child');
+  iconShape.insert(() => point);
 
   if (node.icon) {
     const iconElem = shapeSvg.append('g');
     iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: radius + bbox.height, width: radius + bbox.height, fallbackPrefix: '' })}</g>`
+      `<g>${await getIconSVG(node.icon, { height: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    iconElem.attr(
+      'transform',
+      `translate(${-iconElem.node().getBBox().width / 2}, ${-iconElem.node().getBBox().height / 2 - labelHeight / 2 + halfPadding})`
     );
-    iconElem.attr('transform', `translate(${-radius / 2}, ${-radius / 2})`);
   }
 
-  updateNodeBounds(node, circleElem);
+  if (cssStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', cssStyles);
+  }
+
+  if (nodeStyles && node.look !== 'handDrawn') {
+    iconShape.selectAll('path').attr('style', nodeStyles);
+  }
+
+  label.attr(
+    'transform',
+    `translate(${-label.node().getBBox().width / 2},${iconSize / 2 - label.node().getBBox().height / 2 - halfPadding})`
+  );
+  updateNodeBounds(node, iconShape);
 
   node.intersect = function (point) {
-    log.info('Circle intersect', node, radius, point);
-    return intersect.circle(node, radius, point);
+    log.info('iconSquare intersect', node, point);
+    const pos = intersect.circle(node, radius, point);
+    return pos;
   };
 
   return shapeSvg;
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 9599f0407..1d0ce9135 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -14,28 +14,26 @@ import { getIconSVG } from '$root/rendering-util/icons.js';
 export const iconSquare = async (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);
   node.labelStyle = labelStyles;
-  const { shapeSvg, bbox, label } = await labelHelper(parent, node, getNodeClasses(node));
+  const { shapeSvg, bbox, halfPadding, label } = await labelHelper(
+    parent,
+    node,
+    getNodeClasses(node)
+  );
 
   const { cssStyles } = node;
+  const topLabel = node.pos === 't';
+  const labelWidth = Math.max(bbox.width + halfPadding * 2, node?.width ?? 0);
+  const labelHeight = Math.max(bbox.height + halfPadding * 2, node?.height ?? 0);
 
-  let width = Math.max(bbox.width + (node.padding ?? 0));
-  let height = Math.max(bbox.height + (node.padding ?? 0));
-
-  if (node.width) {
-    width = node.width + (node.padding ?? 0);
-  }
-
-  if (node.height) {
-    height = node.height + (node.padding ?? 0);
-  }
-
-  const iconSize = Math.min(width, height);
+  const iconSize = Math.max(labelHeight - halfPadding, labelWidth - halfPadding, 48);
+  const width = Math.max(labelWidth, iconSize);
+  const height = labelHeight + iconSize + halfPadding * 2;
 
   const points = [
     { x: 0, y: 0 },
+    { x: 0, y: height },
+    { x: width, y: height },
     { x: width, y: 0 },
-    { x: width, y: height + iconSize + bbox.height + 5 },
-    { x: 0, y: height + iconSize + bbox.height + 5 },
   ];
 
   // @ts-ignore - rough is not typed
@@ -52,6 +50,17 @@ export const iconSquare = async (parent: SVG, node: Node) => {
 
   const iconShape = shapeSvg.insert(() => lineNode, ':first-child');
 
+  if (node.icon) {
+    const iconElem = shapeSvg.append('g');
+    iconElem.html(
+      `<g>${await getIconSVG(node.icon, { height: iconSize, width: iconSize, fallbackPrefix: '' })}</g>`
+    );
+    iconElem.attr(
+      'transform',
+      `translate(${0}, ${topLabel ? labelHeight - halfPadding : 0 + halfPadding * 2})`
+    );
+  }
+
   if (cssStyles && node.look !== 'handDrawn') {
     iconShape.selectAll('path').attr('style', cssStyles);
   }
@@ -60,20 +69,12 @@ export const iconSquare = async (parent: SVG, node: Node) => {
     iconShape.selectAll('path').attr('style', nodeStyles);
   }
 
-  iconShape.attr('transform', `translate(${-width / 2},${-height / 2})`);
-
-  label.attr('transform', `translate(${-width / 2},${-height / 2})`);
-
+  label.attr(
+    'transform',
+    `translate(${width / 2 - labelWidth / 2 + halfPadding - (bbox.x - (bbox.left ?? 0))},${(topLabel ? 0 : iconSize) + halfPadding * 2})`
+  );
   updateNodeBounds(node, iconShape);
 
-  if (node.icon) {
-    const iconElem = shapeSvg.append('g');
-    iconElem.html(
-      `<g>${await getIconSVG(node.icon, { height: height + iconSize, fallbackPrefix: '' })}</g>`
-    );
-    iconElem.attr('transform', `translate(${-iconSize}, ${-iconSize / 2 + bbox.height})`);
-  }
-
   node.intersect = function (point) {
     log.info('iconSquare intersect', node, point);
     const pos = intersect.polygon(node, points, point);
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index 2a47481e7..adef02d6d 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -66,6 +66,7 @@ interface Node {
 
   look?: string;
   icon?: string;
+  pos?: 't' | 'b';
 }
 
 // Common properties for any edge in the system
diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts
index 293276d10..8181f59ca 100644
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -2,6 +2,8 @@ export interface NodeMetaData {
   shape?: string;
   label?: string;
   icon?: string;
+  form?: string;
+  pos?: 't' | 'b';
 }
 export interface Point {
   x: number;
