KristofferStrube.Blazor.GraphEditor 0.1.0

Prefix Reserved
.NET 7.0 This package targets .NET 7.0. The package is compatible with this framework or higher. 
dotnet add package KristofferStrube.Blazor.GraphEditor --version 0.1.0                

                    
                

            
NuGet\Install-Package KristofferStrube.Blazor.GraphEditor -Version 0.1.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="KristofferStrube.Blazor.GraphEditor" Version="0.1.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add KristofferStrube.Blazor.GraphEditor --version 0.1.0                

                    
                

            
#r "nuget: KristofferStrube.Blazor.GraphEditor, 0.1.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install KristofferStrube.Blazor.GraphEditor as a Cake Addin
#addin nuget:?package=KristofferStrube.Blazor.GraphEditor&version=0.1.0

// Install KristofferStrube.Blazor.GraphEditor as a Cake Tool
#tool nuget:?package=KristofferStrube.Blazor.GraphEditor&version=0.1.0

Blazor.GraphEditor

License: MIT GitHub issues GitHub forks GitHub stars NuGet Downloads (official NuGet)

A simple graph editor for Blazor.

A video showing off the demo site

Demo

The WASM sample project can be demoed at https://kristofferstrube.github.io/Blazor.GraphEditor/

Getting Started

Prerequisites

You need to install .NET 7.0 or newer to use the library.

Download .NET 7

Installation

You can install the package via NuGet with the Package Manager in your IDE or alternatively using the command line:

dotnet add package KristofferStrube.Blazor.SVGEditor

The package can be used in Blazor WebAssembly and Blazor Server projects. In the samples folder of this repository, you can find two projects that show how to use the SVGEditor component in both Blazor Server and WASM.

Import

You need to reference the package to use it in your pages. This can be done in _Import.razor by adding the following.

@using KristofferStrube.Blazor.GraphEditor

Add to service collection

To use the component in your pages you also need to register som services in your service collection. We have a single method that is exposed via the Blazor.SVGEditor library which adds all these services.

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// Adding the needed services.
builder.Services.AddSVGEditor();

await builder.Build().RunAsync();

Include needed stylesheets and scripts

The libraries that the component uses also need to have some stylesheets and scripts added to function. For this, you need to insert the following tags in the <head> section of your index.html or Host.cshtml file:

<link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
<link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />
<link href="_content/KristofferStrube.Blazor.SVGEditor/kristofferStrubeBlazorSVGEditor.css" rel="stylesheet" />

The library uses Scoped CSS, so you must include your project-specific .styles.css CSS file in your project for the scoped styles of the library components. An example is in the test project in this repo:

<link href="KristofferStrube.Blazor.GraphEditor.WasmExample.styles.css" rel="stylesheet" />

At the end of the file, after you have referenced the Blazor Server or Wasm bootstrapper, insert the following:

<script src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>

Adding the component to a site.

Now, you are ready to use the component in your page. A minimal example of this would be the following:

<div style="height:80vh;">
    <GraphEditor 
        @ref=GraphEditor
        TNode="Page"
        TEdge="Transition"
        NodeIdMapper="n => n.id"
        NodeRadiusMapper="n => n.size"
        NodeColorMapper="n => n.color"
        EdgeFromMapper="e => e.from"
        EdgeToMapper="e => e.to"
        EdgeWidthMapper="e => e.weight*5"
        EdgeSpringConstantMapper="e => e.weight"
        EdgeSpringLengthMapper="e => e.length"
        />
</div>
@code {
    private GraphEditor.GraphEditor<Page, Transition> GraphEditor = default!;
    private bool running = true;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        while (!GraphEditor.IsReadyToLoad)
        {
            await Task.Delay(50);
        }

        var pages = new List<Page>() { new("1", size: 60), new("2", "#3333AA"), new("3", "#AA33AA"), new("4", "#AA3333"), new("5", "#AAAA33"), new("6", "#33AAAA"), new("7"), new("8") };

        var edges = new List<Transition>() {
            new(pages[0], pages[1], 1),
            new(pages[0], pages[2], 1),
            new(pages[0], pages[3], 1),
            new(pages[0], pages[4], 1),
            new(pages[0], pages[5], 1),
            new(pages[0], pages[6], 1),
            new(pages[6], pages[7], 2, 150) };

        await GraphEditor.LoadGraph(pages, edges);

        DateTimeOffset startTime = DateTimeOffset.UtcNow;
        while (running)
        {
            await GraphEditor.ForceDirectedLayout();
            /// First 5 seconds also fit the viewport to all the nodes and edges in the graph.
            if (startTime - DateTimeOffset.UtcNow < TimeSpan.FromSeconds(5))
                GraphEditor.SVGEditor.FitViewportToAllShapes(delta: 0.8);
            await Task.Delay(1);
        }
    }

    public record Page(string id, string color = "#66BB6A", float size = 50);
    public record Transition(Page from, Page to, float weight, float length = 200);

    public void Dispose()
    {
        running = false;
    }
}
Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.1.0 98 11/27/2024
0.1.0-alpha.10 90 4/7/2024
0.1.0-alpha.9 178 11/25/2023
0.1.0-alpha.8 83 11/25/2023
0.1.0-alpha.7 77 11/12/2023
0.1.0-alpha.6 75 11/12/2023
0.1.0-alpha.5 77 11/11/2023
0.1.0-alpha.4 74 11/11/2023
0.1.0-alpha.3 75 11/11/2023
0.1.0-alpha.2 103 10/22/2023
0.1.0-alpha.1 79 10/21/2023