export to mermaid

Author: devhelpr

libs/app-canvas/src/app/components/dropdown-button.tsx

@@ -20,7 +20,7 @@ export interface DropdownButtonProps {
 export const DropdownButton = (props: DropdownButtonProps) => {
   let wrapperElement: HTMLDivElement | null = null;
   let ulElement: HTMLUListElement | null = null;
-  let toggle: boolean = false;
+  let toggle = false;
   window.addEventListener('resize', () => {
     if (wrapperElement) {
       toggle = false;
@@ -73,10 +73,12 @@ export const DropdownButton = (props: DropdownButtonProps) => {
         getElement={(element: HTMLUListElement) => {
           ulElement = element;
         }}
-        class={`fixed hidden group-[.open]:flex ${props.bgColorClasses} p-4 rounded-md flex-col gap-2`}
+        class={`fixed hidden group-[.open]:flex ${props.bgColorClasses} rounded-md flex-col`}
       >
         {props.dropdownItems.map((item) => (
-          <li class={`text-white ${props.textColorClasses}`}>
+          <li
+            class={`text-white hover:bg-slate-600 px-4 py-2 ${props.textColorClasses}`}
+          >
             <button
               class="appearance-none"
               click={(event: MouseEvent) => {

libs/app-canvas/src/app/components/navbar-components.tsx

@@ -140,7 +140,7 @@ export class NavbarComponent extends Component<
           <DropdownButton
             class=""
             mainBgColorClass="bg-slate-500"
-            bgColorClasses="bg-slate-500 hover:bg-slate-600 "
+            bgColorClasses="bg-slate-500 "
             textColorClasses="text-white"
             caption="Export"
             onClick={() => {
@@ -153,6 +153,12 @@ export class NavbarComponent extends Component<
                   this.export(true);
                 },
               },
+              {
+                caption: 'Export as mermaid',
+                onClick: () => {
+                  this.exportToMermaid();
+                },
+              },
             ]}
           />,
           this.exportButton
@@ -438,6 +444,47 @@ export class NavbarComponent extends Component<
     );
   };
 
+  exportToMermaid = () => {
+    const canvasApp = this.props.getCanvasApp();
+    if (!canvasApp) {
+      return;
+    }
+    const data = serializeElementsMap(canvasApp.elements);
+    // const compositions = serializeCompositions<NodeInfo>(
+    //   canvasApp.compositons.getAllCompositions()
+    // );
+
+    let mermaid = 'flowchart TD\n';
+    for (const node of data) {
+      if (node.nodeType === 'Shape') {
+        let isNodeExported = false;
+        data.forEach((n) => {
+          if (n.nodeType === 'Connection') {
+            const connection = n;
+            if (connection.startNodeId === node.id && connection.endNodeId) {
+              const endNode = data.find((n) => n.id === connection.endNodeId);
+              if (endNode) {
+                isNodeExported = true;
+                mermaid += `  ${node.id}[${node.nodeInfo?.type}] --> ${endNode?.id}[${endNode.nodeInfo?.type}]\n`;
+              }
+            }
+          }
+        });
+        if (!isNodeExported) {
+          mermaid += `  ${node.id}[${node.nodeInfo?.type}]\n`;
+        }
+      }
+    }
+
+    saveFile(
+      mermaid,
+      'vps-flow',
+      'text/vnd.mermaid',
+      '.mermaid',
+      'vps-flow-mermaid'
+    );
+  };
+
   onClickImport = (event: Event) => {
     event.preventDefault();
     const input = document.createElement('input') as HTMLInputElement & {