Ivan Fontosh
105 lines
3.2 KiB
TypeScript
105 lines
3.2 KiB
TypeScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
|
|
import styles from './RotatedImage.module.css';
|
|
|
|
type Mode = 'cover' | 'contain';
|
|
|
|
type RotatedImageProps = {
|
|
url: string;
|
|
rotationDeg: 0 | 90 | 180 | 270;
|
|
mode: Mode;
|
|
alt?: string;
|
|
/** Высота/ширина полностью контролируются родителем. */
|
|
style?: React.CSSProperties;
|
|
/** Прямоугольник видимого контента (contain/cover) внутри контейнера. */
|
|
onContentRectChange?: ((rect: { x: number; y: number; w: number; h: number }) => void) | undefined;
|
|
};
|
|
|
|
function useElementSize<T extends HTMLElement>() {
|
|
const ref = useRef<T | null>(null);
|
|
const [size, setSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 });
|
|
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
const ro = new ResizeObserver(() => {
|
|
const r = el.getBoundingClientRect();
|
|
setSize({ w: r.width, h: r.height });
|
|
});
|
|
ro.observe(el);
|
|
const r = el.getBoundingClientRect();
|
|
setSize({ w: r.width, h: r.height });
|
|
return () => ro.disconnect();
|
|
}, []);
|
|
|
|
return [ref, size] as const;
|
|
}
|
|
|
|
export function RotatedImage({
|
|
url,
|
|
rotationDeg,
|
|
mode,
|
|
alt = '',
|
|
style,
|
|
onContentRectChange,
|
|
}: RotatedImageProps) {
|
|
const [ref, size] = useElementSize<HTMLDivElement>();
|
|
const [imgSize, setImgSize] = useState<{ w: number; h: number } | null>(null);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
if (cancelled) return;
|
|
setImgSize({ w: img.naturalWidth || 1, h: img.naturalHeight || 1 });
|
|
};
|
|
img.src = url;
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [url]);
|
|
|
|
const scale = useMemo(() => {
|
|
if (!imgSize) return 1;
|
|
if (size.w <= 1 || size.h <= 1) return 1;
|
|
const rotated = rotationDeg === 90 || rotationDeg === 270;
|
|
const iw = rotated ? imgSize.h : imgSize.w;
|
|
const ih = rotated ? imgSize.w : imgSize.h;
|
|
const sx = size.w / iw;
|
|
const sy = size.h / ih;
|
|
return mode === 'cover' ? Math.max(sx, sy) : Math.min(sx, sy);
|
|
}, [imgSize, mode, rotationDeg, size.h, size.w]);
|
|
|
|
useEffect(() => {
|
|
if (!onContentRectChange) return;
|
|
if (!imgSize) return;
|
|
if (size.w <= 1 || size.h <= 1) return;
|
|
const rotated = rotationDeg === 90 || rotationDeg === 270;
|
|
// Bounding-box размеров после rotate(): при 90/270 меняются местами.
|
|
const bw = (rotated ? imgSize.h : imgSize.w) * scale;
|
|
const bh = (rotated ? imgSize.w : imgSize.h) * scale;
|
|
const x = (size.w - bw) / 2;
|
|
const y = (size.h - bh) / 2;
|
|
onContentRectChange({ x, y, w: bw, h: bh });
|
|
}, [imgSize, mode, onContentRectChange, rotationDeg, scale, size.h, size.w]);
|
|
|
|
const w = imgSize ? imgSize.w * scale : undefined;
|
|
const h = imgSize ? imgSize.h * scale : undefined;
|
|
|
|
return (
|
|
<div ref={ref} className={styles.root} style={style}>
|
|
<img
|
|
alt={alt}
|
|
src={url}
|
|
className={styles.img}
|
|
style={{
|
|
width: w ?? '100%',
|
|
height: h ?? '100%',
|
|
objectFit: imgSize ? undefined : mode,
|
|
transform: `translate(-50%, -50%) rotate(${String(rotationDeg)}deg)`,
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|