fix(image-viewer): pan tracks the cursor 1:1 when zoomed
The timeline image viewer's transform applied translate inside scale(), so dragging a zoomed image moved it by zoom x the cursor distance (panning outran the pointer). Divide the pan offset by zoom so it tracks 1:1 - matching the media-gallery lightbox fix. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -86,7 +86,12 @@ export const ImageViewer = as<'div', ImageViewerProps>(
|
|||||||
className={css.ImageViewerImg}
|
className={css.ImageViewerImg}
|
||||||
style={{
|
style={{
|
||||||
cursor,
|
cursor,
|
||||||
transform: `scale(${zoom}) translate(${pan.translateX}px, ${pan.translateY}px)`,
|
// translate runs inside scale(), so divide by zoom to make a dragged
|
||||||
|
// pixel move the image one screen pixel (1:1 with the cursor) rather
|
||||||
|
// than `zoom` pixels.
|
||||||
|
transform: `scale(${zoom}) translate(${pan.translateX / zoom}px, ${
|
||||||
|
pan.translateY / zoom
|
||||||
|
}px)`,
|
||||||
}}
|
}}
|
||||||
src={src}
|
src={src}
|
||||||
alt={alt}
|
alt={alt}
|
||||||
|
|||||||
Reference in New Issue
Block a user