fix(angular): mirror the origin-flight and zoom fixes

Author: sachinchoolur

packages/angular/plugins/zoom/index.ts

@@ -254,6 +254,7 @@ export class LgZoomWrapperComponent {
     private detachWindow: (() => void) | null = null;
     private cancelSpring: (() => void) | null = null;
     private lastTap = 0;
+    private lastTouchToggle = 0;
     private armTimer: ReturnType<typeof setTimeout> | null = null;
 
     /** Narrow: re-run the arm effect only when THIS slide's flag flips. */
@@ -891,6 +892,12 @@ export class LgZoomWrapperComponent {
             const now = Date.now();
             if (now - this.lastTap < 300) {
                 this.lastTap = 0;
+                // 2.x prevents the second touchstart's default: without
+                // this the browser synthesizes click + dblclick after
+                // the double tap, and onDoubleClick toggles straight
+                // back to fit.
+                event.preventDefault();
+                this.lastTouchToggle = now;
                 this.toggleActualSize(this.eventPoint(event));
                 return;
             }
@@ -919,6 +926,11 @@ export class LgZoomWrapperComponent {
         if (!isImageTarget(event.target)) {
             return;
         }
+        // Synthesized dblclick trailing a touch double-tap (belt for
+        // browsers that fire it despite the canceled pointerdown).
+        if (Date.now() - this.lastTouchToggle < 700) {
+            return;
+        }
         this.toggleActualSize(this.eventPoint(event));
     }
 }

packages/angular/src/lib/gallery.component.spec.ts

@@ -411,3 +411,80 @@ describe('LgGalleryComponent (core gallery)', () => {
         );
     });
 });
+
+@Component({
+    imports: [LgGalleryComponent, LgGalleryItemDirective],
+    template: `
+        <lg-gallery>
+            @for (item of items; track item.src) {
+                <a href="#" class="trigger" [lgGalleryItem]="item">
+                    <img [src]="item.thumb" [alt]="item.alt" />
+                </a>
+            }
+        </lg-gallery>
+    `,
+})
+class DummyFlightHost {
+    readonly items = ITEMS.map((item) => ({
+        ...item,
+        lgSize: '1600-1067',
+    }));
+}
+
+describe('zoom-from-origin dummy image', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+
+    it('flies the thumb as lg-dummy-img and drops it after the load settles', async () => {
+        // jsdom rects are 0×0; a real-looking rect makes computeOrigin
+        // produce a flight (lgSize is the other precondition).
+        const rectSpy = vi
+            .spyOn(Element.prototype, 'getBoundingClientRect')
+            .mockReturnValue({
+                left: 10,
+                top: 10,
+                width: 100,
+                height: 80,
+                right: 110,
+                bottom: 90,
+                x: 10,
+                y: 10,
+                toJSON: () => ({}),
+            } as DOMRect);
+        const fixture = TestBed.createComponent(DummyFlightHost);
+        await flush(fixture);
+        queryAll('.trigger')[0]!.click();
+        await flush(fixture);
+        await advance(fixture, 20);
+
+        // 2.x first-slide contract: ONLY the thumb-dummy exists during
+        // the flight — the real image must not fetch/decode mid-flight.
+        const dummy = query('img.lg-dummy-img');
+        expect(dummy).not.toBeNull();
+        expect(dummy!.getAttribute('src')).toBe('a-t.jpg');
+        expect(query('.lg-item.lg-current img.lg-image')).toBeNull();
+        expect(query('.lg-item.lg-first-slide')).not.toBeNull();
+        expect(query('.lg-outer.lg-first-slide-loading')).not.toBeNull();
+
+        // Flight lands: the real image mounts, the dummy stays on top.
+        await advance(fixture, SPEED + 120);
+        const real = query('.lg-item.lg-current img.lg-image');
+        expect(real).not.toBeNull();
+        expect(query('img.lg-dummy-img')).not.toBeNull();
+
+        // Real image load settles, then the 300ms drop buffer removes
+        // the dummy and the loading classes.
+        real!.dispatchEvent(new Event('load'));
+        await flush(fixture);
+        await advance(fixture, 310);
+        expect(query('img.lg-dummy-img')).toBeNull();
+        expect(query('.lg-item.lg-first-slide')).toBeNull();
+        expect(query('.lg-outer.lg-first-slide-loading')).toBeNull();
+        expect(query('.lg-item.lg-current.lg-complete')).not.toBeNull();
+        rectSpy.mockRestore();
+    });
+});

packages/angular/src/lib/gallery.component.ts

