Merge pull request #43 from zHaytam/develop

Version 1.1.2

CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+## [1.1.2] - 2020-10-19
+### Added
+- Drag & Drop demo.
+- Helper method `DiagramManager.GetRelativePoint`.
+
+### Fixed
+- Diagram container resizes don't update the offsets/position (top/left).
+- Container changes don't trigger node visibility checks.
+- Ports aren't refreshed when nodes are resized.
+
 ## [1.1.0] - 2020-10-19
 ### Added
 - Track mouseup events on nodes [@joriskalz](https://github.com/joriskalz).

samples/SharedDemo/Demos/DragAndDrop.razor

@@ -0,0 +1,28 @@
+@page "/demos/drag-and-drop"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<div class="row h-100">
+    <div class="col-4">
+        @* Toolbox *@
+        <div class="row h-100 p-4 no-gutters" style="background: #eee;">
+            <div class="col-6">
+                <div class="text-center" draggable="true" @ondragstart="() => OnDragStart(0)">
+                    <img class="d-block m-auto" src="_content/SharedDemo/img/DefaultNodeWidget.png" />
+                    <span>Default Node</span>
+                </div>
+            </div>
+            <div class="col-6">
+                <div class="text-center" draggable="true" @ondragstart="() => OnDragStart(1)">
+                    <img class="d-block m-auto" src="_content/SharedDemo/img/BotAnswerNodeWidget.png" />
+                    <span>Bot Answer Node</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-8" ondragover="event.preventDefault();" @ondragover:preventDefault @ondrop="OnDrop">
+        <CascadingValue Name="DiagramManager" Value="_diagramManager">
+            <DiagramCanvas></DiagramCanvas>
+        </CascadingValue>
+    </div>
+</div>

samples/SharedDemo/Demos/DragAndDrop.razor.cs

@@ -0,0 +1,42 @@
+using Blazor.Diagrams.Core;
+using Blazor.Diagrams.Core.Models;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace SharedDemo.Demos
+{
+    public partial class DragAndDrop
+    {
+        private readonly DiagramManager _diagramManager = new DiagramManager();
+        private int? _draggedType;
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LayoutData.Title = "Drag & Drop";
+            LayoutData.Info = "A very simple drag & drop implementation using the HTML5 events.";
+            LayoutData.DataChanged();
+
+            _diagramManager.RegisterModelComponent<BotAnswerNode, BotAnswerWidget>();
+        }
+
+        private void OnDragStart(int key)
+        {
+            // Can also use transferData, but this is probably "faster"
+            _draggedType = key;
+        }
+
+        private void OnDrop(DragEventArgs e)
+        {
+            if (_draggedType == null) // Unkown item
+                return;
+
+            var position = _diagramManager.GetRelativePoint(e.ClientX, e.ClientY);
+            var node = _draggedType == 0 ? new NodeModel(position) : new BotAnswerNode(position);
+            node.AddPort(PortAlignment.Top);
+            node.AddPort(PortAlignment.Bottom);
+            _diagramManager.AddNode(node);
+            _draggedType = null;
+        }
+    }
+}

samples/SharedDemo/Layouts/DemoLayout.razor

@@ -39,6 +39,7 @@
             <a href="demos/zoomtofit" class="list-group-item list-group-item-action bg-light">Zoom to fit</a>
             <a href="demos/snaptogrid" class="list-group-item list-group-item-action bg-light">Snap to Grid</a>
             <a href="demos/grouping" class="list-group-item list-group-item-action bg-light">Grouping</a>
+            <a href="demos/drag-and-drop" class="list-group-item list-group-item-action bg-light">Drag & Drop</a>
 
             <div class="list-group-item bg-primary text-light">Customization</div>
             <a href="demos/custom-node" class="list-group-item list-group-item-action bg-light">Custom node</a>

samples/SharedDemo/ReflectionUtils.cs

@@ -10,27 +10,26 @@ public static class ReflectionUtils
         public static IEnumerable<PossibleOption> ExtractPossibleOptions<T>()
         {
             var type = typeof(T);
-            return ExtractPossibleOptions(type, "");
+            return ExtractPossibleOptions(type, string.Empty, Activator.CreateInstance(type));
         }
 
-        private static IEnumerable<PossibleOption> ExtractPossibleOptions(Type type, string prefix)
+        private static IEnumerable<PossibleOption> ExtractPossibleOptions(Type type, string prefix, object instance)
         {
-            var instance = Activator.CreateInstance(type); // Assuming parameterless ctor
-
             foreach (var property in type.GetProperties(BindingFlags.Public | BindingFlags.Instance))
             {
                 var name = $"{prefix}{property.Name}";
+                var propertyValue = instance == null ? null : property.GetValue(instance);
 
                 if (!IsPrimitiveOrNullable(property.PropertyType))
                 {
-                    foreach (var entry in ExtractPossibleOptions(property.PropertyType, name + "."))
+                    foreach (var entry in ExtractPossibleOptions(property.PropertyType, name + ".", propertyValue))
                         yield return entry;
 
                     continue;
                 }
 
                 var typeName = FormatPropertyType(property.PropertyType);
-                var @default = property.GetValue(instance)?.ToString();
+                var @default = propertyValue?.ToString();
                 var description = property.GetCustomAttribute<DescriptionAttribute>().Description;
                 yield return new PossibleOption(name, typeName, @default, description);
             }
@@ -48,7 +47,7 @@ private static bool IsPrimitiveOrNullable(Type type)
         {
             return type == typeof(object) ||
                 type == typeof(Type) ||
-                Type.GetTypeCode(type) != TypeCode.Object || 
+                Type.GetTypeCode(type) != TypeCode.Object ||
                 Nullable.GetUnderlyingType(type) != null;
         }
     }

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.1.0</AssemblyVersion>
-    <FileVersion>1.1.0</FileVersion>
+    <AssemblyVersion>1.1.2</AssemblyVersion>
+    <FileVersion>1.1.2</FileVersion>
     <RepositoryUrl>https://github.com/zHaytam/Blazor.Diagrams</RepositoryUrl>
