From 69c8198db6a5802c877a04b144f00c2fb2a314a1 Mon Sep 17 00:00:00 2001
From: Heather <30523814+Heathermcx@users.noreply.github.com>
Date: Tue, 12 Dec 2023 10:37:27 +1100
Subject: [PATCH] Use Controls to implement node resizing (#10)

---
 .../Documentation/Controls/Overview.razor     |  35 ++++++++
 .../Controls/Default/ResizeControl.cs         |  38 ++++++++
 src/Blazor.Diagrams.Core/Models/GroupModel.cs |  26 ++----
 src/Blazor.Diagrams.Core/Models/NodeModel.cs  |  23 ++++-
 .../Resizing/BottomLeftResizerProvider.cs     |  75 ++++++++++++++++
 .../Resizing/BottomRightResizerProvider.cs    |  66 ++++++++++++++
 .../Positions/Resizing/IResizerProvider.cs    |  14 +++
 .../Resizing/TopLeftResizerProvider.cs        |  75 ++++++++++++++++
 .../Resizing/TopRightResizerProvider.cs       |  74 ++++++++++++++++
 src/Blazor.Diagrams/BlazorDiagram.cs          |   3 +-
 .../Controls/ResizeControlWidget.razor        |  10 +++
 .../Components/NodeWidget.razor               |  10 ++-
 .../wwwroot/default.styles.css                |  24 +++++
 .../wwwroot/default.styles.min.css            |   2 +-
 .../wwwroot/default.styles.min.css.gz         | Bin 683 -> 735 bytes
 src/Blazor.Diagrams/wwwroot/style.min.css.gz  | Bin 409 -> 409 bytes
 .../Controls/ResizeControlTests.cs            |  75 ++++++++++++++++
 .../BottomLeftResizerProviderTests.cs         |  82 ++++++++++++++++++
 .../BottomRightResizerProviderTests.cs        |  80 +++++++++++++++++
 .../Resizing/TopLeftResizerProviderTests.cs   |  82 ++++++++++++++++++
 .../Resizing/TopRightResizerProviderTests.cs  |  82 ++++++++++++++++++
 .../Controls/ResizeControlWidgetTests.cs      |  25 ++++++
 22 files changed, 876 insertions(+), 25 deletions(-)
 create mode 100644 src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs
 create mode 100644 src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs
 create mode 100644 src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs
 create mode 100644 src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs
 create mode 100644 src/Blazor.Diagrams.Core/Positions/Resizing/TopLeftResizerProvider.cs
 create mode 100644 src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs
 create mode 100644 src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor
 create mode 100644 tests/Blazor.Diagrams.Core.Tests/Controls/ResizeControlTests.cs
 create mode 100644 tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomLeftResizerProviderTests.cs
 create mode 100644 tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomRightResizerProviderTests.cs
 create mode 100644 tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopLeftResizerProviderTests.cs
 create mode 100644 tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopRightResizerProviderTests.cs
 create mode 100644 tests/Blazor.Diagrams.Tests/Components/Controls/ResizeControlWidgetTests.cs

diff --git a/site/Site/Pages/Documentation/Controls/Overview.razor b/site/Site/Pages/Documentation/Controls/Overview.razor
index bd87fa9a1..335838ae5 100644
--- a/site/Site/Pages/Documentation/Controls/Overview.razor
+++ b/site/Site/Pages/Documentation/Controls/Overview.razor
@@ -3,6 +3,7 @@
 @using Blazor.Diagrams.Core.Controls;
 @using Blazor.Diagrams.Core.PathGenerators;
 @using Blazor.Diagrams.Core.Positions;
+@using Blazor.Diagrams.Core.Positions.Resizing;
 @using Blazor.Diagrams.Core.Routers;
 @layout DocumentationLayout
 @inherits DocumentationPage
@@ -135,6 +136,26 @@ Diagram.Controls.AddFor(SomeModel)
 	</CascadingValue>
 </div>
 
+<h3>Resize Control</h3>
+
+<p>
+	The <code>ResizeControl</code> adds a resizer which is a box that when dragged, can resize the node. The resizer position and movement of the node is controlled using a Resizer Provider.<br />
+	There are four <code>ResizerProvider</code>s, one for each corner. Custom resizing behavior can be created by implementing <code>IResizerProvider</code>.
+</p>
+
+<pre><code class="language-cs">
+Diagram.Controls.AddFor(SomeModel).Add(new ResizeControl(new BottomRightResizerProvider()));
+Diagram.Controls.AddFor(SomeModel).Add(new ResizeControl(new BottomLeftResizerProvider()));
+Diagram.Controls.AddFor(SomeModel).Add(new ResizeControl(new TopRightResizerProvider()));
+Diagram.Controls.AddFor(SomeModel).Add(new ResizeControl(new TopLeftResizerProvider()));
+</code></pre>
+
+<div class="diagram-container" style="width: 100%; height: 300px;">
+	<CascadingValue Value="_resizerDiagram" IsFixed="true">
+		<DiagramCanvas></DiagramCanvas>
+	</CascadingValue>
+</div>
+
 <NavigationButtons NextTitle="Customization"
                    NextLink="/documentation/controls-customization" />
 
@@ -143,6 +164,7 @@ Diagram.Controls.AddFor(SomeModel)
 	private BlazorDiagram _rDiagram = new();
 	private BlazorDiagram _ahDiagram = new();
 	private BlazorDiagram _dnlDiagram = new();
+	private BlazorDiagram _resizerDiagram = new();
 
 	protected override void OnInitialized()
 	{
@@ -198,5 +220,18 @@ Diagram.Controls.AddFor(SomeModel)
 		_dnlDiagram.Controls.AddFor(dnlNode2).Add(new DragNewLinkControl(0, 0.5, offsetX: -20));
 		_dnlDiagram.SelectModel(dnlNode1, false);
 		_dnlDiagram.SelectModel(dnlNode2, false);
+
+		// Resize Control
+		var resizeNode1 = _resizerDiagram.Nodes.Add(new NodeModel(new Point(100, 100)));
+		var resizeNode2 = _resizerDiagram.Nodes.Add(new NodeModel(new Point(500, 150)));
+		resizeNode1.Title = "Title";
+		resizeNode2.Title = "Title";
+		_resizerDiagram.Controls.AddFor(resizeNode1, ControlsType.OnSelection).Add(new ResizeControl(new BottomRightResizerProvider()));
+		_resizerDiagram.Controls.AddFor(resizeNode1, ControlsType.OnSelection).Add(new ResizeControl(new BottomLeftResizerProvider()));
+		_resizerDiagram.Controls.AddFor(resizeNode1, ControlsType.OnSelection).Add(new ResizeControl(new TopRightResizerProvider()));
+		_resizerDiagram.Controls.AddFor(resizeNode1, ControlsType.OnSelection).Add(new ResizeControl(new TopLeftResizerProvider()));
+		_resizerDiagram.Controls.AddFor(resizeNode2, ControlsType.OnSelection).Add(new ResizeControl(new BottomRightResizerProvider()));
+		_resizerDiagram.SelectModel(resizeNode1, false);
+		_resizerDiagram.SelectModel(resizeNode2, false);
 	}
 }
