vistaview 1.0.3 → 2.0.0

package/main/dist/lib/vista-image-event.js

@@ -0,0 +1,166 @@
+import { VistaPointers } from './vista-pointers';
+export class VistaImageEvent {
+    //
+    pointers = null;
+    // Pinch gesture state
+    lastDistance = 0;
+    pinchMode = false;
+    lastPinchEndTime = 0;
+    PINCH_COOLDOWN = 111;
+    cancelMove = () => { };
+    pointerListeners = [];
+    vvw;
+    // private vistaImage: VistaImage;
+    imageContainer = null;
+    constructor(vvw) {
+        this.vvw = vvw;
+        // this.vistaImage = vistaImage;
+    }
+    // register external pointer listener
+    registerPointerListener(listener) {
+        this.pointerListeners.push(listener);
+    }
+    isPinching = () => {
+        return this.pinchMode || performance.now() - this.lastPinchEndTime < this.PINCH_COOLDOWN;
+    };
+    internalPointerListener = (e) => {
+        // Detect if we are pinching - to prevent conflict with single pointer move
+        // Adds a small cooldown after pinch ends to avoid immediate single pointer move
+        const vistaImage = this.vvw.state.children.images.find((img) => img.pos === 0);
+        // POINTER DOWN - Start drag or pinch
+        if (e.event === 'down') {
+            this.cancelMove();
+            // Single finger: prepare for drag (if zoomed in)
+            if (this.vvw.state.zoomedIn && e.pointers.length === 1 && !this.isPinching()) {
+                const center = this.pointers.getCentroid();
+                vistaImage.setInitialCenter(center);
+            }
+            // Two fingers: start pinch zoom
+            if (e.pointers.length >= 2) {
+                this.pinchMode = true;
+                const center = this.pointers.getCentroid();
+                this.lastDistance = this.pointers.getPointerDistance(e.pointers[0], e.pointers[1]);
+                vistaImage.setInitialCenter(center);
+            }
+        }
+        // POINTER MOVE - Drag or pinch zoom
+        else if (e.event === 'move') {
+            // Single finger drag (when zoomed in)
+            if (this.vvw.state.zoomedIn &&
+                e.pointers.length === 1 &&
+                e.lastPointerLen === 0 &&
+                !this.isPinching()) {
+                const center = this.pointers.getCentroid();
+                vistaImage.scaleMove(1, center);
+            }
+            // Two finger pinch zoom
+            if (e.pointers.length >= 2 && this.pinchMode) {
+                const center = this.pointers.getCentroid();
+                const distance = this.pointers.getPointerDistance(e.pointers[0], e.pointers[1]);
+                vistaImage.scaleMove(distance / this.lastDistance, center);
+            }
+        }
+        // POINTER UP - End drag/pinch, normalize position
+        else if ((e.event === 'up' || e.event === 'cancel') &&
+            (this.pinchMode || this.vvw.state.zoomedIn)) {
+            if (this.pinchMode) {
+                // End pinch: normalize zoom level, close if zoomed out too far
+                this.lastPinchEndTime = performance.now();
+                this.pinchMode = false;
+                // const close = vistaImage.normalize();
+                const ret = vistaImage.setFinalTransform();
+                if (ret?.cancel) {
+                    this.cancelMove = ret.cancel;
+                }
+                if (ret?.close) {
+                    requestAnimationFrame(() => {
+                        this.vvw.close();
+                    });
+                }
+            }
+            else if (this.vvw.state.zoomedIn && e.pointers.length === 0 && !this.isPinching()) {
+                // End drag: animate back to bounds if necessary
+                vistaImage.isThrowing = true;
+                this.cancelMove = vistaImage.momentumThrow({
+                    x: e.pointer.movementX,
+                    y: e.pointer.movementY,
+                });
+            }
+        }
+        // Notify external listeners (user-registered pointer handlers)
+        this.pointerListeners.forEach((l) => l({
+            ...e,
+            state: this.vvw.state,
+            hasInternalExecution: this.vvw.state.zoomedIn || this.isPinching(),
+            abortController: this.vvw.state.abortController,
+        }));
+    };
+    onKeyDown = (e) => {
+        const vvw = this.vvw;
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                vvw.prev();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                vvw.next();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                vvw.zoomIn();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                vvw.zoomOut();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                vvw.close();
+                break;
+        }
+    };
+    onScroll = (e) => {
+        e.preventDefault();
+        const vvw = this.vvw;
+        const vistaImage = this.vvw.state.children.images.find((img) => img.pos === 0);
+        const delta = e.deltaY;
+        vistaImage.setInitialCenter({
+            x: e.clientX,
+            y: e.clientY,
+        });
+        if (delta < 0) {
+            vvw.zoomIn();
+        }
+        else if (delta > 0) {
+            vvw.zoomOut();
+        }
+    };
+    onResizeHandler = () => {
+        this.vvw.state.children.images.forEach((vistaImage) => {
+            vistaImage.setSizes();
+        });
+    };
+    start(imageContainer) {
+        // keyboard events
+        if (this.vvw.options.keyboardListeners)
+            window.addEventListener('keydown', this.onKeyDown);
+        // scroll Events
+        this.imageContainer = imageContainer;
+        this.imageContainer.addEventListener('wheel', this.onScroll, { passive: false });
+        // resize listener
+        window.addEventListener('resize', this.onResizeHandler);
+        this.pointers = new VistaPointers({
+            elm: imageContainer,
+            listeners: [this.internalPointerListener],
+        });
+    }
+    stop() {
+        if (this.vvw.options.keyboardListeners)
+            window.removeEventListener('keydown', this.onKeyDown);
+        window.removeEventListener('resize', this.onResizeHandler);
+        this.imageContainer.removeEventListener('wheel', this.onScroll);
+        this.pointers.removeListeners();
+        this.pointerListeners = [];
+    }
+}

