fix: fix the overflow image rotation

Greenstand · Aug 15, 2021 · d2de60e · d2de60e
1 parent 624f386
commit d2de60e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/components/ImageScroller.js b/src/components/ImageScroller.js
@@ -30,7 +30,7 @@ const useStyle = makeStyles((theme) => ({
     textAlign: 'center',
   },
   imageCard: {
-    height: '100%',
+    height: '84%',
     margin: theme.spacing(1.5),
     width: `${IMAGE_CARD_SIZE - theme.spacing(3)}px`,
     cursor: 'pointer',
@@ -88,7 +88,16 @@ export default function ImageScroller(props) {
   const classes = useStyle();
   const [maxImages, setMaxImages] = useState(MAX_IMAGES_INCREMENT);
   const imageScrollerRef = useRef(null);
-  let [rotation, setRotation] = useState(imageRotation);
+  let objRotation = {};
+  if (selectedImage) {
+    const selectedIndex = images.indexOf(selectedImage);
+    objRotation[selectedIndex] = imageRotation;
+  } else {
+    images.map((_, idx) => {
+      objRotation[idx] = imageRotation;
+    });
+  }
+  let [rotations, setRotations] = useState(objRotation);
 
   function loadMoreImages() {
     setMaxImages(maxImages + MAX_IMAGES_INCREMENT);
@@ -113,12 +122,13 @@ export default function ImageScroller(props) {
     });
   }
 
-  function handleRotationChange() {
-    let newRotation = rotation + 90;
+  function handleRotationChange(idx) {
+    let newRotation =
+      rotations[idx] >= 0 ? rotations[idx] + 90 : imageRotation + 90;
     if (newRotation === 360) {
       newRotation = 0;
     }
-    setRotation(newRotation);
+    setRotations({ ...rotations, [idx]: newRotation });
     onSelectChange('imageRotation', newRotation);
   }
 
@@ -147,14 +157,14 @@ export default function ImageScroller(props) {
                 height={192}
                 className={classes.image}
                 fixed
-                rotation={rotation}
+                rotation={rotations[idx] ? rotations[idx] : imageRotation}
                 onClick={() => onSelectChange('imageUrl', img)}
               />
               {img === selectedImage ? (
                 <Fab
                   id="click-rotate"
                   className={classes.clickRotate}
-                  onClick={handleRotationChange}
+                  onClick={() => handleRotationChange(idx)}
                 >
                   <Rotate90DegreesCcwIcon
                     style={{ transform: `rotateY(180deg)` }}

diff --git a/src/components/PlanterDetail.js b/src/components/PlanterDetail.js
@@ -21,9 +21,6 @@ import OptimizedImage from './OptimizedImage';
 import LinkToWebmap from './common/LinkToWebmap';
 
 const useStyle = makeStyles((theme) => ({
-  root: {
-    width: 441,
-  },
   box: {
     padding: theme.spacing(4),
   },
@@ -108,7 +105,14 @@ const PlanterDetail = (props) => {
   return (
     <React.Fragment>
       <Drawer anchor="right" open={props.open} onClose={props.onClose}>
-        <Grid className={classes.root}>
+        <Grid
+          style={{
+            width:
+              planter.imageRotation === 0 || planter.imageRotation === 180
+                ? 441
+                : 378,
+          }}
+        >
           <Grid container direction="column">
             <Grid item>
               <Grid container justify="space-between" alignItems="center">