Skip to content

Commit

Permalink
merged in pull request from original repo "Added OnClick and OnMouse …
Browse files Browse the repository at this point in the history
…actions for Canvas BlazorExtensions#84"
  • Loading branch information
mludlum committed Jun 8, 2023
1 parent 8523b22 commit 3ed2f1c
Show file tree
Hide file tree
Showing 14 changed files with 121 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/Blazor.Extensions.Canvas/BECanvas.razor
Original file line number Diff line number Diff line change
@@ -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>
24 changes: 23 additions & 1 deletion src/Blazor.Extensions.Canvas/BECanvasComponent.cs
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.JSInterop;
using System;

Expand All @@ -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;

Expand All @@ -20,4 +42,4 @@ public class BECanvasComponent : ComponentBase
[Inject]
internal IJSRuntime JSRuntime { get; set; }
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,4 @@
</Content>
</ItemGroup>

</Project>
</Project>
22 changes: 14 additions & 8 deletions src/Blazor.Extensions.Canvas/Canvas2D/Canvas2DContext.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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
}
}
}
4 changes: 2 additions & 2 deletions src/Blazor.Extensions.Canvas/Canvas2D/Canvas2DEnums.cs
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@ public enum LineJoin
Round,
Bevel
}

public enum RepeatPattern
{
Repeat = 0,
RepeatX,
RepeatY,
NoRepeat
}
}

}
4 changes: 2 additions & 2 deletions src/Blazor.Extensions.Canvas/CanvasContextExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

}
}
}
Original file line number Diff line number Diff line change
@@ -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();
}
}
}
24 changes: 24 additions & 0 deletions src/Blazor.Extensions.Canvas/Infrastructure/ImageDataConverter.cs
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
15 changes: 15 additions & 0 deletions src/Blazor.Extensions.Canvas/Model/ImageData.cs
Original file line number Diff line number Diff line change
@@ -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; }
}
}
2 changes: 1 addition & 1 deletion src/Blazor.Extensions.Canvas/RenderingContext.cs
Original file line number Diff line number Diff line change
Expand Up @@ -135,4 +135,4 @@ public void Dispose()

#endregion
}
}
}
6 changes: 5 additions & 1 deletion src/Blazor.Extensions.Canvas/WebGL/WebGLContext.cs
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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
}
}
}
3 changes: 1 addition & 2 deletions src/Blazor.Extensions.Canvas/WebGL/WebGLEnums.cs
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,6 @@ public enum TextureParameterValue
CLAMP_TO_EDGE = 0x812F,
MIRRORED_REPEAT = 0x8370
}

public enum BlitFilter
{
NEAREST = 0x2600,
Expand Down Expand Up @@ -469,4 +468,4 @@ public enum Texture
TEXTURE30,
TEXTURE31
}
}
}
2 changes: 1 addition & 1 deletion src/Blazor.Extensions.Canvas/WebGL/WebGLObjects.cs
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ public class WebGLShader : WebGLObject

public class WebGLUniformLocation : WebGLObject
{ }

public class WebGLVertexArrayObject : WebGLObject
{ }

}
Loading

0 comments on commit 3ed2f1c

Please sign in to comment.