Select element on click

src/index.js

@@ -6,6 +6,17 @@ import "./styles.css";
 
 var elements = [];
 
+function isInsideAnElement(x, y) {
+  return (element) => {
+    const x1 = getElementAbsoluteX1(element)
+    const x2 = getElementAbsoluteX2(element)
+    const y1 = getElementAbsoluteY1(element)
+    const y2 = getElementAbsoluteY2(element)
+
+    return (x >= x1 && x <= x2) && (y >= y1 && y <= y2)
+  }
+}
+
 function newElement(type, x, y) {
   const element = {
     type: type,
@@ -228,56 +239,55 @@ class App extends React.Component {
           onMouseDown={e => {
             const x = e.clientX - e.target.offsetLeft;
             const y = e.clientY - e.target.offsetTop;
-            const element = newElement(this.state.elementType, x, y);
-
             let isDraggingElements = false;
             const cursorStyle = document.documentElement.style.cursor;
             if (this.state.elementType === "selection") {
-              isDraggingElements = elements.some(el => {
-                if (el.isSelected) {
-                  const minX = Math.min(el.x, el.x + el.width);
-                  const maxX = Math.max(el.x, el.x + el.width);
-                  const minY = Math.min(el.y, el.y + el.height);
-                  const maxY = Math.max(el.y, el.y + el.height);
-                  return minX <= x && x <= maxX && minY <= y && y <= maxY;
-                }
-              });
+              const selectedElement = elements.find(isInsideAnElement(x, y)) 
+
+              if (selectedElement) {
+                this.setState({ draggingElement: selectedElement });
+              }
+
+              isDraggingElements = elements.some(element => element.isSelected && isInsideAnElement(x, y));
+
               if (isDraggingElements) {
                 document.documentElement.style.cursor = "move";
               }
-            }
+            } else {
+              const element = newElement(this.state.elementType, x, y);
 
-            if (this.state.elementType === "text") {
-              const text = prompt("What text do you want?");
-              if (text === null) {
-                return;
+              if (this.state.elementType === "text") {
+                const text = prompt("What text do you want?");
+                if (text === null) {
+                  return;
+                }
+                element.text = text;
+                element.font = "20px Virgil";
+                const font = context.font;
+                context.font = element.font;
+                element.measure = context.measureText(element.text);
+                context.font = font;
+                const height =
+                  element.measure.actualBoundingBoxAscent +
+                  element.measure.actualBoundingBoxDescent;
+                // Center the text
+                element.x -= element.measure.width / 2;
+                element.y -= element.measure.actualBoundingBoxAscent;
+                element.width = element.measure.width;
+                element.height = height;
               }
-              element.text = text;
-              element.font = "20px Virgil";
-              const font = context.font;
-              context.font = element.font;
-              element.measure = context.measureText(element.text);
-              context.font = font;
-              const height =
-                element.measure.actualBoundingBoxAscent +
-                element.measure.actualBoundingBoxDescent;
-              // Center the text
-              element.x -= element.measure.width / 2;
-              element.y -= element.measure.actualBoundingBoxAscent;
-              element.width = element.measure.width;
-              element.height = height;
-            }
 
-            generateDraw(element);
-            elements.push(element);
-            if (this.state.elementType === "text") {
-              this.setState({
-                draggingElement: null,
-                elementType: "selection"
-              });
-              element.isSelected = true;
-            } else {
-              this.setState({ draggingElement: element });
+              generateDraw(element);
+              elements.push(element);
+              if (this.state.elementType === "text") {
+                this.setState({
+                  draggingElement: null,
+                  elementType: "selection"
+                });
+                element.isSelected = true;
+              } else {
+                this.setState({ draggingElement: element });
+              }
             }
 
             let lastX = x;
@@ -330,11 +340,8 @@ class App extends React.Component {
               if (this.state.elementType === "selection") {
                 if (isDraggingElements) {
                   isDraggingElements = false;
-                } else {
-                  // Remove actual selection element
-                  setSelection(draggingElement);
-                }
-                elements.pop();
+                } 
+                setSelection(draggingElement);
               } else {
                 draggingElement.isSelected = true;
               }