- custom nodes+links

Blazor.Diagrams.sln

@@ -33,6 +33,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "docs", "docs", "{A9FC9B20-A
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Diagram-Demo", "docs\Diagram-Demo\Diagram-Demo.csproj", "{5F423724-5319-4DCE-B9F2-8B2D7E1FDC17}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CustomNodesLinks", "docs\CustomNodesLinks\CustomNodesLinks.csproj", "{3D104DB4-C7F0-42CA-9D78-AB2C8A8AE3D5}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -71,6 +73,10 @@ Global
 		{5F423724-5319-4DCE-B9F2-8B2D7E1FDC17}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{5F423724-5319-4DCE-B9F2-8B2D7E1FDC17}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{5F423724-5319-4DCE-B9F2-8B2D7E1FDC17}.Release|Any CPU.Build.0 = Release|Any CPU
+		{3D104DB4-C7F0-42CA-9D78-AB2C8A8AE3D5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3D104DB4-C7F0-42CA-9D78-AB2C8A8AE3D5}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3D104DB4-C7F0-42CA-9D78-AB2C8A8AE3D5}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3D104DB4-C7F0-42CA-9D78-AB2C8A8AE3D5}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -84,6 +90,7 @@ Global
 		{CB3A42B6-3C87-4ECB-B60C-D98275AB1FB6} = {EE32E278-A887-454E-987D-FFE9E37169FE}
 		{36B4DCCD-45AB-4338-9224-DDAF386A23A3} = {CEEAE4C2-CE68-4FC3-9E0F-D4781B91F7F4}
 		{5F423724-5319-4DCE-B9F2-8B2D7E1FDC17} = {A9FC9B20-A9F1-4066-8B59-83BD26D3B1C8}
+		{3D104DB4-C7F0-42CA-9D78-AB2C8A8AE3D5} = {A9FC9B20-A9F1-4066-8B59-83BD26D3B1C8}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {969540A2-8162-4063-A4E3-B488F69BD582}

docs/CustomNodesLinks/App.razor

@@ -0,0 +1,10 @@
+<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
+  <Found Context="routeData">
+    <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+  </Found>
+  <NotFound>
+    <LayoutView Layout="@typeof(MainLayout)">
+      <p>Sorry, there's nothing at this address.</p>
+    </LayoutView>
+  </NotFound>
+</Router>

docs/CustomNodesLinks/CustomNodesLinks.csproj

@@ -0,0 +1,17 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Z.Blazor.Diagrams" Version="2.1.2" />
+    <PackageReference Include="Z.Blazor.Diagrams.Core" Version="2.1.2" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="..\..\src\Blazor.Diagrams.Core\Blazor.Diagrams.Core.csproj" />
+    <ProjectReference Include="..\..\src\Blazor.Diagrams\Blazor.Diagrams.csproj" />
+  </ItemGroup>
+
+</Project>

docs/CustomNodesLinks/Models/DiagramLink.cs

@@ -0,0 +1,16 @@
+using Blazor.Diagrams.Core.Models;
+
+namespace CustomNodesLinks.Models
+{
+  public sealed class DiagramLink : LinkModel
+  {
+    public DiagramLink(string name, NodeModel sourceNode, NodeModel? targetNode) :
+      base(name, sourceNode, targetNode)
+    {
+      Name = name;
+      Labels.Add(new DiagramLinkLabel(this, Name));
+    }
+
+    public string Name { get; set; }
+  }
+}

docs/CustomNodesLinks/Models/DiagramLinkLabel.cs

@@ -0,0 +1,21 @@
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+
+namespace CustomNodesLinks.Models
+{
+  public sealed class DiagramLinkLabel : LinkLabelModel
+  {
+    public DiagramLinkLabel(BaseLinkModel parent, string id, string content, double? distance = null, Point? offset = null) : 
+      base(parent, id, content, distance, offset)
+    {
+    }
+
+    public DiagramLinkLabel(BaseLinkModel parent, string content, double? distance = null, Point? offset = null) : 
+      base(parent, content, distance, offset)
+    {
+    }
+
+    public bool ShowLabel { get; set; } = true;
+  }
+}

