added some comments to code

williamzhu17 · williamzhu17 · commit 0f642bc37be7 · 2021-06-24T11:07:53.000-04:00
diff --git a/components/core/CreateShape.js b/components/core/CreateShape.js
@@ -1,16 +1,20 @@
 import React, { useState } from "react";
+
+// Bootstrap
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import Modal from "react-bootstrap/Modal";
 import Button from "react-bootstrap/Button";
 
+// ShapeForm and ShapePreview Components
 import { ShapeForm, ShapePreview } from "..";
 
 const CreateShape = (props) => {
+
+    // shapeInformation holds all information about the shape
     const [shapeInformation, setShapeInformation] = useState({
         "name": "Tilted Square", 
-        "type": "tiltedSquare",
         "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)",
         "vertices": 4,
         "edges": 4, 
@@ -38,23 +42,20 @@ const CreateShape = (props) => {
         ]
     });
 
+    // Changes shapeInformation when something in ShapeForm or ShapePreview is altered
     function handleChange(event, data, number) {
         const name = event.target.name || event.type;
         const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;
 
         console.log(event, data);
 
-        if (name === "name") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": value, 
-            "type": value.toLowerCase(),
-            });
-        } else if (name === "formula") {
+        // If Clip-Path formula value is changed, it makes sure that the parentheses stay there and also alters the verticeCoordinates value
+        if (name === "formula") {
             const edgeVerticeNumber = shapeInformation.clipPathType === "polygon" ? value.split(",").length: 0;
 
+            // If user deletes all, set formula to the Clip-Path type with an empty set of parentheses
             if (value === "") {
-                handleFormulaChange(shapeInformation.clipPathType + "()", edgeVerticeNumber)
+                handleFormulaChange(shapeInformation.clipPathType + "()", edgeVerticeNumber); 
             } else if (value.includes("polygon")) {
                 handleFormulaChange(value, edgeVerticeNumber, "polygon");
             } else if (value.includes("circle")) {
@@ -64,7 +65,48 @@ const CreateShape = (props) => {
             } else {
                 handleFormulaChange(value, edgeVerticeNumber);
             }
-        } else if (name === "mousemove") {
+
+        } else if (name === "clipPathType") { // If Clip-Path Type is changed, change the value of the clipPathType
+
+            if (clipPathType === "polygon") {
+                setShapeInformation({
+                ...shapeInformation, 
+                "name": "Tilted Square", 
+                "type": "tiltedSquare", 
+                "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)", 
+                });
+            }
+
+            if (clipPathType === "circle") {
+                setShapeInformation({
+                ...shapeInformation, 
+                "name": "Circle", 
+                "type": "circle", 
+                "formula": "circle(50% at 50% 50%)",
+                });
+            }
+
+            if (clipPathType === "ellipse") {
+                setShapeInformation({
+                ...shapeInformation, 
+                "name": "Ellipse", 
+                "type": "ellipse", 
+                "formula": "ellipse(25% 40% at 50% 50%)",
+                });
+            }
+
+            setShapeInformation(prevState => {
+                return {
+                ...prevState, 
+                "clipPathType": clipPathType, 
+                "edges": clipPathType === "polygon" ? 4 : 0,
+                "vertices": clipPathType === "polygon" ? 4 : 0, 
+                "notes": "", 
+                }
+            })
+
+        } else if (name === "mousemove") { // If DraggableVertice is moved, adjust verticeCoordinates and formula
+            
             const newVerticeCoordinates = addNewVerticeCoordinates(data.x, data.y, number);
             const newFormula = generateNewFormula(newVerticeCoordinates);
 
@@ -73,7 +115,9 @@ const CreateShape = (props) => {
                 "verticeCoordinates": newVerticeCoordinates, 
                 "formula": newFormula, 
             });
-        } else if (name === "click" && event.target.id === "shapeShadow") {
+
+        } else if (name === "click" && event.target.id === "shapeShadow") { // If background of preview is clicked, add a verticeCoordinate value at its location and adjust formula
+
             const newVerticeCoordinates = addNewVerticeCoordinates(event.nativeEvent.offsetX, event.nativeEvent.offsetY, shapeInformation.verticeCoordinates.length);
             const newFormula = generateNewFormula(newVerticeCoordinates);
 
@@ -84,7 +128,8 @@ const CreateShape = (props) => {
                 "verticeCoordinates": newVerticeCoordinates, 
                 "formula": newFormula,
             });
-        } else if ((event.target.id.includes("deleteButton") || event.target.localName === "line") && number !== undefined) {
+
+        } else if (event.target.id.includes("deleteButton") && number !== undefined) { // If delete button is pressed, remove the corresponding verticeCoordinate and adjust formula
 
             let newVerticeCoordinates = []; 
 
@@ -104,41 +149,15 @@ const CreateShape = (props) => {
                 "formula": newFormula,
             }); 
 
