react-native-gesture-image-viewer 2.1.2 → 2.1.4

package/src/utils/tapZoom.ts

@@ -0,0 +1,44 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { Easing, withTiming } from 'react-native-reanimated';
+
+export const applyTapZoomAtPoint = ({
+  x,
+  y,
+  width,
+  height,
+  maxZoomScale,
+  scale,
+  translateX,
+  translateY,
+}: {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  maxZoomScale: number;
+  scale: SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+}) => {
+  'worklet';
+
+  const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+  const timingConfig = {
+    duration: 300,
+    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+  };
+
+  if (nextScale > 1) {
+    const centerX = x - width / 2;
+    const centerY = y - height / 2;
+
+    // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
+    translateX.value = withTiming(-centerX * (nextScale - 1), timingConfig);
+    translateY.value = withTiming(-centerY * (nextScale - 1), timingConfig);
+  } else {
+    translateX.value = withTiming(0, timingConfig);
+    translateY.value = withTiming(0, timingConfig);
+  }
+
+  scale.value = withTiming(nextScale, timingConfig);
+};

package/src/utils/webScroll.ts

@@ -0,0 +1,96 @@
+export const getWebScrollPhysicalIndex = (offsetX: number, pageWidth: number): number => {
+  if (!Number.isFinite(offsetX) || !Number.isFinite(pageWidth) || pageWidth <= 0) {
+    return 0;
+  }
+
+  return Math.max(0, Math.round(offsetX / pageWidth));
+};
+
+export const resolveWebScrollFinalState = ({
+  dataLength,
+  enableLoop,
+  lastSettledPhysicalIndex,
+  offsetX,
+  pageWidth,
+}: {
+  offsetX: number;
+  pageWidth: number;
+  lastSettledPhysicalIndex: number;
+  dataLength: number;
+  enableLoop: boolean;
+}): { logicalIndex: number; rawPhysicalIndex: number; settledPhysicalIndex: number } | null => {
+  if (
+    dataLength <= 0 ||
+    !Number.isFinite(offsetX) ||
+    !Number.isFinite(pageWidth) ||
+    pageWidth <= 0
+  ) {
+    return null;
+  }
+
+  const maxPhysicalIndex = enableLoop && dataLength > 1 ? dataLength + 1 : dataLength - 1;
+  const rawPhysicalIndex = getWebScrollPhysicalIndex(offsetX, pageWidth);
+
+  if (enableLoop && dataLength > 1) {
+    const isWrappingBackward = lastSettledPhysicalIndex === 1 && rawPhysicalIndex >= dataLength;
+    const isWrappingForward = lastSettledPhysicalIndex === dataLength && rawPhysicalIndex <= 1;
+
+    if (isWrappingBackward || rawPhysicalIndex === 0) {
+      return {
+        logicalIndex: dataLength - 1,
+        rawPhysicalIndex,
+        settledPhysicalIndex: dataLength,
+      };
+    }
+
+    if (isWrappingForward || rawPhysicalIndex >= dataLength + 1) {
+      return {
+        logicalIndex: 0,
+        rawPhysicalIndex,
+        settledPhysicalIndex: 1,
+      };
+    }
+  }
+
+  const targetPhysicalIndex = Math.max(0, Math.min(maxPhysicalIndex, rawPhysicalIndex));
+
+  if (enableLoop && dataLength > 1) {
+    return {
+      logicalIndex: targetPhysicalIndex - 1,
+      rawPhysicalIndex,
+      settledPhysicalIndex: targetPhysicalIndex,
+    };
+  }
+
+  return {
+    logicalIndex: targetPhysicalIndex,
+    rawPhysicalIndex,
+    settledPhysicalIndex: targetPhysicalIndex,
+  };
+};
+
+export const getWebAutoPlayTargetPhysicalIndex = ({
+  currentIndex,
+  dataLength,
+  enableLoop,
+}: {
+  currentIndex: number;
+  dataLength: number;
+  enableLoop: boolean;
+}): number | null => {
+  if (dataLength <= 1) {
+    return null;
+  }
+
+  if (enableLoop && currentIndex === dataLength - 1) {
+    return dataLength + 1;
+  }
+
+  const nextIndex = currentIndex + 1;
+
+  if (nextIndex >= dataLength) {
+    return null;
+  }
+
+  return enableLoop ? nextIndex + 1 : nextIndex;
+};