sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Responsiveness and tabs #179

Merged
enes merged 23 commits from 177-sticky-side-columns into staging 2024-09-05 07:30:55 +00:00
Conversation 0 Commits 23 Files Changed 30 +42 -40
2 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9223857e18 - Show all commits

78
src/components/DrawPDFFields/index.tsx
View File

@ -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
} }
} }

4
src/types/drawing.ts
View File

@ -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
} }
} }