Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: consider page scroll when retrieving container point #484

Merged
merged 2 commits into from
Sep 8, 2023
Merged

fix: consider page scroll when retrieving container point #484

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7daeb6e
fix: consider page scroll when retrieving container point
SPponmag Sep 7, 2023
655722b
fix: store container position on all gestures
SPponmag Sep 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions src/Cropper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ class Cropper extends React.Component<CropperProps, State> {

imageRef: React.RefObject<HTMLImageElement> = React.createRef()
videoRef: React.RefObject<HTMLVideoElement> = React.createRef()
containerPosition: Point = { x: 0, y: 0 }
containerRef: HTMLDivElement | null = null
styleRef: HTMLStyleElement | null = null
containerRect: DOMRect | null = null
Expand Down Expand Up @@ -142,6 +143,8 @@ class Cropper extends React.Component<CropperProps, State> {
this.containerRef.addEventListener('gesturestart', this.onGestureStart as EventListener)
}

this.currentDoc.addEventListener('scroll', this.onScroll);

if (!this.props.disableAutomaticStylesInjection) {
this.styleRef = this.currentDoc.createElement('style')
this.styleRef.setAttribute('type', 'text/css')
Expand All @@ -165,6 +168,7 @@ class Cropper extends React.Component<CropperProps, State> {
if (this.props.setVideoRef) {
this.props.setVideoRef(this.videoRef)
}

}

componentWillUnmount() {
Expand Down Expand Up @@ -242,6 +246,7 @@ class Cropper extends React.Component<CropperProps, State> {
this.currentDoc.removeEventListener('touchend', this.onDragStopped)
this.currentDoc.removeEventListener('gesturemove', this.onGestureMove as EventListener)
this.currentDoc.removeEventListener('gestureend', this.onGestureEnd as EventListener)
this.currentDoc.removeEventListener('scroll', this.onScroll);
}

clearScrollEvent = () => {
Expand Down Expand Up @@ -326,6 +331,7 @@ class Cropper extends React.Component<CropperProps, State> {

if (mediaRef && this.containerRef) {
this.containerRect = this.containerRef.getBoundingClientRect()
this.saveContainerPosition()
const containerAspect = this.containerRect.width / this.containerRect.height
const naturalWidth =
this.imageRef.current?.naturalWidth || this.videoRef.current?.videoWidth || 0
Expand Down Expand Up @@ -417,6 +423,13 @@ class Cropper extends React.Component<CropperProps, State> {
}
}

saveContainerPosition = () => {
if (this.containerRef) {
const bounds = this.containerRef.getBoundingClientRect()
this.containerPosition = { x: bounds.left, y: bounds.top }
}
}

static getMousePoint = (e: MouseEvent | React.MouseEvent | GestureEvent) => ({
x: Number(e.clientX),
y: Number(e.clientY),
Expand All @@ -432,11 +445,18 @@ class Cropper extends React.Component<CropperProps, State> {
e.preventDefault()
this.currentDoc.addEventListener('mousemove', this.onMouseMove)
this.currentDoc.addEventListener('mouseup', this.onDragStopped)
this.saveContainerPosition()
this.onDragStart(Cropper.getMousePoint(e))
}

onMouseMove = (e: MouseEvent) => this.onDrag(Cropper.getMousePoint(e))

onScroll = (e: Event) => {
if (!this.currentDoc) return
e.preventDefault()
this.saveContainerPosition()
}

onTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
if (!this.currentDoc) return
this.isTouching = true
Expand All @@ -446,6 +466,8 @@ class Cropper extends React.Component<CropperProps, State> {

this.currentDoc.addEventListener('touchmove', this.onTouchMove, { passive: false }) // iOS 11 now defaults to passive: true
this.currentDoc.addEventListener('touchend', this.onDragStopped)

this.saveContainerPosition()

if (e.touches.length === 2) {
this.onPinchStart(e)
Expand Down Expand Up @@ -587,13 +609,13 @@ class Cropper extends React.Component<CropperProps, State> {
)
}

getPointOnContainer = ({ x, y }: Point) => {
getPointOnContainer = ({ x, y }: Point, containerTopLeft: Point): Point => {
if (!this.containerRect) {
throw new Error('The Cropper is not mounted')
}
return {
x: this.containerRect.width / 2 - (x - this.containerRect.left),
y: this.containerRect.height / 2 - (y - this.containerRect.top),
x: this.containerRect.width / 2 - (x - containerTopLeft.x),
y: this.containerRect.height / 2 - (y - containerTopLeft.y),
}
}

Expand All @@ -611,7 +633,7 @@ class Cropper extends React.Component<CropperProps, State> {
const newZoom = clamp(zoom, this.props.minZoom, this.props.maxZoom)

if (shouldUpdatePosition) {
const zoomPoint = this.getPointOnContainer(point)
const zoomPoint = this.getPointOnContainer(point, this.containerPosition)
const zoomTarget = this.getPointOnMedia(zoomPoint)
const requestedPosition = {
x: zoomTarget.x * newZoom - zoomPoint.x,
Expand Down
Loading