feat: formula input can now take px

Author: williamzhu17

components/core/CreateShape.js

@@ -250,8 +250,31 @@ const CreateShape = (props) => {
             formulaNumbers = formulaNumbers.split(","); 
             newVerticeCoordinates = formulaNumbers.map(x => {
                 let values = x.trim();
-                let xValue = values.substring(0, values.indexOf("%") + 1).trim();
-                let yValue = values.substring(values.indexOf("%") + 1).trim();
+                let xValue = "";
+                let yValue = "";
+
+                if (values.includes("%") && values.includes("px")) {
+
+                    let indexOfPX = values.indexOf("px");
+                    let indexOfPercentage = values.indexOf("%");
+
+                    if (indexOfPX < indexOfPercentage) {
+                        xValue = values.substring(0, values.indexOf("px") + 2).trim();
+                        yValue = values.substring(values.indexOf("px") + 2).trim();
+                    }
+
+                    if (indexOfPercentage < indexOfPX) {
+                        xValue = values.substring(0, values.indexOf("%") + 1).trim();
+                        yValue = values.substring(values.indexOf("%") + 1).trim();
+                    }
+
+                } else if (values.includes("%")) {
+                    xValue = values.substring(0, values.indexOf("%") + 1).trim();
+                    yValue = values.substring(values.indexOf("%") + 1).trim();
+                } else if (values.includes("px")) {
+                    xValue = values.substring(0, values.indexOf("px") + 2).trim();
+                    yValue = values.substring(values.indexOf("px") + 2).trim();
+                }
 
                 return {
                     "x": xValue, 

components/utils/DraggableVertice.js

@@ -25,9 +25,22 @@ const CircleVertice = styled.div`
 
 const DraggableVertice = (props) => {
 
-    // Calculates x and y coordinates based on verticeCoordinates percentages
-    let x = parseFloat(props.x) * 280.0 / 100.0;
-    let y = parseFloat(props.y) * 280.0 / 100.0; 
+    let x;
+    let y;
+
+    // Calculates x coordinates based on percentage or pixels
+    if (props.x.includes("%")) {
+        x = parseFloat(props.x) * 280.0 / 100.0;
+    } else if (props.x.includes("px")) {
+        x = parseFloat(props.x);
+    }
+
+    // Calulates y coordinates based on percentage or pixels
+    if (props.y.includes("%")) {
+        y = parseFloat(props.y) * 280.0 / 100.0; 
+    } else if (props.y.includes("px")) {
+        y = parseFloat(props.y);
+    }
 
     // Handles when to show the close button
     const show = props.focusNumber === props.number;