Feature/cropper component

src/Cropper.Blazor/Client/Pages/CropperDemo.razor

@@ -1,12 +1,10 @@
 @page "/cropper"
 <h3>Cropper</h3>
 <div class="img-container">
-    <img @ref="imageReference"
-         class=""
-         onerror="this.onerror=null; this.src='https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/2048px-No_image_available.svg.png'"
-         @onload="OnLoadImage"
-         src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
-         alt="Picture">
+    <Cropper.Blazor.Components.CropperComponent
+        Src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg"
+        Options="options">    
+    </Cropper.Blazor.Components.CropperComponent>
 </div>
 <div>
     <div class="">

src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs

@@ -7,70 +7,28 @@
 
 namespace Cropper.Blazor.Client.Pages
 {
-    public partial class CropperDemo : ICropperComponentBase
+    public partial class CropperDemo
     {
-        [Inject] ICropperJsInterop CropperJsIntertop { get; set; }
-        private ElementReference imageReference;
         private Options options;
 
         protected override void OnInitialized()
         {
             options = new Options()
             {
                 Preview = ".img-preview",
-                AspectRatio = 16f / 9
+                AspectRatio = (decimal)16 / 9,
+                ViewMode = ViewMode.Vm3,
+                DragMode = DragMode.Move.ToString()
             };
         }
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             if (firstRender)
             {
-                await CropperJsIntertop.LoadAsync();
+
             }
             await base.OnAfterRenderAsync(firstRender);
         }
-
-        private void OnLoadImage(ProgressEventArgs progressEventArgs)
-        {
-            ICropperComponentBase cropperComponentBase = this;
-            CropperJsIntertop.InitCropper(imageReference, options, DotNetObjectReference.Create(cropperComponentBase));
-        }
-
-        [JSInvokable]
-        public void CropperIsCroped(EventArgs eventArgs)
-        {
-            Console.WriteLine("CropperIsCroped");
-        }
-
-        [JSInvokable]
-        public void CropperIsEnded(EventArgs eventArgs)
-        {
-            Console.WriteLine("CropperIsEnded");
-        }
-
-        [JSInvokable]
-        public void CropperIsMoved(EventArgs eventArgs)
-        {
-            Console.WriteLine("CropperIsMoved");
-        }
-
-        [JSInvokable]
-        public void CropperIsStarted(EventArgs eventArgs)
-        {
-            Console.WriteLine("CropperIsStarted");
-        }
-
-        [JSInvokable]
-        public void CropperIsZoomed(EventArgs eventArgs)
-        {
-            Console.WriteLine("CropperIsZoomed");
-        }
-
-        [JSInvokable]
-        public void IsReady(EventArgs eventArgs)
-        {
-            Console.WriteLine("IsReady");
-        }
     }
 }

src/Cropper.Blazor/Cropper.Blazor/Base/CropperComponentBase.cs

