Skip to content

Commit

Permalink
Merge pull request #48 from zHaytam/develop
Browse files Browse the repository at this point in the history
Version 1.2.0 & new Algorithms package
  • Loading branch information
zHaytam authored Nov 8, 2020
2 parents 01ffe30 + ca38f7f commit b504799
Show file tree
Hide file tree
Showing 18 changed files with 337 additions and 72 deletions.
7 changes: 7 additions & 0 deletions Blazor.Diagrams.sln
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "SharedDemo", "samples\Share
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ServerSide", "samples\ServerSide\ServerSide.csproj", "{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazor.Diagrams.Algorithms", "src\Blazor.Diagrams.Algorithms\Blazor.Diagrams.Algorithms.csproj", "{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Expand All @@ -43,6 +45,10 @@ Global
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}.Debug|Any CPU.Build.0 = Debug|Any CPU
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}.Release|Any CPU.ActiveCfg = Release|Any CPU
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6}.Release|Any CPU.Build.0 = Release|Any CPU
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Debug|Any CPU.Build.0 = Debug|Any CPU
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Release|Any CPU.ActiveCfg = Release|Any CPU
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
Expand All @@ -53,6 +59,7 @@ Global
{A1A4F8A5-7C97-41A8-9ADD-54E9D1725B56} = {EE32E278-A887-454E-987D-FFE9E37169FE}
{1CBCC8E6-111C-4364-9882-50881E4CC8B4} = {DA819127-3EF6-4EB9-A2DA-BC056B284A50}
{B9EE910B-8FE7-490C-B20C-CEC27A2890D6} = {DA819127-3EF6-4EB9-A2DA-BC056B284A50}
{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6} = {EE32E278-A887-454E-987D-FFE9E37169FE}
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {969540A2-8162-4063-A4E3-B488F69BD582}
Expand Down
21 changes: 21 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,27 @@ 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).

