Feat/桌面模式下图片预览支持滚轮缩放与鼠标拖放

src/SwashbucklerDiary.Maui/wwwroot/index.html

@@ -40,7 +40,7 @@
     <script src="_content/Masa.Blazor/js/masa-blazor.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/vditor/3.10.6/dist/index.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/swiper/7.4.1/swiper-bundle.min.js"></script>
-    <script src="_content/SwashbucklerDiary.Rcl/npm/zoom/zoom.min.js"></script>
+    <script src="_content/SwashbucklerDiary.Rcl/npm/panzoom/9.4.3/panzoom.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/html2canvas/1.4.1/dist/html2canvas.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/wc-waterfall/0.1.3/dist/index.iife.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/bettersearch/1.0.1/dist/index.umd.js"></script>

src/SwashbucklerDiary.Rcl/Components/DialogComponents/PreviewImageDialog/PreviewImageDialog.razor

@@ -18,7 +18,12 @@
             </MButton>
 
             <MSpacer></MSpacer>
-
+            <MButton Icon="true"
+                     OnClick="HandleReset">
+                <MIcon>
+                    mdi-restore
+                </MIcon>
+            </MButton>
             <MButton Icon="true"
                      OnClick="SaveToLocal">
                 <MIcon>
@@ -38,6 +43,5 @@
                 <img src="@Src" />
             </div>
         </div>
-
     </MCard>
 </MDialogExtension>

src/SwashbucklerDiary.Rcl/Components/DialogComponents/PreviewImageDialog/PreviewImageDialog.razor.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using SwashbucklerDiary.Rcl.Essentials;
 using SwashbucklerDiary.Rcl.Services;
 using SwashbucklerDiary.Shared;
 
@@ -16,12 +17,8 @@ public partial class PreviewImageDialog : DialogComponentBase
         [Inject]
         private ZoomJSModule Module { get; set; } = default!;
 
-        [Parameter]
-        public override bool Visible
-        {
-            get => base.Visible;
-            set => SetVisible(value);
-        }
+        [Inject]
+        private IPlatformIntegration PlatformIntegration { get; set; } = default!;
 
         [Parameter]
         public string? Src { get; set; }
@@ -35,19 +32,15 @@ protected async Task BeforeShowContent()
             }
         }
 
-        private async void SetVisible(bool value)
+        protected override async Task InternalVisibleChanged(bool value)
         {
-            if (base.Visible == value)
-            {
-                return;
-            }
+            await base.InternalVisibleChanged(value);
+            await Module.Reset($"#{id}");
+        }
 
-            base.Visible = value;
-            if (!value && Module is not null && isInitialized)
-            {
-                // Cannot be placed in BeforeShowContent, Because you will see the Reset animation
-                await Module.Reset($"#{id}");
-            }
+        private async Task HandleReset()
+        {
+            await Module.Reset($"#{id}");
         }
 
         private async Task SaveToLocal()

src/SwashbucklerDiary.Rcl/Components/DialogComponents/PreviewImageDialog/ZoomJSModule.cs

@@ -1,4 +1,5 @@
-using Microsoft.JSInterop;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 
 namespace SwashbucklerDiary.Rcl.Components
 {

src/SwashbucklerDiary.Rcl/wwwroot/css/app.css

@@ -509,6 +509,7 @@ html {
         object-fit: contain;
     }
 
+
 wc-waterfall > * {
     transition: all .2s;
 }

src/SwashbucklerDiary.Rcl/wwwroot/js/zoom-helper.js

@@ -4,11 +4,19 @@ export function initZoom(selector) {
         return;
     }
 
-    el.zm = new Zoom(el, {
-        rotate: false,
+    el.panzoom = panzoom(el, {
+        maxZoom: 6,
         minZoom: 1,
-        maxZoom: 4,
-        pan: false
+        smoothScroll: false,
+        zoomDoubleClickSpeed: 1,
+        onTouch: function (e) {
+            //This is necessary, otherwise the custom double - click event cannot be triggered on the touchscreen device
+            return false; // tells the library to not preventDefault.
+        },
+        onDoubleClick: function (e) {
+            reset(selector);
+            return true; // tells the library to not preventDefault, and not stop propagation
+        }
     });
 }
 
@@ -18,5 +26,7 @@ export function reset(selector) {
         return;
     }
 
-    el.zm.reset();
-}
+    el.panzoom.zoomTo(0, 0, 1);
+    el.panzoom.moveTo(0, 0);
+    el.panzoom.zoomAbs(0, 0, 1);
+}

src/SwashbucklerDiary.WebAssembly/wwwroot/index.html

@@ -55,7 +55,8 @@
 
     <link href="_content/Masa.Blazor/css/masa-blazor.min.css" rel="stylesheet">
 
-    <link href="_content/SwashbucklerDiary.Rcl/css/materialdesign/v7.2.96/css/materialdesignicons.min.css" rel="stylesheet">
+    <link href="_content/SwashbucklerDiary.Rcl/css/materialdesign/v7.2.96/css/materialdesignicons.min.css"
+        rel="stylesheet">
     <link href="_content/SwashbucklerDiary.Rcl/css/material/icons.css" rel="stylesheet">
     <link href="_content/SwashbucklerDiary.Rcl/npm/vditor/3.10.6/dist/index.css" rel="stylesheet" />
     <link href="_content/SwashbucklerDiary.Rcl/npm/swiper/7.4.1/swiper-bundle.min.css" rel="stylesheet" />
@@ -96,7 +97,7 @@
     <script src="_content/Masa.Blazor/js/masa-blazor.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/vditor/3.10.6/dist/index.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/swiper/7.4.1/swiper-bundle.min.js"></script>
-    <script src="_content/SwashbucklerDiary.Rcl/npm/zoom/zoom.min.js"></script>
+    <script src="_content/SwashbucklerDiary.Rcl/npm/panzoom/9.4.3/panzoom.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/html2canvas/1.4.1/dist/html2canvas.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/wc-waterfall/0.1.3/dist/index.iife.min.js"></script>
     <script src="_content/SwashbucklerDiary.Rcl/npm/bettersearch/1.0.1/dist/index.umd.js"></script>
@@ -130,4 +131,4 @@
     </script>
 </body>
 
-</html>
+</html>