n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/lightbox: fix zooming in when image is rotated

Browse source
This commit is contained in:
Tulir Asokan 2025-01-26 21:55:21 +02:00
parent 0da4dede52
commit 19a4913a3f
1 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/ui/modal/Lightbox.tsx
View file

@ -91,6 +91,14 @@ export class Lightbox extends Component<LightboxProps> {
} }
} }
get orientation(): number {
let rot = (this.rotate / 90) % 4
if (rot < 0) {
rot += 4
}
return rot
}
close = () => { close = () => {
this.translate = { x: 0, y: 0 } this.translate = { x: 0, y: 0 }
this.rotate = 0 this.rotate = 0
@ -120,8 +128,14 @@ export class Lightbox extends Component<LightboxProps> {
const newDelta = this.zoom + delta * this.zoom const newDelta = this.zoom + delta * this.zoom
this.zoom = Math.min(Math.max(newDelta, 0.01), 10) this.zoom = Math.min(Math.max(newDelta, 0.01), 10)
const zoomDelta = this.zoom - oldZoom const zoomDelta = this.zoom - oldZoom
this.translate.x += zoomDelta * (this.ref.current.clientWidth / 2 - evt.nativeEvent.offsetX) const orientation = this.orientation
this.translate.y += zoomDelta * (this.ref.current.clientHeight / 2 - evt.nativeEvent.offsetY) const negateX = (orientation === 2 || orientation == 3) ? -1 : 1
const negateY = (orientation === 2 || orientation == 1) ? -1 : 1
const deltaX = zoomDelta * (this.ref.current.clientWidth / 2 - evt.nativeEvent.offsetX) * negateX
const deltaY = zoomDelta * (this.ref.current.clientHeight / 2 - evt.nativeEvent.offsetY) * negateY
const flipXY = orientation === 1 || orientation === 3
this.translate.x += flipXY ? deltaY : deltaX
this.translate.y += flipXY ? deltaX : deltaY
const style = this.style const style = this.style
this.ref.current.style.translate = style.translate this.ref.current.style.translate = style.translate
this.ref.current.style.scale = style.scale this.ref.current.style.scale = style.scale