From 3017a35a26fae869d60387db1caf27b2eef461bf Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 23 Nov 2024 06:06:55 +0530
Subject: [PATCH] Inline

---
 .../PhotoViewer/ImageEditorOverlay/index.tsx  | 41 ++++++++++---------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
index 282fe1b1b6..4da8064a13 100644
--- a/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay/index.tsx
@@ -62,7 +62,7 @@ interface IProps {
     closePhotoViewer: () => void;
 }
 
-const FILTER_DEFAULT_VALUES = {
+const filterDefaultValues = {
     brightness: 100,
     contrast: 100,
     blur: 0,
@@ -70,10 +70,7 @@ const FILTER_DEFAULT_VALUES = {
     invert: false,
 };
 
-// CORNER_THRESHOLD defines the threshold near the corners of the crop box in which dragging is assumed as not the intention
-const CORNER_THRESHOLD = 20;
-
-export const ImageEditorOverlayContext = createContext(
+const ImageEditorOverlayContext = createContext(
     {} as {
         canvasRef: MutableRefObject<HTMLCanvasElement>;
         originalSizeCanvasRef: MutableRefObject<HTMLCanvasElement>;
@@ -86,7 +83,7 @@ export const ImageEditorOverlayContext = createContext(
 
 type OperationTab = "crop" | "transform" | "colours";
 
-export interface CropBoxProps {
+interface CropBoxProps {
     x: number;
     y: number;
     width: number;
@@ -111,14 +108,14 @@ const ImageEditorOverlay = (props: IProps) => {
     const [currentTab, setCurrentTab] = useState<OperationTab>("transform");
 
     const [brightness, setBrightness] = useState(
-        FILTER_DEFAULT_VALUES.brightness,
+        filterDefaultValues.brightness,
     );
-    const [contrast, setContrast] = useState(FILTER_DEFAULT_VALUES.contrast);
-    const [blur, setBlur] = useState(FILTER_DEFAULT_VALUES.blur);
+    const [contrast, setContrast] = useState(filterDefaultValues.contrast);
+    const [blur, setBlur] = useState(filterDefaultValues.blur);
     const [saturation, setSaturation] = useState(
-        FILTER_DEFAULT_VALUES.saturation,
+        filterDefaultValues.saturation,
     );
-    const [invert, setInvert] = useState(FILTER_DEFAULT_VALUES.invert);
+    const [invert, setInvert] = useState(filterDefaultValues.invert);
 
     const [transformationPerformed, setTransformationPerformed] =
         useState(false);
@@ -174,13 +171,17 @@ const ImageEditorOverlay = (props: IProps) => {
         const offsetX = e.pageX - rect.left - rect.width / 2;
         const offsetY = e.pageY - rect.top - rect.height / 2;
 
+        // The threshold near the corners of the crop box in which dragging is
+        // assumed as not the intention.
+        const cornerThreshold = 20;
+
         // check if the cursor is near the corners of the box
         const isNearLeftOrRightEdge =
-            e.pageX < rect.left + CORNER_THRESHOLD ||
-            e.pageX > rect.right - CORNER_THRESHOLD;
+            e.pageX < rect.left + cornerThreshold ||
+            e.pageX > rect.right - cornerThreshold;
         const isNearTopOrBottomEdge =
-            e.pageY < rect.top + CORNER_THRESHOLD ||
-            e.pageY > rect.bottom - CORNER_THRESHOLD;
+            e.pageY < rect.top + cornerThreshold ||
+            e.pageY > rect.bottom - cornerThreshold;
 
         if (isNearLeftOrRightEdge && isNearTopOrBottomEdge) {
             // cursor is near a corner, do not initiate dragging
@@ -278,11 +279,11 @@ const ImageEditorOverlay = (props: IProps) => {
         try {
             applyFilters([canvasRef.current, originalSizeCanvasRef.current]);
             setColoursAdjusted(
-                brightness !== FILTER_DEFAULT_VALUES.brightness ||
-                    contrast !== FILTER_DEFAULT_VALUES.contrast ||
-                    blur !== FILTER_DEFAULT_VALUES.blur ||
-                    saturation !== FILTER_DEFAULT_VALUES.saturation ||
-                    invert !== FILTER_DEFAULT_VALUES.invert,
+                brightness !== filterDefaultValues.brightness ||
+                    contrast !== filterDefaultValues.contrast ||
+                    blur !== filterDefaultValues.blur ||
+                    saturation !== filterDefaultValues.saturation ||
+                    invert !== filterDefaultValues.invert,
             );
         } catch (e) {
             log.error("Error applying filters", e);