fix: NavigatorWidget not handling negative node positions + Add FillC…

…olor option
joezearing · Mar 6, 2021 · e359f5a · e359f5a
1 parent 667ab2d
commit e359f5a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 28 deletions.
diff --git a/src/Blazor.Diagrams/Components/NavigatorWidget.razor b/src/Blazor.Diagrams/Components/NavigatorWidget.razor
@@ -1,9 +1,9 @@
 @if (Diagram.Container != null)
 {
-    var addedNodeX = Math.Max(0, Diagram.Pan.X);
-    var addedNodeY = Math.Max(0, Diagram.Pan.Y);
-    var addedCurrentViewX = Math.Abs(Math.Min(0, Diagram.Pan.X)) * XFactor;
-    var addedCurrentViewY = Math.Abs(Math.Min(0, Diagram.Pan.Y)) * YFactor;
+    var addedNodeX = Math.Max(0, Diagram.Pan.X) + NodePositionAdjustment.X;
+    var addedNodeY = Math.Max(0, Diagram.Pan.Y) + NodePositionAdjustment.Y;
+    var addedCurrentViewX = (Math.Abs(Math.Min(0, Diagram.Pan.X)) + NodePositionAdjustment.X) * XFactor;
+    var addedCurrentViewY = (Math.Abs(Math.Min(0, Diagram.Pan.Y)) + NodePositionAdjustment.Y) * YFactor;
     var currentViewWidth = Diagram.Container.Width * XFactor;
     var currentViewHeight = Diagram.Container.Height * YFactor;
 
@@ -13,18 +13,19 @@
                  style="top: @(addedCurrentViewY.ToInvariantString())px;
                         left: @(addedCurrentViewX.ToInvariantString())px;
                         width: @(currentViewWidth.ToInvariantString())px;
-                        height: @(currentViewHeight.ToInvariantString())px;"></div>
+                        height: @(currentViewHeight.ToInvariantString())px;
+                        border: 2px solid @FillColor;"></div>
         </div>
         <svg width="@(Width.ToInvariantString())px" height="@(Height.ToInvariantString())px">
             @foreach (var node in Diagram.Nodes.Where(n => n.Size != null))
             {
-                var left = (Math.Max(0, node.Position.X * Diagram.Zoom) + addedNodeX) * XFactor;
-                var top = (Math.Max(0, node.Position.Y * Diagram.Zoom) + addedNodeY) * YFactor;
+                var left = ((node.Position.X * Diagram.Zoom) + addedNodeX) * XFactor;
+                var top = ((node.Position.Y * Diagram.Zoom) + addedNodeY) * YFactor;
                 var width = node.Size.Width * Diagram.Zoom * XFactor;
                 var height = node.Size.Height * Diagram.Zoom * YFactor;
 
                 <g @key="node.Id" transform="translate(@left.ToInvariantString(), @top.ToInvariantString())">
-                    <rect fill="#40babd"
+                    <rect fill="@FillColor"
                           width="@width.ToInvariantString()"
                           height="@height.ToInvariantString()"></rect>
                 </g>
@@ -38,7 +39,7 @@
                 var height = group.Size.Height * Diagram.Zoom * YFactor;
 
                 <g @key="group.Id" transform="translate(@left.ToInvariantString(), @top.ToInvariantString())">
-                    <rect stroke="#40babd"
+                    <rect stroke="@FillColor"
                           stroke-width="2"
                           fill="none"
                           width="@width.ToInvariantString()"

diff --git a/src/Blazor.Diagrams/Components/NavigatorWidget.razor.cs b/src/Blazor.Diagrams/Components/NavigatorWidget.razor.cs
@@ -10,21 +10,15 @@ namespace Blazor.Diagrams.Components
 {
     public partial class NavigatorWidget : IDisposable
     {
+        [CascadingParameter] public Diagram Diagram { get; set; }
+        [Parameter] public double Width { get; set; }
+        [Parameter] public double Height { get; set; }
+        [Parameter] public string FillColor { get; set; } = "#40babd";
+        [Parameter] public bool DefaultStyle { get; set; }
 
-        [CascadingParameter]
-        public Diagram Diagram { get; set; }
-
-        [Parameter]
-        public double Width { get; set; }
-
-        [Parameter]
-        public double Height { get; set; }
-
-        [Parameter]
-        public bool DefaultStyle { get; set; }
-
-        protected double XFactor { get; set; }
-        protected double YFactor { get; set; }
+        private Point NodePositionAdjustment { get; set; }
+        private double XFactor { get; set; }
+        private double YFactor { get; set; }
 
         protected override void OnParametersSet()
         {
@@ -77,6 +71,7 @@ private void Refresh()
             (double fullSizeWidth, double fullSizeHeight) = GetFullSize(nodesMaxX, nodesMaxY);
             AdjustFullSizeWithNodesRect(nodesMinX, nodesMinY, ref fullSizeWidth, ref fullSizeHeight);
 
+            NodePositionAdjustment = new Point(nodesMinX < 0 ? Math.Abs(nodesMinX) : 0, nodesMinY < 0 ? Math.Abs(nodesMinY) : 0);
             XFactor = Width / fullSizeWidth;
             YFactor = Height / fullSizeHeight;
             StateHasChanged();

diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.css b/src/Blazor.Diagrams/wwwroot/default.styles.css
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.min.css b/src/Blazor.Diagrams/wwwroot/default.styles.min.css
diff --git a/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz b/src/Blazor.Diagrams/wwwroot/default.styles.min.css.gz