From cc132acdd106b19efb39738e2844ba402501ced3 Mon Sep 17 00:00:00 2001
From: Brady Madden <bradymadden97@gmail.com>
Date: Sat, 4 Jan 2020 13:36:02 -0500
Subject: [PATCH 1/2] fix offset top and length causing drag issues

---
 src/index.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index b820c9d77..95b5476b4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -208,6 +208,8 @@ type SceneState = {
 const SCROLLBAR_WIDTH = 6;
 const SCROLLBAR_MARGIN = 4;
 const SCROLLBAR_COLOR = "rgba(0,0,0,0.3)";
+const CANVAS_WINDOW_OFFSET_LEFT = 250;
+const CANVAS_WINDOW_OFFSET_TOP = 0;
 
 function getScrollbars(
   canvasWidth: number,
@@ -981,8 +983,8 @@ class App extends React.Component<{}, AppState> {
         </div>
         <canvas
           id="canvas"
-          width={window.innerWidth - 250}
-          height={window.innerHeight}
+          width={window.innerWidth - CANVAS_WINDOW_OFFSET_LEFT}
+          height={window.innerHeight - CANVAS_WINDOW_OFFSET_TOP}
           onWheel={e => {
             e.preventDefault();
             const { deltaX, deltaY } = e;
@@ -1117,12 +1119,12 @@ class App extends React.Component<{}, AppState> {
               if (!draggingElement) return;
               let width =
                 e.clientX -
-                target.offsetLeft -
+                CANVAS_WINDOW_OFFSET_LEFT -
                 draggingElement.x -
                 this.state.scrollX;
               let height =
                 e.clientY -
-                target.offsetTop -
+                CANVAS_WINDOW_OFFSET_TOP -
                 draggingElement.y -
                 this.state.scrollY;
               draggingElement.width = width;

From ec28c836262226f4c222457e39c93aab66dda869 Mon Sep 17 00:00:00 2001
From: Brady Madden <bradymadden97@gmail.com>
Date: Sat, 4 Jan 2020 17:18:16 -0500
Subject: [PATCH 2/2] fix other drag issues

---
 src/index.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index e98dff1d8..9289a6f54 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1116,13 +1116,8 @@ class App extends React.Component<{}, AppState> {
             }
 
             const x =
-              e.clientX -
-              (e.target as HTMLElement).offsetLeft -
-              this.state.scrollX;
-            const y =
-              e.clientY -
-              (e.target as HTMLElement).offsetTop -
-              this.state.scrollY;
+              e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
+            const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
             const element = newElement(
               this.state.elementType,
               x,
@@ -1241,8 +1236,10 @@ class App extends React.Component<{}, AppState> {
                 const el = this.state.resizingElement;
                 const selectedElements = elements.filter(el => el.isSelected);
                 if (selectedElements.length === 1) {
-                  const x = e.clientX - target.offsetLeft - this.state.scrollX;
-                  const y = e.clientY - target.offsetTop - this.state.scrollY;
+                  const x =
+                    e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
+                  const y =
+                    e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
                   selectedElements.forEach(element => {
                     switch (resizeHandle) {
                       case "nw":
@@ -1299,8 +1296,10 @@ class App extends React.Component<{}, AppState> {
               if (isDraggingElements) {
                 const selectedElements = elements.filter(el => el.isSelected);
                 if (selectedElements.length) {
-                  const x = e.clientX - target.offsetLeft - this.state.scrollX;
-                  const y = e.clientY - target.offsetTop - this.state.scrollY;
+                  const x =
+                    e.clientX - CANVAS_WINDOW_OFFSET_LEFT - this.state.scrollX;
+                  const y =
+                    e.clientY - CANVAS_WINDOW_OFFSET_TOP - this.state.scrollY;
                   selectedElements.forEach(element => {
                     element.x += x - lastX;
                     element.y += y - lastY;