feat(modal): add zoomable image viewer
This commit is contained in:
231
src/app/shared/components/image-modal/image-modal.component.ts
Normal file
231
src/app/shared/components/image-modal/image-modal.component.ts
Normal file
@@ -0,0 +1,231 @@
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
ElementRef,
|
||||
computed,
|
||||
inject,
|
||||
signal,
|
||||
viewChild,
|
||||
} from '@angular/core';
|
||||
|
||||
import { ImageModalData, MODAL_DATA } from '../../../core/services/modal.service';
|
||||
|
||||
interface Point {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-image-modal',
|
||||
templateUrl: './image-modal.component.html',
|
||||
styleUrl: './image-modal.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ImageModalComponent {
|
||||
protected readonly data = inject<ImageModalData>(MODAL_DATA);
|
||||
private readonly viewport = viewChild.required<ElementRef<HTMLElement>>('viewport');
|
||||
private readonly image = viewChild<ElementRef<HTMLImageElement>>('image');
|
||||
private readonly pointers = new Map<number, Point>();
|
||||
|
||||
protected readonly zoom = signal(this.data.initialZoom);
|
||||
protected readonly offsetX = signal(0);
|
||||
protected readonly offsetY = signal(0);
|
||||
protected readonly imageFailed = signal(false);
|
||||
protected readonly transform = computed(
|
||||
() => `translate3d(${this.offsetX()}px, ${this.offsetY()}px, 0) scale(${this.zoom()})`,
|
||||
);
|
||||
protected readonly zoomLabel = computed(() => `${Math.round(this.zoom() * 100)}%`);
|
||||
|
||||
private dragStart: Point | null = null;
|
||||
private dragOffset: Point = { x: 0, y: 0 };
|
||||
private pinchDistance = 0;
|
||||
private pinchZoom = 1;
|
||||
private pinchLocal: Point = { x: 0, y: 0 };
|
||||
private pointerDownAt: Point | null = null;
|
||||
private gestureMoved = false;
|
||||
private hadMultiplePointers = false;
|
||||
private lastTapAt = 0;
|
||||
|
||||
protected zoomIn(): void {
|
||||
this.setZoomAt(Math.min(this.data.maxZoom, this.zoom() + 0.5));
|
||||
}
|
||||
|
||||
protected zoomOut(): void {
|
||||
this.setZoomAt(Math.max(this.data.minZoom, this.zoom() - 0.5));
|
||||
}
|
||||
|
||||
protected reset(): void {
|
||||
this.zoom.set(this.data.initialZoom);
|
||||
this.offsetX.set(0);
|
||||
this.offsetY.set(0);
|
||||
}
|
||||
|
||||
protected onWheel(event: WheelEvent): void {
|
||||
event.preventDefault();
|
||||
const factor = event.deltaY < 0 ? 1.15 : 1 / 1.15;
|
||||
this.setZoomAt(this.zoom() * factor, event.clientX, event.clientY);
|
||||
}
|
||||
|
||||
protected onDoubleClick(event: MouseEvent): void {
|
||||
this.toggleZoom(event.clientX, event.clientY);
|
||||
}
|
||||
|
||||
protected onPointerDown(event: PointerEvent): void {
|
||||
if (event.pointerType === 'mouse' && event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
this.viewport().nativeElement.setPointerCapture?.(event.pointerId);
|
||||
const point = { x: event.clientX, y: event.clientY };
|
||||
this.pointers.set(event.pointerId, point);
|
||||
this.pointerDownAt = point;
|
||||
this.gestureMoved = false;
|
||||
|
||||
if (this.pointers.size === 1) {
|
||||
this.dragStart = point;
|
||||
this.dragOffset = { x: this.offsetX(), y: this.offsetY() };
|
||||
} else if (this.pointers.size === 2) {
|
||||
this.hadMultiplePointers = true;
|
||||
this.beginPinch();
|
||||
}
|
||||
}
|
||||
|
||||
protected onPointerMove(event: PointerEvent): void {
|
||||
if (!this.pointers.has(event.pointerId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const point = { x: event.clientX, y: event.clientY };
|
||||
this.pointers.set(event.pointerId, point);
|
||||
|
||||
if (this.pointerDownAt && this.distance(this.pointerDownAt, point) > 4) {
|
||||
this.gestureMoved = true;
|
||||
}
|
||||
|
||||
if (this.pointers.size === 2) {
|
||||
const [first, second] = [...this.pointers.values()];
|
||||
const distance = this.distance(first, second);
|
||||
const midpoint = this.midpoint(first, second);
|
||||
const nextZoom = this.clampZoom(this.pinchZoom * (distance / this.pinchDistance));
|
||||
const rect = this.viewport().nativeElement.getBoundingClientRect();
|
||||
|
||||
this.zoom.set(nextZoom);
|
||||
this.offsetX.set(midpoint.x - (rect.left + rect.width / 2) - this.pinchLocal.x * nextZoom);
|
||||
this.offsetY.set(midpoint.y - (rect.top + rect.height / 2) - this.pinchLocal.y * nextZoom);
|
||||
this.clampOffset();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.pointers.size === 1 && this.dragStart && this.zoom() > this.data.minZoom) {
|
||||
this.offsetX.set(this.dragOffset.x + point.x - this.dragStart.x);
|
||||
this.offsetY.set(this.dragOffset.y + point.y - this.dragStart.y);
|
||||
this.clampOffset();
|
||||
}
|
||||
}
|
||||
|
||||
protected onPointerUp(event: PointerEvent): void {
|
||||
const wasTouch = event.pointerType === 'touch';
|
||||
const tapPoint = this.pointers.get(event.pointerId);
|
||||
this.pointers.delete(event.pointerId);
|
||||
const viewport = this.viewport().nativeElement;
|
||||
if (viewport.hasPointerCapture?.(event.pointerId)) {
|
||||
viewport.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
if (wasTouch && tapPoint && !this.gestureMoved && !this.hadMultiplePointers) {
|
||||
const now = Date.now();
|
||||
if (now - this.lastTapAt < 300) {
|
||||
this.toggleZoom(tapPoint.x, tapPoint.y);
|
||||
this.lastTapAt = 0;
|
||||
} else {
|
||||
this.lastTapAt = now;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.pointers.size === 1) {
|
||||
const remaining = [...this.pointers.values()][0];
|
||||
this.dragStart = remaining;
|
||||
this.dragOffset = { x: this.offsetX(), y: this.offsetY() };
|
||||
} else if (this.pointers.size === 0) {
|
||||
this.dragStart = null;
|
||||
this.pointerDownAt = null;
|
||||
this.hadMultiplePointers = false;
|
||||
this.clampOffset();
|
||||
}
|
||||
}
|
||||
|
||||
protected onImageLoad(): void {
|
||||
this.imageFailed.set(false);
|
||||
this.clampOffset();
|
||||
}
|
||||
|
||||
private beginPinch(): void {
|
||||
const [first, second] = [...this.pointers.values()];
|
||||
const midpoint = this.midpoint(first, second);
|
||||
const rect = this.viewport().nativeElement.getBoundingClientRect();
|
||||
|
||||
this.pinchDistance = Math.max(1, this.distance(first, second));
|
||||
this.pinchZoom = this.zoom();
|
||||
this.pinchLocal = {
|
||||
x: (midpoint.x - (rect.left + rect.width / 2) - this.offsetX()) / this.zoom(),
|
||||
y: (midpoint.y - (rect.top + rect.height / 2) - this.offsetY()) / this.zoom(),
|
||||
};
|
||||
}
|
||||
|
||||
private toggleZoom(clientX?: number, clientY?: number): void {
|
||||
const target =
|
||||
this.zoom() > this.data.minZoom + 0.01
|
||||
? this.data.minZoom
|
||||
: Math.min(this.data.maxZoom, Math.max(2, this.data.minZoom));
|
||||
this.setZoomAt(target, clientX, clientY);
|
||||
}
|
||||
|
||||
private setZoomAt(value: number, clientX?: number, clientY?: number): void {
|
||||
const nextZoom = this.clampZoom(value);
|
||||
const currentZoom = this.zoom();
|
||||
|
||||
if (clientX !== undefined && clientY !== undefined && currentZoom > 0) {
|
||||
const rect = this.viewport().nativeElement.getBoundingClientRect();
|
||||
const pointX = clientX - (rect.left + rect.width / 2);
|
||||
const pointY = clientY - (rect.top + rect.height / 2);
|
||||
const localX = (pointX - this.offsetX()) / currentZoom;
|
||||
const localY = (pointY - this.offsetY()) / currentZoom;
|
||||
this.offsetX.set(pointX - localX * nextZoom);
|
||||
this.offsetY.set(pointY - localY * nextZoom);
|
||||
}
|
||||
|
||||
this.zoom.set(nextZoom);
|
||||
if (nextZoom <= this.data.minZoom) {
|
||||
this.offsetX.set(0);
|
||||
this.offsetY.set(0);
|
||||
}
|
||||
this.clampOffset();
|
||||
}
|
||||
|
||||
private clampZoom(value: number): number {
|
||||
return Math.min(this.data.maxZoom, Math.max(this.data.minZoom, value));
|
||||
}
|
||||
|
||||
private clampOffset(): void {
|
||||
const viewport = this.viewport().nativeElement;
|
||||
const image = this.image()?.nativeElement;
|
||||
if (!image) {
|
||||
return;
|
||||
}
|
||||
|
||||
const maxX = Math.max(0, (image.offsetWidth * this.zoom() - viewport.clientWidth) / 2);
|
||||
const maxY = Math.max(0, (image.offsetHeight * this.zoom() - viewport.clientHeight) / 2);
|
||||
|
||||
this.offsetX.set(Math.min(maxX, Math.max(-maxX, this.offsetX())));
|
||||
this.offsetY.set(Math.min(maxY, Math.max(-maxY, this.offsetY())));
|
||||
}
|
||||
|
||||
private midpoint(first: Point, second: Point): Point {
|
||||
return { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
|
||||
}
|
||||
|
||||
private distance(first: Point, second: Point): number {
|
||||
return Math.hypot(second.x - first.x, second.y - first.y);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user