## Diagrams [1.2.0] - 2020-11-08
### Added
- `DefaultLinkModel` in `DiagramLinkOptions` ([@joezearing](https://github.com/joezearing)).
- Ability to change source/target ports of a link (`SetSourcePort` and `SetTargetPort`).
The methods also trigger the new events `SourcePortChanged` and `TargetPortChanged`.

### Changed
- Curved link paths now take into account the ports alignements and a margin ([@joezearing](https://github.com/joezearing)).
- The `AddLink<T>(T link, PortModel source, PortModel? target = null)` overload in `DiagramManager` is now public.
This is useful when developers want to create the link instance themselves, `DiagramMananger` will setup ports and trigger appropriate events.

### Fixed
- `GetMiddleTargetX` and `GetMiddleTargetY` using `SourcePort` instead of `TargetPort` ([@joezearing](https://github.com/joezearing)).

## Algorithms [0.1.0] - 2020-11-08
A new project that aims to group all the algorithms that can be applied to `DiagramManager`.
It's a seperate package so that you only include it when you need it.

### Added
- Reconnect links to the closest ports (Idea & Initial work by [@kolbjornb](https://github.com/kolbjornb)).

## [1.1.3] - 2020-11-03
### Fixed
- Diagram Container not ready when ports/nodes need it.
Expand Down
11 changes: 7 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@

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).

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.
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).

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).
This library aims to provide most of its features using C#/Blazor while minimizing Javascript.

| NuGet Package | Version | Download |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 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) |
| 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) |
| 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) |

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

## Preview

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

## Roadmap

- [ ] History (undo/redo)
- [ ] Auto layout (might add a lot of js interop)
- [ ] Better way to handle/render groups
- [ ] Pluggable history (undo/redo)
- [ ] Auto layout

### Thinking about

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@page "/demos/reconnect-links"
@inherits ReconnectLinksToClosestPortsComponent
@layout DemoLayout
@inject LayoutData LayoutData

@code {
protected override void OnInitialized()
{
base.OnInitialized();

LayoutData.Title = "Reconnect links";
LayoutData.Info = "An example of reconnecting links to the closest ports.";
LayoutData.DataChanged();
}
}

<div style="position: absolute; z-index: 9999;">
<button @onclick="ReconnectLinks">Reconnect links</button>
</div>

<CascadingValue Name="DiagramManager" Value="diagramManager">
<DiagramCanvas>
<Widgets>
<Navigator Width="300" Height="200" DefaultStyle="true"></Navigator>
</Widgets>
</DiagramCanvas>
</CascadingValue>
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
using Blazor.Diagrams.Algorithms;
using Blazor.Diagrams.Core;
using Blazor.Diagrams.Core.Models;
using Blazor.Diagrams.Core.Models.Core;
using Microsoft.AspNetCore.Components;

namespace SharedDemo.Demos.Algorithms
{
public class ReconnectLinksToClosestPortsComponent : ComponentBase
{
protected readonly DiagramManager diagramManager = new DiagramManager();

protected override void OnInitialized()
{
base.OnInitialized();

var node1 = NewNode(50, 50);
var node2 = NewNode(300, 300);
var node3 = NewNode(300, 50);
diagramManager.AddLink(node1.GetPort(PortAlignment.Top), node2.GetPort(PortAlignment.Right));
diagramManager.AddLink(node1.GetPort(PortAlignment.Bottom), node3.GetPort(PortAlignment.Top));
diagramManager.AddNode(node1);
diagramManager.AddNode(node2);
diagramManager.AddNode(node3);
}


protected void ReconnectLinks() => diagramManager.ReconnectLinksToClosestPorts();


private NodeModel NewNode(double x, double y)
{
var node = new NodeModel(new Point(x, y));
node.AddPort(PortAlignment.Bottom);
node.AddPort(PortAlignment.Top);
node.AddPort(PortAlignment.Left);
node.AddPort(PortAlignment.Right);
return node;
}
}
}
27 changes: 8 additions & 19 deletions samples/SharedDemo/Demos/DynamicInsertions.razor.cs
Original file line number Diff line number Diff line change
Expand Up @@ -41,26 +41,15 @@ protected void AddPort()
return;

var node = model as NodeModel;
if (node.GetPort(PortAlignment.Top) == null)
foreach(PortAlignment portAlignment in Enum.GetValues(typeof(PortAlignment)))
{
node.AddPort(PortAlignment.Top);
node.Refresh();
}
else if (node.GetPort(PortAlignment.Right) == null)
{
node.AddPort(PortAlignment.Right);
node.Refresh();
}
else if (node.GetPort(PortAlignment.Bottom) == null)
{
node.AddPort(PortAlignment.Bottom);
node.Refresh();
}
else if (node.GetPort(PortAlignment.Left) == null)
{
node.AddPort(PortAlignment.Left);
node.Refresh();
}
if(node.GetPort(portAlignment) == null)
{
node.AddPort(portAlignment);
node.Refresh();
break;
}
}
}

protected void RemovePort()
Expand Down
3 changes: 3 additions & 0 deletions samples/SharedDemo/Layouts/DemoLayout.razor
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@
<a href="demos/custom-node" class="list-group-item list-group-item-action bg-light">Custom node</a>
<a href="demos/custom-link" class="list-group-item list-group-item-action bg-light">Custom link</a>
<a href="demos/custom-port" class="list-group-item list-group-item-action bg-light">Custom port</a>

<div class="list-group-item bg-primary text-light">Algorithms</div>
<a href="demos/reconnect-links" class="list-group-item list-group-item-action bg-light">Reconnect links</a>
</div>
</div>
<div id="page-content-wrapper">
Expand Down
1 change: 1 addition & 0 deletions samples/SharedDemo/SharedDemo.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
</ItemGroup>

<ItemGroup>
<ProjectReference Include="..\..\src\Blazor.Diagrams.Algorithms\Blazor.Diagrams.Algorithms.csproj" />
<ProjectReference Include="..\..\src\Blazor.Diagrams.Core\Blazor.Diagrams.Core.csproj" />
<ProjectReference Include="..\..\src\Blazor.Diagrams\Blazor.Diagrams.csproj" />
</ItemGroup>
Expand Down
23 changes: 23 additions & 0 deletions src/Blazor.Diagrams.Algorithms/Blazor.Diagrams.Algorithms.csproj
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<Project Sdk="Microsoft.NET.Sdk">

