Could someone please help me with this. I have looked all over the internet for different examples. I have tried a few different Blazor templates. No matter what I have tried I can't seem to get the nodes or links to work correctly. It seems like it could be a JS issue but I'm not sure about that. I have noticed that the positioning of the nodes being blocked by static positioning. I couldn't find anything on that either. The code is just the 'getting started' part of the documentation. Here is a screenshot of what I am getting:
Here is the index.html so you can see the arrangement of sources from the component as well as the code that creates the nodes in the code behind of the component:
Workflow.razor.cs
var firstNode = Diagram.Nodes.Add(new NodeModel(position: new Point(50, 50))
{
Title = "Node 1"
});
var secondNode = Diagram.Nodes.Add(new NodeModel(position: new Point(200, 100))
{
Title = "Node 2"
});
var leftPort = secondNode.AddPort(PortAlignment.Left);
secondNode.AddPort(PortAlignment.Right);
var sourceAnchor = new ShapeIntersectionAnchor(firstNode);
var targetAnchor = new SinglePortAnchor(leftPort);
Diagram.Links.Add(new LinkModel(sourceAnchor, targetAnchor));
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WorkflowDiagramDemo</title>
<base href="/" />
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="stylesheet" href="css/app.css" />
<link href="WorkflowDiagramDemo.styles.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.min.css" rel="stylesheet" />
</head>
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="." class="reload">Reload</a>
<span class="dismiss">🗙</span>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
</body>
</html>
