From e82007e955583cbdcce51f7122f912a056092bca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Bastos?= <andrebastos@MBP-de-Andre.lan>
Date: Thu, 2 Jan 2020 23:52:50 +0000
Subject: [PATCH] Fixed some issues related to the mutations

---
 src/index.tsx | 40 +++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 4d2480acd..6b67d358c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -265,8 +265,7 @@ class App extends React.Component<{}, AppState> {
   clearSelection = () => {
     const newElements = [...this.state.elements];
     newElements.map(element => {
-      element.isSelected = false;
-      return element;
+      return { ...element, isSelected: false };
     });
     this.setState({ elements: newElements });
   };
@@ -281,13 +280,13 @@ class App extends React.Component<{}, AppState> {
       const elementX2 = getElementAbsoluteX2(element);
       const elementY1 = getElementAbsoluteY1(element);
       const elementY2 = getElementAbsoluteY2(element);
-      element.isSelected =
+      const isSelected =
         element.type !== "selection" &&
         selectionX1 <= elementX1 &&
         selectionY1 <= elementY1 &&
         selectionX2 >= elementX2 &&
         selectionY2 >= elementY2;
-      return element;
+      return { ...element, isSelected };
     });
     this.setState({ elements: newElements });
   };
@@ -527,10 +526,14 @@ class App extends React.Component<{}, AppState> {
                 generateDraw(parsedElement);
                 return parsedElement;
               });
-              this.setState({
-                elements: [...this.state.elements, ...parsedElements]
-              });
-              drawScene(this.state.elements);
+              this.setState(
+                {
+                  elements: [...this.state.elements, ...parsedElements]
+                },
+                () => {
+                  drawScene(this.state.elements);
+                }
+              );
             }
             e.preventDefault();
           }}
@@ -551,13 +554,14 @@ class App extends React.Component<{}, AppState> {
               let isDraggingElements = false;
               const cursorStyle = document.documentElement.style.cursor;
               if (this.state.elementType === "selection") {
-                const hitElement = this.state.elements.find(element => {
+                const hitElementIdx = this.state.elements.findIndex(element => {
                   return hitTest(element, x, y);
                 });
 
                 // If we click on something
-                if (hitElement) {
-                  if (hitElement.isSelected) {
+                if (hitElementIdx > -1) {
+                  const auxElement = { ...this.state.elements[hitElementIdx] };
+                  if (auxElement.isSelected) {
                     // If that element is not already selected, do nothing,
                     // we're likely going to drag it
                   } else {
@@ -566,9 +570,15 @@ class App extends React.Component<{}, AppState> {
                       this.clearSelection();
                     }
                     // No matter what, we select it
-                    hitElement.isSelected = true;
+                    auxElement.isSelected = true;
+                    // I think we need a better way to do this but...
+                    const newElements = [...this.state.elements];
+                    newElements.splice(hitElementIdx, 1, auxElement);
+
+                    this.setState({ elements: newElements });
                   }
                 } else {
+                  // If we don't click on anything, let's remove all the selected elements
                   this.clearSelection();
                 }
 
@@ -608,11 +618,11 @@ class App extends React.Component<{}, AppState> {
 
               generateDraw(element);
 
-              // generate new elements array
+              // Add the new element to our elements array
               this.setState({
                 elements: [...this.state.elements, element]
               });
-              // elements.push(element);
+
               if (this.state.elementType === "text") {
                 this.setState({
                   draggingElement: null,
@@ -687,7 +697,7 @@ class App extends React.Component<{}, AppState> {
                   if (isDraggingElements) {
                     isDraggingElements = false;
                   }
-                  const newElements = this.state.elements;
+                  const newElements = [...this.state.elements];
                   newElements.pop();
                   this.setState({ elements: newElements });
                 } else {