@lazycatcloud/vue-media-preview 0.1.2 → 0.1.3

package/README.md

@@ -24,7 +24,7 @@ Demo 内置 48 个日期分组条目，复用 16 份图片、视频和实况素
 - **Canvas 图片**：当前画面优先，再预取邻页；下载可取消并有并发、流量和像素保护，原图状态以真实解码结果为准。
 - **三页翻页轨道**：当前项及相邻两项，拖动跟手，松手根据距离和速度翻页或回弹，首尾有阻尼。
 - **海量列表**：日期分组虚拟时间线、分页事件、按 ID 定位收回；列表追加/重排保留当前媒体，删除当前项切到邻项。
-- **手势**：单击工具栏、双击缩放、双指缩放、放大后平移、越过水平边缘切页并同步缩回 1 倍、适配比例下拉关闭；图片和内联视频均支持缩放。
+- **手势**：单击工具栏、双击缩放、双指缩放（适屏大小的 1–16 倍，越界阻尼与松手回弹）、放大后平移、越过水平边缘切页并同步缩回 1 倍、适配比例下拉关闭；图片和内联视频均支持缩放。
 - **桌面操作**：左右方向键、Escape、`+` / `-` / `0`；Ctrl / Command + 滚轮缩放，放大后普通滚轮平移。
 - **媒体**：图片 Canvas；视频使用原生 video 与自定义相册控制层，包含居中播放、播放/暂停、时间与缓冲进度、拖动定位、重播、声音开关和全屏；实况 Canvas 封面与视频切换。离开当前项暂停视频，退出释放组件资源。
 - **外壳**：移动端与桌面 Demo、工具栏插槽、收藏状态、详情、图片导入、失败重试、预览键盘操作和减少动态效果设置。

package/dist/components/PreviewStage.vue.d.ts

@@ -41,7 +41,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
     rendering: boolean;
     paging: boolean;
 }>, {
-    onPointerDown: (event: PointerEvent, origin?: DOMRect) => boolean;
+    onPointerDown: (event: PointerEvent, origin?: DOMRect, target?: HTMLElement) => boolean;
     onPointerMove: (event: PointerEvent) => void;
     onPointerUp: (event: PointerEvent) => void;
     onPointerCancel: (event: PointerEvent) => void;
@@ -58,9 +58,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
         image: HTMLImageElement | ImageBitmap;
         scale: number;
     } | {
-        image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
+        image: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
         scale: number;
     };
+    retainFrame: () => import("../index.ts").RetainedPreviewFrame;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (error: Error) => void;
     close: () => void;

package/dist/core/gestures/dismissGesture.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewSize } from "../types";
+/** Match paging's travel and flick sensitivity without penalizing tall viewports. */
+export declare function shouldDismiss(distance: number, velocity: number, viewport: PreviewSize): boolean;

package/dist/core/gestures/openingGesture.d.ts

@@ -0,0 +1,18 @@
+import { createPointerVelocity } from "./pointerVelocity";
+import type { PreviewSize } from "../types";
+/** Keep a contact across the opening handoff without enabling gestures on the moving card. */
+export declare function createOpeningGesture(): {
+    clear: () => void;
+    take: () => {
+        down: PointerEvent;
+        latest: PointerEvent;
+        target: HTMLElement;
+        velocity: ReturnType<typeof createPointerVelocity>;
+        kind: "pointer";
+    } | {
+        kind: "empty";
+    };
+    move: (event: PointerEvent) => void;
+    start(event: PointerEvent): void;
+    finish(event: PointerEvent, viewport: PreviewSize): boolean;
+};

package/dist/core/gestures/pointerVelocity.d.ts

@@ -0,0 +1,7 @@
+import type { PreviewPoint } from "../types";
+/** Event timestamps preserve motion timing when an opening contact is handed to the stage. */
+export declare function createPointerVelocity(): {
+    reset(point: PreviewPoint, time: number): void;
+    move(point: PreviewPoint, time: number): void;
+    read(time: number): PreviewPoint;
+};

package/dist/core/gestures/zoomBounds.d.ts

@@ -0,0 +1,5 @@
+export declare const defaultZoomLimit = 16;
+/** Preserve normal pinch tracking, with bounded resistance outside the resting range. */
+export declare function resistZoom(level: number, maximum: number): number;
+/** Re-grabbing a returning image starts at its visible scale without a second resistance step. */
+export declare function unresistZoom(level: number, maximum: number): number;

package/dist/core/resources/imageOwnership.d.ts

