[WIP] refactor: make sequence/svgDraw typesafe

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({

packages/mermaid/src/diagrams/common/commonTypes.ts

@@ -1,3 +1,5 @@
+import type { SVG } from '../../diagram-api/types';
+
 export interface RectData {
   x: number;
   y: number;
@@ -21,6 +23,7 @@
   stopy: number;
   fill: string;
   stroke: string;
+  anchored: SVG;
 }
 
 export interface TextData {
@@ -32,20 +35,23 @@
   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 | number;
+  fontWeight?: string | number;
+  fontFamily?: string;
+  wrap?: boolean;
 }
 
 export type D3RectElement = d3.Selection<SVGRectElement, unknown, Element | null, unknown>;

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;
 };

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);
   }