Added options for changing color of edges.

Author: KristofferStrube

samples/KristofferStrube.Blazor.GraphEditor.WasmExample/Pages/Christmas.razor

@@ -15,7 +15,9 @@
     EdgeFromMapper="e => e.From"
     EdgeToMapper="e => e.To"
     EdgeWidthMapper="e => e.Width"
-    EdgeSpringLengthMapper="e => e.Length" />
+    EdgeColorMapper="e => e.Color"
+    EdgeSpringLengthMapper="e => e.Length"
+    EdgeShowsArrow="_ => false" />
 </div>
 
 @code {
@@ -60,7 +62,7 @@
             .ToList();
 
         List<Edge> edgesToAdd = [
-            .. Enumerable.Range(0, 12).Select(i => new Edge(pointsToAdd[i], pointsToAdd[(i + 1) % 12], Width: 5)),
+            .. Enumerable.Range(0, 12).Select(i => new Edge(pointsToAdd[i], pointsToAdd[(i + 1) % 12], Width: 5, Color: "#FF2424")),
     new (pointsToAdd[0], pointsToAdd[6], 250),
     new (pointsToAdd[0], pointsToAdd[4], 200),
     new (pointsToAdd[0], pointsToAdd[8], 200),
@@ -92,7 +94,7 @@
 
     public record Point(string Id);
 
-    public record Edge(Point From, Point To, float Length = 100, float Width = 1);
+    public record Edge(Point From, Point To, float Length = 100, float Width = 1, string Color = "#000000");
 
     public void Dispose()
     {

src/KristofferStrube.Blazor.GraphEditor/Edge.cs

@@ -23,7 +23,9 @@ public Edge(IElement element, SVGEditor.SVGEditor svg) : base(element, svg)
 
     public new string StrokeWidth => GraphEditor.EdgeWidthMapper(Data).AsString();
 
-    public new string Stroke => "black";
+    public new string Stroke => GraphEditor.EdgeColorMapper(Data);
+
+    public bool ShowArrow => GraphEditor.EdgeShowsArrow(Data);
 
     public override void HandlePointerMove(PointerEventArgs eventArgs)
     {
@@ -86,15 +88,15 @@ public void UpdateLine()
         double differenceY = To.Cy - From.Cy;
         double distance = Math.Sqrt((differenceX * differenceX) + (differenceY * differenceY));
 
-        if (distance < To.R + From.R + GraphEditor.EdgeWidthMapper(Data) * 3)
+        if (distance < To.R + From.R + (ShowArrow ? GraphEditor.EdgeWidthMapper(Data) * 3 : 0))
         {
             (X1, Y1) = (X2, Y2);
         }
         else
         {
             SetStart((To.Cx, To.Cy));
-            X2 = To.Cx - (differenceX / distance * (To.R + GraphEditor.EdgeWidthMapper(Data) * 3));
-            Y2 = To.Cy - (differenceY / distance * (To.R + GraphEditor.EdgeWidthMapper(Data) * 3));
+            X2 = To.Cx - (differenceX / distance * (To.R + (ShowArrow ? GraphEditor.EdgeWidthMapper(Data) * 3 : 0)));
+            Y2 = To.Cy - (differenceY / distance * (To.R + (ShowArrow ? GraphEditor.EdgeWidthMapper(Data) * 3 : 0)));
         }
     }
 

src/KristofferStrube.Blazor.GraphEditor/EdgeEditor.razor

@@ -27,7 +27,7 @@
               stroke-dasharray="@SVGElement.StrokeDasharray"
               stroke-dashoffset="@SVGElement.StrokeDashoffset.AsString()"
               fill="@SVGElement.Fill"
-              marker-end=@(SVGElement.X1 != SVGElement.X2 && SVGElement.Y1 != SVGElement.Y2 ? "url(#arrow)" : "")>
+              marker-end=@(SVGElement.ShowArrow && SVGElement.X1 != SVGElement.X2 && SVGElement.Y1 != SVGElement.Y2 ? "url(#arrow)" : "")>
         </line>
     </g>
 </ContextMenuTrigger>

src/KristofferStrube.Blazor.GraphEditor/GraphEditor.razor.cs

@@ -63,6 +63,18 @@ private string EdgeId(TEdge e)
     [Parameter]
     public Func<TEdge, double> EdgeSpringLengthMapper { get; set; } = _ => 200;
 
+    /// <summary>
+    /// Defaults to <c>"#000000"</c>.
+    /// </summary>
+    [Parameter]
+    public Func<TEdge, string> EdgeColorMapper { get; set; } = _ => "#000000";
+
+    [Parameter]
+    /// <summary>
+    /// Defaults to <see langword="true"/>
+    /// </summary>
+    public Func<TEdge, bool> EdgeShowsArrow { get; set; } = _ => true;
+
     [Parameter]
     public Func<TNode, Task>? NodeSelectionCallback { get; set; }