Disabling Custom Links

[Flow2606]

Hi Stefan,

i have a rather simple question:

I want the links to be auto-generated only, so no user on the front end is directly able to draw links. Is that possible?

The demo doesnt explain it and i did not find an API.

I hope you can help me.

Flow

[stefanloerwald]

Hi @Flow2606,

you wouldn't believe if I said that this exact requirement came up today from someone else, would you? So funny!

This isn't something that you can do so far by simply flicking a switch. But it IS possible.

The link feature works by giving nodes a "border". That border is the area that becomes clickable to start the creation of a link. So if the border isn't there, there's no way to create links.

So how to remove the border? You create a custom node, that has an empty border. Have a look at for example the RectangleNode.razor: https://github.com/excubo-ag/Blazor.Diagrams/blob/301d75c6350e7f4ba9f41f5cc1b397d839a689f5/Diagram/RectangleNode.razor#L23

By replacing that property by public override RenderFragment border =>@<text></text>; or public override RenderFragment border => (builder) => {};, you are removing the area that is used to create links.

This enables you to control this feature on a per-node basis.

So step by step:

1. Copy the node you want to use into a new file, (or I suppose you can also just inherit from it, I haven't tried that though).
2. Replace the RenderFragment border by one that returns nothing (not null though).
3. Use that new node instead of the original node.

I hope this helps!

BR Stefan

[stefanloerwald]

1. [...] (or I suppose you can also just inherit from it, I haven't tried that though).

Now I tried and it is that simple!

using Excubo.Blazor.Diagrams;
using Microsoft.AspNetCore.Components;

namespace TestProject_Components
{
    public class RectangleNodeNoLinks : RectangleNode
    {
        public override RenderFragment border => builder => { };
    }
}

That's literally all the code you need to write to make it happen (for a rectangle node). I also integrated this into the demo for custom nodes, see here (the demo link might need a refresh of the page to update to the newest version)

[Flow2606]

Works perfectly! Thanks for the help!