Séparation backend/frontend

BlazorCanvas/BlazorCanvas/Data/CanvasService.cs

@@ -0,0 +1,51 @@
+using Blazor.Extensions.Canvas.Canvas2D;
+using Blazor.Extensions;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using Newtonsoft.Json.Linq;
+using Newtonsoft.Json;
+
+namespace BlazorCanvas.Data;
+
+public class CanvasService {
+    public ElementReference divCanvas;
+    public BECanvasComponent myCanvas = new();
+    Canvas2DContext? currentCanvasContext;
+    IJSRuntime _jsRuntime;
+
+    public CanvasService(IJSRuntime jsRuntime) {
+        _jsRuntime = jsRuntime;
+    }
+
+    public string currentcolor { get; set; } = "Black";
+    public int pointsize { get; set; } = 1;
+
+    public async void OnMouseMove(MouseEventArgs eventArgs)
+    {
+        double mouseX = 0, mouseY = 0;
+
+        if (eventArgs.Buttons == 0 || eventArgs.Buttons > 2)
+            return; // Rien faire si aucun bouton est appuyé ou si les deux boutons/ d'autres boutons sont appuyés.
+
+        if (divCanvas.Id?.Length > 0)
+        {
+            string data = await _jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
+                new object[] { divCanvas });
+            JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
+
+            if (offsets is not null && offsets.HasValues)
+            { // Translation entre le canvas et la souris.
+                mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
+                mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
+            }
+            if (currentCanvasContext is null)
+                currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
+
+            await currentCanvasContext.SetFillStyleAsync(eventArgs.Buttons == 1 ?
+                                                                        currentcolor :
+                                                                        "White"); // Couleur si bouton gauche, blanc si bouton droit
+            await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
+        }
+    }
+}

BlazorCanvas/BlazorCanvas/Pages/Index.razor

@@ -3,15 +3,15 @@
 @using Blazor.Extensions.Canvas
 @using Blazor.Extensions.Canvas.Canvas2D
 @using Blazor.Extensions.Canvas.WebGL
+@using BlazorCanvas.Data
 @using Newtonsoft.Json
 @using Newtonsoft.Json.Linq
-@inject IJSRuntime jsRuntime
+@inject CanvasService canvasService
 
-<header>
+<header style="padding: 5px;">
-    <div style="padding: 5px; background-color: darkgray;">
     <h3>Canvas Communautaire!</h3>
     <label>Couleur: </label>
-        <select @bind="@currentcolor">
+    <select @bind="@canvasService.currentcolor">
         <option value="Black" selected>Noir</option>
         <option value="Red">Rouge</option>
         <option value="Blue">Bleu</option>
@@ -27,7 +27,7 @@
         <option value="White">Blanc</option>
     </select>
     <label>Grosseur du trait: </label>
-        <select @bind="@pointsize">
+    <select @bind="@canvasService.pointsize">
         <option value="1" selected>1</option>
         <option value="2">2</option>
         <option value="3">3</option>
@@ -36,47 +36,10 @@
         <option value="16">16</option>
         <option value="32">32</option>
     </select>
-    </div>
 </header>
-<div @ref="divCanvas" @onmousemove="OnMouseMove" style="border:1px dotted #000000;">
+<div @ref="canvasService.divCanvas" @onmousemove="canvasService.OnMouseMove" style="border:1px dotted #000000;">
-    <BECanvas @ref="myCanvas" Height="1080" Width="1920"></BECanvas>
+    <BECanvas @ref="canvasService.myCanvas" Height="1080" Width="1920"></BECanvas>
 </div>
 <footer>
+    (c) Cowboy Kim
 </footer>
-
-@code {
-    ElementReference divCanvas;
-    BECanvasComponent myCanvas = new();
-    Canvas2DContext? currentCanvasContext;
-
-    private string currentcolor { get; set; } = "Black";
-    private int pointsize { get; set; } = 1;
-
-    async void OnMouseMove(MouseEventArgs eventArgs)
-    {
-        double mouseX = 0, mouseY = 0;
-
-        if (eventArgs.Buttons == 0 || eventArgs.Buttons > 2)
-            return; // Rien faire si aucun bouton est appuyé ou si les deux boutons/ d'autres boutons sont appuyés.
-
-        if (divCanvas.Id?.Length > 0)
-        {
-            string data = await jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
-                new object[] { divCanvas });
-            JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
-
-            if (offsets is not null && offsets.HasValues)
-            { // Translation entre le canvas et la souris.
-                mouseX = eventArgs.ClientX - offsets.Value<double>("offsetLeft");
-                mouseY = eventArgs.ClientY - offsets.Value<double>("offsetTop");
-            }
-            if (currentCanvasContext is null)
-                currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
-
-            await currentCanvasContext.SetFillStyleAsync(eventArgs.Buttons == 1 ?
-                                                                        currentcolor :
-                                                                        "White"); // Couleur si bouton gauche, blanc si bouton droit
-            await currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
-        }
-    }
-}

BlazorCanvas/BlazorCanvas/Program.cs

@@ -7,6 +7,7 @@ var builder = WebApplication.CreateBuilder(args);
 // Add services to the container.
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
+builder.Services.AddScoped<CanvasService>();
 builder.Services.AddSingleton<WeatherForecastService>();
 
 var app = builder.Build();