Merge branch 'master' of https://github.com/MarvinKlein1508/SignaturePad

MarvinKlein1508 · Jul 2, 2024 · 8fa761f · 8fa761f
2 parents 1d3b570 + 3add03e
commit 8fa761f
Show file tree

Hide file tree

Showing 20 changed files with 108 additions and 24 deletions.
diff --git a/BlazorSRRDemo/BlazorSRRDemo/BlazorSRRDemo.csproj b/BlazorSRRDemo/BlazorSRRDemo/BlazorSRRDemo.csproj
@@ -12,4 +12,10 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.6" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Components\Pages\ExistingSignature.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
 </Project>
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGImage.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/BGImage.razor
@@ -1,3 +1,3 @@
 @page "/BGImageDemo"
 
-<Demos.Core.SignaturePadDemos.BackgroundImageDemo @rendermode="InteractiveServer" />
+<BackgroundImageDemo @rendermode="InteractiveServer" />
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/Disabled.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/Disabled.razor
@@ -1,3 +1,3 @@
 @page "/Disabled"
 
-<Demos.Core.SignaturePadDemos.DisabledDemo @rendermode="InteractiveServer" />
+<DisabledDemo @rendermode="InteractiveServer" />
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/ExistingSignature.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/ExistingSignature.razor
@@ -0,0 +1,4 @@
+@page "/ExistingSignature"
+
+<ExistingSignatureDemo @rendermode="InteractiveServer" />
+
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/Home.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/Home.razor
@@ -1,3 +1,3 @@
 @page "/"
 
-<Demos.Core.SignaturePadDemos.HomeDemo @rendermode="InteractiveServer" />
+<HomeDemo @rendermode="InteractiveServer" />
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/Options.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/Pages/Options.razor
@@ -1,3 +1,3 @@
 @page "/OptionsDemo"
 
-<Demos.Core.SignaturePadDemos.OptionsDemo @rendermode="InteractiveServer" />
+<OptionsDemo @rendermode="InteractiveServer" />
diff --git a/BlazorSRRDemo/BlazorSRRDemo/Components/_Imports.razor b/BlazorSRRDemo/BlazorSRRDemo/Components/_Imports.razor
@@ -9,3 +9,4 @@
 @using BlazorSRRDemo
 @using BlazorSRRDemo.Components
 @using Demos.Core
+@using Demos.Core.SignaturePadDemos
diff --git a/BlazorServerDemo/BlazorServerDemo.csproj b/BlazorServerDemo/BlazorServerDemo.csproj
@@ -11,4 +11,10 @@
     <ProjectReference Include="..\SignaturePad\SignaturePad.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Pages\ExistingSignature.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
 </Project>
diff --git a/BlazorServerDemo/Pages/ExistingSignature.razor b/BlazorServerDemo/Pages/ExistingSignature.razor
@@ -0,0 +1,4 @@
+@page "/ExistingSignature"
+
+<ExistingSignatureDemo />
+
diff --git a/BlazorWebAssemblyDemo/BlazorWebAssemblyDemo.csproj b/BlazorWebAssemblyDemo/BlazorWebAssemblyDemo.csproj
@@ -16,4 +16,10 @@
     <ProjectReference Include="..\Demos.Core\Demos.Core.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="Pages\ExistingSignature.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
 </Project>
diff --git a/BlazorWebAssemblyDemo/Pages/BGImage.razor b/BlazorWebAssemblyDemo/Pages/BGImage.razor
@@ -1,3 +1,3 @@
 @page "/BGImageDemo"
 
-<Demos.Core.SignaturePadDemos.BackgroundImageDemo />
+<BackgroundImageDemo />
diff --git a/BlazorWebAssemblyDemo/Pages/Disabled.razor b/BlazorWebAssemblyDemo/Pages/Disabled.razor
@@ -1,3 +1,3 @@
 @page "/Disabled"
 
-<Demos.Core.SignaturePadDemos.DisabledDemo />
+<DisabledDemo />
diff --git a/BlazorWebAssemblyDemo/Pages/ExistingSignature.razor b/BlazorWebAssemblyDemo/Pages/ExistingSignature.razor
@@ -0,0 +1,5 @@
+@page "/ExistingSignature"
+
+
+<ExistingSignatureDemo />
+
diff --git a/BlazorWebAssemblyDemo/Pages/Home.razor b/BlazorWebAssemblyDemo/Pages/Home.razor
@@ -6,4 +6,4 @@
 
 Welcome to your new app.
 
