update flipbook scripts

Author: pgrit

SeeSharp.Blazor/FlipViewer.razor

@@ -15,17 +15,30 @@
     public SimpleImageIO.FlipBook Flip { get; set; }
     SimpleImageIO.FlipBook lastFlip;
 
-    public record struct OnClickEventArgs
+    public record struct OnEventArgs
     (
-        int X,
-        int Y,
-        bool CtrlKey
+        int mouseButton,
+        // Mouse X/Y pixel coordinates relative to an image in Flipbook (Pixel (0, 0) at top left of image)
+        int mouseX,
+        int mouseY,
+        int deltaY,
+
+        string FlipbookID,
+        int selectedIndex,
+
+        HashSet<String> keysPressed
     )
     {
     }
 
     [Parameter]
-    public EventCallback<OnClickEventArgs> OnClick { get; set; }
+    public EventCallback<OnEventArgs> OnClick { get; set; }
+    [Parameter]
+    public EventCallback<OnEventArgs> OnWheel { get; set; }
+    [Parameter]
+    public EventCallback<OnEventArgs> OnMouseOver { get; set; }
+    [Parameter]
+    public EventCallback<OnEventArgs> OnKey { get; set; }
 
     protected override async Task OnParametersSetAsync()
     {
@@ -52,23 +65,53 @@
         lastFlip = Flip;
     }
 
-    public struct _OnFlipClickArgs
+    [JSInvokable]
+    public void _OnFlipClick(int mouseButton, int mouseX, int mouseY, string ID, int selectedIdx, String[] keysPressed)
+    {
+        HashSet<string> set = new HashSet<string>(keysPressed);
+        OnClick.InvokeAsync(new(mouseButton: mouseButton, mouseX: mouseX, mouseY: mouseY, deltaY: -1, FlipbookID: ID, selectedIndex: selectedIdx, keysPressed: set)).Wait();
+    }
+
+    [JSInvokable]
+
+    public void _OnFlipWheel(int mouseX, int mouseY, int deltaY, string ID, int selectedIdx, String[] keysPressed)
+    {
+        HashSet<string> set = new HashSet<string>(keysPressed);
+        OnWheel.InvokeAsync(new(mouseButton: -1, mouseX: mouseX, mouseY: mouseY, deltaY: deltaY, FlipbookID: ID, selectedIndex: selectedIdx, keysPressed: set)).Wait();
+    }
+
+    [JSInvokable]
+    public void _OnFlipMouseOver(int mouseX, int mouseY, string ID, int selectedIdx, String[] keysPressed)
     {
-        [JsonInclude] public bool ctrlKey;
+        HashSet<string> set = new HashSet<string>(keysPressed);
+        OnMouseOver.InvokeAsync(new(mouseButton: -1, mouseX: mouseX, mouseY: mouseY, deltaY: -1, FlipbookID: ID, selectedIndex: selectedIdx, keysPressed: set)).Wait();
     }
 
     [JSInvokable]
-    public void _OnFlipClick(int x, int y, _OnFlipClickArgs eventArgs)
+
+    public void _OnFlipKey(int mouseX, int mouseY, string ID, int selectedIdx, String[] keysPressed)
     {
-        OnClick.InvokeAsync(new(x, y, eventArgs.ctrlKey)).Wait();
+        HashSet<string> set = new HashSet<string>(keysPressed);
+        OnKey.InvokeAsync(new(mouseButton: -1, mouseX: mouseX, mouseY: mouseY, deltaY: -1, FlipbookID: ID, selectedIndex: selectedIdx, keysPressed: set)).Wait();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         // Need to wait with invoking the JS code until the HTML got added to the DOM on the client side
         if (flipJson != null)
         {
-            await JSRuntime.InvokeVoidAsync("makeFlipBook", flipJson, DotNetObjectReference.Create(this), nameof(_OnFlipClick));
+            await JSRuntime.InvokeVoidAsync(
+                "makeFlipBook",
+                flipJson,
+                DotNetObjectReference.Create(this),
+                nameof(_OnFlipClick),
+                DotNetObjectReference.Create(this),
+                nameof(_OnFlipWheel),
+                DotNetObjectReference.Create(this),
+                nameof(_OnFlipMouseOver),
+                DotNetObjectReference.Create(this),
+                nameof(_OnFlipKey)
+                );
             flipJson = null;
         }
     }

