zkit-ui 2.0.5 → 2.0.7

package/src/ui/NativeImagePreview/web/geometry.ts

@@ -0,0 +1,134 @@
+/// <reference lib="dom" />
+
+import type { NativeImagePreviewWebImageSize, NativeImagePreviewWebObjectFit, NativeImagePreviewWebRect } from './types';
+
+export type SharedElementGeometry = {
+  visibleFrame: NativeImagePreviewWebRect;
+  contentFrame: NativeImagePreviewWebRect;
+};
+
+export function rectFromDOMRect(rect: DOMRectReadOnly | NativeImagePreviewWebRect): NativeImagePreviewWebRect {
+  return normalizeRect({
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+  });
+}
+
+export function rectFromElement(element: Element): NativeImagePreviewWebRect {
+  return rectFromDOMRect(element.getBoundingClientRect());
+}
+
+export function viewportRect(): NativeImagePreviewWebRect {
+  return normalizeRect({
+    left: 0,
+    top: 0,
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+}
+
+export function normalizeRect(input: Pick<NativeImagePreviewWebRect, 'left' | 'top' | 'width' | 'height'>): NativeImagePreviewWebRect {
+  return {
+    left: input.left,
+    top: input.top,
+    width: input.width,
+    height: input.height,
+    right: input.left + input.width,
+    bottom: input.top + input.height,
+  };
+}
+
+export function isUsableRect(rect: NativeImagePreviewWebRect | null | undefined): rect is NativeImagePreviewWebRect {
+  return !!rect && rect.width > 1 && rect.height > 1;
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function fitRect(
+  mediaSize: NativeImagePreviewWebImageSize,
+  container: NativeImagePreviewWebRect,
+  objectFit: NativeImagePreviewWebObjectFit
+): NativeImagePreviewWebRect {
+  if (objectFit === 'fill') {
+    return normalizeRect(container);
+  }
+
+  const widthScale = container.width / Math.max(1, mediaSize.width);
+  const heightScale = container.height / Math.max(1, mediaSize.height);
+  const scale = objectFit === 'cover'
+    ? Math.max(widthScale, heightScale)
+    : Math.min(widthScale, heightScale);
+  const width = mediaSize.width * scale;
+  const height = mediaSize.height * scale;
+  return normalizeRect({
+    left: container.left + (container.width - width) / 2,
+    top: container.top + (container.height - height) / 2,
+    width,
+    height,
+  });
+}
+
+export function sharedGeometryFor(
+  container: NativeImagePreviewWebRect,
+  mediaSize: NativeImagePreviewWebImageSize,
+  objectFit: NativeImagePreviewWebObjectFit
+): SharedElementGeometry {
+  const contentFrameInWindow = fitRect(mediaSize, container, objectFit);
+  const visibleFrame = intersectRects(container, contentFrameInWindow) ?? normalizeRect(container);
+  const contentFrame = normalizeRect({
+    left: contentFrameInWindow.left - visibleFrame.left,
+    top: contentFrameInWindow.top - visibleFrame.top,
+    width: contentFrameInWindow.width,
+    height: contentFrameInWindow.height,
+  });
+  return { visibleFrame, contentFrame };
+}
+
+export function targetGeometryFor(mediaSize: NativeImagePreviewWebImageSize, container: NativeImagePreviewWebRect): SharedElementGeometry {
+  const visibleFrame = fitRect(mediaSize, container, 'contain');
+  return {
+    visibleFrame,
+    contentFrame: normalizeRect({
+      left: 0,
+      top: 0,
+      width: visibleFrame.width,
+      height: visibleFrame.height,
+    }),
+  };
+}
+
+export function intersectRects(first: NativeImagePreviewWebRect, second: NativeImagePreviewWebRect): NativeImagePreviewWebRect | null {
+  const left = Math.max(first.left, second.left);
+  const top = Math.max(first.top, second.top);
+  const right = Math.min(first.right, second.right);
+  const bottom = Math.min(first.bottom, second.bottom);
+  if (right <= left || bottom <= top) {
+    return null;
+  }
+  return normalizeRect({ left, top, width: right - left, height: bottom - top });
+}
+
+export function lerp(start: number, end: number, progress: number): number {
+  return start + (end - start) * progress;
+}
+
+export function lerpRect(start: NativeImagePreviewWebRect, end: NativeImagePreviewWebRect, progress: number): NativeImagePreviewWebRect {
+  return normalizeRect({
+    left: lerp(start.left, end.left, progress),
+    top: lerp(start.top, end.top, progress),
+    width: lerp(start.width, end.width, progress),
+    height: lerp(start.height, end.height, progress),
+  });
+}
+
+export function easeOutCubic(t: number): number {
+  return 1 - Math.pow(1 - t, 3);
+}
+
+export function easeOutQuart(t: number): number {
+  return 1 - Math.pow(1 - t, 4);
+}

package/src/ui/NativeImagePreview/web/media.ts

@@ -0,0 +1,91 @@
+/// <reference lib="dom" />
+
+import type { NativeImagePreviewWebImageSize, NativeImagePreviewWebMediaItem, NativeImagePreviewWebMediaType, NativeImagePreviewWebResolvedItem } from './types';
+
+export function normalizeItems(items: readonly NativeImagePreviewWebMediaItem[]): NativeImagePreviewWebResolvedItem[] {
+  return items
+    .map((item, index): NativeImagePreviewWebResolvedItem | null => {
+      const src = item.src ?? item.url ?? '';
+      if (!src.trim()) {
+        return null;
+      }
+      const type = resolveType(item);
+      return {
+        id: item.id ?? String(index),
+        type,
+        src,
+        poster: item.poster,
+        width: item.width,
+        height: item.height,
+        alt: item.alt ?? `Image ${index + 1}`,
+        raw: item,
+      };
+    })
+    .filter((item): item is NativeImagePreviewWebResolvedItem => item !== null);
+}
+
+export function previewSourceFor(item: NativeImagePreviewWebResolvedItem): string {
+  return item.type === 'video' ? item.poster ?? item.src : item.src;
+}
+
+export async function resolveMediaSize(
+  item: NativeImagePreviewWebResolvedItem,
+  fallback?: NativeImagePreviewWebImageSize | null
+): Promise<NativeImagePreviewWebImageSize> {
+  if (fallback && fallback.width > 0 && fallback.height > 0) {
+    return fallback;
+  }
+  if (item.width && item.height) {
+    return { width: item.width, height: item.height };
+  }
+  const previewSource = previewSourceFor(item);
+  if (!previewSource) {
+    return { width: 1, height: 1 };
+  }
+  try {
+    return await loadImageSize(previewSource);
+  } catch {
+    return { width: 1, height: 1 };
+  }
+}
+
+export function waitForElementImage(element: Element | null | undefined): Promise<void> {
+  if (!(element instanceof HTMLImageElement)) {
+    return Promise.resolve();
+  }
+  if (element.complete && element.naturalWidth > 0) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    const done = () => {
+      element.removeEventListener('load', done);
+      element.removeEventListener('error', done);
+      resolve();
+    };
+    element.addEventListener('load', done, { once: true });
+    element.addEventListener('error', done, { once: true });
+  });
+}
+
+function resolveType(item: NativeImagePreviewWebMediaItem): NativeImagePreviewWebMediaType {
+  if (item.type === 'video') {
+    return 'video';
+  }
+  const src = item.src ?? item.url ?? '';
+  return /\.(mp4|webm|ogg)(\?.*)?$/i.test(src) ? 'video' : 'image';
+}
+
+function loadImageSize(src: string): Promise<NativeImagePreviewWebImageSize> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.decoding = 'async';
+    image.onload = () => {
+      resolve({
+        width: image.naturalWidth || image.width || 1,
+        height: image.naturalHeight || image.height || 1,
+      });
+    };
+    image.onerror = () => reject(new Error(`Unable to load image: ${src}`));
+    image.src = src;
+  });
+}

