test component

Author: devhelpr

apps/vps-web/src/app/custom-nodes-v2/render-test-node-definition.tsx

@@ -0,0 +1,86 @@
+import {
+  NodeDefinition,
+  createJSXElement,
+  NodeVisual,
+  renderElement,
+} from '@devhelpr/visual-programming-system';
+import { NodeInfo } from '@devhelpr/web-flow-executor';
+
+export const renderTestNodeDefinition: NodeDefinition = {
+  nodeTypeName: 'redner-tet-node',
+  description: 'A render test component',
+
+  nodeTheme: {
+    backgroundColorClass: 'bg-teal-400',
+    //textColorClass: 'text-white',
+  },
+};
+
+const TestComponent = ({
+  setUpdater,
+}: {
+  setUpdater?: (updated: (payload: any) => void) => void;
+}) => {
+  let elementInstance: HTMLElement | null = null;
+  setUpdater?.((payload: any) => {
+    console.log('TestComponent updated with payload:', payload);
+    if (elementInstance) {
+      elementInstance.innerHTML = `Updated with payload: ${JSON.stringify(
+        payload
+      )}`;
+    }
+  });
+  // This component can be used to test rendering and updates
+  return (
+    <div
+      getElement={(element: HTMLElement) => {
+        elementInstance = element;
+      }}
+    >
+      Hello from TestComponent
+    </div>
+  );
+};
+
+export class RenderTestNodeVisual extends NodeVisual<NodeInfo> {
+  additionalContainerCssClasses = 'overflow-y-auto p-8';
+  componentUpdater: ((payload: any) => void) | undefined = undefined;
+
+  render = () => {
+    return (
+      <div
+        getElement={(element: HTMLElement) => {
+          element.innerHTML = '';
+          renderElement(
+            <TestComponent
+              setUpdater={(updater) => {
+                this.componentUpdater = updater;
+              }}
+            />,
+            element
+          );
+        }}
+      ></div>
+    );
+  };
+  updateVisual = (
+    incomingData: unknown,
+    _parentNode: HTMLElement,
+    // Using underscore prefix to indicate intentionally unused parameter
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _nodeInfo: NodeInfo,
+    _scopeId?: string | undefined
+  ) => {
+    if (!this.canvasAppInstance) {
+      return;
+    }
+    this.componentUpdater?.(incomingData);
+  };
+
+  isResizing = false;
+  resizeObserver: ResizeObserver | undefined = undefined;
+
+  destroy() {
+    //
+  }
+}

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

@@ -31,6 +31,10 @@ import {
   dummy3Definition,
   dummyDefinition,
 } from '../custom-nodes-v2/dummy-definition';
+import {
+  renderTestNodeDefinition,
+  RenderTestNodeVisual,
+} from '../custom-nodes-v2/render-test-node-definition';
 
 const nodes: NodeRegistration[] = [
   () => ({
@@ -50,6 +54,7 @@ const nodes: NodeRegistration[] = [
   createNodeClass(dummyDefinition),
   createNodeClass(dummy2Definition),
   createNodeClass(dummy3Definition),
+  createNodeClass(renderTestNodeDefinition, RenderTestNodeVisual),
 ];
 
 export const registerNodes = (

package.json

@@ -4,6 +4,7 @@
   "license": "see license in license.md",
   "scripts": {
     "start": "nx serve vps-web",
+    "dev": "nx serve vps-web",
     "startapi": "nx serve vps-api",
     "build": "nx build vps-web",
     "build-all": "nx run-many --all --target=build --skip-nx-cache",