From 6a03805cbc0e7ee5759cdb238527cd8d8f9e4ac3 Mon Sep 17 00:00:00 2001
From: Aleksey Volkov <aleksey_volkov@epam.com>
Date: Thu, 13 Apr 2023 16:04:49 +0200
Subject: [PATCH 1/3] Delete area with delete or backspace #312

---
 src/components/DrawArea.tsx                   | 29 +++++++++++++++++++
 .../TestDetailsDialog/TestDetailsModal.tsx    |  2 ++
 2 files changed, 31 insertions(+)

diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx
index b212b9d4..0f40dd17 100644
--- a/src/components/DrawArea.tsx
+++ b/src/components/DrawArea.tsx
@@ -34,6 +34,7 @@ interface IDrawArea {
   setIgnoreAreas: (ignoreAreas: IgnoreArea[]) => void;
   selectedRectId: string | undefined;
   setSelectedRectId: (id: string) => void;
+  deleteIgnoreArea?: (id:string)=>void;
   onStageClick: (event: Konva.KonvaEventObject<MouseEvent>) => void;
   stageOffsetState: [
     { x: number; y: number },
@@ -60,6 +61,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
   setIgnoreAreas,
   selectedRectId,
   setSelectedRectId,
+  deleteIgnoreArea,
   onStageClick,
   stageScaleState,
   stageOffsetState,
@@ -77,8 +79,33 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
   const [isDrawMode, setIsDrawMode] = drawModeState;
   const [isDrawing, setIsDrawing] = React.useState(isDrawMode);
   const [image, imageStatus] = imageState;
+  const stageRef = React.useRef<Konva.Stage>(null);
+
+  React.useEffect(() => {
+    if(stageRef.current){
+      const container = stageRef.current.container()
+      container.addEventListener('keydown', handleStageKeyDown)  
+    }
+  },[]);
+
+  const handleStageKeyDown = (e:any)=>{
+    if(e.altKey || e.ctrlKey || e.shiftKey){
+      return
+    }
+    if(!deleteIgnoreArea){
+      return
+    }
+    if(selectedRectId && (e.key==='Delete' || e.key==='Backspace')){
+      deleteIgnoreArea(selectedRectId)
+    }
+  }
 
   const handleContentMousedown = (e: any) => {
+    if(stageRef.current){
+      const container = stageRef.current.container()
+      container.tabIndex=1
+      container.focus()
+    }
     if (!isDrawMode) return;
 
     const newArea: IgnoreArea = {
@@ -178,8 +205,10 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
                 y: event.clientY - stageOffset.y,
               });
             }}
+            onKeyDown={(e)=>handleStageKeyDown(e)}
           >
             <Stage
+              ref={stageRef}
               width={image && image.width}
               height={image && image.height}
               onMouseDown={onStageClick}
diff --git a/src/components/TestDetailsDialog/TestDetailsModal.tsx b/src/components/TestDetailsDialog/TestDetailsModal.tsx
index bce9257e..4a59ca0d 100644
--- a/src/components/TestDetailsDialog/TestDetailsModal.tsx
+++ b/src/components/TestDetailsDialog/TestDetailsModal.tsx
@@ -464,6 +464,7 @@ const TestDetailsModal: React.FunctionComponent<{
                 tempIgnoreAreas={JSON.parse(testRun.tempIgnoreAreas)}
                 setIgnoreAreas={handleIgnoreAreaChange}
                 selectedRectId={selectedRectId}
+                deleteIgnoreArea={deleteIgnoreArea}
                 setSelectedRectId={setSelectedRectId}
                 onStageClick={removeSelection}
                 stageScaleState={[stageScale, setStageScale]}
@@ -483,6 +484,7 @@ const TestDetailsModal: React.FunctionComponent<{
                 setIgnoreAreas={handleIgnoreAreaChange}
                 selectedRectId={selectedRectId}
                 setSelectedRectId={setSelectedRectId}
+                deleteIgnoreArea={deleteIgnoreArea}
                 onStageClick={removeSelection}
                 stageScaleState={[stageScale, setStageScale]}
                 stagePosState={[stagePos, setStagePos]}

From e7bdd985943c8a69f4a74a173f8f99cfdd8ddb94 Mon Sep 17 00:00:00 2001
From: Aleksey Volkov <aleksey_volkov@epam.com>
Date: Thu, 13 Apr 2023 16:17:32 +0200
Subject: [PATCH 2/3] fix codacy issues #312

---
 src/components/DrawArea.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx
index 0f40dd17..cbec83da 100644
--- a/src/components/DrawArea.tsx
+++ b/src/components/DrawArea.tsx
@@ -83,28 +83,28 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
 
   React.useEffect(() => {
     if(stageRef.current){
-      const container = stageRef.current.container()
-      container.addEventListener('keydown', handleStageKeyDown)  
+      const container = stageRef.current.container();
+      container.addEventListener('keydown', handleStageKeyDown);
     }
   },[]);
 
-  const handleStageKeyDown = (e:any)=>{
+  const handleStageKeyDown = (e:any) => {
     if(e.altKey || e.ctrlKey || e.shiftKey){
-      return
+      return;
     }
     if(!deleteIgnoreArea){
-      return
+      return;
     }
     if(selectedRectId && (e.key==='Delete' || e.key==='Backspace')){
-      deleteIgnoreArea(selectedRectId)
+      deleteIgnoreArea(selectedRectId);
     }
-  }
+  };
 
   const handleContentMousedown = (e: any) => {
     if(stageRef.current){
-      const container = stageRef.current.container()
-      container.tabIndex=1
-      container.focus()
+      const container = stageRef.current.container();
+      container.tabIndex=1;
+      container.focus();
     }
     if (!isDrawMode) return;
 
@@ -205,7 +205,7 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
                 y: event.clientY - stageOffset.y,
               });
             }}
-            onKeyDown={(e)=>handleStageKeyDown(e)}
+            onKeyDown={(e) => handleStageKeyDown(e)}
           >
             <Stage
               ref={stageRef}

From e4591b263173bf5a2b2ca3921617733865c1d43d Mon Sep 17 00:00:00 2001
From: Aleksey Volkov <aleksey_volkov@epam.com>
Date: Thu, 13 Apr 2023 16:52:42 +0200
Subject: [PATCH 3/3] reduce function complexity #312

---
 src/components/DrawArea.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/DrawArea.tsx b/src/components/DrawArea.tsx
index cbec83da..7a5b056b 100644
--- a/src/components/DrawArea.tsx
+++ b/src/components/DrawArea.tsx
@@ -88,11 +88,12 @@ export const DrawArea: FunctionComponent<IDrawArea> = ({
     }
   },[]);
 
+  const isModifierKeyPressed = (e:any) => {
+    return e.altKey || e.ctrlKey || e.shiftKey;
+  };
+
   const handleStageKeyDown = (e:any) => {
-    if(e.altKey || e.ctrlKey || e.shiftKey){
-      return;
-    }
-    if(!deleteIgnoreArea){
+    if(!deleteIgnoreArea || isModifierKeyPressed(e)){
       return;
     }
     if(selectedRectId && (e.key==='Delete' || e.key==='Backspace')){