\ No newline at end of file
diff --git a/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs b/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs
new file mode 100644
index 000000000..4517f673d
--- /dev/null
+++ b/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs
@@ -0,0 +1,38 @@
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models.Base;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using System.Threading.Tasks;
+
+namespace Blazor.Diagrams.Core.Controls.Default
+{
+    public class ResizeControl : ExecutableControl
+    {
+        private readonly IResizerProvider _resizeProvider;
+
+        public ResizeControl(IResizerProvider resizeProvider)
+        {
+            _resizeProvider = resizeProvider;
+        }
+
+        public override Point? GetPosition(Model model) => _resizeProvider.GetPosition(model);
+
+        public string? Class => _resizeProvider.Class;
+
+        public override ValueTask OnPointerDown(Diagram diagram, Model model, PointerEventArgs e)
+        {
+            _resizeProvider.OnResizeStart(diagram, model, e);
+            diagram.PointerMove += _resizeProvider.OnPointerMove;
+            diagram.PointerUp += _resizeProvider.OnResizeEnd;
+            diagram.PointerUp += (_, _) => OnResizeEnd(diagram);
+
+            return ValueTask.CompletedTask;
+        }
+
+        void OnResizeEnd(Diagram diagram)
+        {
+            diagram.PointerMove -= _resizeProvider.OnPointerMove;
+            diagram.PointerUp -= _resizeProvider.OnResizeEnd;
+        }
+    }
+}
diff --git a/src/Blazor.Diagrams.Core/Models/GroupModel.cs b/src/Blazor.Diagrams.Core/Models/GroupModel.cs
index 041d872ec..4a450be1b 100644
--- a/src/Blazor.Diagrams.Core/Models/GroupModel.cs
+++ b/src/Blazor.Diagrams.Core/Models/GroupModel.cs
@@ -27,13 +27,10 @@ public void AddChild(NodeModel child)
     {
         _children.Add(child);
         child.Group = this;
-        child.SizeChanged += OnNodeChanged;
+        child.SizeChanging += OnNodeChanged;
         child.Moving += OnNodeChanged;
 
-        if (UpdateDimensions())
-        {
-            Refresh();
-        }
+        UpdateDimensions();
     }
 
     public void RemoveChild(NodeModel child)
@@ -42,14 +39,10 @@ public void RemoveChild(NodeModel child)
             return;
 
         child.Group = null;
-        child.SizeChanged -= OnNodeChanged;
+        child.SizeChanging -= OnNodeChanged;
         child.Moving -= OnNodeChanged;
 
-        if (UpdateDimensions())
-        {
-            Refresh();
-            RefreshLinks();
-        }
+        UpdateDimensions();
     }
 
     public override void SetPosition(double x, double y)
@@ -83,7 +76,7 @@ public void Ungroup()
         foreach (var child in Children)
         {
             child.Group = null;
-            child.SizeChanged -= OnNodeChanged;
+            child.SizeChanging -= OnNodeChanged;
             child.Moving -= OnNodeChanged;
         }
 
@@ -96,7 +89,7 @@ private void Initialize(IEnumerable<NodeModel> children)
         {
             _children.Add(child);
             child.Group = this; 
-            child.SizeChanged += OnNodeChanged;
+            child.SizeChanging += OnNodeChanged;
             child.Moving += OnNodeChanged;
         }
 
@@ -105,10 +98,7 @@ private void Initialize(IEnumerable<NodeModel> children)
 
     private void OnNodeChanged(NodeModel node)
     {
-        if (UpdateDimensions())
-        {
-            Refresh();
-        }
+        UpdateDimensions();
     }
 
     private bool UpdateDimensions()
@@ -128,7 +118,7 @@ private bool UpdateDimensions()
             TriggerMoving();
         }
 
-        Size = new Size(bounds.Width + Padding * 2, bounds.Height + Padding * 2);
+        SetSize(bounds.Width + Padding * 2, bounds.Height + Padding * 2);
         return true;
     }
 }
diff --git a/src/Blazor.Diagrams.Core/Models/NodeModel.cs b/src/Blazor.Diagrams.Core/Models/NodeModel.cs
index 053c5b3d8..610a5aac3 100644
--- a/src/Blazor.Diagrams.Core/Models/NodeModel.cs
+++ b/src/Blazor.Diagrams.Core/Models/NodeModel.cs
@@ -11,7 +11,9 @@ public class NodeModel : MovableModel, IHasBounds, IHasShape, ILinkable
     private readonly List<PortModel> _ports = new();
     private readonly List<BaseLinkModel> _links = new();
     private Size? _size;
+    public Size MinimumDimensions { get; set; } = new Size(0, 0);
 
+    public event Action<NodeModel>? SizeChanging;
     public event Action<NodeModel>? SizeChanged;
     public event Action<NodeModel>? Moving;
 
@@ -28,11 +30,7 @@ public Size? Size
         get => _size;
         set
         {
-            if (value?.Equals(_size) == true)
-                return;
-
             _size = value;
-            SizeChanged?.Invoke(this);
         }
     }
     public bool ControlledSize { get; init; }
@@ -103,6 +101,23 @@ public override void SetPosition(double x, double y)
         Moving?.Invoke(this);
     }
 
