bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ZoomableImage: refactor, clean up unused code

Browse source
This commit is contained in:
Alex Gleason 2022-10-12 15:26:34 -05:00
parent f95168b3e4
commit e6b0d17699
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 7 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/soapbox/features/ui/components/zoomable_image.tsx
View file

@ -4,7 +4,6 @@ const MIN_SCALE = 1;
const MAX_SCALE = 4; const MAX_SCALE = 4;
type Point = { x: number, y: number }; type Point = { x: number, y: number };
type EventRemover = () => void;
const getMidpoint = (p1: React.Touch, p2: React.Touch): Point => ({ const getMidpoint = (p1: React.Touch, p2: React.Touch): Point => ({
x: (p1.clientX + p2.clientX) / 2, x: (p1.clientX + p2.clientX) / 2,
@ -22,7 +21,7 @@ interface IZoomableImage {
onClick?: React.MouseEventHandler, onClick?: React.MouseEventHandler,
} }
export default class ZoomableImage extends React.PureComponent<IZoomableImage> { class ZoomableImage extends React.PureComponent<IZoomableImage> {
static defaultProps = { static defaultProps = {
alt: '', alt: '',
@ -34,31 +33,20 @@ export default class ZoomableImage extends React.PureComponent<IZoomableImage> {
scale: MIN_SCALE, scale: MIN_SCALE,
} }
removers: EventRemover[] = [];
container: HTMLDivElement | null = null; container: HTMLDivElement | null = null;
image: HTMLImageElement | null = null; image: HTMLImageElement | null = null;
lastTouchEndTime = 0;
lastDistance = 0; lastDistance = 0;
lastMidpoint: Point | undefined = undefined;
componentDidMount() { componentDidMount() {
let handler = this.handleTouchStart; this.container?.addEventListener('touchstart', this.handleTouchStart);
this.container?.addEventListener('touchstart', handler);
this.removers.push(() => this.container?.removeEventListener('touchstart', handler));
handler = this.handleTouchMove;
// on Chrome 56+, touch event listeners will default to passive // on Chrome 56+, touch event listeners will default to passive
// https://www.chromestatus.com/features/5093566007214080 // https://www.chromestatus.com/features/5093566007214080
this.container?.addEventListener('touchmove', handler, { passive: false }); this.container?.addEventListener('touchmove', this.handleTouchMove, { passive: false });
this.removers.push(() => this.container?.removeEventListener('touchend', handler));
} }
componentWillUnmount() { componentWillUnmount() {
this.removeEventListeners(); this.container?.removeEventListener('touchstart', this.handleTouchStart);
} this.container?.removeEventListener('touchend', this.handleTouchMove);
removeEventListeners() {
this.removers.forEach(listeners => listeners());
this.removers = [];
} }
handleTouchStart = (e: TouchEvent) => { handleTouchStart = (e: TouchEvent) => {
@ -89,7 +77,6 @@ export default class ZoomableImage extends React.PureComponent<IZoomableImage> {
this.zoom(scale, midpoint); this.zoom(scale, midpoint);
this.lastMidpoint = midpoint;
this.lastDistance = distance; this.lastDistance = distance;
} }
@ -158,3 +145,5 @@ export default class ZoomableImage extends React.PureComponent<IZoomableImage> {
} }
} }
export default ZoomableImage;