Merge pull request #62 from zHaytam/develop

Version 1.4.0

Author: zHaytam

Blazor.Diagrams.sln

@@ -19,6 +19,12 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ServerSide", "samples\Serve
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.Diagrams.Algorithms", "src\Blazor.Diagrams.Algorithms\Blazor.Diagrams.Algorithms.csproj", "{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{260DF53D-FF2B-4D1D-ACA7-431F6B62EE38}"
+	ProjectSection(SolutionItems) = preProject
+		CHANGELOG.md = CHANGELOG.md
+		README.md = README.md
+	EndProjectSection
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU

CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Diagrams [1.4.0] - 2020-12-12
+
+### Added
+
+- Two zoom related options, `Minimum` and `Maximum`, to clamp the zoom value.
+
+### Changed
+
+- **[BREAKING]** Grouped zoom related options into `DiagramZoomOptions`, available unnder `Options.Zoom`.
+	- The option `AllowZooming` was renamed to `Enabled`.
+	- The option `InverseZoom` was renamed to `Inverse`.
+
+### Fixed
+
+- The diagram canvas' container wasn't updated when the user scrolls ([#51](https://github.com/zHaytam/Blazor.Diagrams/issues/51)).
+
 ## Diagrams [1.3.0] - 2020-11-29
 
 ### Added

samples/SharedDemo/Demos/Simple.razor.cs

@@ -21,7 +21,7 @@ protected override void OnInitialized()
             diagramManager.AddNode(NewNode(300, 50));
         }
 
-        protected void ToggleZoom() => diagramManager.Options.AllowZooming = !diagramManager.Options.AllowZooming;
+        protected void ToggleZoom() => diagramManager.Options.Zoom.Enabled = !diagramManager.Options.Zoom.Enabled;
 
         protected void TogglePanning() => diagramManager.Options.AllowPanning = !diagramManager.Options.AllowPanning;
 

src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj

@@ -7,10 +7,10 @@
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
     <Authors>zHaytam</Authors>
     <Description>A fully customizable and extensible all-purpose diagrams library for Blazor</Description>
-    <AssemblyVersion>1.3.0</AssemblyVersion>
-    <FileVersion>1.3.0</FileVersion>
+    <AssemblyVersion>1.4.0</AssemblyVersion>
+    <FileVersion>1.4.0</FileVersion>
     <RepositoryUrl>https://github.com/zHaytam/Blazor.Diagrams</RepositoryUrl>
-    <Version>1.3.0</Version>
+    <Version>1.4.0</Version>
     <PackageId>Z.Blazor.Diagrams.Core</PackageId>
     <PackageTags>blazor diagrams diagramming svg drag</PackageTags>
     <Product>Z.Blazor.Diagrams.Core</Product>

src/Blazor.Diagrams.Core/Default/ZoomSubManager.cs

@@ -1,5 +1,6 @@
 using Blazor.Diagrams.Core.Models.Core;
 using Microsoft.AspNetCore.Components.Web;
+using System;
 
 namespace Blazor.Diagrams.Core.Default
 {
@@ -14,11 +15,11 @@ public ZoomSubManager(DiagramManager diagramManager) : base(diagramManager)
 
         private void DiagramManager_Wheel(WheelEventArgs e)
         {
-            if (!DiagramManager.Options.AllowZooming)
+            if (!DiagramManager.Options.Zoom.Enabled)
                 return;
 
             var oldZoom = DiagramManager.Zoom;
-            var deltaY = DiagramManager.Options.InverseZoom ? e.DeltaY * -1 : e.DeltaY;
+            var deltaY = DiagramManager.Options.Zoom.Inverse ? e.DeltaY * -1 : e.DeltaY;
             var newZoom = deltaY > 0 ? oldZoom * _scaleBy : oldZoom / _scaleBy;
 
             if (newZoom < 0)
@@ -37,6 +38,10 @@ private void DiagramManager_Wheel(WheelEventArgs e)
             var newPanX = DiagramManager.Pan.X - widthDiff * xFactor;
             var newPanY = DiagramManager.Pan.Y - heightDiff * yFactor;
 
+            newZoom = Math.Clamp(newZoom, DiagramManager.Options.Zoom.Minimum, DiagramManager.Options.Zoom.Maximum);
+            if (newZoom == DiagramManager.Zoom)
+                return;
+
             DiagramManager.Pan = new Point(newPanX, newPanY);
             DiagramManager.SetZoom(newZoom);
         }

src/Blazor.Diagrams.Core/DiagramOptions.cs

@@ -8,8 +8,6 @@ public class DiagramOptions
     {
         [Description("Key code for deleting entities")]
         public string DeleteKey { get; set; } = "Delete";
-        [Description("Whether to inverse the zoom direction or not")]
-        public bool InverseZoom { get; set; }
         [Description("The default component for nodes")]
         public Type? DefaultNodeComponent { get; set; }
         [Description("The grid size (grid-based snaping")]
@@ -20,9 +18,8 @@ public class DiagramOptions
         public bool AllowMultiSelection { get; set; } = true;
         [Description("Whether to allow panning or not")]
         public bool AllowPanning { get; set; } = true;
-        [Description("Whether to allow zooming or not")]
-        public bool AllowZooming { get; set; } = true;
 
+        public DiagramZoomOptions Zoom { get; set; } = new DiagramZoomOptions();
         public DiagramLinkOptions Links { get; set; } = new DiagramLinkOptions();
     }
 
@@ -39,4 +36,16 @@ public class DiagramLinkOptions
         [Description("The default color for selected links")]
         public string DefaultSelectedColor { get; set; } = "rgb(110, 159, 212)";
     }
+
+    public class DiagramZoomOptions
+    {
+        [Description("Whether to allow zooming or not")]
+        public bool Enabled { get; set; } = true;
+        [Description("Whether to inverse the zoom direction or not")]
+        public bool Inverse { get; set; }
+        [Description("Minimum value allowed")]
+        public double Minimum { get; set; } = 0.1;
+        [Description("Maximum value allowed")]
+        public double Maximum { get; set; } = 2;
+    }
 }

src/Blazor.Diagrams/Blazor.Diagrams.csproj

@@ -5,11 +5,11 @@
     <RazorLangVersion>3.0</RazorLangVersion>
     <Authors>zHaytam</Authors>
     <PackageLicenseExpression>MIT</PackageLicenseExpression>
-    <AssemblyVersion>1.3.0</AssemblyVersion>
-    <FileVersion>1.3.0</FileVersion>
+    <AssemblyVersion>1.4.0</AssemblyVersion>
+    <FileVersion>1.4.0</FileVersion>
     <RepositoryUrl>https://github.com/zHaytam/Blazor.Diagrams</RepositoryUrl>
     <Description>A fully customizable and extensible all-purpose diagrams library for Blazor</Description>
-    <Version>1.3.0</Version>
+    <Version>1.4.0</Version>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
     <PackageTags>blazor diagrams diagramming svg drag</PackageTags>
     <PackageId>Z.Blazor.Diagrams</PackageId>

src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs

@@ -12,7 +12,6 @@ namespace Blazor.Diagrams.Components
 {
     public class DiagramCanvasComponent : ComponentBase, IDisposable
     {
-
         [CascadingParameter(Name = "DiagramManager")]
         public DiagramManager DiagramManager { get; set; }
 
@@ -48,7 +47,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             if (firstRender)
             {
                 DiagramManager.Container = await JSRuntime.GetBoundingClientRect(elementReference);
-                await JSRuntime.ObserveResizes(elementReference, _reference);
+                await JSRuntime.ObserveResizes(elementReference, _reference, isCanvas: true);
             }
         }
 

src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs

@@ -13,9 +13,9 @@ public static async Task<Rectangle> GetBoundingClientRect(this IJSRuntime jsRunt
         }
 
         public static async Task ObserveResizes<T>(this IJSRuntime jsRuntime, ElementReference element, 
-            DotNetObjectReference<T> reference) where T : class
+            DotNetObjectReference<T> reference, bool isCanvas = false) where T : class
         {
-            await jsRuntime.InvokeVoidAsync("ZBlazorDiagrams.observe", element, reference, element.Id);
+            await jsRuntime.InvokeVoidAsync("ZBlazorDiagrams.observe", element, reference, element.Id, isCanvas);
         }
 
         public static async Task UnobserveResizes(this IJSRuntime jsRuntime, ElementReference element)

src/Blazor.Diagrams/wwwroot/script.js

@@ -1,4 +1,5 @@
 var s = {
+    canvas: null,
     getBoundingClientRect: el => {
         return el.getBoundingClientRect();
     },
@@ -12,15 +13,25 @@ var s = {
             }
         }
     }),
-    observe: (element, ref, id) => {
+    observe: (element, ref, id, isCanvas) => {
         s.ro.observe(element);
         s.tracked[id] = {
             ref: ref
         };
+        if (isCanvas) {
+            s.canvas = {
+                elem: element,
+                ref: ref
+            }
+        }
     },
     unobserve: (element, id) => {
         s.ro.unobserve(element);
         delete s.tracked[id];
-    }
+    },
+    
 };
-window.ZBlazorDiagrams = s;
+window.ZBlazorDiagrams = s;
+window.addEventListener('scroll', () => {
+    s.canvas.ref.invokeMethodAsync('OnResize', s.canvas.elem.getBoundingClientRect());
+});