From d15c24acc290b2eef7402cc807cb1a2c771f669c Mon Sep 17 00:00:00 2001 From: Heather Cox Date: Thu, 7 Dec 2023 15:06:00 +1100 Subject: [PATCH] add cursors --- .../Controls/Default/ResizeControl.cs | 2 + .../Resizing/BottomLeftResizeProvider.cs | 73 ------------------ .../Resizing/BottomLeftResizerProvider.cs | 4 +- .../Resizing/BottomRightResizerProvider.cs | 4 +- .../Positions/Resizing/IResizerProvider.cs | 1 + .../Resizing/TopLeftResizerProvider.cs | 4 +- .../Resizing/TopRightResizerProvider.cs | 4 +- .../Controls/ResizeControlWidget.razor | 2 +- .../wwwroot/default.styles.css | 16 ++++ .../wwwroot/default.styles.min.css | 2 +- .../wwwroot/default.styles.min.css.gz | Bin 704 -> 735 bytes 11 files changed, 33 insertions(+), 79 deletions(-) delete mode 100644 src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizeProvider.cs diff --git a/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs b/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs index 374e944e..4517f673 100644 --- a/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs +++ b/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs @@ -17,6 +17,8 @@ public ResizeControl(IResizerProvider 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); diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizeProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizeProvider.cs deleted file mode 100644 index 72dfdc53..00000000 --- a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizeProvider.cs +++ /dev/null @@ -1,73 +0,0 @@ -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 BottomLeftResizeProvider : IResizerProvider - { - 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/BottomLeftResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs index 3fc4b68f..c4e576c9 100644 --- a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs +++ b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomLeftResizerProvider.cs @@ -7,7 +7,9 @@ namespace Blazor.Diagrams.Core.Positions.Resizing { public class BottomLeftResizerProvider : IResizerProvider { - private Size _originalSize = null!; + public string? Class => "bottomleft"; + + private Size _originalSize = null!; private Point _originalPosition = null!; private Point _originalMousePosition = null!; private NodeModel _nodeModel = null!; diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs index 558a4cf7..f55e26d7 100644 --- a/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs +++ b/src/Blazor.Diagrams.Core/Positions/Resizing/BottomRightResizerProvider.cs @@ -7,11 +7,13 @@ 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) + public Point? GetPosition(Model model) { if (model is NodeModel nodeModel && nodeModel.Size is not null) { diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs index 1440eff6..65a2ecdd 100644 --- a/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs +++ b/src/Blazor.Diagrams.Core/Positions/Resizing/IResizerProvider.cs @@ -6,6 +6,7 @@ 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 index 39669086..7c3afe5c 100644 --- a/src/Blazor.Diagrams.Core/Positions/Resizing/TopLeftResizerProvider.cs +++ b/src/Blazor.Diagrams.Core/Positions/Resizing/TopLeftResizerProvider.cs @@ -7,7 +7,9 @@ namespace Blazor.Diagrams.Core.Positions.Resizing { public class TopLeftResizerProvider : IResizerProvider { - private Size _originalSize = null!; + public string? Class => "topleft"; + + private Size _originalSize = null!; private Point _originalPosition = null!; private Point _originalMousePosition = null!; private NodeModel _nodeModel = null!; diff --git a/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs b/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs index efb1451c..e9ea4e14 100644 --- a/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs +++ b/src/Blazor.Diagrams.Core/Positions/Resizing/TopRightResizerProvider.cs @@ -7,7 +7,9 @@ namespace Blazor.Diagrams.Core.Positions.Resizing { public class TopRightResizerProvider : IResizerProvider { - private Size _originalSize = null!; + public string? Class => "topright"; + + private Size _originalSize = null!; private Point _originalPosition = null!; private Point _originalMousePosition = null!; private NodeModel _nodeModel = null!; diff --git a/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor b/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor index ddbffd33..cfd15bd7 100644 --- a/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor +++ b/src/Blazor.Diagrams/Components/Controls/ResizeControlWidget.razor @@ -1,4 +1,4 @@ -
+
@code { diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.css b/src/Blazor.Diagrams/wwwroot/default.styles.css index ea267bb6..2b355029 100644 --- a/src/Blazor.Diagrams/wwwroot/default.styles.css +++ b/src/Blazor.Diagrams/wwwroot/default.styles.css @@ -135,4 +135,20 @@ g.diagram-group.default.selected > rect { 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 e5378f1a..e794e823 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%);}.default-node-resizer{width:5px;height:5px;background-color:#f5f5f5;border:1px solid #6e9fd4;position:absolute;} \ 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 1d3b8cb1fbe3a9826d682a1e2935b372cd2eb50f..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`HqbzCFD6=x)nq(%dk3epKx%rdTq|u>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%qwzn9R)sp4V(+*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 704 zcmV;x0zds9iwFP!000003bj^iZlf>|zDlHMrB;d&AxWDWY42k2K)f+FvQ3&c>dE%U z9%-+zHkbe<5AtJWLGbvS_jo3MfBy+6WTfH-2}$Af&ZybpWf+#ncn2)s8N7AhiBuF6 zQiQTf+jB=E={{Go5)`G9ONHmz#x0M<%kntWk~2D+!`7`By+g8R1|{-{^o~&Zj>B1G zVGfGiOXUf93Kwn#(eom#Puvp@j+X28Y&AZMo~;G{SwSf^GfWDsfD^+G5L2d0PCjtY z$BtHLlyNxrX>LCV2;nRjI0a!q#VyB>T5k|DQ0OzTC!w?n842hUe^uJB?8BzZZiQ*d zUxN||G;l}_(9<}NFYuPp^)-fBKpDvuDNreunaV!oTC`_psw=Vbo9L!Wqh68L-vv=Q z6BsSW6}t(4JW{Z9?N*#tN?TkhSskcz)=6S| zSHdv7X-$wwV`MQ+QG>M^bU!$ZIb@~|;RFp1`-m2Y|E6h@C(7mh5k)mar>WlFQ)Og1 zO@#%X>@zu57CSvq9^6-O-|h$E)1tkCNs*aueQmlo+9|jjn+Gg!%x(?tN%tT@4lE}| zs#e-*e20BS)J>z2)axI3)is5;glv=W`zYL4Y)L3(B5%6Tg*KCA@fT%>p(|&TWM%BF z1{`&&+->gU;CcGu)(s(D*S;XF?YsG9-kGwT*R04G=Z*eVbXCGx`_Jp5w!TAoe%Hrl zwL88L9075X06(=ek_jgUC0wTaxEITDguREu)CAE+L2*uw-x@fY;aJV=I7FI#0uHvX zHKv`amA29v->{GZ>{ykbm#BJ791#j8P&2qzeH}&-p);upTz}cW6Yzv=6))WDxt4tg ma_4w>*N_6|s`4|`Rj(hR?(=~W=|g^DCjJA6Jcwvj3IG6UY)NVW