@@ -1,4 +1,10 @@
-using Microsoft.AspNetCore.Components;
+using Cropper.Blazor.Events.CropEndEvent;
+using Cropper.Blazor.Events.CropEvent;
+using Cropper.Blazor.Events.CropMoveEvent;
+using Cropper.Blazor.Events.CropReadyEvent;
+using Cropper.Blazor.Events.CropStartEvent;
+using Cropper.Blazor.Events.ZoomEvent;
+using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
@@ -11,37 +17,37 @@ namespace Cropper.Blazor.Base
     public class CropperComponentBase : ICropperComponentBase
     {
         [JSInvokable(nameof(CropperComponentBase.IsReady))]
-        public void IsReady(EventArgs eventArgs)
+        public void IsReady(CropReadyEvent cropReadyEvent)
         {
 
         }
 
         [JSInvokable(nameof(CropperComponentBase.CropperIsStarted))]
-        public void CropperIsStarted(EventArgs eventArgs)
+        public void CropperIsStarted(CropStartEvent cropStartEvent)
         {
 
         }
 
         [JSInvokable(nameof(CropperComponentBase.CropperIsMoved))]
-        public void CropperIsMoved(EventArgs eventArgs)
+        public void CropperIsMoved(CropMoveEvent cropMoveEvent)
         {
 
         }
 
         [JSInvokable(nameof(CropperComponentBase.CropperIsEnded))]
-        public void CropperIsEnded(EventArgs eventArgs)
+        public void CropperIsEnded(CropEndEvent cropEndEvent)
         {
 
         }
 
         [JSInvokable(nameof(CropperComponentBase.CropperIsCroped))]
-        public void CropperIsCroped(EventArgs eventArgs)
+        public void CropperIsCroped(CropEvent cropEvent)
         {
 
         }
 
         [JSInvokable(nameof(CropperComponentBase.CropperIsZoomed))]
-        public void CropperIsZoomed(EventArgs eventArgs)
+        public void CropperIsZoomed(ZoomEvent zoomEvent)
         {
 
         }

src/Cropper.Blazor/Cropper.Blazor/Base/ICropperComponentBase.cs

@@ -1,4 +1,10 @@
-using Microsoft.AspNetCore.Components;
+using Cropper.Blazor.Events.CropEndEvent;
+using Cropper.Blazor.Events.CropEvent;
+using Cropper.Blazor.Events.CropMoveEvent;
+using Cropper.Blazor.Events.CropReadyEvent;
+using Cropper.Blazor.Events.CropStartEvent;
+using Cropper.Blazor.Events.ZoomEvent;
+using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
@@ -11,21 +17,21 @@ namespace Cropper.Blazor.Base
     public interface ICropperComponentBase
     {
         [JSInvokable(nameof(ICropperComponentBase.CropperIsCroped))]
-        void CropperIsCroped(EventArgs eventArgs);
+        void CropperIsCroped(CropEvent cropEvent);
 
         [JSInvokable(nameof(ICropperComponentBase.CropperIsEnded))]
-        void CropperIsEnded(EventArgs eventArgs);
+        void CropperIsEnded(CropEndEvent cropEndEvent);
 
         [JSInvokable(nameof(ICropperComponentBase.CropperIsMoved))]
-        void CropperIsMoved(EventArgs eventArgs);
+        void CropperIsMoved(CropMoveEvent cropMoveEvent);
 
         [JSInvokable(nameof(ICropperComponentBase.CropperIsStarted))]
-        void CropperIsStarted(EventArgs eventArgs);
+        void CropperIsStarted(CropStartEvent cropStartEvent);
 
         [JSInvokable(nameof(ICropperComponentBase.CropperIsZoomed))]
-        void CropperIsZoomed(EventArgs eventArgs);
+        void CropperIsZoomed(ZoomEvent zoomEvent);
 
         [JSInvokable(nameof(ICropperComponentBase.IsReady))]
-        void IsReady(EventArgs eventArgs);
+        void IsReady(CropReadyEvent cropReadyEvent);
     }
 }

src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor

@@ -0,0 +1,4 @@
+<img @ref="imageReference"
+     class="@Class"
+     @onload="OnLoadImage"
+     src="@Src">

src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor.cs

