search

Blazor-Diagrams / Blazor.Diagrams

A fully customizable and extensible all-purpose diagrams library for Blazor
https://blazor-diagrams.zhaytam.com
MIT License
917 stars 176 forks source link

Installation instructions may not work on NET 8 #425

Open mattj23 opened 3 months ago

mattj23 commented 3 months ago

I've tried the installation instructions under the "Getting Started" section of the documentation, starting at Installation and going through Display on a fresh Blazor Web App project from the default template in NET 8, and the output does not match the sample given in the documentation.

I tested this on a Windows 10 machine and on a Manjaro Linux machine. I used Rider on both systems.

When using the default.styles.min.css the positioning of the nodes does not match the sample picture, and the nodes can't be clicked or dragged at all (both Windows and Linux). If @rendermode InteractiveServer is used the nodes can be clicked but not dragged.

From Windows

Picture above is from Windows 10

When using the style.min.css stylesheet, the node positions look like they might be correct, but the link is not drawn (on Windows and Linux) and there is no interactivity. When using @rendermode InteractiveServer the link line is drawn and the nodes can be clicked and dragged, though they look the same (no border or background...I assume that's normal for that stylesheet).

From Windows

Picture above is from Windows 10

I've attached the sample project below:

BlazorApp1.zip

I don't know if I'm missing something simple, if the instructions are now incomplete with the changes to NET 8, or if something is broken. I'm happy to do further tests on either system if that would be helpful.

Thanks!

JonBrownNHTI commented 3 months ago

Have you found what the issue is?

Willdew commented 3 months ago

Hi Matt, i had the exact same problem. After reaching the point of just trying out random lines of code from different projects and hoping for the best, i figured out that adding 

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />

to <head> in your App.razor for some reason fixes the problem. Let me know if this also works for you!

JonBrownNHTI commented 3 months ago

Was this for a .NET 8 project? Still having issues with the nodes rendering even with these two lines.

Willdew commented 3 months ago

Interesting. I am running on a .NET 8 project with both client and server-side rendering. The render mode is however InteractiveWebAssembly for this component, so there could of course be a problem for server-side rendering!

JonBrownNHTI commented 3 months ago

I'm using Radzen components. I wonder if there is a conflict with the CSS. Using the default project mattj23 used it works fine. But my project renders nothing when adding:

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />

If that line is not there the nodes get rendered but you can't do anything with them.

JonBrownNHTI commented 3 months ago

image

It's there somewhere lol

stuartmau commented 3 months ago

Hi Matt, i had the exact same problem. After reaching the point of just trying out random lines of code from different projects and hoping for the best, i figured out that adding

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />

to <head> in your App.razor for some reason fixes the problem. Let me know if this also works for you!

That didn't work for me, but it did when adding the two lines to the head section of _Host.cshtml on a relatively empty .net 8 Blazor Server project.

mattj23 commented 3 months ago

Hi Matt, i had the exact same problem. After reaching the point of just trying out random lines of code from different projects and hoping for the best, i figured out that adding

<link href="_content/Z.Blazor.Diagrams/style.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />

to <head> in your App.razor for some reason fixes the problem. Let me know if this also works for you!

@Willdew, I can confirm this worked for me with @rendermode InteractiveServer in the MyDiagram.razor component. I am wondering if the documentation in https://blazor-diagrams.zhaytam.com/documentation/installation is correct but just ambiguously written such that it gives the impression that you use one line or the other rather than both.

It also seems like the documentation can use an update for .NET 8, given that the new Blazor project structure has been shifted around. I'm going to try to figure out how the documentation is structured and maybe make a PR, unless someone who's better positioned to do so wants to update it.

alexradu95 commented 1 month ago

In the App.razor I added the following to the Routes

<Routes @rendermode="InteractiveServer" />