getVisibleRect.ts

import type { SizeVector, Vector } from 'react-native-zoom-toolkit';
import { interpolate } from 'react-native-reanimated';

type Rect = {
  x: number;
  y: number;
  width: number;
  height: number;
};

type Options = {
  scale: number;
  translation: Vector<number>; // cartesian system values with the y axis flipped
  itemSize: SizeVector<number>; // Size of the wrapped component
  containerSize: SizeVector<number>; // Size of ResumableZoom
};

export const getVisibleRect = (options: Options): Rect => {
  const { scale, translation, itemSize, containerSize } = options;

  const offsetX = Math.max(
    (itemSize.width * scale - containerSize.width) / 2,
    0
  );

  const offsetY = Math.max(
    (itemSize.height * scale - containerSize.height) / 2,
    0
  );

  const reducerX = (-1 * translation.x + offsetX) / (itemSize.width * scale);
  const reducerY = (-1 * translation.y + offsetY) / (itemSize.height * scale);
  console.log(reducerX, translation.x, offsetX);
  const x = itemSize.width * reducerX;
  const y = itemSize.height * reducerY;

  const width =
    itemSize.width *
    Math.min(1, containerSize.width / (itemSize.width * scale));

  const height =
    itemSize.height *
    Math.min(1, containerSize.height / (itemSize.height * scale));

  return { x, y, width, height };
};