-<Demos.Core.SignaturePadDemos.HomeDemo />
+<HomeDemo />
diff --git a/BlazorWebAssemblyDemo/Pages/Options.razor b/BlazorWebAssemblyDemo/Pages/Options.razor
@@ -1,3 +1,3 @@
 @page "/OptionsDemo"
 
-<Demos.Core.SignaturePadDemos.OptionsDemo />
+<OptionsDemo />
diff --git a/BlazorWebAssemblyDemo/_Imports.razor b/BlazorWebAssemblyDemo/_Imports.razor
@@ -9,3 +9,4 @@
 @using BlazorWebAssemblyDemo
 @using BlazorWebAssemblyDemo.Layout
 @using Demos.Core
+@using Demos.Core.SignaturePadDemos
diff --git a/Demos.Core/Demos.Core.csproj b/Demos.Core/Demos.Core.csproj
@@ -19,4 +19,10 @@
     <ProjectReference Include="..\SignaturePad\SignaturePad.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Update="SignaturePadDemos\ExistingSignatureDemo.razor">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+    </Content>
+  </ItemGroup>
+
 </Project>
diff --git a/Demos.Core/NavMenu.razor b/Demos.Core/NavMenu.razor
@@ -29,6 +29,12 @@
             </NavLink>
         </div>
 
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="ExistingSignature" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Existing signature
+            </NavLink>
+        </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="BGImageDemo" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> BG Image

