add some sequence testcases and support name attribute in test cases

excalidraw · Oct 12, 2023 · b73ab3e · b73ab3e
1 parent a4ec051
commit b73ab3e
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/playground/index.html b/playground/index.html
@@ -48,11 +48,17 @@ <h1>Custom Test</h1>
       id="diagram-loading-spinner"
       width="50"
     />
-    <h2>Flowchart</h2>
+    <h2>Flowchart Diagrams</h2>
     <details>
       <summary>Flowchart Examples</summary>
       <div id="flowchart-container"></div>
     </details>
+
+    <h2>Sequence Diagrams</h2>
+    <details>
+      <summary>Sequence Diagram Examples</summary>
+      <div id="sequence-container"></div>
+    </details>
     <h2 style="margin-top: 50px">Unsupported diagrams</h2>
     <details>
       <summary>Unsupported Examples</summary>

diff --git a/playground/index.ts b/playground/index.ts
@@ -9,28 +9,46 @@ mermaid.initialize({ startOnLoad: false });
 
 import "./initCustomTest";
 import { renderExcalidraw } from "./initExcalidraw.js";
+import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.js";
 
+let indexOffset = 0;
 (async () => {
   // Render flowchart diagrams
   const flowchartContainer = document.getElementById("flowchart-container")!;
   await Promise.all(
-    FLOWCHART_DIAGRAM_TESTCASES.map((diagramDefinition, i) => {
-      return renderDiagram(flowchartContainer, diagramDefinition, i);
+    FLOWCHART_DIAGRAM_TESTCASES.map((defination, index) => {
+      const name = `Test ${index + 1}`;
+      return renderDiagram(flowchartContainer, name, defination, index);
     })
   );
-
+  indexOffset += FLOWCHART_DIAGRAM_TESTCASES.length;
+  // Render Sequence diagrams
+  const sequenceContainer = document.getElementById("sequence-container")!;
+  await Promise.all(
+    SEQUENCE_DIAGRAM_TESTCASES.map(({ name, defination }, index) => {
+      return renderDiagram(
+        sequenceContainer,
+        name,
+        defination,
+        index + indexOffset
+      );
+    })
+  );
+  indexOffset += SEQUENCE_DIAGRAM_TESTCASES.length;
   // Render unsupported diagrams
   const unsupportedContainer = document.getElementById("unsupported")!;
   unsupportedContainer.innerHTML = `
       <p>Unsupported diagram will be rendered as SVG image.</p>
     `;
-  const indexOffset = FLOWCHART_DIAGRAM_TESTCASES.length;
   await Promise.all(
-    UNSUPPORTED_DIAGRAM_TESTCASES.map((diagramDefinition, i) => {
+    UNSUPPORTED_DIAGRAM_TESTCASES.map((diagramDefinition, index) => {
+      const name = `Test ${index + 1}`;
+
       return renderDiagram(
         unsupportedContainer,
+        name,
         diagramDefinition,
-        i + indexOffset
+        index + indexOffset
       );
     })
   );
@@ -41,12 +59,13 @@ import { renderExcalidraw } from "./initExcalidraw.js";
 
 async function renderDiagram(
   containerEl: HTMLElement,
+  name: string,
   diagramDefinition: string,
   i: number
 ) {
   const diagramContainerEl = document.createElement("div");
   diagramContainerEl.id = `diagram-container-${i}`;
-  diagramContainerEl.innerHTML = `<h2 style="margin-top: 50px">Test #${i + 1}
+  diagramContainerEl.innerHTML = `<h2 style="margin-top: 50px">${name}
   </h2>
   <div id="diagram-${i}"></div>
   <button id="diagram-btn-${i}" data="${i}">Render to Excalidraw</button>
@@ -64,6 +83,7 @@ async function renderDiagram(
   btn.addEventListener("click", async () => {
     const data = btn.getAttribute("data");
     const pd = document.getElementById(`parsed-${data}`)!;
+    console.log(pd.innerHTML, "HEYYY", data);
     renderExcalidraw(pd.innerHTML);
   });
 

diff --git a/src/converter/types/sequence.ts b/src/converter/types/sequence.ts
@@ -9,6 +9,7 @@ const EXCALIDRAW_STROKE_STYLE_FOR_ARROW: { [key: string]: StrokeStyle } = {
   DOTTED: "dotted",
   SOLID_CROSS: "solid",
   DOTTED_CROSS: "dotted",
+  SOLID_OPEN: "solid",
   DOTTED_OPEN: "dotted",
   SOLID_POINT: "solid",
   DOTTED_POINT: "dotted",
@@ -17,7 +18,6 @@ export const SequenceToExcalidrawSkeletonConvertor = new GraphConverter({
   converter: (chart: Sequence, options: any) => {
     const elements: ExcalidrawElementSkeleton[] = [];
     const fontSize = options.fontSize;
-    console.log(chart, "CHART");
     Object.values(chart.nodes).forEach((vertex) => {
       if (!vertex) {
         return;
@@ -60,6 +60,7 @@ export const SequenceToExcalidrawSkeletonConvertor = new GraphConverter({
         return;
       }
       const strokeStyle = EXCALIDRAW_STROKE_STYLE_FOR_ARROW[arrow.strokeStyle];
+      console.log(arrow.strokeStyle, "HEYYYY");
       const arrowElement: ExcalidrawElementSkeleton = {
         type: "arrow",
         x: arrow.startX,
@@ -72,8 +73,8 @@ export const SequenceToExcalidrawSkeletonConvertor = new GraphConverter({
         height: arrow.endY - arrow.startY,
         strokeStyle,
         endArrowhead:
-          strokeStyle === EXCALIDRAW_STROKE_STYLE_FOR_ARROW.SOLID ||
-          strokeStyle === EXCALIDRAW_STROKE_STYLE_FOR_ARROW.DOTTED
+          arrow.strokeStyle === "SOLID_OPEN" ||
+          arrow.strokeStyle === "DOTTED_OPEN"
             ? null
             : "arrow",
         label: {

diff --git a/src/parser/sequence.ts b/src/parser/sequence.ts
@@ -40,6 +40,7 @@ const SUPPORTED_SEQUENCE_ARROW_TYPES = {
   1: "DOTTED",
   3: "SOLID_CROSS",
   4: "DOTTED_CROSS",
+  5: "SOLID_OPEN",
   6: "DOTTED_OPEN",
   24: "SOLID_POINT",
   25: "DOTTED_POINT",
@@ -133,6 +134,6 @@ export const parseMermaidSequenceDiagram = (
   const { nodes, lines } = parseActor(actorData, containerEl);
   const messages = mermaidParser.getMessages();
   const arrows = parseMessages(messages, containerEl);
-  console.log("parsing", nodes, actorData.containerEl);
+  console.log("parsing", mermaidParser.LINETYPE, messages);
   return { type: "sequence", lines, arrows, nodes };
 };