Add centering images in panzoom.

Pages/FetchData.razor

@@ -22,11 +22,11 @@
     display:@OverlayVisibility;
     z-index:900;">
     <div style="pointer-events:all;">
-        <div style="position:fixed; top:0px; left:0px;opacity:1; background-color:red; align-items:center; height:@(Application.Current.MainPage.Height - 80)px; text-align: center;">
+        <div  style="position:fixed; top:0px; left:0px;opacity:1; background-color:red; align-items:center; height:@(Application.Current.MainPage.Height - 80)px; text-align: center;">
 
-            <div style="position: absolute;top: 50%;transform: translateY(-50%);height:@(Application.Current.MainPage.Height - 80)px;width:@(Application.Current.MainPage.Width)px;">
+            <div id="panzoom_block" style="position: absolute;top: 50%;transform: translateY(-50%);height:@(Application.Current.MainPage.Height - 80)px;width:@(Application.Current.MainPage.Width)px;">
             <Panzoom @ref="_panzoom">
-                    <img @ref="@context.ElementReference" src="@ImageContextMenuLink" style="top: 50%;transform: translateY(-50%);max-height:@(Application.Current.MainPage.Height - 80)px;max-width:@(Application.Current.MainPage.Width)px;" />
+                <img id="panzoom" @ref="@context.ElementReference" alt="image" src="@ImageContextMenuLink" style="max-height:@(Application.Current.MainPage.Height - 80)px;max-width:@(Application.Current.MainPage.Width)px; display:block; margin-top:auto; margin-bottom:auto" />
             </Panzoom>
         </div>
         
@@ -97,13 +97,16 @@
                         
                         string link = images.Link;
                         string imageId = $"{images.Path}_{i}";
-                            <img id="@imageId" src="@link" onerror="@(
-                                ()=>{
-                                Task.Delay(1000).GetAwaiter();
-                                JSRuntime.InvokeVoidAsync("SwitchPic",imageId,link);
-                                }
-                                )" 
-                                @onclick=@(()=>OpenOverlay(imageId,link,images.Name)) style="margin-bottom:10px; width:@(Application.Current.MainPage.Width - 50)px; height:contain;" />
+                            <img 
+                                id="@imageId" 
+                                src="@link" 
+                                onerror="@(
+                                    ()=>{
+                                    Task.Delay(1000).GetAwaiter();
+                                    JSRuntime.InvokeVoidAsync("SwitchPic",imageId,link);
+                                    }
+                                )"
+                                @onclick=@(()=>Task.Run(()=>OpenOverlay(imageId,link,images.Name))) style="margin-bottom:10px; width:@(Application.Current.MainPage.Width - 50)px; height:contain;" />
                         }
                         //else
                         //{
@@ -205,14 +208,16 @@
         OverlayVisibility = "none";
     }
 
-    void OpenOverlay(string id, string link, string name)
+    async void OpenOverlay(string id, string link, string name)
     {
-        //JSRuntime.InvokeVoidAsync("ResetZoom");
-        _panzoom.ResetAsync();
+        JSRuntime.InvokeVoidAsync("SetOverlayImage", id);
         ImageContextMenuName = name;
         ImageContextMenuLink = link;
         ImageContextMenuId = id;
         OverlayVisibility = "block";
+        await _panzoom.ResetAsync();
+        await JSRuntime.InvokeVoidAsync("SetPanzoom");
+        JSRuntime.InvokeVoidAsync("PanzoomCenter");
         ShouldRender();
     }
 

wwwroot/index.html

@@ -34,8 +34,24 @@
             pic.src = picLink;
         }
 
-        function ResetZoom() {
-            getElementById('panzoom').reset;
+        var panzoom1;
+
+        function SetPanzoom() {
+            panzoom1 = Panzoom(document.querySelector("#panzoom"));
+        }
+
+        function PanzoomCenter() {
+            panzoom1.pan(0, (document.querySelector("#panzoom_block").scrollHeight - document.querySelector("#panzoom").height) / 2);
+        }
+
+        function CenterImage() {
+            var panzoom1 = Panzoom(document.querySelector("#panzoom"));
+            panzoom1.pan(0, (document.querySelector("#panzoom_block").scrollHeight - document.querySelector("#panzoom").height) / 2);
+        }
+
+        function SetOverlayImage(id) {
+            var image = document.querySelector("#panzoom");
+            image.src = document.getElementById(id).src;
         }
     </script>