feat: ✨ autonumber and custom text

nexeth · Sep 20, 2023 · b5056d2 · b5056d2
1 parent b7f22e8
commit b5056d2
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,5 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "thunder-client.saveToWorkspace": true,
   "thunder-client.workspaceRelativePath": ".vscode",
-  "cSpell.words": [ "NEXETH"]
+  "cSpell.words": ["autonumber", "NEXETH"]
 }
diff --git a/modules/sequence-diagram/sequence-diagram.ts b/modules/sequence-diagram/sequence-diagram.ts
@@ -6,6 +6,8 @@ import {
   SequenceBox,
   SequenceBoxOptions,
   SequenceComment,
+  SequenceCustom,
+  SequenceDiagramConstructor,
   SequenceDiagramInterface,
   SequenceItem,
   SequenceItemKey,
@@ -21,13 +23,19 @@ import {
 } from "@/types";
 
 export class SequenceDiagram extends AbstractMermaid implements SequenceDiagramInterface {
-  constructor(title?: string) {
+  constructor(opt?: SequenceDiagramConstructor) {
     super();
-    this.title = title;
+    this.title = opt?.title;
+    this.autonumber = opt?.autonumber ?? false;
+    this.styles = opt?.styles;
   }
 
   title?: string;
 
+  autonumber: boolean = false;
+
+  styles?: string;
+
   sequence: SequenceItem[] = [];
 
   renderTitle(): string {
@@ -176,6 +184,14 @@ export class SequenceDiagram extends AbstractMermaid implements SequenceDiagramI
     return `%% ${text}`;
   }
 
+  custom(text: string): void {
+    this.sequence.push({ type: "custom", text });
+  }
+
+  renderCustom({ text }: SequenceCustom): string {
+    return text;
+  }
+
   renderMap: Record<SequenceItemKey, (props: SequenceItem) => string> = {
     participant: (item) => this.renderParticipant(item as SequenceParticipant),
     actor: (item) => this.renderParticipant(item as SequenceParticipant),
@@ -195,6 +211,7 @@ export class SequenceDiagram extends AbstractMermaid implements SequenceDiagramI
     break: (item) => this.renderRegion(item as SequenceRegionItem),
     rect: (item) => this.renderRect(item as SequenceRect),
     comment: (item) => this.renderComment(item as SequenceComment),
+    custom: (item) => this.renderCustom(item as SequenceCustom),
   };
 
   render() {
@@ -203,6 +220,7 @@ export class SequenceDiagram extends AbstractMermaid implements SequenceDiagramI
     return `
 sequenceDiagram
 \t${this.renderTitle()}
+\t${this.autonumber ? "autonumber" : ""}
 \t${renderedSequence.join("\n\t")}`;
   }
 

diff --git a/test/sequence-diagram.test.ts b/test/sequence-diagram.test.ts
@@ -92,7 +92,7 @@ describe("Sequence Diagram", () => {
 
   describe("title", () => {
     test("should render title", () => {
-      const diagram = new SequenceDiagram("Title");
+      const diagram = new SequenceDiagram({ title: "Title" });
       expect(diagram.render()).toContain("Title");
     });
 
@@ -364,6 +364,41 @@ describe("Sequence Diagram", () => {
     });
   });
 
+  describe("autonumber", () => {
+    test("should render autonumber", () => {
+      const diagram = new SequenceDiagram({ autonumber: true });
+      diagram.message("Alice", "->", "Bob", "Hello");
+      diagram.message("Bob", "->", "Alice", "Hi");
+      const render = diagram.render();
+      expect(render).toContain("autonumber");
+    });
+  });
+
+  describe("custom", () => {
+    test("should add a custom", () => {
+      const diagram = new SequenceDiagram();
+      diagram.custom("Hello");
+      expect(diagram.sequence[0]).toMatchObject({ text: "Hello" });
+    });
+
+    test("should add multiple customs", () => {
+      const diagram = new SequenceDiagram();
+      diagram.custom("Hello");
+      diagram.custom("Hi");
+      expect(diagram.sequence[0]).toMatchObject({ text: "Hello" });
+      expect(diagram.sequence[1]).toMatchObject({ text: "Hi" });
+    });
+
+    test("should render all customs", () => {
+      const diagram = new SequenceDiagram();
+      diagram.custom("Hello");
+      diagram.custom("Hi");
+      const render = diagram.render();
+      expect(render).toContain("Hello");
+      expect(render).toContain("Hi");
+    });
+  });
+
   describe("demo case", () => {
     test("should render demo case", () => {
       const diagram = new SequenceDiagram();

diff --git a/types/sequence-diagram.ts b/types/sequence-diagram.ts
@@ -64,6 +64,11 @@ export interface SequenceComment {
   text: string;
 }
 
+export interface SequenceCustom {
+  type: "custom";
+  text: string;
+}
+
 export type SequenceItemKey =
   | "participant"
   | "actor"
@@ -75,6 +80,7 @@ export type SequenceItemKey =
   | "note"
   | "rect"
   | "comment"
+  | "custom"
   | SequenceRegion;
 export type SequenceItem =
   | SequenceParticipant
@@ -85,14 +91,40 @@ export type SequenceItem =
   | SequenceNote
   | SequenceRegionItem
   | SequenceRect
-  | SequenceComment;
+  | SequenceComment
+  | SequenceCustom;
+
+export interface SequenceDiagramConstructor {
+  /**
+   * The title of the diagram
+   */
+  title?: string;
+  /**
+   * Use autonumbering for the diagram
+   */
+  autonumber?: boolean;
+  /**
+   * Custom styles
+   */
+  styles?: string;
+}
 
 export interface SequenceDiagramInterface extends Mermaid {
   /**
    * The current sequence diagram sequence
    */
   sequence: SequenceItem[];
 
+  /**
+   * Whether to use autonumbering for the diagram
+   */
+  autonumber?: boolean;
+
+  /**
+   * Custom styles to apply to elements in the diagram
+   */
+  styles?: string;
+
   /**
    * Add a participant to the diagram
    * @param name The name of the participant
@@ -286,6 +318,18 @@ export interface SequenceDiagramInterface extends Mermaid {
    */
   renderComment(comment: SequenceComment): string;
 
+  /**
+   * Add a custom statement to the diagram
+   * @param text The text of the custom statement
+   */
+  custom(text: string): void;
+
+  /**
+   * Render a custom statement
+   * @param custom The custom statement to render
+   */
+  renderCustom(custom: SequenceCustom): string;
+
   /**
    * Defines the render methods that are used for each item in the sequence diagram
    */