@@ -3,6 +3,7 @@ import type { ImageLease } from "./imageStore";
 export declare function createImageOwnership(): {
     replace(leases: ImageLease[]): void;
     display(lease: ImageLease): void;
+    retainDisplay(): () => void;
     clearDisplay(): void;
     dispose(): void;
 };

package/dist/core/types.d.ts

@@ -21,6 +21,12 @@ export type PreviewAnchor = {
     kind: "unavailable";
 };
 export type PreviewPhase = "closed" | "opening" | "open" | "closing";
+/** The caller owns captured pixels until the transition finishes, fails or is cancelled. */
+export interface RetainedPreviewFrame {
+    image: CanvasImageSource;
+    scale: number;
+    release: () => void;
+}
 export interface PreviewPoint {
     x: number;
     y: number;

package/dist/core/usePreviewViewport.d.ts

@@ -20,7 +20,7 @@ interface Options {
 }
 export declare function usePreviewViewport(options?: Options): {
     core: PreviewViewportCore;
-    onPointerDown: (event: PointerEvent, origin?: DOMRect) => boolean;
+    onPointerDown: (event: PointerEvent, origin?: DOMRect, target?: HTMLElement) => boolean;
     onPointerMove: (event: PointerEvent) => void;
     onPointerUp: (event: PointerEvent) => void;
     onPointerCancel: (event: PointerEvent) => void;

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { default as VideoDomRenderer } from "./renderers/VideoDomRenderer.vue";
 export { default as LivePhotoRenderer } from "./renderers/LivePhotoRenderer.vue";
 export { usePreviewViewport } from "./core/usePreviewViewport";
 export { formatVideoTime } from "./core/video/useVideoPlayback";
-export type { PreviewAnchor, PreviewPhase, PreviewMedia, PreviewMediaType, PreviewViewportCore, LivePhotoStatus, } from "./core/types";
+export type { PreviewAnchor, PreviewPhase, RetainedPreviewFrame, PreviewMedia, PreviewMediaType, PreviewViewportCore, LivePhotoStatus, } from "./core/types";
 export type { InitialImage } from "./core/resources/initialImage";
 export { default as VirtualTimeline } from "./components/VirtualTimeline.vue";
 export { defaultImagePolicy, defaultImageSource } from "./core/resources/imagePolicy";

package/dist/renderers/ImageCanvasRenderer.vue.d.ts

@@ -1,6 +1,6 @@
 import type { InitialImage } from "../core/resources/initialImage";
 import type { ImagePolicy, ImageQuality, ImageSourceResolver, OriginalStatus } from "../core/resources/imagePolicy";
-import type { PreviewMedia, PreviewViewportCore } from "../core/types";
+import type { RetainedPreviewFrame, PreviewMedia, PreviewViewportCore } from "../core/types";
 type __VLS_Props = {
     media: PreviewMedia;
     core: PreviewViewportCore;
@@ -14,6 +14,10 @@ type __VLS_Props = {
     resolveSource?: ImageSourceResolver;
     initialImage?: InitialImage;
 };
+declare function captureFrame(): {
+    image: HTMLImageElement | ImageBitmap;
+    scale: number;
+};
 declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
     quality: string;
     initialImage: () => InitialImage;
@@ -25,10 +29,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
     resourcePolicy: () => ImagePolicy;
     resolveSource: ImageSourceResolver;
 }>, {
-    captureFrame: () => {
-        image: HTMLImageElement | ImageBitmap;
-        scale: number;
-    };
+    captureFrame: typeof captureFrame;
+    retainFrame: () => RetainedPreviewFrame;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (error: Error) => void;
     ready: (quality: "full" | "thumbnail" | "screen") => void;

package/dist/renderers/LivePhotoRenderer.vue.d.ts

@@ -35,6 +35,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
     resolveSource: ImageSourceResolver;
 }>, {
     captureFrame: typeof captureFrame;
+    retainFrame: () => {
+        release: () => void;
+        image: HTMLCanvasElement;
+        scale: number;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (error: Error) => void;
     ready: (quality: "full" | "thumbnail" | "screen") => void;

package/dist/renderers/VideoDomRenderer.vue.d.ts

@@ -27,7 +27,7 @@ type __VLS_Props = {
 };
 declare function toggleFullscreen(): Promise<void>;
 declare function captureFrame(): {
-    image: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement;
+    image: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
     scale: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
@@ -113,6 +113,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_WithDefaults<__V
         dispose: () => void;
     };
     captureFrame: typeof captureFrame;
+    retainFrame: () => {
+        release: () => void;
+        image: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement;
+        scale: number;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (error: Error) => void;
     ready: (quality: "full" | "thumbnail" | "screen") => void;