support changing the image view position by dragging after zooming in (#7964)

Co-authored-by: zhouwenxuan <aries@Mac.local>

frontend/src/file-view.js

@@ -22,14 +22,20 @@ class InnerFileView extends React.Component {
     super();
     this.state = {
       imageScale: 1,
-      imageAngle: 0
+      imageAngle: 0,
+      imageOffset: { x: 0, y: 0 },
+      isDragging: false,
+      dragStart: null,
+      dragOrigin: null,
     };
+    this.imageContainerRef = React.createRef();
   }
 
   setImageScale = (scale) => {
-    this.setState({
-      imageScale: scale
-    });
+    this.setState(prevState => ({
+      imageScale: scale,
+      imageOffset: scale === 1 ? { x: 0, y: 0 } : prevState.imageOffset,
+    }));
   };
 
   rotateImage = () => {
@@ -46,6 +52,36 @@ class InnerFileView extends React.Component {
     });
   };
 
+  handleImageMouseDown = (e) => {
+    if (this.state.imageScale <= 1) return;
+    e.preventDefault();
+    this.setState({
+      isDragging: true,
+      dragStart: { x: e.clientX, y: e.clientY },
+      dragOrigin: { ...this.state.imageOffset }
+    });
+    document.addEventListener('mousedown', this.handleImageMouseDown);
+    document.addEventListener('mouseup', this.handleImageMouseUp);
+  };
+
+  handleImageMouseMove = (e) => {
+    if (!this.state.isDragging) return;
+    const dx = e.clientX - this.state.dragStart.x;
+    const dy = e.clientY - this.state.dragStart.y;
+    this.setState({
+      imageOffset: {
+        x: this.state.dragOrigin.x + dx,
+        y: this.state.dragOrigin.y + dy
+      }
+    });
+  };
+
+  handleImageMouseUp = (e) => {
+    this.setState({ isDragging: false });
+    document.removeEventListener('mousedown', this.handleImageMouseDown);
+    document.removeEventListener('mouseup', this.handleImageMouseUp);
+  };
+
   render() {
     if (err) {
       return (
@@ -53,11 +89,27 @@ class InnerFileView extends React.Component {
       );
     }
 
-    const { imageScale, imageAngle } = this.state;
+    const { imageScale, imageAngle, imageOffset } = this.state;
     let content;
     switch (fileType) {
       case 'Image':
-        content = <Image tip={<FileViewTip />} scale={imageScale} angle={imageAngle} />;
+        content = (
+          <div
+            ref={this.imageContainerRef}
+            className="d-flex w-100 h-100"
+            style={{ cursor: imageScale > 1 ? 'move' : 'default' }}
+            onMouseDown={this.handleImageMouseDown}
+            onMouseMove={this.handleImageMouseMove}
+            onMouseUp={this.handleImageMouseUp}
+          >
+            <Image
+              tip={<FileViewTip />}
+              scale={imageScale}
+              angle={imageAngle}
+              offset={imageOffset}
+            />
+          </div>
+        );
         break;
       case 'SVG':
         content = <SVG />;