Merge branch 'rel-1.3'

Megabit · Nov 12, 2023 · 620f4aa · 620f4aa
2 parents 5b8fb90 + ece5c9f
commit 620f4aa
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/Documentation/Blazorise.Docs/Components/Commercial/Pricing.razor b/Documentation/Blazorise.Docs/Components/Commercial/Pricing.razor
@@ -19,7 +19,7 @@
              <Row Margin="Margin.Is4.FromBottom" TextAlignment="TextAlignment.Center">
                  <Column Flex="Flex.Column.AlignItems.Center">
                      <DevelopersPicker @bind-Value="@quantity" />
-                     <Span Padding="Padding.Is3.FromTop">users</Span>
+                     <Span Padding="Padding.Is3.FromTop">developers</Span>
                  </Column>
              </Row>
              <Row Margin="Margin.Is4.FromBottom" TextAlignment="TextAlignment.Center">

diff --git a/Documentation/Blazorise.Docs/Pages/Home/Index.razor b/Documentation/Blazorise.Docs/Pages/Home/Index.razor
@@ -4,7 +4,7 @@
 
 <PageHeader>
     <Title>
-        Dev Focused <Span Class="gradient-commercial">Blazor Component</Span> Library
+        Developer Focused <Span Class="gradient-commercial">Blazor Component</Span> Library
     </Title>
     <Subtitle>
         Build Blazor web applications <Strong>from scratch</Strong> with a set of <Strong>80+</Strong> native Blazor UI components.

diff --git a/Source/Extensions/Blazorise.SignaturePad/wwwroot/signaturepad.js b/Source/Extensions/Blazorise.SignaturePad/wwwroot/signaturepad.js
@@ -9,6 +9,12 @@ export function initialize(dotNetAdapter, element, elementId, options) {
     if (!element)
         return;
 
+    // we need to match the canvas size ans size in styles so that we can properly calculate scaling based on screen size
+    if (element.width && element.height) {
+        element.style.width = `${element.width}px`;
+        element.style.height = `${element.height}px`;
+    }
+
     const sigpad = new SignaturePad(element, {
         minWidth: options.minLineWidth || 0.5,
         maxWidth: options.maxLineWidth || 2.5,
@@ -31,11 +37,14 @@ export function initialize(dotNetAdapter, element, elementId, options) {
     const instance = {
         options: options,
         sigpad: sigpad,
-        dotNetAdapter: dotNetAdapter
+        dotNetAdapter: dotNetAdapter,
+        element: element
     };
 
     registerToEvents(dotNetAdapter, instance);
 
+    resizeCanvas(sigpad, element);
+
     _instances[elementId] = instance;
 }
 
@@ -176,4 +185,38 @@ function getImageDataURL(sigpad, options) {
     }
 
     return sigpad.toDataURL("image/png", options.imageQuality || 1);
+}
+
+window.onresize = resizeAllCanvas;
+
+function resizeAllCanvas() {
+    if (_instances) {
+        for (let i = 0; i < _instances.length; i++) {
+            const instance = _instances[i];
+
+            if (instance) {
+                resizeCanvas(instance.sigpad, instance.element);
+            }
+        }
+    }
+}
+
+function resizeCanvas(sigpad, canvas) {
+    if (!sigpad || !canvas) {
+        return null;
+    }
+
+    // When zoomed out to less than 100%, for some very strange reason,
+    // some browsers report devicePixelRatio as less than 1
+    // and only part of the canvas is cleared then.
+    const ratio = Math.max(window.devicePixelRatio || 1, 1);
+
+    const context = canvas.getContext("2d");
+
+    // This part causes the canvas to be cleared
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    context.scale(ratio, ratio);
+
+    sigpad.fromData(sigpad.toData());
 }