From 4feeb0e5cd6e3eed476b9d98f0aaa9213630182f Mon Sep 17 00:00:00 2001
From: Ivan Nikolovski <ivan.nikolovski@tum.de>
Date: Fri, 14 Jul 2023 12:58:37 +0200
Subject: [PATCH] Added full delete button and delete last polygon

---
 .gitignore                                    |  1 +
 app/backend/main.py                           |  9 ++
 app/frontend/my-app2/src/App.js               | 93 ++++++++++---------
 .../my-app2/src/components/Menu/Menu.js       |  6 +-
 4 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/.gitignore b/.gitignore
index 38e3461..a4b685d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@
 .idea/modules.xml
 .idea/vcs.xml
 __pycache__
+app/frontend/my-app2/src/AnnotationArea.css
diff --git a/app/backend/main.py b/app/backend/main.py
index 91c3209..8cbad37 100644
--- a/app/backend/main.py
+++ b/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"}
diff --git a/app/frontend/my-app2/src/App.js b/app/frontend/my-app2/src/App.js
index 5f9fdfe..f124dd9 100644
--- a/app/frontend/my-app2/src/App.js
+++ b/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,12 +282,53 @@ 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}
@@ -330,6 +336,7 @@ const AnnotationArea = () => {
           onToggleImage={toggleImage}
           onSegmentationMethodChange={onSegmentationMethodChange}
           onDatasetChange={onDatasetChange}
+          onClassification={onClassification}
         />
       </MenuContainer>
       <StageContainer>
diff --git a/app/frontend/my-app2/src/components/Menu/Menu.js b/app/frontend/my-app2/src/components/Menu/Menu.js
index 14c0e56..5e69d23 100644
--- a/app/frontend/my-app2/src/components/Menu/Menu.js
+++ b/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>
   )
 }