merged in pull request from original repo "Added OnClick and OnMouse actions for Canvas BlazorExtensions#84"

Author: mludlum

src/Blazor.Extensions.Canvas/BECanvas.razor

@@ -1,3 +1,3 @@
 @inherits BECanvasComponent
 
-<canvas id="@Id" width="@Width" height="@Height" @ref="_canvasRef"></canvas>
+<canvas id="@Id" width="@Width" height="@Height" @ref="_canvasRef" onclick="@OnClick" onmousedown="@OnMouseDown" onmousemove="@OnMouseMove" onmouseout="@OnMouseOut" onmouseover="@OnMouseOver" onmouseup="@OnMouseUp" onmousewheel="@OnMouseWheel"></canvas>

src/Blazor.Extensions.Canvas/BECanvasComponent.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
 using Microsoft.JSInterop;
 using System;
 
@@ -12,6 +13,27 @@ public class BECanvasComponent : ComponentBase
         [Parameter]
         public long Width { get; set; }
 
+        [Parameter]
+        public Action<MouseEventArgs> OnClick { get; set; }
+
+        [Parameter]
+        public Action<MouseEventArgs> OnMouseDown { get; set; }
+
+        [Parameter]
+        public Action<MouseEventArgs> OnMouseMove { get; set; }
+
+        [Parameter]
+        public Action<MouseEventArgs> OnMouseOut { get; set; }
+
+        [Parameter]
+        public Action<MouseEventArgs> OnMouseOver { get; set; }
+
+        [Parameter]
+        public Action<MouseEventArgs> OnMouseUp { get; set; }
+
+        [Parameter]
+        public Action<MouseEventArgs> OnMouseWheel { get; set; }
+
         protected readonly string Id = Guid.NewGuid().ToString();
         protected ElementReference _canvasRef;
 
@@ -20,4 +42,4 @@ public class BECanvasComponent : ComponentBase
         [Inject]
         internal IJSRuntime JSRuntime { get; set; }
     }
-}
+}

src/Blazor.Extensions.Canvas/Blazor.Extensions.Canvas.csproj

@@ -40,4 +40,4 @@
     </Content>
   </ItemGroup>
 
-</Project>
+</Project>

src/Blazor.Extensions.Canvas/Canvas2D/Canvas2DContext.cs

@@ -61,11 +61,13 @@ public class Canvas2DContext : RenderingContext
             "repeat", "repeat-x", "repeat-y", "no-repeat"
         };
 
+        private const string GET_IMAGE_DATA_METHOD = "getImageData";
+        private const string PUT_IMAGE_DATA_METHOD = "putImageData";
         #endregion
 
         #region Properties
 
-        public object FillStyle { get; private set; } = "#000";
+        public string FillStyle { get; private set; } = "#000";
 
         public string StrokeStyle { get; private set; } = "#000";
 
@@ -96,7 +98,6 @@ public class Canvas2DContext : RenderingContext
         public float ShadowOffsetY { get; private set; }
 
         public float GlobalAlpha { get; private set; } = 1.0f;
-
         public string GlobalCompositeOperation { get; private set; } = "source-over";
 
         #endregion Properties
@@ -107,10 +108,10 @@ public Canvas2DContext(BECanvasComponent reference) : base(reference, CONTEXT_NA
 
         #region Property Setters
 
-        public async Task SetFillStyleAsync(object value)
+        public async Task SetFillStyleAsync(string value)
         {
             this.FillStyle = value;
-            await this.BatchCallAsync(FILL_STYLE_PROPERTY, false, value);
+            await this.BatchCallAsync(FILL_STYLE_PROPERTY, isMethodCall: false, value);
         }
 
         public async Task SetStrokeStyleAsync(string value)
@@ -202,7 +203,6 @@ public async Task SetGlobalAlphaAsync(float value)
             this.GlobalAlpha = value;
             await this.BatchCallAsync(GLOBAL_ALPHA_PROPERTY, isMethodCall: false, value);
         }