-        } else if (name === "clipPathType") {
-            handleClipPathChange(value);
-        } else {
+        } else { // Handles all other changes
+
             setShapeInformation({
                 ...shapeInformation, 
                 [name]: value,
             });
-        }
-      }
-
-    function addNewVerticeCoordinates(x ,y, number) {
-        const xPercentage = Math.round((x / 280.0) * 100.0);
-        const yPercentage = Math.round((y / 280.0) * 100.0);
-
-        let newVerticeCoordinates = shapeInformation.verticeCoordinates;
-        newVerticeCoordinates[number] = {
-            "x": xPercentage + "%",
-            "y": yPercentage + "%"
-        }
-
-        return newVerticeCoordinates;
-    }
-
-    function generateNewFormula(newVerticeCoordinates) {
-        let newFormula = shapeInformation.clipPathType + "(";
-
-        for (let i = 0; i < newVerticeCoordinates.length; i++) {
-            let newX = newVerticeCoordinates[i].x; 
-            let newY = newVerticeCoordinates[i].y;
 
-            i === newVerticeCoordinates.length - 1 ? newFormula = newFormula + newX + " " + newY + ")" : newFormula = newFormula + newX + " " + newY + ", ";
         }
-
-        return newFormula;
-    }
+      }
 
     function handleFormulaChange(formula, edgeVerticeNumber, clipPathType) {
         let newVerticeCoordinates = [];
@@ -165,47 +184,36 @@ const CreateShape = (props) => {
             "verticeCoordinates": newVerticeCoordinates, 
             }
         });
-        }
+    }
 
-        function handleClipPathChange(clipPathType) {
-        if (clipPathType === "polygon") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": "Tilted Square", 
-            "type": "tiltedSquare", 
-            "formula": "polygon(10% 10%, 90% 10%, 90% 90%, 10% 80%)", 
-            });
-        }
+    function addNewVerticeCoordinates(x ,y, number) {
+        const xPercentage = Math.round((x / 280.0) * 100.0);
+        const yPercentage = Math.round((y / 280.0) * 100.0);
 
-        if (clipPathType === "circle") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": "Circle", 
-            "type": "circle", 
-            "formula": "circle(50% at 50% 50%)",
-            });
+        let newVerticeCoordinates = shapeInformation.verticeCoordinates;
+        newVerticeCoordinates[number] = {
+            "x": xPercentage + "%",
+            "y": yPercentage + "%"
         }
 
-        if (clipPathType === "ellipse") {
-            setShapeInformation({
-            ...shapeInformation, 
-            "name": "Ellipse", 
-            "type": "ellipse", 
-            "formula": "ellipse(25% 40% at 50% 50%)",
-            });
+        return newVerticeCoordinates;
+    }
+
+    function generateNewFormula(newVerticeCoordinates) {
+        let newFormula = shapeInformation.clipPathType + "(";
+
+        for (let i = 0; i < newVerticeCoordinates.length; i++) {
+            let newX = newVerticeCoordinates[i].x; 
+            let newY = newVerticeCoordinates[i].y;
+
+            i === newVerticeCoordinates.length - 1 ? newFormula = newFormula + newX + " " + newY + ")" : newFormula = newFormula + newX + " " + newY + ", ";
         }
 
-        setShapeInformation(prevState => {
-            return {
-            ...prevState, 
-            "clipPathType": clipPathType, 
-            "edges": clipPathType === "polygon" ? 4 : 0,
-            "vertices": clipPathType === "polygon" ? 4 : 0, 
-            "notes": "", 
-            }
-        })
+        return newFormula;
     }
 
+    
+
     const [validated, setValidated] = useState(false);
 
     const handleSubmit = (event) => {
diff --git a/components/utils/DraggableVertice.js b/components/utils/DraggableVertice.js
@@ -1,10 +1,15 @@
 import React, { useRef } from "react";
+
+// react-draggable npm
 import Draggable from "react-draggable";
+
+// Styled Component
 import styled from "styled-components";
+
+// Bootstrap
 import Overlay from "react-bootstrap/Overlay";
 import Tooltip from "react-bootstrap/Tooltip";
 
-
 const CircleVertice = styled.div`
   width: 20px;
   height: 20px;
@@ -16,6 +21,8 @@ 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; 
 
