Skip to content

Commit b504799

Browse files
authored
Merge pull request #48 from zHaytam/develop
Version 1.2.0 & new Algorithms package
2 parents 01ffe30 + ca38f7f commit b504799

18 files changed

+337
-72
lines changed

Blazor.Diagrams.sln

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "SharedDemo", "samples\Share
1717
EndProject
1818
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ServerSide", "samples\ServerSide\ServerSide.csproj", "{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}"
1919
EndProject
20+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.Diagrams.Algorithms", "src\Blazor.Diagrams.Algorithms\Blazor.Diagrams.Algorithms.csproj", "{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}"
21+
EndProject
2022
Global
2123
GlobalSection(SolutionConfigurationPlatforms) = preSolution
2224
Debug|Any CPU = Debug|Any CPU
@@ -43,6 +45,10 @@ Global
4345
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}.Debug|Any CPU.Build.0 = Debug|Any CPU
4446
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}.Release|Any CPU.ActiveCfg = Release|Any CPU
4547
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}.Release|Any CPU.Build.0 = Release|Any CPU
48+
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
49+
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Debug|Any CPU.Build.0 = Debug|Any CPU
50+
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Release|Any CPU.ActiveCfg = Release|Any CPU
51+
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Release|Any CPU.Build.0 = Release|Any CPU
4652
EndGlobalSection
4753
GlobalSection(SolutionProperties) = preSolution
4854
HideSolutionNode = FALSE
@@ -53,6 +59,7 @@ Global
5359
{A1A4F8A5-7C97-41A8-9ADD-54E9D1725B56} = {EE32E278-A887-454E-987D-FFE9E37169FE}
5460
{1CBCC8E6-111C-4364-9882-50881E4CC8B4} = {DA819127-3EF6-4EB9-A2DA-BC056B284A50}
5561
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6} = {DA819127-3EF6-4EB9-A2DA-BC056B284A50}
62+
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6} = {EE32E278-A887-454E-987D-FFE9E37169FE}
5663
EndGlobalSection
5764
GlobalSection(ExtensibilityGlobals) = postSolution
5865
SolutionGuid = {969540A2-8162-4063-A4E3-B488F69BD582}

CHANGELOG.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,27 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

