change drag move image scale (#8075)

frontend/src/components/file-content-view/image.js

@@ -75,19 +75,27 @@ class FileContent extends React.Component {
     if (transforms.length > 0) {
       style.transform = transforms.join(' ');
     }
-    if (scale > 1 && offset && typeof offset === 'object') {
+    if (offset && typeof offset === 'object') {
-      if (offset.x !== undefined) style.left = offset.x;
+      if (offset.x !== undefined) {
-      if (offset.y !== undefined) style.top = offset.y;
+        style.left = offset.x;
+      }
+      if (offset.y !== undefined) {
+        style.top = offset.y;
+      }
       style.position = 'relative';
     }
 
     return (
       <div className="file-view-content flex-1 image-file-view d-flex align-items-center justify-content-center">
         {previousImage && (
-          <a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}><span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span></a>
+          <a href={previousImageUrl} id="img-prev" title={gettext('you can also press ← ')}>
+            <span className="sf3-font sf3-font-down rotate-90 d-inline-block"></span>
+          </a>
         )}
         {nextImage && (
-          <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}><span className="sf3-font sf3-font-down rotate-270 d-inline-block"></span></a>
+          <a href={nextImageUrl} id="img-next" title={gettext('you can also press →')}>
+            <span className="sf3-font sf3-font-down rotate-270 d-inline-block"></span>
+          </a>
         )}
         <img src={thumbnailURL || rawPath} alt={fileName} id="image-view" onError={this.handleLoadFailure} style={style} />
       </div>

frontend/src/components/file-view/file-toolbar.js

@@ -139,7 +139,10 @@ class FileToolbar extends React.Component {
         <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
           {(fileType == 'Image' && !err) && (
             <>
-              <ImageZoomer setImageScale={this.props.setImageScale} />
+              <ImageZoomer
+                setImageScale={this.props.setImageScale}
+                setDefaultPageFitScale={this.props.setDefaultPageFitScale}
+              />
               {['psd', 'heic'].indexOf(fileExt) == -1 && (
                 <IconButton
                   id="rotate-image"

frontend/src/components/file-view/file-view.js

@@ -158,6 +158,7 @@ class FileView extends React.Component {
                   rotateImage={this.props.rotateImage}
                   lineWrapping={this.props.lineWrapping}
                   updateLineWrapping={this.props.updateLineWrapping}
+                  setDefaultPageFitScale={this.props.setDefaultPageFitScale}
                 />
               }
             </div>

frontend/src/components/file-view/image-zoomer.js

@@ -13,7 +13,7 @@ const SCALE_OPTIONS_2 = [
 ];
 const DEFAULT_SCALE = SCALE_OPTIONS_2[0];
 
-const ImageZoomer = ({ setImageScale }) => {
+const ImageZoomer = ({ setImageScale, setDefaultPageFitScale }) => {
 
   const [curScale, setScale] = useState(1);
   const [curScaleText, setScaleText] = useState(DEFAULT_SCALE.text); // for the text shown in the input
@@ -59,7 +59,7 @@ const ImageZoomer = ({ setImageScale }) => {
     if (!imageElement || (imageElement.clientWidth === 2 && imageElement.clientHeight === 2)) {
       setTimeout(() => {
         scaleImageToPageFit();
-      }, 100);
+      }, 1);
       return;
     }
     const borderWidth = 1;
@@ -77,7 +77,8 @@ const ImageZoomer = ({ setImageScale }) => {
     const scale = Math.min(hScale, vScale);
     setScale(scale);
     scaleImage(scale);
-  }, [setScale, scaleImage]);
+    setDefaultPageFitScale(scale);
+  }, [setScale, scaleImage, setDefaultPageFitScale]);
 
   const onMenuItemClick = useCallback((value) => {
     setSelectedScale(value);

frontend/src/file-view.js

@@ -29,6 +29,7 @@ class InnerFileView extends React.Component {
       dragOrigin: null,
     };
     this.imageContainerRef = React.createRef();
+    this.defaultPageFitScale = 1;
   }
 
   setImageScale = (scale) => {
@@ -38,6 +39,10 @@ class InnerFileView extends React.Component {
     }));
   };
 
+  setDefaultPageFitScale = (scale) => {
+    this.defaultPageFitScale = scale;
+  };
+
   rotateImage = () => {
     this.setState({
       imageAngle: (this.state.imageAngle - 90) % 360 // counter-clockwise
@@ -53,7 +58,7 @@ class InnerFileView extends React.Component {
   };
 
   handleImageMouseDown = (e) => {
-    if (this.state.imageScale <= 1) return;
+    if (this.state.imageScale < this.defaultPageFitScale) return;
     e.preventDefault();
     this.setState({
       isDragging: true,
@@ -97,7 +102,7 @@ class InnerFileView extends React.Component {
           <div
             ref={this.imageContainerRef}
             className="d-flex w-100 h-100"
-            style={{ cursor: imageScale > 1 ? 'move' : 'default' }}
+            style={{ cursor: imageScale >= this.defaultPageFitScale ? 'move' : 'default' }}
             onMouseDown={this.handleImageMouseDown}
             onMouseMove={this.handleImageMouseMove}
             onMouseUp={this.handleImageMouseUp}
@@ -131,6 +136,7 @@ class InnerFileView extends React.Component {
       <FileView
         content={content}
         setImageScale={this.setImageScale}
+        setDefaultPageFitScale={this.setDefaultPageFitScale}
         rotateImage={this.rotateImage}
       />
     );