From 739f999bb550ab51f88014ef160d821471335614 Mon Sep 17 00:00:00 2001
From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Date: Thu, 26 Aug 2021 15:27:12 +0530
Subject: [PATCH] fix: Fix canvas in bigger containers. (#6849)

---
 .../src/utils/hooks/useCanvasDragging.ts      | 53 +++++++++++++++++--
 1 file changed, 48 insertions(+), 5 deletions(-)

diff --git a/app/client/src/utils/hooks/useCanvasDragging.ts b/app/client/src/utils/hooks/useCanvasDragging.ts
index 02a3e834aa..fcd0cbd96a 100644
--- a/app/client/src/utils/hooks/useCanvasDragging.ts
+++ b/app/client/src/utils/hooks/useCanvasDragging.ts
@@ -64,23 +64,66 @@ export const useCanvasDragging = (
     setDraggingNewWidget,
     setDraggingState,
   } = useWidgetDragResize();
+  const getCanvasToDrawTopOffset = (
+    scrollParentTop: number,
+    scrollParentTopHeight: number,
+    canvasTop: number,
+    canvasHeight: number,
+  ) => {
+    return scrollParentTop > canvasTop
+      ? Math.min(
+          scrollParentTop - canvasTop,
+          canvasHeight - scrollParentTopHeight,
+        )
+      : 0;
+  };
 
   const updateCanvasStyles = () => {
     const parentCanvas: Element | null = getNearestParentCanvas(
       canvasRef.current,
     );
+
     if (parentCanvas && canvasDrawRef.current && canvasRef.current) {
-      const { height } = parentCanvas.getBoundingClientRect();
+      const {
+        height: scrollParentTopHeight,
+      } = parentCanvas.getBoundingClientRect();
       const { width } = canvasRef.current.getBoundingClientRect();
       canvasDrawRef.current.style.width = width + "px";
       canvasDrawRef.current.style.position = canExtend ? "absolute" : "sticky";
       canvasDrawRef.current.style.left = "0px";
-      canvasDrawRef.current.style.height = height + "px";
-      canvasDrawRef.current.style.top =
-        (canExtend ? parentCanvas.scrollTop : 0) + "px";
+      canvasDrawRef.current.style.top = getCanvasTopOffset() + "px";
+      canvasDrawRef.current.style.height = scrollParentTopHeight + "px";
     }
   };
 
+  const getCanvasTopOffset = () => {
+    const parentCanvas: Element | null = getNearestParentCanvas(
+      canvasRef.current,
+    );
+
+    if (parentCanvas && canvasDrawRef.current && canvasRef.current) {
+      if (canExtend) {
+        return parentCanvas.scrollTop;
+      } else {
+        const {
+          height: scrollParentTopHeight,
+          top: scrollParentTop,
+        } = parentCanvas.getBoundingClientRect();
+        const {
+          height: canvasHeight,
+          top: canvasTop,
+        } = canvasRef.current.getBoundingClientRect();
+        return getCanvasToDrawTopOffset(
+          scrollParentTop,
+          scrollParentTopHeight,
+          canvasTop,
+          canvasHeight,
+        );
+      }
+    }
+    return 0;
+  };
+
   const canScroll = useCanvasDragToScroll(
     canvasRef,
     isCurrentDraggedCanvas,
@@ -298,7 +341,7 @@ export const useCanvasDragging = (
             canvasIsDragging
           ) {
             const canvasCtx: any = canvasDrawRef.current.getContext("2d");
-            const topOffset = canExtend ? scrollParent.scrollTop : 0;
+            const topOffset = getCanvasTopOffset();
             const snappedXY = getSnappedXY(
               snapColumnSpace,
               snapRowSpace,