+    public void SetSize(double width, double height)
+    {
+        var newSize = new Size(width, height);
+        if (newSize.Equals(_size) == true)
+            return;
+
+        Size = newSize;
+        Refresh();
+        RefreshLinks();
+        SizeChanging?.Invoke(this);
+    }
+
+    public void TriggerSizeChanged()
+    {
+        SizeChanged?.Invoke(this);
+    }
+
     public virtual void UpdatePositionSilently(double deltaX, double deltaY)
     {
         base.SetPosition(Position.X + deltaX, Position.Y + deltaY);
diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs
new file mode 100644
index 000000000..c4e576c92
--- /dev/null
+++ b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs
@@ -0,0 +1,75 @@
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+
+namespace Blazor.Diagrams.Core.Positions.Resizing
+{
+    public class BottomLeftResizerProvider : IResizerProvider
+    {
+		public string? Class => "bottomleft";
+
+		private Size _originalSize = null!;
+        private Point _originalPosition = null!;
+        private Point _originalMousePosition = null!;
+        private NodeModel _nodeModel = null!;
+
+        public Point? GetPosition(Model model)
+        {
+            if (model is NodeModel nodeModel && nodeModel.Size is not null)
+            {
+                return new Point(nodeModel.Position.X - 5, nodeModel.Position.Y + nodeModel.Size.Height + 5);
+            }
+            return null;
+        }
+
+        public void OnResizeStart(Diagram diagram, Model model, PointerEventArgs eventArgs)
+        {
+            if (model is NodeModel nodeModel)
+            {
+                _originalPosition = new Point(nodeModel.Position.X, nodeModel.Position.Y);
+                _originalMousePosition = new Point(eventArgs.ClientX, eventArgs.ClientY);
+                _originalSize = nodeModel.Size!;
+                _nodeModel = nodeModel;
+            }
+        }
+
+        public void OnPointerMove(Model? model, PointerEventArgs args)
+        {
+            if (_nodeModel is null)
+            {
+                return;
+            }
+
+            var height = _originalSize.Height + (args.ClientY - _originalMousePosition.Y);
+            var width = _originalSize.Width - (args.ClientX - _originalMousePosition.X);
+
+            var positionX = _originalPosition.X + (args.ClientX - _originalMousePosition.X);
+            var positionY = _originalPosition.Y;
+
+            if (width < _nodeModel.MinimumDimensions.Width)
+            {
+                width = _nodeModel.MinimumDimensions.Width;
+                positionX = _nodeModel.Position.X;
+            }
+            if (height < _nodeModel.MinimumDimensions.Height)
+            {
+                height = _nodeModel.MinimumDimensions.Height;
+                positionY = _nodeModel.Position.Y;
+            }
+
+            _nodeModel.SetPosition(positionX, positionY);
+            _nodeModel.SetSize(width, height);
+        }
+
+        public void OnResizeEnd(Model? model, PointerEventArgs args)
+        {
+            _nodeModel?.TriggerSizeChanged();
+            _originalSize = null!;
+            _originalPosition = null!;
+            _originalMousePosition = null!;
+            _nodeModel = null!;
+        }
+
+    }
+}
diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs
new file mode 100644
index 000000000..f55e26d71
--- /dev/null
+++ b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs
@@ -0,0 +1,66 @@
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+
+namespace Blazor.Diagrams.Core.Positions.Resizing
+{
+    public class BottomRightResizerProvider : IResizerProvider
+    {
+        public string? Class => "bottomright";
+
+        private Size _originalSize = null!;
+        private Point _originalMousePosition = null!;
+        private NodeModel _nodeModel = null!;
+
+		public Point? GetPosition(Model model)
+        {
+            if (model is NodeModel nodeModel && nodeModel.Size is not null)
+            {
+                return new Point(nodeModel.Position.X + nodeModel.Size.Width + 5, nodeModel.Position.Y + nodeModel.Size.Height + 5);
+            }
+            return null;
+        }
+
+        public void OnResizeStart(Diagram diagram, Model model, PointerEventArgs eventArgs)
+        {
+            if (model is NodeModel nodeModel)
+            {
+                _originalMousePosition = new Point(eventArgs.ClientX, eventArgs.ClientY);
+                _originalSize = nodeModel.Size!;
+                _nodeModel = nodeModel;
+            }
+        }
+
+        public void OnPointerMove(Model? model, PointerEventArgs args)
+        {
+            if (_nodeModel is null)
+            {
+                return;
+            }
+
+            var height = _originalSize.Height + (args.ClientY - _originalMousePosition.Y);
+            var width = _originalSize.Width + (args.ClientX - _originalMousePosition.X);
+
+            if (width < _nodeModel.MinimumDimensions.Width)
+            {
+                width = _nodeModel.MinimumDimensions.Width;
+            }
+            if (height < _nodeModel.MinimumDimensions.Height)
+            {
+                height = _nodeModel.MinimumDimensions.Height;
+            }
+
+            _nodeModel.SetSize(width, height);
+        }
+
+        public void OnResizeEnd(Model? model, PointerEventArgs args)
+        {
+            _nodeModel?.TriggerSizeChanged();
+            _originalSize = null!;
+            _originalMousePosition = null!;
+            _nodeModel = null!;
+        }
+
+    }
+}
diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs
new file mode 100644
index 000000000..65a2ecdde
--- /dev/null
+++ b/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs
@@ -0,0 +1,14 @@
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+
+namespace Blazor.Diagrams.Core.Positions.Resizing
+{
+    public interface IResizerProvider : IPositionProvider
+    {
+        public string? Class { get; }
+        public void OnResizeStart(Diagram diagram, Model model, PointerEventArgs eventArgs);
+        public void OnPointerMove(Model? model, PointerEventArgs args);
+        public void OnResizeEnd(Model? model, PointerEventArgs args);
+    }
+}
diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/TopLeftResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/TopLeftResizerProvider.cs
new file mode 100644
index 000000000..7c3afe5ce
--- /dev/null
+++ b/src/Blazor.Diagrams.Core/Positions/Resizing/TopLeftResizerProvider.cs
@@ -0,0 +1,75 @@
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+
+namespace Blazor.Diagrams.Core.Positions.Resizing
+{
+    public class TopLeftResizerProvider : IResizerProvider
+    {
+		public string? Class => "topleft";
+
+		private Size _originalSize = null!;
+        private Point _originalPosition = null!;
+        private Point _originalMousePosition = null!;
+        private NodeModel _nodeModel = null!;
+
+        public Point? GetPosition(Model model)
+        {
+            if (model is NodeModel nodeModel && nodeModel.Size is not null)
+            {
+                return new Point(nodeModel.Position.X - 5, nodeModel.Position.Y - 5);
+            }
+            return null;
+        }
+
+        public void OnResizeStart(Diagram diagram, Model model, PointerEventArgs eventArgs)
+        {
+            if (model is NodeModel nodeModel)
+            {
+                _originalPosition = new Point(nodeModel.Position.X, nodeModel.Position.Y);
+                _originalMousePosition = new Point(eventArgs.ClientX, eventArgs.ClientY);
+                _originalSize = nodeModel.Size!;
+                _nodeModel = nodeModel;
+            }
+        }
+
+        public void OnPointerMove(Model? model, PointerEventArgs args)
+        {
+            if (_nodeModel is null)
+            {
+                return;
+            }
+
+            var height = _originalSize.Height - (args.ClientY - _originalMousePosition.Y);
+            var width = _originalSize.Width - (args.ClientX - _originalMousePosition.X);
+
+            var positionX = _originalPosition.X + (args.ClientX - _originalMousePosition.X);
+            var positionY = _originalPosition.Y + (args.ClientY - _originalMousePosition.Y);
+
+            if (width < _nodeModel.MinimumDimensions.Width)
+            {
+                width = _nodeModel.MinimumDimensions.Width;
+                positionX = _nodeModel.Position.X;
+            }
+            if (height < _nodeModel.MinimumDimensions.Height)
+            {
+                height = _nodeModel.MinimumDimensions.Height;
+                positionY = _nodeModel.Position.Y;
+            }
+
+            _nodeModel.SetPosition(positionX, positionY);
+            _nodeModel.SetSize(width, height);
+        }
+
+        public void OnResizeEnd(Model? model, PointerEventArgs args)
+        {
+            _nodeModel?.TriggerSizeChanged();
+            _originalSize = null!;
+            _originalPosition = null!;
+            _originalMousePosition = null!;
+            _nodeModel = null!;
+        }
+
+    }
+}
diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs
new file mode 100644
index 000000000..e9ea4e14a
--- /dev/null
+++ b/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs
@@ -0,0 +1,74 @@
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+
+namespace Blazor.Diagrams.Core.Positions.Resizing
+{
+    public class TopRightResizerProvider : IResizerProvider
+    {
+		public string? Class => "topright";
+
+		private Size _originalSize = null!;
+        private Point _originalPosition = null!;
+        private Point _originalMousePosition = null!;
+        private NodeModel _nodeModel = null!;
+
+        public Point? GetPosition(Model model)
+        {
+            if (model is NodeModel nodeModel && nodeModel.Size is not null)
+            {
+                return new Point(nodeModel.Position.X + nodeModel.Size.Width + 5, nodeModel.Position.Y - 5);
+            }
+            return null;
+        }
+
+        public void OnResizeStart(Diagram diagram, Model model, PointerEventArgs eventArgs)
+        {
+            if (model is NodeModel nodeModel)
+            {
+                _originalPosition = new Point(nodeModel.Position.X, nodeModel.Position.Y);
+                _originalMousePosition = new Point(eventArgs.ClientX, eventArgs.ClientY);
+                _originalSize = nodeModel.Size!;
+                _nodeModel = nodeModel;
+            }
+        }
+
+        public void OnPointerMove(Model? model, PointerEventArgs args)
+        {
+            if (_nodeModel is null)
+            {
+                return;
+            }
+            var height = _originalSize.Height - (args.ClientY - _originalMousePosition.Y);
+            var width = _originalSize.Width + (args.ClientX - _originalMousePosition.X);
+
+            var positionX = _originalPosition.X;
+            var positionY = _originalPosition.Y + (args.ClientY - _originalMousePosition.Y);
+
+            if (width < _nodeModel.MinimumDimensions.Width)
+            {
+                width = _nodeModel.MinimumDimensions.Width;
+                positionX = _nodeModel.Position.X;
+            }
+            if (height < _nodeModel.MinimumDimensions.Height)
+            {
+                height = _nodeModel.MinimumDimensions.Height;
+                positionY = _nodeModel.Position.Y;
+            }
+
+            _nodeModel.SetPosition(positionX, positionY);
+            _nodeModel.SetSize(width, height);
+        }
+
+        public void OnResizeEnd(Model? model, PointerEventArgs args)
+        {
+            _nodeModel?.TriggerSizeChanged();
+            _originalSize = null!;
+            _originalPosition = null!;
+            _originalMousePosition = null!;
+            _nodeModel = null!;
+        }
+
+    }
+}
diff --git a/src/Blazor.Diagrams/BlazorDiagram.cs b/src/Blazor.Diagrams/BlazorDiagram.cs
index ab61d98a8..b18eab9dc 100644
--- a/src/Blazor.Diagrams/BlazorDiagram.cs
+++ b/src/Blazor.Diagrams/BlazorDiagram.cs
@@ -19,7 +19,8 @@ public BlazorDiagram(BlazorDiagramOptions? options = null)
             [typeof(RemoveControl)] = typeof(RemoveControlWidget),
             [typeof(BoundaryControl)] = typeof(BoundaryControlWidget),
             [typeof(DragNewLinkControl)] = typeof(DragNewLinkControlWidget),
-            [typeof(ArrowHeadControl)] = typeof(ArrowHeadControlWidget)
+            [typeof(ArrowHeadControl)] = typeof(ArrowHeadControlWidget),
+            [typeof(ResizeControl)] = typeof(ResizeControlWidget)
         };
 
         Options = options ?? new BlazorDiagramOptions();
