protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Groups Factory";
LayoutData.Info = "Factory setting is a way to customize how groups (models) are created when the user uses the shortcut. " +
"Try to group nodes using CTRL+ALT+G now.";
LayoutData.DataChanged();
diagram.Options.Groups.Enabled = true;
diagram.Options.Groups.Factory = (diagram, children) =>
{
var group = new GroupModel(children, 25);
group.AddPort(PortAlignment.Top);
group.AddPort(PortAlignment.Bottom);
group.AddPort(PortAlignment.Right);
group.AddPort(PortAlignment.Left);
return(group);
};
var node1 = NewNode(50, 50);
var node2 = NewNode(250, 250);
var node3 = NewNode(500, 100);
diagram.Nodes.Add(new[] { node1, node2, node3 });
diagram.Links.Add(new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left)));
}
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();
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Link Snapping";
LayoutData.Info = "While dragging a new link, it will try to find (and link) to the closest target within a radius.";
LayoutData.DataChanged();
InitializeDiagram();
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Drag & Drop";
LayoutData.Info = "A very simple drag & drop implementation using the HTML5 events.";
LayoutData.DataChanged();
_diagramManager.RegisterModelComponent <BotAnswerNode, BotAnswerWidget>();
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "SVG Nodes";
LayoutData.Info = "You can also have SVG nodes! All you need to do is to set the Layer to RenderLayer.SVG.";
LayoutData.DataChanged();
InitializeDiagram();
}
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();
}
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();
}
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();
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Link Vertices";
LayoutData.Info = "Click on a link to create a vertex. Double click on a vertex to delete it. " +
"You can drag the vertices around.";
LayoutData.DataChanged();
InitializeDiagram();
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Portless Links";
LayoutData.Info = "Starting from 2.0, you can create links between nodes directly! " +
"All you need to specify is the shape of your nodes in order to calculate the connection points.";
LayoutData.DataChanged();
InitializeDiagram();
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Dynamic Groups";
LayoutData.Info = "You can create and modify groups dynamically!";
LayoutData.DataChanged();
var node1 = NewNode(50, 150);
var node2 = NewNode(250, 350);
var node3 = NewNode(500, 200);
_diagram.Nodes.Add(new[] { node1, node2, node3 });
_diagram.Links.Add(new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left)));
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Custom port";
LayoutData.Info = "Creating your own custom ports is very easy!<br>" +
"In this example, you can only attach links from/to ports with the same color.";
LayoutData.DataChanged();
_diagram.Options.DefaultNodeComponent = typeof(ColoredNodeWidget);
var node1 = NewNode(50, 50);
var node2 = NewNode(300, 300);
_diagram.Nodes.Add(new[] { node1, node2, NewNode(500, 50) });
_diagram.Links.Add(new LinkModel(node1.GetPort(PortAlignment.Top), node2.GetPort(PortAlignment.Top)));
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Custom link";
LayoutData.Info = "Creating your own custom links is very easy!";
LayoutData.DataChanged();
_diagram.RegisterModelComponent <ThickLink, ThickLinkWidget>();
// Also usable: _diagram.Options.Links.DefaultLinkComponent = typeof(ThickLink);
var node1 = NewNode(50, 50);
var node2 = NewNode(300, 300);
var node3 = NewNode(500, 50);
_diagram.Nodes.Add(new[] { node1, node2, node3 });
_diagram.Links.Add(new ThickLink(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left)));
_diagram.Links.Add(new ThickLink(node2.GetPort(PortAlignment.Right), node3.GetPort(PortAlignment.Left)));
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Custom Shortcut";
LayoutData.Info = "You can customize what needs to be pressed to group selected nodes. CTRL+SHIFT+K in this example.";
LayoutData.DataChanged();
_diagram.Options.Groups.Enabled = true;
_diagram.Options.Groups.KeyboardShortcut = e => e.CtrlKey && e.ShiftKey && e.Key.ToLower() == "k";
var node1 = NewNode(50, 50);
var node2 = NewNode(250, 250);
var node3 = NewNode(500, 100);
_diagram.Nodes.Add(new[] { node1, node2, node3 });
_diagram.Links.Add(new LinkModel(node1.GetPort(PortAlignment.Right), node2.GetPort(PortAlignment.Left)));
}
protected override void OnInitialized()
{
base.OnInitialized();
LayoutData.Title = "Custom group";
LayoutData.Info = "Creating your own custom groups is very easy!";
LayoutData.DataChanged();
_diagram.RegisterModelComponent <CustomGroupModel, CustomGroupWidget>();
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 CustomGroupModel(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)));
}