package/src/ui/NativeImagePreview/web/styles.css

@@ -0,0 +1,137 @@
+.native-image-preview-root {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483000;
+  width: var(--native-image-preview-vw, 100vw);
+  height: var(--native-image-preview-vh, 100vh);
+  overflow: hidden;
+  color: #fff;
+  contain: layout size paint;
+  overscroll-behavior: none;
+  touch-action: none;
+  user-select: none;
+}
+
+.native-image-preview-backdrop {
+  position: absolute;
+  inset: 0;
+  background: #000;
+  will-change: opacity;
+}
+
+.native-image-preview-theme-light .native-image-preview-backdrop {
+  background: #fff;
+}
+
+.native-image-preview-viewport {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.native-image-preview-track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: var(--native-image-preview-vw, 100vw);
+  height: var(--native-image-preview-vh, 100vh);
+  will-change: transform, opacity;
+}
+
+.native-image-preview-slide {
+  position: relative;
+  display: grid;
+  flex: 0 0 var(--native-image-preview-vw, 100vw);
+  width: var(--native-image-preview-vw, 100vw);
+  height: var(--native-image-preview-vh, 100vh);
+  place-items: center;
+  overflow: hidden;
+}
+
+.native-image-preview-media {
+  display: block;
+  max-width: var(--native-image-preview-vw, 100vw);
+  max-height: var(--native-image-preview-vh, 100vh);
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+}
+
+.native-image-preview-image {
+  width: auto;
+  height: auto;
+}
+
+.native-image-preview-video {
+  width: auto;
+  height: auto;
+  background: #000;
+}
+
+.native-image-preview-close {
+  position: fixed;
+  top: max(12px, env(safe-area-inset-top));
+  left: max(12px, env(safe-area-inset-left));
+  z-index: 3;
+  display: grid;
+  width: 42px;
+  height: 42px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  cursor: pointer;
+  font-size: 30px;
+  line-height: 1;
+  backdrop-filter: blur(18px);
+}
+
+.native-image-preview-counter {
+  position: fixed;
+  right: max(14px, env(safe-area-inset-right));
+  bottom: max(18px, env(safe-area-inset-bottom));
+  z-index: 3;
+  min-width: 58px;
+  padding: 8px 11px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 720;
+  text-align: center;
+  backdrop-filter: blur(18px);
+}
+
+.native-image-preview-fly-shell {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  overflow: hidden;
+  border-radius: 0;
+  pointer-events: none;
+  transform-origin: top left;
+  will-change: transform, width, height;
+}
+
+.native-image-preview-fly-media {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  max-width: none;
+  max-height: none;
+  object-fit: fill;
+  transform-origin: top left;
+  will-change: transform, width, height;
+}
+
+.native-image-preview-fading-out {
+  opacity: 0;
+  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}