docs/CustomNodesLinks/Models/DiagramNode.cs

@@ -0,0 +1,16 @@
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+
+namespace CustomNodesLinks.Models
+{
+  public sealed class DiagramNode : NodeModel
+  {
+    public DiagramNode(string name, Point pos) :
+      base(name, pos)
+    {
+      Name = name;
+    }
+
+    public string Name { get; set; }
+  }
+}

docs/CustomNodesLinks/Pages/Error.cshtml

@@ -0,0 +1,42 @@
+@page
+@model CustomNodesLinks.Pages.ErrorModel
+
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
+  <title>Error</title>
+  <link href="~/css/bootstrap/bootstrap.min.css" rel="stylesheet"/>
+  <link href="~/css/app.css" rel="stylesheet"/>
+</head>
+
+<body>
+<div class="main">
+  <div class="content px-4">
+    <h1 class="text-danger">Error.</h1>
+    <h2 class="text-danger">An error occurred while processing your request.</h2>
+
+    @if (Model.ShowRequestId)
+    {
+      <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+      </p>
+    }
+
+    <h3>Development Mode</h3>
+    <p>
+      Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
+    </p>
+    <p>
+      <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+      It can result in displaying sensitive information from exceptions to end users.
+      For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+      and restarting the app.
+    </p>
+  </div>
+</div>
+</body>
+
+</html>

docs/CustomNodesLinks/Pages/Error.cshtml.cs

@@ -0,0 +1,32 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.Extensions.Logging;
+
+namespace CustomNodesLinks.Pages
+{
+  [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+  [IgnoreAntiforgeryToken]
+  public class ErrorModel : PageModel
+  {
+    public string RequestId { get; set; }
+
+    public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    private readonly ILogger<ErrorModel> _logger;
+
+    public ErrorModel(ILogger<ErrorModel> logger)
+    {
+      _logger = logger;
+    }
+
+    public void OnGet()
+    {
+      RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+    }
+  }
+}

docs/CustomNodesLinks/Pages/Index.razor

@@ -0,0 +1,69 @@
+@page "/"
+
+@using Blazor.Diagrams.Core
+@using Blazor.Diagrams.Core.Geometry
+@using Blazor.Diagrams.Core.Models
+
+<!-- required to resolve DiagramCanvas component -->
+@using Blazor.Diagrams.Components
+@using CustomNodesLinks.Models
+@using CustomNodesLinks.Widgets
+
+<h1>Hello, World of Custom Nodes and Links!</h1>
+
+<!--
+Parent of DiagramCanvas has to have a fixed width/height
+or it will not be rendered.
+
+100vw = 100% viewport width
+100vh = 100% viewport height
+-->
+<div style="width:100vw; height: 100vh">
+  <CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+  </CascadingValue>
+</div>
+
+@code {
+  private Diagram _diagram { get; set; }
+
+  protected override void OnInitialized()
+  {
+    base.OnInitialized();
+
+    var options = new DiagramOptions
+    {
+      DeleteKey = "Delete", // What key deletes the selected nodes/links
+      DefaultNodeComponent = null, // Default component for nodes
+      AllowMultiSelection = true, // Whether to allow multi selection using CTRL
+      Links = new DiagramLinkOptions
+      {
+      },
+      Zoom = new DiagramZoomOptions
+      {
+        Minimum = 0.5, // Minimum zoom value
+        Inverse = false, // Whether to inverse the direction of the zoom when using the wheel
+      }
+    };
+    _diagram = new Diagram(options);
+
+  // connect node/link to renderer
+    _diagram.RegisterModelComponent<DiagramNode, DiagramNodeWidget>();
+    _diagram.RegisterModelComponent<DiagramLinkLabel, DiagramLinkLabelWidget>();
+
+    Setup();
+  }
+
+  private void Setup()
+  {
+    var node1 = new DiagramNode("Node 0", new Point(50, 50));
+    var node2 = new DiagramNode("Node 1", new Point(300, 300));
+    var node3 = new DiagramNode("Node 2", new Point(300, 50));
+    _diagram.Nodes.Add(new[] { node1, node2, node3 });
+
+  // use portless links so connection points move around when we move node
+    var link = new DiagramLink($"{node1.Name}-->{node2.Name}", node1, node2);
+    _diagram.Links.Add(link);
+  }
+
+}

docs/CustomNodesLinks/Pages/_Host.cshtml

@@ -0,0 +1,44 @@
+@page "/"
+@namespace CustomNodesLinks.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@{
+  Layout = null;
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>CustomNodesLinks</title>
+  <base href="~/"/>
+  <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"/>
+  <link href="css/site.css" rel="stylesheet"/>
+  <link href="CustomNodesLinks.styles.css" rel="stylesheet"/>
+
+  <!-- in the head element -->
+  <link href="_content/Z.Blazor.Diagrams/style.min.css" rel="stylesheet"/>
+  <!-- if you want the default styling -->
+  <link href="_content/Z.Blazor.Diagrams/default.styles.min.css" rel="stylesheet"/>
+</head>
+
+<body>
+<!-- in the body element -->
+<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
+
+<component type="typeof(App)" render-mode="ServerPrerendered"/>
+
+<div id="blazor-error-ui">
+  <environment include="Staging,Production">
+    An error has occurred. This application may no longer respond until reloaded.
+  </environment>
+  <environment include="Development">
+    An unhandled exception has occurred. See browser dev tools for details.
+  </environment>
+  <a href="" class="reload">Reload</a>
+  <a class="dismiss">🗙</a>
+</div>
+
+<script src="_framework/blazor.server.js"></script>
+</body>
+</html>

docs/CustomNodesLinks/Program.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.Hosting;
+
+namespace CustomNodesLinks
+{
+  public class Program
+  {
+    public static void Main(string[] args)
+    {
+      CreateHostBuilder(args).Build().Run();
+    }
+
+    public static IHostBuilder CreateHostBuilder(string[] args) =>
+      Host.CreateDefaultBuilder(args)
+        .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup<Startup>(); });
+  }
+}

