improved group export and import to OCIF but still WiP

Author: devhelpr

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

@@ -99,14 +99,16 @@ export abstract class BaseExporter<T extends ExportFile, X> {
         isRectThumb,
         parentId
       );
-      if (!isRectThumb) {
-        node.thumbConnectors?.forEach((thumb) => {
-          this.exportThumb(contextInfo, thumb);
-        });
-      }
+      if (id) {
+        if (!isRectThumb) {
+          node.thumbConnectors?.forEach((thumb) => {
+            this.exportThumb(contextInfo, thumb);
+          });
+        }
 
-      if (node.nodeInfo?.canvasAppInstance) {
-        this.exportNodes(id, node.nodeInfo.canvasAppInstance.elements);
+        if (node.nodeInfo?.canvasAppInstance) {
+          this.exportNodes(id, node.nodeInfo.canvasAppInstance.elements);
+        }
       }
     });
 

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

@@ -219,7 +219,26 @@ export class OCIFExporter extends BaseExporter<OCIFFile, OCIFInfo> {
       data: [...portsNode],
       resource: `${node.id}-resource`,
     };
-
+    if (nodeInfo.type === 'group') {
+      // only export group as a relation
+      if (
+        node.nodeInfo?.isGroup &&
+        this.file &&
+        node.nodeInfo?.groupedNodeIds
+      ) {
+        const relation = {
+          id: `${ocifNode.id}`,
+          data: [
+            {
+              type: '@ocif/rel/group' as const,
+              members: [...node.nodeInfo.groupedNodeIds],
+            },
+          ],
+        };
+        this.file.relations.push(relation);
+      }
+      return '';
+    }
     if (
       ocifNode.data &&
       nodeInfo.type !== 'rect-node' &&
@@ -259,18 +278,7 @@ export class OCIFExporter extends BaseExporter<OCIFFile, OCIFInfo> {
       id: `${ocifNode.id}-resource`,
       representations: [{ 'mime-type': 'text/plain', content: nodeInfo.type }],
     });
-    if (node.nodeInfo?.isGroup && this.file && node.nodeInfo?.groupedNodeIds) {
-      const relation = {
-        id: `${ocifNode.id}-group}`,
-        data: [
-          {
-            type: '@ocif/rel/group' as const,
-            members: [...node.nodeInfo.groupedNodeIds],
-          },
-        ],
-      };
-      this.file.relations.push(relation);
-    }
+
     return ocifNode.id;
   }
   override exportThumb(

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

@@ -253,6 +253,28 @@ export const importOCIF = (ocif: any) => {
       }
     });
   }
+
+  if (ocif.relations) {
+    ocif.relations.forEach((relation: any) => {
+      if (relation && relation.data) {
+        const group = getExtenstionData(relation, '@ocif/rel/group');
+        if (group) {
+          flow.flows['flow'].nodes.push({
+            id: relation.id,
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+            nodeType: 'Shape',
+            nodeInfo: {
+              type: 'group',
+              groupedNodeIds: group.members,
+            } as any,
+          });
+        }
+      }
+    });
+  }
   return flow;
 };