excubo-ag / Blazor.Diagrams

https://excubo-ag.github.io/Blazor.Diagrams/
MIT License
136 stars 18 forks source link

Interaction events propagation to a Custom Node is required #66

Closed euklad closed 3 years ago

euklad commented 3 years ago

This a feature request. I created a custom node that contains <input/> controls, but when I click on the controls the events not propagated to them. I would like to be able to click checkboxes, type to inputs, select in dropdowns.

image

My code:

<SourceCodeLink Repository="Blazor.Diagrams" Page="@(nameof(CustomNode))" />

<Diagram>
    <NodeLibrary style="background-color: aliceblue; border: 1px solid blue; " Orientation="Orientation.Vertical">
        <UserDefinedNode>
            <div style="width:5em; height:3em; margin: 1em;">Template User-defined!</div>
        </UserDefinedNode>
    </NodeLibrary>
    <Nodes>
        <UserDefinedNode @bind-X="@X" @bind-Y="@Y">
            <table>
                <tr>
                    <th></th>
                    <th>#</th>
                    <th>Name</th>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1</td>
                    <td>Mazde</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>7</td>
                    <td>Toyota</td>
                </tr>
            </table>
        </UserDefinedNode>
    </Nodes>
    <Links />
    <OverviewSettings />
</Diagram>
@code {
    private double X { get; set; } = 300;
    private double Y { get; set; } = 300;
}
stefanloerwald commented 3 years ago

This is essentially a duplicate of #64. Pointer events are disabled on the node content to be able to move the nodes. Be careful to leave enough surface area to have the node still be movable.