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.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using SwashbucklerDiary.Rcl.Essentials;
 using SwashbucklerDiary.Rcl.Services;
 using SwashbucklerDiary.Shared;
 
@@ -16,13 +17,6 @@ public partial class PreviewImageDialog : DialogComponentBase
         [Inject]
         private ZoomJSModule Module { get; set; } = default!;
 
-        [Parameter]
-        public override bool Visible
-        {
-            get => base.Visible;
-            set => SetVisible(value);
-        }
-
         [Parameter]
         public string? Src { get; set; }
 
@@ -35,19 +29,10 @@ protected async Task BeforeShowContent()
             }
         }
 
-        private async void SetVisible(bool value)
+        protected override async Task InternalVisibleChanged(bool value)
         {
-            if (base.Visible == value)
-            {
-                return;
-            }
-
-            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}");
-            }
+            await base.InternalVisibleChanged(value);
+            await Module.Reset($"#{id}");
         }
 
         private async Task SaveToLocal()

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

@@ -96,7 +96,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 +130,4 @@
     </script>
 </body>
 
-</html>
+</html>