docs: Links

samples/SharedDemo/Components/DemoMenu.razor

@@ -0,0 +1,34 @@
+<li class="list-group-item list-group-item-action bg-light">
+    <a href="@Href"
+       class="w-100 list-group-item-action text-decoration-none d-flex justify-content-between align-items-center"
+       @onclick="OnItemClicked"
+       @onclick:preventDefault="ChildContent != null">
+        @Text
+        @if (ChildContent != null)
+        {
+            <i class="fas fa-chevron-up@(Collapsed ? " fa-rotate-180" : "")"></i>
+        }
+    </a>
+
+    @if (ChildContent != null && !Collapsed)
+    {
+        <ul class="list-unstyled mt-2">
+            @ChildContent
+        </ul>
+    }
+</li>
+
+@code {
+    [Parameter] public string Href { get; set; } = "#";
+    [Parameter] public string Text { get; set; }
+    [Parameter] public RenderFragment ChildContent { get; set; }
+    public bool Collapsed { get; set; } = true;
+
+    private void OnItemClicked()
+    {
+        if (ChildContent == null)
+            return;
+
+        Collapsed = !Collapsed;
+    }
+}

samples/SharedDemo/Demos/Links/LabelsDemo.razor

@@ -0,0 +1,7 @@
+@page "/links/labels"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+</CascadingValue>

samples/SharedDemo/Demos/Links/LabelsDemo.razor.cs

@@ -0,0 +1,79 @@
+using Blazor.Diagrams.Core;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+using System;
+using System.Collections.Generic;
+using System.Text;
+
+namespace SharedDemo.Demos.Links
+{
+    public partial class LabelsDemo
+    {
+        private Diagram _diagram = new Diagram();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LayoutData.Title = "Link Labels";
+            LayoutData.Info = "Labels help you show more information through out a link. You can specify a distance or an offset. <br>" +
+                "The content of the labels is still limited because of Blazor's poor SVG support.";
+            LayoutData.DataChanged();
+
+            InitializeDiagram();
+        }
+
+        private void InitializeDiagram()
+        {
+            var node1 = NewNode(50, 50);
+            var node2 = NewNode(400, 50);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            var link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.Labels.Add(new LinkLabelModel(link, "Content"));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 160);
+            node2 = NewNode(400, 160);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.Labels.Add(new LinkLabelModel(link, "0.25", 0.3));
+            link.Labels.Add(new LinkLabelModel(link, "0.75", 0.7));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 270);
+            node2 = NewNode(400, 270);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.Labels.Add(new LinkLabelModel(link, "50", 50));
+            link.Labels.Add(new LinkLabelModel(link, "-50", -50));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 380);
+            node2 = NewNode(400, 380);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.Labels.Add(new LinkLabelModel(link, "(0,-20)", 50, new Point(0, -20)));
+            link.Labels.Add(new LinkLabelModel(link, "(0,20)", -50, new Point(0, 20)));
+            _diagram.Links.Add(link);
+        }
+
+        private NodeModel NewNode(double x, double y)
+        {
+            var node = new NodeModel(new Point(x, y));
+            node.AddPort(PortAlignment.Bottom);
+            node.AddPort(PortAlignment.Top);
+            node.AddPort(PortAlignment.Left);
+            node.AddPort(PortAlignment.Right);
+            return node;
+        }
+    }
+}

samples/SharedDemo/Demos/Links/MarkersDemo.razor

@@ -0,0 +1,7 @@
+@page "/links/markers"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+</CascadingValue>

samples/SharedDemo/Demos/Links/MarkersDemo.razor.cs

@@ -0,0 +1,90 @@
+using Blazor.Diagrams.Core;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+
+namespace SharedDemo.Demos.Links
+{
+    public partial class MarkersDemo
+    {
+        private Diagram _diagram = new Diagram();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LayoutData.Title = "Link Markers";
+            LayoutData.Info = "Markers are SVG Paths that you can put at the beginning or at the end of your links.";
+            LayoutData.DataChanged();
+
+            InitializeDiagram();
+        }
+
+        private void InitializeDiagram()
+        {
+            var node1 = NewNode(50, 50);
+            var node2 = NewNode(400, 50);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            var link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.SourceMarker = LinkMarker.Arrow;
+            link.TargetMarker = LinkMarker.Arrow;
+            link.Labels.Add(new LinkLabelModel(link, "Arrow"));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 160);
+            node2 = NewNode(400, 160);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.SourceMarker = LinkMarker.Circle;
+            link.TargetMarker = LinkMarker.Circle;
+            link.Labels.Add(new LinkLabelModel(link, "Circle"));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 270);
+            node2 = NewNode(400, 270);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.SourceMarker = LinkMarker.Square;
+            link.TargetMarker = LinkMarker.Square;
+            link.Labels.Add(new LinkLabelModel(link, "Square"));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 380);
+            node2 = NewNode(400, 380);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.SourceMarker = LinkMarker.NewRectangle(10, 20);
+            link.TargetMarker = LinkMarker.NewArrow(20, 10);
+            link.Labels.Add(new LinkLabelModel(link, "Factory"));
+            _diagram.Links.Add(link);
+
+            node1 = NewNode(50, 490);
+            node2 = NewNode(400, 490);
+
+            _diagram.Nodes.Add(new[] { node1, node2 });
+
+            link = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left));
+            link.SourceMarker = new LinkMarker("M 0 -8 L 3 -8 3 8 0 8 z M 4 -8 7 -8 7 8 4 8 z M 8 -8 16 0 8 8 z", 16);
+            link.TargetMarker = new LinkMarker("M 0 -8 L 8 -8 4 0 8 8 0 8 4 0 z", 8);
+            link.Labels.Add(new LinkLabelModel(link, "Custom"));
+            _diagram.Links.Add(link);
+        }
+
+        private NodeModel NewNode(double x, double y)
+        {
+            var node = new NodeModel(new Point(x, y));
+            node.AddPort(PortAlignment.Bottom);
+            node.AddPort(PortAlignment.Top);
+            node.AddPort(PortAlignment.Left);
+            node.AddPort(PortAlignment.Right);
+            return node;
+        }
+    }
+}

