@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
47 lines (46 loc) • 1.88 kB
JavaScript
import { computeFit } from "./geometry.mjs";
import { OPEN_SPRING } from "./useFlipTransition.mjs";
import { useLayoutEffect, useRef } from "react";
import { animate } from "motion/react";
//#region src/Image/viewer/useRefitTransition.ts
const useRefitTransition = ({ animated, fillViewport, isTransitioning, natural, rotation, scale, viewport, x, y }) => {
const naturalRef = useRef(natural);
useLayoutEffect(() => {
const previousNatural = naturalRef.current;
naturalRef.current = natural;
if (previousNatural.width === natural.width && previousNatural.height === natural.height) return;
if (!animated) return;
if (isTransitioning()) return;
const previousFit = computeFit(previousNatural, viewport, rotation, fillViewport);
const nextFit = computeFit(natural, viewport, rotation, fillViewport);
if (previousFit.width === nextFit.width && previousFit.height === nextFit.height && previousFit.x === nextFit.x && previousFit.y === nextFit.y) return;
const ratio = nextFit.width > 0 ? previousFit.width / nextFit.width : 1;
if (!Number.isFinite(ratio) || ratio <= 0) return;
const previousCenterX = previousFit.x + previousFit.width / 2;
const previousCenterY = previousFit.y + previousFit.height / 2;
const nextCenterX = nextFit.x + nextFit.width / 2;
const nextCenterY = nextFit.y + nextFit.height / 2;
const targetScale = scale.get();
const targetX = x.get();
const targetY = y.get();
scale.set(targetScale * ratio);
x.set(targetX + (previousCenterX - nextCenterX));
y.set(targetY + (previousCenterY - nextCenterY));
animate(scale, targetScale, OPEN_SPRING);
animate(x, targetX, OPEN_SPRING);
animate(y, targetY, OPEN_SPRING);
}, [
animated,
fillViewport,
isTransitioning,
natural,
rotation,
scale,
viewport,
x,
y
]);
};
//#endregion
export { useRefitTransition };
//# sourceMappingURL=useRefitTransition.mjs.map