Améliorations + Modèle de commande graphique.

BlazorCanvas/BlazorCanvas/Data/CanvasCommand.cs

@@ -0,0 +1,26 @@
+namespace BlazorCanvas.Data;
+
+public class CanvasCommand {
+    public double X { get; set; }
+    public double Y { get; set; }
+    public string Color { get; set; } = "Black";
+    public int PointSize { get; set; }
+    public CanvasCommand() { }
+    public CanvasCommand(CanvasCommand command) { 
+        this.X = command.X; 
+        this.Y = command.Y; 
+        this.Color = command.Color;
+        this.PointSize = command.PointSize;
+    }
+
+    public bool Equals(CanvasCommand obj) {
+        if (obj == null) 
+            return false;
+        if (this.X == obj.X &
+        this.Y == obj.Y &
+        this.Color == obj.Color &
+        this.PointSize == obj.PointSize)
+            return true;
+        return false;
+    }
+}

BlazorCanvas/BlazorCanvas/Data/CanvasService.cs

@@ -11,6 +11,7 @@ namespace BlazorCanvas.Data;
 public class CanvasService {
     private Canvas2DContext? _currentCanvasContext;
     private IJSRuntime _jsRuntime;
+    private CanvasCommand _lastCommand = new();
 
     public CanvasService(IJSRuntime jsRuntime) {
         _jsRuntime = jsRuntime;
@@ -18,6 +19,7 @@ public class CanvasService {
 
     public string currentcolor { get; set; } = "Black";
     public int pointsize { get; set; } = 1;
+    public bool snap { get; set; }
     public ElementReference divCanvas { get; set; }
     public BECanvasComponent myCanvas { get; set; } = new();
 
@@ -30,6 +32,8 @@ public class CanvasService {
         if (divCanvas.Id?.Length > 0) {
             string data = await _jsRuntime.InvokeAsync<string>("getDivCanvasOffsets",
                 new object[] { divCanvas });
+            string color = "White";
+            CanvasCommand command = new();
             JObject? offsets = (JObject?)JsonConvert.DeserializeObject(data);
 
             if (offsets is not null && offsets.HasValues) { // Translation entre le canvas et la souris.
@@ -39,10 +43,27 @@ public class CanvasService {
             if (_currentCanvasContext is null)
                 _currentCanvasContext = await myCanvas.CreateCanvas2DAsync();
 
-            await _currentCanvasContext.SetFillStyleAsync(eventArgs.Buttons == 1 ?
-                                                                        currentcolor :
-                                                                        "White"); // Couleur si bouton gauche, blanc si bouton droit
+           
+            if (eventArgs.Buttons == 1) // Couleur si bouton gauche, blanc si bouton droit
+                color = currentcolor;
+            
+            if (snap) { // Magnétisme boboche.
+                mouseX -= mouseX % pointsize;
+                mouseY -= mouseY % pointsize;
+            }
+
+            command.X = mouseX;
+            command.Y = mouseY;
+            command.Color = color;
+            command.PointSize = pointsize;
+
+            if (command.Equals(_lastCommand))
+                return;
+
+            await _currentCanvasContext.SetFillStyleAsync(color);
             await _currentCanvasContext.FillRectAsync(mouseX, mouseY, pointsize, pointsize);
+
+            _lastCommand = command;
         }
     }
 }

BlazorCanvas/BlazorCanvas/Pages/Index.razor

@@ -36,8 +36,10 @@
         <option value="16">16</option>
         <option value="32">32</option>
     </select>
+    <label>Magnétisme: </label>
+    <input type="checkbox" @bind="@canvasService.snap"/>
 </header>
-<div @ref="canvasService.divCanvas" @onmousemove="canvasService.OnMouseMove" style="border:1px dotted #000000;">
+<div @ref="canvasService.divCanvas" @onmousedown="canvasService.OnMouseMove" @onmousemove="canvasService.OnMouseMove" style="border:1px dotted #000000;">
     <BECanvas @ref="canvasService.myCanvas" Height="1080" Width="1920"></BECanvas>
 </div>
 <footer>