-
         public async Task SetGlobalCompositeOperationAsync(string value)
         {
             this.GlobalCompositeOperation = value;
@@ -212,7 +212,6 @@ public async Task SetGlobalCompositeOperationAsync(string value)
         #endregion Property Setters
 
         #region Methods
-
         [Obsolete("Use the async version instead, which is already called internally.")]
         public void FillRect(double x, double y, double width, double height) => this.CallMethod<object>(FILL_RECT_METHOD, x, y, width, height);
         public async Task FillRectAsync(double x, double y, double width, double height) => await this.BatchCallAsync(FILL_RECT_METHOD, isMethodCall: true, x, y, width, height);
@@ -337,12 +336,19 @@ public async Task SetGlobalCompositeOperationAsync(string value)
         public void Restore() => this.CallMethod<object>(RESTORE_METHOD);
         public async Task RestoreAsync() => await this.BatchCallAsync(RESTORE_METHOD, isMethodCall: true);
 
+        [Obsolete("Use the async version instead, which is already called internally.")]
+        public ImageData GetImageData(double sx, double sy, double sh, double sw) => this.CallMethod<ImageData>(GET_IMAGE_DATA_METHOD, sx, sy, sh, sw);
+        public async Task<ImageData> GetImageDataAsync(double sx, double sy, double sh, double sw) => await this.CallMethodAsync<ImageData>(GET_IMAGE_DATA_METHOD, sx, sy, sh, sw);
+
+        [Obsolete("Use the async version instead, which is already called internally.")]
+        public void PutImageData(ImageData imageData, double dx, double dy) => this.CallMethod<object>(PUT_IMAGE_DATA_METHOD, imageData, dx, dy);
+        public async Task PutImageDataAsync(ImageData imageData, double dx, double dy) => await this.CallMethodAsync<object>(PUT_IMAGE_DATA_METHOD, imageData, dx, dy);
+
         public async Task DrawImageAsync(ElementReference elementReference, double dx, double dy) => await this.BatchCallAsync(DRAW_IMAGE_METHOD, isMethodCall: true, elementReference, dx, dy);
         public async Task DrawImageAsync(ElementReference elementReference, double dx, double dy, double dWidth, double dHeight) => await this.BatchCallAsync(DRAW_IMAGE_METHOD, isMethodCall: true, elementReference, dx, dy, dWidth, dHeight);
         public async Task DrawImageAsync(ElementReference elementReference, double sx, double sy, double sWidth, double sHeight, double dx, double dy, double dWidth, double dHeight) => await this.BatchCallAsync(DRAW_IMAGE_METHOD, isMethodCall: true, elementReference, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-
         public async Task<object> CreatePatternAsync(ElementReference image, RepeatPattern repeat) => await this.CallMethodAsync<object>(CREATE_PATTERN_METHOD, image, this._repeatNames[(int)repeat]);
 
         #endregion Methods
     }
-}
+}

src/Blazor.Extensions.Canvas/Canvas2D/Canvas2DEnums.cs

@@ -39,12 +39,12 @@ public enum LineJoin
         Round,
         Bevel
     }
-
     public enum RepeatPattern
     {
         Repeat = 0,
         RepeatX,
         RepeatY,
         NoRepeat
     }
-}
+
+}

src/Blazor.Extensions.Canvas/CanvasContextExtensions.cs

@@ -35,10 +35,10 @@ public static async Task<WebGLContext> CreateWebGLAsync(this BECanvasComponent c
         {
             return await new WebGLContext(canvas, attributes).InitializeAsync().ConfigureAwait(false) as WebGLContext;
         }
-
         public static async Task<WebGL2Context> CreateWebGL2Async(this BECanvasComponent canvas, WebGLContextAttributes attributes = null)
         {
             return await new WebGL2Context(canvas, attributes).InitializeAsync().ConfigureAwait(false) as WebGL2Context;
         }
+
     }
-}
+}

