From d2a2205f44c5d0abb789e620d0e50361d20c6987 Mon Sep 17 00:00:00 2001
From: MaxymGorn <maximus56132@gmail.com>
Date: Sat, 19 Feb 2022 21:29:21 +0200
Subject: [PATCH] add cropper component

---
 .../Client/Pages/CropperDemo.razor            | 10 +-
 .../Client/Pages/CropperDemo.razor.cs         | 52 +---------
 .../Base/CropperComponentBase.cs              | 20 ++--
 .../Base/ICropperComponentBase.cs             | 20 ++--
 .../Components/CropperComponent.razor         |  4 +
 .../Components/CropperComponent.razor.cs      | 95 ++++++++++++++++++
 .../Cropper.Blazor/Events/ActionEvent.cs      | 25 +++++
 .../Events/CropEndEvent/CropEndEvent.cs       | 16 +++
 .../Events/CropEvent/CropEvent.cs             | 14 +++
 .../Events/CropMoveEvent/CropMoveEvent.cs     | 16 +++
 .../Events/CropReadyEvent/CropReadyEvent.cs   | 12 +++
 .../Events/CropStartEvent/CropStartEvent.cs   | 16 +++
 .../Events/ZoomEvent/OriginalEvent.cs         | 21 ++++
 .../Events/ZoomEvent/ZoomEvent.cs             | 18 ++++
 .../Cropper.Blazor/Models/CropperData.cs      | 33 +++++++
 .../Cropper.Blazor/Models/DragMode.cs         | 21 ++++
 .../Cropper.Blazor/Models/Options.cs          | 98 ++++++++++++++++++-
 .../Cropper.Blazor/Models/SetDataOptions.cs   | 13 +++
 .../Cropper.Blazor/Models/ViewMode.cs         | 16 +++
 .../wwwroot/cropperJsInterop.js               | 15 +--
 .../Controllers/WeatherForecastController.cs  |  4 +-
 21 files changed, 463 insertions(+), 76 deletions(-)
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/ActionEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/CropEndEvent/CropEndEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/CropEvent/CropEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/CropMoveEvent/CropMoveEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/CropReadyEvent/CropReadyEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/CropStartEvent/CropStartEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/OriginalEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/ZoomEvent.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Models/CropperData.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Models/DragMode.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Models/SetDataOptions.cs
 create mode 100644 src/Cropper.Blazor/Cropper.Blazor/Models/ViewMode.cs

diff --git a/src/Cropper.Blazor/Client/Pages/CropperDemo.razor b/src/Cropper.Blazor/Client/Pages/CropperDemo.razor
index 3fbad49e..eb63e21e 100644
--- a/src/Cropper.Blazor/Client/Pages/CropperDemo.razor
+++ b/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="">
diff --git a/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs b/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs
index 3cefe6dc..2b220338 100644
--- a/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs
+++ b/src/Cropper.Blazor/Client/Pages/CropperDemo.razor.cs
@@ -7,10 +7,8 @@
 
 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()
@@ -18,7 +16,9 @@ protected override void OnInitialized()
             options = new Options()
             {
                 Preview = ".img-preview",
-                AspectRatio = 16f / 9
+                AspectRatio = (decimal)16 / 9,
+                ViewMode = ViewMode.Vm3,
+                DragMode = DragMode.Move.ToString()
             };
         }
 
