MudSignaturePad ClearPad Public

docs/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/SignaturePad/Examples/SignaturePadExample1.razor

@@ -1,10 +1,10 @@
 @namespace MudExtensions.Docs.Examples
 @using MudBlazor.Utilities
 @using MudExtensions.Utilities
-
+@inject IJSRuntime JsRuntime
 <MudGrid>
     <MudItem xs="12" sm="8">
-        <MudSignaturePad @bind-Value="_value" @bind-Value:after="@(() =>BytesChanged(_value))"
+        <MudSignaturePad @ref="_signaturePad" @bind-Value="_value" @bind-Value:after="@(() =>BytesChanged(_value))"
                          Options="_options"
                          ShowDownload="_showDownload"
                          ShowClear="_showClear"
@@ -31,6 +31,9 @@
             <MudSelectExtended @bind-Value="@_variant" ItemCollection="@(Enum.GetValues<Variant>())" Label="Variant" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
             <MudSelectExtended @bind-Value="@_color" ItemCollection="@(Enum.GetValues<Color>())" Label="Color" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
             <MudNumericField @bind-Value="@_elevation" Min="0" Max="25" Label="Elevation" Variant="Variant.Outlined" Margin="Margin.Dense" />
+            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="(async () => await _signaturePad.ClearPad())">Clear</MudButton>
+            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="(async () => await _signaturePad.Download())">Download</MudButton>
+            <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="(async () => await _signaturePad.IsEditToggled())">Toggle edit/erase mode</MudButton>
         </MudStack>
     </MudItem>
 </MudGrid>
@@ -46,6 +49,7 @@
     Variant _variant;
     Color _color;
     int _elevation = 4;
+    MudSignaturePad _signaturePad = null!;
 
     SignaturePadLocalizedStrings _localizedStrings = new SignaturePadLocalizedStrings();
 
@@ -63,4 +67,5 @@
     {
         _value = bytes;
     }
+
 }

src/CodeBeam.MudBlazor.Extensions/Components/SignaturePad/MudSignaturePad.razor.cs

@@ -192,17 +192,33 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await base.OnAfterRenderAsync(firstRender);
         }
 
-        private async Task IsEditToggled()
+        /// <summary>
+        /// Toggle between draw and erase mode.
+        /// </summary>
+        /// <returns></returns>
+        public async Task IsEditToggled()
         {
             await JsRuntime.InvokeVoidAsync("mudSignaturePad.togglePadEraser", _reference);
             _isErasing = !_isErasing;
         }
 
-        async Task ClearPad()
+        /// <summary>
+        /// Clear the signature pad.
+        /// </summary>
+        /// <returns></returns>
+        public async Task ClearPad()
         {
             await ValueChanged.InvokeAsync(Array.Empty<byte>());
             await JsRuntime.InvokeVoidAsync("mudSignaturePad.clearPad", _reference);
         }
+        /// <summary>
+        /// Download the signature as an image.
+        /// </summary>
+        /// <returns></returns>
+        public async Task Download()
+        {
+            await JsRuntime.InvokeVoidAsync("mudSignaturePad.downloadPadImage", _reference);
+        }
 
         async Task PushImageUpdateToJsRuntime()
         {
@@ -214,11 +230,7 @@ async Task UpdateOptions()
         {
             await JsRuntime.InvokeVoidAsync("mudSignaturePad.updatePadOptions", _reference, JsOptionsStruct);
         }
-
-        async Task Download()
-        {
-            await JsRuntime.InvokeVoidAsync("mudSignaturePad.downloadPadImage", _reference);
-        }
+
 
         private async Task LineWidthUpdated(decimal obj)
         {