basic roundtrip OCIF import and export to code-flow-canvas without losing OCIF information that code-flow-canvas doesn't support

devhelpr · devhelpr · commit 0f95e8bba720 · 2025-01-24T13:05:38.000+01:00
diff --git a/apps/vps-web/public/test.ocif.json b/apps/vps-web/public/test.ocif.json
@@ -0,0 +1,28 @@
+{
+  "ocif": "https://canvasprotocol.org/ocif/0.2",
+  "nodes": [
+    {
+      "id": "n1",
+      "position": [100, 100],
+      "resource": "r1"
+    },
+    {
+      "id": "n2",
+      "position": [100, 100],
+      "data": [
+        {
+          "type": "circle-node",
+          "radius": 50
+        }
+      ]
+    }
+  ],
+  "resources": [
+    {
+      "id": "r1",
+      "representations": [
+        { "mime-type": "text/plain", "content": "Hello, World!" }
+      ]
+    }
+  ]
+}
diff --git a/apps/vps-web/public/test.with-relation.ocif.json b/apps/vps-web/public/test.with-relation.ocif.json
@@ -0,0 +1,34 @@
+{
+  "ocif": "https://canvasprotocol.org/ocif/0.2",
+  "nodes": [
+    {
+      "id": "n1",
+      "position": [100, 100],
+      "resource": "r1"
+    },
+    {
+      "id": "n2",
+      "position": [100, 100],
+      "data": [
+        {
+          "type": "circle-node",
+          "radius": 50
+        }
+      ]
+    }
+  ],
+  "relations": [
+    {
+      "type": "@ocwg/set",
+      "members": ["n1", "n2"]
+    }
+  ],
+  "resources": [
+    {
+      "id": "r1",
+      "representations": [
+        { "mime-type": "text/plain", "content": "Hello, World!" }
+      ]
+    }
+  ]
+}
diff --git a/libs/app-canvas/src/app/components/navbar-components.tsx b/libs/app-canvas/src/app/components/navbar-components.tsx
@@ -38,6 +38,7 @@ import {
   setStopAnimations,
 } from '../follow-path/animate-path';
 import { OCWGExporter } from '../exporters/export-ocwg';
+import { clearOCIF, importOCIF, isValidOCIF } from '../importers/ocif-importer';
 
 export class NavbarComponent extends Component<
   AppNavComponentsProps<NodeInfo>
@@ -143,13 +144,67 @@ export class NavbarComponent extends Component<
             textColorClasses="text-white"
             caption="Import"
             onClick={() => {
+              clearOCIF();
               this.import();
             }}
             dropdownItems={[
               {
                 caption: 'Import as OCIF',
                 onClick: () => {
-                  //
+                  const input = document.createElement(
+                    'input'
+                  ) as HTMLInputElement & {
+                    files: FileList;
+                  };
+
+                  input.type = 'file';
+                  input.setAttribute('accept', 'application/JSON');
+                  input.onchange = () => {
+                    const files = Array.from(input.files);
+                    if (files && files.length > 0) {
+                      // const file = URL.createObjectURL(files[0]);
+                      // console.log(file);
+
+                      const reader = new FileReader();
+                      reader.addEventListener('load', (event) => {
+                        const canvasApp = this.props.getCanvasApp();
+                        if (!canvasApp) {
+                          return;
+                        }
+                        if (event && event.target && event.target.result) {
+                          const ocifData = JSON.parse(
+                            event.target.result.toString()
+                          );
+                          if (!isValidOCIF(ocifData)) {
+                            alert('Invalid OCIF file');
+                            return;
+                          }
+                          const flow = importOCIF(ocifData);
+                          console.log('IMPORT DATA OCIF', ocifData, flow);
+                          setStopAnimations();
+                          const interval = setInterval(() => {
+                            if (!getIsStopAnimations()) {
+                              clearInterval(interval);
+                              this.props.clearCanvas();
+                              this.props.importToCanvas(
+                                flow.flows.flow.nodes,
+                                canvasApp,
+                                this.props.canvasUpdated,
+                                undefined,
+                                0,
+                                getNodeTaskFactory,
+                                flow.compositions
+                              );
+                              this.props.getCanvasApp()?.centerCamera();
+                              this.props.initializeNodes();
+                            }
+                          }, 0);
+                        }
+                      });
+                      reader.readAsBinaryString(files[0]);
+                    }
+                  };
+                  input.click();
                 },
               },
             ]}
