External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add CSS transform props to ImageViewer for live rotate/flip preview

Browse Source
This commit is contained in:
Siddharth Kumar Sah
2026-03-23 12:50:19 +08:00
parent bc105fd261
commit 267da78577
1 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/common/image-viewer.tsx
+22 -3
View File
@@ -6,12 +6,15 @@ interface ImageViewerProps {
src: string; src: string;
filename: string; filename: string;
fileSize: number; fileSize: number;
cssRotate?: number;
cssFlipH?: boolean;
cssFlipV?: boolean;
} }
const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200, 300]; const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200, 300];
const DEFAULT_ZOOM = 100; const DEFAULT_ZOOM = 100;
export function ImageViewer({ src, filename, fileSize }: ImageViewerProps) { export function ImageViewer({ src, filename, fileSize, cssRotate, cssFlipH, cssFlipV }: ImageViewerProps) {
const [zoom, setZoom] = useState(DEFAULT_ZOOM); const [zoom, setZoom] = useState(DEFAULT_ZOOM);
const [naturalWidth, setNaturalWidth] = useState<number | null>(null); const [naturalWidth, setNaturalWidth] = useState<number | null>(null);
const [naturalHeight, setNaturalHeight] = useState<number | null>(null); const [naturalHeight, setNaturalHeight] = useState<number | null>(null);
@@ -62,10 +65,26 @@ export function ImageViewer({ src, filename, fileSize }: ImageViewerProps) {
setNaturalHeight(null); setNaturalHeight(null);
}, [src]); }, [src]);
const previewTransform = [
cssRotate ? `rotate(${cssRotate}deg)` : "",
cssFlipH ? "scaleX(-1)" : "",
cssFlipV ? "scaleY(-1)" : "",
]
.filter(Boolean)
.join(" ");
const imageStyle = const imageStyle =
fitMode === "fit" fitMode === "fit"
? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" as const } ? {
: { transform: `scale(${zoom / 100})`, transformOrigin: "center center" }; maxWidth: "100%",
maxHeight: "100%",
objectFit: "contain" as const,
...(previewTransform && { transform: previewTransform }),
}
: {
transform: `scale(${zoom / 100})${previewTransform ? ` ${previewTransform}` : ""}`,
transformOrigin: "center center",
};
return ( return (
<div className="flex flex-col w-full h-full max-w-3xl mx-auto"> <div className="flex flex-col w-full h-full max-w-3xl mx-auto">