blazor-diagrams/blazor.diagrams

A fully customizable and extensible all-purpose diagrams library for Blazor

Blazor.Diagrams

Z.Blazor.Diagrams is a fully customizable and extensible all-purpose diagrams library for Blazor (both Server Side and WASM). It was first inspired by the popular React library react-diagrams, but then evolved into something much bigger. ZBD 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.

NuGet Package	Version	Download
Z.Blazor.Diagrams.Core
Z.Blazor.Diagrams
Z.Blazor.Diagrams.Algorithms

Badges
JavaScript
CSS
Activity
License

Mindset/Goals

• Be multi purpose and useful for most diagramming use cases. ZBD started as a diagramming library for specific use cases, but it is now expanding to be more generic and more useful.
• Performance is very important, especially in WebAssembly.
• Separate the data layer (models) and the UI layer (widgets). Representing diagrams as a model has a lot of benefits, and the separation makes things easier, such as saving snapshots or mutating models, regardless of how/where it's gonna be rendered.
• Be fully customizable, either in how things look or how things behave. All of the UI can be customized by either providing Blazor components or using CSS. All of the default behaviors are customizable by replacing them with your own custom behaviors.
• Avoid JavaScript. 95% of ZBD is made using C#/Blazor, JS is only used when absolutely necessary (e.g. bounds and observers). JS interop calls are costly, in the future, we strive to have most of them batched and/or replaced.

Features

• Multi purpose
• Touch support
• SVG layer for links/nodes and HTML layer for nodes for maximum customizability
• Links between nodes, ports and even other links
• Link routers, path generators, markers and labels
• Panning, Zooming and Zooming to fit a set of nodes
• Multi selection, deletion and region selection
• Groups as first class citizen, with all the features of nodes
• Custom nodes, links and groups
• Replaceable ("Hackable") behaviors (e.g. link dragging, model deletion, etc..)
• Customizable Diagram overview/navigator for large diagrams
• Snap to Grid
• Virtualization, only draw nodes that are visible to the users
• Locking mechanism (read-only)
• Algorithms

Getting Started

You can get started very easily & quickly using:

• Documentation
• Installation

Sample project

Repository: https://github.com/Blazor-Diagrams/Blazor.DatabaseDesigner

Contributing

All kinds of contributions are welcome!
If you're interested in helping, please create an issue or comment on an existing one to explain what you will be doing. This is because multiple people can be working on the same problem.

Feedback

If you find a bug or you want to see a functionality in this library, feel free to open an issue.

blazor.diagrams's Issues

z index on custom node with drop down

Hi, Having an issue with a custom node with a drop down, it always appears behind other nodes, is there a way (and I've tried forcing it's z-index) to make a dropdown appear above another node?

Nested groups and ports

Issue when running in .NET5

Hey I'm trying to make a .NET 5 project and I wanted to use your diagrams.

Unfortunately I get the following error whenever I try to load up a diagram. Weirdly, the diagram nodes display, but none of the ports do.

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Could not find 'ZBlazorDiagrams.getBoundingClientRect' ('ZBlazorDiagrams' was undefined).
      Error: Could not find 'ZBlazorDiagrams.getBoundingClientRect' ('ZBlazorDiagrams' was undefined).
          at https://localhost:5001/_framework/blazor.webassembly.js:1:1287
          at Array.forEach (<anonymous>)
          at e.findFunction (https://localhost:5001/_framework/blazor.webassembly.js:1:1247)
          at b (https://localhost:5001/_framework/blazor.webassembly.js:1:2989)
          at https://localhost:5001/_framework/blazor.webassembly.js:1:3935
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3908)
          at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:63829)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.0-rc.2.20475.5.js:1:190396)
          at do_icall (<anonymous>:wasm-function[10593]:0x194db2)
