Toggle Diagram Orientation (#47)

Author: rcosta358

client/src/webview/mermaid.ts

@@ -5,7 +5,7 @@ import type { StateMachine } from "../types/fsm";
  * @param sm 
  * @returns Mermaid diagram string
  */
-export function createMermaidDiagram(sm: StateMachine): string {
+export function createMermaidDiagram(sm: StateMachine, orientation: "LR" | "TB"): string {
     if (!sm) return '';
 
     const lines: string[] = [];
@@ -15,6 +15,7 @@ export function createMermaidDiagram(sm: StateMachine): string {
     lines.push(`title: ${sm.className}`);
     lines.push('---');
     lines.push('stateDiagram-v2');
+    lines.push(`    direction ${orientation}`);
 
     // initial state
     lines.push(`    [*] --> ${sm.initial}`);

client/src/webview/script.ts

@@ -21,6 +21,7 @@ export function getScript(vscode: any, document: any, window: any) {
     let expandedErrors = new Set<number>();
     let stateMachine: StateMachine | undefined;
     let selectedTab: NavTab = 'verification';
+    let diagramOrientation: "LR" | "TB" = "TB";
 
     // initial state
     root.innerHTML = renderLoading();
@@ -69,13 +70,21 @@ export function getScript(vscode: any, document: any, window: any) {
         }
 
         // toggle show all diagnostics
-        if (target.classList.contains('show-all-button')) {
+        if (target.id === 'show-all-button') {
             e.stopPropagation();
             showAllDiagnostics = !showAllDiagnostics;
             updateView();
             return;
         }
 
+        // toggle diagram orientation
+        if (target.id === 'diagram-orientation-btn') {
+            e.stopPropagation();
+            diagramOrientation = diagramOrientation === "TB" ? "LR" : "TB";
+            updateView();
+            return;
+        }
+
         // toggle show more/less for errors
         if (target.classList.contains('show-more-button')) {
             e.stopPropagation();
@@ -129,8 +138,8 @@ export function getScript(vscode: any, document: any, window: any) {
         if (selectedTab === 'verification') {
             root.innerHTML = renderVerificationView(diagnostics, showAllDiagnostics, currentFile, expandedErrors, selectedTab)
         } else {
-            const diagram = createMermaidDiagram(stateMachine);
-            root.innerHTML = renderStateMachineView(stateMachine, diagram, selectedTab);
+            const diagram = createMermaidDiagram(stateMachine, diagramOrientation);
+            root.innerHTML = renderStateMachineView(stateMachine, diagram, selectedTab, diagramOrientation);
             if (stateMachine) renderMermaidDiagram(document, window);
         }
     }

client/src/webview/styles.ts

@@ -94,16 +94,16 @@ export function getStyles(): string {
             margin: 1rem 0;
         }
         .diagnostic-item {
-            background-color: var(--vscode-textBlockQuote-background);
+            background-color: var(--vscode-textCodeBlock-background);
             padding: 0.5rem 1rem;
             margin-bottom: 1rem;
             border-radius: 4px;
         }
         .error-item {
-            border-left: 4px solid var(--vscode-errorForeground);
+            border-left: 4px solid var(--vscode-editorError-foreground);
         }
         .warning-item {
-            border-left: 4px solid #d4ac0d;
+            border-left: 4px solid var(--vscode-editorWarning-foreground);
         }
         .section {
             margin-bottom: 1rem;
@@ -201,7 +201,8 @@ export function getStyles(): string {
         .show-more-button:hover {
             background-color: var(--vscode-editor-background);
         }
-        .show-all-button {
+        .underline-button {
+            color: var(--vscode-foreground);
             text-align: center;
             font-size: 0.8rem;
             opacity: 0.6;
@@ -213,7 +214,7 @@ export function getStyles(): string {
             border: none;
             text-decoration: underline;
         }
-        .show-all-button:hover {
+        .underline-button:hover {
             background: none;
         }
         .extra-content {

client/src/webview/views/diagram.ts

@@ -1,12 +1,15 @@
 import type { StateMachine } from "../../types/fsm";
 import { renderMainHeader, type NavTab } from "./sections";
 
-export function renderStateMachineView(sm: StateMachine, diagram: string, selectedTab: NavTab = 'state-machine'): string {
+export function renderStateMachineView(sm: StateMachine, diagram: string, selectedTab: NavTab = 'state-machine', orientation: "LR" | "TB"): string {
     return /*html*/`
         <div>
             ${renderMainHeader("", selectedTab)}
             ${sm ? /*html*/`
                 <div class="diagram-section">
+                     <button id="diagram-orientation-btn" class="underline-button">
+                        ${orientation === "TB" ? `Show diagram horizontally` : `Show diagram vertically`}
+                    </button>
                     <div class="diagram-container">
                         <pre class="mermaid">${diagram}</pre>
                     </div>

client/src/webview/views/verification/verification.ts

@@ -28,7 +28,7 @@ export function renderVerificationView(
             <p class="info">${infoMessage}</p>
             ${
                 diagnostics.length === 0 ? '' : /*html*/`
-                    <button class="show-all-button">
+                    <button id="show-all-button" class="underline-button">
                         ${showAll ? `Show file diagnostics` : `Show all diagnostics`}
                     </button>
                 `