samples/SharedDemo/Demos/Links/PathGeneratorsDemo.razor

@@ -0,0 +1,7 @@
+@page "/links/path-generators"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+</CascadingValue>

samples/SharedDemo/Demos/Links/PathGeneratorsDemo.razor.cs

@@ -0,0 +1,58 @@
+using Blazor.Diagrams.Core;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+
+namespace SharedDemo.Demos.Links
+{
+    public partial class PathGeneratorsDemo
+    {
+        private Diagram _diagram = new Diagram();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LayoutData.Title = "Link Path Generators";
+            LayoutData.Info = "Path generators are functions that take as input the calculated route and output SVG paths, " +
+                "alongside the markers positions and their angles. There are currently two generators: Straight and Smooth.";
+            LayoutData.DataChanged();
+
+            InitializeDiagram();
+        }
+
+        private void InitializeDiagram()
+        {
+            var node1 = NewNode(50, 80);
+            var node2 = NewNode(300, 350);
+            var node3 = NewNode(400, 100);
+
+            _diagram.Nodes.Add(new[] { node1, node2, node3 });
+
+            var link1 = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left))
+            {
+                Router = Routers.Normal,
+                PathGenerator = PathGenerators.Straight
+            };
+            link1.Labels.Add(new LinkLabelModel(link1, "Straight"));
+
+            var link2 = new LinkModel(node2.GetPort(PortAlignment.Right), node3.GetPort(PortAlignment.Left))
+            {
+                Router = Routers.Normal,
+                PathGenerator = PathGenerators.Smooth
+            };
+            link2.Labels.Add(new LinkLabelModel(link2, "Smooth"));
+
+            _diagram.Links.Add(new[] { link1, link2 });
+        }
+
+        private NodeModel NewNode(double x, double y)
+        {
+            var node = new NodeModel(new Point(x, y));
+            node.AddPort(PortAlignment.Bottom);
+            node.AddPort(PortAlignment.Top);
+            node.AddPort(PortAlignment.Left);
+            node.AddPort(PortAlignment.Right);
+            return node;
+        }
+    }
+}

samples/SharedDemo/Demos/Links/RoutersDemo.razor

@@ -0,0 +1,7 @@
+@page "/links/routers"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+</CascadingValue>

samples/SharedDemo/Demos/Links/RoutersDemo.razor.cs

@@ -0,0 +1,57 @@
+using Blazor.Diagrams.Core;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+
+namespace SharedDemo.Demos.Links
+{
+    public partial class RoutersDemo
+    {
+        private Diagram _diagram = new Diagram();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LayoutData.Title = "Link Routers";
+            LayoutData.Info = "Routers are functions that take as input the link's vertices and can add points in between. " +
+                "There are currently two routers: Normal and Orthogonal.";
+            LayoutData.DataChanged();
+
+            InitializeDiagram();
+        }
+
+        private void InitializeDiagram()
+        {
+            var node1 = NewNode(50, 80);
+            var node2 = NewNode(300, 350);
+            var node3 = NewNode(400, 100);
+
+            _diagram.Nodes.Add(new[] { node1, node2, node3 });
+
+            var link1 = new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left))
+            {
+                Router = Routers.Normal
+            };
+            link1.Labels.Add(new LinkLabelModel(link1, "Normal"));
+
+            var link2 = new LinkModel(node2.GetPort(PortAlignment.Right), node3.GetPort(PortAlignment.Left))
+            {
+                Router = Routers.Orthogonal,
+                PathGenerator = PathGenerators.Straight // Smooth results in weird looking links
+            };
+            link2.Labels.Add(new LinkLabelModel(link2, "Orthogonal"));
+
+            _diagram.Links.Add(new[] { link1, link2 });
+        }
+
+        private NodeModel NewNode(double x, double y)
+        {
+            var node = new NodeModel(new Point(x, y));
+            node.AddPort(PortAlignment.Bottom);
+            node.AddPort(PortAlignment.Top);
+            node.AddPort(PortAlignment.Left);
+            node.AddPort(PortAlignment.Right);
+            return node;
+        }
+    }
+}

samples/SharedDemo/Demos/Links/VerticesDemo.razor

@@ -0,0 +1,7 @@
+@page "/links/vertices"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+</CascadingValue>