From b9ba2967857e4975a0469ee05bed4f8ecdf79156 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Wed, 29 Jan 2025 10:51:44 -0800
Subject: [PATCH 1/3] Add image preview zoom functionality

---
 frontend/app/view/preview/preview.scss | 28 +++++++++++++++--
 frontend/app/view/preview/preview.tsx  | 43 +++++++++++++++++++++++---
 package.json                           |  1 +
 yarn.lock                              | 11 +++++++
 4 files changed, 75 insertions(+), 8 deletions(-)

diff --git a/frontend/app/view/preview/preview.scss b/frontend/app/view/preview/preview.scss
index d6e8bec129..c19413d769 100644
--- a/frontend/app/view/preview/preview.scss
+++ b/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;
     }
diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
index f51c707aaf..19ad8dc45c 100644
--- a/frontend/app/view/preview/preview.tsx
+++ b/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-xmark-large" />
+            </Button>
+        </div>
+    );
+}
+
+function SreamingImagePreview({ url }: { url: string }) {
+    return (
+        <div className="view-preview view-preview-image">
+            <TransformWrapper initialScale={1} centerOnInit>
+                {({ 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 <SreamingImagePreview url={streamingUrl} />;
     }
     return <CenteredDiv>Preview Not Supported</CenteredDiv>;
 }
diff --git a/package.json b/package.json
index c1955b40b5..1383fc0249 100644
--- a/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index c6caf1d683..bf3a869af3 100644
--- a/yarn.lock
+++ b/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"

From 99ec85b7d7c01b181c62becfcb8f396538bc592e Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Wed, 29 Jan 2025 10:53:55 -0800
Subject: [PATCH 2/3] typo

---
 frontend/app/view/preview/preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
index 19ad8dc45c..2bfffbcb1d 100644
--- a/frontend/app/view/preview/preview.tsx
+++ b/frontend/app/view/preview/preview.tsx
@@ -872,7 +872,7 @@ function ImageZooomControls() {
     );
 }
 
-function SreamingImagePreview({ url }: { url: string }) {
+function StreamingImagePreview({ url }: { url: string }) {
     return (
         <div className="view-preview view-preview-image">
             <TransformWrapper initialScale={1} centerOnInit>
@@ -925,7 +925,7 @@ function StreamingPreview({ model }: SpecializedViewProps) {
         );
     }
     if (fileInfo.mimetype.startsWith("image/")) {
-        return <SreamingImagePreview url={streamingUrl} />;
+        return <StreamingImagePreview url={streamingUrl} />;
     }
     return <CenteredDiv>Preview Not Supported</CenteredDiv>;
 }

From 2a130af37258c025a971628a90f2dab33fc37348 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Wed, 29 Jan 2025 11:15:22 -0800
Subject: [PATCH 3/3] update reset button

---
 frontend/app/view/preview/preview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app/view/preview/preview.tsx b/frontend/app/view/preview/preview.tsx
index 2bfffbcb1d..579612f4a9 100644
--- a/frontend/app/view/preview/preview.tsx
+++ b/frontend/app/view/preview/preview.tsx
@@ -866,7 +866,7 @@ function ImageZooomControls() {
                 <i className="fa-sharp fa-minus" />
             </Button>
             <Button onClick={() => resetTransform()} title="Reset Zoom">
-                <i className="fa-sharp fa-xmark-large" />
+                <i className="fa-sharp fa-rotate-left" />
             </Button>
         </div>
     );
@@ -875,7 +875,7 @@ function ImageZooomControls() {
 function StreamingImagePreview({ url }: { url: string }) {
     return (
         <div className="view-preview view-preview-image">
-            <TransformWrapper initialScale={1} centerOnInit>
+            <TransformWrapper initialScale={1} centerOnInit pinch={{ step: 10 }}>
                 {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
                     <>
                         <ImageZooomControls />