From 0540f31ddc12eaf0678316a28ff979f19eac5eba Mon Sep 17 00:00:00 2001 From: zHaytam Date: Wed, 28 Oct 2020 15:48:28 +0100 Subject: [PATCH 1/8] Update ReflectionUtils.cs --- samples/SharedDemo/ReflectionUtils.cs | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/samples/SharedDemo/ReflectionUtils.cs b/samples/SharedDemo/ReflectionUtils.cs index 8504c83c..c0c9980b 100644 --- a/samples/SharedDemo/ReflectionUtils.cs +++ b/samples/SharedDemo/ReflectionUtils.cs @@ -10,27 +10,26 @@ public static class ReflectionUtils public static IEnumerable ExtractPossibleOptions() { var type = typeof(T); - return ExtractPossibleOptions(type, ""); + return ExtractPossibleOptions(type, string.Empty, Activator.CreateInstance(type)); } - private static IEnumerable ExtractPossibleOptions(Type type, string prefix) + private static IEnumerable 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().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; } } From 4060269086b28c379707a413c59214bfb455f14b Mon Sep 17 00:00:00 2001 From: zHaytam Date: Wed, 28 Oct 2020 15:59:04 +0100 Subject: [PATCH 2/8] feat: GetRelativePoint helper method --- src/Blazor.Diagrams.Core/DiagramManager.cs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Blazor.Diagrams.Core/DiagramManager.cs b/src/Blazor.Diagrams.Core/DiagramManager.cs index 68860ffb..f51cd741 100644 --- a/src/Blazor.Diagrams.Core/DiagramManager.cs +++ b/src/Blazor.Diagrams.Core/DiagramManager.cs @@ -355,6 +355,9 @@ public void ChangeZoom(double newZoom) 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); From 1940bd05c197264c6b0643fd4d29b538f11e4c58 Mon Sep 17 00:00:00 2001 From: zHaytam Date: Wed, 28 Oct 2020 15:59:12 +0100 Subject: [PATCH 3/8] docs: Drag & Drop demo --- samples/SharedDemo/Demos/DragAndDrop.razor | 28 ++++++++++++ samples/SharedDemo/Demos/DragAndDrop.razor.cs | 42 ++++++++++++++++++ samples/SharedDemo/Layouts/DemoLayout.razor | 1 + .../wwwroot/img/BotAnswerNodeWidget.png | Bin 0 -> 5102 bytes .../wwwroot/img/DefaultNodeWidget.png | Bin 0 -> 2879 bytes 5 files changed, 71 insertions(+) create mode 100644 samples/SharedDemo/Demos/DragAndDrop.razor create mode 100644 samples/SharedDemo/Demos/DragAndDrop.razor.cs create mode 100644 samples/SharedDemo/wwwroot/img/BotAnswerNodeWidget.png create mode 100644 samples/SharedDemo/wwwroot/img/DefaultNodeWidget.png diff --git a/samples/SharedDemo/Demos/DragAndDrop.razor b/samples/SharedDemo/Demos/DragAndDrop.razor new file mode 100644 index 00000000..eb551b5e --- /dev/null +++ b/samples/SharedDemo/Demos/DragAndDrop.razor @@ -0,0 +1,28 @@ +@page "/demos/drag-and-drop" +@layout DemoLayout +@inject LayoutData LayoutData + +
+
+ @* Toolbox *@ +
+
+
+ + Default Node +
+
+
+
+ + Bot Answer Node +
+
+
+
+
+ + + +
+
\ No newline at end of file diff --git a/samples/SharedDemo/Demos/DragAndDrop.razor.cs b/samples/SharedDemo/Demos/DragAndDrop.razor.cs new file mode 100644 index 00000000..da63abda --- /dev/null +++ b/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(); + } + + 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; + } + } +} diff --git a/samples/SharedDemo/Layouts/DemoLayout.razor b/samples/SharedDemo/Layouts/DemoLayout.razor index 0baf587c..2d2305cd 100644 --- a/samples/SharedDemo/Layouts/DemoLayout.razor +++ b/samples/SharedDemo/Layouts/DemoLayout.razor @@ -39,6 +39,7 @@ Zoom to fit Snap to Grid Grouping + Drag & Drop
Customization
Custom node diff --git a/samples/SharedDemo/wwwroot/img/BotAnswerNodeWidget.png b/samples/SharedDemo/wwwroot/img/BotAnswerNodeWidget.png new file mode 100644 index 0000000000000000000000000000000000000000..e9c96d4b1a3c9a5b9f9a3a3154c3ca7677026974 GIT binary patch literal 5102 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 KbKA)6#Qy;uTGt=| literal 0 HcmV?d00001 diff --git a/samples/SharedDemo/wwwroot/img/DefaultNodeWidget.png b/samples/SharedDemo/wwwroot/img/DefaultNodeWidget.png new file mode 100644 index 0000000000000000000000000000000000000000..f26e19f5070ad7fae415d9d5bb48b9d36e5dccb5 GIT binary patch literal 2879 zcmcImdsGuw9=<3q1ylqqQftS+@yR5U7a=i09zlaOfQSkz=wxQ{fFv^{qa;|*qUcd+ zRaO+Mh~f(b3zoCGl!A{fm8|Ovw8sb4BCIZ=D6VC7(N=bbm$s+%_|MKcGjs2q?|#4U ze!t(`na%OBbG$|dj06C9#i*1C%srev-Cdb$xgq06<~D*-C0haT@L^9UuxGD70IqR{ z#3VXNJx_*_CN7GT8iH#xQ4AUY`79fSV(A18X$YOctl)Ijp5Z_ST)|l^RwHUEiqIQW zSr%eJR%{}cm5xbq&a5yD333M`5`h9A`=LpfrG)d)o!Ly8*H`)4l*bSD`qiJw1G53 zEF-ERSJDa&qqKhsCTfV*Y#p$PF^p$JDITATuuB>Qs@3m?noL7zD;>Rxi87$~cZscu zc8cI75LR-f1tX$Y5oS7YFc_sLY0|1E|3KT&<6kMnv7vy}N{g}29vtHlM#98!TNy0B zPah?VvJfauS`tapIGCvT!H7^)6q^_+GqM}e(!xv~^jReOLF^X&Wn$SL7%zPz@tz^w$=l54GPGStlkfAamA{FAH z5&^8$ilnecDiXuekWdk<6=D*J1lMRo5Mq!m&SGF*9@O|YE2|1;7zHRQ;^TxA7K;!* zED(zbSc(cYuz(PvXoyBC)kqkgH*up#BWY2SIODF61L2rVOIl1QQ$hw4sv~%mS;rPM z!_KTiWw0{Yvk$x?3y6$?meBz9)twB**m75JFgDKw&KVds{EmC?r?a0nQ%^9Y??`?> z%t~tMOw>X|=oqKpr@nZ9q~D6Jdbj%b%l-dX{eZcc9yRL-W(VbQ*!A$(y{11kyx(T+ zP1X|$8$A!T6Bg@$1(B%kjTvuneVAC(#8ij!?W*Y;XGz%cp|JfVyf@Q-6{b(wTf5?* zSZ1qbn?rj%(;50o5N2j!7Uml;8Txk*0L}$5%7{eU-p7S%)r`fyj^6xx;|pW-BgIwr z#tq+YDpdOVCC0BSPPzH)?0V;Aeknaws^S@N%GXt&ZQ8CL^UYRaq{JnE%hU}}Tf^N3 z?>h_k1uU7Rz3Q+&e9ZC5Nd2^;apvWqOCNJvZ|~k~eZqTjIjF{(-COg;Xrl)xYz~f_ zaD0(BcmaG*-q|%8*_OK8%gbv`NLbkGqWV_<>RZO+PD#t<3)gh-Iym)=-)HBxFvrK$ z)z!U#a?8H?y-(_Yy1PYj^XC10yQ!(^e8z;mu~Ym@LMDSr-%XFX%FJm9`0&Gxx#!vn zPn|kd4SrlYf6qgsd}8nE>gpGTm6hC^kDu=uF9(R{@Y*}0_Fr*}{QC#oT^9;2Y5(Lx zEl&MuRP_(Ph#eWOrR8Uuo15>hs%-%j_-dzRG>ImhF?CMT=hr9`_xdUFBc2p{aa0B6B*l&}{`hZ1%BH*(HBb za^|1D5>^|1XukV85HW_z%9<-I(w%?aRr=rs)_r6B z)2vgfps{&G@{Obt=lDhPiF0(iDbIT9%zWArvv-s31ZkDvWXUQ$}Rzk5?(OaEahErhl}&rdSGyDk zZ*%0}f@CK&J>6p+6u*U-3kVp7C;5A(z5G{udszb_1_eY_UEP-*KGEJa%eF4@TreDf zGcC)jd%$EGjw@P=5kE>yf{F^-8?P!^7jjqeq7V96Nw> zL^$JDw@XgM#ful?w-M99E#tT*y>Ba(bnQyUgzML@)3>GzY4T}X+pw84XMSB%^S68V z?&Y^r6E Date: Wed, 28 Oct 2020 22:33:43 +0100 Subject: [PATCH 4/8] fix: container resize should also update top/left --- src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs | 5 ++--- src/Blazor.Diagrams/wwwroot/script.js | 5 +---- src/Blazor.Diagrams/wwwroot/script.min.js | 2 +- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs index c3863995..ef45f41d 100644 --- a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs +++ b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs @@ -53,10 +53,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender) } [JSInvokable] - public void OnResize(Size size) + public void OnResize(Rectangle rect) { - DiagramManager.Container.Width = size.Width; - DiagramManager.Container.Height = size.Height; + DiagramManager.Container = rect; DiagramManager.Refresh(); } diff --git a/src/Blazor.Diagrams/wwwroot/script.js b/src/Blazor.Diagrams/wwwroot/script.js index 16b097d2..2c858a44 100644 --- a/src/Blazor.Diagrams/wwwroot/script.js +++ b/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()); } } }), diff --git a/src/Blazor.Diagrams/wwwroot/script.min.js b/src/Blazor.Diagrams/wwwroot/script.min.js index 7eb3c826..5b08b844 100644 --- a/src/Blazor.Diagrams/wwwroot/script.min.js +++ b/src/Blazor.Diagrams/wwwroot/script.min.js @@ -1 +1 @@ -var s={getBoundingClientRect:e=>e.getBoundingClientRect(),tracked:{},ro:new ResizeObserver(e=>{for(const t of e){let e=Array.from(t.target.attributes).find(e=>e.name.startsWith("_bl")).name.substring(4),r=window.ZBlazorDiagrams.tracked[e];r&&r.ref.invokeMethodAsync("OnResize",{Width:t.contentRect.width,Height:t.contentRect.height})}}),observe:(e,t,r)=>{s.ro.observe(e),s.tracked[r]={ref:t}},unobserve:(e,t)=>{s.ro.unobserve(e),delete s.tracked[t]}};window.ZBlazorDiagrams=s; \ No newline at end of file +var s={getBoundingClientRect:e=>e.getBoundingClientRect(),tracked:{},ro:new ResizeObserver(e=>{for(const r of e){let e=Array.from(r.target.attributes).find(e=>e.name.startsWith("_bl")).name.substring(4),t=window.ZBlazorDiagrams.tracked[e];t&&t.ref.invokeMethodAsync("OnResize",r.target.getBoundingClientRect())}}),observe:(e,r,t)=>{s.ro.observe(e),s.tracked[t]={ref:r}},unobserve:(e,r)=>{s.ro.unobserve(e),delete s.tracked[r]}};window.ZBlazorDiagrams=s; \ No newline at end of file From 566d811f25702baab2213956023ec90183e1bd0a Mon Sep 17 00:00:00 2001 From: zHaytam Date: Thu, 29 Oct 2020 12:57:43 +0100 Subject: [PATCH 5/8] feat: recheck node visibility when container changes --- src/Blazor.Diagrams.Core/DiagramManager.cs | 11 ++++++++++- src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs | 7 +------ .../Components/Renderers/NodeRenderer.cs | 2 ++ 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/Blazor.Diagrams.Core/DiagramManager.cs b/src/Blazor.Diagrams.Core/DiagramManager.cs index f51cd741..8b665474 100644 --- a/src/Blazor.Diagrams.Core/DiagramManager.cs +++ b/src/Blazor.Diagrams.Core/DiagramManager.cs @@ -35,8 +35,10 @@ public class DiagramManager public event Action LinkRemoved; public event Action GroupAdded; public event Action 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 AllLinks => _nodes.SelectMany(n => n.AllLinks).Distinct(); public IReadOnlyCollection SelectedModels => _selectedModels; public IReadOnlyCollection 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,13 @@ 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); diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs index ef45f41d..4035d5b4 100644 --- a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs +++ b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs @@ -47,17 +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(Rectangle rect) - { - DiagramManager.Container = rect; - DiagramManager.Refresh(); - } + public void OnResize(Rectangle rect) => DiagramManager.ChangeContainer(rect); protected override bool ShouldRender() { diff --git a/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs b/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs index b2311ec9..714c193e 100644 --- a/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs +++ b/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) @@ -61,6 +62,7 @@ protected override void OnInitialized() _reference = DotNetObjectReference.Create(this); DiagramManager.PanChanged += CheckVisibility; DiagramManager.ZoomChanged += CheckVisibility; + DiagramManager.ContainerChanged += CheckVisibility; Node.Changed += ReRender; } From 6e9b36c63185fc70e8a84b2dc26cc1263436b017 Mon Sep 17 00:00:00 2001 From: zHaytam Date: Thu, 29 Oct 2020 13:17:55 +0100 Subject: [PATCH 6/8] feat: refresh ports when nodes resize --- src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs | 6 ++++++ .../Components/Renderers/PortRenderer.razor.cs | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs b/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs index 714c193e..0df09981 100644 --- a/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs +++ b/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs @@ -53,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() diff --git a/src/Blazor.Diagrams/Components/Renderers/PortRenderer.razor.cs b/src/Blazor.Diagrams/Components/Renderers/PortRenderer.razor.cs index f6d612ec..3270d1bd 100644 --- a/src/Blazor.Diagrams/Components/Renderers/PortRenderer.razor.cs +++ b/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; From 4d2a76b3ab1b29b3e71d18ce6f7fc08e070b9a61 Mon Sep 17 00:00:00 2001 From: zHaytam Date: Mon, 2 Nov 2020 12:32:35 +0100 Subject: [PATCH 7/8] Version 1.1.2 --- src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj | 6 +++--- src/Blazor.Diagrams/Blazor.Diagrams.csproj | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj b/src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj index 0304004d..b875440e 100644 --- a/src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj +++ b/src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj @@ -7,10 +7,10 @@ MIT zHaytam A fully customizable and extensible all-purpose diagrams library for Blazor - 1.1.0 - 1.1.0 + 1.1.2 + 1.1.2 https://github.com/zHaytam/Blazor.Diagrams - 1.1.0 + 1.1.2 Z.Blazor.Diagrams.Core blazor diagrams diagramming svg drag diff --git a/src/Blazor.Diagrams/Blazor.Diagrams.csproj b/src/Blazor.Diagrams/Blazor.Diagrams.csproj index 9128ea79..004f075c 100644 --- a/src/Blazor.Diagrams/Blazor.Diagrams.csproj +++ b/src/Blazor.Diagrams/Blazor.Diagrams.csproj @@ -5,11 +5,11 @@ 3.0 zHaytam MIT - 1.1.0 - 1.1.0 + 1.1.2 + 1.1.2 https://github.com/zHaytam/Blazor.Diagrams A fully customizable and extensible all-purpose diagrams library for Blazor - 1.1.0 + 1.1.2 true blazor diagrams diagramming svg drag Z.Blazor.Diagrams From f5f533eb9e49f4430e5a3eb553e31e66af7ac9af Mon Sep 17 00:00:00 2001 From: zHaytam Date: Mon, 2 Nov 2020 12:39:41 +0100 Subject: [PATCH 8/8] Update CHANGELOG.md --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index d4368176..b93607e3 100644 --- a/CHANGELOG.md +++ b/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).