improve storing some default properties and retaining original ocif flow after refresing

Author: devhelpr

apps/vps-web/src/app/custom-nodes/classes/rect-node-class.tsx

@@ -59,6 +59,12 @@ w-min h-min
           }`}
           spellcheck="false"
           blur={() => {
+            if (this.rectElement) {
+              if (this.rectElement.innerHTML.toString().length == 0) {
+                // hacky solution to prevent caret being aligned to top
+                this.rectElement.innerHTML = ' ';
+              }
+            }
             console.log('blur', this.rectElement?.textContent);
             if (this.node?.nodeInfo) {
               (this.node.nodeInfo as any).text = this.rectElement?.textContent;
@@ -71,7 +77,7 @@ w-min h-min
               this.rectElement.contentEditable = 'false';
             }
           }}
-          pointerup={(e: PointerEvent) => {
+          pointerup={() => {
             if (this.rectElement) {
               this.rectElement.contentEditable = 'true';
             }

apps/vps-web/src/app/custom-nodes/rect-node.tsx

@@ -75,24 +75,37 @@ export const getRectNode =
         return [];
       },
       (nodeInstance) => {
-        console.log('before rect-node !flowNod', flowNode);
+        const fillColorDefault = 'black';
+        const strokeColorDefault = 'white';
+        const strokeWidthDefault = 2;
+
         const flowNodeInstance: FlowNode<NodeInfo> = flowNode ?? {
           id: nodeInstance.node.id,
           x: 0,
           y: 0,
           width: 200,
           height: 100,
           nodeInfo: {
-            fillColor: 'black',
-            strokeColor: 'white',
-            strokeWidth: 2,
+            fillColor: fillColorDefault,
+            strokeColor: strokeColorDefault,
+            strokeWidth: strokeWidthDefault,
+            text: 'rect',
           } as any,
         };
         if (!flowNodeInstance) {
           return;
         }
         rect = nodeInstance.rect;
         node = nodeInstance.node as IRectNodeComponent<NodeInfo>;
+        if (!flowNode) {
+          if (!node.nodeInfo) {
+            node.nodeInfo = {} as any;
+          }
+          (node.nodeInfo as any).fillColor = fillColorDefault;
+          (node.nodeInfo as any).strokeColor = strokeColorDefault;
+          (node.nodeInfo as any).strokeWidth = strokeWidthDefault;
+          (node.nodeInfo as any).text = 'rect';
+        }
 
         rectNode = new RectNode(node.id, updated, node);
 
@@ -105,11 +118,6 @@ export const getRectNode =
           childNodeInstance.remove();
         }
 
-        console.log(
-          'render rect-node',
-          flowNodeInstance.width,
-          flowNodeInstance.height
-        );
         renderElement(rectNode.render(flowNodeInstance), childNodeWrapper);
         nodeRenderElement = (
           rect?.nodeComponent?.domElement as HTMLElement

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

@@ -25,7 +25,7 @@ export abstract class BaseExporter<T extends ExportFile, X> {
   protected createExportFile(): T {
     throw new Error('Method not implemented.');
   }
-  protected mergeWithAdditionalIbfo(
+  protected mergeWithAdditionalInfo(
     _elements: ElementNodeMap<BaseNodeInfo>
   ): void {
     //
@@ -144,7 +144,7 @@ export abstract class BaseExporter<T extends ExportFile, X> {
       this.exportMultiPortConnection(connectionContextInfo, nodeInfo, node);
     });
 
-    this.mergeWithAdditionalIbfo(elements);
+    this.mergeWithAdditionalInfo(elements);
   }
   protected exportConnection(
     _contextInfo: X,

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

@@ -74,7 +74,14 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
     return elements.has(`${id}`);
   }
 
-  override mergeWithAdditionalIbfo(
+  getNodeFromElements = (
+    id: string,
+    elements: ElementNodeMap<BaseNodeInfo>
+  ) => {
+    return elements.get(id);
+  };
+
+  override mergeWithAdditionalInfo(
     elements: ElementNodeMap<BaseNodeInfo>
   ): void {
     const rootOCIF = getCurrentOCIF();
@@ -97,13 +104,27 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
             console.log('export ocif node', codeFlowCanvasNode);
             node.data?.forEach((d: any) => {
               if (!codeFlowCanvasNode.data) {
+                // purely for typescript
                 return;
               }
               if (
                 d.type !== nodeInfoPropertyName &&
                 d.type !== connectionNodeInfoPropertyName &&
                 d.type !== '@ocwg/node/ports'
               ) {
+                if (d.type === 'rect-node') {
+                  const canvasNode = this.getNodeFromElements(
+                    node.id,
+                    elements
+                  );
+                  if (canvasNode) {
+                    const nodeInfo = canvasNode.nodeInfo as any;
+
+                    d.fillColor = nodeInfo?.fillColor ?? d.fillColor;
+                    d.strokeColor = nodeInfo?.strokeColor ?? d.strokeColor;
+                    d.strokeWidth = nodeInfo?.strokeWidth ?? d.strokeWidth;
+                  }
+                }
                 codeFlowCanvasNode.data.push(d);
               }
             });
@@ -181,13 +202,17 @@ export class OCWGExporter extends BaseExporter<OCWGFile, OCWGInfo> {
         ports: ports,
       });
     }
+    const clonedNodeInfo = structuredClone(nodeInfo) as any;
+    delete clonedNodeInfo.fillColor;
+    delete clonedNodeInfo.strokeColor;
+    delete clonedNodeInfo.strokeWidth;
     const ocwgNode: OCWGNode = {
       id: `${node.id}`,
       position: [node.x, node.y],
       size: [node.width ?? 0, node.height ?? 0],
       data: [
         {
-          ...nodeInfo,
+          ...clonedNodeInfo,
           type: nodeInfoPropertyName,
           nodeType: nodeInfo.type,
         },

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

@@ -129,6 +129,7 @@ import {
   setupCanvasNodeTaskRegistry,
 } from '@devhelpr/web-flow-executor';
 import { PasteNodeCommand } from './command-handlers/paste-node-command/paste-node-command';
+import { clearOCIF, getCurrentOCIF, setOCIF } from './importers/ocif-importer';
 
 export class CodeFlowWebAppCanvas {
   appRootSelector?: string;
@@ -1042,7 +1043,10 @@ export class FlowAppElement extends AppElement<NodeInfo> {
             if (!this.canvasApp) {
               throw new Error('canvasApp not defined');
             }
-
+            clearOCIF();
+            if (flow.ocif) {
+              setOCIF(flow.ocif);
+            }
             removeAllCompositions();
             importCompositions<NodeInfo>(flow.compositions, this.canvasApp);
             registerCompositionNodes(
@@ -1093,6 +1097,7 @@ export class FlowAppElement extends AppElement<NodeInfo> {
           schemaType: 'flow',
           schemaVersion: '0.0.1',
           id: this.flowId,
+          ocif: getCurrentOCIF(),
           flows: {
             flow: {
               flowType: 'flow',

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

@@ -211,3 +211,7 @@ export const clearOCIF = () => {
 export const getCurrentOCIF = () => {
   return rootOCIF;
 };
+
+export const setOCIF = (ocif: any) => {
+  rootOCIF = ocif;
+};