diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index 563bb94..7efae8b 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/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), - top: to(page.width, mouseY), + left: to(page.width, x), + 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 - * @param event Mouse event + * which alters the newly created drawing element, resizing it while pointer moves + * @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 height = to(page.width, mouseY) - lastDrawnField.top + const width = to(page.width, x) - lastDrawnField.left + 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 - * mouseY - offsetY + * x - offsetX + * 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, - mouseY: drawingRectangleCoords.mouseY + x: drawingRectangleCoords.x, + y: drawingRectangleCoords.y } }) } /** - * Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element) - * @param event Mouse event + * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element) + * @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 top = to(pageWidth, mouseY - coordsOffset.mouseY) + let left = to(pageWidth, x - coordsOffset.x) + 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 height = to(pageWidth, mouseY) - drawnField.top + const width = to(pageWidth, x) - drawnField.left + 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 mouseY = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element. + const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element. + const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element. return { - mouseX, - mouseY, + x, + y, rect } } diff --git a/src/types/drawing.ts b/src/types/drawing.ts index 9e39460..eac2c21 100644 --- a/src/types/drawing.ts +++ b/src/types/drawing.ts @@ -6,8 +6,8 @@ export interface MouseState { dragging?: boolean resizing?: boolean coordsInWrapper?: { - mouseX: number - mouseY: number + x: number + y: number } }