export ports to ocwg/ocif

Author: devhelpr

apps/vps-web/src/app/pages/ocwg.tsx

@@ -169,13 +169,16 @@ export function ocwgPage() {
         }
       });
 
-    app.onStoreFlow = (_flow, canvasApp, _getNodeTaskFactory) => {
-      const ocwg = new module.OCWGExporter({
-        canvasApp: canvasApp,
-        downloadFile: (_data: any, _name: string, _dataType: string) => {
-          //
+    app.onStoreFlow = (_flow, canvasApp, getNodeTaskFactory) => {
+      const ocwg = new module.OCWGExporter(
+        {
+          canvasApp: canvasApp,
+          downloadFile: (_data: any, _name: string, _dataType: string) => {
+            //
+          },
         },
-      });
+        getNodeTaskFactory
+      );
       const file = ocwg.convertToExportFile();
       currentOcwgExport = JSON.stringify(file, null, 2);
       ocwgExport.innerHTML = '';

libs/app-canvas/src/app/exporters/BaseExporter.ts

@@ -7,12 +7,17 @@ import {
   cleanupNodeInfoForSerializing,
   BaseNodeInfo,
   IThumbNodeComponent,
+  GetNodeTaskFactory,
 } from '@devhelpr/visual-programming-system';
 import { Exporter } from './Exporter';
 import { ExportFile } from './export-interface/core-export';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
 
 export abstract class BaseExporter<T extends ExportFile, X> {
-  constructor(readonly exportInfo: Exporter) {
+  constructor(
+    readonly exportInfo: Exporter,
+    readonly getNodeTaskFactory: GetNodeTaskFactory<NodeInfo>
+  ) {
     //
   }
   file?: T;

libs/app-canvas/src/app/exporters/export-ocwg.ts

@@ -3,21 +3,26 @@ import {
   INodeComponent,
   BaseNodeInfo,
   IThumbNodeComponent,
+  GetNodeTaskFactory,
 } from '@devhelpr/visual-programming-system';
 import { Exporter } from './Exporter';
 
 import { BaseExporter } from './BaseExporter';
 import { OCWGFile, OCWGNode } from './ocwg/ocwg-schema';
 import { ocwgEmptyFile } from './ocwg/ocwg-empty-file';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
 
 interface OCWGInfo {
   index: number;
 }
 const nodeInfoPropertyName = '@code-flow-canvas/node-properties';
 
 export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
-  constructor(exportInfo: Exporter) {
-    super(exportInfo);
+  constructor(
+    exportInfo: Exporter,
+    getNodeTaskFactory: GetNodeTaskFactory<NodeInfo>
+  ) {
+    super(exportInfo, getNodeTaskFactory);
   }
 
   override createExportFile(): OCWGFile {
@@ -39,6 +44,29 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
     _isRectThumb: boolean,
     parentId?: string
   ): string {
+    const ports: string[] = [];
+    if (nodeInfo.type) {
+      const factory = this.getNodeTaskFactory(nodeInfo.type);
+      if (factory) {
+        const nodeTask = factory(() => {
+          //
+        });
+        if (nodeTask) {
+          nodeTask.thumbs?.forEach((thumb) => {
+            if (thumb.name) {
+              ports.push(thumb.name);
+            }
+          });
+        }
+      }
+    }
+    const portsNode: any[] = [];
+    if (ports.length > 0) {
+      portsNode.push({
+        type: '@ocwg/node/ports',
+        ports: ports,
+      });
+    }
     const ocwgNode: OCWGNode = {
       id: `shape:${node.id}`,
       position: [node.x, node.y],
@@ -49,6 +77,7 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
           type: nodeInfoPropertyName,
           nodeType: nodeInfo.type,
         },
+        ...portsNode,
       ],
     };
     if (this.file?.nodes) {
@@ -168,8 +197,11 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
   }
 }
 
-export const exportOCWG = (exportInfo: Exporter) => {
-  const tldrawExporter = new OCWGExporter(exportInfo);
+export const exportOCWG = (
+  exportInfo: Exporter,
+  getNodeTaskFactory: GetNodeTaskFactory<NodeInfo>
+) => {
+  const tldrawExporter = new OCWGExporter(exportInfo, getNodeTaskFactory);
   const file = tldrawExporter.convertToExportFile();
   exportInfo.downloadFile(
     JSON.stringify(file),

libs/app-canvas/src/app/exporters/export-tldraw.ts

@@ -4,6 +4,7 @@ import {
   cleanupNodeInfoForSerializing,
   BaseNodeInfo,
   IThumbNodeComponent,
+  GetNodeTaskFactory,
 } from '@devhelpr/visual-programming-system';
 import { Exporter } from './Exporter';
 import {
@@ -16,14 +17,18 @@ import {
 } from './tldraw/tldraw-emtpy-file';
 import { TlDrawFile } from './tldraw/tldraw-schema';
 import { BaseExporter } from './BaseExporter';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
 
 interface TLDrawInfo {
   index: number;
 }
 
 export class TLDrawExporter extends BaseExporter<TlDrawFile, TLDrawInfo> {
-  constructor(exportInfo: Exporter) {
-    super(exportInfo);
+  constructor(
+    exportInfo: Exporter,
+    getNodeTaskFactory: GetNodeTaskFactory<NodeInfo>
+  ) {
+    super(exportInfo, getNodeTaskFactory);
   }
 
   override createExportFile(): TlDrawFile {
@@ -194,8 +199,11 @@ export class TLDrawExporter extends BaseExporter<TlDrawFile, TLDrawInfo> {
   }
 }
 
-export const exportTldraw = (exportInfo: Exporter) => {
-  const tldrawExporter = new TLDrawExporter(exportInfo);
+export const exportTldraw = (
+  exportInfo: Exporter,
+  getNodeTaskFactory: GetNodeTaskFactory<NodeInfo>
+) => {
+  const tldrawExporter = new TLDrawExporter(exportInfo, getNodeTaskFactory);
   const file = tldrawExporter.convertToExportFile();
   exportInfo.downloadFile(
     JSON.stringify(file),

libs/app-canvas/src/app/flow-app.element.tsx

@@ -835,10 +835,13 @@ export class FlowAppElement extends AppElement<NodeInfo> {
                   if (!this.canvasApp) {
                     return;
                   }
-                  exportTldraw({
-                    canvasApp: this.canvasApp,
-                    downloadFile,
-                  });
+                  exportTldraw(
+                    {
+                      canvasApp: this.canvasApp,
+                      downloadFile,
+                    },
+                    getNodeTaskFactory
+                  );
                 }}
                 getElement={(element: HTMLElement) => {
                   this.exportCodeButton = element;

libs/app-canvas/src/app/gl-app.element.tsx

@@ -629,10 +629,13 @@ export class GLAppElement extends AppElement<GLNodeInfo> {
                 if (!this.canvasApp) {
                   return;
                 }
-                exportTldraw({
-                  canvasApp: this.canvasApp,
-                  downloadFile,
-                });
+                exportTldraw(
+                  {
+                    canvasApp: this.canvasApp,
+                    downloadFile,
+                  },
+                  getGLNodeTaskFactory
+                );
               }}
               getElement={(element: HTMLElement) => {
                 this.exportExternalButton = element;