refactor(drawing): fix mouse comments, use pointer

src/components/DrawPDFFields/index.tsx

@@ -92,11 +92,11 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * Fired only when left click and mouse over pdf page
+   * Fired only on when left (primary pointer interaction) clicking page image
    * Creates new drawnElement and pushes in the array
    * It is re rendered and visible right away
    *
-   * @param event Mouse event
+   * @param event Pointer event
    * @param page PdfPage where press happened
    */
   const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
@@ -107,11 +107,11 @@ export const DrawPDFFields = (props: Props) => {
       return
     }
 
-    const { mouseX, mouseY } = getMouseCoordinates(event)
+    const { x, y } = getPointerCoordinates(event)
 
     const newField: DrawnField = {
-      left: to(page.width, mouseX),
+      left: to(page.width, x),
-      top: to(page.width, mouseY),
+      top: to(page.width, y),
       width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
       height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
       counterpart: '',
@@ -130,7 +130,7 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Drawing is finished, resets all the variables used to draw
-   * @param event Mouse event
+   * @param event Pointer event
    */
   const handlePointerUp = () => {
     setMouseState((prev) => {
@@ -145,8 +145,8 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
-   * which alters the newly created drawing element, resizing it while mouse move
+   * which alters the newly created drawing element, resizing it while pointer moves
-   * @param event Mouse event
+   * @param event Pointer event
    * @param page PdfPage where moving is happening
    */
   const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
@@ -160,10 +160,10 @@ export const DrawPDFFields = (props: Props) => {
       // to the page below (without releaseing mouse click)
       if (!lastDrawnField) return
 
-      const { mouseX, mouseY } = getMouseCoordinates(event)
+      const { x, y } = getPointerCoordinates(event)
 
-      const width = to(page.width, mouseX) - lastDrawnField.left
+      const width = to(page.width, x) - lastDrawnField.left
-      const height = to(page.width, mouseY) - lastDrawnField.top
+      const height = to(page.width, y) - lastDrawnField.top
 
       lastDrawnField.width = width
       lastDrawnField.height = height
@@ -178,12 +178,12 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Fired when event happens on the drawn element which will be moved
-   * mouse coordinates relative to drawn element will be stored
+   * pointer coordinates relative to drawn element will be stored
    * so when we start moving, offset can be calculated
-   * mouseX - offsetX
+   * x - offsetX
-   * mouseY - offsetY
+   * y - offsetY
    *
-   * @param event Mouse event
+   * @param event Pointer event
    * @param drawnFieldIndex Which we are moving
    */
   const handleDrawnFieldPointerDown = (
@@ -195,23 +195,24 @@ export const DrawPDFFields = (props: Props) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
-    const drawingRectangleCoords = getMouseCoordinates(event)
+    const drawingRectangleCoords = getPointerCoordinates(event)
 
     setActiveDrawField(drawnFieldIndex)
     setMouseState({
       dragging: true,
       clicked: false,
       coordsInWrapper: {
-        mouseX: drawingRectangleCoords.mouseX,
+        x: drawingRectangleCoords.x,
-        mouseY: drawingRectangleCoords.mouseY
+        y: drawingRectangleCoords.y
       }
     })
   }
 
   /**
-   * Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
+   * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
-   * @param event Mouse event
+   * @param event Pointer event
    * @param drawnField which we are moving
+   * @param pageWidth pdf value which is used to calculate scaled offset
    */
   const handleDrawnFieldPointerMove = (
     event: React.PointerEvent,
@@ -219,15 +220,15 @@ export const DrawPDFFields = (props: Props) => {
     pageWidth: number
   ) => {
     if (mouseState.dragging) {
-      const { mouseX, mouseY, rect } = getMouseCoordinates(
+      const { x, y, rect } = getPointerCoordinates(
         event,
         event.currentTarget.parentElement
       )
       const coordsOffset = mouseState.coordsInWrapper
 
       if (coordsOffset) {
-        let left = to(pageWidth, mouseX - coordsOffset.mouseX)
+        let left = to(pageWidth, x - coordsOffset.x)
-        let top = to(pageWidth, mouseY - coordsOffset.mouseY)
+        let top = to(pageWidth, y - coordsOffset.y)
 
         const rightLimit = to(pageWidth, rect.width) - drawnField.width
         const bottomLimit = to(pageWidth, rect.height) - drawnField.height
@@ -247,7 +248,7 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Fired when clicked on the resize handle, sets the state for a resize action
-   * @param event Mouse event
+   * @param event Pointer event
    * @param drawnFieldIndex which we are resizing
    */
   const handleResizePointerDown = (
@@ -266,8 +267,9 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Resizes the drawn element by the mouse position
-   * @param event Mouse event
+   * @param event Pointer event
    * @param drawnField which we are resizing
+   * @param pageWidth pdf value which is used to calculate scaled offset
    */
   const handleResizePointerMove = (
     event: React.PointerEvent,
@@ -275,7 +277,7 @@ export const DrawPDFFields = (props: Props) => {
     pageWidth: number
   ) => {
     if (mouseState.resizing) {
-      const { mouseX, mouseY } = getMouseCoordinates(
+      const { x, y } = getPointerCoordinates(
         event,
         // currentTarget = span handle
         // 1st parent = drawnField
@@ -283,8 +285,8 @@ export const DrawPDFFields = (props: Props) => {
         event.currentTarget.parentElement?.parentElement
       )
 
-      const width = to(pageWidth, mouseX) - drawnField.left
+      const width = to(pageWidth, x) - drawnField.left
-      const height = to(pageWidth, mouseY) - drawnField.top
+      const height = to(pageWidth, y) - drawnField.top
 
       drawnField.width = width
       drawnField.height = height
@@ -295,7 +297,7 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Removes the drawn element using the indexes in the params
-   * @param event Mouse event
+   * @param event Pointer event
    * @param pdfFileIndex pdf file index
    * @param pdfPageIndex pdf page index
    * @param drawnFileIndex drawn file index
@@ -315,21 +317,21 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * Used to stop mouse click propagating to the parent elements
+   * Used to stop pointer click propagating to the parent elements
    * so select can work properly
-   * @param event Mouse event
+   * @param event Pointer event
    */
   const handleUserSelectPointerDown = (event: React.PointerEvent) => {
     event.stopPropagation()
   }
 
   /**
-   * Gets the mouse coordinates relative to a element in the `event` param
+   * Gets the pointer coordinates relative to a element in the `event` param
    * @param event PointerEvent
-   * @param customTarget mouse coordinates relative to this element, if not provided
+   * @param customTarget coordinates relative to this element, if not provided
    * event.target will be used
    */
-  const getMouseCoordinates = (
+  const getPointerCoordinates = (
     event: React.PointerEvent,
     customTarget?: HTMLElement | null
   ) => {
@@ -337,12 +339,12 @@ export const DrawPDFFields = (props: Props) => {
     const rect = target.getBoundingClientRect()
 
     // Clamp X Y within the target
-    const mouseX = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
+    const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
-    const mouseY = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
+    const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
 
     return {
-      mouseX,
+      x,
-      mouseY,
+      y,
       rect
     }
   }

src/types/drawing.ts

@@ -6,8 +6,8 @@ export interface MouseState {
   dragging?: boolean
   resizing?: boolean
   coordsInWrapper?: {
-    mouseX: number
+    x: number
-    mouseY: number
+    y: number
   }
 }