refactor(drawing): fix mouse comments, use pointer
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
This commit is contained in:
parent
2be7f3d51b
commit
9223857e18
@ -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
|
* Creates new drawnElement and pushes in the array
|
||||||
* It is re rendered and visible right away
|
* It is re rendered and visible right away
|
||||||
*
|
*
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param page PdfPage where press happened
|
* @param page PdfPage where press happened
|
||||||
*/
|
*/
|
||||||
const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
|
const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
|
||||||
@ -107,11 +107,11 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
const { x, y } = getPointerCoordinates(event)
|
||||||
|
|
||||||
const newField: DrawnField = {
|
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,
|
width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
|
||||||
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
||||||
counterpart: '',
|
counterpart: '',
|
||||||
@ -130,7 +130,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Drawing is finished, resets all the variables used to draw
|
* Drawing is finished, resets all the variables used to draw
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
*/
|
*/
|
||||||
const handlePointerUp = () => {
|
const handlePointerUp = () => {
|
||||||
setMouseState((prev) => {
|
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
|
* 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
|
* @param page PdfPage where moving is happening
|
||||||
*/
|
*/
|
||||||
const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
|
const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
|
||||||
@ -160,10 +160,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
// to the page below (without releaseing mouse click)
|
// to the page below (without releaseing mouse click)
|
||||||
if (!lastDrawnField) return
|
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.width = width
|
||||||
lastDrawnField.height = height
|
lastDrawnField.height = height
|
||||||
@ -178,12 +178,12 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Fired when event happens on the drawn element which will be moved
|
* 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
|
* 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
|
* @param drawnFieldIndex Which we are moving
|
||||||
*/
|
*/
|
||||||
const handleDrawnFieldPointerDown = (
|
const handleDrawnFieldPointerDown = (
|
||||||
@ -195,23 +195,24 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
// Proceed only if left click
|
// Proceed only if left click
|
||||||
if (event.button !== 0) return
|
if (event.button !== 0) return
|
||||||
|
|
||||||
const drawingRectangleCoords = getMouseCoordinates(event)
|
const drawingRectangleCoords = getPointerCoordinates(event)
|
||||||
|
|
||||||
setActiveDrawField(drawnFieldIndex)
|
setActiveDrawField(drawnFieldIndex)
|
||||||
setMouseState({
|
setMouseState({
|
||||||
dragging: true,
|
dragging: true,
|
||||||
clicked: false,
|
clicked: false,
|
||||||
coordsInWrapper: {
|
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 drawnField which we are moving
|
||||||
|
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||||
*/
|
*/
|
||||||
const handleDrawnFieldPointerMove = (
|
const handleDrawnFieldPointerMove = (
|
||||||
event: React.PointerEvent,
|
event: React.PointerEvent,
|
||||||
@ -219,15 +220,15 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
pageWidth: number
|
pageWidth: number
|
||||||
) => {
|
) => {
|
||||||
if (mouseState.dragging) {
|
if (mouseState.dragging) {
|
||||||
const { mouseX, mouseY, rect } = getMouseCoordinates(
|
const { x, y, rect } = getPointerCoordinates(
|
||||||
event,
|
event,
|
||||||
event.currentTarget.parentElement
|
event.currentTarget.parentElement
|
||||||
)
|
)
|
||||||
const coordsOffset = mouseState.coordsInWrapper
|
const coordsOffset = mouseState.coordsInWrapper
|
||||||
|
|
||||||
if (coordsOffset) {
|
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 rightLimit = to(pageWidth, rect.width) - drawnField.width
|
||||||
const bottomLimit = to(pageWidth, rect.height) - drawnField.height
|
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
|
* 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
|
* @param drawnFieldIndex which we are resizing
|
||||||
*/
|
*/
|
||||||
const handleResizePointerDown = (
|
const handleResizePointerDown = (
|
||||||
@ -266,8 +267,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Resizes the drawn element by the mouse position
|
* Resizes the drawn element by the mouse position
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param drawnField which we are resizing
|
* @param drawnField which we are resizing
|
||||||
|
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||||
*/
|
*/
|
||||||
const handleResizePointerMove = (
|
const handleResizePointerMove = (
|
||||||
event: React.PointerEvent,
|
event: React.PointerEvent,
|
||||||
@ -275,7 +277,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
pageWidth: number
|
pageWidth: number
|
||||||
) => {
|
) => {
|
||||||
if (mouseState.resizing) {
|
if (mouseState.resizing) {
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(
|
const { x, y } = getPointerCoordinates(
|
||||||
event,
|
event,
|
||||||
// currentTarget = span handle
|
// currentTarget = span handle
|
||||||
// 1st parent = drawnField
|
// 1st parent = drawnField
|
||||||
@ -283,8 +285,8 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
event.currentTarget.parentElement?.parentElement
|
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.width = width
|
||||||
drawnField.height = height
|
drawnField.height = height
|
||||||
@ -295,7 +297,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Removes the drawn element using the indexes in the params
|
* Removes the drawn element using the indexes in the params
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param pdfFileIndex pdf file index
|
* @param pdfFileIndex pdf file index
|
||||||
* @param pdfPageIndex pdf page index
|
* @param pdfPageIndex pdf page index
|
||||||
* @param drawnFileIndex drawn file 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
|
* so select can work properly
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
*/
|
*/
|
||||||
const handleUserSelectPointerDown = (event: React.PointerEvent) => {
|
const handleUserSelectPointerDown = (event: React.PointerEvent) => {
|
||||||
event.stopPropagation()
|
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 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
|
* event.target will be used
|
||||||
*/
|
*/
|
||||||
const getMouseCoordinates = (
|
const getPointerCoordinates = (
|
||||||
event: React.PointerEvent,
|
event: React.PointerEvent,
|
||||||
customTarget?: HTMLElement | null
|
customTarget?: HTMLElement | null
|
||||||
) => {
|
) => {
|
||||||
@ -337,12 +339,12 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
const rect = target.getBoundingClientRect()
|
const rect = target.getBoundingClientRect()
|
||||||
|
|
||||||
// Clamp X Y within the target
|
// 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 {
|
return {
|
||||||
mouseX,
|
x,
|
||||||
mouseY,
|
y,
|
||||||
rect
|
rect
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,8 +6,8 @@ export interface MouseState {
|
|||||||
dragging?: boolean
|
dragging?: boolean
|
||||||
resizing?: boolean
|
resizing?: boolean
|
||||||
coordsInWrapper?: {
|
coordsInWrapper?: {
|
||||||
mouseX: number
|
x: number
|
||||||
mouseY: number
|
y: number
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user