move code to create custom nodes more easily to library packages

Author: devhelpr

apps/vps-web/src/app/ai-flow-engine-worker/worker-base-rect-node-class.tsx

@@ -0,0 +1,101 @@
+import {
+  createJSXElement,
+  FlowNode,
+  IComputeResult,
+  IRectNodeComponent,
+  Rect,
+  IFlowCanvasBase,
+  FormField,
+  InitialValues,
+  IRunCounter,
+  IConnectionNodeComponent,
+} from '@devhelpr/visual-programming-system';
+import { FlowEngine, NodeInfo, RunCounter } from '@devhelpr/web-flow-executor';
+
+export type CreateRunCounterContext = (
+  isRunViaRunButton: boolean,
+  shouldResetConnectionSlider: boolean,
+  onFlowFinished?: () => void
+) => RunCounter;
+
+export class BaseRectNode {
+  nodeRenderElement: HTMLElement | undefined = undefined;
+  rectElement: HTMLElement | undefined = undefined;
+  canvasAppInstance: IFlowCanvasBase<NodeInfo> | undefined = undefined;
+  id: string;
+  node: IRectNodeComponent<NodeInfo> | undefined = undefined;
+  updated: () => void;
+
+  rectInstance: Rect<NodeInfo> | undefined;
+
+  createRunCounterContext: CreateRunCounterContext | undefined = undefined;
+
+  static readonly nodeTypeName: string = 'rect-node';
+  static readonly nodeTitle: string = 'Rect node';
+  static readonly category: string = 'Default';
+
+  static readonly text: string = 'rect';
+
+  static getFormFields:
+    | ((
+        getNode: () => IRectNodeComponent<NodeInfo>,
+        updated: () => void,
+        values?: InitialValues
+      ) => FormField[])
+    | undefined = undefined;
+
+  static readonly disableManualResize: boolean = true;
+  flowEngine: FlowEngine | undefined = undefined;
+  constructor(
+    id: string,
+    updated: () => void,
+    node: IRectNodeComponent<NodeInfo>,
+    flowEngine?: FlowEngine
+  ) {
+    this.id = id;
+    this.updated = updated;
+    this.node = node;
+    this.flowEngine = flowEngine;
+  }
+
+  initNode(_node: IRectNodeComponent<NodeInfo>, _flowEngine?: FlowEngine) {
+    //
+  }
+
+  destroy() {
+    //
+  }
+
+  updateVisual:
+    | ((data: any, scopeId?: string | undefined) => void)
+    | undefined = undefined;
+
+  initializeCompute: (() => void) | undefined = undefined;
+
+  compute = (
+    input: unknown,
+    _loopIndex?: number,
+    _payload?: unknown,
+    _portName?: string,
+    _scopeId?: string,
+    _runCounter?: IRunCounter,
+    _connection?: IConnectionNodeComponent<NodeInfo>
+  ): Promise<IComputeResult> => {
+    return new Promise<IComputeResult>((resolve) => {
+      resolve({
+        result: input,
+        output: input,
+        followPath: undefined,
+      });
+    });
+  };
+
+  childElementSelector = '.child-node-wrapper > textarea';
+  render(_node: FlowNode<NodeInfo>) {
+    return <div></div>;
+  }
+  onResize: ((width: number, height: number) => void) | undefined = undefined;
+  setSize = (width: number, height: number) => {
+    //
+  };
+}

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

@@ -1,11 +1,11 @@
+import { BaseRectNode } from '@devhelpr/app-canvas';
 import {
   createJSXElement,
   FlowNode,
   IComputeResult,
   IRectNodeComponent,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
-import { BaseRectNode } from './base-rect-node-class';
 
 export class CanvasNode extends BaseRectNode {
   static readonly nodeTypeName: string = 'canvas-rect-node';

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

@@ -1,3 +1,4 @@
+import { BaseRectNode } from '@devhelpr/app-canvas';
 import {
   createElement,
   createJSXElement,
@@ -7,8 +8,6 @@ import {
 } from '@devhelpr/visual-programming-system';
 import { getRunIndex, NodeInfo, runNode } from '@devhelpr/web-flow-executor';
 
-import { BaseRectNode } from './base-rect-node-class';
-
 class Label extends HTMLElement {
   constructor() {
     super();

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

@@ -7,7 +7,7 @@ import { NodeInfo } from '@devhelpr/web-flow-executor';
 
 // @ts-expect-error:will-fix-later
 import TestWorker from './workers/test-worker?worker';
-import { BaseRectNode } from './base-rect-node-class';
+import { BaseRectNode } from '@devhelpr/app-canvas';
 
 const testWorker = new TestWorker();
 

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

@@ -1,3 +1,4 @@
+import { BaseRectNode } from '@devhelpr/app-canvas';
 import {
   createJSXElement,
   FlowNode,
@@ -6,7 +7,6 @@ import {
   InitialValues,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
-import { BaseRectNode } from './base-rect-node-class';
 
 export class PromptImageNode extends BaseRectNode {
   static readonly nodeTypeName: string = 'prompt-image-rect-node';

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

@@ -1,3 +1,4 @@
+import { BaseRectNode } from '@devhelpr/app-canvas';
 import {
   createJSXElement,
   FlowNode,
@@ -7,7 +8,6 @@ import {
   FormFieldType,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
-import { BaseRectNode } from './base-rect-node-class';
 
 export class PromptNode extends BaseRectNode {
   static readonly nodeTypeName: string = 'prompt-rect-node';

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

@@ -1,3 +1,4 @@
+import { BaseRectNode } from '@devhelpr/app-canvas';
 import {
   createElement,
   createJSXElement,
@@ -7,8 +8,6 @@ import {
 } from '@devhelpr/visual-programming-system';
 import { getRunIndex, NodeInfo, runNode } from '@devhelpr/web-flow-executor';
 
-import { BaseRectNode } from './base-rect-node-class';
-
 interface WebcamViewerSettings {
   fadeRadius: number;
   fadePower: number;

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

@@ -4,15 +4,9 @@ import {
   RunCounter,
 } from '@devhelpr/web-flow-executor';
 import { mermaidNodeName, getMermaidNode } from './mermaid';
-import { getRectNode } from './rect-node';
+
 import { OvalNode } from './classes/oval-node-class';
 import { DrawGridNode } from './classes/draw-grid-node';
-import {
-  isBaseRectNode,
-  isFactoryNode,
-  NodeRegistration,
-} from './utils/register-helpers';
-import { createNodeClass, RectNode } from './classes/rect-node-class';
 import { WebcamViewerNode } from './classes/webcam-node';
 import { CanvasNode } from './classes/canvas-node-class';
 import { PromptNode } from './classes/prompt-node-class';
@@ -35,6 +29,14 @@ import {
   renderTestNodeDefinition,
   RenderTestNodeVisual,
 } from '../custom-nodes-v2/render-test-node-definition';
+import {
+  NodeRegistration,
+  RectNode,
+  createNodeClass,
+  isFactoryNode,
+  isBaseRectNode,
+  getRectNode,
+} from '@devhelpr/app-canvas';
 
 const nodes: NodeRegistration[] = [
   () => ({