Added full delete button and delete last polygon

.gitignore

@@ -4,3 +4,4 @@
 .idea/modules.xml
 .idea/vcs.xml
 __pycache__
+app/frontend/my-app2/src/AnnotationArea.css

app/backend/main.py

@@ -321,3 +321,12 @@ async def process_strings_endpoint(predictions: PredictionsList):
 
     logging.info("Predictions processed succesfully")
     return {"message": "Predictions processed succesfully"}
+
+
+@app.post("/new_masks")
+async def recieve_masks(masks: List[ListOfLists]):
+    """
+    Method for receving the new masks
+    """
+    logging.info("New_masks are sent.")
+    return {"message": "Masks processed succesfully"}

app/frontend/my-app2/src/App.js

@@ -138,13 +138,10 @@ const AnnotationArea = () => {
   useEffect(() => {
     // Handling keydown events -- registering callback
     const handleKeyDown = (event) => {
-      if (event.key === 'r' && event.ctrlKey) {
-        reset()
-      }
       if (event.key === 'r') {
-        resetCurrentPolygon()
+        deleteall()
       } else if (event.key === 'z' && event.ctrlKey) {
-        undo()
+        deletelast()
       } else if (event.key === 'Escape') {
         finishPolygon()
       } else if (event.key === 's') {
@@ -243,44 +240,12 @@ const AnnotationArea = () => {
     setPreviewLine(null)
   }
 
-  function reset() {
-    console.log(polygonCounter)
-    console.log(newPolygonCounter)
-    const itemstodelete = polygonCounter - newPolygonCounter
-    console.log(itemstodelete)
-    setPolygons((prev) => {
-      const filteredDictionary = Object.entries(prev)
-        .filter(([k, v]) => k < itemstodelete) // Change the condition based on your requirement
-        .reduce((obj, [k, v]) => {
-          obj[k] = v
-          return obj
-        }, {})
-
-      return filteredDictionary
-    })
-    setCurrentPolygon([])
-    setPolygonCounter(itemstodelete)
-    console.log(polygonCounter)
-    setnewPolygonCounter(0)
-    setPreviewLine(null)
-  }
-
-  function oldreset() {
-    setPolygons({})
-    setCurrentPolygon([])
-    setPolygonCounter(0)
-    setPreviewLine(null)
+  function deletelast() {
+    setPolygons(prev => prev.slice(0,-1))
   }
 
-  function undo() {
-    setPreviewLine(null)
-    if (currentPolygonRef.current.points != []) {
-      setCurrentPolygon((prev) => {
-        const copy = currentPolygonRef.current
-        copy[0].points = copy[0].points.slice(0, -4)
-        return copy
-      }, {})
-    }
+  function deleteall() {
+    setPolygons([])
   }
 
   function onSegmentationMethodChange(e) {
@@ -317,19 +282,61 @@ const AnnotationArea = () => {
     setCurrentDataset(selectedDataset)
   }
 
+
+  function divideElements(objectOfArrays) {
+    const width = window.innerWidth;
+    const height = window.innerHeight;  
+    const result = {};
+
+    for (let key in objectOfArrays) {
+      if (objectOfArrays.hasOwnProperty(key)) {
+        result[key] = objectOfArrays[key].map((element) => {
+          return {
+            x: element.x / width,
+            y: element.y / height
+          };
+        });
+      }
+    }
+
+    return result;
+  }
+
+  function onClassification(e) {
+    const masks = divideElements(polygons)
+
+    console.log(polygons)
+    console.log(masks)
+
+    console.log(`Masks: ${masks}`)
+
+    axios
+      .post('/new_masks', {
+        filename: masks,
+      })
+      .then((response) => {
+        console.log(response.data) // Output the server's response to the console.
+      })
+      .catch((error) => {
+        console.error(`Error sending masks: ${error}`)
+      })
+
+  }
+
   return (
     <div style={style}>
       <MenuContainer>
         <Menu
-          onReset={reset}
-          onUndo={undo}
+          onReset={deletelast}
+          onUndo={deleteall}
           onSave={saveMask}
           onNext={nextImage}
           onPrev={prevImage}
           onImageId={handleButtonClick}
           onToggleImage={toggleImage}
           onSegmentationMethodChange={onSegmentationMethodChange}
           onDatasetChange={onDatasetChange}
+          onClassification={onClassification}
         />
       </MenuContainer>
       <StageContainer>

app/frontend/my-app2/src/components/Menu/Menu.js

@@ -68,11 +68,12 @@ function Menu({
   onToggleImage,
   onSegmentationMethodChange,
   onDatasetChange,
+  onClassification
 }) {
   return (
     <div className="menu-container">
-      <Button className="menu-button" onClick={onReset}>Reset</Button>
-      <Button className="menu-button" onClick={onUndo}>Undo</Button>
+      <Button className="menu-button" onClick={onReset}>Delete Last Drawn Polygon</Button>
+      <Button className="menu-button" onClick={onUndo}>Delete All Polygons</Button>
       <Button className="menu-button" onClick={onSave}>Save</Button>
       <Button className="menu-button" onClick={onNext}>Next Image</Button>
       <Button className="menu-button" onClick={onPrev}>Previous Image</Button>
@@ -86,6 +87,7 @@ function Menu({
       </form>
       <SegmentationMethodsSelector onChange={onSegmentationMethodChange} />
       <DatasetSelector onChange={onDatasetChange} />
+      <Button className="menu-button" onClick={onClassification}>Classify</Button>
     </div>
   )
 }