zkit-ui 2.0.4 → 2.0.6

package/dist/ui/NativeImagePreview/web/viewer.js

@@ -0,0 +1,894 @@
+"use strict";
+/// <reference lib="dom" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeImagePreviewWebViewer = void 0;
+exports.createNativeImagePreviewWeb = createNativeImagePreviewWeb;
+exports.sourceRectFromElement = sourceRectFromElement;
+const geometry_1 = require("./geometry");
+const media_1 = require("./media");
+const transition_1 = require("./transition");
+const MAX_SCALE = 5;
+const DOUBLE_TAP_SCALE = 2.5;
+const DRAG_DISMISS_DISTANCE = 72;
+const DRAG_DISMISS_MIN_FLING_DISTANCE = 24;
+const DRAG_DISMISS_VELOCITY = 520;
+const SWIPE_DISTANCE = 52;
+const SWIPE_MIN_FLING_DISTANCE = 22;
+const SWIPE_VELOCITY = 480;
+const MODE_LOCK_DISTANCE = 8;
+class NativeImagePreviewWebViewer {
+    constructor() {
+        this.root = null;
+        this.backdrop = null;
+        this.viewport = null;
+        this.track = null;
+        this.closeButton = null;
+        this.counter = null;
+        this.mediaElements = [];
+        this.slideStates = [];
+        this.items = [];
+        this.options = null;
+        this.index = 0;
+        this.openState = false;
+        this.closing = false;
+        this.sourceVisibility = 'hidden';
+        this.sourceElement = null;
+        this.sourcePreviousVisibility = '';
+        this.pointers = new Map();
+        this.mode = 'none';
+        this.downX = 0;
+        this.downY = 0;
+        this.lastX = 0;
+        this.lastY = 0;
+        this.downAt = 0;
+        this.dragX = 0;
+        this.dragY = 0;
+        this.pinchStartDistance = 1;
+        this.pinchStartScale = 1;
+        this.pinchStartTranslateX = 0;
+        this.pinchStartTranslateY = 0;
+        this.pinchStartCenterX = 0;
+        this.pinchStartCenterY = 0;
+        this.previousBodyOverflow = '';
+        this.previousHtmlOverflow = '';
+        this.viewportWidth = 1;
+        this.viewportHeight = 1;
+        this.handlePointerDown = (event) => {
+            if (this.closing || !this.root) {
+                return;
+            }
+            const target = event.target;
+            if (this.shouldIgnorePointerStart(target, event)) {
+                return;
+            }
+            this.root.setPointerCapture(event.pointerId);
+            this.pointers.set(event.pointerId, { id: event.pointerId, x: event.clientX, y: event.clientY });
+            this.downX = event.clientX;
+            this.downY = event.clientY;
+            this.lastX = event.clientX;
+            this.lastY = event.clientY;
+            this.downAt = performance.now();
+            this.dragX = 0;
+            this.dragY = 0;
+            this.mode = this.pointers.size >= 2 ? 'pinch' : 'none';
+            this.preparePinchIfNeeded();
+        };
+        this.handlePointerMove = (event) => {
+            if (this.closing || !this.pointers.has(event.pointerId)) {
+                return;
+            }
+            event.preventDefault();
+            this.pointers.set(event.pointerId, { id: event.pointerId, x: event.clientX, y: event.clientY });
+            if (this.pointers.size >= 2) {
+                this.mode = 'pinch';
+                this.applyPinch();
+                return;
+            }
+            const state = this.activeState();
+            const dx = event.clientX - this.downX;
+            const dy = event.clientY - this.downY;
+            const frameDx = event.clientX - this.lastX;
+            const frameDy = event.clientY - this.lastY;
+            this.lastX = event.clientX;
+            this.lastY = event.clientY;
+            if (this.mode === 'none') {
+                if (Math.hypot(dx, dy) < MODE_LOCK_DISTANCE) {
+                    return;
+                }
+                if (state.scale > 1.02) {
+                    this.mode = 'pan';
+                }
+                else if (Math.abs(dy) > Math.abs(dx) * 1.15) {
+                    this.mode = 'dismiss';
+                }
+                else {
+                    this.mode = 'swipe';
+                }
+            }
+            if (this.mode === 'pan') {
+                state.translateX += frameDx;
+                state.translateY += frameDy;
+                this.clampActiveState();
+                this.applyActiveMediaTransform(false);
+                return;
+            }
+            if (this.mode === 'dismiss') {
+                this.applyDismissDrag(dy);
+                return;
+            }
+            if (this.mode === 'swipe') {
+                this.dragX = dx;
+                this.updateTrack();
+            }
+        };
+        this.handlePointerUp = (event) => {
+            var _a;
+            if (!this.pointers.has(event.pointerId)) {
+                return;
+            }
+            const finalDx = event.clientX - this.downX;
+            const finalDy = event.clientY - this.downY;
+            this.pointers.delete(event.pointerId);
+            if ((_a = this.root) === null || _a === void 0 ? void 0 : _a.hasPointerCapture(event.pointerId)) {
+                this.root.releasePointerCapture(event.pointerId);
+            }
+            if (this.pointers.size >= 2) {
+                this.preparePinchIfNeeded();
+                return;
+            }
+            if (this.pointers.size === 1) {
+                const point = [...this.pointers.values()][0];
+                this.downX = point.x;
+                this.downY = point.y;
+                this.lastX = point.x;
+                this.lastY = point.y;
+                this.mode = 'none';
+                return;
+            }
+            const elapsed = Math.max(1, performance.now() - this.downAt);
+            const velocityX = (event.clientX - this.downX) / elapsed * 1000;
+            const velocityY = (event.clientY - this.downY) / elapsed * 1000;
+            if (this.mode === 'dismiss') {
+                this.applyDismissDrag(finalDy);
+                const shouldClose = Math.abs(this.dragY) > DRAG_DISMISS_DISTANCE
+                    || (Math.abs(this.dragY) > DRAG_DISMISS_MIN_FLING_DISTANCE
+                        && Math.abs(velocityY) > DRAG_DISMISS_VELOCITY);
+                if (shouldClose) {
+                    void this.close('drag');
+                }
+                else {
+                    this.resetDismissDrag();
+                }
+            }
+            else if (this.mode === 'swipe') {
+                this.dragX = finalDx;
+                this.finishSwipe(velocityX);
+            }
+            else if (this.mode === 'none') {
+                this.handleTap(event);
+            }
+            this.mode = 'none';
+            this.dragX = 0;
+            this.dragY = 0;
+        };
+        this.handleWheel = (event) => {
+            if (!event.ctrlKey && Math.abs(event.deltaY) < Math.abs(event.deltaX)) {
+                return;
+            }
+            event.preventDefault();
+            const state = this.activeState();
+            const nextScale = (0, geometry_1.clamp)(state.scale * (event.deltaY > 0 ? 0.92 : 1.08), 1, MAX_SCALE);
+            state.scale = nextScale;
+            if (nextScale <= 1.01) {
+                state.translateX = 0;
+                state.translateY = 0;
+            }
+            this.clampActiveState();
+            this.applyActiveMediaTransform(true);
+        };
+        this.handleRootClick = (event) => {
+            if (event.target === this.backdrop) {
+                void this.close('backdrop');
+            }
+        };
+        this.handleCloseClick = () => {
+            void this.close('button');
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.openState) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                void this.close('escape');
+            }
+            if (event.key === 'ArrowLeft') {
+                this.goTo(this.index - 1, 'api');
+            }
+            if (event.key === 'ArrowRight') {
+                this.goTo(this.index + 1, 'api');
+            }
+        };
+        this.handleResize = () => {
+            this.captureViewportSize();
+            this.applyViewportStyle();
+            void this.layoutMediaElements().then(() => {
+                this.clampActiveState();
+                this.updateTrack();
+                this.applyActiveMediaTransform(false);
+            });
+        };
+        this.handleWindowBlur = () => {
+            this.cancelActiveGesture();
+        };
+        this.handleVisibilityChange = () => {
+            if (document.visibilityState !== 'visible') {
+                this.cancelActiveGesture();
+            }
+        };
+        this.handleLostPointerCapture = (event) => {
+            const pointerId = event.pointerId;
+            window.setTimeout(() => {
+                if (this.pointers.has(pointerId)) {
+                    this.cancelActiveGesture();
+                }
+            }, 80);
+        };
+    }
+    async open(options) {
+        var _a, _b;
+        if (this.openState) {
+            await this.close('replace');
+        }
+        const items = (0, media_1.normalizeItems)(options.items);
+        if (!items.length) {
+            return;
+        }
+        this.options = options;
+        this.items = items;
+        this.index = (0, geometry_1.clamp)(Math.trunc((_a = options.index) !== null && _a !== void 0 ? _a : 0), 0, items.length - 1);
+        this.sourceVisibility = (_b = options.sourceVisibility) !== null && _b !== void 0 ? _b : 'hidden';
+        this.sourceElement = this.resolveSourceElement(this.index);
+        this.slideStates = items.map(() => this.createSlideState());
+        this.openState = true;
+        this.closing = false;
+        this.captureViewportSize();
+        this.lockDocumentScroll();
+        this.mount();
+        await this.layoutMediaElements();
+        this.updateCounter();
+        this.updateTrack();
+        await this.nextFrame();
+        await this.performOpenTransition();
+        this.showContent();
+    }
+    async close(reason = 'api') {
+        if (!this.openState || this.closing) {
+            return;
+        }
+        this.closing = true;
+        await this.performCloseTransition(reason);
+        this.finishClose(reason);
+    }
+    destroy() {
+        if (!this.openState) {
+            this.unmount();
+            return;
+        }
+        this.finishClose('api');
+    }
+    getIndex() {
+        return this.index;
+    }
+    isOpen() {
+        return this.openState;
+    }
+    mount() {
+        var _a, _b, _c, _d;
+        const root = document.createElement('div');
+        root.className = `native-image-preview-root native-image-preview-theme-${(_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.theme) !== null && _b !== void 0 ? _b : 'dark'}`;
+        root.tabIndex = -1;
+        this.applyViewportStyle(root);
+        const backdrop = document.createElement('div');
+        backdrop.className = 'native-image-preview-backdrop';
+        backdrop.style.opacity = '0';
+        root.append(backdrop);
+        const viewport = document.createElement('div');
+        viewport.className = 'native-image-preview-viewport';
+        const track = document.createElement('div');
+        track.className = 'native-image-preview-track';
+        track.style.opacity = '0';
+        this.items.forEach((item, index) => {
+            const slide = document.createElement('div');
+            slide.className = 'native-image-preview-slide';
+            slide.dataset.index = String(index);
+            const media = this.createMediaElement(item);
+            this.mediaElements.push(media);
+            slide.append(media);
+            track.append(slide);
+        });
+        viewport.append(track);
+        root.append(viewport);
+        const closeButton = document.createElement('button');
+        closeButton.className = 'native-image-preview-close';
+        closeButton.type = 'button';
+        closeButton.textContent = '×';
+        closeButton.setAttribute('aria-label', 'Close image preview');
+        closeButton.hidden = ((_c = this.options) === null || _c === void 0 ? void 0 : _c.closeButton) === false;
+        closeButton.style.opacity = '0';
+        root.append(closeButton);
+        const counter = document.createElement('div');
+        counter.className = 'native-image-preview-counter';
+        counter.hidden = ((_d = this.options) === null || _d === void 0 ? void 0 : _d.counter) === false || this.items.length <= 1;
+        counter.style.opacity = '0';
+        root.append(counter);
+        this.root = root;
+        this.backdrop = backdrop;
+        this.viewport = viewport;
+        this.track = track;
+        this.closeButton = closeButton;
+        this.counter = counter;
+        root.addEventListener('pointerdown', this.handlePointerDown);
+        root.addEventListener('pointermove', this.handlePointerMove);
+        root.addEventListener('pointerup', this.handlePointerUp);
+        root.addEventListener('pointercancel', this.handlePointerUp);
+        root.addEventListener('lostpointercapture', this.handleLostPointerCapture);
+        root.addEventListener('wheel', this.handleWheel, { passive: false });
+        root.addEventListener('click', this.handleRootClick);
+        closeButton.addEventListener('click', this.handleCloseClick);
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('resize', this.handleResize);
+        window.addEventListener('blur', this.handleWindowBlur);
+        window.addEventListener('pagehide', this.handleWindowBlur);
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        document.body.append(root);
+        root.focus({ preventScroll: true });
+    }
+    createMediaElement(item) {
+        var _a;
+        if (item.type === 'video') {
+            const video = document.createElement('video');
+            video.className = 'native-image-preview-media native-image-preview-video';
+            video.src = item.src;
+            video.poster = (_a = item.poster) !== null && _a !== void 0 ? _a : '';
+            if (item.width && item.height) {
+                video.width = item.width;
+                video.height = item.height;
+            }
+            video.controls = true;
+            video.playsInline = true;
+            video.preload = 'metadata';
+            return video;
+        }
+        const image = document.createElement('img');
+        image.className = 'native-image-preview-media native-image-preview-image';
+        image.src = item.src;
+        image.alt = item.alt;
+        if (item.width && item.height) {
+            image.width = item.width;
+            image.height = item.height;
+        }
+        image.draggable = false;
+        image.decoding = 'async';
+        return image;
+    }
+    async performOpenTransition() {
+        const root = this.root;
+        const backdrop = this.backdrop;
+        const track = this.track;
+        const item = this.items[this.index];
+        if (!root || !backdrop || !track || !item) {
+            return;
+        }
+        track.style.opacity = '0';
+        backdrop.style.opacity = '0';
+        const sourceGeometry = await this.resolveSourceGeometry(item);
+        const targetGeometry = await this.resolveTargetGeometry(item);
+        if (!sourceGeometry || !targetGeometry) {
+            backdrop.style.opacity = '1';
+            return;
+        }
+        await (0, transition_1.animateSharedElement)({
+            item,
+            from: sourceGeometry,
+            to: targetGeometry,
+            parent: root,
+            beforeStart: () => {
+                this.hideSourceElement();
+            },
+            onProgress: (progress) => {
+                backdrop.style.opacity = String(progress);
+            },
+            beforeRemove: () => {
+                this.showContent();
+            },
+        });
+    }
+    async performCloseTransition(reason) {
+        const root = this.root;
+        const backdrop = this.backdrop;
+        const track = this.track;
+        const item = this.items[this.index];
+        const media = this.mediaElements[this.index];
+        if (!root || !backdrop || !track || !item || !media) {
+            return;
+        }
+        this.pauseInactiveVideos(-1);
+        this.hideControls();
+        const from = await this.resolveCurrentMediaGeometry(item, media);
+        const to = await this.resolveReturnGeometry(item);
+        if (!from || !to) {
+            root.classList.add('native-image-preview-fading-out');
+            await this.delay(180);
+            return;
+        }
+        const backdropStartOpacity = this.resolveBackdropCloseStartOpacity(backdrop, reason);
+        await (0, transition_1.animateSharedElement)({
+            item,
+            from,
+            to,
+            parent: root,
+            duration: reason === 'drag' ? 260 : 300,
+            beforeStart: () => {
+                track.style.opacity = '0';
+            },
+            onProgress: (progress) => {
+                backdrop.style.opacity = String(backdropStartOpacity * (1 - progress));
+            },
+            beforeRemove: () => {
+                this.restoreSourceElement();
+            },
+        });
+    }
+    resolveBackdropCloseStartOpacity(backdrop, reason) {
+        if (reason !== 'drag') {
+            return 1;
+        }
+        const opacity = Number.parseFloat(getComputedStyle(backdrop).opacity);
+        return Number.isFinite(opacity) ? (0, geometry_1.clamp)(opacity, 0, 1) : 1;
+    }
+    showContent() {
+        if (!this.track || !this.backdrop) {
+            return;
+        }
+        this.backdrop.style.opacity = '1';
+        this.track.style.opacity = '1';
+        this.showControls();
+        this.applyActiveMediaTransform(false);
+    }
+    showControls() {
+        if (this.closeButton && !this.closeButton.hidden) {
+            this.closeButton.style.opacity = '1';
+        }
+        if (this.counter && !this.counter.hidden) {
+            this.counter.style.opacity = '1';
+        }
+    }
+    hideControls() {
+        if (this.closeButton) {
+            this.closeButton.style.opacity = '0';
+        }
+        if (this.counter) {
+            this.counter.style.opacity = '0';
+        }
+    }
+    finishClose(reason) {
+        var _a, _b, _c;
+        const item = (_a = this.items[this.index]) !== null && _a !== void 0 ? _a : null;
+        const index = this.index;
+        this.restoreSourceElement();
+        this.unlockDocumentScroll();
+        this.unmount();
+        (_c = (_b = this.options) === null || _b === void 0 ? void 0 : _b.onClose) === null || _c === void 0 ? void 0 : _c.call(_b, { reason, index, item });
+        this.openState = false;
+        this.closing = false;
+        this.items = [];
+        this.options = null;
+        this.mediaElements = [];
+        this.slideStates = [];
+        this.pointers.clear();
+        this.mode = 'none';
+    }
+    unmount() {
+        const root = this.root;
+        const closeButton = this.closeButton;
+        if (!root) {
+            return;
+        }
+        root.removeEventListener('pointerdown', this.handlePointerDown);
+        root.removeEventListener('pointermove', this.handlePointerMove);
+        root.removeEventListener('pointerup', this.handlePointerUp);
+        root.removeEventListener('pointercancel', this.handlePointerUp);
+        root.removeEventListener('lostpointercapture', this.handleLostPointerCapture);
+        root.removeEventListener('wheel', this.handleWheel);
+        root.removeEventListener('click', this.handleRootClick);
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.removeEventListener('click', this.handleCloseClick);
+        window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('resize', this.handleResize);
+        window.removeEventListener('blur', this.handleWindowBlur);
+        window.removeEventListener('pagehide', this.handleWindowBlur);
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        root.remove();
+        this.root = null;
+        this.backdrop = null;
+        this.viewport = null;
+        this.track = null;
+        this.closeButton = null;
+        this.counter = null;
+    }
+    captureViewportSize() {
+        var _a, _b;
+        const visualViewport = window.visualViewport;
+        this.viewportWidth = Math.max(1, (_a = visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.width) !== null && _a !== void 0 ? _a : window.innerWidth);
+        this.viewportHeight = Math.max(1, (_b = visualViewport === null || visualViewport === void 0 ? void 0 : visualViewport.height) !== null && _b !== void 0 ? _b : window.innerHeight);
+    }
+    applyViewportStyle(root = this.root) {
+        if (!root) {
+            return;
+        }
+        root.style.setProperty('--native-image-preview-vw', `${this.viewportWidth}px`);
+        root.style.setProperty('--native-image-preview-vh', `${this.viewportHeight}px`);
+    }
+    viewportRect() {
+        return (0, geometry_1.normalizeRect)({
+            left: 0,
+            top: 0,
+            width: this.viewportWidth,
+            height: this.viewportHeight,
+        });
+    }
+    async resolveSourceGeometry(item) {
+        var _a;
+        const element = this.sourceElement;
+        const rect = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.sourceRect)
+            ? (0, geometry_1.rectFromDOMRect)(this.options.sourceRect)
+            : element ? (0, geometry_1.rectFromElement)(element) : null;
+        if (!(0, geometry_1.isUsableRect)(rect)) {
+            return null;
+        }
+        await (0, media_1.waitForElementImage)(element);
+        const size = await this.resolveSharedMediaSize(item);
+        return (0, geometry_1.sharedGeometryFor)(rect, size, this.resolveSourceObjectFit(element));
+    }
+    async resolveReturnGeometry(item) {
+        const element = this.resolveSourceElement(this.index);
+        if (!element || !element.isConnected) {
+            return null;
+        }
+        await (0, media_1.waitForElementImage)(element);
+        const rect = (0, geometry_1.rectFromElement)(element);
+        if (!(0, geometry_1.isUsableRect)(rect)) {
+            return null;
+        }
+        const size = await this.resolveSharedMediaSize(item);
+        return (0, geometry_1.sharedGeometryFor)(rect, size, this.resolveSourceObjectFit(element));
+    }
+    async resolveTargetGeometry(item) {
+        const size = await this.resolveSharedMediaSize(item);
+        return (0, geometry_1.targetGeometryFor)(size, this.viewportRect());
+    }
+    async resolveCurrentMediaGeometry(item, media) {
+        const rect = (0, geometry_1.rectFromElement)(media);
+        if (!(0, geometry_1.isUsableRect)(rect)) {
+            return null;
+        }
+        const size = await this.resolveSharedMediaSize(item);
+        return (0, geometry_1.sharedGeometryFor)(rect, size, 'fill');
+    }
+    async resolveSharedMediaSize(item) {
+        var _a;
+        return (0, media_1.resolveMediaSize)(item, (_a = this.options) === null || _a === void 0 ? void 0 : _a.sourceImageSize);
+    }
+    resolveSourceObjectFit(element) {
+        var _a, _b, _c;
+        const optionFit = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.sourceObjectFit) !== null && _b !== void 0 ? _b : (_c = this.options) === null || _c === void 0 ? void 0 : _c.objectFit;
+        if (optionFit) {
+            return optionFit;
+        }
+        if (!element) {
+            return 'cover';
+        }
+        const fit = getComputedStyle(element).objectFit;
+        if (fit === 'contain' || fit === 'fill') {
+            return fit;
+        }
+        return 'cover';
+    }
+    resolveSourceElement(index) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const item = this.items[index];
+        if (!item) {
+            return null;
+        }
+        return (_f = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.getSourceElement) === null || _b === void 0 ? void 0 : _b.call(_a, index, item)) !== null && _c !== void 0 ? _c : (_e = (_d = this.options) === null || _d === void 0 ? void 0 : _d.sourceElements) === null || _e === void 0 ? void 0 : _e[index]) !== null && _f !== void 0 ? _f : (index === ((_h = (_g = this.options) === null || _g === void 0 ? void 0 : _g.index) !== null && _h !== void 0 ? _h : 0) ? (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.sourceElement) !== null && _k !== void 0 ? _k : null : null);
+    }
+    hideSourceElement() {
+        if (this.sourceVisibility !== 'hidden' || !this.sourceElement) {
+            return;
+        }
+        this.sourcePreviousVisibility = this.sourceElement.style.visibility;
+        this.sourceElement.style.visibility = 'hidden';
+    }
+    restoreSourceElement() {
+        if (!this.sourceElement) {
+            return;
+        }
+        this.sourceElement.style.visibility = this.sourcePreviousVisibility;
+        this.sourceElement = null;
+        this.sourcePreviousVisibility = '';
+    }
+    syncHiddenSourceElement(index) {
+        this.restoreSourceElement();
+        this.sourceElement = this.resolveSourceElement(index);
+        this.hideSourceElement();
+    }
+    shouldIgnorePointerStart(target, event) {
+        if (!target) {
+            return false;
+        }
+        if (target.closest('button')) {
+            return true;
+        }
+        const video = target.closest('video');
+        if (!video) {
+            return false;
+        }
+        return this.isPointerInVideoControls(video, event);
+    }
+    isPointerInVideoControls(video, event) {
+        if (!video.controls) {
+            return false;
+        }
+        const rect = video.getBoundingClientRect();
+        if (!(0, geometry_1.isUsableRect)((0, geometry_1.rectFromDOMRect)(rect))) {
+            return false;
+        }
+        const controlsHeight = Math.min(72, Math.max(44, rect.height * 0.24));
+        return event.clientY >= rect.bottom - controlsHeight;
+    }
+    handleTap(event) {
+        const state = this.activeState();
+        const now = performance.now();
+        if (now - state.lastTapAt < 280) {
+            state.scale = state.scale > 1.02 ? 1 : DOUBLE_TAP_SCALE;
+            state.translateX = 0;
+            state.translateY = 0;
+            this.applyActiveMediaTransform(true);
+            state.lastTapAt = 0;
+            event.preventDefault();
+            return;
+        }
+        state.lastTapAt = now;
+    }
+    preparePinchIfNeeded() {
+        if (this.pointers.size < 2) {
+            return;
+        }
+        const [first, second] = [...this.pointers.values()];
+        const state = this.activeState();
+        this.pinchStartDistance = Math.max(1, distance(first, second));
+        this.pinchStartScale = state.scale;
+        this.pinchStartTranslateX = state.translateX;
+        this.pinchStartTranslateY = state.translateY;
+        this.pinchStartCenterX = (first.x + second.x) / 2;
+        this.pinchStartCenterY = (first.y + second.y) / 2;
+    }
+    applyPinch() {
+        if (this.pointers.size < 2) {
+            return;
+        }
+        const [first, second] = [...this.pointers.values()];
+        const state = this.activeState();
+        const nextDistance = Math.max(1, distance(first, second));
+        const centerX = (first.x + second.x) / 2;
+        const centerY = (first.y + second.y) / 2;
+        state.scale = (0, geometry_1.clamp)(this.pinchStartScale * nextDistance / this.pinchStartDistance, 1, MAX_SCALE);
+        state.translateX = this.pinchStartTranslateX + centerX - this.pinchStartCenterX;
+        state.translateY = this.pinchStartTranslateY + centerY - this.pinchStartCenterY;
+        if (state.scale <= 1.01) {
+            state.translateX = 0;
+            state.translateY = 0;
+        }
+        this.clampActiveState();
+        this.applyActiveMediaTransform(false);
+    }
+    finishSwipe(velocityX) {
+        const previous = this.index;
+        const shouldGoNext = this.dragX < -SWIPE_DISTANCE
+            || (this.dragX < -SWIPE_MIN_FLING_DISTANCE && velocityX < -SWIPE_VELOCITY);
+        const shouldGoPrevious = this.dragX > SWIPE_DISTANCE
+            || (this.dragX > SWIPE_MIN_FLING_DISTANCE && velocityX > SWIPE_VELOCITY);
+        if (shouldGoNext) {
+            this.goTo(this.index + 1, 'swipe');
+        }
+        else if (shouldGoPrevious) {
+            this.goTo(this.index - 1, 'swipe');
+        }
+        if (previous === this.index) {
+            this.updateTrack(true);
+        }
+    }
+    goTo(nextIndex, reason) {
+        var _a, _b;
+        const clamped = (0, geometry_1.clamp)(nextIndex, 0, this.items.length - 1);
+        const previousIndex = this.index;
+        this.index = clamped;
+        this.dragX = 0;
+        this.resetSlideState(clamped);
+        this.updateTrack(true);
+        this.updateCounter();
+        this.pauseInactiveVideos(clamped);
+        if (previousIndex !== clamped) {
+            this.syncHiddenSourceElement(clamped);
+            const item = this.items[clamped];
+            const meta = { reason, previousIndex, index: clamped, item };
+            (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, clamped, meta);
+        }
+    }
+    resetDismissDrag() {
+        this.dragX = 0;
+        this.dragY = 0;
+        this.updateTrack(true);
+        this.applyActiveMediaTransform(true);
+        if (this.backdrop) {
+            this.backdrop.style.transition = 'opacity 220ms cubic-bezier(0.22, 1, 0.36, 1)';
+            this.backdrop.style.opacity = '1';
+            window.setTimeout(() => {
+                if (this.backdrop) {
+                    this.backdrop.style.transition = '';
+                }
+            }, 240);
+        }
+    }
+    applyDismissDrag(dy) {
+        const media = this.mediaElements[this.index];
+        this.dragX = 0;
+        this.dragY = dy;
+        this.updateTrack(false);
+        const progress = Math.min(1, Math.abs(dy) / Math.max(1, this.viewportHeight));
+        const scale = Math.max(0.84, 1 - progress * 0.16);
+        if (media) {
+            media.style.transition = 'none';
+            media.style.transform = `translate3d(0px, ${dy}px, 0) scale(${scale})`;
+        }
+        if (this.backdrop) {
+            this.backdrop.style.opacity = String(1 - Math.min(0.9, progress * 1.35));
+        }
+    }
+    cancelActiveGesture() {
+        if (!this.pointers.size && this.mode === 'none' && !this.dragX && !this.dragY) {
+            return;
+        }
+        const mode = this.mode;
+        const pointers = [...this.pointers.values()];
+        this.pointers.clear();
+        this.mode = 'none';
+        this.dragX = 0;
+        this.dragY = 0;
+        this.releasePointerCaptures(pointers);
+        if (!this.openState || this.closing) {
+            return;
+        }
+        if (mode === 'dismiss') {
+            this.resetDismissDrag();
+            return;
+        }
+        if (mode === 'swipe') {
+            this.updateTrack(true);
+        }
+    }
+    releasePointerCaptures(pointers) {
+        const root = this.root;
+        if (!root) {
+            return;
+        }
+        pointers.forEach((pointer) => {
+            if (root.hasPointerCapture(pointer.id)) {
+                root.releasePointerCapture(pointer.id);
+            }
+        });
+    }
+    updateTrack(animated = false) {
+        if (!this.track) {
+            return;
+        }
+        this.track.style.transition = animated ? 'transform 260ms cubic-bezier(0.22, 1, 0.36, 1)' : 'none';
+        const x = -this.index * this.viewportWidth + this.dragX;
+        this.track.style.transform = `translate3d(${x}px, 0, 0)`;
+    }
+    applyActiveMediaTransform(animated) {
+        const media = this.mediaElements[this.index];
+        const state = this.activeState();
+        if (!media) {
+            return;
+        }
+        media.style.transition = animated ? 'transform 220ms cubic-bezier(0.22, 1, 0.36, 1)' : 'none';
+        media.style.transform = `translate3d(${state.translateX}px, ${state.translateY}px, 0) scale(${state.scale})`;
+    }
+    clampActiveState() {
+        const state = this.activeState();
+        const media = this.mediaElements[this.index];
+        if (!media || state.scale <= 1.01) {
+            if (state.scale <= 1.01) {
+                state.scale = 1;
+                state.translateX = 0;
+                state.translateY = 0;
+            }
+            return;
+        }
+        const rect = media.getBoundingClientRect();
+        const baseWidth = rect.width / state.scale;
+        const baseHeight = rect.height / state.scale;
+        const maxX = Math.max(0, (baseWidth * state.scale - this.viewportWidth) / 2);
+        const maxY = Math.max(0, (baseHeight * state.scale - this.viewportHeight) / 2);
+        state.translateX = (0, geometry_1.clamp)(state.translateX, -maxX, maxX);
+        state.translateY = (0, geometry_1.clamp)(state.translateY, -maxY, maxY);
+    }
+    activeState() {
+        var _a;
+        return (_a = this.slideStates[this.index]) !== null && _a !== void 0 ? _a : this.createSlideState();
+    }
+    resetSlideState(index) {
+        this.slideStates[index] = this.createSlideState();
+        const media = this.mediaElements[index];
+        if (media) {
+            media.style.transition = 'none';
+            media.style.transform = '';
+        }
+    }
+    createSlideState() {
+        return { scale: 1, translateX: 0, translateY: 0, lastTapAt: 0 };
+    }
+    updateCounter() {
+        if (!this.counter) {
+            return;
+        }
+        this.counter.textContent = `${this.index + 1} / ${this.items.length}`;
+    }
+    pauseInactiveVideos(activeIndex) {
+        this.mediaElements.forEach((element, index) => {
+            if (index !== activeIndex && element instanceof HTMLVideoElement) {
+                element.pause();
+            }
+        });
+    }
+    async layoutMediaElements() {
+        const viewport = this.viewportRect();
+        await Promise.all(this.items.map(async (item, index) => {
+            var _a;
+            const media = this.mediaElements[index];
+            if (!media) {
+                return;
+            }
+            const size = await (0, media_1.resolveMediaSize)(item, index === this.index ? (_a = this.options) === null || _a === void 0 ? void 0 : _a.sourceImageSize : null);
+            const frame = (0, geometry_1.targetGeometryFor)(size, viewport).visibleFrame;
+            media.style.width = `${frame.width}px`;
+            media.style.height = `${frame.height}px`;
+        }));
+    }
+    lockDocumentScroll() {
+        this.previousBodyOverflow = document.body.style.overflow;
+        this.previousHtmlOverflow = document.documentElement.style.overflow;
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+    }
+    unlockDocumentScroll() {
+        document.body.style.overflow = this.previousBodyOverflow;
+        document.documentElement.style.overflow = this.previousHtmlOverflow;
+    }
+    nextFrame() {
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    }
+    delay(ms) {
+        return new Promise((resolve) => window.setTimeout(resolve, ms));
+    }
+}
+exports.NativeImagePreviewWebViewer = NativeImagePreviewWebViewer;
+function createNativeImagePreviewWeb() {
+    return new NativeImagePreviewWebViewer();
+}
+function distance(first, second) {
+    return Math.hypot(first.x - second.x, first.y - second.y);
+}
+function sourceRectFromElement(element) {
+    return (0, geometry_1.rectFromDOMRect)(element.getBoundingClientRect());
+}