Add image preview zoom functionality

frontend/app/view/preview/preview.scss

@@ -29,18 +29,40 @@
         }
     }
 
-    &.view-preview-image,
     &.view-preview-video,
     &.view-preview-audio {
         video,
-        audio,
-        img {
+        audio {
             width: 100%;
             height: 100%;
             padding: 10px;
             object-fit: contain;
         }
     }
+
+    &.view-preview-image {
+        position: relative;
+        .tools {
+            position: absolute;
+            display: flex;
+            flex-direction: row;
+            z-index: 2;
+            top: 0;
+            right: 0;
+            padding: 5px;
+            gap: 4px;
+            button {
+                padding: 4px 5px;
+            }
+        }
+        img {
+            z-index: 1;
+        }
+        .react-transform-wrapper {
+            height: 100%;
+            width: 100%;
+        }
+    }
     &.view-preview-pdf {
         padding: 5px;
     }

frontend/app/view/preview/preview.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { BlockNodeModel } from "@/app/block/blocktypes";
+import { Button } from "@/app/element/button";
 import { CenteredDiv } from "@/app/element/quickelems";
 import { TypeAheadModal } from "@/app/modals/typeaheadmodal";
 import { ContextMenuModel } from "@/app/store/contextmenu";
@@ -41,6 +42,7 @@ import { Atom, atom, Getter, PrimitiveAtom, useAtomValue, useSetAtom, WritableAt
 import { loadable } from "jotai/utils";
 import type * as MonacoTypes from "monaco-editor/esm/vs/editor/editor.api";
 import { createRef, memo, useCallback, useEffect, useMemo, useState } from "react";
+import { TransformComponent, TransformWrapper, useControls } from "react-zoom-pan-pinch";
 import { CSVView } from "./csvview";
 import { DirectoryPreview } from "./directorypreview";
 import "./preview.scss";
@@ -852,6 +854,41 @@ function MarkdownPreview({ model }: SpecializedViewProps) {
     );
 }
 
+function ImageZooomControls() {
+    const { zoomIn, zoomOut, resetTransform } = useControls();
+
+    return (
+        <div className="tools">
+            <Button onClick={() => zoomIn()} title="Zoom In">
+                <i className="fa-sharp fa-plus" />
+            </Button>
+            <Button onClick={() => zoomOut()} title="Zoom Out">
+                <i className="fa-sharp fa-minus" />
+            </Button>
+            <Button onClick={() => resetTransform()} title="Reset Zoom">
+                <i className="fa-sharp fa-rotate-left" />
+            </Button>
+        </div>
+    );
+}
+
+function StreamingImagePreview({ url }: { url: string }) {
+    return (
+        <div className="view-preview view-preview-image">
+            <TransformWrapper initialScale={1} centerOnInit pinch={{ step: 10 }}>
+                {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
+                    <>
+                        <ImageZooomControls />
+                        <TransformComponent>
+                            <img src={url} />
+                        </TransformComponent>
+                    </>
+                )}
+            </TransformWrapper>
+        </div>
+    );
+}
+
 function StreamingPreview({ model }: SpecializedViewProps) {
     const conn = useAtomValue(model.connection);
     const fileInfo = useAtomValue(model.statFile);
@@ -888,11 +925,7 @@ function StreamingPreview({ model }: SpecializedViewProps) {
         );
     }
     if (fileInfo.mimetype.startsWith("image/")) {
-        return (
-            <div className="view-preview view-preview-image">
-                <img src={streamingUrl} />
-            </div>
-        );
+        return <StreamingImagePreview url={streamingUrl} />;
     }
     return <CenteredDiv>Preview Not Supported</CenteredDiv>;
 }

package.json

@@ -127,6 +127,7 @@
         "react-frame-component": "^5.2.7",
         "react-gauge-chart": "^0.5.1",
         "react-markdown": "^9.0.3",
+        "react-zoom-pan-pinch": "^3.6.1",
         "rehype-highlight": "^7.0.1",
         "rehype-raw": "^7.0.0",
         "rehype-sanitize": "^6.0.0",

yarn.lock

@@ -17778,6 +17778,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-zoom-pan-pinch@npm:^3.6.1":
+  version: 3.6.1
+  resolution: "react-zoom-pan-pinch@npm:3.6.1"
+  peerDependencies:
+    react: "*"
+    react-dom: "*"
+  checksum: 10c0/ec32df7ba9c1b8113fa87e5759c6b697f0f985df1be31b26720c3fdff67dc7f31ac13eabad201d7d5a12f2a4bed637bf7090e8a04f0237618bc751cf37c784d9
+  languageName: node
+  linkType: hard
+
 "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.0.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
@@ -21704,6 +21714,7 @@ __metadata:
     react-frame-component: "npm:^5.2.7"
     react-gauge-chart: "npm:^0.5.1"
     react-markdown: "npm:^9.0.3"
+    react-zoom-pan-pinch: "npm:^3.6.1"
     rehype-highlight: "npm:^7.0.1"
     rehype-raw: "npm:^7.0.0"
     rehype-sanitize: "npm:^6.0.0"