package/src/ui/NativeImagePreview/web/transition.ts

@@ -0,0 +1,111 @@
+/// <reference lib="dom" />
+
+import type { NativeImagePreviewWebResolvedItem } from './types';
+import { easeOutCubic, lerpRect, type SharedElementGeometry } from './geometry';
+import { previewSourceFor } from './media';
+
+type SharedTransitionOptions = {
+  item: NativeImagePreviewWebResolvedItem;
+  from: SharedElementGeometry;
+  to: SharedElementGeometry;
+  duration?: number;
+  parent?: HTMLElement;
+  beforeStart?: () => void | Promise<void>;
+  onProgress?: (progress: number) => void;
+  beforeRemove?: () => void | Promise<void>;
+};
+
+export async function animateSharedElement({
+  item,
+  from,
+  to,
+  duration = 320,
+  parent = document.body,
+  beforeStart,
+  onProgress,
+  beforeRemove,
+}: SharedTransitionOptions): Promise<void> {
+  const shell = document.createElement('div');
+  shell.className = 'native-image-preview-fly-shell';
+  shell.style.opacity = '0';
+
+  const media = document.createElement('img');
+  media.className = 'native-image-preview-fly-media';
+  media.alt = item.alt;
+  media.draggable = false;
+  media.src = previewSourceFor(item);
+
+  shell.append(media);
+  applyGeometry(shell, media, from);
+  parent.append(shell);
+  await waitForFlyMedia(media);
+  shell.style.opacity = '1';
+  await waitFrames(1);
+  await beforeStart?.();
+
+  const startedAt = performance.now();
+
+  return new Promise((resolve) => {
+    const render = async (now: number) => {
+      const raw = Math.min(1, (now - startedAt) / duration);
+      const progress = easeOutCubic(raw);
+      applyGeometry(shell, media, {
+        visibleFrame: lerpRect(from.visibleFrame, to.visibleFrame, progress),
+        contentFrame: lerpRect(from.contentFrame, to.contentFrame, progress),
+      });
+      onProgress?.(progress);
+
+      if (raw < 1) {
+        requestAnimationFrame(render);
+        return;
+      }
+      await beforeRemove?.();
+      await waitFrames(1);
+      requestAnimationFrame(() => {
+        shell.remove();
+        resolve();
+      });
+    };
+
+    requestAnimationFrame(render);
+  });
+}
+
+function applyGeometry(
+  shell: HTMLElement,
+  media: HTMLImageElement,
+  geometry: SharedElementGeometry
+): void {
+  const shellRect = geometry.visibleFrame;
+  const mediaRect = geometry.contentFrame;
+  shell.style.transform = `translate3d(${shellRect.left}px, ${shellRect.top}px, 0)`;
+  shell.style.width = `${shellRect.width}px`;
+  shell.style.height = `${shellRect.height}px`;
+  media.style.transform = `translate3d(${mediaRect.left}px, ${mediaRect.top}px, 0)`;
+  media.style.width = `${mediaRect.width}px`;
+  media.style.height = `${mediaRect.height}px`;
+}
+
+function waitFrames(count: number): Promise<void> {
+  return new Promise((resolve) => {
+    const step = (remaining: number) => {
+      if (remaining <= 0) {
+        resolve();
+        return;
+      }
+      requestAnimationFrame(() => step(remaining - 1));
+    };
+    step(count);
+  });
+}
+
+function waitForFlyMedia(image: HTMLImageElement): Promise<void> {
+  if (image.complete && image.naturalWidth > 0) {
+    return Promise.resolve();
+  }
+
+  return Promise.race([
+    image.decode().catch(() => undefined),
+    new Promise<void>((resolve) => window.setTimeout(resolve, 180)),
+  ]);
+}

