mulitple fixes and improvemetns .. ocif support extended, support for debug-info .. improved positioning/pointer handling

Author: devhelpr

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

@@ -0,0 +1,73 @@
+{
+  "ocif": "https://canvasprotocol.org/ocif/0.3",
+  "nodes": [
+    {
+      "id": "berlin-node",
+      "position": [100, 100],
+      "size": [100, 50],
+      "resource": "berlin-res",
+      "data": [
+        {
+          "type": "@ocwg/node/rect",
+          "strokeWidth": 3,
+          "strokeColor": "#000000",
+          "fillColor": "#00FF00"
+        }
+      ]
+    },
+    {
+      "id": "germany-node",
+      "position": [300, 100],
+      "size": [100, 60],
+      "resource": "germany-res",
+      "data": [
+        {
+          "type": "@ocwg/node/oval",
+          "strokeWidth": 5,
+          "strokeColor": "#FF0000",
+          "fillColor": "#FFFFFF"
+        }
+      ]
+    },
+    {
+      "id": "arrow-1",
+      "data": [
+        {
+          "type": "@ocwg/node/arrow",
+          "strokeColor": "#000000",
+          "start": [200, 125],
+          "end": [350, 130],
+          "startMarker": "none",
+          "endMarker": "arrowhead",
+          "relation": "relation-1"
+        }
+      ]
+    }
+  ],
+  "relations": [
+    {
+      "id": "relation-1",
+      "data": [
+        {
+          "type": "@ocwg/rel/edge",
+          "start": "berlin-node",
+          "end": "germany-node",
+          "rel": "https://www.wikidata.org/wiki/Property:P1376",
+          "node": "arrow-1"
+        }
+      ]
+    }
+  ],
+  "resources": [
+    {
+      "id": "berlin-res",
+      "representations": [{ "mime-type": "text/plain", "content": "Berlin" }]
+    },
+    {
+      "id": "germany-res",
+      "representations": [
+        { "mime-type": "text/plain", "content": "Germany 🇩🇪" }
+      ]
+    }
+  ]
+}

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

