Merge pull request #10 from Pettor/feature/clamp-rotated

feat: clamp works when rotated

src/components/library/image-editor/atoms/transform/RotationAtoms.ts

@@ -22,7 +22,7 @@ export const rotationControlAtom = atom(
   }
 );
 
-export const isRotated = atom((get) => {
+export const isRotatedAtom = atom((get) => {
   const rotation = get(rotationAtom);
   return (rotation / (Math.PI / 2)) % 2 !== 0;
 });

src/components/library/image-editor/atoms/viewport/ViewportChangeAtoms.ts

@@ -1,6 +1,6 @@
 import { atomEffect } from "jotai-effect";
 import { ZOOM_BASE } from "../../constants/ZoomConstants";
-import { isRotated } from "../transform/RotationAtoms";
+import { isRotatedAtom } from "../transform/RotationAtoms";
 import { viewportAtom } from "./ViewportAtoms";
 import { fitZoomAtom } from "./ZoomAtoms";
 
@@ -10,11 +10,11 @@ export const viewportChangeAtom = atomEffect((get, set) => {
     return;
   }
 
-  const rotated = get(isRotated);
+  const isRotated = get(isRotatedAtom);
 
   const { screenWidth, screenHeight, worldWidth, worldHeight } = viewport;
-  const imageWidth = rotated ? worldHeight : worldWidth;
-  const imageHeight = rotated ? worldWidth : worldHeight;
+  const imageWidth = isRotated ? worldHeight : worldWidth;
+  const imageHeight = isRotated ? worldWidth : worldHeight;
 
   const wFactor = screenWidth / imageWidth;
   const hFactor = screenHeight / imageHeight;

src/components/library/image-editor/stage/StageComponent.tsx

@@ -1,8 +1,6 @@
 import { type ReactElement } from "react";
 import { Stage } from "@pixi/react";
-import { useAtomValue } from "jotai";
 import { useElementSize } from "usehooks-ts";
-import { maxZoomAtom, minZoomAtom } from "../atoms/viewport/ZoomAtoms";
 import { StagedFilters } from "./StagedFilters";
 import { StagedImage } from "./StagedImage";
 import { StagedViewport } from "./StagedViewport";
@@ -13,12 +11,10 @@ import { useStageViewport } from "./UseStageViewport";
 
 export function StageComponent(): ReactElement {
   const [ref, { width: containerWidth, height: containerHeight }] = useElementSize();
-  const { stageOptions, lock, scale, rotation, zoom, setZoom } = useStageViewport();
+  const { stageOptions, lock, scale, rotation, zoom, minZoom, maxZoom, setZoom } = useStageViewport();
   const { imageUrl, imageWidth, imageHeight } = useStageImage();
   const { registerViewport } = useStageSetup();
   const { blur } = useStageFilters();
-  const minZoom = useAtomValue(minZoomAtom);
-  const maxZoom = useAtomValue(maxZoomAtom);
 
   return (
     <div ref={ref} className="flex-1 overflow-hidden rounded-lg border-4 border-base-100">

src/components/library/image-editor/stage/UseStageImage.ts

@@ -1,18 +1,20 @@
 import { useAtomValue } from "jotai";
 import { imageAtom } from "../atoms/ImageAtoms";
 import { imageUrlAtom } from "../atoms/ImageUrlAtoms";
+import { isRotatedAtom } from "../atoms/transform/RotationAtoms";
 
 export function useStageImage(): {
   imageUrl: string;
   imageWidth: number;
   imageHeight: number;
 } {
   const imageUrl = useAtomValue(imageUrlAtom);
+  const rotated = useAtomValue(isRotatedAtom);
   const { width: imageWidth, height: imageHeight } = useAtomValue(imageAtom) ?? { width: 0, height: 0 };
 
   return {
     imageUrl,
-    imageWidth,
-    imageHeight,
+    imageWidth: rotated ? imageHeight : imageWidth,
+    imageHeight: rotated ? imageWidth : imageHeight,
   };
 }

src/components/library/image-editor/stage/UseStageViewport.ts

@@ -4,20 +4,24 @@ import { stageOptionsAtom } from "../atoms/StageOptionsAtoms";
 import { rotationAtom } from "../atoms/transform/RotationAtoms";
 import { scaleAtom } from "../atoms/transform/ScaleAtoms";
 import { lockAtom } from "../atoms/viewport/LockAtoms";
-import { zoomAtom, zoomControlAtom } from "../atoms/viewport/ZoomAtoms";
+import { maxZoomAtom, minZoomAtom, zoomAtom, zoomControlAtom } from "../atoms/viewport/ZoomAtoms";
 
 export function useStageViewport(): {
   stageOptions: Partial<IApplicationOptions>;
   lock: boolean;
   scale: IPointData;
   rotation: number;
   zoom: number;
+  minZoom: number;
+  maxZoom: number;
   setZoom: (value: number) => void;
 } {
   const stageOptions = useAtomValue(stageOptionsAtom);
   const lock = useAtomValue(lockAtom);
   const scale = useAtomValue(scaleAtom);
   const zoom = useAtomValue(zoomAtom);
+  const minZoom = useAtomValue(minZoomAtom);
+  const maxZoom = useAtomValue(maxZoomAtom);
   const zoomControl = useSetAtom(zoomControlAtom);
   const rotation = useAtomValue(rotationAtom);
 
@@ -31,6 +35,8 @@ export function useStageViewport(): {
     scale,
     rotation,
     zoom,
+    minZoom: minZoom,
+    maxZoom: maxZoom,
     setZoom,
   };
 }