From 8883008ca1b037dbb78e0e1b3105ea29ee5af5a1 Mon Sep 17 00:00:00 2001
From: saurabhg772244 <saurabh@mermaidchart.com>
Date: Thu, 5 Sep 2024 13:21:58 +0530
Subject: [PATCH] Added basic for image shape

---
 cypress/platform/saurabh.html                 | 24 ++++---
 .../mermaid/src/diagrams/flowchart/flowDb.ts  |  7 ++
 .../mermaid/src/diagrams/flowchart/types.ts   |  3 +
 .../rendering-elements/nodes.js               |  4 ++
 .../rendering-elements/shapes/iconSquare.ts   | 69 +++++++++++++++++++
 .../mermaid/src/rendering-util/types.d.ts     |  1 +
 packages/mermaid/src/types.ts                 |  1 +
 7 files changed, 100 insertions(+), 9 deletions(-)
 create mode 100644 packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
diff --git a/cypress/platform/saurabh.html b/cypress/platform/saurabh.html
index 329189450..af4d9513b 100644
--- a/cypress/platform/saurabh.html
+++ b/cypress/platform/saurabh.html
@@ -62,22 +62,28 @@
 
   <body>
     <pre id="diagram4" class="mermaid">
-      ---
-        config:
-          flowchart:
-            htmlLabels: true
-      ---
       flowchart
-      classDef customClazz fill:#bbf,stroke:#f66,stroke-width:4px,color:#000,stroke-dasharray: 5 5
-      A1 --> B1@{ shape: taggedWaveEdgedRectangle, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C1
-      A2 --> B2@{ shape: taggedRect, label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ --> C2
-      B1:::customClazz
+       B2@{ icon: "fa:image", label: "test augfuyfavf yafuabffaev ydvaubfuac" }@ 
   </pre
     >
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       import layouts from './mermaid-layout-elk.esm.mjs';
       mermaid.registerLayoutLoaders(layouts);
+      mermaid.registerIconPacks([
+        {
+          name: 'logos',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()),
+        },
+        {
+          name: 'fa',
+          loader: () =>
+            fetch('https://unpkg.com/@iconify-json/fa6-regular/icons.json').then((res) =>
+              res.json()
+            ),
+        },
+      ]);
       mermaid.parseError = function (err, hash) {
         console.error('Mermaid error: ', err);
       };
diff --git a/packages/mermaid/src/diagrams/flowchart/flowDb.ts b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
index a0a2f5656..cf0c4dc4d 100644
--- a/packages/mermaid/src/diagrams/flowchart/flowDb.ts
+++ b/packages/mermaid/src/diagrams/flowchart/flowDb.ts
@@ -144,6 +144,9 @@ export const addVertex = function (
     if (doc?.label) {
       vertex.text = doc?.label;
     }
+    if (doc?.icon) {
+      vertex.icon = doc?.icon;
+    }
   }
 };
 
@@ -792,6 +795,9 @@ export const lex = {
 };
 
 const getTypeFromVertex = (vertex: FlowVertex) => {
+  if (vertex?.icon) {
+    return 'iconSquare';
+  }
   if (vertex.type === 'square') {
     return 'squareRect';
   }
@@ -857,6 +863,7 @@ const addNodeFromVertex = (
       link: vertex.link,
       linkTarget: vertex.linkTarget,
       tooltip: getTooltip(vertex.id),
+      icon: vertex.icon,
     });
   }
 };
diff --git a/packages/mermaid/src/diagrams/flowchart/types.ts b/packages/mermaid/src/diagrams/flowchart/types.ts
index ee64ae56b..5d2075f09 100644
--- a/packages/mermaid/src/diagrams/flowchart/types.ts
+++ b/packages/mermaid/src/diagrams/flowchart/types.ts
@@ -11,6 +11,9 @@ export interface FlowVertex {
   styles: string[];
   text?: string;
   type?: string;
+  icon?: string;
+  form?: string;
+  pos?: 't';
 }
 
 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 542539133..d0a9f6811 100644
--- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
+++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js
@@ -51,6 +51,7 @@ import { taggedWaveEdgedRectangle } from './shapes/taggedWaveEdgedRectangle.js';
 import { curlyBraceLeft } from './shapes/curlyBraceLeft.js';
 import { curlyBraceRight } from './shapes/curlyBraceRight.js';
 import { curlyBraces } from './shapes/curlyBraces.js';
+import { iconSquare } from './shapes/iconSquare.js';
 
 //Use these names as the left side to render shapes.
 const shapes = {
@@ -224,6 +225,7 @@ const shapes = {
   curlyBraceRight,
   'brace-r': curlyBraceRight,
   curlyBraces,
+  iconSquare,
 };
 
 const nodeElems = new Map();
@@ -232,6 +234,8 @@ export const insertNode = async (elem, node, dir) => {
   let newEl;
   let el;
 
+  // console.log("node is ", node.icon, node.shape)
+
   //special check for rect shape (with or without rounded corners)
   if (node.shape === 'rect') {
     if (node.rx && node.ry) {
diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
new file mode 100644
index 000000000..9b0acc53c
--- /dev/null
+++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/iconSquare.ts
@@ -0,0 +1,69 @@
+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 {
+  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 iconSquare = (parent: SVG, node: Node) => {
+  const { labelStyles, nodeStyles } = styles2String(node);
+  node.label = '';
+  node.labelStyle = labelStyles;
+  const shapeSvg = parent
+    .insert('g')
+    .attr('class', getNodeClasses(node))
+    .attr('id', node.domId ?? node.id);
+  const { cssStyles } = node;
+  const width = Math.max(35, node?.width ?? 0);
+  const height = Math.max(35, node?.height ?? 0);
+  const gap = 7;
+
+  const points = [
+    { x: width, y: 0 },
+    { x: 0, y: height + gap / 2 },
+    { x: width - 2 * gap, y: height + gap / 2 },
+    { x: 0, y: 2 * height },
+    { x: width, y: height - gap / 2 },
+    { x: 2 * gap, y: height - gap / 2 },
+  ];
+
+  // @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';
+  }
+
+  const linePath = createPathFromPoints(points);
+  const lineNode = rc.path(linePath, options);
+
+  const lightningBolt = shapeSvg.insert(() => lineNode, ':first-child');
+
+  if (cssStyles && node.look !== 'handDrawn') {
+    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);
+
+  node.intersect = function (point) {
+    log.info('lightningBolt intersect', node, point);
+    const pos = intersect.polygon(node, points, point);
+
+    return pos;
+  };
+
+  return shapeSvg;
+};
diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.d.ts
index 67f8de40e..2a47481e7 100644
--- a/packages/mermaid/src/rendering-util/types.d.ts
+++ b/packages/mermaid/src/rendering-util/types.d.ts
@@ -65,6 +65,7 @@ interface Node {
   y?: number;
 
   look?: string;
+  icon?: string;
 }
 
 // Common properties for any edge in the system
diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts
index 05c2defe2..293276d10 100644
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -1,6 +1,7 @@
 export interface NodeMetaData {
   shape?: string;
   label?: string;
+  icon?: string;
 }
 export interface Point {
   x: number;