<PropertyGroup>
<TargetFramework>netstandard2.1</TargetFramework>
<Nullable>enable</Nullable>
<GeneratePackageOnBuild>true</GeneratePackageOnBuild>
<PackageLicenseExpression>MIT</PackageLicenseExpression>
<Authors>zHaytam</Authors>
<Description>Algorithms for Z.Blazor.Diagrams</Description>
<AssemblyVersion>0.1.0</AssemblyVersion>
<FileVersion>0.1.0</FileVersion>
<RepositoryUrl>https://github.com/zHaytam/Blazor.Diagrams</RepositoryUrl>
<Version>0.1.0</Version>
<PackageId>Z.Blazor.Diagrams.Algorithms</PackageId>
<PackageTags>blazor diagrams diagramming svg drag algorithms layouts</PackageTags>
<Product>Z.Blazor.Diagrams.Algorithms</Product>
</PropertyGroup>

<ItemGroup>
<ProjectReference Include="..\Blazor.Diagrams.Core\Blazor.Diagrams.Core.csproj" />
</ItemGroup>

</Project>
15 changes: 15 additions & 0 deletions src/Blazor.Diagrams.Algorithms/Extensions/PointExtensions.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
using Blazor.Diagrams.Core.Models.Core;
using System;

namespace Blazor.Diagrams.Algorithms.Extensions
{
public static class PointExtensions
{
public static double DistanceTo(this Point firstPoint, Point secondPoint)
{
var x = Math.Abs(firstPoint.X - secondPoint.X);
var y = Math.Abs(firstPoint.Y - secondPoint.Y);
return Math.Sqrt(x * x + y * y);
}
}
}
62 changes: 62 additions & 0 deletions src/Blazor.Diagrams.Algorithms/LinksReconnectionAlgorithms.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
using Blazor.Diagrams.Algorithms.Extensions;
using Blazor.Diagrams.Core;
using Blazor.Diagrams.Core.Models;
using System.Collections.Generic;
using System.Linq;

namespace Blazor.Diagrams.Algorithms
{
public static class LinksReconnectionAlgorithms
{
public static void ReconnectLinksToClosestPorts(this DiagramManager diagramManager)
{
// Only refresh ports once
var portsToRefresh = new HashSet<PortModel>();

foreach (var link in diagramManager.AllLinks.ToArray())
{
if (link.TargetPort == null)
continue;

var sourcePorts = link.SourcePort.Parent.Ports;
var targetPorts = link.TargetPort.Parent.Ports;

// Find the ports with minimal distance
var minDistance = double.MaxValue;
var minSourcePort = link.SourcePort;
var minTargetPort = link.TargetPort;
foreach (var sourcePort in sourcePorts)
{
foreach (var targetPort in targetPorts)
{
var distance = sourcePort.Position.DistanceTo(targetPort.Position);
if (distance < minDistance)
{
minDistance = distance;
minSourcePort = sourcePort;
minTargetPort = targetPort;
}
}
}

// Reconnect
if (link.SourcePort != minSourcePort)
{
portsToRefresh.Add(link.SourcePort);
portsToRefresh.Add(minSourcePort);
link.SetSourcePort(minSourcePort);
}

if (link.TargetPort != minTargetPort)
{
portsToRefresh.Add(link.TargetPort);
portsToRefresh.Add(minTargetPort);
link.SetTargetPort(minTargetPort);
}
}

foreach (var port in portsToRefresh)
port.Refresh();
}
}
}
7 changes: 4 additions & 3 deletions src/Blazor.Diagrams.Core/Blazor.Diagrams.Core.csproj
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@
<PackageLicenseExpression>MIT</PackageLicenseExpression>
<Authors>zHaytam</Authors>
<Description>A fully customizable and extensible all-purpose diagrams library for Blazor</Description>
<AssemblyVersion>1.1.3</AssemblyVersion>
<FileVersion>1.1.3</FileVersion>
<AssemblyVersion>1.2.0</AssemblyVersion>
<FileVersion>1.2.0</FileVersion>
<RepositoryUrl>https://github.com/zHaytam/Blazor.Diagrams</RepositoryUrl>
<Version>1.1.3</Version>
<Version>1.2.0</Version>
<PackageId>Z.Blazor.Diagrams.Core</PackageId>
<PackageTags>blazor diagrams diagramming svg drag</PackageTags>
<Product>Z.Blazor.Diagrams.Core</Product>
</PropertyGroup>

<ItemGroup>
Expand Down
Loading

0 comments on commit b504799

Please sign in to comment.