diff --git a/DatabaseDesigner.Core/DatabaseDesigner.Core.csproj b/DatabaseDesigner.Core/DatabaseDesigner.Core.csproj index a06ba70..c3318ba 100644 --- a/DatabaseDesigner.Core/DatabaseDesigner.Core.csproj +++ b/DatabaseDesigner.Core/DatabaseDesigner.Core.csproj @@ -1,11 +1,11 @@  - net5.0 + net9.0 - + diff --git a/DatabaseDesigner.Core/Models/ColumnPort.cs b/DatabaseDesigner.Core/Models/ColumnPort.cs index eb5e1b1..007392a 100644 --- a/DatabaseDesigner.Core/Models/ColumnPort.cs +++ b/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) diff --git a/DatabaseDesigner.Core/Models/Table.cs b/DatabaseDesigner.Core/Models/Table.cs index a546c5a..f1136da 100644 --- a/DatabaseDesigner.Core/Models/Table.cs +++ b/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 { @@ -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"; diff --git a/DatabaseDesigner.Wasm/Components/TableNode.razor b/DatabaseDesigner.Wasm/Components/TableNode.razor index e616307..b42b085 100644 --- a/DatabaseDesigner.Wasm/Components/TableNode.razor +++ b/DatabaseDesigner.Wasm/Components/TableNode.razor @@ -9,8 +9,8 @@ } - @if (Node.HasPrimaryColumn) + @foreach (var port in Node.Ports) { - + } \ No newline at end of file diff --git a/DatabaseDesigner.Wasm/Components/TableNode.razor.css b/DatabaseDesigner.Wasm/Components/TableNode.razor.css index 0779570..4874a23 100644 --- a/DatabaseDesigner.Wasm/Components/TableNode.razor.css +++ b/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); +} diff --git a/DatabaseDesigner.Wasm/DatabaseDesigner.Wasm.csproj b/DatabaseDesigner.Wasm/DatabaseDesigner.Wasm.csproj index 12f6cad..d4d16e8 100644 --- a/DatabaseDesigner.Wasm/DatabaseDesigner.Wasm.csproj +++ b/DatabaseDesigner.Wasm/DatabaseDesigner.Wasm.csproj @@ -1,15 +1,14 @@  - net5.0 + net9.0 - - - - - + + + + diff --git a/DatabaseDesigner.Wasm/Pages/Index.razor.cs b/DatabaseDesigner.Wasm/Pages/Index.razor.cs index ca27c9f..efe75eb 100644 --- a/DatabaseDesigner.Wasm/Pages/Index.razor.cs +++ b/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(); + Diagram.RegisterComponent(); 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(), - Links = Diagram.Links.Cast() - }, 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() diff --git a/DatabaseDesigner.Wasm/Program.cs b/DatabaseDesigner.Wasm/Program.cs index ab49be9..88eb32c 100644 --- a/DatabaseDesigner.Wasm/Program.cs +++ b/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"); +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.RootComponents.Add("#app"); +builder.RootComponents.Add("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(); diff --git a/DatabaseDesigner.Wasm/_Imports.razor b/DatabaseDesigner.Wasm/_Imports.razor index 86b7660..05a5825 100644 --- a/DatabaseDesigner.Wasm/_Imports.razor +++ b/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; \ No newline at end of file +@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 \ No newline at end of file