Added icon maker demo.

KristofferStrube · Apr 1, 2024 · 300f42b · 300f42b
1 parent 527c1e8
commit 300f42b
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 0 deletions.
diff --git a/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Pages/IconMaker.razor b/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Pages/IconMaker.razor
@@ -0,0 +1,18 @@
+@page "/IconMaker"
+@inject IJSRuntime JSRuntime
+
+<button class="btn btn-primary" @onclick=Copy>Copy SVG to clipboard</button>
+<div style="display:flex;flex-direction:row;width:100%;">
+    <textarea @bind="Input" @bind:event="oninput" style="width:100%;" />
+    <div style="height:80vh;aspect-ratio:1">
+        <SVGEditor @ref=sVGEditor
+                   Input=@Input
+                   InputUpdated="(string s) => { Input = s; StateHasChanged(); }"
+                   InputRendered="InputHasBeenRendered"
+                   DisableZoom=true
+                   DisablePanning=true
+                   SnapToInteger=true
+                   />
+    </div>
+</div>
+
diff --git a/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Pages/IconMaker.razor.cs b/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Pages/IconMaker.razor.cs
@@ -0,0 +1,30 @@
+using Microsoft.JSInterop;
+
+namespace KristofferStrube.Blazor.SVGEditor.WasmExample.Pages;
+public partial class IconMaker
+{
+    protected SVGEditor sVGEditor = default!;
+
+    protected string Input = "";
+
+    protected void InputHasBeenRendered()
+    {
+        double newScale = 1 / (16 / sVGEditor.BBox.Height);
+        if (sVGEditor.Scale != newScale)
+        {
+            sVGEditor.Scale = newScale;
+            StateHasChanged();
+        }
+    }
+
+    public async Task Copy()
+    {
+        string SVG = $"""
+                    <svg class="bi" width="30" height="30" viewBox="0 0 16 16">
+                        {Input}
+                    </svg>
+                    """;
+
+        await JSRuntime.InvokeVoidAsync("navigator.clipboard.writeText", SVG);
+    }
+}
diff --git a/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Pages/IconMaker.razor.css b/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Pages/IconMaker.razor.css
@@ -0,0 +1,23 @@
+::deep .anchor-inner-thin {
+    stroke-width: 2;
+    r: 12
+}
+
+::deep .anchor-inner-thick {
+    stroke-width: 4;
+    r: 12
+}
+
+::deep .anchor-outer-thin {
+    stroke-width: 4;
+    r: 14
+}
+
+::deep .anchor-outer-thick {
+    stroke-width: 6;
+    r: 16
+}
+
+::deep .svg-editor {
+    background-color: #f5f5f5;
+}
diff --git a/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Shared/NavMenu.razor b/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Shared/NavMenu.razor
@@ -37,6 +37,14 @@
                 <span class="oi oi-play-circle" aria-hidden="true"></span> Animation
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="IconMaker">
+                <svg class="bi" width="30" height="30" viewBox="0 0 16 16">
+                    <polygon stroke="#FFFFFF" stroke-width="2" fill="none" points="2,6 6,6 8,2 10,6 14,6 11,9 12,14 8,11 4,14 5,9" stroke-linejoin="round"></polygon>
+                </svg>
+                Icon Maker
+            </NavLink>
+        </li>
     </ul>
 </div>
 

diff --git a/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Shared/NavMenu.razor.css b/samples/KristofferStrube.Blazor.SVGEditor.WasmExample/Shared/NavMenu.razor.css
@@ -18,6 +18,16 @@
     top: -2px;
 }
 
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
 .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;