Update project to target .NET 9.0 and upgrade package references Z.Blazor.Diagrams.Core 2.0.0-rc.2 -> 3.0.3

DatabaseDesigner.Core/DatabaseDesigner.Core.csproj

@@ -1,11 +1,11 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>    
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Z.Blazor.Diagrams.Core" Version="2.0.0-rc.2" />
+    <PackageReference Include="Z.Blazor.Diagrams.Core" Version="3.0.3" />
   </ItemGroup>
 
 </Project>

DatabaseDesigner.Core/Models/ColumnPort.cs

@@ -1,4 +1,5 @@
 using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
 using System.Text.Json.Serialization;
 
 namespace DatabaseDesigner.Core.Models
@@ -14,13 +15,15 @@ public ColumnPort(NodeModel parent, Column column, PortAlignment alignment = Por
         [JsonIgnore]
         public Column Column { get; }
 
-        public override bool CanAttachTo(PortModel port)
+        public override bool CanAttachTo(ILinkable other)
         {
             // Avoid attaching to self port/node
-            if (!base.CanAttachTo(port))
+            if (!base.CanAttachTo(other))
                 return false;
 
-            var targetPort = port as ColumnPort;
+            if (other is not ColumnPort targetPort)
+                return false;
+
             var targetColumn = targetPort.Column;
 
             if (Column.Type != targetColumn.Type)

DatabaseDesigner.Core/Models/Table.cs

@@ -7,7 +7,7 @@ namespace DatabaseDesigner.Core.Models
 {
     public class Table : NodeModel
     {
-        public Table(Point position = null) : base(position, RenderLayer.HTML)
+        public Table(Point position = null) : base(position)
         {
             Columns = new List<Column>
             {
@@ -24,8 +24,8 @@ public Table(Point position = null) : base(position, RenderLayer.HTML)
                 }
             };
 
-            AddPort(Columns[0], PortAlignment.Right);
-            AddPort(Columns[1], PortAlignment.Left);
+            AddPort(new ColumnPort(this, Columns[0], PortAlignment.Right));
+            AddPort(new ColumnPort(this, Columns[1], PortAlignment.Left));
         }
 
         public string Name { get; set; } = "Table";

DatabaseDesigner.Wasm/Components/TableNode.razor

@@ -9,8 +9,8 @@
         }
     </ul>
 
-    @if (Node.HasPrimaryColumn)
+    @foreach (var port in Node.Ports)
     {
-        <PortRenderer Port="Node.GetPort(PortAlignment.Right)"></PortRenderer>
+        <PortRenderer @key="port" Port="port"></PortRenderer>
     }
 </div>

DatabaseDesigner.Wasm/Components/TableNode.razor.css

@@ -15,30 +15,30 @@
     border-bottom: unset;
 }
 
-::deep .port {
+::deep .diagram-port {
     width: 20px;
     height: 46px;
     position: absolute;
 }
 
-    ::deep .port:hover {
-        background: #eee;
-        cursor: pointer;
-    }
+::deep .diagram-port:hover {
+    background: #eee;
+    cursor: pointer;
+}
 
-.node > .card.selected ::deep .port {
-    border-right-color: #4582ec; 
-    border-left-color: #4582ec; 
+.node > .card.selected ::deep .diagram-port {
+    border-right-color: #4582ec;
+    border-left-color: #4582ec;
 }
 
-    ::deep .port.right {
-        top: 45px;
-        right: -1px;
-        border-right: 1px solid rgba(0,0,0,0.125);
-    }
+::deep .diagram-port.right {
+    top: 45px;
+    right: -1px;
+    border-right: 1px solid rgba(0,0,0,0.125);
+}
 
-    ::deep .port.left {
-        top: 0;
-        left: -1px;
-        border-left: 1px solid rgba(0,0,0,0.125);
-    }
+::deep .diagram-port.left {
+    top: 0;
+    left: -1px;
+    border-left: 1px solid rgba(0,0,0,0.125);
+}

DatabaseDesigner.Wasm/DatabaseDesigner.Wasm.csproj

@@ -1,15 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net5.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.4" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.4" PrivateAssets="all" />
-    <PackageReference Include="Newtonsoft.Json" Version="13.0.1" />
-    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
-    <PackageReference Include="Z.Blazor.Diagrams" Version="2.0.0-rc.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.4" PrivateAssets="all" />
+    <PackageReference Include="System.Net.Http.Json" Version="9.0.4" />
+    <PackageReference Include="Z.Blazor.Diagrams" Version="3.0.3" />
   </ItemGroup>
 
   <Target Name="AddMyWatchItems" BeforeTargets="GenerateWatchList">

DatabaseDesigner.Wasm/Pages/Index.razor.cs

@@ -1,14 +1,17 @@
-using Blazor.Diagrams.Core;
-using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams;
+using Blazor.Diagrams.Core.Anchors;
 using Blazor.Diagrams.Core.Models;
 using Blazor.Diagrams.Core.Models.Base;
+using Blazor.Diagrams.Core.PathGenerators;
+using Blazor.Diagrams.Core.Routers;
+using Blazor.Diagrams.Options;
 using DatabaseDesigner.Core.Models;
 using DatabaseDesigner.Wasm.Components;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
-using Newtonsoft.Json;
 using System;
 using System.Linq;
+using System.Text.Json;
 using System.Text.Json.Serialization;
 using System.Threading.Tasks;
 
@@ -17,27 +20,46 @@ namespace DatabaseDesigner.Wasm.Pages
     public partial class Index : IDisposable
     {
         [Inject]
-        public IJSRuntime JSRuntime { get; set; }
+        public IJSRuntime JsRuntime { get; set; }
 
-        public Diagram Diagram { get; } = new Diagram(new DiagramOptions
+        public BlazorDiagram Diagram { get; }
+
+        public Index()
         {
-            GridSize = 40,
-            AllowMultiSelection = false,
-            Links = new DiagramLinkOptions
+            var options = new BlazorDiagramOptions
             {
-                Factory = (diagram, sourcePort) =>
+                GridSize = 40,
+                AllowMultiSelection = false,
+                Links =
                 {
-                    return new LinkModel(sourcePort, null)
+                    Factory = (_, source, targetAnchor) =>
                     {
-                        Router = Routers.Orthogonal,
-                        PathGenerator = PathGenerators.Straight,
-                    };
+                        Anchor sourceAnchor;
+                        if (source is PortModel port)
+                        {
+                            sourceAnchor = new SinglePortAnchor(port);
+                        }
+                        else
+                        {
+                            sourceAnchor = new ShapeIntersectionAnchor((NodeModel)source);
+                        }
+
+                        var link = new LinkModel(sourceAnchor, targetAnchor)
+                        {
+                            Router = new OrthogonalRouter(),
+                            PathGenerator = new StraightPathGenerator(),
+                        };
+                        return link;
+                    }
                 }
-            }
-        });
+            };
+
+            Diagram = new(options);
+        }
 
         public void Dispose()
         {
+            if (Diagram?.Links == null) return;
             Diagram.Links.Added -= OnLinkAdded;
             Diagram.Links.Removed -= Diagram_LinkRemoved;
         }
@@ -46,7 +68,7 @@ protected override void OnInitialized()
         {
             base.OnInitialized();
 
-            Diagram.RegisterModelComponent<Table, TableNode>();
+            Diagram.RegisterComponent<Table, TableNode>();
             Diagram.Nodes.Add(new Table());
 
             Diagram.Links.Added += OnLinkAdded;
@@ -55,27 +77,34 @@ protected override void OnInitialized()
 
         private void OnLinkAdded(BaseLinkModel link)
         {
-            link.TargetPortChanged += OnLinkTargetPortChanged;
-        }
+            if (link.Source is SinglePortAnchor { Port: ColumnPort columnPort })
+            {
+                columnPort.Column.Refresh();
+            }
 
-        private void OnLinkTargetPortChanged(BaseLinkModel link, PortModel oldPort, PortModel newPort)
-        {
-            link.Labels.Add(new LinkLabelModel(link, "1..*", -40, new Point(0, -30)));
+            link.AddLabel("1..*", -40, new(-30, 0));
             link.Refresh();
-
-            ((newPort ?? oldPort) as ColumnPort).Column.Refresh();
         }
 
         private void Diagram_LinkRemoved(BaseLinkModel link)
         {
-            link.TargetPortChanged -= OnLinkTargetPortChanged;
-
-            if (!link.IsAttached)
-                return;
+            ColumnPort sourceColumnPort = null;
+            ColumnPort targetColumnPort = null;
+
+            if (link.Source is SinglePortAnchor { Port: ColumnPort sportPort })
+            {
+                sourceColumnPort = sportPort;
+            }
+
+            if (link.Target is SinglePortAnchor { Port: ColumnPort columnPort })
+            {
+                targetColumnPort = columnPort;
+            }
 
-            var sourceCol = (link.SourcePort as ColumnPort).Column;
-            var targetCol = (link.TargetPort as ColumnPort).Column;
-            (sourceCol.Primary ? targetCol : sourceCol).Refresh();
+            if (sourceColumnPort?.Column != null && targetColumnPort?.Column != null)
+            {
+                (sourceColumnPort.Column.Primary ? targetColumnPort.Column : sourceColumnPort.Column).Refresh();
+            }
         }
 
         private void NewTable()
@@ -85,16 +114,20 @@ private void NewTable()
 
         private async Task ShowJson()
         {
-            var json = JsonConvert.SerializeObject(new
-            {
-                Nodes = Diagram.Nodes.Cast<object>(),
-                Links = Diagram.Links.Cast<object>()
-            }, Formatting.Indented, new JsonSerializerSettings
+
+            var dataToSerialize = new
             {
-                ReferenceLoopHandling = ReferenceLoopHandling.Ignore
-            });
+                Nodes = Diagram.Nodes.ToList(), 
+                Links = Diagram.Links.ToList()
+            };
 
-            await JSRuntime.InvokeVoidAsync("console.log", json);
+            var options = new JsonSerializerOptions
+            {
+                WriteIndented = true,
+                ReferenceHandler = ReferenceHandler.IgnoreCycles
+            };
+            var json = JsonSerializer.Serialize(dataToSerialize, options);
+            await JsRuntime.InvokeVoidAsync("console.log", json);
         }
 
         private void Debug()

DatabaseDesigner.Wasm/Program.cs

@@ -1,22 +1,14 @@
+using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using Microsoft.Extensions.DependencyInjection;
+using DatabaseDesigner.Wasm;
 using System;
 using System.Net.Http;
-using System.Threading.Tasks;
 
-namespace DatabaseDesigner.Wasm
-{
-    public class Program
-    {
-        public static async Task Main(string[] args)
-        {
-            var builder = WebAssemblyHostBuilder.CreateDefault(args);
-            builder.RootComponents.Add<App>("#app");
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add<App>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
 
-            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-
-            await builder.Build().RunAsync();
-        }
-    }
-}
+await builder.Build().RunAsync();

DatabaseDesigner.Wasm/_Imports.razor

@@ -9,9 +9,11 @@
 @using DatabaseDesigner.Wasm
 @using DatabaseDesigner.Wasm.Layouts
 @using DatabaseDesigner.Wasm.Components
-@using Blazor.Diagrams.Core;
-@using Blazor.Diagrams.Core.Models;
-@using Blazor.Diagrams.Components;
-@using Blazor.Diagrams.Components.Renderers;
-@using DatabaseDesigner.Core.Models;
-@using Blazor.Diagrams.Core.Extensions;
+@using Blazor.Diagrams.Core
+@using Blazor.Diagrams.Core.Models
+@using Blazor.Diagrams.Core.Geometry
+@using Blazor.Diagrams
+@using Blazor.Diagrams.Components
+@using Blazor.Diagrams.Components.Renderers
+@using DatabaseDesigner.Core.Models
+@using Blazor.Diagrams.Core.Extensions