diff --git a/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor b/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor
new file mode 100644
index 000000000..cfd15bd7b
--- /dev/null
+++ b/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor
@@ -0,0 +1,10 @@
+<div class="default-node-resizer @Control.Class" />
+
+@code
+{
+    [Parameter]
+    public ResizeControl Control { get; set; } = null!;
+
+    [Parameter]
+    public Model Model { get; set; } = null!;
+}
diff --git a/src/Blazor.Diagrams/Components/NodeWidget.razor b/src/Blazor.Diagrams/Components/NodeWidget.razor
index 37ff3da8d..726e51d2c 100644
--- a/src/Blazor.Diagrams/Components/NodeWidget.razor
+++ b/src/Blazor.Diagrams/Components/NodeWidget.razor
@@ -1,4 +1,4 @@
-<div class="default-node @(Node.Group != null ? "grouped" : "") @(Node.Selected ? "selected" : "")">
+<div class="default-node @(Node.Group != null ? "grouped" : "") @(Node.Selected ? "selected" : "")" style=@GenerateStyle()>
     @(Node.Title ?? "Title")
     @foreach (var port in Node.Ports)
     {
@@ -11,4 +11,12 @@
     [Parameter]
     public NodeModel Node { get; set; } = null!;
 
+    private string GenerateStyle()
+    {
+        if (Node.Size is not null)
+        {
+            return $"width: {Node.Size.Width}px; height: {Node.Size.Height}px";
+        }
+        return string.Empty;
+    }
 }