SeeSharp.Blazor/Scripts.cs

@@ -1,12 +1,12 @@
+using Microsoft.AspNetCore.StaticAssets;
 using Microsoft.JSInterop;
+using System.Net.Http.Headers;
 using System.Reflection;
 
 namespace SeeSharp.Blazor;
 
-public static class Scripts
-{
-    static string ReadResourceText(string filename)
-    {
+public static class Scripts {
+    static string ReadResourceText(string filename) {
         var assembly = typeof(Scripts).GetTypeInfo().Assembly;
         var stream = assembly.GetManifestResourceStream("SeeSharp.Blazor." + filename)
             ?? throw new FileNotFoundException("resource file not found", filename);
@@ -20,14 +20,32 @@ static string ReadResourceText(string filename)
     $$"""
     <script>
         {{SimpleImageIO.FlipBook.HeaderScript}}
-        function makeFlipBook(jsonArgs, onClickObj, onClickMethodName) {
+        function makeFlipBook(jsonArgs, onClickObj, onClickMethodName, onWheelObj, onWheelMethodName, onMouseOverObj, onMouseOverMethodName, onKeyObj, onKeyMethodName) {
             let onClick = null;
             if (onClickObj && onClickMethodName) {
-                onClick = (col, row, evt) =>
-                    onClickObj.invokeMethodAsync(onClickMethodName, col, row, { ctrlKey: evt.ctrlKey })
+                onClick = (mouseButton, mouseX, mouseY, ID, selectedIdx, keysPressed) =>
+                    onClickObj.invokeMethodAsync(onClickMethodName, mouseButton, mouseX, mouseY, ID, selectedIdx, keysPressed)
             }
 
-            window['flipbook']['MakeFlipBook'](jsonArgs, onClick);
+            let onWheel = null
+            if (onWheelObj && onWheelMethodName) {
+                onWheel = (mouseX, mouseY, deltaY, ID, selectedIdx, keysPressed) =>
+                    onWheelObj.invokeMethodAsync(onWheelMethodName, mouseX, mouseY, deltaY, ID, selectedIdx, keysPressed)
+            }
+
+            let onMouseOver = null
+            if (onMouseOverObj && onMouseOverMethodName) {
+                onMouseOver = (mouseX, mouseY, ID, selectedIdx, keysPressed) =>
+                    onMouseOverObj.invokeMethodAsync(onMouseOverMethodName, mouseX, mouseY, ID, selectedIdx, keysPressed)
+            }
+
+            let onKey = null
+            if (onKeyObj && onKeyMethodName) {
+                onKey = (mouseX, mouseY, ID, selectedIdx, keysPressed) =>
+                    onKeyObj.invokeMethodAsync(onKeyMethodName, mouseX, mouseY, ID, selectedIdx, keysPressed)
+            }
+
+            window['flipbook']['MakeFlipBook'](jsonArgs, onClick, onWheel, onMouseOver, onKey);
         }
     </script>
     """;
@@ -59,7 +77,17 @@ function makeFlipBook(jsonArgs, onClickObj, onClickMethodName) {
     </script>
     """;
 
-    public static readonly string AllScripts = FlipBookScript + DownloadScript + WidgetScripts;
+    public static readonly string UpdateImageScript =
+    $$"""
+    <script>
+        function updateImage(jsonArgs) {
+            window['flipbook']['UpdateImage'](jsonArgs);
+            return;
+        }
+    </script>
+    """;
+
+    public static readonly string AllScripts = FlipBookScript + DownloadScript + WidgetScripts + UpdateImageScript;
 
     /// <summary>
     /// Downloads a stream to the client with the given file name. Requires that <see cref="DownloadScript" />