diff --git a/Demos.Core/SignaturePadDemos/ExistingSignatureDemo.razor b/Demos.Core/SignaturePadDemos/ExistingSignatureDemo.razor
@@ -0,0 +1,45 @@
+@using System.Text
+@inject NavigationManager navigationManager
+@inject SignatureInMemoryService memoryService
+
+<h1>SignaturePad Default Demo</h1>
+<SignaturePad @bind-Value="Input.Signature" style="width: 100%;" />
+
+
+@if (Input.Signature.Any())
+{
+    <h2>Signature</h2>
+    <img src="@Input.SignatureAsBase64" />
+    <button type="button" class="btn btn-primary" @onclick="SaveSignature">Save signature</button>
+    <button type="button" class="btn btn-primary" @onclick="OpenSignature">Open signature</button>
+}
+
+@if(memoryService.Signature.Any())
+{
+    <button type="button" class="btn btn-primary ms-1" @onclick="ReadSignature">Read signature</button>
+}
+
+@code {
+    public MyInput Input { get; set; } = new();
+
+    public ExistingSignatureDemo()
+    {
+        Input.Signature = Encoding.UTF8.GetBytes("data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAALgAAAA5CAYAAACF3+G6AAAAAXNSR0IArs4c6QAADlZJREFUeF7t3QOULFkSBuB/1rZt27Zt88zatm3be9actW3bmLVtz25+b+7dyZed1ZXVXV1d3ZVxTp3u1y95b9y4EX/8EbVPRpnHCBwuyY2T+Pm3JP8sn88m+eqEG5wiyVmSnC7JX5NcJslxkhwqyeGTHKVc7x9J9kvyqSRfT/KOeTzwqlxjn1V50Rnf8xBJLlAU7YxJTp3k4ElOleT0SQ5b/j3jZfccXpX/CBs5uZzzsyTvTPKlJN9sFscnkvx2E9fbtaeuqoKfO8kxk5w1yX+SXDDJ2ZIcq8w0q3noGWb9L0k+k+S/nXMsjON2/kbBWekvJvllscz/Luf/uaXAf2wtrPOXBed5j9HzXH8vC47Cn2OG5971h+5WBadA10py1OIGnKYoM8s7RCjqp4vr8MPG/fheOekH5XeL4pPFGg+53jyPsaNcOMlJyqI8UZKTl4Vql7lEs2DfO88b7uRr7SYFv3qzZV8tyfnK5E+bl/2TfCPJ54oy2+p9dqrcorHuT0tiEZ6pxAI79V3m9tw7VcE998WSXKgJ4q6Z5LTrjIgAToDGhfh4kh8VhZ7bIC7JhcQNFixr/ook11uS59rWx9hpCn6TJJdqLO111xk1fihFptTcjC9v6wgv9uaXTPL24o8fLcnvFnv75bvbsis4H/oGJdjifnQDNiMqUHtr44++Kcm7kwj4VlU+WHY1wapgVLC80rJsCn70EhyetKAG5+2ZHSgELPg9ST6wYhZ6PWW1u72wBJvXTvK6ldbs8vLLoOCUmttxj4J49M0LP/otDQ798sZCvS/Jn8bJ22sEDpbkF8VqSzSdOcm3xzFKtkvBKTWX4zolWOybC760BMb7iwsyKnW/xoIJH9Eo9PXLf3+k4PqjfmfxCg6fvn+Smyc5dmcGYMvvKpZaoFSx53GiJo+A9P5zkpywdciTktx5HLQDR2BRFhy34m5J7pXkMJ3B/07zt0c12O3rx6h/sFoeOclDmvT8HTpnvLHBwW86juNBo7IIBb9Zkof1WGzZNpP04Z4U9+CZXsEDuXfiEMmcKjKvt0zyghJkruCw9L/yViq4dPLDG+gOj6ItgkWWfBLLbpycySMgbnlykhO0DpF95ap8fxy4PSMg0fXgJJ/HvtwqBWeVsfHa8qEmAfHQAu+NczHbCKDOMha3aZ12QBnPR49p+T2uNsLcrZNco/EYZHX3yLwVHP563waDRQiqgjV3nyRvm21Ox6ML41GiS9DYDiRZa1bqxaN7t0fXnlBIZmuUZl4KfvbGx35mA+eds3MHNxZcdmmko/auPwIXKUZB6r0tFWlCrPrxOIi5XZKnrjMO+29WwW2dTynp9Pa1pMtvleSl4yQMGgGFFJT5cuXTd9K3ikvyyiT446su4FFw8ySR6d53Mwp+hlJKpfSqLYhOkg4jjj1dBRVdcOsmWSHsQEG5tDviGAs+SvL0TjzSHRP6xxAcsFEFv2xTS/jqJO2yK4P/xOKD44uMMnkEUH3Bp11WJMssQEeaQnlltUfZewRuVGKPvnH5TXGT/29cN6LgttI3lILYehM1gvwhyZpRJo+AJMw9CzuyfRQWpBgG0mSSRukfAexSFI42TOpIhkGxx+O7scmsCs5X/FizpUo2VPlp2WZxIEZZOwJcuTs2BRdXKFXz9YifNxP1vIYC/OwxYBysNiBRpLy20DvGFVq3RmZRcL42eurxW1dBhgJh+TnK3iPAjVMXisbaFq0kJGte0yS8FAuPMmwEGAhUBMxJwmrbDSF1E2WIglNoK+TurVYJYD/EKJi3Cdutos+JXUt1vJ+q7i/aEJyOl0Qx8jMKddcY8JcZgSs3f7trpzgDqsT9sI2O+YDZtAXO/YCSwKlnSnJR7sdNu9Q0BddK4WVNRKoqvS0a0IABTdpOEe961VKUrOBYkx3tI9BwfU5Z+NS451o2oBg4R6X6EEEa6yJKvyoICDqrWtBRho+AxNZjypx1W3hAlNTjTt0B11NwlhtM1W1Q86+SqVymCvRDllStthCCYD/1EKG0sPrNyK8b6/GVcgEBjjrHk/Vg/+17aMqjukbl0R82c/MVPFfxy/2KIWJc6JvAm0Eivy8GV4HHVFlPwcFUChLaov7RFv21qVfe2AGiZK4QBT1i6f8hiKCosqVWbLW4Wp4R25Xaw6E9T+qTCZYrnKnHSbUGLLEsocoYil1rPLVZU8EvuQC/7go35bUFfx2JT7PPP5IUvF81UhV1AY8tXbwYMaKeADt1kExScExAAWVbrCSOPt97MwKBQcTiAtjSNaqhzPMQgcdHCzXgC8V6QivsROIG/zc0CwiKumLTN+VKha3X93yuBft/0RYu+nmMyzJfgxEVm1RkjrHiFkOXdEZg9Npt6biQiGfO4UquK5MUHOTS5RtbOS48RDysFmI+tnMBGriMlZ2lJVr7XmoMf9JwW1SMo0Ky3FwGf7O6q2IPeb5JxwhoLLwbDuyEZZdz7JhhnG3UzZe+LTjstbCcsVD4AmHiFrbF+Fb0pP6dHjBeFoTzemkhfQpui2D92sICCsi6K4ZC2LaP1HBS9OGorkTdTmZ57errUljKDHrkNvi5le0PNNPEdlTb2KX4eg7tF1iRthgHC15yxs42yrAREA/dtlQi1T6QDJXEoVzBJAIZC96dg/YdZS4Z0jXSp+BWli2iLR4KJEYJQGCUuq9HybTX5Nfyd61WiguNkSjCX9lKJa7PpXQOUw+UZ1eBDrVrQy1kHbDwGCxa49AdI36iSiS7xyjDRgDMum8TIN6p7Lb1LArNx8YtWW8XxC15Vg/gUa/DECrjW0MR6VNwW3Q7Kymos5XAwvX9GyIelgLzoTTlYeUEdUP93yH3mHYMmEkgSpGR4blIFmUbVRE0W3CvKotNn0LBrOQBGKotIFG4/5ixnTbyB/3/uYrFxmlvuxj8aCiTrKTfh4h5E+jj8VgschFEbKXQ+i59F+lT8Iu3qm6cDBbjfkwTllitoAenBIsmXCnn4jJduiiy7qttwZfhetU+hRIzbTKTYmgIDtej62JpXeH6IKpR1h8BrgJOyFUmHAZhErdsxlCI5bjMBKLHUPVKV8EnJXb6TuYrA9xZaogLS7gIYY3tJCy0Ags+NNejKwJRrDzsPM/meSeJYBH+2l3Idi8FG88fA8l1p9b4S/zZ5bmx3YDQyeBXASQDuLD2elXBBYd4x7bzScLtEHTxT+GTtvN5uxwWmK3HznHisiWpr6N8nrVuS91n1DLY83CHYNdDFpsgR/SN4dcV7yrm4B+OGcjJOgGQQPn1odh9AulAklKgMNQdmZuhpDRdn7t7cXAM3oVVKqtpJVJA1pFfZDsH/WnqU9PaFN95ol+LRyDHDxdI+uk8GT4+WrWaAtBpyZrvlkIKCuw5LDjw4CzCx9ZPBK+4K9wqC9iEbFUya5ZnXdZjQcj4IXqyTxJGR45AK4tt60pGwc9TUIxFDCaFB7FZIAagLQaBFa7CZ0YHoHQC1M2IRBIeCmsNRemKLROic/uRGbnuMGtPwThgSvYJyI/b+sjS7Xfba3Gri+KBuQGsqmwlK0e0eRA4enDKZhtq+7v+LaioqEkbE8YVoDTbKRrjCxxly/p2B0Hjc4srghg1yt4jgP+hwBnMJyGj62+fME7iGHCffuzbrtj1IftQFNhv/XYAK1ESZKcJJAjmarH2CRfH1skvHOWgEbDT4feDSAXwcgHrSeW2q+RaWOA4y4T1KbgqeVs1UQzb7X83y/UXeSygHxGKta47UPf+0BAJA8mcUQ7cjWHUfGoV/bK2077eUHz15qIb4NOllj4FxyMBnHM7ZC2XvUYQ3i0Bo3qmz+JAQbgh0updjsNST84WPRx4lTLfuyBVQ28DZmXwNBuCjOwImVbwsMwvIViEhKAN9FkdboiKDxTWVRZVSfBprE2AwlDmpgQf6Bi3XVH0xGTKMg/uTlNw2HjlZPdh9iYFcQd+vd0B7nbMu6DQrivw56YBAYbOMYxaHoFCS9ypelqaYHGjgzn05Td6/XmdJ1gUC3RbmdXrs9aCYz72wpMJ83rJDV4HwkExFQxsRKTM9TmU8V0E4W0jz7jhc5ZdwXEWwHztZp71ZU2MLVRipoupb3hAduCJxqHbonroa/CndazdtUZhGRWcG4ItpvNTl5Ira6mjFvbfoJq8oTO9g4+DCE1CjbxWpaH6KdsMzkP5pdxyHLtalkHBKbSUr0QCS9RVapkxkwGSGtPna9Xx8o178pJSEADxQl+gxJWGUSuo0C2UeXHj2iVgo4JvwQiwzgIiHN5upQbyOguD0LXfbt4+5ziuLDPCE0wbUtJGlXCGjKUax5Wj+y7KgiNhoZ0KFLuMQBZHZYeqHtE73slSZsXmqJDzuBT4j6FAR0BVbQsECdFJgfgqxyeDIaSNTojI3tdK8KlrJQ2+Cg65Dk+CxNpzZKP3WJXz1ItCkbhyfWiSQnFjygXBuhxlBox01sGSLVO3WPvywVNZZ99UzP2AV4+y/ghURZbQEptwQ9rClaPQAm/YP9x6lM4IzNNFUVkD1kPUqt8nQ7ElDpSBjfyPyeoHBtWJi/vGlTMv3eoiCoypx4Xz2UzJ18oshHkouIIHVNo2lRIkpU8Ftt5mudy7aTIgGgyAdDmrrCiaG9el8qInMwjqR7V/gyTtyFT5dk/ePBRcSZlApgaPkgYmBuPMNsrnxjNHihJsWhA+6vZqIyDkHRCXifVMrgGj3UnlYpQWr75WN1WLDPZUDd79huf23Au0KTQLzZVTHK3CaZRNjsA8FNwjYPE9sHCJ53XNIa/GBerezxfMon1aLFXZplFA2/cCpakiomBS15XzIjC2M6GLYlyyvu3i2r5n6b6DMj4cauV2dj3Y/ui6DZnpDR4zb2V8UCk0wM3ezULxawKllmlVi2sB2MHsXPV3C0ajoJVJsCzL5P8Pkg7Vm1kdRBkAAAAASUVORK5CYII=");
+    }
+
+    private void SaveSignature()
+    {
+        memoryService.Signature = Input.Signature;
+    }
+
+    private void OpenSignature()
+    {
+        navigationManager.NavigateTo(Input.SignatureAsBase64);
+    }
+
+    private void ReadSignature()
+    {
+        Input.Signature = memoryService.Signature;
+        StateHasChanged();
+    }
+}
diff --git a/SignaturePad/SignaturePad.razor.cs b/SignaturePad/SignaturePad.razor.cs
@@ -8,17 +8,8 @@ namespace SignaturePad
     public partial class SignaturePad
     {
         [Parameter]
-        public byte[] Value
-        {
-            get => _value;
-            set
-            {
-                if (value == _value) return;
-
-                _value = value;
-                UpdateImage();
-            }
-        }
+        public byte[] Value { get; set; } = [];
+
         [Parameter]
         public EventCallback<byte[]> ValueChanged { get; set; }
         [Parameter]
@@ -36,6 +27,7 @@ public byte[] Value
         public bool Disabled { get; set; }
 
 
+
         /// <summary>
         /// Captures all the custom attributes that are not part of BlazorBootstrap component.
         /// </summary>
@@ -45,8 +37,8 @@ public byte[] Value
         private readonly string _id = Guid.NewGuid().ToString();
         private readonly DotNetObjectReference<SignaturePad> _reference;
         private IJSObjectReference? _jsModule;
-        private byte[] _value = [];
-
+
+        
         public SignaturePad()
         {
             _reference = DotNetObjectReference.Create(this);
@@ -56,19 +48,19 @@ public SignaturePad()
         public async Task SignatureDataChangedAsync()
         {
             using MemoryStream memoryStream = new();
-            var dataReference = await _jsModule.InvokeAsync<IJSStreamReference>("getBase64", _id);
+            var dataReference = await _jsModule!.InvokeAsync<IJSStreamReference>("getBase64", _id);
             using var dataReferenceStream = await dataReference.OpenReadStreamAsync(maxAllowedSize: 10_000_000);
             await dataReferenceStream.CopyToAsync(memoryStream);
 
             string base64 = Encoding.UTF8.GetString(memoryStream.ToArray());
 
             try
             {
-                _value = Convert.FromBase64String(base64);
+                Value = Convert.FromBase64String(base64);
             }
             catch (Exception)
             {
-                _value = [];
+                Value = [];
             }
 
 
@@ -82,6 +74,8 @@ protected async override Task OnAfterRenderAsync(bool firstRender)
             {
                 _jsModule = await jsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.2");
                 await Setup();
+                await Update();
+                await UpdateImage();
             }
 
             await base.OnAfterRenderAsync(firstRender);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		@page "/ExistingSignature"

		<ExistingSignatureDemo @rendermode="InteractiveServer" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		@page "/ExistingSignature"

		<ExistingSignatureDemo />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,5 @@
		@page "/ExistingSignature"


		<ExistingSignatureDemo />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,4 +6,4 @@

		Welcome to your new app.

		<Demos.Core.SignaturePadDemos.HomeDemo />
		<HomeDemo />