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, 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");
+ }
+
+ 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);