From dce8149fe6d7ae3485a05dfbe758c156661fa18c Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 19 Apr 2024 12:10:49 +0530
Subject: [PATCH 01/12] make drawPopup and popupMenuToggle type safe and
 improve the function readability

---
 demos/sequence.html                           | 13 +++
 .../sequence/{svgDraw.js => svgDraw.ts}       | 89 ++++++++++---------
 .../mermaid/src/diagrams/sequence/types.ts    |  6 +-
 3 files changed, 64 insertions(+), 44 deletions(-)
 rename packages/mermaid/src/diagrams/sequence/{svgDraw.js => svgDraw.ts} (96%)

diff --git a/demos/sequence.html b/demos/sequence.html
index abdc84f044..e0a30e314e 100644
--- a/demos/sequence.html
+++ b/demos/sequence.html
@@ -238,6 +238,19 @@ <h1>Sequence diagram demos</h1>
       Alice-xJohn: Hello John, how are you?
       John--xAlice: Great!
     </pre>
+    <pre class="mermaid">
+      sequenceDiagram
+    Alice->>Bob: Hello Bob, how are you ?
+    Bob->>Alice: Fine, thank you. And you?
+    create participant Carl
+    Alice->>Carl: Hi Carl!
+    create actor D as Donald
+    Carl->>D: Hi!
+    destroy Carl
+    Alice-xCarl: We are too many
+    destroy Bob
+    Bob->>Alice: I agree
+    </pre>
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
similarity index 96%
rename from packages/mermaid/src/diagrams/sequence/svgDraw.js
rename to packages/mermaid/src/diagrams/sequence/svgDraw.ts
index 84351ea5ad..5252024314 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.js
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -3,6 +3,7 @@ import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
+import { Actor } from './types.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
 const TOP_ACTOR_CLASS = 'actor-top';
@@ -14,33 +15,41 @@ export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
 };
 
