Made the SVG Move util do the move in real time

Author: ProgrammerAL

src/SvgHelpers/SvgHelpers/Components/SvgMoverComponent.razor

@@ -1,37 +1,38 @@
 @using BlazorMonaco.Editor
 @using ProgrammerAl.SvgHelpers.Components.AnimatedComponents
 
-<div class="flex flex-col gap-4 m-5 @(IsMoving ? "disabled" : "")">
-    <div class="flex gap-2">
-        <p class="mt-2">X:</p>
-        <input id="xInput" type="number" @bind=XAmount
-               class="border border-black min-w-16 py-2 px-4" />
-    </div>
-    <div class="flex gap-2">
-        <p class="mt-2">Y:</p>
-        <input id="yInput" type="number" @bind=YAmount
-               class="border border-black min-w-16 py-2 px-4" />
-    </div>
+<div class="flex flex-col gap-2">
 
-    <button type="button" @onclick=MoveSvgAsync
-            class="border border-black bg-green-800 min-h-12 text-gray-200">
-        Modify Elements
-    </button>
-</div>
+    <p class="text-sm">Move the X and Y coordinates of all elements in the given SVG. The XML provided can be a portion of the entire SVG, not the entire image.</p>
 
-<div class="flex flex-row justify-between px-4">
-    <p class="text-lg font-semibold">Original</p>
-    <p class="text-lg font-semibold">Modified</p>
-</div>
+    <div class="flex flex-row gap-12">
+        <div class="flex gap-2">
+            <p class="mt-2">X:</p>
+            <input id="xInput" type="number"
+                   @bind-value=XAmount
+                   @bind-value:event="onchange"
+                   @oninput=HandleXAmountChangedAsync
+                   class="border border-black min-w-16 py-2 px-4" />
+        </div>
+        <div class="flex gap-2">
+            <p class="mt-2">Y:</p>
+            <input id="yInput"
+                   type="number"
+                   @bind-value=YAmount
+                   @bind-value:event="onchange"
+                   @oninput=HandleYAmountChangedAsync
+                   class="border border-black min-w-16 py-2 px-4" />
+        </div>
+    </div>
+
+    <div class="flex flex-row justify-between px-4 mt-4">
+        <p class="text-lg font-semibold">Original</p>
+        <p class="text-lg font-semibold">Modified</p>
+    </div>
 
-@if (IsMoving)
-{
-    <GreenSpinnerComponent TailwindCssHeightClass="h-24" TailwindCssWidthClass="w-24" />
-}
-else
-{
     <StandaloneDiffEditor @ref="_diffEditor"
                           Id="diff-editor"
                           ConstructionOptions="DiffEditorConstructionOptions"
                           OnDidInit="EditorOnDidInit" />
-}
+
+</div>

src/SvgHelpers/SvgHelpers/Components/SvgMoverComponent.razor.cs

@@ -22,9 +22,7 @@ public partial class SvgMoverComponent : ComponentBase
 
     private const string DefaultSvgText =
 """
-<svg xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-</svg>
+<rect x="1" y="1"></rect>
 """;
 
     private StandaloneDiffEditor _diffEditor = null!;
@@ -35,8 +33,6 @@ public partial class SvgMoverComponent : ComponentBase
     private string XAmount { get; set; } = "0";
     private string YAmount { get; set; } = "0";
 
-    private bool IsMoving { get; set; }
-
     private StandaloneDiffEditorConstructionOptions DiffEditorConstructionOptions(StandaloneDiffEditor editor)
     {
         return new StandaloneDiffEditorConstructionOptions
@@ -68,11 +64,20 @@ private async Task<TextModel> GetOrCreateTextModelAsync(string textModelName)
         return textValue;
     }
 
-    private async Task MoveSvgAsync()
+    private async void HandleXAmountChangedAsync(ChangeEventArgs e)
     {
-        IsMoving = true;
-        await InvokeAsync(StateHasChanged);
+        XAmount = e.Value?.ToString() ?? "0";
+        await HandleInputChangedAsync();
+    }
 
