improved ocif import/export and dealing with deleting connections/relations

Author: devhelpr

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

@@ -258,7 +258,7 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
 
   override exportConnection(
     _context: OCWGInfo,
-    nodeInfo: BaseNodeInfo,
+    _nodeInfo: BaseNodeInfo,
     node: IConnectionNodeComponent<BaseNodeInfo>
   ): void {
     if (!node.startNode || !node.endNode) {
@@ -277,20 +277,20 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
           endMarker: 'arrowhead',
           relation: `${node.id}-edge`,
         },
-        {
-          ...nodeInfo,
-          type: connectionNodeInfoPropertyName,
-          nodeType: nodeInfo.type,
-          lineType: (nodeInfo as any).lineType ?? 'Straight',
-          start: {
-            connected_to: `${node.startNode.id}`,
-            port_name: node.startNodeThumb?.thumbName ?? 'output',
-          },
-          end: {
-            connected_to: `${node.endNode.id}`,
-            port_name: node.endNodeThumb?.thumbName ?? 'input',
-          },
-        },
+        // {
+        //   ...nodeInfo,
+        //   type: connectionNodeInfoPropertyName,
+        //   nodeType: nodeInfo.type,
+        //   lineType: (nodeInfo as any).lineType ?? 'Straight',
+        //   start: {
+        //     connected_to: `${node.startNode.id}`,
+        //     port_name: node.startNodeThumb?.thumbName ?? 'output',
+        //   },
+        //   end: {
+        //     connected_to: `${node.endNode.id}`,
+        //     port_name: node.endNodeThumb?.thumbName ?? 'input',
+        //   },
+        // },
       ],
     };
     if (this.file?.nodes) {

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

@@ -130,6 +130,11 @@ import {
 } from '@devhelpr/web-flow-executor';
 import { PasteNodeCommand } from './command-handlers/paste-node-command/paste-node-command';
 import { clearOCIF, getCurrentOCIF, setOCIF } from './importers/ocif-importer';
+import {
+  OCIFRelation,
+  OCIFNode,
+  OCIFEdgeRelationExtension,
+} from './interfaces/ocif';
 
 export type CreateRunCounterContext = (
   isRunViaRunButton: boolean,
@@ -2171,6 +2176,30 @@ export class FlowAppElement extends AppElement<NodeInfo> {
     if (element.nodeInfo?.delete) {
       element.nodeInfo.delete();
     }
+    const ocif = getCurrentOCIF();
+    if (!ocif) {
+      return;
+    }
+    const node = element as INodeComponent<NodeInfo>;
+    if (node.nodeType === NodeType.Connection) {
+      const connection = node as IConnectionNodeComponent<NodeInfo>;
+      ocif.relations = ocif.relations.filter((relation: OCIFRelation) => {
+        let hasRelationToNode = false;
+        relation.data.forEach((extensionData) => {
+          if (
+            extensionData.type === '@ocwg/rel/edge' &&
+            (extensionData as unknown as OCIFEdgeRelationExtension).node ===
+              connection.id
+          ) {
+            hasRelationToNode = true;
+          }
+        });
+        return !hasRelationToNode;
+      });
+      ocif.nodes = ocif.nodes.filter((ocifNode: OCIFNode) => {
+        return ocifNode.id !== connection.id;
+      });
+    }
   };
 
   onPreclearCanvas = () => {

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

@@ -5,7 +5,7 @@ import {
   nodeInfoPropertyName,
 } from '../exporters/export-ocwg';
 import { ocifArrow, ocifSchema, ocifToCodeFlowCanvas } from '../consts/ocif';
-import { OCIFEdgeRelation } from '../interfaces/ocif';
+import { OCIFEdgeRelationExtension } from '../interfaces/ocif';
 
 let rootOCIF: any = undefined;
 
@@ -55,15 +55,14 @@ function isValidCodeFlowCanvasConnection(node: any): boolean {
 function getEdgeRelationById(
   ocif: any,
   relationId: string
-): OCIFEdgeRelation | undefined {
+): OCIFEdgeRelationExtension | undefined {
   if (!ocif.relations || !relationId) {
     return undefined;
   }
   const data = ocif.relations.find((r: any) => r.id === relationId);
   if (data) {
     const extension = getExtenstionData(data, '@ocwg/rel/edge');
     return {
-      id: data.id,
       type: extension.type,
       start: extension.start,
       end: extension.end,

libs/app-canvas/src/app/interfaces/ocif.ts

@@ -2,17 +2,36 @@ export interface OCIFRelataionData {
   type: string;
 }
 
+export interface OCIFEdgeRelationExtension extends OCIFRelataionData {
+  type: '@ocwg/rel/edge';
+  node: string;
+  start: string;
+  end: string;
+  rel: string;
+}
+
 export interface OCIFRelation {
   id: string;
   data: Array<OCIFRelataionData>;
 }
 
-export interface OCIFEdgeRelation {
-  id: string;
+// export interface OCIFEdgeRelation {
+//   id: string;
 
-  type: '@ocwg/rel/edge';
-  start: string;
-  end: string;
-  rel: string;
-  node: string;
+//   type: '@ocwg/rel/edge';
+//   start: string;
+//   end: string;
+//   rel: string;
+//   node: string;
+// }
+
+export interface OCIFExtension {
+  type: string;
+}
+
+export interface OCIFNode {
+  id: string;
+  position?: number[];
+  size?: number[];
+  data?: OCIFExtension[];
 }