@@ -1,16 +1,42 @@
 import {
   createJSXElement,
   FlowNode,
+  IComputeResult,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
 import { BaseRectNode } from './rect-node-class';
 
+import TestWorker from './workers/test-worker?worker';
+
+const testWorker = new TestWorker();
+
+testWorker.addEventListener('message', (event) => {
+  console.log('Worker response:', event.data);
+});
+
 export class OvalNode extends BaseRectNode {
   static readonly nodeTypeName = 'oval-node';
   static readonly nodeTitle = 'Oval node';
   static readonly category = 'Default test';
   static readonly text = 'oval';
 
+  override compute = (
+    input: string,
+    _loopIndex?: number,
+    _payload?: any
+  ): Promise<IComputeResult> => {
+    return new Promise<IComputeResult>((resolve) => {
+      testWorker.postMessage(input);
+      testWorker.onmessage = (event) => {
+        resolve({
+          result: event.data.payload.processedData,
+          output: event.data.payload.processedData,
+          followPath: undefined,
+        });
+      };
+    });
+  };
+
   childElementSelector = '.child-node-wrapper > *:first-child';
   render = (node: FlowNode<NodeInfo>) => {
     const nodeInfo = node.nodeInfo as any;

apps/vps-web/src/app/custom-nodes/classes/workers/test-worker.ts

@@ -0,0 +1,53 @@
+/// <reference lib="webworker" />
+
+// Worker context type declaration
+declare const self: DedicatedWorkerGlobalScope;
+
+// Message event handler
+self.addEventListener('message', (event: MessageEvent) => {
+  const { data } = event;
+
+  // Example computation
+  const result = processData(data);
+
+  // Send the result back to the main thread
+  self.postMessage({
+    type: 'computation-result',
+    payload: result,
+  });
+});
+
+// Example processing function
+function processData(data: any) {
+  // Simulate some computation
+  const startTime = Date.now();
+
+  // Simple example: if data is a number, double it
+  // If it's a string, reverse it
+  let result;
+  if (typeof data === 'number') {
+    result = data * 2;
+  } else if (typeof data === 'string') {
+    result = data.split('').reverse().join('');
+  } else {
+    result = data;
+  }
+
+  // Add processing time to result
+  return {
+    originalData: data,
+    processedData: result,
+    processingTime: Date.now() - startTime,
+  };
+}
+
+// Error handling
+self.addEventListener('error', (error) => {
+  console.log('Worker error:', error.message);
+  self.postMessage({
+    type: 'error',
+    payload: error.message,
+  });
+});
+
+export {}; // Add export to make this a module

apps/vps-web/src/app/pages/counter.json

@@ -1,6 +1,7 @@
 import { Flow } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
 import flowData from './counter.json';
+import { registerNodes } from '../custom-nodes/register-nodes';
 
 export function examplePage() {
   const appElement = document.getElementById('app-root')!;
@@ -19,7 +20,15 @@ export function examplePage() {
     };
     appElement.classList.add('hidden');
     pageElement.classList.remove('hidden');
-    new module.FlowAppElement('#page-app-root', storageProvider, true, 20, 32);
+    new module.FlowAppElement(
+      '#page-app-root',
+      storageProvider,
+      false,
+      20,
+      32,
+      undefined,
+      registerNodes
+    );
     //result.destroy();
   });
 }

apps/vps-web/src/app/pages/example.tsx

@@ -8,6 +8,7 @@ import {
 import '@shoelace-style/shoelace/dist/themes/light.css';
 import '@shoelace-style/shoelace/dist/components/color-picker/color-picker.js';
 import { registerNodes } from '../custom-nodes/register-nodes';
+import { ocifVersion } from '@devhelpr/app-canvas';
 
 export function ocwgPage() {
   // Add color picker popup
@@ -52,7 +53,7 @@ export function ocwgPage() {
       class="hidden bg-white z-[50000] overflow-hidden fixed w-[384px] h-[384px] max-w-[calc(100vw-80px)] bottom-[80px] right-[40px] grid grid-rows-[auto_1fr]"
     >
       <div class="flex flex-wrap">
-        <h1 class="font-bold text-xl p-2">OpenCanvas OCIF 0.2 (WiP)</h1>
+        <h1 class="font-bold text-xl p-2">{`OpenCanvas OCIF ${ocifVersion} (WiP)`}</h1>
         <button
           id="ocwg-copy-to-clipboard"
           title="Copy to clipboard"

apps/vps-web/src/app/pages/ocwg.tsx

@@ -15,6 +15,9 @@ export default defineConfig({
       transformMixedEsModules: true,
     },
   },
+  worker: {
+    format: 'es',
+  },
   server: {
     port: 4200,
     host: 'localhost',

apps/vps-web/vite.config.ts

@@ -0,0 +1,41 @@
+import {
+  createJSXElement,
+  renderElement,
+} from '@devhelpr/visual-programming-system';
+
+// export const DebugInfo = () => {
+//   return <div></div>;
+// };
+
+export class DebugInfoController {
+  debugElement: HTMLElement | undefined;
+  constructor(rootElement: HTMLElement) {
+    renderElement(
+      <div
+        class={`fixed top-0 right-0 z-[50000] bg-white text-black p-2 border border-gray-300`}
+        getElement={(element: HTMLElement) => {
+          this.debugElement = element;
+        }}
+      ></div>,
+      rootElement
+    );
+  }
+
+  sendDebugInfo(debugInfo: Record<string, boolean | number | string>) {
+    if (this.debugElement) {
+      this.debugElement.innerHTML = '';
+      renderElement(
+        <div>
+          {Object.keys(debugInfo).map((key) => {
+            return (
+              <div>
+                {key}: {debugInfo[key]}
+              </div>
+            );
+          })}
+        </div>,
+        this.debugElement
+      );
+    }
+  }
+}

libs/app-canvas/src/app/components/debug-info.tsx

@@ -420,7 +420,7 @@ export class GLNavbarComponent extends Component<
             this.props.initializeNodes();
           }
         });
-        reader.readAsBinaryString(files[0]);
+        reader.readAsText(files[0]);
       }
     };
     input.click();

libs/app-canvas/src/app/components/gl-navbar-components.ts

@@ -202,7 +202,7 @@ export class NavbarComponent extends Component<
                           }, 0);
                         }
                       });
-                      reader.readAsBinaryString(files[0]);
+                      reader.readAsText(files[0]);
                     }
                   };
                   input.click();
@@ -681,7 +681,7 @@ export class NavbarComponent extends Component<
             }, 0);
           }
         });
-        reader.readAsBinaryString(files[0]);
+        reader.readAsText(files[0]);
       }
     };
     input.click();
@@ -736,7 +736,7 @@ export class NavbarComponent extends Component<
             }
           }
         });
-        reader.readAsBinaryString(files[0]);
+        reader.readAsText(files[0]);
       }
     };
     input.click();