@@ -26,51 +26,9 @@ 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");
-        }
     }
 }
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Base/CropperComponentBase.cs b/src/Cropper.Blazor/Cropper.Blazor/Base/CropperComponentBase.cs
index f4024479..9518aa03 100644
--- a/src/Cropper.Blazor/Cropper.Blazor/Base/CropperComponentBase.cs
+++ b/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)
         {
 
         }
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Base/ICropperComponentBase.cs b/src/Cropper.Blazor/Cropper.Blazor/Base/ICropperComponentBase.cs
index ef3a8f1a..07e2f699 100644
--- a/src/Cropper.Blazor/Cropper.Blazor/Base/ICropperComponentBase.cs
+++ b/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);
     }
 }
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor b/src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor
new file mode 100644
index 00000000..3d41faf9
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor
@@ -0,0 +1,4 @@
+<img @ref="imageReference"
+     class="@Class"
+     @onload="OnLoadImage"
+     src="@Src">
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor.cs b/src/Cropper.Blazor/Cropper.Blazor/Components/CropperComponent.razor.cs
new file mode 100644
index 00000000..733cf2bc
--- /dev/null
+++ b/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");
+        }
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/ActionEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/ActionEvent.cs
new file mode 100644
index 00000000..b1113bfa
--- /dev/null
+++ b/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
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/CropEndEvent/CropEndEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/CropEndEvent/CropEndEvent.cs
new file mode 100644
index 00000000..52902173
--- /dev/null
+++ b/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; }
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/CropEvent/CropEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/CropEvent/CropEvent.cs
new file mode 100644
index 00000000..8c7282d2
--- /dev/null
+++ b/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
+    {
+
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/CropMoveEvent/CropMoveEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/CropMoveEvent/CropMoveEvent.cs
new file mode 100644
index 00000000..6051da2f
--- /dev/null
+++ b/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; }
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/CropReadyEvent/CropReadyEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/CropReadyEvent/CropReadyEvent.cs
new file mode 100644
index 00000000..54bb6d82
--- /dev/null
+++ b/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
+    {
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/CropStartEvent/CropStartEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/CropStartEvent/CropStartEvent.cs
new file mode 100644
index 00000000..79ab16b2
--- /dev/null
+++ b/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; }
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/OriginalEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/OriginalEvent.cs
new file mode 100644
index 00000000..f7708c2f
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/OriginalEvent.cs
@@ -0,0 +1,21 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.Serialization;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Events.ZoomEvent
+{
+    public enum OriginalEvent
+    {
+        [EnumMember(Value = nameof(WheelEvent))]
+        WheelEvent,
+        [EnumMember(Value = nameof(PointerEvent))]
+        PointerEvent,
+        [EnumMember(Value = nameof(TouchEvent))]
+        TouchEvent,
+        [EnumMember(Value = nameof(MouseEvent))]
+        MouseEvent
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/ZoomEvent.cs b/src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/ZoomEvent.cs
new file mode 100644
index 00000000..8ed4dc7a
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Events/ZoomEvent/ZoomEvent.cs
@@ -0,0 +1,18 @@
+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.ZoomEvent
+{
+    public class ZoomEvent
+    {
+        [JsonPropertyName("oldRatio")]
+        public decimal OldRatio { get; set; }
+
+        [JsonPropertyName("ratio")]
+        public decimal Ratio { get; set; }
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Models/CropperData.cs b/src/Cropper.Blazor/Cropper.Blazor/Models/CropperData.cs
new file mode 100644
index 00000000..cb692dd0
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Models/CropperData.cs
@@ -0,0 +1,33 @@
+using Newtonsoft.Json;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Models
+{
+    public class CropperData
+    {
+        [JsonProperty("x", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal X { get; set; }
+
+        [JsonProperty("y", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal Y { get; set; }
+
+        [JsonProperty("width", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal Width { get; set; }
+
+        [JsonProperty("height", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal Height { get; set; }
+
+        [JsonProperty("rotate", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal Rotate { get; set; }
+
+        [JsonProperty("scaleX", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal ScaleX { get; set; }
+
+        [JsonProperty("scaleY", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal ScaleY { get; set; }
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Models/DragMode.cs b/src/Cropper.Blazor/Cropper.Blazor/Models/DragMode.cs
new file mode 100644
index 00000000..c440c27d
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Models/DragMode.cs
@@ -0,0 +1,21 @@
+using Newtonsoft.Json;
+using Newtonsoft.Json.Converters;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Runtime.Serialization;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Models
+{
+    public enum DragMode
+    {
+        [EnumMember(Value = "crop")]
+        Crop,
+        [EnumMember(Value = "move")]
+        Move,
+        [EnumMember(Value = "none")]
+        None
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Models/Options.cs b/src/Cropper.Blazor/Cropper.Blazor/Models/Options.cs
index 66fd8a74..d3a1630d 100644
--- a/src/Cropper.Blazor/Cropper.Blazor/Models/Options.cs
+++ b/src/Cropper.Blazor/Cropper.Blazor/Models/Options.cs
@@ -1,6 +1,8 @@
 using Newtonsoft.Json;
+using Newtonsoft.Json.Converters;
 using System;
 using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -10,9 +12,103 @@ namespace Cropper.Blazor.Models
     public class Options
     {
         [JsonProperty("aspectRatio", NullValueHandling = NullValueHandling.Ignore)]
-        public float? AspectRatio { get; set; }
+        public decimal AspectRatio { get; set; }
 
         [JsonProperty("preview", NullValueHandling = NullValueHandling.Ignore)]
         public string Preview { get; set; }
+
+        [JsonProperty("autoCrop", NullValueHandling = NullValueHandling.Ignore)]
+        public bool AutoCrop { get; set; }
+
+        [JsonProperty("autoCropArea", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal AutoCropArea { get; set; }
+
+        [JsonProperty("background", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Background { get; set; }
+
+        [JsonProperty("center", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Center { get; set; }
+
+        [JsonProperty("checkCrossOrigin", NullValueHandling = NullValueHandling.Ignore)]
+        public bool CheckCrossOrigin { get; set; }
+
+        [JsonProperty("checkOrientation", NullValueHandling = NullValueHandling.Ignore)]
+        public bool CheckOrientation { get; set; }
+
+        [JsonProperty("cropBoxMovable", NullValueHandling = NullValueHandling.Ignore)]
+        public bool CropBoxMovable { get; set; }
+
+        [JsonProperty("cropBoxResizable", NullValueHandling = NullValueHandling.Ignore)]
+        public bool CropBoxResizable { get; set; }
+
+        [JsonProperty("setDataOptions", NullValueHandling = NullValueHandling.Ignore)]
+        public SetDataOptions SetDataOptions { get; set; }
+
+        [JsonProperty("dragMode", NullValueHandling = NullValueHandling.Ignore)]
+        [EnumDataType(typeof(DragMode))]
+        public string DragMode { get; set; }
+
+        [JsonProperty("guides", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Guides { get; set; }
+
+        [JsonProperty("highlight", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Highlight { get; set; }
+
+        [JsonProperty("initialAspectRatio", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal InitialAspectRatio { get; set; }
+
+        [JsonProperty("minCanvasHeight", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal MinCanvasHeight { get; set; }
+
+        [JsonProperty("minCanvasWidth", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal MinCanvasWidth { get; set; }
+
+        [JsonProperty("minContainerHeight", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal MinContainerHeight { get; set; }
+
+        [JsonProperty("minContainerWidth", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal MinContainerWidth { get; set; }
+
+        [JsonProperty("minCropBoxHeight", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal MinCropBoxHeight { get; set; }
+
+        [JsonProperty("minCropBoxWidth", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal MinCropBoxWidth { get; set; }
+
+        [JsonProperty("modal", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Modal { get; set; }
+
+        [JsonProperty("movable", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Movable { get; set; }
+
+        [JsonProperty("responsive", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Responsive { get; set; }
+
+        [JsonProperty("restore", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Restore { get; set; }
+
+        [JsonProperty("rotatable", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Rotatable { get; set; }
+
+        [JsonProperty("scalable", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Scalable { get; set; }
+
+        [JsonProperty("toggleDragModeOnDblclick", NullValueHandling = NullValueHandling.Ignore)]
+        public bool ToggleDragModeOnDblclick { get; set; }
+
+        [JsonProperty("viewMode", NullValueHandling = NullValueHandling.Ignore)]
+        public ViewMode ViewMode { get; set; }
+
+        [JsonProperty("wheelZoomRatio", NullValueHandling = NullValueHandling.Ignore)]
+        public decimal WheelZoomRatio { get; set; }
+
+        [JsonProperty("zoomOnTouch", NullValueHandling = NullValueHandling.Ignore)]
+        public bool ZoomOnTouch { get; set; }
+
+        [JsonProperty("zoomOnWheel", NullValueHandling = NullValueHandling.Ignore)]
+        public bool ZoomOnWheel { get; set; }
+
+        [JsonProperty("zoomable", NullValueHandling = NullValueHandling.Ignore)]
+        public bool Zoomable { get; set; }
     }
 }
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Models/SetDataOptions.cs b/src/Cropper.Blazor/Cropper.Blazor/Models/SetDataOptions.cs
new file mode 100644
index 00000000..ce06256e
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Models/SetDataOptions.cs
@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Models
+{
+    public class SetDataOptions: CropperData
+    {
+
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/Models/ViewMode.cs b/src/Cropper.Blazor/Cropper.Blazor/Models/ViewMode.cs
new file mode 100644
index 00000000..ac0c3753
--- /dev/null
+++ b/src/Cropper.Blazor/Cropper.Blazor/Models/ViewMode.cs
@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Cropper.Blazor.Models
+{
+    public enum ViewMode
+    {
+        Vm1,
+        Vm2,
+        Vm3,
+        Vm4
+    }
+}
diff --git a/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js b/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js
index 29248ed7..efefe4a2 100644
--- a/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js
+++ b/src/Cropper.Blazor/Cropper.Blazor/wwwroot/cropperJsInterop.js
@@ -15,27 +15,30 @@ class CropperDecorator {
         //    throw "Parameter 'imageObject' must be is not null!";
         //}
         const options = {
+            dragMode: optionsImage.dragMode,
+            viewMode: optionsImage.viewMode,
             aspectRatio: optionsImage.aspectRatio,
             preview: optionsImage.preview,
             ready: function (event) {
                 imageObject.invokeMethodAsync('IsReady', event);
             },
             cropstart: function (event) {
-                imageObject.invokeMethodAsync('CropperIsStarted', event);
+                imageObject.invokeMethodAsync('CropperIsStarted', event.detail);
             },
             cropmove: function (event) {
-                imageObject.invokeMethodAsync('CropperIsMoved', event);
+                imageObject.invokeMethodAsync('CropperIsMoved', event.detail);
             },
             cropend: function (event) {
-                imageObject.invokeMethodAsync('CropperIsEnded', event);
+                imageObject.invokeMethodAsync('CropperIsEnded', event.detail);
             },
             crop: function (event) {
-                imageObject.invokeMethodAsync('CropperIsCroped', event);
+                imageObject.invokeMethodAsync('CropperIsCroped', event.detail);
             },
-            zoom: function (e) {
-                imageObject.invokeMethodAsync('CropperIsZoomed', event);
+            zoom: function (event) {
+                imageObject.invokeMethodAsync('CropperIsZoomed', event.detail);
             }
         };
+        console.log(options);
         this.cropperInstance = new Cropper(image, options);
     }
 }
diff --git a/src/Cropper.Blazor/Server/Controllers/WeatherForecastController.cs b/src/Cropper.Blazor/Server/Controllers/WeatherForecastController.cs
index 8f1265b7..b3e0509d 100644
--- a/src/Cropper.Blazor/Server/Controllers/WeatherForecastController.cs
+++ b/src/Cropper.Blazor/Server/Controllers/WeatherForecastController.cs
@@ -9,8 +9,8 @@ public class WeatherForecastController : ControllerBase
     {
         private static readonly string[] Summaries = new[]
         {
-        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
-    };
+            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        };
 
         private readonly ILogger<WeatherForecastController> _logger;