fix dragging rect nodes on the canvas, make rect nodes connectable

Author: devhelpr

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

@@ -66,6 +66,16 @@ w-min h-min
             this.updated();
           }}
           contentEditable={true}
+          pointerdown={(e: PointerEvent) => {
+            if (e.shiftKey && this.rectElement) {
+              this.rectElement.contentEditable = 'false';
+            }
+          }}
+          pointerup={(e: PointerEvent) => {
+            if (this.rectElement) {
+              this.rectElement.contentEditable = 'true';
+            }
+          }}
         >
           {nodeInfo?.text ?? ''}
         </div>

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

@@ -8,6 +8,8 @@ import {
   Rect,
   renderElement,
   Theme,
+  ThumbConnectionType,
+  ThumbType,
   visualNodeFactory,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '@devhelpr/web-flow-executor';
@@ -55,14 +57,38 @@ export const getRectNode =
       computeAsync,
       initializeCompute,
       false,
-      flowNode?.width ?? 10,
-      flowNode?.height ?? 10,
-      [],
+      flowNode?.width ?? 200,
+      flowNode?.height ?? 100,
+      [
+        {
+          thumbType: ThumbType.Center,
+          thumbIndex: 0,
+          connectionType: ThumbConnectionType.startOrEnd,
+          color: 'white',
+          label: ' ',
+          name: 'input-output',
+          hidden: true,
+          maxConnections: -1,
+        },
+      ],
       (_values?: InitialValues): FormField[] => {
         return [];
       },
       (nodeInstance) => {
-        if (!flowNode) {
+        console.log('before rect-node !flowNod', flowNode);
+        const flowNodeInstance: FlowNode<NodeInfo> = flowNode ?? {
+          id: nodeInstance.node.id,
+          x: 0,
+          y: 0,
+          width: 200,
+          height: 100,
+          nodeInfo: {
+            fillColor: 'black',
+            strokeColor: 'white',
+            strokeWidth: 2,
+          } as any,
+        };
+        if (!flowNodeInstance) {
           return;
         }
         rect = nodeInstance.rect;
@@ -78,7 +104,13 @@ export const getRectNode =
         if (childNodeInstance) {
           childNodeInstance.remove();
         }
-        renderElement(rectNode.render(flowNode), childNodeWrapper);
+
+        console.log(
+          'render rect-node',
+          flowNodeInstance.width,
+          flowNodeInstance.height
+        );
+        renderElement(rectNode.render(flowNodeInstance), childNodeWrapper);
         nodeRenderElement = (
           rect?.nodeComponent?.domElement as HTMLElement
         ).querySelector('.child-node-wrapper > *:first-child');
@@ -124,6 +156,9 @@ export const getRectNode =
         childNodeWrapperClass: 'child-node-wrapper',
         centerToYPositionThumb: false,
         skipDetermineSizeOnInit: true,
+
+        isRectThumb: true,
+        rectThumbWithStraightConnections: true,
       },
       <div class="child-instance"></div>,
       true

libs/app-canvas/src/app/components/toolbar.tsx

@@ -158,9 +158,9 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
         props.getCanvasAction() !== CanvasAction.newConnectionCreated
       ) {
         const outputConnectionInfo = (
-          (info.node as IConnectionNodeComponent<T>).startNode
+          (info.node as IConnectionNodeComponent<T>)?.startNode
             ?.nodeInfo as BaseNodeInfo
-        ).outputConnectionInfo;
+        )?.outputConnectionInfo;
         if (outputConnectionInfo) {
           popupTriggeredFromEffect = false;
           // skipHide = true;

libs/visual-programming-system/src/canvas-app/index.ts

@@ -1428,6 +1428,7 @@ export class FlowCanvas<T extends BaseNodeInfo>
     if (!rectInstance || !rectInstance.nodeComponent) {
       throw new Error('rectInstance is undefined');
     }
+    this.rectInstanceList[rectInstance.nodeComponent.id] = rectInstance;
     rectInstance.nodeComponent.nodeInfo = nodeInfo;
     if (this.onCanvasUpdated) {
       this.onCanvasUpdated(undefined, undefined, FlowChangeType.AddNode);

libs/visual-programming-system/src/components/rect-thumb.ts

@@ -253,7 +253,7 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
             this.canvasUpdated,
             undefined,
             this.containerNode,
-            undefined,
+            this.theme,
             undefined,
             this.rootElement
           )
@@ -274,7 +274,7 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
             this.canvasUpdated,
             undefined,
             this.containerNode,
-            undefined,
+            this.theme,
             undefined,
             this.rootElement
           );

libs/visual-programming-system/src/utils/create-rect-node.tsx

@@ -367,6 +367,7 @@ export const createRectNode = <T extends BaseNodeInfo>(
           classNames: '',
           hasCustomStyling: settings?.hasCustomStyling ?? false,
           customClassName: settings?.customClassName,
+          centerToYPositionThumb: settings?.centerToYPositionThumb,
           skipDetermineSizeOnInit: settings?.skipDetermineSizeOnInit,
         },
         settings?.adjustToFormContent