Control widget does not currently support directly inserting blazor html components

[jimitndiaye]

It seems the control widget is expecting SVG markup rather than directly inserting blazor components.

In my scenario I'd like to insert a menu component as the the contol's UI but it is not being displayed.

[zHaytam]

Hello, can you show me what you tried?

[jimitndiaye]

I eventually got it to work by wrapping it in a foreignobject. But still it wasn't immediately obvious that it was expecting svg.

[zHaytam]

It is not, unless your node is a SVG itself then your control needs to match the layer. I'm not sure why it didn't work for you. Maybe you can just tell me the steps to reproduce it for me?

[jimitndiaye]

I was attaching the control to links, which as it turns out exist in the svg layer and thus the control widget needed to be svg too. Instead I directly put a MudMenu (from MudBlazor) in the widget. Then when that didn't work I eventually copied the svg markup from one of the examples on the website then inserted a foreignobject to wrap around the MudMenu.

I'm away from my PC at the moment so I'll post the markup later.

[jimitndiaye]

Here's what ended up working:

@if (Model is SvgNodeModel or BaseLinkModel)
{
    <foreignObject width="50px" height="50px" style="overflow:visible">
        @Menu
    </foreignObject>
}
else
{
    @Menu
}

@code
{
    RenderFragment Menu =>
        @<MudMenu Dense="true"
                  MaxHeight="400"
                  ActivationEvent="MouseEvent.LeftClick"
                  AnchorOrigin="Origin.CenterRight"
                  TransformOrigin="Origin.CenterLeft">
            <ActivatorContent>
                <MudFab StartIcon="@Icons.Material.Filled.Menu"
                        Color="Color.Info"
                        Size="Size.Medium"
                        Title="Transition Menu"/>
            </ActivatorContent>
            <ChildContent>
                <MudMenuItem Icon="@Icons.Material.Filled.Add" OnClick="@(() => InsertNode(NodeType.Action))">Insert New Action</MudMenuItem>
                <MudDivider/>
                @if (Model is TransitionLinkModel transitionLink)
                {
                    <MudMenuItem Icon="@Icons.Material.Filled.Edit" OnClick="@(() => EditTransition(transitionLink.Transition.Id))">Edit Transition</MudMenuItem>
                }
                <MudMenuItem Icon="@Icons.Material.Filled.Delete" OnClick="@(DeleteTransition)">Delete Transition</MudMenuItem>
            </ChildContent>
        </MudMenu>;
}

Initially, I only had the part that's in the else branch above but that didn't work.