[pull] main from activepieces:main

packages/react-ui/src/app/builder/flow-canvas/flow-drag-layer.tsx

@@ -9,9 +9,9 @@ import {
   useSensor,
   useSensors,
 } from '@dnd-kit/core';
-import { ReactFlowInstance, useReactFlow, useViewport } from '@xyflow/react';
+import { ReactFlowInstance, useReactFlow } from '@xyflow/react';
 import { t } from 'i18next';
-import { useCallback, useState } from 'react';
+import { useCallback, useRef } from 'react';
 import { toast } from 'sonner';
 
 import {
@@ -30,8 +30,8 @@ import { flowCanvasConsts } from './utils/consts';
 import { ApButtonData } from './utils/types';
 
 const FlowDragLayer = ({ children }: { children: React.ReactNode }) => {
-  const viewport = useViewport();
-  const [previousViewPort, setPreviousViewPort] = useState(viewport);
+  const reactFlow = useReactFlow();
+  const previousViewPortRef = useRef({ x: 0, y: 0, zoom: 1 });
   const [
     setActiveDraggingStep,
     applyOperation,
@@ -58,9 +58,11 @@ const FlowDragLayer = ({ children }: { children: React.ReactNode }) => {
       }
       const { x, y } = args.pointerCoordinates;
       const { width, height } = args.collisionRect;
+      const currentViewport = reactFlow.getViewport();
+      const previousViewPort = previousViewPortRef.current;
       const deltaViewport = {
-        x: previousViewPort.x - viewport.x,
-        y: previousViewPort.y - viewport.y,
+        x: previousViewPort.x - currentViewport.x,
+        y: previousViewPort.y - currentViewport.y,
       };
       const updated = {
         ...args,
@@ -77,7 +79,7 @@ const FlowDragLayer = ({ children }: { children: React.ReactNode }) => {
       };
       return rectIntersection(updated);
     },
-    [viewport.x, viewport.y, previousViewPort.x, previousViewPort.y],
+    [reactFlow],
   );
   const draggedStep = activeDraggingStep
     ? flowStructureUtil.getStep(activeDraggingStep, flowVersion.trigger)
@@ -92,14 +94,14 @@ const FlowDragLayer = ({ children }: { children: React.ReactNode }) => {
         setDraggedNote(draggedNote, NoteDragOverlayMode.MOVE);
       }
     }
-    setPreviousViewPort(viewport);
+    previousViewPortRef.current = reactFlow.getViewport();
   };
 
-  const handleDragCancel = () => {
+  const handleDragCancel = useCallback(() => {
     setActiveDraggingStep(null);
     setDraggedNote(null, null);
-  };
-  const reactFlow = useReactFlow();
+  }, [setActiveDraggingStep, setDraggedNote]);
+
   const handleDragEnd = (e: DragEndEvent) => {
     setActiveDraggingStep(null);
     setDraggedNote(null, null);

packages/react-ui/src/app/builder/flow-canvas/index.tsx

@@ -163,16 +163,17 @@ export const FlowCanvas = React.memo(
 
     const { setCursorPosition } = useCursorPosition();
     const translateExtent = useMemo(() => {
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight + 100;
       const nodes = graph.nodes;
       const graphRectangle = getNodesBounds(nodes);
-      const stepWidth = flowCanvasConsts.AP_NODE_SIZE.STEP.width;
       const start = {
-        x: -graphRectangle.width - 5 * stepWidth,
-        y: -graphRectangle.height,
+        x: graphRectangle.x - windowWidth,
+        y: graphRectangle.y - windowHeight,
       };
       const end = {
-        x: 2.5 * graphRectangle.width + 5 * stepWidth,
-        y: 2 * graphRectangle.height,
+        x: graphRectangle.x + graphRectangle.width + windowWidth,
+        y: graphRectangle.y + graphRectangle.height + windowHeight,
       };
       const extent: CoordinateExtent = [
         [start.x, start.y],

packages/react-ui/src/app/builder/index.tsx

@@ -139,7 +139,9 @@ const BuilderPage = () => {
             [animateResizeClassName]: !isDraggingHandle,
           })}
           style={{
-            transitionDuration: `${flowCanvasConsts.SIDEBAR_ANIMATION_DURATION}ms`,
+            transitionDuration: `${
+              isDraggingHandle ? 0 : flowCanvasConsts.SIDEBAR_ANIMATION_DURATION
+            }ms`,
           }}
         >
           <div ref={rightSidePanelRef} className="h-full w-full">

packages/react-ui/src/lib/utils.ts

@@ -5,6 +5,7 @@ import i18next, { t } from 'i18next';
 import JSZip from 'jszip';
 import { useEffect, useRef, useState, RefObject } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { LocalesEnum, Permission } from '@activepieces/shared';
 
@@ -233,11 +234,12 @@ export const localesMap = {
 
 export const useElementSize = (ref: RefObject<HTMLElement>) => {
   const [size, setSize] = useState({ width: 0, height: 0 });
+  const debouncedSetSize = useDebouncedCallback(setSize, 150);
   useEffect(() => {
     const handleResize = (entries: ResizeObserverEntry[]) => {
       if (entries[0]) {
         const { width, height } = entries[0].contentRect;
-        setSize({ width, height });
+        debouncedSetSize({ width, height });
       }
     };