Microsoft.JSInterop.JSException: Could not find 'ZBlazorDiagrams.getBoundingClientRect' ('ZBlazorDiagrams' was undefined).
Error: Could not find 'ZBlazorDiagrams.getBoundingClientRect' ('ZBlazorDiagrams' was undefined).
    at https://localhost:5001/_framework/blazor.webassembly.js:1:1287
    at Array.forEach (<anonymous>)
    at e.findFunction (https://localhost:5001/_framework/blazor.webassembly.js:1:1247)
    at b (https://localhost:5001/_framework/blazor.webassembly.js:1:2989)
    at https://localhost:5001/_framework/blazor.webassembly.js:1:3935
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3908)
    at Object.w [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:63829)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.5.0.0-rc.2.20475.5.js:1:190396)
    at do_icall (<anonymous>:wasm-function[10593]:0x194db2)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[Blazor.Diagrams.Core.Models.Core.Rectangle, Blazor.Diagrams.Core, Version=1.1.3.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at Blazor.Diagrams.Extensions.JSRuntimeExtensions.GetBoundingClientRect(IJSRuntime jsRuntime, ElementReference element)
   at Blazor.Diagrams.Components.DiagramCanvasComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
d.printErr @ blazor.webassembly.js:1
d.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.2.20475.5.js:1
do_icall @ 00ab9d9a:0x194db2
do_icall_wrapper @ 00ab9d9a:0x79dee
interp_exec_method @ 00ab9d9a:0x44ac8
interp_runtime_invoke @ 00ab9d9a:0x12ef59
mono_jit_runtime_invoke @ 00ab9d9a:0x118db9
do_runtime_invoke @ 00ab9d9a:0x79d37
mono_runtime_try_invoke @ 00ab9d9a:0x12977
mono_runtime_invoke @ 00ab9d9a:0x10eb85
mono_wasm_invoke_method @ 00ab9d9a:0x108e03
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.2.20475.5.js:1
call_method @ dotnet.5.0.0-rc.2.20475.5.js:1
(anonymous) @ dotnet.5.0.0-rc.2.20475.5.js:1
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.2.20475.5.js:1
do_icall @ 00ab9d9a:0x194db2
do_icall_wrapper @ 00ab9d9a:0x79dee
interp_exec_method @ 00ab9d9a:0x44ac8
interp_runtime_invoke @ 00ab9d9a:0x12ef59
mono_jit_runtime_invoke @ 00ab9d9a:0x118db9
do_runtime_invoke @ 00ab9d9a:0x79d37
mono_runtime_try_invoke @ 00ab9d9a:0x12977
mono_runtime_invoke @ 00ab9d9a:0x10eb85
mono_wasm_invoke_method @ 00ab9d9a:0x108e03
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.2.20475.5.js:1
call_method @ dotnet.5.0.0-rc.2.20475.5.js:1
set_task_result @ dotnet.5.0.0-rc.2.20475.5.js:1
(anonymous) @ dotnet.5.0.0-rc.2.20475.5.js:1
Promise.then (async)
js_to_mono_obj @ dotnet.5.0.0-rc.2.20475.5.js:1
d.preRun.push.window.Blazor._internal.getSatelliteAssemblies @ blazor.webassembly.js:1
w @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.5.0.0-rc.2.20475.5.js:1
do_icall @ 00ab9d9a:0x194db2
do_icall_wrapper @ 00ab9d9a:0x79dee
interp_exec_method @ 00ab9d9a:0x44ac8
interp_runtime_invoke @ 00ab9d9a:0x12ef59
mono_jit_runtime_invoke @ 00ab9d9a:0x118db9
do_runtime_invoke @ 00ab9d9a:0x79d37
mono_runtime_invoke_checked @ 00ab9d9a:0xf652
mono_runtime_try_invoke_array @ 00ab9d9a:0x10e78b
ves_icall_InternalInvoke @ 00ab9d9a:0xed487
ves_icall_InternalInvoke_raw @ 00ab9d9a:0xecf4c
do_icall @ 00ab9d9a:0x194d3f
do_icall_wrapper @ 00ab9d9a:0x79dee
interp_exec_method @ 00ab9d9a:0x44ac8
interp_runtime_invoke @ 00ab9d9a:0x12ef59
mono_jit_runtime_invoke @ 00ab9d9a:0x118db9
do_runtime_invoke @ 00ab9d9a:0x79d37
mono_runtime_try_invoke @ 00ab9d9a:0x12977
mono_runtime_invoke @ 00ab9d9a:0x10eb85
mono_wasm_invoke_method @ 00ab9d9a:0x108e03
Module._mono_wasm_invoke_method @ dotnet.5.0.0-rc.2.20475.5.js:1
call_method @ dotnet.5.0.0-rc.2.20475.5.js:1
(anonymous) @ dotnet.5.0.0-rc.2.20475.5.js:1
callEntryPoint @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
a @ blazor.webassembly.js:1
Promise.then (async)
u @ blazor.webassembly.js:1
a @ blazor.webassembly.js:1
Promise.then (async)
u @ blazor.webassembly.js:1
a @ blazor.webassembly.js:1
Promise.then (async)
u @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
r @ blazor.webassembly.js:1
g @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
n @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1

The canvas' bounding rect needs to be updated on resize

Questions from MichaelLant

I also have a requirement that in certain circumstances only one node is allowed.

I also need to be able to place nodes programatically in specific locations on objects.

As well, I need to have a directionality to nodes where a node can be either an Input Port or an Output Port. Input Ports can connect only to Output Ports. Input Ports cannot connect to Input Ports and Output Ports cannot connect to Output Ports. This is not something that I think that I see Blazor.Diagrams doing directly as there are domain rules associated with how, when and how many ports can be added or removed as well as where the Ports are located. To be more specific, I need to be able to enforce Input Port locations only on the left side of an object and Output Ports on the right side. The reason for controlling the location of the Ports by type is to create a visual workflow for processes (manufacturing, scheduling, chemical reactions, etc.).

I have not yet dug deep enough into the existing capabilities It would be terrific to have that level of control over Nodes/Ports.

I have two projects in mind where I already know all of the connection and containership rules that I need to enforce. If it would help, I can write something that describes the rules in a generic form that describes the functionality without describng the the projects. Please let me know if that would help.

Michael

Originally posted by @MichaelLant in #79 (comment)

Link labels

is it possible to resize the nodes?

Node stays hidden after zooming out

If the user zooms out and a hidden node becomes in the visible view, it stays hidden until some other event occurs.
The zoom event should also be taken in consideration when checking if nodes are visible or not.

NodeWidgetBaseComponent type missing

Hi,
Trying to make a custom node, followed the instructions.
I created a class

 public class CaptionNode : NodeModel
        {
            public CaptionNode(Point position = null) : base(position) { }

            public string Caption { get; set; }
        }

But on the Razor component, @inherits NodeWidgetBaseComponent NodeWidgetBaseComponent is not dounf. And I do have the Z.blazor in the dependencies...

Thanks

Quick start examle not working

I tried to create WASM serivce using Quick Start example from documetation, but i can't make it working, diagram is not rendered (may be css issue). Please, review QuickStart code, and it would be nice if you put working example of in code repository.

Resizable Node

Hello, it's very nice work!!
may you implement resizable function for the node element it will make the designer amazing

thanks for your efforts

ZoomToFit doesn't unhide nodes

Save/Open diagram

Add method to allow serializing/deserializing diagram

Problem with rendering ports

Hi. I'm trying to create custom node, but ports are not rendering.
Here is the style:

.diamond {
    position: relative;
    height: 100px;
    width: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px 40px;
}
.diamond:before {
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    transform: rotateX(45deg) rotateZ(45deg);
    box-shadow: 0px 0px 12px gray;
}
.diamond:after {
    position: absolute;
    top: 10px;
    left: 10px;
    content: '';
    height: calc(100% - 22px);  /* -22px is 2 * 10px gap on either side - 2px border on either side */
    width: calc(100% - 22px);  /* -22px is 2 * 10px gap on either side - 2px border on either side */
    border: 1px solid orange;
    transform: rotateX(45deg) rotateZ(45deg);
}

.diamond.selected {
    border: 1px #4582ec solid;
}

.diamond:hover .port {
    visibility: visible;
}

.diamond .port {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    visibility: hidden;
}

 .diamond .port:hover, .node > .diamond .port.has-links {
    visibility: visible;
    background-color: black;
}

 .diamond .port.bottom {
    position: absolute;
    bottom: -10px;
    left: 40px;
}

 .diamond .port.top {
    position: absolute;
    top: -10px;
    left: 40px;
}
.diamond .port.right {
    position: absolute;
    top: 40px;
    right: -20px;
}
.diamond .port.left {
    position: absolute;
    top: 40px;
    left: -20px;
}

Node itself is drawn perfectly, but ports are missing. "::deep" not solving the problem.

Roadmap -Convert to 5.0

Hi there,

I wondered when you will issue a 5.0. version.
Great product.
Would appreciate a very simple example with menu item and one simple screen.
I cannot get your instructions to work with Core3.1 - does not like two OnInitilized (one in razor and one in code behind) in Core3.1.
The second full example is great but I am having difficulty extracting out a simple example.
Best regards
Julian Hoets

[DISCUSSION] Version 2.0.0

Hello,

I have been thinking a lot about the future of the library and what path to take to ensure that the users get the best experience. It is time to start moving away from react-diagrams as the only inspiration and move forward.

My next plan is to rework some parts of the library and add some much needed functionalities to make Z.Blazor.Diagrams a usable library in many use cases. Here's what I'm planning:

• Add concepts of Link routers and Link path generators.
• Add on-the-fly markers (which would be a triangle/arrow by default).
• Represent the HTML and SVG layers separately and clearly.
• Optimize some hot paths.
• Add a Shapes library to help with more generic diagrams (e.g. Flowcharts).
• Make it easier to register components for models (maybe an attribute + scan).
• Review/Document the SubManagers concept.
• Add more events.
• Resolve all the issues inside the 2.0.0 milestone.
• Add some tests, at least unit tests.

I'm not sure how many actual users do we have, but seing all these changes that will be made, this version will have a lot of breaking changes, and that's why it's a major version.

Any feedback is very welcome!

Auto attach links when they are near ports

Support arrows at Start/End of Curved links

Currently, we only support arrows on line links.

Links additions

btw , is there anyway to put label over the arrow ? and arrow curved would be nice along side with curved lines too
also coloring links is good too

thanks

Originally posted by @mRmEEeZ in #28 (comment)

Error when clicking the canvas in the Events demo

Select/Unselect all

It would be cool if there were shortcuts and methods to select and unselect all nodes, with events of course.

Samples app hosted on gh-pages crashes when encountering captcha redirects

The https://blazor-diagrams.zhaytam.com/ seems to have some CORS configuration corner-case issue when handling captcha redirect. My corporate network has detected these gh-pages as requiring captcha user interaction. So me other corporate users won't beable to see all the awesome work you are doing 😞

Below a snippet of the console error:

custom css not working

Hello,

It seems that custom css in the nodetemplate is not being applied.

Minimal example:

FunctionNodeWidget.razor

<div class="default-node functionnode @(Node.Group != null ? "grouped" : "") @(Node.Selected ? "selected" : "")" style="width: 250px; background-color: @Node.Function.Color">
    @Node.Function.Name
    @foreach (var port in Node.Ports.Cast<FunctionPortModel>())
    {
        <PortRenderer Port="port" Class="functionport">@port.Connector.Name</PortRenderer>
    }
</div>

@code {
    [Parameter]
    public FunctionNode Node { get; set; }
}

As you can see I'm adding class functionport on the PortRenderer. It is defined in the component's stylesheet:

FunctionNodeWidget.razor.css

.functionport {
    padding: 5px;
    margin: -18px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    position: absolute;
}

It does not get applied at runtime. Moving the class to app.css doesn't work either.
Am I doing something wrong?

Thank you

If create node after resize the Diagram canvas, port locations are incorrect and links show incorrectly

Steps to reproduce:
Create an empty diagram.
Add two nodes and then connect them with a link. The link will be shown correctly.
Resize the window.
Add a new node. Connect the new node to an existing node. The link will be shown incorrectly with an offset to the target port.
As you drag to connect the link, the position of the link terminal is correct. As soon as it is connected to a port, the link end position jumps away.
Pre resize:

Post resize and adding a new node:

Add Blazor Unit Testings

There is potential for this project to get more complex. Unit Tests are important.

Unhiding a node in a group takes too much time

For some reason, unhiding a node that is in a group takes too much time (the UI freezes a little bit), while if the node isn't in a group it doesn't.

Deleting a node doesn't delete related links

Adding nodes inside OnInitializedAsync causes weird port rendering.

I was playing around with this library and tried building a diagram from information I got from an API.
So my OnInitializedAsync first creates the DiagramManager, then calls the API and then builds the nodes based on the information from that API.
That all happens inside of the OnInitializedAsync method.
But doing that causes the ports to be rendered way under the actual nodes.

Important here is, that the nodes I used are custom nodes.
But also something to mention is, if I create those nodes hard coded (so not dynamic with the API result), and do that BEFORE the API Call everything is fine.
But doing it after, so I guess after an await call, will cause this weird rendering.

Something interesting is also, that if you zoom in on the diagram, so the nodes are outside of the boundaries and then zoom out again, so you can see the nodes again, the ports get fixed.

Edit:
After some more playing around, I noticed, that if you create the nodes inside of OnAfterRender, there seems to be no problem...

Number of nodes must be >= 2

Hi,

I have a use case where I would like to add only one node to a group.
Currently that is not possible, an error is thrown: ArgumentException: Number of nodes must be >= 2.
Not sure why the limitation is there, any ideas.

Thank you for your great work.

RegisterModelComponent with Subclasses

I am very new to this package so I am sure I missed something. Apologies in advance if this is in the wrong spot. I created this class

public class NodeDataModel:NodeModel
{
        public string Name { get; set; }
        public NodeDataModel ParentNode { get; set; }
        public NodeDataModel(NodeDataModel parent, Point point = null) : base(point)
        {
            ParentNode = parent;
        }
 }

I then created this subclass

public class NodeDataModel<TChildren>: NodeDataModel where TChildren:NodeDataModel
{
        public NodeDataModel(NodeDataModel parent, Point point=null) : base(parent, point)
        {
        }
        public List<TChildren> ChildNodes { get; set; }           
}

I then have several implementations of this subclass for example public class RiskFactor : NodeDataModel<UncertaintyDriver>,public class UncertaintyDriver : NodeDataModel<LeadingIndicator> etc.

I created a simple Blazor NodeComponent to render this custom node :

<div class="card" style="width: 320px;">
    <div class="card-header">
        <h6 class="mb-0">@Node.Name</h6>
    </div>
    <p>Testing</p>
</div>
@foreach (var port in Node.Ports)
{
    <!-- Default ports -->
    <PortRenderer Port="port" />
}
@using DiagramTest.Data
@code {
    [Parameter]
    public NodeDataModel Node { get; set; }
}

Then I register this custom NodeComponent with the diagram like so

_diagram = new Diagram(options);
_diagram.RegisterModelComponent<NodeDataModel, NodeComponent>();

But after all this the default node is getting rendered instead of the custom NodeComponent component. Did I miss something?

UPDATE

After further fiddling, setting the DefaultNodeComponent property to NodeComponent the custom node component rendered as expected. Not sure if this normal behavior. Looking at the DatabaseDesigner example this did not look like it was needed in that scenario for some reason.

Cannot Compile: private NodeModel NewNode(double x, double y)

I am stuck on the updates from the earlier versions.

From the Getting Started example:

private NodeModel NewNode(double x, double y)

This line does not compile. I get the following error:

Error CS0246 The type or namespace name 'Point' could not be found (are you missing a using directive or an assembly reference?)

What am I doing wrong?

How to remove all nodes and links or clear the layers ?

Hello,

How to remove all nodes and links or clear the layers ?

Custom node link point incorrect

Hi,
I started using this great package but I am having difficulty achieving a custom node. The links Y coordinate is lower than the actual node port itself. My custom node is a literal copy of NodeWidget.razor and thus using default styling. I don't have any further css styling yet. Any idea what I could be forgetting here?
DiagramManager.RegisterModelComponent<CustomNodeModel,CustomNodeWidget>();

how to make Groups

Hello again

i have this idea of grouping nodes together
and this group contains nodes than can't be dragged outside of the group in such a way that the group boundaries (rounded rectangle) expands to contains it's nodes
this group of nodes has background color and label that can be placed:
top-left , top-right, top-center , bottom-center, bottom-left or bottom-right

Diagram seems to be impacted by external layout changes

I have a page that has a DiagramCanvas just below two form fields that are required. When the page is loaded these fields are empty, and will have a validation message below. When these fields are filled in the message dissappears, making the diagram shift upwards.

Afterwards, when drawing links between nodes they appear higher than they should. The ports still react correctly when hovering, but the link is "off".

You can see what I mean in this unlisted video:
In the first try, I leave the required fields open. In the second try I make the validation errors dissappear.
https://youtu.be/RgQr3jhdw4M

This might be related: I have functionality that is able to save a diagram, and open it again later on. However, when I open an existing diagram I have to pan about 600px to the right, and 400px towards the bottom before it becomes visible. This might be due to the DiagramCanvas not being at 0,0 within the page. There is a form above it, and a toolbar to its right.

Observe resizes on nodes

Also update port positions when nodes do resize

Using Diagram before it is fully loaded

Hi, great work on 2.0.0!

When I try to add nodes to the diagram programatically in the OnInitializedAsync method of the page

var position = Diagram.GetRelativePoint(x, y);
var node = new FunctionNodeModel(function, position);
Diagram.Nodes.Add(node);

this happens:

System.Exception: Container not available. Make sure you're not using this method before the diagram is fully loaded
   at Blazor.Diagrams.Core.Diagram.GetRelativePoint(Double clientX, Double clientY)

This did not happen in the previous release. Is there a workaround such as an event I should be waiting for?

Thanks

Add ability to disable zooming/panning

Groups don't show in Navigator/Overview

How to reattach links

Hi
just a question on how to detach a link from one node and reattach to another node.

If this is not possible, please make this an enhancement request.

Can't serialize Diagram using System.Text.Json

When I try to serialize Diagram I get.

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Serialization and deserialization of 'System.Type' instances are not supported and should be avoided since they can lead to security issues. Path: $.Inputs.Parent.ShapeDefiner.Method.ReturnParameter.Member.DeclaringType.
System.NotSupportedException: Serialization and deserialization of 'System.Type' instances are not supported and should be avoided since they can lead to security issues. Path: $.Inputs.Parent.ShapeDefiner.Method.ReturnParameter.Member.DeclaringType.

All you need to do to reproduce this error is to create empty instance of Diagram inside webassembly project component and then just try to serialize it with System.Text.Json. Is kind of an issue as I want to be able to pass my custom diagram to the server side safely.

Expand collapse nodes

Hi, just discovering diagrams and looks interesting. Is there a way to expand or collapse child nodes when clicking on a port ?
This would be interesting for large diagrams.

Group customization docs/demo

Algorithms documentation

Community Feedback

@zHaytam => I think it is excellent that you are inspired by react-diagrams. to create something unique for Blazor.

What I find interesting is the idea of

• Architecture Question , specifically with how best to implement model versus widget in the context of Blazor.
• End to End Testing in the context of Model versus widget

Last

I am also curious HOW you would implement the drag and drop in the context of Blazor ( e.g. your Blazor.DatabaseDesigner) for dragging a node or link icon from a side bar menu into the canvas.

Second Last

Perhaps there is need for community to eventually share their custom node and link as Nuget packages.

• Perhaps we could think if isolation CSS and javascript specific for the custom node or link within Nuget packages

Originally posted by @GeorgeS2019 in #27 (comment)

Testing the demo

21-03-25-00-12-28_Trim.mp4

First impression is - the layout overlapping is not great.
The map is partially visible.
Nodes overlap other screen items which is odd.

00:00 - the first node drag is jumpy/stuttering.
00:02 - The next node I drag is fine
00:08 - back to the first node - stuttering again
00:09 - third node also stutters
00:12 - moving the map works great, but weird that nodes can go off-screen and overlap other screen items
00:16 - tried "pinch to zoom" - didn't work, strange results
00:20 - drag stuttering node - dropped behind checkboxes, now cannot access the node

Labels and Ids

Hi Haytam!

I am using your library since it does almost what I need for one project that I am working on. My backend has a graph structure, with each node having 1 or more ports. The difference in my model is that you can have external ports (those connecting to other ports in other nodes) but you can also have internal ports (external ports in the node connecting to ports inside the node).

Forgive me being so dumb, but I tried changing the node label when constructing (since I did not find a Label = or Title = or Name =, etc in the properties)

With:
var node1 = NewNode("A", 50, 50);
var node2 = NewNode("B", 300, 300);

• I expected to see those labels appearing in the UI, since I need to create my own labels instead of always geting "Node Title" on each node. How can I do it ?
• Also, Is there a way someone can give an id (int) to each node and each port ? That way instead of referring to GetPort(PortAlignment.Right) I would do GetPort(portId) instead ?
• Finally, how can I customize it in order to cover the internal node case ?

Thanks in advance and regards !

Javier

Paths wrong repositioning

Hello,

first of all I want to thank you for this amazing and stunning library 👍

I found this issue when I resize, zooming and going away then return back to the nodes

library version : 1.0.4
Blazor-Wasm

Orthogonal Edge Routing

Currently, we only have curved and line links.

Update to .NET 5.0 preview ?

Hi guys,
Great work wth this library ! Thanks so much. I tried the sample project and it works out of the box of course.
Unfortunately, my Blazorwasm project is already upgraded to the latest preview of .NET 5.0 before the release in a couple of months.
Is there a way you guys could upgrade it in nuget ? I did it locally in my machine and it works, and it took me 10 mins max:

Renamed every .netStandard* occurence in every project (.csproj) in the demo to net5.0
Then I targeted Version="5.0.0-rc.1.20451.17" instead of 3.1

The demo works without issues in VS 2019 Version 16.8.0 Preview 3.1

But from my project, if I add the nuget package with Manage nuget packages, I get the current 3.1 version, so I cannot use it because I do not target netStandard at all.

Is there a way I could use the compiled DLL directly in the meanwhile ? I never do this, I always use Nuget, but is there a way I could make it work locally while the upgrade is performed in Nuget ?

Thank you so much in advance and cheers !

Javier