From 1230ec1d9ae2eb3115176ff0e4831646a68c5dde Mon Sep 17 00:00:00 2001 From: KristofferStrube Date: Thu, 17 Oct 2024 23:00:46 +0200 Subject: [PATCH] Now with images. --- ...rube.Blazor.GraphEditor.WasmExample.csproj | 1 + .../Pages/FollowingGraph.razor | 41 ++++++++++++++++--- .../Shared/NavMenu.razor | 10 ++++- .../Shared/NavMenu.razor.css | 10 +++++ .../GraphEditor.razor.cs | 24 +++++++++++ .../Node.cs | 2 + .../NodeEditor.razor | 30 +++++++++++--- 7 files changed, 106 insertions(+), 12 deletions(-) diff --git a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/KristofferStrube.Blazor.GraphEditor.WasmExample.csproj b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/KristofferStrube.Blazor.GraphEditor.WasmExample.csproj index ec16acc..2279e6e 100644 --- a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/KristofferStrube.Blazor.GraphEditor.WasmExample.csproj +++ b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/KristofferStrube.Blazor.GraphEditor.WasmExample.csproj @@ -8,6 +8,7 @@ + diff --git a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Pages/FollowingGraph.razor b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Pages/FollowingGraph.razor index 1849a7b..4d730cd 100644 --- a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Pages/FollowingGraph.razor +++ b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Pages/FollowingGraph.razor @@ -1,13 +1,14 @@ @page "/FollowingGraph/" @implements IDisposable @inject HttpClient httpClient +@using KristofferStrube.ActivityStreams @using KristofferStrube.Blazor.GraphEditor Blazor.GraphEditor - Following Graph

Following Graph

-

The following shows a following graph.

+

The following shows a following graph for @@kristofferstrube@@hachyderm.io

@if (selectedUser is null) { @@ -15,16 +16,19 @@ } else { -

Selected user: @selectedUser.id

+

Selected user: @selectedUser.Id

}
users = [primaryUser, .. following]; + Task.WhenAll(users.Select(async user => + { + var response = await httpClient.GetAsync($"https://kristoffer-strube.dk/API/mastodon/Profile/{user.Id}"); + + if (!response.IsSuccessStatusCode) + return; + + Person? person = await response.Content.ReadFromJsonAsync(); + + user.Image = person?.Icon?.FirstOrDefault() is Image { } image ? image.Url.FirstOrDefault()?.Href?.ToString() : null; + })); + List edges = following.Select(f => new Follow(primaryUser, f)).ToList(); await GraphEditor.LoadGraph(users, edges); @@ -81,7 +97,20 @@ else } } - public record User(string id, string color, float size = 30); + public class User(string id, string color, float size = 30) : IEquatable + { + public string Id = id; + public string Color = color; + public float Size = size; + + public string? Image { get; set; } + + public override bool Equals(object? obj) => obj is User user && Equals(user); + + public bool Equals(User? other) => other?.Id == Id; + + public override int GetHashCode() => Id.GetHashCode(); + } public record Follow(User from, User to); public void Dispose() diff --git a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor index 6553b16..96e9b15 100644 --- a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor +++ b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor @@ -26,7 +26,15 @@
- Following Graph + + + + + + + + + Following Graph
diff --git a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor.css b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor.css index 604b7a1..6a12812 100644 --- a/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor.css +++ b/samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Shared/NavMenu.razor.css @@ -18,6 +18,16 @@ top: -2px; } +.bi { + display: inline-block; + position: relative; + width: 1.25rem; + height: 1.25rem; + margin-right: 0.75rem; + top: -1px; + background-size: cover; +} + .nav-item { font-size: 0.9rem; padding-bottom: 0.5rem; diff --git a/src/KristofferStrube.Blazor.GraphEditor/GraphEditor.razor.cs b/src/KristofferStrube.Blazor.GraphEditor/GraphEditor.razor.cs index ed82834..cede2ff 100644 --- a/src/KristofferStrube.Blazor.GraphEditor/GraphEditor.razor.cs +++ b/src/KristofferStrube.Blazor.GraphEditor/GraphEditor.razor.cs @@ -15,27 +15,51 @@ private string EdgeId(TEdge e) [Parameter, EditorRequired] public required Func NodeIdMapper { get; set; } + /// + /// Defaults to "#66BB6A". + /// [Parameter] public Func NodeColorMapper { get; set; } = _ => "#66BB6A"; + /// + /// Defaults to 50. + /// [Parameter] public Func NodeRadiusMapper { get; set; } = _ => 50; + /// + /// Defaults to 800. + /// [Parameter] public Func NodeRepulsionMapper { get; set; } = _ => 800; + /// + /// Defaults to . + /// + [Parameter] + public Func NodeImageMapper { get; set; } = _ => null; + [Parameter, EditorRequired] public required Func EdgeFromMapper { get; set; } [Parameter, EditorRequired] public required Func EdgeToMapper { get; set; } + /// + /// Defaults to 1. + /// [Parameter] public Func EdgeWidthMapper { get; set; } = _ => 1; + /// + /// Defaults to 1. + /// [Parameter] public Func EdgeSpringConstantMapper { get; set; } = _ => 1; + /// + /// Defaults to 200. + /// [Parameter] public Func EdgeSpringLengthMapper { get; set; } = _ => 200; diff --git a/src/KristofferStrube.Blazor.GraphEditor/Node.cs b/src/KristofferStrube.Blazor.GraphEditor/Node.cs index f874fc1..8e65e1c 100644 --- a/src/KristofferStrube.Blazor.GraphEditor/Node.cs +++ b/src/KristofferStrube.Blazor.GraphEditor/Node.cs @@ -46,6 +46,8 @@ public override string Fill } } + public string? Image => GraphEditor.NodeImageMapper(Data); + public HashSet> Edges { get; } = new(); public Dictionary> NeighborNodes { get; } = new(); diff --git a/src/KristofferStrube.Blazor.GraphEditor/NodeEditor.razor b/src/KristofferStrube.Blazor.GraphEditor/NodeEditor.razor index a3e710a..dec3e22 100644 --- a/src/KristofferStrube.Blazor.GraphEditor/NodeEditor.razor +++ b/src/KristofferStrube.Blazor.GraphEditor/NodeEditor.razor @@ -10,17 +10,18 @@ + + @if (SVGElement.Image is not null) + { + + + + + + + + + }