drag and dop not working #537
Description
H, im following the simple example in the docs and i have got to the part where the Nodes are being renderd, but im not able to click and drag:
Also changing the Point property seems to-do nothing, im looking for some tips on what to look for, i have noticed alot of your sample projects are still using the older 2.x version.
Here s my blazor page:
@page "/akkaactorsystem"
@using System
@using System.Text
@using System.Linq
@using System.Collections.Generic
@using System.Threading.Tasks
@using Akka.Actor
@using Akka.Pattern
@using Akka.Streams
@using Akka.Streams.Dsl
@using Blazor.Diagrams
@using Blazor.Diagrams.Core.Anchors
@using Blazor.Diagrams.Core.Geometry
@using Blazor.Diagrams.Core.PathGenerators
@using Blazor.Diagrams.Core.Routers
@using Blazor.Diagrams.Components
@using Blazor.Diagrams.Core.Models
@using Blazor.Diagrams.Options
@using Petabridge.Cmd
@using Petabridge.Cmd.Common.Client
@using Petabridge.Cmd.Host
@inject ActorSystem ActorSystem
<h3>ActorSystem Hierarchy</h3>
<style>
.diagram-container {
width: 100%;
height: 100%;
border: 1px solid black;
}
</style>
@if (Diagram == null)
{
<p><em>Initializing diagram...</em></p>
}
else
{
<div class="diagram-container">
<CascadingValue Value="Diagram" IsFixed="true">
<DiagramCanvas></DiagramCanvas>
</CascadingValue>
</div>
}
@code {
private BlazorDiagram Diagram { get; set; } = null!;
private BlazorDiagramOptions options = new BlazorDiagramOptions
{
AllowMultiSelection = true,
Zoom = {
Enabled = true
},
Links = {
DefaultRouter = new NormalRouter(),
DefaultPathGenerator = new SmoothPathGenerator()
},
};
protected override async Task OnInitializedAsync()
{
Diagram = new BlazorDiagram(options);
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);
var rightPort = secondNode.AddPort(PortAlignment.Right);
// The connection point will be the intersection of
// a line going from the target to the center of the source
var sourceAnchor = new ShapeIntersectionAnchor(firstNode);
// The connection point will be the port's position
var targetAnchor = new SinglePortAnchor(leftPort);
var link = Diagram.Links.Add(new LinkModel(sourceAnchor, targetAnchor));
}
}
and here is my App.Razor:
@using MudBlazor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="dcactor.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/Z.Blazor.Diagrams/default.styles.css" rel="stylesheet" />
<ImportMap />
<HeadOutlet />
</head>
<body>
<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
<Routes />
<script src="_framework/blazor.web.js"></script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>
Any help appreciated