Blazor-Diagrams / Blazor.Diagrams

A fully customizable and extensible all-purpose diagrams library for Blazor
https://blazor-diagrams.zhaytam.com
MIT License
919 stars 176 forks source link

How to stop the canvas from being dragged or scrolled when a component inside a node is being used? #320

Closed mrakgr closed 1 year ago

mrakgr commented 1 year ago

I have a text field in side a node, and when I have it selected and use the mouse scroll wheel to scroll it, it ends up zooming the whole canvas. The same goes for dragging when I just want to select the text inside it. I'd like it if I could make it so that the node component is only draggable by its padding or border. The same goes for how zooming should only work over the canvas. How could I do I control those behaviors?

mrakgr commented 1 year ago
<MudCard Class="pa-8 ma-0" Style="width: 300px;">
    <MudTextField T="string"
                  DisableUnderLine="true"
                  Variant="Variant.Outlined" Lines="5"
                  @bind-Value="@Node.Text"
                  @onmousedown:stopPropagation @onmousemove:stopPropagation
                  @onmousewheel:stopPropagation
                  >
    </MudTextField>
    @foreach (var port in Node.Ports)
    {
        <PortRenderer Port="port"/>
    }
</MudCard>

The @onmousedown:stopPropagation @onmousemove:stopPropagation lines work for me, with regards to dragging, but I can't figure out how to stop the zooming. The onmousewheel isn't doing anything.

mrakgr commented 1 year ago
<MudCard Class="pa-8 ma-0" Style="width: 300px;" 
         @oncontextmenu:stopPropagation>
    <MudTextField T="string"
                  DisableUnderLine="true"
                  Variant="Variant.Outlined" Lines="5"
                  @bind-Value="@Node.Text"
                  @onmousedown:stopPropagation @onmousemove:stopPropagation
                  @onwheel:stopPropagation
    />
    @foreach (var port in Node.Ports)
    {
        <PortRenderer Port="port"/>
    }
</MudCard>

Oh, there is just the onwheel event. This resolves it for me.

robertmclaws commented 5 months ago

This does not appear to be working in 3.0.1.

zHaytam commented 4 months ago

The events used in 3.0.0 are the pointer ones, so replace onmousedown with onpointerdown.