From b2ff593dcd5ee00684707c0382f7ecf6eda4c376 Mon Sep 17 00:00:00 2001
From: Mohammad Khatib <mkhatib727@gmail.com>
Date: Tue, 13 Dec 2022 16:58:38 -0800
Subject: [PATCH] [BulkEditPhotos] Add preview size controls (#57)

---
 src/BulkEditPhotos/BulkEditPhotos.tsx | 45 ++++++++++++++++++++++-----
 src/images/ImageCanvasEditor.tsx      | 10 ++++--
 src/images/PhotoCropper.tsx           | 10 ++++--
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/src/BulkEditPhotos/BulkEditPhotos.tsx b/src/BulkEditPhotos/BulkEditPhotos.tsx
index 1045f67..cdd452e 100644
--- a/src/BulkEditPhotos/BulkEditPhotos.tsx
+++ b/src/BulkEditPhotos/BulkEditPhotos.tsx
@@ -1,3 +1,4 @@
+import { PhotoIcon } from '@heroicons/react/24/solid';
 import JSZip from 'jszip';
 import { doc } from 'prettier';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -39,6 +40,7 @@ const BulkEditPhotos = (): JSX.Element => {
   const [opacity, setOpacity] = useState(100);
   const [saturation, setSaturation] = useState(100);
   const [sepia, setSepia] = useState(0);
+  const [previewSize, setPreviewSize] = useState(250);
 
   const onCrop = useCallback(() => {
     const croppedCanvases = cropperRefs.current.map((cropper) => {
@@ -130,14 +132,39 @@ const BulkEditPhotos = (): JSX.Element => {
             <div className="flex flex-grow m-3 lg:ml-0">
               {/* Sidebar */}
               <div className="flex flex-col p-3 bg-gray-800 w-96">
-                <div className="h-10 w-48">
-                  <UploadButton
-                    onDrop={onDrop}
-                    accept="image/*"
-                    fullSized={false}
-                  >
-                    <span className="text-base">Add More Images</span>
-                  </UploadButton>
+                <div className="flex w-full">
+                  <div className="h-10 w-48">
+                    <UploadButton
+                      onDrop={onDrop}
+                      accept="image/*"
+                      fullSized={false}
+                    >
+                      <span className="text-base">Add More Images</span>
+                    </UploadButton>
+                  </div>
+                  <div className="flex-grow" />
+                  <div className="flex items-center">
+                    <div>
+                      <button
+                        className="h-5 self-end bg-green-500 text-white px-1 hover:bg-green-700 mr-2"
+                        onClick={() => {
+                          setPreviewSize((previewSize) => previewSize / 1.2);
+                        }}
+                      >
+                        <PhotoIcon className="w-3" />
+                      </button>
+                    </div>{' '}
+                    <div>
+                      <button
+                        className="h-8 self-end bg-green-500 text-white px-1 hover:bg-green-700"
+                        onClick={() => {
+                          setPreviewSize((previewSize) => previewSize * 1.2);
+                        }}
+                      >
+                        <PhotoIcon className="w-5" />
+                      </button>
+                    </div>{' '}
+                  </div>
                 </div>
                 <div className="flex flex-col">
                   {/* Crops */}
@@ -545,6 +572,7 @@ const BulkEditPhotos = (): JSX.Element => {
                         image={image}
                         ref={(ref) => registerPhotoCropperRef(ref, index)}
                         onCrop={onCrop}
+                        previewSize={previewSize}
                       />
                     </div>
                   );
@@ -580,6 +608,7 @@ const BulkEditPhotos = (): JSX.Element => {
                           sepia={sepia}
                           opacity={opacity}
                           blur={blur}
+                          previewSize={previewSize}
                         />
                       )}
                     </div>
diff --git a/src/images/ImageCanvasEditor.tsx b/src/images/ImageCanvasEditor.tsx
index af86c4c..8d2fb8c 100644
--- a/src/images/ImageCanvasEditor.tsx
+++ b/src/images/ImageCanvasEditor.tsx
@@ -23,6 +23,7 @@ interface ImageCanvasEditorProps {
   sepia?: number;
   opacity?: number;
   blur?: number;
+  previewSize?: number;
 }
 
 export interface CanvasEditorRef {
@@ -51,6 +52,7 @@ export const ImageCanvasEditor = forwardRef<
     sepia = 0,
     opacity = 100,
     blur = 0,
+    previewSize = 100,
   },
   ref
 ): JSX.Element {
@@ -102,10 +104,14 @@ export const ImageCanvasEditor = forwardRef<
         {srcCanvas ? (
           <canvas
             ref={canvasRef}
-            className="h-40 inline-block pointer-events-none"
+            style={{ height: previewSize }}
+            className="inline-block pointer-events-none"
           />
         ) : (
-          <div className="h-40 w-32 flex justify-center items-center">
+          <div
+            style={{ height: previewSize }}
+            className="w-32 flex justify-center items-center"
+          >
             <div className="w-9 transform scale-75">
               <GridLoader
                 color={'#BFDBFE'}
diff --git a/src/images/PhotoCropper.tsx b/src/images/PhotoCropper.tsx
index 2e28764..a71dc70 100644
--- a/src/images/PhotoCropper.tsx
+++ b/src/images/PhotoCropper.tsx
@@ -15,6 +15,7 @@ interface Props {
   aspect?: number;
   image: ImageData;
   onCrop?: () => void;
+  previewSize?: number;
 }
 
 function centerAspectCrop(
@@ -43,7 +44,7 @@ export interface PhotoCropperRef {
 }
 
 const PhotoCropper = forwardRef<PhotoCropperRef, Props>(function (
-  { image, onCrop, aspect },
+  { image, onCrop, aspect, previewSize = 250 },
   ref
 ): JSX.Element {
   const [crop, setCrop] = useState<Crop>();
@@ -154,8 +155,11 @@ const PhotoCropper = forwardRef<PhotoCropperRef, Props>(function (
           ref={imgRef}
           alt="Crop me"
           src={image.url}
-          style={{ transform: `scale(${scale}) rotate(${rotate}deg)` }}
-          className="h-40 block pointer-events-none"
+          style={{
+            transform: `scale(${scale}) rotate(${rotate}deg)`,
+            height: previewSize,
+          }}
+          className="block pointer-events-none"
         />
       </ReactCrop>
       {/* Toolbar */}