@@ -0,0 +1,95 @@
+using Cropper.Blazor.Base;
+using Cropper.Blazor.Events.CropEndEvent;
+using Cropper.Blazor.Events.CropEvent;
+using Cropper.Blazor.Events.CropMoveEvent;
+using Cropper.Blazor.Events.CropReadyEvent;
+using Cropper.Blazor.Events.CropStartEvent;
+using Cropper.Blazor.Events.ZoomEvent;
+using Cropper.Blazor.Models;
+using Cropper.Blazor.Services;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Components
+{
+    public partial class CropperComponent : ICropperComponentBase
+    {
+        [Inject] ICropperJsInterop CropperJsIntertop { get; set; }
+
+        private ElementReference imageReference;
+
+        [Parameter]
+        public Options Options { get; set; }
+
+        [Parameter]
+        public string Src { get; set; }
+
+        [Parameter]
+        public string Class { get; set; }
+
+
+        protected override void OnInitialized()
+        {
+
+        }
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            if (firstRender)
+            {
+                await CropperJsIntertop.LoadAsync();
+            }
+            await base.OnAfterRenderAsync(firstRender);
+        }
+
+        private void OnLoadImage(ProgressEventArgs progressEventArgs)
+        {
+            ICropperComponentBase cropperComponentBase = this;
+            CropperJsIntertop.InitCropper(imageReference, Options, DotNetObjectReference.Create(cropperComponentBase));
+        }
+
+        [JSInvokable]
+        public void CropperIsCroped(CropEvent cropEvent)
+        {
+            Console.WriteLine($"CropEvent, X: {cropEvent.X}, Y: {cropEvent.Y}, " +
+                $"Height: {cropEvent.Height}, Width: {cropEvent.Width}, " +
+                $"ScaleX: {cropEvent.ScaleX}, ScaleY: {cropEvent.ScaleY}, Rotate: {cropEvent.Rotate}");
+        }
+
+        [JSInvokable]
+        public void CropperIsEnded(CropEndEvent cropEndEvent)
+        {
+            Console.WriteLine($"CropEndEvent, {cropEndEvent.ActionEvent}");
+        }
+
+        [JSInvokable]
+        public void CropperIsMoved(CropMoveEvent cropMoveEvent)
+        {
+            Console.WriteLine($"CropMoveEvent, {cropMoveEvent.ActionEvent}");
+        }
+
+        [JSInvokable]
+        public void CropperIsStarted(CropStartEvent cropStartEvent)
+        {
+            Console.WriteLine($"CropStartEvent, {cropStartEvent.ActionEvent}");
+        }
+
+        [JSInvokable]
+        public void CropperIsZoomed(ZoomEvent zoomEvent)
+        {
+            Console.WriteLine($"ZoomEvent, OldRatio: {zoomEvent.OldRatio}, Ratio: {zoomEvent.Ratio}");
+        }
+
+        [JSInvokable]
+        public void IsReady(CropReadyEvent cropReadyEvent)
+        {
+            Console.WriteLine("IsReady");
+        }
+    }
+}

src/Cropper.Blazor/Cropper.Blazor/Events/ActionEvent.cs

@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.Serialization;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events
+{
+    public enum ActionEvent
+    {
+        Crop,
+        Move,
+        Zoom,
+        E,
+        S,
+        W, 
+        N,
+        Ne, 
+        Nw, 
+        Se, 
+        Sw,
+        All
+    }
+}

src/Cropper.Blazor/Cropper.Blazor/Events/CropEndEvent/CropEndEvent.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events.CropEndEvent
+{
+    public class CropEndEvent
+    {
+        [JsonConverter(typeof(JsonStringEnumConverter))]
+        [JsonPropertyName("action")]
+        public ActionEvent ActionEvent { get; set; }
+    }
+}

src/Cropper.Blazor/Cropper.Blazor/Events/CropEvent/CropEvent.cs

@@ -0,0 +1,14 @@
+using Cropper.Blazor.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events.CropEvent
+{
+    public class CropEvent : CropperData
+    {
+
+    }
+}

src/Cropper.Blazor/Cropper.Blazor/Events/CropMoveEvent/CropMoveEvent.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events.CropMoveEvent
+{
+    public class CropMoveEvent
+    {
+        [JsonConverter(typeof(JsonStringEnumConverter))]
+        [JsonPropertyName("action")]
+        public ActionEvent ActionEvent { get; set; }
+    }
+}

src/Cropper.Blazor/Cropper.Blazor/Events/CropReadyEvent/CropReadyEvent.cs

@@ -0,0 +1,12 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events.CropReadyEvent
+{
+    public class CropReadyEvent
+    {
+    }
+}

src/Cropper.Blazor/Cropper.Blazor/Events/CropStartEvent/CropStartEvent.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Text.Json.Serialization;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events.CropStartEvent
+{
+    public class CropStartEvent
+    {
+        [JsonConverter(typeof(JsonStringEnumConverter))]
+        [JsonPropertyName("action")]
+        public ActionEvent ActionEvent { get; set; }
+    }
+}