Add custom svg group demo

samples/SharedDemo/Demos/CustomSvgGroup/CustomSvgGroupModel.cs

@@ -0,0 +1,13 @@
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Models;
+
+namespace SharedDemo.Demos.CustomSvgGroup
+{
+    public class CustomSvgGroupModel : SvgGroupModel
+    {
+        public CustomSvgGroupModel(NodeModel[] children, string title, byte padding = 30) : base(children, padding)
+        {
+            Title = title;
+        }
+    }
+}

samples/SharedDemo/Demos/CustomSvgGroup/CustomSvgGroupWidget.razor

@@ -0,0 +1,20 @@
+@{
+    var rectX = Group.Size.Width / 2 - 50;
+    var textX = rectX + 50;
+    var textY = -60 + 25.0;
+}
+
+<rect x="@rectX.ToInvariantString()" y="-60" width="100" height="50" fill="yellow"></rect>
+<text x="@textX.ToInvariantString()" y="@textY.ToInvariantString()">@Group.Title</text>
+
+<GroupNodes Group="Group" />
+
+@foreach (var port in Group.Ports)
+{
+    <PortRenderer Port="port" Class="group-port"></PortRenderer>
+}
+
+
+@code {
+    [Parameter] public CustomSvgGroupModel Group { get; set; }
+}

samples/SharedDemo/Demos/CustomSvgGroup/Demo.razor

@@ -0,0 +1,7 @@
+@page "/demos/custom-svg-group"
+@layout DemoLayout
+@inject LayoutData LayoutData
+
+<CascadingValue Value="_diagram">
+    <DiagramCanvas></DiagramCanvas>
+</CascadingValue>

samples/SharedDemo/Demos/CustomSvgGroup/Demo.razor.cs

@@ -0,0 +1,45 @@
+using Blazor.Diagrams;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Models;
+using SharedDemo.Demos.Nodes;
+
+namespace SharedDemo.Demos.CustomSvgGroup
+{
+    partial class Demo
+    {
+        private readonly Diagram _diagram = new Diagram();
+
+        protected override void OnInitialized()
+        {
+            base.OnInitialized();
+
+            LayoutData.Title = "Custom SVG group";
+            LayoutData.Info = "Creating your own custom svg groups is very easy!";
+            LayoutData.DataChanged();
+
+            _diagram.RegisterModelComponent<CustomSvgGroupModel, CustomSvgGroupWidget>();
+            _diagram.RegisterModelComponent<SvgNodeModel, SvgNodeWidget>();
+
+            var node1 = NewNode(50, 50);
+            var node2 = NewNode(300, 300);
+            var node3 = NewNode(500, 100);
+
+            _diagram.Nodes.Add(new[] { node1, node2, node3 });
+            _diagram.AddGroup(new CustomSvgGroupModel(new[] { node2, node3 }, "Group 1"));
+
+            _diagram.Links.Add(new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left)));
+            _diagram.Links.Add(new LinkModel(node2.GetPort(PortAlignment.Right), node3.GetPort(PortAlignment.Left)));
+        }
+
+        private NodeModel NewNode(double x, double y)
+        {
+            var node = new SvgNodeModel(new Point(x, y));
+            node.AddPort(PortAlignment.Bottom);
+            node.AddPort(PortAlignment.Top);
+            node.AddPort(PortAlignment.Left);
+            node.AddPort(PortAlignment.Right);
+            return node;
+        }
+    }
+}

samples/SharedDemo/Layouts/DemoLayout.razor

@@ -94,6 +94,9 @@
                 <li>
                     <a href="demos/custom-group" class="list-group-item list-group-item-action bg-light">Custom group</a>
                 </li>
+                <li>
+                    <a href="demos/custom-svg-group" class="list-group-item list-group-item-action bg-light">Custom SVG group</a>
+                </li>
             </DemoMenu>
             <DemoMenu Text="Algorithms">
                 <li>

samples/SharedDemo/wwwroot/css/styles.css

@@ -1616,20 +1616,29 @@ body {
     background: #40babd !important;
 }
 
-.group:not(.default) {
+div.group:not(.default) {
     outline: 2px solid black;
     background-color: #6fbb6e;
 }
 
-    .group:not(.default) > span.title {
-        padding: 20px;
-        position: absolute;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        background: #eee;
-        border: 2px solid black;
-        border-radius: 50%;
-        background-color: #6fbb6e;
-        font-weight: bold;
-        text-transform: uppercase;
-    }
+div.group:not(.default) > span.title {
+    padding: 20px;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: #eee;
+    border: 2px solid black;
+    border-radius: 50%;
+    background-color: #6fbb6e;
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
+g.group:not(.default) rect {
+    outline: 2px solid black;
+}
+
+g.group:not(.default) text {
+    text-anchor: middle;
+    dominant-baseline: middle;
+}