@@ -651,6 +706,7 @@ export class NavbarComponent extends Component<
     event.preventDefault();
     const example = (event.target as HTMLSelectElement).value;
     if (example && confirm(`Are you sure you want to load ${example}?`)) {
+      clearOCIF();
       fetch(`/example-flows/${example}`)
         .then((response) => response.json())
         .then((data) => {
diff --git a/libs/app-canvas/src/app/exporters/BaseExporter.ts b/libs/app-canvas/src/app/exporters/BaseExporter.ts
@@ -25,9 +25,15 @@ export abstract class BaseExporter<T extends ExportFile, X> {
   protected createExportFile(): T {
     throw new Error('Method not implemented.');
   }
+  protected mergeWithAdditionalIbfo(
+    _elements: ElementNodeMap<BaseNodeInfo>
+  ): void {
+    //
+  }
   convertToExportFile(): T {
     this.file = this.createExportFile();
     this.exportNodes(undefined, this.exportInfo.canvasApp.elements);
+
     return this.file;
   }
 
@@ -137,6 +143,8 @@ export abstract class BaseExporter<T extends ExportFile, X> {
       }
       this.exportMultiPortConnection(connectionContextInfo, nodeInfo, node);
     });
+
+    this.mergeWithAdditionalIbfo(elements);
   }
   protected exportConnection(
     _contextInfo: X,
diff --git a/libs/app-canvas/src/app/exporters/export-ocwg.ts b/libs/app-canvas/src/app/exporters/export-ocwg.ts
@@ -4,19 +4,21 @@ import {
   BaseNodeInfo,
   IThumbNodeComponent,
   GetNodeTaskFactory,
+  ElementNodeMap,
 } 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';
+import { getCurrentOCIF } from '../importers/ocif-importer';
 
 interface OCWGInfo {
   index: number;
 }
-const nodeInfoPropertyName = '@code-flow-canvas/node-properties';
-const connectionNodeInfoPropertyName =
+export const nodeInfoPropertyName = '@code-flow-canvas/node-properties';
+export const connectionNodeInfoPropertyName =
   '@code-flow-canvas/connection-properties';
 
 export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
@@ -31,6 +33,67 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
     return structuredClone(ocwgEmptyFile);
   }
 
+  isValidCodeFlowCanvasNode(node: any): boolean {
+    if (node.data && Array.isArray(node.data)) {
+      return node.data.some(
+        (d: any) =>
+          d.type === nodeInfoPropertyName ||
+          d.type === connectionNodeInfoPropertyName
+      );
+    }
+    return false;
+  }
+
+  doesRootOCIFNodeExistInFlow(
+    id: string,
+    elements: ElementNodeMap<BaseNodeInfo>
+  ): boolean {
+    return elements.has(`${id}`);
+  }
+
+  override mergeWithAdditionalIbfo(
+    elements: ElementNodeMap<BaseNodeInfo>
+  ): void {
+    const rootOCIF = getCurrentOCIF();
+    if (!this.file || !rootOCIF) {
+      return;
+    }
+    if (rootOCIF.resources) {
+      this.file.resources = rootOCIF.resources;
+    }
+    if (rootOCIF.nodes) {
+      rootOCIF.nodes.forEach((node: any) => {
+        if (
+          !this.isValidCodeFlowCanvasNode(node) &&
+          !this.doesRootOCIFNodeExistInFlow(node.id, elements)
+        ) {
+          this.file?.nodes.push(node);
+        }
+      });
+    }
+    if (rootOCIF.relations) {
+      rootOCIF.relations.forEach((relation: any) => {
+        if (!this.file?.relations.find((r) => r.id === relation.id)) {
+          this.file?.relations.push(relation);
+        }
+      });
+    }
+    if (rootOCIF.schemas) {
+      rootOCIF.schemas.forEach((schema: any) => {
+        if (!this.file?.schemas.find((s) => s.uri === schema.uri)) {
+          this.file?.schemas.push(schema);
+        }
+      });
+    }
+    if (rootOCIF.resources) {
+      rootOCIF.resources.forEach((resource: any) => {
+        if (!this.file?.resources.find((r) => r.uri === resource.uri)) {
+          this.file?.resources.push(resource);
+        }
+      });
+    }
+  }
+
   override createExportInfoContext(): OCWGInfo {
     return {
       index: 1,
@@ -70,7 +133,7 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
       });
     }
     const ocwgNode: OCWGNode = {
-      id: `shape:${node.id}`,
+      id: `${node.id}`,
       position: [node.x, node.y],
       size: [node.width ?? 0, node.height ?? 0],
       data: [
@@ -116,7 +179,7 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
       return;
     }
     const ocwgNode: OCWGNode = {
-      id: `shape:${node.id}`,
+      id: `connection:${node.id}`,
       position: [node.x, node.y],
       size: [node.width ?? 0, node.height ?? 0],
       data: [
@@ -125,11 +188,11 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
           type: connectionNodeInfoPropertyName,
           nodeType: nodeInfo.type,
           start: {
-            connected_to: `shape:${node.startNode.id}`,
+            connected_to: `${node.startNode.id}`,
             port_name: 'output',
           },
           end: {
-            connected_to: `shape:${node.endNode.id}`,
+            connected_to: `${node.endNode.id}`,
             port_name: 'input',
           },
         },
@@ -143,8 +206,8 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
         const relation = {
           type: '@ocwg/rel/edge' as const,
           id: `${node.id}-edge`,
-          from: `shape:${node.startNode.id}`,
-          to: `shape:${node.endNode.id}`,
+          from: `${node.startNode.id}`,
+          to: `${node.endNode.id}`,
           directed: true,
         };
         this.file.relations.push(relation);
@@ -170,11 +233,11 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
           type: connectionNodeInfoPropertyName,
           nodeType: nodeInfo.type,
           start: {
-            connected_to: `shape:${node.startNode.id}`,
+            connected_to: `${node.startNode.id}`,
             port_name: node.startNodeThumb?.thumbName,
           },
           end: {
-            connected_to: `shape:${node.endNode.id}`,
+            connected_to: `${node.endNode.id}`,
             port_name: node.endNodeThumb?.thumbName,
           },
         },
@@ -189,8 +252,8 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
           id: `${node.id}-edge`,
           type: '@ocwg/rel/edge' as const,
           directed: true,
-          from: `shape:${node.startNode.id}`,
-          to: `shape:${node.endNode.id}`,
+          from: `${node.startNode.id}`,
+          to: `${node.endNode.id}`,
         };
         this.file.relations.push(relation);
       }
