WiP : more generic and easy way to define node-types for both in worker and in main-thread...preparing for type-system

Author: devhelpr

apps/vps-web/src/app/custom-nodes-v2/pie-chart-compute.ts

@@ -0,0 +1,17 @@
+import { NodeCompute } from '@devhelpr/visual-programming-system';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
+
+// depending if "ai-canvas" is used.. the below is called from a worker or main thread
+
+export const pieChartCompute: NodeCompute<NodeInfo> = {
+  initializeCompute: () => {
+    // Initialization logic if needed
+  },
+  compute: async (_data: unknown) => {
+    const random = (Math.random() * 100).toFixed(2);
+    return Promise.resolve({
+      output: random,
+      result: random,
+    });
+  },
+};

apps/vps-web/src/app/custom-nodes-v2/pie-chart-definition.ts

@@ -0,0 +1,7 @@
+import { NodeDefinition } from '@devhelpr/visual-programming-system';
+
+export const pieChartDefinition: NodeDefinition = {
+  nodeTypeName: 'pie-chart',
+  description:
+    'A pie chart visualizes data as slices of a circle, representing proportions.',
+};

apps/vps-web/src/app/custom-nodes-v2/pie-chart-visual.tsx

@@ -0,0 +1,15 @@
+import {
+  renderElement,
+  createJSXElement,
+  NodeVisual,
+} from '@devhelpr/visual-programming-system';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
+
+export const pieChartVisual: NodeVisual<NodeInfo> = {
+  updateVisual: (data: unknown, parentNode: HTMLElement) => {
+    // Clear the parent node before rendering... should this be handled by the framework?
+    parentNode.innerHTML = '';
+    renderElement(<div>Pie Chart {data}</div>, parentNode);
+    // perhaps additionally allow for returning jsx here?
+  },
+};

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

@@ -11,6 +11,8 @@ import {
   renderElement,
   FormField,
   InitialValues,
+  IRunCounter,
+  IConnectionNodeComponent,
 } from '@devhelpr/visual-programming-system';
 import { FlowEngine, NodeInfo, RunCounter } from '@devhelpr/web-flow-executor';
 import { CorePropertiesSetupEditor } from './core-properties-settings-editor';
@@ -144,10 +146,16 @@ export class BaseRectNode {
     return popupInstance;
   };
 
+  initializeCompute: (() => void) | undefined = undefined;
+
   compute = (
-    input: string,
+    input: unknown,
     _loopIndex?: number,
-    _payload?: any
+    _payload?: unknown,
+    _portName?: string,
+    _scopeId?: string,
+    _runCounter?: IRunCounter,
+    _connection?: IConnectionNodeComponent<NodeInfo>
   ): Promise<IComputeResult> => {
     return new Promise<IComputeResult>((resolve) => {
       resolve({

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

@@ -27,7 +27,7 @@ export class CanvasNode extends BaseRectNode {
     super(id, updated, node);
   }
   compute = (
-    input: string,
+    input: unknown,
     _loopIndex?: number,
     _payload?: any
   ): Promise<IComputeResult> => {

apps/vps-web/src/app/custom-nodes/classes/draw-grid-node.tsx

@@ -594,7 +594,7 @@ export class DrawGridNode extends BaseRectNode {
   };
 
   compute = (
-    input: string,
+    input: unknown,
     _loopIndex?: number,
     _payload?: any
   ): Promise<IComputeResult> => {

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

@@ -24,7 +24,7 @@ export class OvalNode extends BaseRectNode {
   static readonly disableManualResize: boolean = false;
 
   override compute = (
-    input: string,
+    input: unknown,
     _loopIndex?: number,
     _payload?: any
   ): Promise<IComputeResult> => {

apps/vps-web/src/app/custom-nodes/classes/prompt-image-class.tsx

@@ -34,7 +34,7 @@ export class PromptImageNode extends BaseRectNode {
     super(id, updated, node);
   }
   compute = (
-    _input: string,
+    _input: unknown,
     _loopIndex?: number,
     _payload?: any
   ): Promise<IComputeResult> => {

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

@@ -72,7 +72,7 @@ export class PromptNode extends BaseRectNode {
     super(id, updated, node);
   }
   compute = (
-    _input: string,
+    _input: unknown,
     _loopIndex?: number,
     _payload?: any
   ): Promise<IComputeResult> => {

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

@@ -3,6 +3,9 @@ import {
   FlowNode,
   IComputeResult,
   IRectNodeComponent,
+  NodeCompute,
+  NodeDefinition,
+  NodeVisual,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
 import { BaseRectNode } from './base-rect-node-class';
@@ -24,7 +27,7 @@ export class RectNode extends BaseRectNode {
     super(id, updated, node);
   }
   compute = (
-    input: string,
+    input: unknown,
     _loopIndex?: number,
     _payload?: any
   ): Promise<IComputeResult> => {
@@ -78,3 +81,54 @@ w-min h-min
   }
   onResize: ((width: number, height: number) => void) | undefined = undefined;
 }
+
+export const createNodeClass = (
+  nodeDefinition: NodeDefinition,
+  nodeVisual: NodeVisual<NodeInfo>,
+  compute: NodeCompute<NodeInfo>
+) => {
+  return class extends RectNode {
+    static readonly nodeTypeName: string = nodeDefinition.nodeTypeName;
+    static readonly nodeTitle: string = nodeDefinition.nodeTypeName;
+    static readonly category: string = nodeDefinition.category ?? 'Default';
+    static readonly description: string = nodeDefinition.description;
+
+    initializeCompute = () => {
+      if (compute.initializeCompute) {
+        compute.initializeCompute();
+      }
+    };
+    compute = (
+      input: unknown,
+      _loopIndex?: number,
+      _payload?: any
+    ): Promise<IComputeResult> => {
+      return compute.compute(input, _loopIndex, _payload);
+    };
+    updateVisual = (data: unknown) => {
+      if (!this.rectElement || !this.node) {
+        return;
+      }
+      nodeVisual.updateVisual(
+        data,
+        this.rectElement,
+        this.node.nodeInfo as NodeInfo
+      );
+    };
+    childElementSelector = '.child-node-wrapper > *:first-child';
+
+    // TOOD: bg-white/text-black should be in the nodeVisual but if its not use defaults
+    render = (_node: FlowNode<NodeInfo>) => {
+      return (
+        <div
+          class="h-full w-full bg-white text-black"
+          getElement={(element: HTMLDivElement) => {
+            this.rectElement = element;
+          }}
+        >
+          {nodeDefinition.nodeTypeName}
+        </div>
+      );
+    };
+  };
+};