feat(client/image): integrate a better image viewer

apps/client/package.json

@@ -62,6 +62,7 @@
     "preact": "10.28.1",
     "react-i18next": "16.5.1",
     "react-window": "2.2.3",
+    "react-zoom-pan-pinch": "3.7.0",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",

apps/client/src/widgets/type_widgets/Image.tsx

@@ -1,29 +1,20 @@
+import "./Image.css";
+
 import { useEffect, useRef, useState } from "preact/hooks";
+import { TransformComponent,TransformWrapper } from "react-zoom-pan-pinch";
+
+import image_context_menu from "../../menus/image_context_menu";
+import { copyImageReferenceToClipboard } from "../../services/image";
 import { createImageSrcUrl } from "../../services/utils";
 import { useTriliumEvent, useUniqueName } from "../react/hooks";
-import "./Image.css";
-import { TypeWidgetProps } from "./type_widget";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-import image_context_menu from "../../menus/image_context_menu";
 import { refToJQuerySelector } from "../react/react_utils";
-import { copyImageReferenceToClipboard } from "../../services/image";
+import { TypeWidgetProps } from "./type_widget";
 
 export default function Image({ note, ntxId }: TypeWidgetProps) {
     const uniqueId = useUniqueName("image");
     const containerRef = useRef<HTMLDivElement>(null);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
 
-    // Set up pan & zoom
-    useEffect(() => {
-        const zoomInstance = WheelZoom.create(`#${uniqueId}`, {
-            maxScale: 50,
-            speed: 1.3,
-            zoomOnClick: false
-        });
-
-        return () => zoomInstance.destroy();
-    }, [ note ]);
-
     // Set up context menu
     useEffect(() => image_context_menu.setupContextMenu(refToJQuerySelector(containerRef)), []);
 
@@ -42,11 +33,23 @@ export default function Image({ note, ntxId }: TypeWidgetProps) {
 
     return (
         <div ref={containerRef} className="note-detail-image-wrapper">
-            <img
-                id={uniqueId}
-                className="note-detail-image-view"
-                src={createImageSrcUrl(note)}
-            />
+            <TransformWrapper
+                initialScale={1}
+                centerOnInit
+            >
+                <TransformComponent
+                    wrapperStyle={{
+                        width: "100%",
+                        height: "100%"
+                    }}
+                >
+                    <img
+                        id={uniqueId}
+                        className="note-detail-image-view"
+                        src={createImageSrcUrl(note)}
+                    />
+                </TransformComponent>
+            </TransformWrapper>
         </div>
-    )
+    );
 }

pnpm-lock.yaml

@@ -295,6 +295,9 @@ importers:
       react-window:
         specifier: 2.2.3
         version: 2.2.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react-zoom-pan-pinch:
+        specifier: 3.7.0
+        version: 3.7.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       reveal.js:
         specifier: 5.2.1
         version: 5.2.1
@@ -12144,6 +12147,13 @@ packages:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
 
+  react-zoom-pan-pinch@3.7.0:
+    resolution: {integrity: sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA==}
+    engines: {node: '>=8', npm: '>=5'}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   react@16.14.0:
     resolution: {integrity: sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==}
     engines: {node: '>=0.10.0'}
@@ -15361,8 +15371,6 @@ snapshots:
       '@ckeditor/ckeditor5-core': 47.3.0
       '@ckeditor/ckeditor5-utils': 47.3.0
       ckeditor5: 47.3.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-code-block@47.3.0(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -15428,8 +15436,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 47.3.0
       '@ckeditor/ckeditor5-watchdog': 47.3.0
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-dev-build-tools@54.2.3(@swc/helpers@0.5.17)(tslib@2.8.1)(typescript@5.9.3)':
     dependencies:
@@ -28467,6 +28473,11 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
+  react-zoom-pan-pinch@3.7.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   react@16.14.0:
     dependencies:
       loose-envify: 1.4.0