package/{dist → main/dist}/lib/vista-image.d.ts

@@ -1,4 +1,4 @@
-import { VistaImageParams } from './types';
+import type { VistaImageParams } from './types';
 import { VistaBox } from './vista-box';
 export declare class VistaImage extends VistaBox {
     element: HTMLImageElement;
@@ -27,7 +27,6 @@ export declare class VistaImage extends VistaBox {
     private animateNormalize;
     setFinalTransform(): {
         close: boolean;
-        cancel: () => import('./vista-hires-transition').VistaHiresTransitionOpt | undefined;
+        cancel: () => import("./vista-hires-transition").VistaHiresTransitionOpt | undefined;
     } | undefined;
 }
-//# sourceMappingURL=vista-image.d.ts.map

package/main/dist/lib/vista-image.js

@@ -0,0 +1,274 @@
+// import type { VistaHiresTransitionOpt } from './vista-hires-transition';
+// import type { VistaImageState } from './types';
+import { getFullSizeDim } from './utils/get-full-size-dim';
+import { VistaHiresTransition } from './vista-hires-transition';
+// import { getFittedSize } from './utils/get-fitted-size';
+// import { VistaImageEvent } from './vista-image-event';
+import { VistaBox } from './vista-box';
+export class VistaImage extends VistaBox {
+    element;
+    rect = null;
+    onWidthChange(value) {
+        super.onWidthChange(value);
+        // update src from parsedSrcSet if available
+        const url = this.getFromParsedSrcSet(value);
+        if (url && this.element.src !== url) {
+            // create new image element and replace existing
+            const newImg = new Image();
+            newImg.onload = () => {
+                newImg.decode().then(() => {
+                    if (this.isCancelled)
+                        return;
+                    this.element.src = url;
+                });
+            };
+            newImg.src = url;
+        }
+    }
+    constructor(par) {
+        super(par);
+        const img = document.createElement('img');
+        img.alt = this.config.alt || '';
+        // adding srcset actually makes the load time longer for me
+        // img.srcset = this.config.srcSet || '';
+        img.classList.add('vvw-img-hi');
+        this.element = img;
+        img.onerror = (e) => {
+            // this.onImageError(e);
+            this.isLoadedRejected(e);
+        };
+        img.src = this.config.src;
+        img
+            .decode()
+            .then(() => {
+            this.onLoad();
+        })
+            .catch((e) => {
+            this.isLoadedRejected(e);
+        });
+        // trigger setSizes to setup thumb and hires image
+        // stableSize = false
+        // initDimension = true
+        this.setSizes({
+            stableSize: false,
+            initDimension: true,
+        });
+    }
+    onLoad() {
+        if (this.isCancelled)
+            return;
+        const img = this.element;
+        img.width = img.naturalWidth;
+        img.height = img.naturalHeight;
+        // set max zoomed dimensions
+        // this.maxH = img.naturalHeight * this.maxZoomLevel;
+        this.maxW = img.naturalWidth * this.maxZoomLevel;
+        // set fullscreen dimensions
+        const { width: fullWidth, height: fullHeight } = getFullSizeDim(img);
+        this.fullH = fullHeight;
+        this.fullW = fullWidth;
+        this.minW = this.fullW * 0.5;
+        // this.minH = this.fullH * 0.3
+        this.isLoadedResolved(true);
+    }
+    getFullSizeDim() {
+        return getFullSizeDim(this.element);
+    }
+    normalize() {
+        super.normalize();
+        const img = this.element;
+        img.style.objectFit = 'cover';
+        img.style.borderRadius = '0';
+    }
+    // Used by: VistaImageEvent
+    scaleMove(scaleFactor, center, animate = false) {
+        if (!this.isReady)
+            return;
+        if (!this.element)
+            return;
+        if (!this.rect) {
+            this.rect = this.element.getBoundingClientRect();
+        }
+        if (!center) {
+            center = this.initPointerCenter;
+        }
+        // Calculate translation to keep the INITIAL center point fixed during zoom
+        // Current image center position
+        const imgCenterX = this.rect.left + this.rect.width / 2;
+        const imgCenterY = this.rect.top + this.rect.height / 2;
+        // Distance from INITIAL pinch center to image center (when gesture started)
+        const initialOffsetX = this.initPointerCenter.x - imgCenterX;
+        const initialOffsetY = this.initPointerCenter.y - imgCenterY;
+        // Zoom translation: keep initial pinch point fixed
+        const zoomTranslateX = initialOffsetX * (1 - scaleFactor);
+        const zoomTranslateY = initialOffsetY * (1 - scaleFactor);
+        // Pan translation: account for finger movement during pinch
+        const panX = center.x - this.initPointerCenter.x;
+        const panY = center.y - this.initPointerCenter.y;
+        if (animate) {
+            VistaHiresTransition.start({
+                vistaImage: this,
+                target: {
+                    transform: {
+                        x: zoomTranslateX + panX,
+                        y: zoomTranslateY + panY,
+                        scale: scaleFactor,
+                    },
+                },
+                onComplete: () => {
+                    this.setFinalTransform();
+                },
+                shouldWait: () => false,
+            });
+        }
+        else {
+            this.state.transform = {
+                x: zoomTranslateX + panX,
+                y: zoomTranslateY + panY,
+                scale: scaleFactor,
+            };
+        }
+        // notify scale change
+        const rect = this.element.getBoundingClientRect();
+        const scaledWidth = rect.width * scaleFactor;
+        this.isZoomedIn = scaledWidth > this.fullW;
+        this.state.lessThanMinWidth = scaledWidth <= this.minW;
+        this.onScale({
+            vistaImage: this,
+            scale: scaledWidth / this.fullW,
+            isMax: scaledWidth >= this.maxW,
+            isMin: scaledWidth <= this.fullW,
+        });
+    }
+    animateZoom(scaleFactor, center) {
+        if (this.state.width * scaleFactor < this.minW)
+            return;
+        this.scaleMove(scaleFactor, center, true);
+    }
+    // Used by: VistaImageEvent
+    momentumThrow(par) {
+        if (!this.isReady) {
+            return () => { };
+        }
+        if (!this.isThrowing) {
+            this.setFinalTransform();
+            return () => { };
+        }
+        if (Math.abs(par.x) < 0.1 && Math.abs(par.y) < 0.1) {
+            const img = this.element;
+            const bound = img.getBoundingClientRect();
+            VistaHiresTransition.start({
+                vistaImage: this,
+                target: {
+                    transform: {
+                        x: bound.right < window.innerWidth / 2
+                            ? this.state.transform.x + (window.innerWidth / 2 - bound.right)
+                            : bound.left > window.innerWidth / 2
+                                ? this.state.transform.x - (bound.left - window.innerWidth / 2)
+                                : this.state.transform.x,
+                        y: bound.bottom < window.innerHeight / 2
+                            ? this.state.transform.y + (window.innerHeight / 2 - bound.bottom)
+                            : bound.top > window.innerHeight / 2
+                                ? this.state.transform.y - (bound.top - window.innerHeight / 2)
+                                : this.state.transform.y,
+                    },
+                },
+                onComplete: () => {
+                    this.isThrowing = false;
+                    this.setFinalTransform();
+                },
+                shouldWait: () => false,
+            });
+            return () => { };
+        }
+        requestAnimationFrame(() => {
+            if (!this.isThrowing)
+                return this.momentumThrow({ x: 0, y: 0 });
+            const img = this.element;
+            const t = this.state.transform;
+            t.x += par.x;
+            t.y += par.y;
+            const bound = img.getBoundingClientRect();
+            t.x = t.x + par.x;
+            t.y = t.y + par.y;
+            if (bound.right < window.innerWidth / 2) {
+                t.x += (window.innerWidth / 2 - bound.right) * 0.1;
+                par.x *= 0.7;
+            }
+            if (bound.left > window.innerWidth / 2) {
+                t.x -= (bound.left - window.innerWidth / 2) * 0.1;
+                par.x *= 0.7;
+            }
+            if (bound.bottom < window.innerHeight / 2) {
+                t.y += (window.innerHeight / 2 - bound.bottom) * 0.1;
+                par.y *= 0.7;
+            }
+            if (bound.top > window.innerHeight / 2) {
+                t.y -= (bound.top - window.innerHeight / 2) * 0.1;
+                par.y *= 0.7;
+            }
+            this.state.transform = t;
+            this.momentumThrow({
+                x: par.x * 0.9,
+                y: par.y * 0.9,
+            });
+        });
+        return () => {
+            VistaHiresTransition.stop(this);
+            this.isThrowing = false;
+            this.setFinalTransform();
+        };
+    }
+    animateNormalizeTimeout = null;
+    animateNormalize() {
+        if (this.animateNormalizeTimeout) {
+            clearTimeout(this.animateNormalizeTimeout);
+        }
+        this.animateNormalizeTimeout = setTimeout(() => {
+            VistaHiresTransition.start({
+                vistaImage: this,
+                target: {
+                    width: this.fullW,
+                    height: this.fullH,
+                    translate: { x: 0, y: 0 },
+                    transform: { x: 0, y: 0, scale: 1 },
+                },
+                onComplete: () => {
+                    this.setFinalTransform();
+                },
+                shouldWait: () => false,
+            });
+        }, 50);
+    }
+    // Used by: VistaImageEvent
+    setFinalTransform() {
+        if (!this.isReady)
+            return;
+        // remove this.rect
+        this.rect = null;
+        super.setFinalTransform({ propagateEvent: false });
+        const close = this.state.width <= this.minW;
+        // animate back to max if over max
+        if (this.state.width > this.maxW) {
+            this.animateZoom(this.maxW / this.state.width);
+        }
+        // animate back to full if under full
+        else if (!close && this.state.width < this.fullW) {
+            this.animateNormalize();
+        }
+        // need to propagate content change event
+        else if (this.pos === 0) {
+            const obj = this.toObject();
+            this.vistaView.options.onContentChange &&
+                this.vistaView.options.onContentChange(obj, this.vistaView);
+            this.vistaView.state.extensions.forEach((ext) => {
+                ext.onContentChange && ext.onContentChange(obj, this.vistaView);
+            });
+        }
+        // determine if this should be closed
+        return {
+            close,
+            cancel: () => VistaHiresTransition.stop(this),
+        };
+    }
+}

package/{dist → main/dist}/lib/vista-pointers.d.ts

@@ -1,4 +1,4 @@
-import { VistaPointer, VistaPointerListener, VistaPointerArgs } from './types.js';
+import type { VistaPointer, VistaPointerListener, VistaPointerArgs } from './types.js';
 export declare class VistaPointers {
     private pointers;
     private elm;
@@ -20,4 +20,3 @@ export declare class VistaPointers {
         y: number;
     } | null;
 }
-//# sourceMappingURL=vista-pointers.d.ts.map

package/main/dist/lib/vista-pointers.js

@@ -0,0 +1,163 @@
+// simplification of pointas
+export class VistaPointers {
+    pointers = [];
+    elm;
+    listeners = [];
+    lastPointerDownId = null;
+    constructor({ elm, listeners }) {
+        this.elm = elm ?? document;
+        if (listeners) {
+            this.listeners = listeners;
+        }
+        this.startListeners();
+    }
+    removeLastPointer = () => {
+        if (!this.pointers.length)
+            return;
+        if (this.lastPointerDownId !== null) {
+            const idx = this.pointers.findIndex((p) => p.id === this.lastPointerDownId);
+            if (idx !== -1) {
+                this.pointers.splice(idx, 1);
+            }
+        }
+    };
+    onPointerDown = (e) => {
+        if (!this.listeners.length)
+            return;
+        // Ignore non-primary button clicks (right-click, middle-click, etc.)
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        // record last pointer down id for contextmenu/auxclick removal
+        this.lastPointerDownId = e.pointerId;
+        // add one-time listeners to remove pointer on contextmenu/auxclick
+        window.addEventListener('contextmenu', this.removeLastPointer, { once: true });
+        window.addEventListener('auxclick', this.removeLastPointer, { once: true });
+        let pointer = {
+            x: e.clientX,
+            y: e.clientY,
+            movementX: 0,
+            movementY: 0,
+            id: e.pointerId,
+        };
+        this.pointers.push(pointer);
+        this.listeners.forEach((l) => l({
+            event: 'down',
+            pointer: pointer,
+            pointers: this.pointers,
+            lastPointerLen: this.pointers.length - 1,
+        }));
+    };
+    onPointerMove = (e) => {
+        if (!this.listeners.length)
+            return;
+        e.preventDefault();
+        const pointer = this.pointers.find((p) => p.id === e.pointerId);
+        if (!pointer)
+            return;
+        pointer.movementX = e.movementX;
+        pointer.movementY = e.movementY;
+        pointer.x = e.clientX;
+        pointer.y = e.clientY;
+        this.listeners.forEach((l) => l({
+            event: 'move',
+            pointer: pointer,
+            pointers: this.pointers,
+            lastPointerLen: this.pointers.length - 1,
+        }));
+    };
+    onPointerUp = (e) => {
+        if (!this.listeners.length)
+            return;
+        // Ignore non-primary button clicks (right-click, middle-click, etc.)
+        if (e.button !== 0)
+            return;
+        // remove one-time listeners
+        window.removeEventListener('contextmenu', this.removeLastPointer);
+        window.removeEventListener('auxclick', this.removeLastPointer);
+        // Only handle if target is within our element
+        if (e.target instanceof Node &&
+            !this.elm.contains(e.target) &&
+            e.target !== document.querySelector('html') &&
+            e.target !== document)
+            return;
+        e.preventDefault();
+        const pointerIndex = this.pointers.findIndex((p) => p.id === e.pointerId);
+        if (pointerIndex === -1)
+            return;
+        const pointer = this.pointers[pointerIndex];
+        pointer.x = e.clientX;
+        pointer.y = e.clientY;
+        const lastLen = this.pointers.length;
+        this.pointers.splice(pointerIndex, 1);
+        this.listeners.forEach((l) => l({
+            event: 'up',
+            pointer: pointer,
+            pointers: this.pointers,
+            lastPointerLen: lastLen,
+        }));
+    };
+    onPointerCancel = (e) => {
+        if (!this.listeners.length)
+            return;
+        // Only handle if target is within our element
+        if (e.target instanceof Node &&
+            !this.elm.contains(e.target) &&
+            e.target !== document.querySelector('html') &&
+            e.target !== document)
+            return;
+        e.preventDefault();
+        const pointerIndex = this.pointers.findIndex((p) => p.id === e.pointerId);
+        if (pointerIndex === -1)
+            return;
+        const pointer = this.pointers[pointerIndex];
+        pointer.x = e.clientX;
+        pointer.y = e.clientY;
+        const lastLen = this.pointers.length;
+        this.pointers.splice(pointerIndex, 1);
+        this.listeners.forEach((l) => l({
+            event: 'cancel',
+            pointer: pointer,
+            pointers: this.pointers,
+            lastPointerLen: lastLen,
+        }));
+    };
+    startListeners() {
+        this.elm.addEventListener('pointerdown', this.onPointerDown);
+        this.elm.addEventListener('pointermove', this.onPointerMove);
+        // Listen to up/cancel on document to catch events outside the element
+        document.addEventListener('pointerup', this.onPointerUp);
+        document.addEventListener('pointercancel', this.onPointerCancel);
+    }
+    removeListeners() {
+        this.elm.removeEventListener('pointerdown', this.onPointerDown);
+        this.elm.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        document.removeEventListener('pointercancel', this.onPointerCancel);
+        this.pointers = [];
+    }
+    addEventListener(listener) {
+        this.listeners.push(listener);
+    }
+    removeEventListener(listener) {
+        this.listeners = this.listeners.filter((l) => l !== listener);
+    }
+    getPointerDistance(p1, p2) {
+        const dx = p1.x - p2.x;
+        const dy = p1.y - p2.y;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    getCentroid() {
+        if (this.pointers.length === 0)
+            return null;
+        const sum = this.pointers.reduce((acc, p) => {
+            acc.x += p.x;
+            acc.y += p.y;
+            return acc;
+        }, { x: 0, y: 0 });
+        return {
+            x: sum.x / this.pointers.length,
+            y: sum.y / this.pointers.length,
+        };
+    }
+}

package/{dist → main/dist}/lib/vista-state.d.ts

@@ -1,5 +1,5 @@
-import { VistaExtension } from './types';
-import { VistaBox } from './vista-box';
+import type { VistaExtension } from './types';
+import type { VistaBox } from './vista-box';
 export declare class VistaState {
     open: boolean;
     settled: boolean;
@@ -15,4 +15,3 @@ export declare class VistaState {
     isReducedMotion: boolean;
     extensions: Set<VistaExtension>;
 }
-//# sourceMappingURL=vista-state.d.ts.map

package/main/dist/lib/vista-state.js

@@ -0,0 +1,15 @@
+export class VistaState {
+    open = false;
+    settled = false;
+    closing = false;
+    zoomedIn = false;
+    children = {
+        htmls: [],
+        images: [],
+    };
+    currentIndex = -1;
+    elmLength = 0;
+    abortController = new AbortController();
+    isReducedMotion = false;
+    extensions = new Set();
+}

package/{dist → main/dist}/lib/vista-view.d.ts

@@ -1,6 +1,6 @@
-import { VistaOpt, VistaImgConfig, VistaExternalPointerListenerArgs } from './types';
+import type { VistaOpt, VistaImgConfig, VistaExternalPointerListenerArgs } from './types';
 import { VistaState } from './vista-state';
-import { VistaBox } from './vista-box';
+import type { VistaBox } from './vista-box';
 export declare const GlobalVistaState: {
     somethingOpened: VistaView | null;
 };
@@ -50,4 +50,3 @@ export declare class VistaView {
     zoomOut(): void;
     getCurrentIndex(): number;
 }
-//# sourceMappingURL=vista-view.d.ts.map