diff --git a/libs/app-canvas/src/app/importers/ocif-importer.ts b/libs/app-canvas/src/app/importers/ocif-importer.ts

Original file line number	Diff line number	Diff line change
`@@ -25,9 +25,15 @@ export abstract class BaseExporter<T extends ExportFile, X> {`
`25`	`25`	`protected createExportFile(): T {`
`26`	`26`	`throw new Error('Method not implemented.');`
`27`	`27`	`}`
	`28`	`+ protected mergeWithAdditionalIbfo(`
	`29`	`+ _elements: ElementNodeMap<BaseNodeInfo>`
	`30`	`+ ): void {`
	`31`	`+ //`
	`32`	`+ }`
`28`	`33`	`convertToExportFile(): T {`
`29`	`34`	`this.file = this.createExportFile();`
`30`	`35`	`this.exportNodes(undefined, this.exportInfo.canvasApp.elements);`
	`36`	`+`
`31`	`37`	`return this.file;`
`32`	`38`	`}`
`33`	`39`
`@@ -137,6 +143,8 @@ export abstract class BaseExporter<T extends ExportFile, X> {`
`137`	`143`	`}`
`138`	`144`	`this.exportMultiPortConnection(connectionContextInfo, nodeInfo, node);`
`139`	`145`	`});`
	`146`	`+`
	`147`	`+ this.mergeWithAdditionalIbfo(elements);`
`140`	`148`	`}`
`141`	`149`	`protected exportConnection(`
`142`	`150`	`_contextInfo: X,`