Responsiveness and tabs #179
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -6,8 +6,8 @@ export interface MouseState {
|
||||
dragging?: boolean
|
||||
resizing?: boolean
|
||||
coordsInWrapper?: {
|
||||
mouseX: number
|
||||
mouseY: number
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user