-export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMenus) {
-  if (actor.links === undefined || actor.links === null || Object.keys(actor.links).length === 0) {
+interface TextAttrs {
+  class?: string;
+  fill?: string;
+  stroke?: string;
+  'font-size'?: string;
+  'font-family'?: string;
+  'font-weight'?: string;
+}
+
+export const drawPopup = function (
+  elem: SVGGElement,
+  actor: Actor,
+  minMenuWidth: number,
+  textAttrs: TextAttrs,
+  forceMenus: boolean
+): { height: number; width: number } {
+  if (!actor.links) {
     return { height: 0, width: 0 };
   }
 
-  const links = actor.links;
-  const actorCnt = actor.actorCnt;
-  const rectData = actor.rectData;
+  const { links, actorCnt, rectData } = actor;
 
-  var displayValue = 'none';
-  if (forceMenus) {
-    displayValue = 'block !important';
-  }
+  const displayValue = forceMenus ? 'block !important' : 'none';
 
   const g = elem.append('g');
-  g.attr('id', 'actor' + actorCnt + '_popup');
+  g.attr('id', `actor${actorCnt}_popup`);
   g.attr('class', 'actorPopupMenu');
   g.attr('display', displayValue);
-  var actorClass = '';
-  if (rectData.class !== undefined) {
-    actorClass = ' ' + rectData.class;
-  }
+  const actorClass = rectData.class ? ` ${rectData.class}` : '';
 
-  let menuWidth = rectData.width > minMenuWidth ? rectData.width : minMenuWidth;
+  const menuWidth = Math.max(rectData.width, minMenuWidth);
+  const menuHeight = 20;
 
   const rectElem = g.append('rect');
-  rectElem.attr('class', 'actorPopupMenuPanel' + actorClass);
+  rectElem.attr('class', `actorPopupMenuPanel${actorClass}`);
   rectElem.attr('x', rectData.x);
   rectElem.attr('y', rectData.height);
   rectElem.attr('fill', rectData.fill);
@@ -49,27 +58,27 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   rectElem.attr('height', rectData.height);
   rectElem.attr('rx', rectData.rx);
   rectElem.attr('ry', rectData.ry);
-  if (links != null) {
-    var linkY = 20;
-    for (let key in links) {
-      var linkElem = g.append('a');
-      var sanitizedLink = sanitizeUrl(links[key]);
-      linkElem.attr('xlink:href', sanitizedLink);
-      linkElem.attr('target', '_blank');
-
-      _drawMenuItemTextCandidateFunc(textAttrs)(
-        key,
-        linkElem,
-        rectData.x + 10,
-        rectData.height + linkY,
-        menuWidth,
-        20,
-        { class: 'actor' },
-        textAttrs
-      );
 
-      linkY += 30;
-    }
+  let linkY = 20;
+  const offsetX = 10;
+  const offsetY = 30;
+  for (const key in links) {
+    const linkElem = g.append('a');
+    const sanitizedLink = sanitizeUrl(links[key]);
+    linkElem.attr('xlink:href', sanitizedLink);
+    linkElem.attr('target', '_blank');
+    _drawMenuItemTextCandidateFunc(textAttrs)(
+      key,
+      linkElem,
+      rectData.x + offsetX,
+      rectData.height + linkY,
+      menuWidth,
+      menuHeight,
+      { class: 'actor' },
+      textAttrs
+    );
+
+    linkY += offsetY;
   }
 
   rectElem.attr('height', linkY);
@@ -77,12 +86,8 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
   return { height: rectData.height + linkY, width: menuWidth };
 };
 
-const popupMenuToggle = function (popId) {
-  return (
-    "var pu = document.getElementById('" +
-    popId +
-    "'); if (pu != null) { pu.style.display = pu.style.display == 'block' ? 'none' : 'block'; }"
-  );
+const popupMenuToggle = function (elementId: string) {
+  return `const popupMenu = document.getElementById('${elementId}'); if (popupMenu != null) { popupMenu.style.display = popupMenu.style.display == 'block' ? 'none' : 'block'; }`;
 };
 
 export const drawKatex = async function (elem, textData, msgModel = null) {
diff --git a/packages/mermaid/src/diagrams/sequence/types.ts b/packages/mermaid/src/diagrams/sequence/types.ts
index 754df95e3f..181c48cef5 100644
--- a/packages/mermaid/src/diagrams/sequence/types.ts
+++ b/packages/mermaid/src/diagrams/sequence/types.ts
@@ -1,3 +1,5 @@
+import type { RectData } from '../common/commonTypes';
+
 export interface Box {
   name: string;
   wrap: boolean;
@@ -12,10 +14,10 @@ export interface Actor {
   wrap: boolean;
   prevActor?: string;
   nextActor?: string;
-  links: Record<string, unknown>;
+  links: Record<string, string>;
   properties: Record<string, unknown>;
   actorCnt: number | null;
-  rectData: unknown;
+  rectData: RectData;
   type: string;
 }
 

From 72b971cceb56bf26138c6b6b2f217748d62132d6 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 19 Apr 2024 12:43:06 +0530
Subject: [PATCH 02/12] make drawRect type safe

---
 .../mermaid/src/diagrams/sequence/svgDraw.ts   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index 5252024314..a119595ea1 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -3,7 +3,9 @@ import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
-import { Actor } from './types.js';
+import type { Actor } from './types.js';
+import type { D3RectElement, RectData } from '../common/commonTypes.js';
+import type { SVG } from '../../diagram-api/types.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
 const TOP_ACTOR_CLASS = 'actor-top';
@@ -11,7 +13,7 @@ const BOTTOM_ACTOR_CLASS = 'actor-bottom';
 const ACTOR_BOX_CLASS = 'actor-box';
 const ACTOR_MAN_FIGURE_CLASS = 'actor-man';
 
-export const drawRect = function (elem, rectData) {
+export const drawRect = (elem: SVG, rectData: RectData): D3RectElement => {
   return svgDrawCommon.drawRect(elem, rectData);
 };
 
@@ -24,13 +26,13 @@ interface TextAttrs {
   'font-weight'?: string;
 }
 
-export const drawPopup = function (
-  elem: SVGGElement,
+export const drawPopup = (
+  elem: SVG,
   actor: Actor,
   minMenuWidth: number,
   textAttrs: TextAttrs,
   forceMenus: boolean
-): { height: number; width: number } {
+): { height: number; width: number } => {
   if (!actor.links) {
     return { height: 0, width: 0 };
   }
@@ -56,8 +58,8 @@ export const drawPopup = function (
   rectElem.attr('stroke', rectData.stroke);
   rectElem.attr('width', menuWidth);
   rectElem.attr('height', rectData.height);
-  rectElem.attr('rx', rectData.rx);
-  rectElem.attr('ry', rectData.ry);
+  rectElem.attr('rx', rectData.rx || 0);
+  rectElem.attr('ry', rectData.ry || 0);
 
   let linkY = 20;
   const offsetX = 10;
@@ -86,7 +88,7 @@ export const drawPopup = function (
   return { height: rectData.height + linkY, width: menuWidth };
 };
 
-const popupMenuToggle = function (elementId: string) {
+const popupMenuToggle = (elementId: string) => {
   return `const popupMenu = document.getElementById('${elementId}'); if (popupMenu != null) { popupMenu.style.display = popupMenu.style.display == 'block' ? 'none' : 'block'; }`;
 };
 

From 9ade512390808c0c01d1bfc1b21ec01f75e92524 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 19 Apr 2024 13:33:23 +0530
Subject: [PATCH 03/12] make drawKatex typesafe

---
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 48 ++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index a119595ea1..0fd705a91a 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -4,7 +4,7 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
 import type { Actor } from './types.js';
-import type { D3RectElement, RectData } from '../common/commonTypes.js';
+import type { D3RectElement, RectData, TextData } from '../common/commonTypes.js';
 import type { SVG } from '../../diagram-api/types.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
@@ -92,8 +92,20 @@ const popupMenuToggle = (elementId: string) => {
   return `const popupMenu = document.getElementById('${elementId}'); if (popupMenu != null) { popupMenu.style.display = popupMenu.style.display == 'block' ? 'none' : 'block'; }`;
 };
 
-export const drawKatex = async function (elem, textData, msgModel = null) {
-  let textElem = elem.append('foreignObject');
+interface MessageModel {
+  startx: number;
+  stopx: number;
+  starty: number;
+  stopy: number;
+  sequenceIndex: number;
+  sequenceVisible: boolean;
+}
+export const drawKatex = async (
+  elem: SVG,
+  textData: TextData,
+  msgModel: MessageModel | null = null
+) => {
+  const textElem = elem.append('foreignObject');
   const lines = await renderKatex(textData.text, configApi.getConfig());
 
   const divElem = textElem
@@ -101,32 +113,36 @@ export const drawKatex = async function (elem, textData, msgModel = null) {
     .attr('style', 'width: fit-content;')
     .attr('xmlns', 'http://www.w3.org/1999/xhtml')
     .html(lines);
-  const dim = divElem.node().getBoundingClientRect();
 
-  textElem.attr('height', Math.round(dim.height)).attr('width', Math.round(dim.width));
+  const node = divElem?.node();
+  if (!(node instanceof Element)) {
+    return [textElem];
+  }
+
+  const dims = node.getBoundingClientRect();
+
+  textElem.attr('height', Math.round(dims.height)).attr('width', Math.round(dims.width));
 
   if (textData.class === 'noteText') {
-    const rectElem = elem.node().firstChild;
+    const rectElem = elem?.node()?.firstChild as SVGRectElement;
 
-    rectElem.setAttribute('height', dim.height + 2 * textData.textMargin);
+    rectElem.setAttribute('height', `${dims.height + 2 * textData.textMargin}`);
     const rectDim = rectElem.getBBox();
 
     textElem
-      .attr('x', Math.round(rectDim.x + rectDim.width / 2 - dim.width / 2))
-      .attr('y', Math.round(rectDim.y + rectDim.height / 2 - dim.height / 2));
+      .attr('x', Math.round(rectDim.x + rectDim.width / 2 - dims.width / 2))
+      .attr('y', Math.round(rectDim.y + rectDim.height / 2 - dims.height / 2));
   } else if (msgModel) {
-    let { startx, stopx, starty } = msgModel;
+    let { startx, stopx } = msgModel;
     if (startx > stopx) {
-      const temp = startx;
-      startx = stopx;
-      stopx = temp;
+      [startx, stopx] = [stopx, startx];
     }
 
-    textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - dim.width / 2));
+    textElem.attr('x', Math.round(startx + Math.abs(startx - stopx) / 2 - dims.width / 2));
     if (textData.class === 'loopText') {
-      textElem.attr('y', Math.round(starty));
+      textElem.attr('y', Math.round(msgModel.starty));
     } else {
-      textElem.attr('y', Math.round(starty - dim.height));
+      textElem.attr('y', Math.round(msgModel.starty - dims.height));
     }
   }
 

From 067bafe4559e77dc7ba1e1f6381a968b514a9ac9 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 19 Apr 2024 14:19:06 +0530
Subject: [PATCH 04/12] make drawText and more type safe changes

---
 .../src/diagrams/common/commonTypes.ts        |  14 +-
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 173 ++++++++++--------
 2 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
index 36473f3e42..f6b698ec58 100644
--- a/packages/mermaid/src/diagrams/common/commonTypes.ts
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -32,20 +32,22 @@ export interface TextData {
   class?: string;
 }
 
-export interface TextObject {
-  x: number;
-  y: number;
+export interface TextObject extends TextData {
+  dy?: string;
   width: number;
   height: number;
   fill?: string;
-  anchor?: string;
   'text-anchor': string;
   style: string;
-  textMargin: number;
   rx: number;
   ry: number;
   tspan: boolean;
-  valign?: string;
+  valign: string;
+  dominantBaseline: string;
+  alignmentBaseline: string;
+  fontSize: string;
+  fontWeight: string;
+  fontFamily: string;
 }
 
 export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index 0fd705a91a..ec465f1896 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -4,7 +4,13 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
 import type { Actor } from './types.js';
-import type { D3RectElement, RectData, TextData } from '../common/commonTypes.js';
+import type {
+  D3RectElement,
+  D3TextElement,
+  RectData,
+  TextData,
+  TextObject,
+} from '../common/commonTypes.js';
 import type { SVG } from '../../diagram-api/types.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
@@ -149,128 +155,129 @@ export const drawKatex = async (
   return [textElem];
 };
 
-export const drawText = function (elem, textData) {
+export const drawText = function (elem: SVG, textObject: TextObject): D3TextElement[] {
   let prevTextHeight = 0;
   let textHeight = 0;
-  const lines = textData.text.split(common.lineBreakRegex);
+  const lines = textObject.text.split(common.lineBreakRegex);
 
-  const [_textFontSize, _textFontSizePx] = parseFontSize(textData.fontSize);
+  const [_textFontSize, _textFontSizePx] = parseFontSize(textObject.fontSize);
 
-  let textElems = [];
+  const textElems: D3TextElement[] = [];
   let dy = 0;
-  let yfunc = () => textData.y;
+  let yfunc = () => textObject.y;
   if (
-    textData.valign !== undefined &&
-    textData.textMargin !== undefined &&
-    textData.textMargin > 0
+    textObject.valign !== undefined &&
+    textObject.textMargin !== undefined &&
+    textObject.textMargin > 0
   ) {
-    switch (textData.valign) {
+    switch (textObject.valign) {
       case 'top':
       case 'start':
-        yfunc = () => Math.round(textData.y + textData.textMargin);
+        yfunc = () => Math.round(textObject.y + textObject.textMargin);
         break;
       case 'middle':
       case 'center':
         yfunc = () =>
-          Math.round(textData.y + (prevTextHeight + textHeight + textData.textMargin) / 2);
+          Math.round(textObject.y + (prevTextHeight + textHeight + textObject.textMargin) / 2);
         break;
       case 'bottom':
       case 'end':
         yfunc = () =>
           Math.round(
-            textData.y +
-              (prevTextHeight + textHeight + 2 * textData.textMargin) -
-              textData.textMargin
+            textObject.y +
+              (prevTextHeight + textHeight + 2 * textObject.textMargin) -
+              textObject.textMargin
           );
         break;
     }
   }
 
   if (
-    textData.anchor !== undefined &&
-    textData.textMargin !== undefined &&
-    textData.width !== undefined
+    textObject.anchor !== undefined &&
+    textObject.textMargin !== undefined &&
+    textObject.width !== undefined
   ) {
-    switch (textData.anchor) {
+    switch (textObject.anchor) {
       case 'left':
       case 'start':
-        textData.x = Math.round(textData.x + textData.textMargin);
-        textData.anchor = 'start';
-        textData.dominantBaseline = 'middle';
-        textData.alignmentBaseline = 'middle';
+        textObject.x = Math.round(textObject.x + textObject.textMargin);
+        textObject.anchor = 'start';
+        textObject.dominantBaseline = 'middle';
+        textObject.alignmentBaseline = 'middle';
         break;
       case 'middle':
       case 'center':
-        textData.x = Math.round(textData.x + textData.width / 2);
-        textData.anchor = 'middle';
-        textData.dominantBaseline = 'middle';
-        textData.alignmentBaseline = 'middle';
+        textObject.x = Math.round(textObject.x + textObject.width / 2);
+        textObject.anchor = 'middle';
+        textObject.dominantBaseline = 'middle';
+        textObject.alignmentBaseline = 'middle';
         break;
       case 'right':
       case 'end':
-        textData.x = Math.round(textData.x + textData.width - textData.textMargin);
-        textData.anchor = 'end';
-        textData.dominantBaseline = 'middle';
-        textData.alignmentBaseline = 'middle';
+        textObject.x = Math.round(textObject.x + textObject.width - textObject.textMargin);
+        textObject.anchor = 'end';
+        textObject.dominantBaseline = 'middle';
+        textObject.alignmentBaseline = 'middle';
         break;
     }
   }
 
-  for (let [i, line] of lines.entries()) {
+  for (const [i, line] of lines.entries()) {
     if (
-      textData.textMargin !== undefined &&
-      textData.textMargin === 0 &&
+      textObject.textMargin !== undefined &&
+      textObject.textMargin === 0 &&
       _textFontSize !== undefined
     ) {
       dy = i * _textFontSize;
     }
 
     const textElem = elem.append('text');
-    textElem.attr('x', textData.x);
+    textElem.attr('x', textObject.x);
     textElem.attr('y', yfunc());
-    if (textData.anchor !== undefined) {
+    if (textObject.anchor !== undefined) {
       textElem
-        .attr('text-anchor', textData.anchor)
-        .attr('dominant-baseline', textData.dominantBaseline)
-        .attr('alignment-baseline', textData.alignmentBaseline);
+        .attr('text-anchor', textObject.anchor)
+        .attr('dominant-baseline', textObject.dominantBaseline)
+        .attr('alignment-baseline', textObject.alignmentBaseline);
     }
-    if (textData.fontFamily !== undefined) {
-      textElem.style('font-family', textData.fontFamily);
+    if (textObject.fontFamily !== undefined) {
+      textElem.style('font-family', textObject.fontFamily);
     }
     if (_textFontSizePx !== undefined) {
       textElem.style('font-size', _textFontSizePx);
     }
-    if (textData.fontWeight !== undefined) {
-      textElem.style('font-weight', textData.fontWeight);
+    if (textObject.fontWeight !== undefined) {
+      textElem.style('font-weight', textObject.fontWeight);
     }
-    if (textData.fill !== undefined) {
-      textElem.attr('fill', textData.fill);
+    if (textObject.fill !== undefined) {
+      textElem.attr('fill', textObject.fill);
     }
-    if (textData.class !== undefined) {
-      textElem.attr('class', textData.class);
+    if (textObject.class !== undefined) {
+      textElem.attr('class', textObject.class);
     }
-    if (textData.dy !== undefined) {
-      textElem.attr('dy', textData.dy);
+    if (textObject.dy !== undefined) {
+      textElem.attr('dy', textObject.dy);
     } else if (dy !== 0) {
       textElem.attr('dy', dy);
     }
 
     const text = line || ZERO_WIDTH_SPACE;
-    if (textData.tspan) {
+    if (textObject.tspan) {
       const span = textElem.append('tspan');
-      span.attr('x', textData.x);
-      if (textData.fill !== undefined) {
-        span.attr('fill', textData.fill);
+      span.attr('x', textObject.x);
+      if (textObject.fill !== undefined) {
+        span.attr('fill', textObject.fill);
       }
       span.text(text);
     } else {
       textElem.text(text);
     }
     if (
-      textData.valign !== undefined &&
-      textData.textMargin !== undefined &&
-      textData.textMargin > 0
+      textObject.valign !== undefined &&
+      textObject.textMargin !== undefined &&
+      textObject.textMargin > 0
     ) {
+      // @ts-expect-error - Incorrect types
       textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
       prevTextHeight = textHeight;
     }
@@ -698,7 +705,7 @@ export const drawBackgroundRect = function (elem, bounds) {
   svgDrawCommon.drawBackgroundRect(elem, bounds);
 };
 
-export const insertDatabaseIcon = function (elem) {
+export const insertDatabaseIcon = function (elem: SVG) {
   elem
     .append('defs')
     .append('symbol')
@@ -746,9 +753,9 @@ export const insertClockIcon = function (elem) {
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
  *
- * @param elem
+ * @param elem - The svg element to append the arrowhead to.
  */
-export const insertArrowHead = function (elem) {
+export const insertArrowHead = function (elem: SVG) {
   elem
     .append('defs')
     .append('marker')
@@ -766,9 +773,9 @@ export const insertArrowHead = function (elem) {
 /**
  * Setup arrow head and define the marker. The result is appended to the svg.
  *
- * @param {any} elem
+ * @param elem - The svg element to append the filled arrowhead to.
  */
-export const insertArrowFilledHead = function (elem) {
+export const insertArrowFilledHead = function (elem: SVG) {
   elem
     .append('defs')
     .append('marker')
@@ -785,9 +792,9 @@ export const insertArrowFilledHead = function (elem) {
 /**
  * Setup node number. The result is appended to the svg.
  *
- * @param {any} elem
+ * @param elem - The svg element to append the sequence number to.
  */
-export const insertSequenceNumber = function (elem) {
+export const insertSequenceNumber = function (elem: SVG) {
   elem
     .append('defs')
     .append('marker')
@@ -807,9 +814,9 @@ export const insertSequenceNumber = function (elem) {
 /**
  * Setup cross head and define the marker. The result is appended to the svg.
  *
- * @param {any} elem
+ * @param elem - The svg element to append the arrow crosshead to.
  */
-export const insertArrowCrossHead = function (elem) {
+export const insertArrowCrossHead = function (elem: SVG) {
   const defs = elem.append('defs');
   const marker = defs
     .append('marker')
@@ -830,7 +837,7 @@ export const insertArrowCrossHead = function (elem) {
   // this is actual shape for arrowhead
 };
 
-export const getTextObj = function () {
+export const getTextObj = () => {
   return {
     x: 0,
     y: 0,
@@ -847,7 +854,7 @@ export const getTextObj = function () {
   };
 };
 
-export const getNoteRect = function () {
+export const getNoteRect = () => {
   return {
     x: 0,
     y: 0,
@@ -863,15 +870,23 @@ export const getNoteRect = function () {
 
 const _drawTextCandidateFunc = (function () {
   /**
-   * @param {any} content
-   * @param {any} g
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} textAttrs
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text.
+   * @param height - The height of the text.height
+   * @param textAttrs - The text attributes to be applied.
    */
-  function byText(content, g, x, y, width, height, textAttrs) {
+  function byText(
+    content: string,
+    g: SVG,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs
+  ) {
     const text = g
       .append('text')
       .attr('x', x + width / 2)
@@ -1078,7 +1093,7 @@ const _drawMenuItemTextCandidateFunc = (function () {
    * @param {any} textAttrs
    * @param {any} conf
    */
-  function byFo(content, g, x, y, width, height, textAttrs, conf) {
+  const byFo = (content, g, x, y, width, height, textAttrs, conf) => {
     const s = g.append('switch');
     const f = s
       .append('foreignObject')
@@ -1102,19 +1117,19 @@ const _drawMenuItemTextCandidateFunc = (function () {
 
     byTspan(content, s, x, y, width, height, textAttrs, conf);
     _setTextAttrs(text, textAttrs);
-  }
+  };
 
   /**
    * @param {any} toText
    * @param {any} fromTextAttrsDict
    */
-  function _setTextAttrs(toText, fromTextAttrsDict) {
+  const _setTextAttrs = (toText, fromTextAttrsDict) => {
     for (const key in fromTextAttrsDict) {
       if (fromTextAttrsDict.hasOwnProperty(key)) {
         toText.attr(key, fromTextAttrsDict[key]);
       }
     }
-  }
+  };
 
   return function (conf) {
     return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;

From 19c95f4903bbd4d259dc68799a9e735693ebe407 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Fri, 19 Apr 2024 17:46:06 +0530
Subject: [PATCH 05/12] make drawActivation and drawLoop type safe

---
 .../src/diagrams/common/commonTypes.ts        | 10 +-
 .../src/diagrams/common/svgDrawCommon.ts      |  5 +
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 94 ++++++++++++-------
 3 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
index f6b698ec58..ea31c1de80 100644
--- a/packages/mermaid/src/diagrams/common/commonTypes.ts
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -1,3 +1,5 @@
+import { SVG } from '../../diagram-api/types';
+
 export interface RectData {
   x: number;
   y: number;
@@ -21,6 +23,7 @@ export interface Bound {
   stopy: number;
   fill: string;
   stroke: string;
+  anchored: SVG;
 }
 
 export interface TextData {
@@ -45,9 +48,10 @@ export interface TextObject extends TextData {
   valign: string;
   dominantBaseline: string;
   alignmentBaseline: string;
-  fontSize: string;
-  fontWeight: string;
-  fontFamily: string;
+  fontSize?: string | number;
+  fontWeight?: string | number;
+  fontFamily?: string;
+  wrap?: boolean;
 }
 
 export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;
diff --git a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
index cf962f33ec..8c9c837be4 100644
--- a/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
+++ b/packages/mermaid/src/diagrams/common/svgDrawCommon.ts
@@ -124,6 +124,11 @@ export const getTextObj = (): TextObject => {
     rx: 0,
     ry: 0,
     tspan: true,
+    dominantBaseline: 'auto',
+    alignmentBaseline: 'auto',
+    text: '',
+    anchor: 'start',
+    valign: 'middle',
   };
   return testObject;
 };
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index ec465f1896..dfc7ffff5e 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -5,6 +5,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
 import type { Actor } from './types.js';
 import type {
+  Bound,
   D3RectElement,
   D3TextElement,
   RectData,
@@ -12,6 +13,8 @@ import type {
   TextObject,
 } from '../common/commonTypes.js';
 import type { SVG } from '../../diagram-api/types.js';
+import type { SequenceDiagramConfig } from '../../config.type.js';
+import type { D3Element } from '../../mermaidAPI.js';
 
 export const ACTOR_TYPE_WIDTH = 18 * 2;
 const TOP_ACTOR_CLASS = 'actor-top';
@@ -98,18 +101,10 @@ const popupMenuToggle = (elementId: string) => {
   return `const popupMenu = document.getElementById('${elementId}'); if (popupMenu != null) { popupMenu.style.display = popupMenu.style.display == 'block' ? 'none' : 'block'; }`;
 };
 
-interface MessageModel {
-  startx: number;
-  stopx: number;
-  starty: number;
-  stopy: number;
-  sequenceIndex: number;
-  sequenceVisible: boolean;
-}
 export const drawKatex = async (
-  elem: SVG,
+  elem: D3Element,
   textData: TextData,
-  msgModel: MessageModel | null = null
+  msgModel: LoopModel | null = null
 ) => {
   const textElem = elem.append('foreignObject');
   const lines = await renderKatex(textData.text, configApi.getConfig());
@@ -155,7 +150,7 @@ export const drawKatex = async (
   return [textElem];
 };
 
-export const drawText = function (elem: SVG, textObject: TextObject): D3TextElement[] {
+export const drawText = function (elem: D3Element, textObject: TextObject): D3TextElement[] {
   let prevTextHeight = 0;
   let textHeight = 0;
   const lines = textObject.text.split(common.lineBreakRegex);
@@ -277,7 +272,6 @@ export const drawText = function (elem: SVG, textObject: TextObject): D3TextElem
       textObject.textMargin !== undefined &&
       textObject.textMargin > 0
     ) {
-      // @ts-expect-error - Incorrect types
       textHeight += (textElem._groups || textElem)[0][0].getBBox().height;
       prevTextHeight = textHeight;
     }
@@ -570,44 +564,68 @@ export const anchorElement = function (elem) {
 /**
  * Draws an activation in the diagram
  *
- * @param {any} elem - Element to append activation rect.
- * @param {any} bounds - Activation box bounds.
- * @param {any} verticalPos - Precise y coordinate of bottom activation box edge.
- * @param {any} conf - Sequence diagram config object.
- * @param {any} actorActivations - Number of activations on the actor.
+ * @param  elem - Element to append the activation to.
+ * @param  bounds - Bounds of the activation.
+ * @param  verticalPos - Precise y coordinate of bottom activation box edge.
+ * @param  conf - Sequence diagram config object.
+ * @param  actorActivations - Count of activations on the actor.
  */
-export const drawActivation = function (elem, bounds, verticalPos, conf, actorActivations) {
+export const drawActivation = function (
+  elem: SVG,
+  bounds: Bound,
+  verticalPos: number,
+  conf: SequenceDiagramConfig,
+  actorActivations: number
+) {
   const rect = svgDrawCommon.getNoteRect();
   const g = bounds.anchored;
   rect.x = bounds.startx;
   rect.y = bounds.starty;
-  rect.class = 'activation' + (actorActivations % 3); // Will evaluate to 0, 1 or 2
+  rect.class = `activation${actorActivations % 3}`; // Will evaluate to 0, 1 or 2
   rect.width = bounds.stopx - bounds.startx;
   rect.height = verticalPos - bounds.starty;
   drawRect(g, rect);
 };
 
+interface LoopModel {
+  startx: number;
+  starty: number;
+  stopx: number;
+  stopy: number;
+  title: string;
+  wrap: boolean;
+  width: number;
+  height: number;
+  fill: string;
+  sections: Array<{ x: number; y: number; height: number }>;
+  sectionTitles?: Array<{ message: string }>;
+}
 /**
  * Draws a loop in the diagram
  *
- * @param {any} elem - Element to append the loop to.
- * @param {any} loopModel - LoopModel of the given loop.
- * @param {any} labelText - Text within the loop.
- * @param {any} conf - Diagram configuration
- * @returns {any}
+ * @param elem - Element to append the loop to.
+ * @param loopModel - Loop Model of the given loop.
+ * @param labelText - Text within the loop.
+ * @param conf - Diagram configuration
+ * @returns SVG
  */
-export const drawLoop = async function (elem, loopModel, labelText, conf) {
+export const drawLoop = async function (
+  elem: SVG,
+  loopModel: LoopModel,
+  labelText: string,
+  conf: SequenceDiagramConfig
+) {
   const {
-    boxMargin,
-    boxTextMargin,
-    labelBoxHeight,
-    labelBoxWidth,
+    boxMargin = 0,
+    boxTextMargin = 0,
+    labelBoxHeight = 0,
+    labelBoxWidth = 0,
     messageFontFamily: fontFamily,
     messageFontSize: fontSize,
     messageFontWeight: fontWeight,
   } = conf;
   const g = elem.append('g');
-  const drawLoopLine = function (startx, starty, stopx, stopy) {
+  const drawLoopLine = function (startx: number, starty: number, stopx: number, stopy: number) {
     return g
       .append('line')
       .attr('x1', startx)
@@ -658,7 +676,7 @@ export const drawLoop = async function (elem, loopModel, labelText, conf) {
   txt.fontWeight = fontWeight;
   txt.wrap = true;
 
-  let textElem = hasKatex(txt.text) ? await drawKatex(g, txt, loopModel) : drawText(g, txt);
+  const textElem = hasKatex(txt.text) ? await drawKatex(g, txt, loopModel) : drawText(g, txt);
 
   if (loopModel.sectionTitles !== undefined) {
     for (const [idx, item] of Object.entries(loopModel.sectionTitles)) {
@@ -681,7 +699,7 @@ export const drawLoop = async function (elem, loopModel, labelText, conf) {
         } else {
           drawText(g, txt);
         }
-        let sectionHeight = Math.round(
+        const sectionHeight = Math.round(
           textElem
             .map((te) => (te._groups || te)[0][0].getBBox().height)
             .reduce((acc, curr) => acc + curr)
@@ -842,15 +860,19 @@ export const getTextObj = () => {
     x: 0,
     y: 0,
     fill: undefined,
-    anchor: undefined,
+    anchor: 'start',
     style: '#666',
-    width: undefined,
-    height: undefined,
+    width: 0,
+    height: 0,
     textMargin: 0,
     rx: 0,
     ry: 0,
     tspan: true,
-    valign: undefined,
+    valign: 'baseline',
+    'text-anchor': 'start',
+    text: '',
+    dominantBaseline: 'auto',
+    alignmentBaseline: 'auto',
   };
 };
 

From 7ad17f8ad2f59e2785a0b6025dd9c807cb679d47 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 12:51:46 +0530
Subject: [PATCH 06/12] make fixLifeLineHeights and drawActorTypeParticipant
 typesafe

---
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 65 ++++++++-----------
 .../mermaid/src/diagrams/sequence/types.ts    | 10 ++-
 2 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index dfc7ffff5e..e48883fdb4 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -282,37 +282,17 @@ export const drawText = function (elem: D3Element, textObject: TextObject): D3Te
   return textElems;
 };
 
-export const drawLabel = function (elem, txtObject) {
+export const drawLabel = function (elem: SVG, txtObject: TextObject) {
   /**
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} cut
-   * @returns {any}
+   * @param x - x coordinate of the label
+   * @param y - y coordinate of the label
+   * @param width - width of the label
+   * @param height - height of the label
+   * @param cut - Offset at which the label is cut
+   * @returns number
    */
-  function genPoints(x, y, width, height, cut) {
-    return (
-      x +
-      ',' +
-      y +
-      ' ' +
-      (x + width) +
-      ',' +
-      y +
-      ' ' +
-      (x + width) +
-      ',' +
-      (y + height - cut) +
-      ' ' +
-      (x + width - cut * 1.2) +
-      ',' +
-      (y + height) +
-      ' ' +
-      x +
-      ',' +
-      (y + height)
-    );
+  function genPoints(x: number, y: number, width: number, height: number, cut: number) {
+    return `${x},${y} ${x + width},${y} ${x + width},${y + height - cut} ${x + width - cut * 1.2},${y + height} ${x},${y + height}`;
   }
   const polygon = elem.append('polygon');
   polygon.attr('points', genPoints(txtObject.x, txtObject.y, txtObject.width, txtObject.height, 7));
@@ -326,7 +306,12 @@ export const drawLabel = function (elem, txtObject) {
 
 let actorCnt = -1;
 
-export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => {
+export const fixLifeLineHeights = (
+  diagram: D3Element,
+  actors: Record<string, Actor>,
+  actorKeys: Array<string>,
+  conf: SequenceDiagramConfig
+) => {
   if (!diagram.select) {
     return;
   }
@@ -344,12 +329,17 @@ export const fixLifeLineHeights = (diagram, actors, actorKeys, conf) => {
 /**
  * Draws an actor in the diagram with the attached line
  *
- * @param {any} elem - The diagram we'll draw to.
- * @param {any} actor - The actor to draw.
- * @param {any} conf - DrawText implementation discriminator object
- * @param {boolean} isFooter - If the actor is the footer one
+ * @param elem - The diagram we'll draw to.
+ * @param actor - The actor to draw.
+ * @param conf - DrawText implementation discriminator object
+ * @param isFooter - If the actor is the footer
  */
-const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
+const drawActorTypeParticipant = async function (
+  elem: SVG,
+  actor: Actor,
+  conf: SequenceDiagramConfig,
+  isFooter: boolean
+) {
   const actorY = isFooter ? actor.stopy : actor.starty;
   const center = actor.x + actor.width / 2;
   const centerY = actorY + 5;
@@ -425,8 +415,9 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
   );
 
   let height = actor.height;
-  if (rectElem.node) {
-    const bounds = rectElem.node().getBBox();
+  const rectNode = rectElem.node();
+  if (rectNode) {
+    const bounds = rectNode.getBBox();
     actor.height = bounds.height;
     height = bounds.height;
   }
diff --git a/packages/mermaid/src/diagrams/sequence/types.ts b/packages/mermaid/src/diagrams/sequence/types.ts
index 181c48cef5..845f9aeb2b 100644
--- a/packages/mermaid/src/diagrams/sequence/types.ts
+++ b/packages/mermaid/src/diagrams/sequence/types.ts
@@ -15,10 +15,18 @@ export interface Actor {
   prevActor?: string;
   nextActor?: string;
   links: Record<string, string>;
-  properties: Record<string, unknown>;
+  properties: Record<string, string>;
   actorCnt: number | null;
   rectData: RectData;
   type: string;
+  stopx: number;
+  stopy: number;
+  height: number;
+  startx: number;
+  starty: number;
+  width: number;
+  x: number;
+  y: number;
 }
 
 export interface Message {

From 84ba259d85f0d4f6c201dea2ce0197927bac2ede Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 13:49:06 +0530
Subject: [PATCH 07/12] more typesafe code

---
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 202 ++++++++++++------
 1 file changed, 133 insertions(+), 69 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index e48883fdb4..da0064e4f1 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -345,7 +345,7 @@ const drawActorTypeParticipant = async function (
   const centerY = actorY + 5;
 
   const boxplusLineGroup = elem.append('g').lower();
-  var g = boxplusLineGroup;
+  let g = boxplusLineGroup;
 
   if (!isFooter) {
     actorCnt++;
@@ -372,7 +372,7 @@ const drawActorTypeParticipant = async function (
   }
 
   const rect = svgDrawCommon.getNoteRect();
-  var cssclass = 'actor';
+  let cssclass = 'actor';
   if (actor.properties != null && actor.properties['class']) {
     cssclass = actor.properties['class'];
   } else {
@@ -707,10 +707,10 @@ export const drawLoop = async function (
 /**
  * Draws a background rectangle
  *
- * @param {any} elem Diagram (reference for bounds)
- * @param {any} bounds Shape of the rectangle
+ * @param elem - Diagram (reference for bounds)
+ * @param bounds - Shape of the rectangle
  */
-export const drawBackgroundRect = function (elem, bounds) {
+export const drawBackgroundRect = function (elem: SVG, bounds: Bound) {
   svgDrawCommon.drawBackgroundRect(elem, bounds);
 };
 
@@ -893,7 +893,7 @@ const _drawTextCandidateFunc = (function () {
    */
   function byText(
     content: string,
-    g: SVG,
+    g: D3Element,
     x: number,
     y: number,
     width: number,
@@ -910,19 +910,28 @@ const _drawTextCandidateFunc = (function () {
   }
 
   /**
-   * @param {any} content
-   * @param {any} g
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} textAttrs
-   * @param {any} conf
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text.
+   * @param height - The height of the text.
+   * @param textAttrs - The text attributes to be applied.
+   * @param conf - The configuration object.
    */
-  function byTspan(content, g, x, y, width, height, textAttrs, conf) {
+  function byTspan(
+    content: string,
+    g: D3Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs,
+    conf: { actorFontSize: string; actorFontFamily: string; actorFontWeight: string }
+  ) {
     const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
 
-    const [_actorFontSize, _actorFontSizePx] = parseFontSize(actorFontSize);
+    const [_actorFontSize = 0, _actorFontSizePx = '0px'] = parseFontSize(actorFontSize);
 
     const lines = content.split(common.lineBreakRegex);
     for (let i = 0; i < lines.length; i++) {
@@ -951,16 +960,29 @@ const _drawTextCandidateFunc = (function () {
   }
 
   /**
-   * @param {any} content
-   * @param {any} g
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} textAttrs
-   * @param {any} conf
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text.
+   * @param height - The height of the text.
+   * @param textAttrs - The text attributes to be applied.
+   * @param conf - The configuration object.
    */
-  function byFo(content, g, x, y, width, height, textAttrs, conf) {
+  function byFo(
+    content: string,
+    g: D3Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs,
+    conf: {
+      actorFontSize: string;
+      actorFontFamily: string;
+      actorFontWeight: string;
+    }
+  ) {
     const s = g.append('switch');
     const f = s
       .append('foreignObject')
@@ -987,17 +1009,25 @@ const _drawTextCandidateFunc = (function () {
   }
 
   /**
-   *
-   * @param content
-   * @param g
-   * @param x
-   * @param y
-   * @param width
-   * @param height
-   * @param textAttrs
-   * @param conf
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text.
+   * @param height - The height of the text.
+   * @param textAttrs - The text attributes to be applied.
+   * @param conf - The configuration object.
    */
-  async function byKatex(content, g, x, y, width, height, textAttrs, conf) {
+  async function byKatex(
+    content: string,
+    g: D3Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs,
+    conf: { actorFontSize: string; actorFontFamily: string; actorFontWeight: string }
+  ) {
     // TODO duplicate render calls, optimize
 
     const dim = await calculateMathMLDimensions(content, configApi.getConfig());
@@ -1022,10 +1052,10 @@ const _drawTextCandidateFunc = (function () {
   }
 
   /**
-   * @param {any} toText
-   * @param {any} fromTextAttrsDict
+   * @param toText - The text SVG element to apply the attributes to.
+   * @param fromTextAttrsDict - The text attributes to be applied.
    */
-  function _setTextAttrs(toText, fromTextAttrsDict) {
+  function _setTextAttrs(toText: SVG, fromTextAttrsDict: TextAttrs) {
     for (const key in fromTextAttrsDict) {
       if (fromTextAttrsDict.hasOwnProperty(key)) {
         toText.attr(key, fromTextAttrsDict[key]);
@@ -1043,15 +1073,23 @@ const _drawTextCandidateFunc = (function () {
 
 const _drawMenuItemTextCandidateFunc = (function () {
   /**
-   * @param {any} content
-   * @param {any} g
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} textAttrs
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text.
+   * @param height - The height of the text.
+   * @param textAttrs - The text attributes to be applied.
    */
-  function byText(content, g, x, y, width, height, textAttrs) {
+  function byText(
+    content: string,
+    g: D3Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs
+  ) {
     const text = g
       .append('text')
       .attr('x', x)
@@ -1062,17 +1100,30 @@ const _drawMenuItemTextCandidateFunc = (function () {
   }
 
   /**
-   * @param {any} content
-   * @param {any} g
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} textAttrs
-   * @param {any} conf
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text.
+   * @param height - The height of the text.
+   * @param textAttrs - The text attributes to be applied.
+   * @param conf - The configuration object.
    */
-  function byTspan(content, g, x, y, width, height, textAttrs, conf) {
-    const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
+  function byTspan(
+    content: string,
+    g: D3Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs,
+    conf: {
+      actorFontSize: number;
+      actorFontFamily: number;
+      actorFontWeight: number;
+    }
+  ) {
+    const { actorFontSize = 0, actorFontFamily = 0, actorFontWeight = 0 } = conf;
 
     const lines = content.split(common.lineBreakRegex);
     for (let i = 0; i < lines.length; i++) {
@@ -1097,16 +1148,29 @@ const _drawMenuItemTextCandidateFunc = (function () {
   }
 
   /**
-   * @param {any} content
-   * @param {any} g
-   * @param {any} x
-   * @param {any} y
-   * @param {any} width
-   * @param {any} height
-   * @param {any} textAttrs
-   * @param {any} conf
+   * @param content - The text to be drawn.
+   * @param g - The svg group to append the text to.
+   * @param x - The x coordinate of the text.
+   * @param y - The y coordinate of the text.
+   * @param width - The width of the text
+   * @param height -  The height of the text.
+   * @param textAttrs - The text attributes to be applied.
+   * @param conf - The configuration object.
    */
-  const byFo = (content, g, x, y, width, height, textAttrs, conf) => {
+  const byFo = (
+    content: string,
+    g: D3Element,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    textAttrs: TextAttrs,
+    conf: {
+      actorFontSize: string;
+      actorFontFamily: string;
+      actorFontWeight: string;
+    }
+  ) => {
     const s = g.append('switch');
     const f = s
       .append('foreignObject')
@@ -1133,10 +1197,10 @@ const _drawMenuItemTextCandidateFunc = (function () {
   };
 
   /**
-   * @param {any} toText
-   * @param {any} fromTextAttrsDict
+   * @param toText - The text SVG element to apply the attributes to.
+   * @param fromTextAttrsDict - The text attributes to be applied.
    */
-  const _setTextAttrs = (toText, fromTextAttrsDict) => {
+  const _setTextAttrs = (toText: SVG, fromTextAttrsDict: TextAttrs) => {
     for (const key in fromTextAttrsDict) {
       if (fromTextAttrsDict.hasOwnProperty(key)) {
         toText.attr(key, fromTextAttrsDict[key]);
@@ -1144,7 +1208,7 @@ const _drawMenuItemTextCandidateFunc = (function () {
     }
   };
 
-  return function (conf) {
+  return function (conf: { textPlacement: string }) {
     return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;
   };
 })();

From 04f74a9c5f0218715220ab7c8080268cf36eaca4 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 14:04:14 +0530
Subject: [PATCH 08/12] improve SequenceDiagramConfig and use in across
 codebase

---
 packages/mermaid/src/config.type.ts           |  1 +
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 40 +++++++------------
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 79f4243151..2cc4aed254 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1350,6 +1350,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   messageFont?: FontCalculator;
   noteFont?: FontCalculator;
   actorFont?: FontCalculator;
+  textPlacement?: string;
 }
 /**
  * The object containing configurations specific for flowcharts
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index da0064e4f1..825d974495 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -39,7 +39,7 @@ export const drawPopup = (
   elem: SVG,
   actor: Actor,
   minMenuWidth: number,
-  textAttrs: TextAttrs,
+  textAttrs: SequenceDiagramConfig,
   forceMenus: boolean
 ): { height: number; width: number } => {
   if (!actor.links) {
@@ -335,7 +335,7 @@ export const fixLifeLineHeights = (
  * @param isFooter - If the actor is the footer
  */
 const drawActorTypeParticipant = async function (
-  elem: SVG,
+  elem: D3Element,
   actor: Actor,
   conf: SequenceDiagramConfig,
   isFooter: boolean
@@ -601,7 +601,7 @@ interface LoopModel {
  * @returns SVG
  */
 export const drawLoop = async function (
-  elem: SVG,
+  elem: D3Element,
   loopModel: LoopModel,
   labelText: string,
   conf: SequenceDiagramConfig
@@ -729,7 +729,7 @@ export const insertDatabaseIcon = function (elem: SVG) {
     );
 };
 
-export const insertComputerIcon = function (elem) {
+export const insertComputerIcon = function (elem: SVG) {
   elem
     .append('defs')
     .append('symbol')
@@ -744,7 +744,7 @@ export const insertComputerIcon = function (elem) {
     );
 };
 
-export const insertClockIcon = function (elem) {
+export const insertClockIcon = function (elem: SVG) {
   elem
     .append('defs')
     .append('symbol')
@@ -927,7 +927,7 @@ const _drawTextCandidateFunc = (function () {
     width: number,
     height: number,
     textAttrs: TextAttrs,
-    conf: { actorFontSize: string; actorFontFamily: string; actorFontWeight: string }
+    conf: SequenceDiagramConfig
   ) {
     const { actorFontSize, actorFontFamily, actorFontWeight } = conf;
 
@@ -977,11 +977,7 @@ const _drawTextCandidateFunc = (function () {
     width: number,
     height: number,
     textAttrs: TextAttrs,
-    conf: {
-      actorFontSize: string;
-      actorFontFamily: string;
-      actorFontWeight: string;
-    }
+    conf: SequenceDiagramConfig
   ) {
     const s = g.append('switch');
     const f = s
@@ -1026,7 +1022,7 @@ const _drawTextCandidateFunc = (function () {
     width: number,
     height: number,
     textAttrs: TextAttrs,
-    conf: { actorFontSize: string; actorFontFamily: string; actorFontWeight: string }
+    conf: SequenceDiagramConfig
   ) {
     // TODO duplicate render calls, optimize
 
@@ -1063,7 +1059,7 @@ const _drawTextCandidateFunc = (function () {
     }
   }
 
-  return function (conf, hasKatex = false) {
+  return function (conf: SequenceDiagramConfig, hasKatex = false) {
     if (hasKatex) {
       return byKatex;
     }
@@ -1117,17 +1113,13 @@ const _drawMenuItemTextCandidateFunc = (function () {
     width: number,
     height: number,
     textAttrs: TextAttrs,
-    conf: {
-      actorFontSize: number;
-      actorFontFamily: number;
-      actorFontWeight: number;
-    }
+    conf: SequenceDiagramConfig
   ) {
-    const { actorFontSize = 0, actorFontFamily = 0, actorFontWeight = 0 } = conf;
+    const { actorFontSize = '0', actorFontFamily = 0, actorFontWeight = 0 } = conf;
 
     const lines = content.split(common.lineBreakRegex);
     for (let i = 0; i < lines.length; i++) {
-      const dy = i * actorFontSize - (actorFontSize * (lines.length - 1)) / 2;
+      const dy = i * Number(actorFontSize) - (Number(actorFontSize) * (lines.length - 1)) / 2;
       const text = g
         .append('text')
         .attr('x', x)
@@ -1165,11 +1157,7 @@ const _drawMenuItemTextCandidateFunc = (function () {
     width: number,
     height: number,
     textAttrs: TextAttrs,
-    conf: {
-      actorFontSize: string;
-      actorFontFamily: string;
-      actorFontWeight: string;
-    }
+    conf: SequenceDiagramConfig
   ) => {
     const s = g.append('switch');
     const f = s
@@ -1208,7 +1196,7 @@ const _drawMenuItemTextCandidateFunc = (function () {
     }
   };
 
-  return function (conf: { textPlacement: string }) {
+  return function (conf: SequenceDiagramConfig) {
     return conf.textPlacement === 'fo' ? byFo : conf.textPlacement === 'old' ? byText : byTspan;
   };
 })();

From 82f05ca311607375e94325416b6e5d133f24404b Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 14:10:46 +0530
Subject: [PATCH 09/12] remove unused params from drawActivation

---
 .../mermaid/src/diagrams/sequence/sequenceRenderer.ts     | 8 +-------
 packages/mermaid/src/diagrams/sequence/svgDraw.ts         | 5 ++---
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
index 98fdcddc40..7709043607 100644
--- a/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
+++ b/packages/mermaid/src/diagrams/sequence/sequenceRenderer.ts
@@ -831,13 +831,7 @@ export const draw = async function (_text: string, id: string, _version: string,
       activationData.starty = verticalPos - 6;
       verticalPos += 12;
     }
-    svgDraw.drawActivation(
-      diagram,
-      activationData,
-      verticalPos,
-      conf,
-      actorActivations(msg.from.actor).length
-    );
+    svgDraw.drawActivation(activationData, verticalPos, actorActivations(msg.from.actor).length);
 
     bounds.insert(activationData.startx, verticalPos - 10, activationData.stopx, verticalPos);
   }
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index 825d974495..2d942a1491 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -562,17 +562,16 @@ export const anchorElement = function (elem) {
  * @param  actorActivations - Count of activations on the actor.
  */
 export const drawActivation = function (
-  elem: SVG,
   bounds: Bound,
   verticalPos: number,
-  conf: SequenceDiagramConfig,
   actorActivations: number
 ) {
   const rect = svgDrawCommon.getNoteRect();
   const g = bounds.anchored;
   rect.x = bounds.startx;
   rect.y = bounds.starty;
-  rect.class = `activation${actorActivations % 3}`; // Will evaluate to 0, 1 or 2
+  // Will evaluate to 0, 1 or 2
+  rect.class = `activation${actorActivations % 3}`;
   rect.width = bounds.stopx - bounds.startx;
   rect.height = verticalPos - bounds.starty;
   drawRect(g, rect);

From 46a4af6fdec2860395bb31d69f22fb4353b5f872 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 14:14:08 +0530
Subject: [PATCH 10/12] move types to types file

---
 .../mermaid/src/diagrams/sequence/svgDraw.ts  | 26 ++-----------------
 .../mermaid/src/diagrams/sequence/types.ts    | 23 ++++++++++++++++
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index 2d942a1491..6a970bf325 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -3,7 +3,7 @@ import * as svgDrawCommon from '../common/svgDrawCommon.js';
 import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import * as configApi from '../../config.js';
-import type { Actor } from './types.js';
+import type { Actor, LoopModel, TextAttrs } from './types.js';
 import type {
   Bound,
   D3RectElement,
@@ -26,15 +26,6 @@ export const drawRect = (elem: SVG, rectData: RectData): D3RectElement => {
   return svgDrawCommon.drawRect(elem, rectData);
 };
 
-interface TextAttrs {
-  class?: string;
-  fill?: string;
-  stroke?: string;
-  'font-size'?: string;
-  'font-family'?: string;
-  'font-weight'?: string;
-}
-
 export const drawPopup = (
   elem: SVG,
   actor: Actor,
@@ -403,7 +394,7 @@ const drawActorTypeParticipant = async function (
     }
   }
 
-  await _drawTextCandidateFunc(conf, hasKatex(actor.description))(
+  _drawTextCandidateFunc(conf, hasKatex(actor.description))(
     actor.description,
     g,
     rect.x,
@@ -577,19 +568,6 @@ export const drawActivation = function (
   drawRect(g, rect);
 };
 
-interface LoopModel {
-  startx: number;
-  starty: number;
-  stopx: number;
-  stopy: number;
-  title: string;
-  wrap: boolean;
-  width: number;
-  height: number;
-  fill: string;
-  sections: Array<{ x: number; y: number; height: number }>;
-  sectionTitles?: Array<{ message: string }>;
-}
 /**
  * Draws a loop in the diagram
  *
diff --git a/packages/mermaid/src/diagrams/sequence/types.ts b/packages/mermaid/src/diagrams/sequence/types.ts
index 845f9aeb2b..499daf0f2e 100644
--- a/packages/mermaid/src/diagrams/sequence/types.ts
+++ b/packages/mermaid/src/diagrams/sequence/types.ts
@@ -100,3 +100,26 @@ export interface Note {
   message: string;
   wrap: boolean;
 }
+
+export interface TextAttrs {
+  class?: string;
+  fill?: string;
+  stroke?: string;
+  'font-size'?: string;
+  'font-family'?: string;
+  'font-weight'?: string;
+}
+
+export interface LoopModel {
+  startx: number;
+  starty: number;
+  stopx: number;
+  stopy: number;
+  title: string;
+  wrap: boolean;
+  width: number;
+  height: number;
+  fill: string;
+  sections: Array<{ x: number; y: number; height: number }>;
+  sectionTitles?: Array<{ message: string }>;
+}

From 3d2881a18503a2d6b16d621d063f0f2503f8eb89 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 14:25:22 +0530
Subject: [PATCH 11/12] fix tests

---
 packages/mermaid/src/diagrams/common/commonTypes.ts |  2 +-
 packages/mermaid/src/diagrams/sequence/svgDraw.ts   | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/mermaid/src/diagrams/common/commonTypes.ts b/packages/mermaid/src/diagrams/common/commonTypes.ts
index ea31c1de80..c5b03ce82f 100644
--- a/packages/mermaid/src/diagrams/common/commonTypes.ts
+++ b/packages/mermaid/src/diagrams/common/commonTypes.ts
@@ -1,4 +1,4 @@
-import { SVG } from '../../diagram-api/types';
+import type { SVG } from '../../diagram-api/types';
 
 export interface RectData {
   x: number;
diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.ts b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
index 6a970bf325..54efc0c0f1 100644
--- a/packages/mermaid/src/diagrams/sequence/svgDraw.ts
+++ b/packages/mermaid/src/diagrams/sequence/svgDraw.ts
@@ -406,11 +406,13 @@ const drawActorTypeParticipant = async function (
   );
 
   let height = actor.height;
-  const rectNode = rectElem.node();
-  if (rectNode) {
-    const bounds = rectNode.getBBox();
-    actor.height = bounds.height;
-    height = bounds.height;
+  if (rectElem.node && typeof rectElem.node === 'function') {
+    const rectNode = rectElem.node();
+    if (rectNode) {
+      const bounds = rectNode.getBBox();
+      actor.height = bounds.height;
+      height = bounds.height;
+    }
   }
 
   return height;

From c5b35355612afc43498bded64184b0cb8ceab72a Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Tue, 23 Apr 2024 16:26:14 +0530
Subject: [PATCH 12/12] fix lint

---
 packages/mermaid/src/config.type.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
index 2cc4aed254..79f4243151 100644
--- a/packages/mermaid/src/config.type.ts
+++ b/packages/mermaid/src/config.type.ts
@@ -1350,7 +1350,6 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
   messageFont?: FontCalculator;
   noteFont?: FontCalculator;
   actorFont?: FontCalculator;
-  textPlacement?: string;
 }
 /**
  * The object containing configurations specific for flowcharts