+    private async void HandleYAmountChangedAsync(ChangeEventArgs e)
+    {
+        YAmount = e.Value?.ToString() ?? "0";
+        await HandleInputChangedAsync();
+    }
+
+    private async Task HandleInputChangedAsync()
+    {
         var originalModel = await GetOrCreateTextModelAsync(EditorOriginalTextModel);
         var modifiedModel = await GetOrCreateTextModelAsync(EditorModifiedTextModel);
 
@@ -86,19 +91,16 @@ await _diffEditor.SetModel(new DiffEditorModel
             Original = originalModel,
             Modified = modifiedModel
         });
-
-        IsMoving = false;
-        await InvokeAsync(StateHasChanged);
     }
 
     private string MoveSvgElements(string svgText)
     {
-        if (!int.TryParse(XAmount, out int xAmount))
+        if (!long.TryParse(XAmount, out var xAmount))
         {
             xAmount = 0;
         }
 
-        if (!int.TryParse(YAmount, out int yAmount))
+        if (!long.TryParse(YAmount, out var yAmount))
         {
             yAmount = 0;
         }

src/SvgHelpers/SvgHelpers/Components/TabComponent.razor

@@ -5,7 +5,7 @@
             @foreach (var tabPage in Pages)
             {
                 <button type="button"
-                        class="border p-2 @(tabPage == ActivePage ? ActivePageTabCss : InactivePageTabCss)"
+                        class="border @(tabPage == ActivePage ? ActivePageTabCss : InactivePageTabCss)"
                         @onclick=@(() => ActivatePage(tabPage))>
                     @tabPage.Title
                 </button>
@@ -18,8 +18,8 @@
 </CascadingValue>
 
 @code {
-    private const string ActivePageTabCss = "border-2 text-lg";
-    private const string InactivePageTabCss = "text-base";
+    private const string ActivePageTabCss = "p-4 border-4 text-xl";
+    private const string InactivePageTabCss = "p-2 text-base";
 
     // Next line is needed so we are able to add <TabPage> components inside
     [Parameter]

src/SvgHelpers/SvgHelpers/Pages/About.razor

@@ -1,6 +1,6 @@
 @page "/about"
 
-<p>This site implements utilities to edit SVG files.</p>
+<p>This site implements utilities to help a person manually edit SVG files.</p>
 
 <p>The source code is available at: <a href="https://github.com/ProgrammerAL/SvgHelpers" target="_blank">https://github.com/ProgrammerAL/SvgHelpers</a></p>
 

src/SvgHelpers/SvgHelpers/SvgModifyUtilities/SvgMoverUtil.cs

@@ -15,11 +15,11 @@ namespace ProgrammerAl.SvgHelpers.SvgModifyUtilities;
 /// </summary>
 public class SvgHelpersUtil
 {
-    private record AttributeModification(string AttributeName, int ModifyAmount);
+    private record AttributeModification(string AttributeName, long ModifyAmount);
 
     private readonly ImmutableDictionary<string, ImmutableArray<AttributeModification>> _simpleElementModifications;
 
-    public SvgHelpersUtil(string svgText, int xMove, int yMove, IModificationLogger logger)
+    public SvgHelpersUtil(string svgText, long xMove, long yMove, IModificationLogger logger)
     {
         OriginalSvgText = svgText;
         XMove = xMove;
@@ -76,8 +76,8 @@ public SvgHelpersUtil(string svgText, int xMove, int yMove, IModificationLogger
     }
 
     public string OriginalSvgText { get; }
-    public int XMove { get; }
-    public int YMove { get; }
+    public long XMove { get; }
+    public long YMove { get; }
     public IModificationLogger Logger { get; }
 
     public string ModifiedSvgText { get; private set; } = string.Empty;