improvements to ocif import/export roundtrip

Author: devhelpr

apps/vps-web/public/test.ocif.json

@@ -6,6 +6,7 @@
       "position": [100, 100],
       "resource": "r1"
     },
+
     {
       "id": "n2",
       "position": [100, 100],
@@ -15,6 +16,19 @@
           "radius": 50
         }
       ]
+    },
+    {
+      "id": "n3",
+      "position": [200, 200],
+      "resource": "r1",
+      "data": [
+        {
+          "type": "rect-node",
+          "strokeColor": "red",
+          "strokeWidth": 2,
+          "fillColor": "darkred"
+        }
+      ]
     }
   ],
   "resources": [

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

@@ -33,6 +33,26 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
     return structuredClone(ocwgEmptyFile);
   }
 
+  isOCIFNodeThatCodeFlowCanvasSupports(node: any): boolean {
+    if (node.data && Array.isArray(node.data)) {
+      const result = node.data.some((d: any) => d.type === 'rect-node');
+      if (result) {
+        return true;
+      }
+    }
+    if (!node.data) {
+      return true;
+    }
+    if (node.data && Array.isArray(node.data)) {
+      return node.data.some(
+        (d: any) =>
+          d.type === nodeInfoPropertyName ||
+          d.type === connectionNodeInfoPropertyName
+      );
+    }
+    return false;
+  }
+
   isValidCodeFlowCanvasNode(node: any): boolean {
     if (node.data && Array.isArray(node.data)) {
       return node.data.some(
@@ -64,6 +84,30 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
     if (rootOCIF.nodes) {
       rootOCIF.nodes.forEach((node: any) => {
         if (
+          this.isOCIFNodeThatCodeFlowCanvasSupports(node) &&
+          this.doesRootOCIFNodeExistInFlow(node.id, elements)
+        ) {
+          const codeFlowCanvasNode = this.file?.nodes.find(
+            (n) => n.id === node.id
+          );
+          if (codeFlowCanvasNode && codeFlowCanvasNode.data) {
+            node.data?.forEach((d: any) => {
+              if (!codeFlowCanvasNode.data) {
+                return;
+              }
+              if (
+                d.type !== nodeInfoPropertyName &&
+                d.type !== connectionNodeInfoPropertyName
+              ) {
+                codeFlowCanvasNode.data.push(d);
+              }
+            });
+          }
+
+          if (node.resource && codeFlowCanvasNode) {
+            codeFlowCanvasNode.resource = node.resource;
+          }
+        } else if (
           !this.isValidCodeFlowCanvasNode(node) &&
           !this.doesRootOCIFNodeExistInFlow(node.id, elements)
         ) {

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

@@ -5,6 +5,7 @@ export type OCWGNode = {
   data?: {
     [key: string]: any;
   }[];
+  resource?: string;
 };
 
 export type OCWGEdge = {

libs/app-canvas/src/app/importers/ocif-importer.ts

@@ -7,6 +7,14 @@ import {
 
 let rootOCIF: any = undefined;
 
+function isSupportedOCIFNode(ocifNode: any): boolean {
+  return (
+    ocifNode.data &&
+    Array.isArray(ocifNode.data) &&
+    ocifNode.data.some((d: any) => d.type === 'rect-node')
+  );
+}
+
 function isValidCodeFlowCanvasNode(node: any): boolean {
   if (node.data && Array.isArray(node.data)) {
     return node.data.some((d: any) => d.type === nodeInfoPropertyName);
@@ -25,10 +33,11 @@ function isValidCodeFlowCanvasConnection(node: any): boolean {
 function getNodeInfoFromOCIFNode(node: any): NodeInfo | false {
   const nodeInfo = node.data.find((d: any) => d.type === nodeInfoPropertyName);
   if (nodeInfo) {
-    delete nodeInfo.type;
-    nodeInfo.type = nodeInfo.nodeType;
-    delete nodeInfo.nodeType;
-    return nodeInfo;
+    const clonedNodeInfo = structuredClone(nodeInfo);
+    delete clonedNodeInfo.type;
+    clonedNodeInfo.type = clonedNodeInfo.nodeType;
+    delete clonedNodeInfo.nodeType;
+    return clonedNodeInfo;
   }
   return false;
 }
@@ -38,16 +47,17 @@ function getConnectionInfoFromOCIFNode(node: any): any | false {
     (d: any) => d.type === connectionNodeInfoPropertyName
   );
   if (nodeInfo) {
-    delete nodeInfo.type;
-    nodeInfo.type = nodeInfo.nodeType;
-    delete nodeInfo.nodeType;
+    const clonedNodeInfo = structuredClone(nodeInfo);
+    delete clonedNodeInfo.type;
+    clonedNodeInfo.type = clonedNodeInfo.nodeType;
+    delete clonedNodeInfo.nodeType;
     return {
       endX: node.position[0],
       endY: node.position[1],
-      startNodeId: nodeInfo.start.connected_to,
-      endNodeId: nodeInfo.end.connected_to,
-      startThumbName: nodeInfo.start.port_name,
-      endThumbName: nodeInfo.end.port_name,
+      startNodeId: clonedNodeInfo.start.connected_to,
+      endNodeId: clonedNodeInfo.end.connected_to,
+      startThumbName: clonedNodeInfo.start.port_name,
+      endThumbName: clonedNodeInfo.end.port_name,
       lineType: 'BezierCubic',
       layer: 1,
       nodeInfo: {},
@@ -94,6 +104,16 @@ export const importOCIF = (ocif: any) => {
             ...connection,
           });
         }
+      } else if (node.data && isSupportedOCIFNode(node)) {
+        flow.flows['flow'].nodes.push({
+          id: node.id,
+          x: node.position[0],
+          y: node.position[1],
+          nodeType: 'Shape',
+          nodeInfo: {
+            type: 'expression',
+          },
+        });
       } else if (!node.data) {
         flow.flows['flow'].nodes.push({
           id: node.id,