From 50bd2cf4ad8b91640e57b7146fa0abaf9b60832b Mon Sep 17 00:00:00 2001 From: Abdul <106555838+AbdulTheActivePiecer@users.noreply.github.com> Date: Thu, 15 Jan 2026 11:55:27 +0300 Subject: [PATCH 1/3] fix: canvas panning is now limited by window size and graph size (#10876) --- .../react-ui/src/app/builder/flow-canvas/index.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/react-ui/src/app/builder/flow-canvas/index.tsx b/packages/react-ui/src/app/builder/flow-canvas/index.tsx index cb309184e17..f0bcd9b67d6 100644 --- a/packages/react-ui/src/app/builder/flow-canvas/index.tsx +++ b/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], From f3c5518c0655124c9daf9271cad6971ccc3b54c5 Mon Sep 17 00:00:00 2001 From: Abdul <106555838+AbdulTheActivePiecer@users.noreply.github.com> Date: Thu, 15 Jan 2026 12:15:18 +0300 Subject: [PATCH 2/3] fix: panning in large flows was laggy (#10877) --- .../builder/flow-canvas/flow-drag-layer.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/react-ui/src/app/builder/flow-canvas/flow-drag-layer.tsx b/packages/react-ui/src/app/builder/flow-canvas/flow-drag-layer.tsx index 428955e4480..9658aab6c29 100644 --- a/packages/react-ui/src/app/builder/flow-canvas/flow-drag-layer.tsx +++ b/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); From d51736cbff8ba9a0bc4940d78cda852390ef8de5 Mon Sep 17 00:00:00 2001 From: Abdul <106555838+AbdulTheActivePiecer@users.noreply.github.com> Date: Thu, 15 Jan 2026 12:49:56 +0300 Subject: [PATCH 3/3] fix: resizing right step settings was laggy (#10878) --- packages/react-ui/src/app/builder/index.tsx | 4 +++- packages/react-ui/src/lib/utils.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-ui/src/app/builder/index.tsx b/packages/react-ui/src/app/builder/index.tsx index cfbbffe376d..4c3a2e5ee74 100644 --- a/packages/react-ui/src/app/builder/index.tsx +++ b/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`, }} >
diff --git a/packages/react-ui/src/lib/utils.ts b/packages/react-ui/src/lib/utils.ts index d71a2b0d741..9adeb287f50 100644 --- a/packages/react-ui/src/lib/utils.ts +++ b/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) => { 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 }); } };