-    <Version>1.1.0</Version>
+    <Version>1.1.2</Version>
     <PackageId>Z.Blazor.Diagrams.Core</PackageId>
     <PackageTags>blazor diagrams diagramming svg drag</PackageTags>
   </PropertyGroup>

src/Blazor.Diagrams.Core/DiagramManager.cs

@@ -35,8 +35,10 @@ public class DiagramManager
         public event Action<LinkModel> LinkRemoved;
         public event Action<Group> GroupAdded;
         public event Action<Group> GroupRemoved;
+
         public event Action PanChanged;
         public event Action ZoomChanged;
+        public event Action ContainerChanged;
 
         public DiagramManager(DiagramOptions? options = null)
         {
@@ -61,7 +63,7 @@ public DiagramManager(DiagramOptions? options = null)
         public IEnumerable<LinkModel> AllLinks => _nodes.SelectMany(n => n.AllLinks).Distinct();
         public IReadOnlyCollection<SelectableModel> SelectedModels => _selectedModels;
         public IReadOnlyCollection<Group> Groups => _groups;
-        public Rectangle Container { get; internal set; }
+        public Rectangle Container { get; private set; }
         public Point Pan { get; internal set; } = Point.Zero;
         public double Zoom { get; private set; } = 1;
         public DiagramOptions Options { get; }
@@ -355,6 +357,16 @@ public void ChangeZoom(double newZoom)
             Refresh();
         }
 
+        internal void ChangeContainer(Rectangle newRect)
+        {
+            Container = newRect;
+            ContainerChanged?.Invoke();
+            Refresh();
+        }
+
+        public Point GetRelativePoint(double clientX, double clientY)
+            => new Point((clientX - Container.Left - Pan.X) / Zoom, (clientY - Container.Top - Pan.Y) / Zoom);
+
         internal void OnMouseDown(Model model, MouseEventArgs e) => MouseDown?.Invoke(model, e);
 
         internal void OnMouseMove(Model model, MouseEventArgs e) => MouseMove?.Invoke(model, e);

src/Blazor.Diagrams/Blazor.Diagrams.csproj

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

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

@@ -47,18 +47,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
             if (firstRender)
             {
-                DiagramManager.Container = await JSRuntime.GetBoundingClientRect(elementReference);
                 await JSRuntime.ObserveResizes(elementReference, _reference);
             }
         }
 
         [JSInvokable]
-        public void OnResize(Size size)
-        {
-            DiagramManager.Container.Width = size.Width;
-            DiagramManager.Container.Height = size.Height;
-            DiagramManager.Refresh();
-        }
+        public void OnResize(Rectangle rect) => DiagramManager.ChangeContainer(rect);
 
         protected override bool ShouldRender()
         {

src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs

@@ -33,6 +33,7 @@ public void Dispose()
         {
             DiagramManager.PanChanged -= CheckVisibility;
             DiagramManager.ZoomChanged -= CheckVisibility;
+            DiagramManager.ContainerChanged -= CheckVisibility;
             Node.Changed -= ReRender;
 
             if (_reference == null)
@@ -52,6 +53,12 @@ public void OnResize(Size size)
                 return;
 
             Node.Size = size;
+
+            foreach (var port in Node.Ports)
+            {
+                port.Initialized = false;
+                port.RefreshAll();
+            }
         }
 
         protected override void OnInitialized()
@@ -61,6 +68,7 @@ protected override void OnInitialized()
             _reference = DotNetObjectReference.Create(this);
             DiagramManager.PanChanged += CheckVisibility;
             DiagramManager.ZoomChanged += CheckVisibility;
+            DiagramManager.ContainerChanged += CheckVisibility;
             Node.Changed += ReRender;
         }
 

src/Blazor.Diagrams/Components/Renderers/PortRenderer.razor.cs

@@ -49,7 +49,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await base.OnAfterRenderAsync(firstRender);
             _shouldRender = false;
 
-            if (firstRender && !Port.Initialized)
+            if (!Port.Initialized || firstRender)
             {
                 var zoom = DiagramManager.Zoom;
                 var pan = DiagramManager.Pan;

src/Blazor.Diagrams/wwwroot/script.js

@@ -8,10 +8,7 @@ var s = {
             let id = Array.from(entry.target.attributes).find(e => e.name.startsWith('_bl')).name.substring(4);
             let element = window.ZBlazorDiagrams.tracked[id];
             if (element) {
-                element.ref.invokeMethodAsync('OnResize', {
-                    'Width': entry.contentRect.width,
-                    'Height': entry.contentRect.height
-                });
+                element.ref.invokeMethodAsync('OnResize', entry.target.getBoundingClientRect());
             }
         }
     }),