src/Blazor.Extensions.Canvas/Infrastructure/ImageDataArrayConverter.cs

@@ -0,0 +1,30 @@
+using System;
+using System.Buffers;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Blazor.Extensions.Canvas.Infrastructure
+{
+    class ImageDataArrayConverter : JsonConverter<byte[]>
+    {
+        public override byte[] Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+        {
+            Dictionary<string, byte> dictionary = JsonSerializer.Deserialize<Dictionary<string, byte>>(ref reader, options);
+            return dictionary.Values.ToArray<byte>();
+        }
+
+        public override void Write(Utf8JsonWriter writer, byte[] value, JsonSerializerOptions options)
+        {
+            writer.WriteStartObject();
+            for (int i = 0; i < value.Length; i++)
+            {
+                writer.WritePropertyName(i.ToString());
+                JsonSerializer.Serialize(writer, value[i], options);
+            }
+            writer.WriteEndObject();
+        }
+    }
+}

src/Blazor.Extensions.Canvas/Infrastructure/ImageDataConverter.cs

@@ -0,0 +1,24 @@
+using Blazor.Extensions.Canvas.Model;
+using System;
+using System.Buffers;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Blazor.Extensions.Canvas.Infrastructure
+{
+    class ImageDataConverter : JsonConverter<ImageData>
+    {
+        public override ImageData Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
+        {
+            return JsonSerializer.Deserialize<ImageData>(ref reader, options);
+        }
+
+        public override void Write(Utf8JsonWriter writer, ImageData value, JsonSerializerOptions options)
+        {
+            JsonSerializer.Serialize(writer, value, options);
+        }
+    }
+}

src/Blazor.Extensions.Canvas/Model/ImageData.cs

@@ -0,0 +1,15 @@
+using Blazor.Extensions.Canvas.Infrastructure;
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Text.Json.Serialization;
+
+namespace Blazor.Extensions.Canvas.Model
+{
+    public class ImageData
+    {
+        [JsonPropertyName("data")]
+        [JsonConverter(typeof(ImageDataArrayConverter))]
+        public byte[] Data { get; set; }
+    }
+}

src/Blazor.Extensions.Canvas/RenderingContext.cs

@@ -135,4 +135,4 @@ public void Dispose()
 
         #endregion
     }
-}
+}

src/Blazor.Extensions.Canvas/WebGL/WebGLContext.cs

@@ -573,6 +573,10 @@ public void Uniform(WebGLUniformLocation location, params float[] value)
                     throw new ArgumentOutOfRangeException(nameof(value), value.Length, "Value array is empty or too long");
             }
         }
+        public async Task Uniform1Async(WebGLUniformLocation location, params float[] value)
+        {
+            await this.BatchCallAsync(UNIFORM + "1fv", isMethodCall: true, location, value);
+        }
         public async Task UniformAsync(WebGLUniformLocation location, params float[] value)
         {
             switch (value.Length)
@@ -748,4 +752,4 @@ private byte[] ConvertToByteArray<T>(T[] arr) where T : unmanaged
         private async Task<int> GetDrawingBufferHeightAsync() => await this.GetPropertyAsync<int>(DRAWING_BUFFER_HEIGHT);
         #endregion
     }
-}
+}

src/Blazor.Extensions.Canvas/WebGL/WebGLEnums.cs

@@ -319,7 +319,6 @@ public enum TextureParameterValue
         CLAMP_TO_EDGE = 0x812F,
         MIRRORED_REPEAT = 0x8370
     }
-
     public enum BlitFilter
     {
         NEAREST = 0x2600,
@@ -469,4 +468,4 @@ public enum Texture
         TEXTURE30,
         TEXTURE31
     }
-}
+}

src/Blazor.Extensions.Canvas/WebGL/WebGLObjects.cs

@@ -56,7 +56,7 @@ public class WebGLShader : WebGLObject
 
     public class WebGLUniformLocation : WebGLObject
     { }
-
     public class WebGLVertexArrayObject : WebGLObject
     { }
+
 }