Implementation of the ClickShape #11 event (#12)

* Implementation of the ClickedShape #11 event to receive click events on a shape regardless of the state of the ReadOnly property. * The example page has been modified to show the new behavior * Changed name event ClickedShape to OnShapeClicked
florian03-1 · Jun 25, 2023 · 38b8d8a · 38b8d8a
1 parent 7798587
commit 38b8d8a
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 11 deletions.
diff --git a/BlazorSvgEditor.SvgEditor/ShapeEditors/CircleEditor.razor b/BlazorSvgEditor.SvgEditor/ShapeEditors/CircleEditor.razor
@@ -6,7 +6,7 @@
 <circle @ref=ElementReference
 
         @onpointerdown="Select"
-
+        @onclick="ClickShape"
         @onpointerenter="Enter"
         @onpointerleave="Leave"
 

diff --git a/BlazorSvgEditor.SvgEditor/ShapeEditors/PolygonEditor.razor b/BlazorSvgEditor.SvgEditor/ShapeEditors/PolygonEditor.razor
@@ -6,7 +6,7 @@
 <polygon @ref=ElementReference
 
          @onpointerdown="Select"
-
+         @onclick="ClickShape"
          @onpointerenter="Enter"
          @onpointerleave="Leave"
 

diff --git a/BlazorSvgEditor.SvgEditor/ShapeEditors/RectangleEditor.razor b/BlazorSvgEditor.SvgEditor/ShapeEditors/RectangleEditor.razor
@@ -6,7 +6,7 @@
 <rect @ref=ElementReference
 
       @onpointerdown="Select"
-
+      @onclick="ClickShape"
       @onpointerenter="Enter"
       @onpointerleave="Leave"
 

diff --git a/BlazorSvgEditor.SvgEditor/ShapeEditors/ShapeEditor.cs b/BlazorSvgEditor.SvgEditor/ShapeEditors/ShapeEditor.cs
@@ -39,6 +39,11 @@ protected void Select(PointerEventArgs eventArgs)
         SvgElement.SvgEditor.SelectShape(SvgElement, eventArgs);
     }
 
+    protected void ClickShape()
+    {
+        SvgElement.SvgEditor.OnShapeClicked.InvokeAsync(SvgElement.CustomId);
+    }
+
     protected void OnAnchorSelected(int anchorIndex)
     {
         SvgElement.SvgEditor.EditMode = EditMode.MoveAnchor;

diff --git a/BlazorSvgEditor.SvgEditor/SvgEditor.Main.cs b/BlazorSvgEditor.SvgEditor/SvgEditor.Main.cs
@@ -87,9 +87,10 @@ public int SelectedShapeId
         }
     }
     [Parameter] public EventCallback<int> SelectedShapeIdChanged { get; set; }
-
-
-
+    [Parameter] public EventCallback<int> OnShapeClicked { get; set; }
+
+
+
     //Func for ImageSource Loading Task
     [Parameter] public Func<Task<(string imageSource, int width, int height)>>? ImageSourceLoadingFunc { get; set; }
     [Parameter] public RenderFragment? LoadingSpinner { get; set; }

diff --git a/BlazorSvgEditor.WasmTest/Pages/Preview.razor b/BlazorSvgEditor.WasmTest/Pages/Preview.razor
@@ -14,7 +14,9 @@
 
     <div class="o-editor">
         <SvgEditor @ref="svgEditor" CssClass="border border-gray-200 rounded-lg shadow-md" MinScale="0.8" ImageSize="(1000,750)" ImageManipulations="ImageManipulations"
-                   OnShapeChanged="EditorShapeChanged" ImageSourceLoadingFunc="GetImageSource" @bind-SelectedShapeId="SelectedShapeId" ReadOnly="false">
+                   OnShapeChanged="EditorShapeChanged" ImageSourceLoadingFunc="GetImageSource"
+                   OnShapeClicked="EditorShapeClicked"
+                   @bind-SelectedShapeId="SelectedShapeId" ReadOnly="ReadOnly">
             <LoadingSpinner>
 
                 <div class="flex items-center justify-center h-full">
@@ -61,7 +63,8 @@
 
                 <div class="inline-flex mt-2" role="group">
                     <button @onclick="ResetTransform" type="button" class="shadow-sm flex-grow focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2 mr-2">Reset Transformation</button>
-                    <button @onclick="ClearAll" type="button" class="shadow-sm flex-grow focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2">Clear</button>
+                    <button @onclick="ClearAll" type="button" class="shadow-sm flex-grow focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2 mr-2">Clear</button>
+                    <button @onclick="@(()=> ReadOnly=!ReadOnly)" type="button" class="shadow-sm flex-grow focus:outline-none text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2">@(ReadOnly? "Read Only":"Editable")</button>
                 </div>
             </div>
 
@@ -123,7 +126,7 @@
 
                 @foreach (var shape in Shapes)
                 {
-                    <div @onclick="() => ShapeSelected(shape.CustomId)" class="cursor-pointer border border-gray-300 p-1.5 inline-flex rounded-lg mb-2 @(shape.CustomId == SelectedShapeId ? "border-red-900 bg-red-300" : "")">
+                    <div @onclick="() => ShapeSelected(shape.CustomId)" class="cursor-pointer border border-gray-300 p-1.5 inline-flex rounded-lg mb-2 @(((shape.CustomId == SelectedShapeId) || (shape.CustomId == ClickedShapeId))  ? "border-red-900 bg-red-300" : "")">
                         <b class="mr-2">@(shape.ShapeType.ToString()):</b>
                         <p>(Id: @shape.CustomId)</p>
                     </div>

diff --git a/BlazorSvgEditor.WasmTest/Pages/Preview.razor.cs b/BlazorSvgEditor.WasmTest/Pages/Preview.razor.cs
@@ -9,9 +9,10 @@ public partial class Preview
 {
     private SvgEditor? svgEditor;
     private int SelectedShapeId { get; set; }
+    private int ClickedShapeId { get; set; }    
+    private bool ReadOnly { get; set; } = false; 
 
-
-    //
+
     private List<Shape> Shapes = new();
     string status = "--Status--";
 
@@ -112,4 +113,9 @@ private void DeleteShape()
     {
         svgEditor?.RemoveSelectedShape();
     }
+
+    void EditorShapeClicked(int CustomId)
+    {
+        ClickedShapeId = CustomId;
+    }
 }