7+
## Diagrams [1.2.0] - 2020-11-08
8+
### Added
9+
- `DefaultLinkModel` in `DiagramLinkOptions` ([@joezearing](https://github.com/joezearing)).
10+
- Ability to change source/target ports of a link (`SetSourcePort` and `SetTargetPort`).
11+
The methods also trigger the new events `SourcePortChanged` and `TargetPortChanged`.
12+
13+
### Changed
14+
- Curved link paths now take into account the ports alignements and a margin ([@joezearing](https://github.com/joezearing)).
15+
- The `AddLink<T>(T link, PortModel source, PortModel? target = null)` overload in `DiagramManager` is now public.
16+
This is useful when developers want to create the link instance themselves, `DiagramMananger` will setup ports and trigger appropriate events.
17+
18+
### Fixed
19+
- `GetMiddleTargetX` and `GetMiddleTargetY` using `SourcePort` instead of `TargetPort` ([@joezearing](https://github.com/joezearing)).
20+
21+
## Algorithms [0.1.0] - 2020-11-08
22+
A new project that aims to group all the algorithms that can be applied to `DiagramManager`.
23+
It's a seperate package so that you only include it when you need it.
24+
25+
### Added
26+
- Reconnect links to the closest ports (Idea & Initial work by [@kolbjornb](https://github.com/kolbjornb)).
27+
728
## [1.1.3] - 2020-11-03
829
### Fixed
930
- Diagram Container not ready when ports/nodes need it.

README.md

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,15 @@
22

33
Blazor.Diagrams is a fully customizable and extensible all-purpose diagrams library for Blazor (both Server Side and WASM). It was inspired by the popular React library [react-diagrams](https://github.com/projectstorm/react-diagrams).
44

5-
Blazor.Diagrams can be used to make advanced diagrams with a custom design. Even the behavior of the library is "hackable" and can be changed to suit your needs. The purpose of this library is to give as much functionality as possible with as little JavaScript Interop as possible.
5+
Blazor.Diagrams can be used to make advanced diagrams with a custom design. Even the behavior of the library is "hackable" and can be changed to suit your needs. It is very code/OOP oriented, representing a diagram (using models) is seperate from rendering. This has a lot of benefits, for example if you want to (de)serialize diagrams or make an engine that runs at runtime (visual programming).
66

7-
Blazor.Diagrams is very code/OOP oriented for now, this has a lot of benefits, for example if you want to (de)serialize models or even make an engine that runs at runtime (visual programming).
7+
This library aims to provide most of its features using C#/Blazor while minimizing Javascript.
88

99
| NuGet Package | Version | Download |
1010
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
1111
| Z.Blazor.Diagrams.Core | [![NuGet](https://img.shields.io/nuget/v/Z.Blazor.Diagrams.Core.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Core) | [![Nuget](https://img.shields.io/nuget/dt/Z.Blazor.Diagrams.Core.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Core) |
1212
| Z.Blazor.Diagrams | [![NuGet](https://img.shields.io/nuget/v/Z.Blazor.Diagrams.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams) | [![Nuget](https://img.shields.io/nuget/dt/Z.Blazor.Diagrams.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams) |
13+
| Z.Blazor.Diagrams.Algorithms | [![NuGet](https://img.shields.io/nuget/v/Z.Blazor.Diagrams.Algorithms.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Algorithms) | [![Nuget](https://img.shields.io/nuget/dt/Z.Blazor.Diagrams.Algorithms.svg)](https://www.nuget.org/packages/Z.Blazor.Diagrams.Algorithms) |
1314

1415
| Badges | |
1516
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------- |
@@ -40,6 +41,7 @@ You can get started very easily & quickly using:
4041
- Snap to Grid
4142
- Grouping: [CTRL + ALT + G] to (un)group
4243
- Clipping: only draw nodes that are visible to the users
44+
- Algorithms
4345

4446
## Preview
4547

@@ -63,8 +65,9 @@ Repository: https://github.com/zHaytam/Blazor.DatabaseDesigner
6365

6466
## Roadmap
6567

66-
- [ ] History (undo/redo)
67-
- [ ] Auto layout (might add a lot of js interop)
68+
- [ ] Better way to handle/render groups
69+
- [ ] Pluggable history (undo/redo)
70+
- [ ] Auto layout
6871

6972
### Thinking about
7073

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@page "/demos/reconnect-links"
2+
@inherits ReconnectLinksToClosestPortsComponent
3+
@layout DemoLayout
4+
@inject LayoutData LayoutData
5+
6+
@code {
7+
protected override void OnInitialized()
8+
{
9+
base.OnInitialized();
10+
11+
LayoutData.Title = "Reconnect links";
12+
LayoutData.Info = "An example of reconnecting links to the closest ports.";
13+
LayoutData.DataChanged();
14+
}
15+
}
16+
17+
<div style="position: absolute; z-index: 9999;">
18+
<button @onclick="ReconnectLinks">Reconnect links</button>
19+
</div>
20+
21+
<CascadingValue Name="DiagramManager" Value="diagramManager">
22+
<DiagramCanvas>
23+
<Widgets>
24+
<Navigator Width="300" Height="200" DefaultStyle="true"></Navigator>
25+
</Widgets>
26+
</DiagramCanvas>
27+
</CascadingValue>
Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
using Blazor.Diagrams.Algorithms;
2+
using Blazor.Diagrams.Core;
3+
using Blazor.Diagrams.Core.Models;
4+
using Blazor.Diagrams.Core.Models.Core;
5+
using Microsoft.AspNetCore.Components;
6+
7+
namespace SharedDemo.Demos.Algorithms
8+
{
9+
public class ReconnectLinksToClosestPortsComponent : ComponentBase
10+
{
11+
protected readonly DiagramManager diagramManager = new DiagramManager();
12+
13+
protected override void OnInitialized()
14+
{
15+
base.OnInitialized();
16+
17+
var node1 = NewNode(50, 50);
18+
var node2 = NewNode(300, 300);
19+
var node3 = NewNode(300, 50);
20+
diagramManager.AddLink(node1.GetPort(PortAlignment.Top), node2.GetPort(PortAlignment.Right));
21+
diagramManager.AddLink(node1.GetPort(PortAlignment.Bottom), node3.GetPort(PortAlignment.Top));
22+
diagramManager.AddNode(node1);
23+
diagramManager.AddNode(node2);
24+
diagramManager.AddNode(node3);
25+
}
26+
27+
28+
protected void ReconnectLinks() => diagramManager.ReconnectLinksToClosestPorts();
29+
30+
31+
private NodeModel NewNode(double x, double y)
32+
{
33+
var node = new NodeModel(new Point(x, y));
34+
node.AddPort(PortAlignment.Bottom);
35+
node.AddPort(PortAlignment.Top);
36+
node.AddPort(PortAlignment.Left);
37+
node.AddPort(PortAlignment.Right);
38+
return node;
39+
}
40+
}
41+
}

samples/SharedDemo/Demos/DynamicInsertions.razor.cs

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -41,26 +41,15 @@ protected void AddPort()
4141
return;
4242

4343
var node = model as NodeModel;
44-
if (node.GetPort(PortAlignment.Top) == null)
44+
foreach(PortAlignment portAlignment in Enum.GetValues(typeof(PortAlignment)))
4545
{
46-
node.AddPort(PortAlignment.Top);
47-
node.Refresh();
48-
}
49-
else if (node.GetPort(PortAlignment.Right) == null)
50-
{
51-
node.AddPort(PortAlignment.Right);
52-
node.Refresh();
53-
}
54-
else if (node.GetPort(PortAlignment.Bottom) == null)
55-
{
56-
node.AddPort(PortAlignment.Bottom);
57-
node.Refresh();
58-
}
59-
else if (node.GetPort(PortAlignment.Left) == null)
60-
{
61-
node.AddPort(PortAlignment.Left);
62-
node.Refresh();
63-
}
46+
if(node.GetPort(portAlignment) == null)
47+
{
48+
node.AddPort(portAlignment);
49+
node.Refresh();
50+
break;
51+
}
52+
}
6453
}
6554

6655
protected void RemovePort()

samples/SharedDemo/Layouts/DemoLayout.razor

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@
4545
<a href="demos/custom-node" class="list-group-item list-group-item-action bg-light">Custom node</a>
4646
<a href="demos/custom-link" class="list-group-item list-group-item-action bg-light">Custom link</a>
4747
<a href="demos/custom-port" class="list-group-item list-group-item-action bg-light">Custom port</a>
48+
49+
<div class="list-group-item bg-primary text-light">Algorithms</div>
50+
<a href="demos/reconnect-links" class="list-group-item list-group-item-action bg-light">Reconnect links</a>
4851
</div>
4952
</div>
5053
<div id="page-content-wrapper">

samples/SharedDemo/SharedDemo.csproj

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
</ItemGroup>
1212

1313
<ItemGroup>
14+
<ProjectReference Include="..\..\src\Blazor.Diagrams.Algorithms\Blazor.Diagrams.Algorithms.csproj" />
1415
<ProjectReference Include="..\..\src\Blazor.Diagrams.Core\Blazor.Diagrams.Core.csproj" />
1516
<ProjectReference Include="..\..\src\Blazor.Diagrams\Blazor.Diagrams.csproj" />
1617
</ItemGroup>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netstandard2.1</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
7+
<PackageLicenseExpression>MIT</PackageLicenseExpression>
8+
<Authors>zHaytam</Authors>
9+
<Description>Algorithms for Z.Blazor.Diagrams</Description>
10+
<AssemblyVersion>0.1.0</AssemblyVersion>
11+
<FileVersion>0.1.0</FileVersion>
12+
<RepositoryUrl>https://github.com/zHaytam/Blazor.Diagrams</RepositoryUrl>
13+
<Version>0.1.0</Version>
14+
<PackageId>Z.Blazor.Diagrams.Algorithms</PackageId>
15+
<PackageTags>blazor diagrams diagramming svg drag algorithms layouts</PackageTags>
16+
<Product>Z.Blazor.Diagrams.Algorithms</Product>
17+
</PropertyGroup>
18+
19+
<ItemGroup>
20+
<ProjectReference Include="..\Blazor.Diagrams.Core\Blazor.Diagrams.Core.csproj" />
21+
</ItemGroup>
22+
23+
</Project>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
using Blazor.Diagrams.Core.Models.Core;
2+
using System;
3+
4+
namespace Blazor.Diagrams.Algorithms.Extensions
5+
{
6+
public static class PointExtensions
7+
{
8+
public static double DistanceTo(this Point firstPoint, Point secondPoint)
9+
{
10+
var x = Math.Abs(firstPoint.X - secondPoint.X);
11+
var y = Math.Abs(firstPoint.Y - secondPoint.Y);
12+
return Math.Sqrt(x * x + y * y);
13+
}
14+
}
15+
}

0 commit comments

Comments
 (0)