docs/CustomNodesLinks/Properties/launchSettings.json

@@ -0,0 +1,28 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:48213",
+      "sslPort": 44304
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "CustomNodesLinks": {
+      "commandName": "Project",
+      "dotnetRunMessages": "true",
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:5001;http://localhost:5000",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}

docs/CustomNodesLinks/README.md

@@ -0,0 +1,40 @@
+# How to Implement Custom Nodes and Links
+
+![custom-nodes-links](custom-nodes-links.png "custom-nodes-links")
+
+## Custom Nodes
+
+* create class (`DiagramNode.cs`) to hold additional information eg `Name`
+    * must be derived from `NodeModel`
+* create renderer (`DiagramNodeWidget.razor`) to do custom rendering
+    * just a _Blazor_ component with a `div` section
+    * has reference to a `DiagramNode`
+* style as appropriate (`CustomNodesLinks/wwwroot/css/site.css`)
+    * _graphml-node_
+    * _graphml-selected_
+* connect custom node to custom renderer
+
+```csharp
+    _diagram.RegisterModelComponent<DiagramNode, DiagramNodeWidget>();
+```
+
+## Custom Links aka Link Labels
+
+Slightly more involved as custom rendering is done through a link's label.
+
+For this exercise, we will restrict a link to having exactly one label.
+
+* create class (`DiagramLinkLabel.cs`) which will be custom rendered
+    * must be derived from `LinkLabelModel`
+* create class (`DiagramLink.cs`) to hold additional information eg `Name`
+    * must be derived from `LinkModel`
+    * create single `DiagramLinkLabel` in constructor
+* create renderer (`DiagramLinkLabelWidget.razor`) to do custom rendering
+    * has reference to a `DiagramLinklabel`
+* style as appropriate (`CustomNodesLinks/wwwroot/css/site.css`)
+    * _graphml-link_
+* connect custom node to custom renderer
+
+```csharp
+    _diagram.RegisterModelComponent<DiagramLinkLabel, DiagramLinkLabelWidget>();
+```