feat: draw area on shift

frontend/components/workspace/DocumentRenderer.tsx

@@ -38,7 +38,7 @@ const DocumentRenderer = () => {
 
   let downClickX = 0
   let downClickY = 0
-  let isMouseDown = false
+  let isDrawing = false
 
   const applyCanvasSizes = (size: { width: number, height: number }) => {
     const documentCanvasInstance = documentCanvas.current
@@ -175,16 +175,36 @@ const DocumentRenderer = () => {
     })
   }
 
+  const handleMouseDrawArea = (x: number, y: number) => {
+    const drawingCanvasInstance = drawingCanvas.current
+    if (!drawingCanvasInstance) return
+    const context = drawingCanvasInstance.getContext('2d')
+    if (!context) return
+
+    context.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height)
+    context.beginPath()
+    const width = x - downClickX
+    const height = y - downClickY
+    context.rect(downClickX, downClickY, width, height)
+    context.strokeStyle = '#000'
+    context.lineWidth = 2
+    context.stroke()
+  }
+
   const handleMouseDown = (e: React.MouseEvent) => {
+    console.log(e)
+    if (e.nativeEvent.shiftKey) {
       const drawingCanvasInstance = drawingCanvas.current
       if (!drawingCanvasInstance) return
 
       downClickX = e.nativeEvent.offsetX
       downClickY = e.nativeEvent.offsetY
-    isMouseDown = true
+      isDrawing = true
+    }
   }
 
   const handleMouseUp = async (e: React.MouseEvent) => {
+    if (isDrawing) {
       const drawingCanvasInstance = drawingCanvas.current
       if (!drawingCanvasInstance) return
 
@@ -217,31 +237,18 @@ const DocumentRenderer = () => {
 
       const context = drawingCanvasInstance.getContext('2d')
       context?.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height)
-    isMouseDown = false
+      isDrawing = false
       downClickX = 0
       downClickY = 0
     }
+  }
 
   const handleMouseMove = (e: React.MouseEvent) => {
     let mouseX = e.nativeEvent.offsetX
     let mouseY = e.nativeEvent.offsetY
 
-    if (!isMouseDown) handleHoverOverArea(e)
-    else {
-      const drawingCanvasInstance = drawingCanvas.current
-      if (!drawingCanvasInstance) return
-      const context = drawingCanvasInstance.getContext('2d')
-      if (!context) return
-
-      context.clearRect(0, 0, drawingCanvasInstance.width, drawingCanvasInstance.height)
-      context.beginPath()
-      const width = mouseX - downClickX
-      const height = mouseY - downClickY
-      context.rect(downClickX, downClickY, width, height)
-      context.strokeStyle = '#000'
-      context.lineWidth = 2
-      context.stroke()
-    }
+    if (isDrawing) handleMouseDrawArea(mouseX, mouseY)
+    else handleHoverOverArea(e)
   }
 
   const handleWheelEvent = (e: WheelEvent<HTMLDivElement>) => {
@@ -257,7 +264,7 @@ const DocumentRenderer = () => {
     requestUpdateProcessedWordById(wordId, newWordValue)
       .then(res => {
         console.log('res', res)
-      getProcessedAreaById(hoverOverAreaId|| '').then(response => {
+        getProcessedAreaById(hoverOverAreaId || '').then(response => {
           setHoveredProcessedArea(response)
         })
       })

frontend/context/Project/provider.tsx

@@ -186,7 +186,6 @@ export function ProjectProvider({ children, projectProps }: Props) {
 
   const requestUpdateProcessedWordById = async (wordId: string, newTextValue: string) => {
     const successfulResponse = await RequestUpdateProcessedWordById(wordId, newTextValue)
-    // if (successfulResponse) await updateDocuments()
     return successfulResponse
   }