optional NodeVisual and NodeCompute classes

Author: devhelpr

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

@@ -0,0 +1,49 @@
+import {
+  FormFieldType,
+  NodeDefinition,
+} from '@devhelpr/visual-programming-system';
+
+export const dummyDefinition: NodeDefinition = {
+  nodeTypeName: 'dummy',
+  description: 'A dummy coponent.',
+  settingsFormFields: [
+    {
+      name: 'test',
+      fieldType: FormFieldType.Text,
+    },
+  ],
+  nodeTheme: {
+    backgroundColorClass: 'bg-teal-400',
+    //textColorClass: 'text-white',
+  },
+};
+
+export const dummy2Definition: NodeDefinition = {
+  nodeTypeName: 'dummy2',
+  description: 'A dummy coponent.',
+  settingsFormFields: [
+    {
+      name: 'test',
+      fieldType: FormFieldType.Text,
+    },
+  ],
+  nodeTheme: {
+    backgroundColorClass: 'bg-purple-400',
+    textColorClass: 'text-white',
+  },
+};
+
+export const dummy3Definition: NodeDefinition = {
+  nodeTypeName: 'dummy3',
+  description: 'A dummy coponent.',
+  settingsFormFields: [
+    {
+      name: 'test',
+      fieldType: FormFieldType.Text,
+    },
+  ],
+  nodeTheme: {
+    backgroundColorClass: 'bg-orange-400',
+    //textColorClass: 'text-white',
+  },
+};

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

@@ -1,4 +1,7 @@
-import { NodeVisual } from '@devhelpr/visual-programming-system';
+import {
+  createJSXElement,
+  NodeVisual,
+} from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
 import { initFormGenerator } from './form/VanillaFormRenderer';
 
@@ -8,7 +11,9 @@ export class FormVisual extends NodeVisual<NodeInfo> {
   private wheelEventHandler(e: WheelEvent) {
     e.stopPropagation();
   }
-
+  render = () => {
+    return <h1>Hello form</h1>;
+  };
   updateVisual = (
     incomingData: unknown,
     parentNode: HTMLElement,

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

@@ -96,8 +96,8 @@ w-min h-min
 
 export const createNodeClass = (
   nodeDefinition: NodeDefinition,
-  NodeVisualClass: typeof NodeVisual<NodeInfo>,
-  NodeComputeClass: typeof NodeCompute<NodeInfo>
+  NodeVisualClass?: typeof NodeVisual<NodeInfo>,
+  NodeComputeClass?: typeof NodeCompute<NodeInfo>
 ) => {
   return class extends RectNode {
     static readonly nodeTypeName: string = nodeDefinition.nodeTypeName;
@@ -161,8 +161,12 @@ export const createNodeClass = (
       if (!node.nodeInfo) {
         node.nodeInfo = {};
       }
-      this.nodeVisual = new NodeVisualClass(node, this.canvasAppInstance);
-      this.nodeCompute = new NodeComputeClass();
+      this.nodeVisual = NodeVisualClass
+        ? new NodeVisualClass(node, this.canvasAppInstance)
+        : new NodeVisual(node, this.canvasAppInstance);
+      this.nodeCompute = NodeComputeClass
+        ? new NodeComputeClass()
+        : new NodeCompute();
       // (this.nodeVisual as any).flowEngine = flowEngine;
       // (this.nodeVisual as any).baseRectNode = this;
       this.nodeVisual?.setTriggerOutputs(
@@ -319,16 +323,20 @@ export const createNodeClass = (
     render = (_node: FlowNode<NodeInfo>) => {
       return (
         <div
-          class={`h-full w-full bg-white text-black ${
+          class={`h-full w-full ${
+            nodeDefinition.nodeTheme?.backgroundColorClass ?? 'bg-white'
+          } ${nodeDefinition.nodeTheme?.textColorClass ?? 'text-black'} ${
             this.nodeVisual?.additionalContainerCssClasses ?? ''
           }`}
           getElement={(element: HTMLDivElement) => {
             this.rectElement = element;
           }}
         >
-          <div class="grid content-center justify-items-center h-full">
-            {nodeDefinition.nodeTypeName}
-          </div>
+          {this.nodeVisual?.render?.() ?? (
+            <div class="grid content-center justify-items-center h-full">
+              {nodeDefinition.nodeTypeName}
+            </div>
+          )}
         </div>
       );
     };

apps/vps-web/src/app/custom-nodes/register-nodes.tsx

@@ -26,6 +26,11 @@ import { PlotVisual } from '../custom-nodes-v2/plot-visual';
 import { formDefinition } from '../custom-nodes-v2/form-definition';
 import { FormCompute } from '../custom-nodes-v2/form-compute';
 import { FormVisual } from '../custom-nodes-v2/form-visual';
+import {
+  dummy2Definition,
+  dummy3Definition,
+  dummyDefinition,
+} from '../custom-nodes-v2/dummy-definition';
 
 const nodes: NodeRegistration[] = [
   () => ({
@@ -42,6 +47,9 @@ const nodes: NodeRegistration[] = [
   createNodeClass(pieChartDefinition, PieChartVisual, PieChartCompute),
   createNodeClass(plotDefinition, PlotVisual, PlotCompute),
   createNodeClass(formDefinition, FormVisual, FormCompute),
+  createNodeClass(dummyDefinition),
+  createNodeClass(dummy2Definition),
+  createNodeClass(dummy3Definition),
 ];
 
 export const registerNodes = (

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

@@ -471,7 +471,7 @@ export class AppElement<T extends BaseNodeInfo, TFlowEngine = unknown> {
       }
       return;
     }
-    if (key === 'backspace' || key === 'delete' || key === 'enter') {
+    if (key === 'backspace' || key === 'delete') {
       if (inInputControle || (event.target as HTMLElement)?.isContentEditable) {
         return;
       }

libs/visual-programming-system/src/interfaces/node-task-registry.ts

@@ -93,6 +93,8 @@ export class NodeVisual<T extends BaseNodeInfo> {
     this.canvasAppInstance = canvasApp;
     // Constructor logic
   }
+
+  render?: () => JSX.Element;
   updateVisual(
     _data: unknown,
     _parentNode: HTMLElement,
@@ -132,21 +134,29 @@ export interface NodeDefinition {
     fieldType: FormFieldType;
     defaultValue?: string | number | boolean;
   }[];
+  nodeTheme?: {
+    backgroundColorClass?: string;
+    textColorClass?: string;
+  };
 }
 
 export class NodeCompute<T extends BaseNodeInfo> {
   initializeCompute() {
     //
   }
   compute(
-    _input: unknown,
+    input: unknown,
     _loopIndex?: number,
     _payload?: unknown,
     _portName?: string,
     _scopeId?: string,
     _runCounter?: IRunCounter,
     _connection?: IConnectionNodeComponent<T>
   ): Promise<IComputeResult> {
-    return Promise.reject();
+    //return Promise.reject();
+    return Promise.resolve({
+      result: input,
+      output: input,
+    });
   }
 }