package/src/ui/NativeImagePreview/web/types.ts

@@ -0,0 +1,88 @@
+/// <reference lib="dom" />
+
+export type NativeImagePreviewWebTheme = 'dark' | 'light';
+
+export type NativeImagePreviewWebMediaType = 'image' | 'video';
+
+export type NativeImagePreviewWebObjectFit = 'cover' | 'contain' | 'fill';
+
+export type NativeImagePreviewWebSourceVisibility = 'hidden' | 'visible';
+
+export type NativeImagePreviewWebCloseReason = 'api' | 'backdrop' | 'button' | 'drag' | 'escape' | 'replace';
+
+export type NativeImagePreviewWebChangeReason = 'api' | 'swipe';
+
+export type NativeImagePreviewWebRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  right: number;
+  bottom: number;
+};
+
+export type NativeImagePreviewWebImageSize = {
+  width: number;
+  height: number;
+};
+
+export type NativeImagePreviewWebMediaItem = {
+  id?: string;
+  type?: NativeImagePreviewWebMediaType;
+  url?: string;
+  src?: string;
+  poster?: string;
+  width?: number;
+  height?: number;
+  alt?: string;
+};
+
+export type NativeImagePreviewWebResolvedItem = {
+  id: string;
+  type: NativeImagePreviewWebMediaType;
+  src: string;
+  poster?: string;
+  width?: number;
+  height?: number;
+  alt: string;
+  raw: NativeImagePreviewWebMediaItem;
+};
+
+export type NativeImagePreviewWebChangeMeta = {
+  reason: NativeImagePreviewWebChangeReason;
+  previousIndex: number;
+  index: number;
+  item: NativeImagePreviewWebResolvedItem;
+};
+
+export type NativeImagePreviewWebCloseMeta = {
+  reason: NativeImagePreviewWebCloseReason;
+  index: number;
+  item: NativeImagePreviewWebResolvedItem | null;
+};
+
+export type NativeImagePreviewWebOpenOptions = {
+  items: readonly NativeImagePreviewWebMediaItem[];
+  index?: number;
+  sourceElement?: HTMLElement | null;
+  sourceElements?: readonly (HTMLElement | null | undefined)[];
+  getSourceElement?: (index: number, item: NativeImagePreviewWebResolvedItem) => HTMLElement | null | undefined;
+  sourceRect?: NativeImagePreviewWebRect | DOMRectReadOnly | null;
+  sourceImageSize?: NativeImagePreviewWebImageSize | null;
+  objectFit?: NativeImagePreviewWebObjectFit;
+  sourceObjectFit?: NativeImagePreviewWebObjectFit;
+  sourceVisibility?: NativeImagePreviewWebSourceVisibility;
+  theme?: NativeImagePreviewWebTheme;
+  closeButton?: boolean;
+  counter?: boolean;
+  onChange?: (index: number, meta: NativeImagePreviewWebChangeMeta) => void;
+  onClose?: (meta: NativeImagePreviewWebCloseMeta) => void;
+};
+
+export type NativeImagePreviewWebController = {
+  open: (options: NativeImagePreviewWebOpenOptions) => Promise<void>;
+  close: (reason?: NativeImagePreviewWebCloseReason) => Promise<void>;
+  destroy: () => void;
+  getIndex: () => number;
+  isOpen: () => boolean;
+};