[Wasm] When Css Style "clip-path" applied to Canvas, Canvas receive wrong Pointer Event.

[easy28]

Current behavior

Consider below example, GreenCanvas inside the RedCanvas, and I set css style "clip-path" on GreenCanvas : GreenCanvas.SetCssStyle("clip-path", "path('M300,0 500,50 300,100z')");

When pointer moving on red area, GreenCanvas wrongly received the pointer move events.

This error start from Uno.UI/ Uno.UI.WebAssembly version 5.4.0-dev.1485 . before this version it's correct.

        <Canvas Width="500" Height="100" Background="Red" x:Name="RedCanvas" PointerMoved="Canvas_PointerMoved" >
            <Canvas  Width="500" Height="100" Background="Green" x:Name="GreenCanvas" PointerMoved="Canvas_PointerMoved"> </Canvas>
        </Canvas>

        public TestPanel()
        {
            this.InitializeComponent();
            GreenCanvas.SetCssStyle("clip-path", "path('M300,0 500,50 300,100z')");
        }

        private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            Console.WriteLine((sender as Canvas).Name + " moved");
            e.Handled = true;
        }

Thank you!

Expected behavior

No response

How to reproduce it (as minimally and precisely as possible)

No response

Workaround

No response

Works on UWP/WinUI

None

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia

NuGet package version(s)

No response

Affected platforms

WebAssembly

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[MartinZikmund]

@ramezgerges could it be related to hit testing changes, which are now purely managed?

[ramezgerges]

I'm pretty sure that moving WASM pointers to managed means that any native clipping won't affect hit-testing at all (since we do our own hit tests), but I didn't work on that, so I'm not sure. Maybe @dr1rrb can chime in?

[easy28]

So can we have a setting to switch between managed and native pointers in WASM?

Thank you

[Youssef1313]

@easy28 IMO, it's in general not a good idea to alter "clip-path" yourself. For example, if we implemented https://github.com/unoplatform/uno/issues/13782, then our own layout clipping will be competing on the same property that you are trying to set (though it won't happen for Canvas specifically as it's never layout clipped by us).

I think a better way to achieve the same rendering would be something like this:

<Canvas Width="500" Height="100" Background="Red" x:Name="RedCanvas">
    <Path Width="500" Height="100" Fill="Green" x:Name="GreenPath" Data="M 300,0 500,50 300,100z" />
</Canvas>

Can you try that and let us know if pointers don't work properly with that code?

Note: the above will also work on all platforms, while what you have will only work on Wasm

[easy28]

@Youssef1313 In fact, we want clip an image by "clip-path", not just show a shape.

<Canvas Width="500" Height="500" Background="Red" x:Name="RedCanvas" PointerMoved="Canvas_PointerMoved" >
    <Image Source="/Assets/Sample.jpeg" PointerMoved="Canvas_PointerMoved" x:Name="InnerImage" />
</Canvas>

InnerImage.SetCssStyle("clip-path", "path('M300,0 500,50 300,100z')");

[ramezgerges]

@easy28 This isn't as powerful as clip-path, but you can do something similar with a Path and an ImageBrush:

    <Canvas Width="500" Height="500" Background="Red" x:Name="RedCanvas">
        <Path>
            <Path.Fill>
                <ImageBrush ImageSource="/Assets/Sample.jpeg" />
            </Path.Fill>
            <Path.Data>
                M300,0 500,50 300,100z
            </Path.Data>
        </Path>
    </Canvas>

[easy28]

@ramezgerges @Youssef1313 This method still can't clip UIElement e.g. Canvas. We have a big project rely on 'clip-path' and it works perfect before Uno.UI version 5.4.0-dev.1441. After this version, it can't work correctly. So could you please add a setting to switch between managed and native pointers.

Thank you very much!

[MartinZikmund]

@easy28 unfortunately I doubt switching between managed and native pointers is possible, as it is a completely different infrastructure involved (am I correct @dr1rrb?)

[easy28]

is it posible to add a setting (switch between managed and native pointers) in the Wasm Project File?

[github-actions[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. We don't monitor discussions on closed issues thus please open a new GitHub issue if you need the team to revisit this matter.

[easy28]

@dr1rrb @MartinZikmund is it posible to add a setting (switch between managed and native pointers) in Uno.UI.FeatureConfiguration ? so we can use back the native pointers in wasm.

Thanks a lot