\ No newline at end of file
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.css b/src/Blazor.Diagrams/wwwroot/default.styles.css
index b095bbe4e..2b355029a 100644
--- a/src/Blazor.Diagrams/wwwroot/default.styles.css
+++ b/src/Blazor.Diagrams/wwwroot/default.styles.css
@@ -127,4 +127,28 @@ g.diagram-group.default.selected > rect {
     transform: translate(-50%, -50%);
 }
 
+.default-node-resizer {
+    width: 5px;
+    height: 5px;
+    background-color: #f5f5f5;
+    border: 1px solid #6e9fd4;
+    position: absolute;
+}
+
+.default-node-resizer.bottomright {
+    cursor: nwse-resize;
+}
+
+.default-node-resizer.topright {
+    cursor: nesw-resize;
+}
+
+.default-node-resizer.bottomleft {
+    cursor: nesw-resize;
+}
+
+.default-node-resizer.topleft {
+    cursor: nwse-resize;
+}
+
 /*# sourceMappingURL=wwwroot\default.styles.css.map */
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.min.css b/src/Blazor.Diagrams/wwwroot/default.styles.min.css
index c44adedc3..e794e823e 100644
--- a/src/Blazor.Diagrams/wwwroot/default.styles.min.css
+++ b/src/Blazor.Diagrams/wwwroot/default.styles.min.css
@@ -1 +1 @@
-.default-node{width:100px;height:80px;border-radius:10px;background-color:#f5f5f5;border:1px solid #e8e8e8;-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.default-node.selected{border:1px solid #6e9fd4;}.default-node.selected .diagram-port{border:1px solid #6e9fd4;}.default-node .diagram-port,.default.diagram-group .diagram-port{width:20px;height:20px;margin:-10px;border-radius:50%;background-color:#f5f5f5;border:1px solid #d4d4d4;cursor:pointer;position:absolute;}.default-node .diagram-port:hover,.default-node .diagram-port.has-links,.default.diagram-group .diagram-port.has-links{background-color:#000;}.default-node .diagram-port.bottom,.default.diagram-group .diagram-port.bottom{bottom:0;left:50%;}.default-node .diagram-port.bottomleft,.default.diagram-group .diagram-port.bottomleft{bottom:0;left:0;}.default-node .diagram-port.bottomright,.default.diagram-group .diagram-port.bottomright{bottom:0;right:0;}.default-node .diagram-port.top,.default.diagram-group .diagram-port.top{top:0;left:50%;}.default-node .diagram-port.topleft,.default.diagram-group .diagram-port.topleft{top:0;left:0;}.default-node .diagram-port.topright,.default.diagram-group .diagram-port.topright{top:0;right:0;}.default-node .diagram-port.left,.default.diagram-group .diagram-port.left{left:0;top:50%;}.default-node .diagram-port.right,.default.diagram-group .diagram-port.right{right:0;top:50%;}.diagram-navigator.default{position:absolute;bottom:10px;right:10px;border:3px solid #9ba8b0;border-radius:15px;padding:20px;background-color:#fff;}div.diagram-group.default{outline:2px solid #000;background:#c6c6c6;}div.diagram-group.default.selected{outline:2px solid #6e9fd4;}g.diagram-group.default rect{outline:2px solid #000;fill:#c6c632;}g.diagram-group.default.selected>rect{outline:2px solid #008000;}.diagram-link div.default-link-label{display:inline-block;color:#fff;background-color:#6e9fd4;border-radius:.25rem;padding:.25rem;text-align:center;font-size:.875rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:3rem;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
\ No newline at end of file
+.default-node{width:100px;height:80px;border-radius:10px;background-color:#f5f5f5;border:1px solid #e8e8e8;-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}.default-node.selected{border:1px solid #6e9fd4;}.default-node.selected .diagram-port{border:1px solid #6e9fd4;}.default-node .diagram-port,.default.diagram-group .diagram-port{width:20px;height:20px;margin:-10px;border-radius:50%;background-color:#f5f5f5;border:1px solid #d4d4d4;cursor:pointer;position:absolute;}.default-node .diagram-port:hover,.default-node .diagram-port.has-links,.default.diagram-group .diagram-port.has-links{background-color:#000;}.default-node .diagram-port.bottom,.default.diagram-group .diagram-port.bottom{bottom:0;left:50%;}.default-node .diagram-port.bottomleft,.default.diagram-group .diagram-port.bottomleft{bottom:0;left:0;}.default-node .diagram-port.bottomright,.default.diagram-group .diagram-port.bottomright{bottom:0;right:0;}.default-node .diagram-port.top,.default.diagram-group .diagram-port.top{top:0;left:50%;}.default-node .diagram-port.topleft,.default.diagram-group .diagram-port.topleft{top:0;left:0;}.default-node .diagram-port.topright,.default.diagram-group .diagram-port.topright{top:0;right:0;}.default-node .diagram-port.left,.default.diagram-group .diagram-port.left{left:0;top:50%;}.default-node .diagram-port.right,.default.diagram-group .diagram-port.right{right:0;top:50%;}.diagram-navigator.default{position:absolute;bottom:10px;right:10px;border:3px solid #9ba8b0;border-radius:15px;padding:20px;background-color:#fff;}div.diagram-group.default{outline:2px solid #000;background:#c6c6c6;}div.diagram-group.default.selected{outline:2px solid #6e9fd4;}g.diagram-group.default rect{outline:2px solid #000;fill:#c6c632;}g.diagram-group.default.selected>rect{outline:2px solid #008000;}.diagram-link div.default-link-label{display:inline-block;color:#fff;background-color:#6e9fd4;border-radius:.25rem;padding:.25rem;text-align:center;font-size:.875rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-width:3rem;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}.default-node-resizer{width:5px;height:5px;background-color:#f5f5f5;border:1px solid #6e9fd4;position:absolute;}.default-node-resizer.bottomright{cursor:nwse-resize;}.default-node-resizer.topright{cursor:nesw-resize;}.default-node-resizer.bottomleft{cursor:nesw-resize;}.default-node-resizer.topleft{cursor:nwse-resize;}
\ No newline at end of file
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz b/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz
index 905f20cd3084e4807fd8feb323b3f30ca017d835..3c43a8a10a61907cb9619cdbdc3efc83f8d13ceb 100644
GIT binary patch
literal 735
zcmV<50wDb#iwFP!000003bj^kj@mE~y$aH*(yoM~5SEs8q~68Bli=dmk?jDxXiwH3
zJyNewJ8`}?K*Ep80^;$Tc{Ah541a(B2`Hqb<OT^z;c{Zs?C~lLi*vjOmhBDRy5~eH
z3JNJgS*h*06Or8^Q?e8k?If29KcySDJQlBt^Fm9`=;8^sZpG*X$$=S^$TQM=LgfjE
zi^#$p6uB>zCFD6=x)nq(%dk3epKx%rdTq|u<Fn|+dhnkK3aOc4QeXv~7<Po1GF@=;
zj(ah7vRtE-!?`bW`$0koXPLk|5C&A-Xbh#*1~CJ<Zh<`ug}soGfxhrpsSQit?RD9$
zFpc<gPy&Gl4m$(%GQP*}@RrioTMCPSGLk8hqe3b(SAD3pY|dJ#E3x8>>AFgzUXfPM
zIZ+uC7_G(?y9vKNQn2*Zt$0@|ZE=NURifHkCyB+C2JVJ}_wop8c?S{fiAJ1>gPs+3
z2fvI%3B&NNH$ftek@-BL8f$OR{opX>keVumGZ-B95f+F4!Za%q<?j6vqDrA-s<u;9
zMi%oZEbwAKvvXy!^AqL4eS&GfAIMLG_5`ysGvE8lb?>wzn9R)sp4V<S4)?5kkRV5v
z5hGP&?J|CceMMAFqqfxRA9&q0g|~!klkn>(+*oWuC}kq6yU>+3lcw<}WyfJCtxK{r
z_N@jSbyV(c?(E>F-FLU{80ot96>Cl3&93V%l-0cDManp@`Pb1+3oZN4+ora@LwSAI
z#}-vMz7U)MagqSPG&7P3X9gu)?hbJ;m*Wik2!~e_L>mQpdpUk<;B1CtHMQdqY4!m)
z*#4+6%~UP5wN}T5g%n`Ns{FVn)nnmEkTZem!L{yl7)69mrOI*jWdBaUGqP2@bYCx(
z?Fq=l@$g+k3S6kl&(KXbLfzv7BhsgQY9=;(gC^|fsyON9{FYYRni>_*rwNtbSedWX
RwAgE&{R6yf)WanU007NuYeE13

literal 683
zcmV;c0#yAUiwFP!000003bj^iZlf>|zDlHOrACSoAx)baY42k2K)f+FvQ3gU>dE%U
z9%-+zwt)a85AtJWCBfrw=9?Ge{QdnWppcP@8zdx!(}7X5#mg`(kMR~*zBPE`o)f7k
zD5MBwmA2<jMABWZWF;s{C6@|6Wox$@EMAt!nU<W<*%NHsiqQd*9WyAAN2Ire$^#B(
zk%c)Za$hP>$aA=GD~RTc(4V+ZI5=9qv}ddFSv0pE{AYqvYG#-eSOF)7?IEU2mz;dy
zUW}cr&?w_@?91GKkPyOIE^rFMfQnm<q10~>Gf?O=uxFvP1sNIW3x8GGu<XN@%Wj2f
z#b1LK2sCg=4baoLj<4{Z(U)rqvw$*^D^j3RDl=7msI_R%&QjN6<u}uHmqxuN_0I)S
zITIKy#~r&4e>~E#^u?_>t(3O7QZk>YbJa;=ag~9aq2R6DgIe4`1Y4pJXJV%(h26nV
z<50pdyy;DlNMmF%ji|=j3c4R0#vC%^Q#gUaVIN^}_-{;;B2ljHj}Uo<j>&KDQ5jiI
zqp-k}{Y=i4#ZFID1MU;t_xpkTwCILlQf8)m?_F=4b_92G^ML2I+pWVr>kUYdJ<Exa
zs<n0+zr#&O_@Pl->dg<l>W0F5LN-bG{VH5rY)L3(BCn^=g)x(5@fT(LVJK&pWM%AI
z4LItk+}qsQ!B6R{TQ`h!Q~QFocJAhvb!W<IUh^VjoY(xT=&FS?`_Jp9HqC@;^xYhr
z`EZ&>a00|h0{qn8kxV!<DB&{Q#l2jPGu%WtEKLxt6%^;<G+P5lGrU$admSRpJ^=@t
zH;-v=)k<4yb!=Ej0rpyzpO>V1EF1|6CQyBGt@<2B5ur1w3hbZk-wAj|wu=|;Ywm5|
Rf!sO%`Ul{II$Grk008_RO;G><

diff --git a/src/Blazor.Diagrams/wwwroot/style.min.css.gz b/src/Blazor.Diagrams/wwwroot/style.min.css.gz
index e72cb7d8af23d7af571c773a260d0f0ccfe835f3..4a312feec6aef85e5620eea68d1cd461ca9d351d 100644
GIT binary patch
delta 381
zcmV-@0fPRS1DOMmC4Wh48BgYeNAe1;l%j3Z86SNj{7L?N|FY!s{UbN1Td#Z7Xcu)D
zcWAgPABy6>>Hyo0kK-)`WF%L5u$nPKMFU%OP&#t*62Y%6?aB^~0arDH59CX=gL;Fk
z<be95O=G5^>6C6J%gNzw0SU2HR=<K@EmFt5J!&J<wk#?OYk!u9p8$)hCT8kouwd#s
zkR2FALC4?~L~tCAXPvOvYZun!dqv`et}L>mQhi8IB*h!$TIvxoU~RwS{bX3>OT_UX
z1D}fT$UuVg#54qf4Pc?+8MdcGN)6ZIl`!{6FF2Ql(AHi+<(8Tam~q}Tum813`g1d0
z*v$E!^|xxOn|6Dhj@W7@KOPi11AD1cYC6ls!i%+v2)jg`YVrnr`MBL@qM*s{isH9Z
z>uK2jyZTO4lC48)Bwd2<s$)`(d;TplX-4Te_f)?K(b<&z4mH^EZ>9$0&$UI4J=p}{
bTMm0@2G-(}Sbi1$vK77n8oH^c9R&aY<lMcD

delta 381
zcmV-@0fPRS1DOMmC4UK3#*_Krk-UQ2mZELb86SNj{7L?N|FY!k<1;s?Td#Z7Xcu*u
zMl{@&4@Gfbb%1Th$MKc|GLkDjSj`xrqJb?sC>=R@iQw0k#<D|Wz*WuQ1Nl;oP;Zcx
z98jOM!<cDkI;ER~<-y^70SU2HR=<K@EmFt5J!%uvwk#?OYk!u9KL8e0P0ZBGV8PUN
zAUiOKf{wu}h~PLJ&pKhT*DkEd_lm>`U0GyBrTUPbNQyVgwbUbGz}oKP{bX3>OT_6P
z1D}fT$UuVg#54qf4Pc?+8Mddllp3zZD`D=DUT`i8p{>1u$}Ke;Fw?wgUjJ*6^yg-}
zu$l8c>%D5Kn|6Dhj@W7@KfNh*26j@X)O41Mg%@iT5ynKFYVrnr`MBL>qM*s{isH9Z
z>uK2jyZW|!D#_NNHIgpDchxbe#y$TQnKYyHoO`NYgy?Kaeuo<D^fyz3@#oqi$DV8g
b@I8keGy`k#Ni4q#f7uG(8oH^c9R&aY;|RiF

diff --git a/tests/Blazor.Diagrams.Core.Tests/Controls/ResizeControlTests.cs b/tests/Blazor.Diagrams.Core.Tests/Controls/ResizeControlTests.cs
new file mode 100644
index 000000000..dcd9bab14
--- /dev/null
+++ b/tests/Blazor.Diagrams.Core.Tests/Controls/ResizeControlTests.cs
@@ -0,0 +1,75 @@
+using Blazor.Diagrams.Core.Controls.Default;
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Models.Base;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using Moq;
+using Xunit;
+
+namespace Blazor.Diagrams.Core.Tests.Controls
+{
+    public class ResizeControlTests
+    {
+        [Fact]
+        public void GetPosition_ShouldUseResizeProviderGetPosition()
+        {
+            var resizeProvider = new Mock<IResizerProvider>();
+            var control = new ResizeControl(resizeProvider.Object);
+            var model = new Mock<Model>();
+
+            control.GetPosition(model.Object);
+
+            resizeProvider.Verify(m => m.GetPosition(model.Object), Times.Once);
+        }
+
+        [Fact]
+        public void OnPointerDown_ShouldInvokeResizeStart()
+        {
+            var resizeProvider = new Mock<IResizerProvider>();
+            var control = new ResizeControl(resizeProvider.Object);
+            var diagram = Mock.Of<Diagram>();
+            var model = Mock.Of<Model>();
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 0, 0, 0, 0, 0, 0, string.Empty, true);
+
+            control.OnPointerDown(diagram, model, eventArgs);
+
+            resizeProvider.Verify(m => m.OnResizeStart(diagram, model, eventArgs), Times.Once);
+        }
+
+        [Fact]
+        public void OnPointerDown_ShouldAddEventHandlers()
+        {
+            var resizeProvider = new Mock<IResizerProvider>();
+            var control = new ResizeControl(resizeProvider.Object);
+            var diagram = new TestDiagram();
+            var model = Mock.Of<Model>();
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 0, 0, 0, 0, 0, 0, string.Empty, true);
+
+            control.OnPointerDown(diagram, model, eventArgs);
+            
+            diagram.TriggerPointerMove(model, eventArgs);
+            resizeProvider.Verify(m => m.OnPointerMove(model, eventArgs), Times.Once);
+
+            diagram.TriggerPointerUp(model, eventArgs);
+            resizeProvider.Verify(m => m.OnResizeEnd(model, eventArgs), Times.Once);
+        }
+
+        [Fact]
+        public void OnPointerUp_ShouldRemoveEventHandlers()
+        {
+            var resizeProvider = new Mock<IResizerProvider>();
+            var control = new ResizeControl(resizeProvider.Object);
+            var diagram = new TestDiagram();
+            var model = Mock.Of<Model>();
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 0, 0, 0, 0, 0, 0, string.Empty, true);
+
+            control.OnPointerDown(diagram, model, eventArgs);
+            diagram.TriggerPointerUp(model, eventArgs);
+
+            diagram.TriggerPointerMove(model, eventArgs);
+            resizeProvider.Verify(m => m.OnPointerMove(model, eventArgs), Times.Never);
+
+            diagram.TriggerPointerUp(model, eventArgs);
+            resizeProvider.Verify(m => m.OnResizeEnd(model, eventArgs), Times.Once);
+        }
+    }
+}
diff --git a/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomLeftResizerProviderTests.cs b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomLeftResizerProviderTests.cs
new file mode 100644
index 000000000..79ef6c17b
--- /dev/null
+++ b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomLeftResizerProviderTests.cs
@@ -0,0 +1,82 @@
+using Blazor.Diagrams.Core.Controls.Default;
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using FluentAssertions;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Blazor.Diagrams.Core.Tests.Positions.Resizing
+{
+    public class BottomLeftResizerProviderTests
+    {
+        [Fact]
+        public void DragResizer_ShouldResizeNode()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new BottomLeftResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(10, 15, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(10);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(90);
+            node.Size.Height.Should().Be(215);
+        }
+
+        [Fact]
+        public void DragResizer_SmallerThanMinSize_SetsNodeToMinSize()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new BottomLeftResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(99, -199, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+            eventArgs = new PointerEventArgs(300, -300, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(99);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(0);
+            node.Size.Height.Should().Be(0);
+        }
+    }
+}
diff --git a/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomRightResizerProviderTests.cs b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomRightResizerProviderTests.cs
new file mode 100644
index 000000000..20ab27770
--- /dev/null
+++ b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/BottomRightResizerProviderTests.cs
@@ -0,0 +1,80 @@
+using Blazor.Diagrams.Core.Controls.Default;
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using FluentAssertions;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Blazor.Diagrams.Core.Tests.Positions.Resizing
+{
+    public class BottomRightResizerProviderTests
+    {
+        [Fact]
+        public void DragResizer_ShouldResizeNode()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new BottomRightResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(10, 15, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(110);
+            node.Size.Height.Should().Be(215);
+        }
+
+        [Fact]
+        public void DragResizer_SmallerThanMinSize_SetsNodeToMinSize()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new BottomRightResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(-300, -300, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(0);
+            node.Size.Height.Should().Be(0);
+        }
+    }
+}
diff --git a/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopLeftResizerProviderTests.cs b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopLeftResizerProviderTests.cs
new file mode 100644
index 000000000..1cc715d59
--- /dev/null
+++ b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopLeftResizerProviderTests.cs
@@ -0,0 +1,82 @@
+using Blazor.Diagrams.Core.Controls.Default;
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using FluentAssertions;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Blazor.Diagrams.Core.Tests.Positions.Resizing
+{
+    public class TopLeftResizerProviderTests
+    {
+        [Fact]
+        public void DragResizer_ShouldResizeNode()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new TopLeftResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(10, 15, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(10);
+            node.Position.Y.Should().Be(15);
+            node.Size.Width.Should().Be(90);
+            node.Size.Height.Should().Be(185);
+        }
+
+        [Fact]
+        public void DragResizer_SmallerThanMinSize_SetsNodeToMinSize()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new TopLeftResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(99, 199, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+            eventArgs = new PointerEventArgs(300, 300, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(99);
+            node.Position.Y.Should().Be(199);
+            node.Size.Width.Should().Be(0);
+            node.Size.Height.Should().Be(0);
+        }
+    }
+}
diff --git a/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopRightResizerProviderTests.cs b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopRightResizerProviderTests.cs
new file mode 100644
index 000000000..a138d524f
--- /dev/null
+++ b/tests/Blazor.Diagrams.Core.Tests/Positions/Resizing/TopRightResizerProviderTests.cs
@@ -0,0 +1,82 @@
+using Blazor.Diagrams.Core.Controls.Default;
+using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using FluentAssertions;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Xunit;
+
+namespace Blazor.Diagrams.Core.Tests.Positions.Resizing
+{
+    public class TopRightResizerProviderTests
+    {
+        [Fact]
+        public void DragResizer_ShouldResizeNode()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new TopRightResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(10, 15, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(15);
+            node.Size.Width.Should().Be(110);
+            node.Size.Height.Should().Be(185);
+        }
+
+        [Fact]
+        public void DragResizer_SmallerThanMinSize_SetsNodeToMinSize()
+        {
+            // setup
+            var diagram = new TestDiagram();
+            diagram.SetContainer(new Rectangle(0, 0, 1000, 400));
+            var node = new NodeModel(position: new Point(0, 0));
+            node.Size = new Size(100, 200);
+            var control = new ResizeControl(new TopRightResizerProvider());
+            diagram.Controls.AddFor(node).Add(control);
+            diagram.SelectModel(node, false);
+
+            // before resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(0);
+            node.Size.Width.Should().Be(100);
+            node.Size.Height.Should().Be(200);
+
+            // resize
+            var eventArgs = new PointerEventArgs(0, 0, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            control.OnPointerDown(diagram, node, eventArgs);
+            eventArgs = new PointerEventArgs(-99, 199, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+            eventArgs = new PointerEventArgs(-300, 300, 0, 0, false, false, false, 1, 1, 1, 1, 1, 1, "arrow", true);
+            diagram.TriggerPointerMove(null, eventArgs);
+
+            // after resize
+            node.Position.X.Should().Be(0);
+            node.Position.Y.Should().Be(199);
+            node.Size.Width.Should().Be(0);
+            node.Size.Height.Should().Be(0);
+        }
+    }
+}
diff --git a/tests/Blazor.Diagrams.Tests/Components/Controls/ResizeControlWidgetTests.cs b/tests/Blazor.Diagrams.Tests/Components/Controls/ResizeControlWidgetTests.cs
new file mode 100644
index 000000000..bf51e541c
--- /dev/null
+++ b/tests/Blazor.Diagrams.Tests/Components/Controls/ResizeControlWidgetTests.cs
@@ -0,0 +1,25 @@
+using Blazor.Diagrams.Components.Controls;
+using Blazor.Diagrams.Core.Controls.Default;
+using Blazor.Diagrams.Core.Positions.Resizing;
+using Bunit;
+using Moq;
+using Xunit;
+
+namespace Blazor.Diagrams.Tests.Components.Controls
+{
+	public class ResizeControlWidgetTests
+    {
+        [Fact]
+        public void ShouldRenderDiv()
+        {
+            using var ctx = new TestContext();
+            var providerMock = Mock.Of<IResizerProvider>();
+ 
+            var cut = ctx.RenderComponent<ResizeControlWidget>(parameters =>
+                parameters.Add(w => w.Control, new ResizeControl(providerMock))
+            );
+
+            cut.MarkupMatches("<div class=\"default-node-resizer\" />");
+        }
+    }
+}