when dragging node from taskbar to canvas.. immediately show it centered around the pointer position

Author: devhelpr

libs/app-canvas/src/app/components/node-sidebar-menu.tsx

@@ -298,6 +298,9 @@ export class NodeSidebarMenuComponent extends Component<
         nodeInfo
       );
       if (node && node.nodeInfo) {
+        // TODO : IMPROVE THIS (should be handled by the internals behind createVisualNode )
+        (node.nodeInfo as any).taskType = nodeType;
+
         const elementRect = (
           node.domElement as unknown as HTMLElement | SVGElement
         ).getBoundingClientRect();
@@ -306,17 +309,23 @@ export class NodeSidebarMenuComponent extends Component<
           elementRect.x - rootX,
           elementRect.y - rootY
         );
-        // TODO : IMPROVE THIS
-        (node.nodeInfo as any).taskType = nodeType;
-        (node.domElement as HTMLElement).setPointerCapture(event.pointerId);
 
+        (node.domElement as HTMLElement).setPointerCapture(event.pointerId);
         pointerDown(
           x - rect.x + (node.width ?? 0) / 2,
           y - rect.y + (node.height ?? 0) / 2,
           node,
           canvasApp.canvas,
           canvasApp.interactionStateMachine
         );
+
+        // sets the initial position of the node to the pointer position so that it centers around the pointer position
+        node.update?.(
+          node,
+          node.x - (node.width ?? 0) / 2,
+          node.y - (node.height ?? 0) / 2,
+          node
+        );
       }
     }
   };

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

@@ -340,7 +340,7 @@ export const createRectNode = <T extends BaseNodeInfo>(
         thumbs,
         componentWrapper,
         {
-          classNames: ``,
+          classNames: '',
         },
         settings?.adjustToFormContent
           ? false
@@ -367,7 +367,7 @@ export const createRectNode = <T extends BaseNodeInfo>(
         thumbs,
         componentWrapper,
         {
-          classNames: ``,
+          classNames: '',
         },
         settings?.adjustToFormContent
           ? false
@@ -609,7 +609,8 @@ export const visualNodeFactory = <T extends BaseNodeInfo>(
         childNode,
         isAsyncCompute,
         nodeInfo as unknown as T,
-        getNodeTaskFactory
+        getNodeTaskFactory,
+        undefined
       ) as CreateNodeInfo<T>;
       // if (!nodeInstance) {
       //   return;