@@ -790,6 +790,7 @@ export class LgGalleryComponent implements LgGalleryHandle, OnDestroy {
                 'lg-hide-items',
             this.zoomClosing() && 'lg-closing',
             this.timeline().noTrans && 'lg-no-trans',
+            this.runtime.firstSlideLoading() && 'lg-first-slide-loading',
             this.touchSlideMode() &&
                 this.settings().mode !== 'lg-slide' &&
                 'lg-slide',
@@ -1678,6 +1679,12 @@ export class LgGalleryComponent implements LgGalleryHandle, OnDestroy {
             containerRect.width,
             containerRect.height - (top + bottom),
         );
+        // Degenerate measurement (zero-sized/hidden viewport, offsets
+        // taller than the stage): the shared math would emit a mirrored
+        // flight — fall back to the startClass fade instead.
+        if (imageSize.width <= 0 || imageSize.height <= 0) {
+            return null;
+        }
         return getOriginTransform({
             triggerRect,
             containerRect,

packages/angular/src/lib/image-slide.component.ts

@@ -17,32 +17,51 @@ import type { LgGalleryItem } from './types';
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <picture class="lg-img-wrap">
-            @for (source of item().sources ?? []; track $index) {
-                <source
-                    [attr.media]="source.media ?? null"
-                    [attr.srcset]="source.srcset"
-                    [attr.sizes]="source.sizes ?? null"
-                    [attr.type]="source.type ?? null"
+            @if (!deferSrc()) {
+                @for (source of item().sources ?? []; track $index) {
+                    <source
+                        [attr.media]="source.media ?? null"
+                        [attr.srcset]="source.srcset"
+                        [attr.sizes]="source.sizes ?? null"
+                        [attr.type]="source.type ?? null"
+                    />
+                }
+                <img
+                    class="lg-object lg-image"
+                    [attr.data-index]="index()"
+                    [attr.src]="item().src ?? null"
+                    [attr.srcset]="item().srcset ?? null"
+                    [attr.sizes]="item().sizes ?? null"
+                    [alt]="item().alt ?? ''"
+                    draggable="false"
+                    (load)="mediaLoad.emit()"
+                    (error)="mediaError.emit()"
+                    (dragstart)="$event.preventDefault()"
+                />
+            }
+            @if (dummySrc(); as dummy) {
+                <!-- v2 sizes the dummy to the fitted image box with
+                     inline width/height; containing it inside the full
+                     wrap lands the same visible box without measuring. -->
+                <img
+                    class="lg-dummy-img"
+                    [attr.src]="dummy"
+                    alt=""
+                    aria-hidden="true"
+                    draggable="false"
+                    style="width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%)"
                 />
             }
-            <img
-                class="lg-object lg-image"
-                [attr.data-index]="index()"
-                [attr.src]="item().src ?? null"
-                [attr.srcset]="item().srcset ?? null"
-                [attr.sizes]="item().sizes ?? null"
-                [alt]="item().alt ?? ''"
-                draggable="false"
-                (load)="mediaLoad.emit()"
-                (error)="mediaError.emit()"
-                (dragstart)="$event.preventDefault()"
-            />
         </picture>
     `,
 })
 export class LgImageSlideComponent {
     readonly item = input.required<LgGalleryItem>();
     readonly index = input.required<number>();
+    /** First-slide dummy (2.x): the thumb that flies while `src` loads. */
+    readonly dummySrc = input<string | null>(null);
+    /** Hold back the real img while the origin flight runs (2.x). */
+    readonly deferSrc = input(false);
     /** Native image dragging would swallow the swipe gesture. */
     readonly mediaLoad = output<void>();
     readonly mediaError = output<void>();

packages/angular/src/lib/runtime.ts

@@ -137,6 +137,24 @@ export class LgGalleryRuntime {
     private readonly registrationsSignal = signal<LgItemRegistration[]>([]);
     readonly registrations = this.registrationsSignal.asReadonly();
 
+    /** True while the first-slide dummy is up (`lg-first-slide-loading`). */
+    readonly firstSlideLoading = signal(false);
+
+    /**
+     * Src for the first-slide dummy image (2.x `getDummyImageContent`):
+     * the item's `thumb`, else the trigger's rendered img — pixels that
+     * are already decoded and can fly without waiting on the network.
+     */
+    getDummySrc(index: number): string | null {
+        const thumb = this.items()[index]?.thumb;
+        if (thumb) {
+            return thumb;
+        }
+        const element = this.registrationsSignal()[index]?.element;
+        const img = element?.querySelector('img');
+        return img?.currentSrc || img?.src || null;
+    }
+
     registerItem(registration: LgItemRegistration): () => void {
         this.registrationsSignal.update((prev) => [...prev, registration]);
         return () => {

packages/angular/src/lib/slide.component.ts

@@ -3,6 +3,7 @@ import {
     ChangeDetectionStrategy,
     Component,
     computed,
+    DestroyRef,
     effect,
     inject,
     input,
@@ -59,6 +60,7 @@ export interface OriginAnimation {
         '[class]': 'hostClasses()',
         '[style.transform]': 'originTransform()',
         '[style.transition-duration]': 'originDuration()',
+        '[style.transition-property]': 'originTransitionProperty()',
     },
     template: `
         <ng-template #slideContent>
@@ -75,6 +77,8 @@ export interface OriginAnimation {
                 <lg-image-slide
                     [item]="item()!"
                     [index]="index()"
+                    [dummySrc]="dummySrc()"
+                    [deferSrc]="deferSrc()"
                     (mediaLoad)="onLoad()"
                     (mediaError)="onError()"
                 />
@@ -198,6 +202,20 @@ export class LgSlideComponent {
             !!this.item(),
     );
 
+    // 2.x first-slide dummy (`getDummyImageContent`): while the
+    // zoom-from-origin flight runs, the trigger's already-decoded
+    // thumbnail flies enlarged in place of the still-loading image; the
+    // real image mounts only once the flight lands and the dummy drops
+    // shortly after the load settles (`loadContentOnFirstSlideLoad`).
+    protected readonly dummySrc = signal<string | null>(null);
+    private dummyDone = false;
+    private dummyDropTimer: ReturnType<typeof setTimeout> | null = null;
+    /** v2 mounts the real image only once the flight lands. */
+    protected readonly deferSrc = computed(() => {
+        const anim = this.originAnim();
+        return !!this.dummySrc() && !!anim && !anim.closing;
+    });
+
     constructor() {
         // React counterpart: Slide's sticky `shouldLoad` ref — once content
         // mounts it stays for as long as the slide is in the DOM window.
@@ -206,6 +224,48 @@ export class LgSlideComponent {
                 this.sticky.set(true);
             }
         });
+        effect(() => {
+            const anim = this.originAnim();
+            if (
+                this.dummyDone ||
+                this.dummySrc() ||
+                !anim ||
+                anim.closing ||
+                this.completed() ||
+                this.slideType() !== 'image'
+            ) {
+                return;
+            }
+            untracked(() => {
+                const src = this.runtime.getDummySrc(this.index());
+                if (src) {
+                    this.dummySrc.set(src);
+                    this.runtime.firstSlideLoading.set(true);
+                } else {
+                    this.dummyDone = true;
+                }
+            });
+        });
+        effect(() => {
+            if (!this.dummySrc() || !this.completed()) {
+                return;
+            }
+            untracked(() => {
+                this.dummyDropTimer = setTimeout(() => {
+                    this.dummyDone = true;
+                    this.dummySrc.set(null);
+                    this.runtime.firstSlideLoading.set(false);
+                }, 300);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            if (this.dummyDropTimer !== null) {
+                clearTimeout(this.dummyDropTimer);
+            }
+            if (this.dummySrc()) {
+                this.runtime.firstSlideLoading.set(false);
+            }
+        });
         // React counterpart: Slide's afterAppendSlide mount effect (2.x
         // afterAppendSlide fired once when the slide's content mounts).
         effect(() => {
@@ -257,6 +317,7 @@ export class LgSlideComponent {
             this.inProgress() && 'lg-slide-progress',
             this.shouldLoad() && 'lg-loaded',
             this.completed() && 'lg-complete lg-complete_',
+            !!this.dummySrc() && 'lg-first-slide',
             this.originClasses(),
         ),
     );
@@ -281,6 +342,16 @@ export class LgSlideComponent {
             : null;
     });
 
+    // The origin transform must LAND, never animate: measuring
+    // (computeOrigin) forces a recalc that baselines the item at
+    // identity, and the `:not(.lg-start-end-progress)` inherit rule
+    // would transition identity → origin — a visible
+    // fullscreen→thumbnail shrink before the flight.
+    protected readonly originTransitionProperty = computed(() => {
+        const anim = this.originAnim();
+        return anim && anim.stage === 'init' ? 'none' : null;
+    });
+
     private readonly originClasses = computed(() => {
         const anim = this.originAnim();
         if (!anim || anim.stage === 'init') {