[Bug]: Unable to Select Top Layer When Overlapping with Larger Layer

[Khlimenkov]

Package Version

6.2.0

Flutter Version

3.22.2

Platforms

Web

How to reproduce?

1. Add two layers to the editor:

• The first layer should be larger than the second (you can scale the first layer to make it bigger).
• Place the smaller layer on top of the larger layer.

2. Select the larger layer.
3. Attempt to select the smaller (top) layer.

I think the problem is related to the DeferPointer.

Expected Behavior:
The smaller (top) layer should be selectable.

Actual Behavior:
The smaller (top) layer cannot be selected.

And there issue is reproduce - you cant select layer that on top of another.

A video demonstrating the issue is attached for reference:

Screen.Recording.2024-12-10.at.18.27.55.1.1.mp4

Logs (optional)

No response

Example code (optional)

No response

Device Model (optional)

Browser

[hm21]

Thanks for reporting the issue.

I also think the problem comes from the DeferPointer. The problem is, we need the DeferPointer that Flutter can handle interactions on transformed layers correctly. For example, if you draw a vertical line and rotate it to horizontal, Flutter might not detect gestures properly because it’s outside the normal bounds.

I don’t have a solution for this at the moment, but I plan to run more tests when I have time. If you’d like to try finding a solution yourself, I recommend checking here.

[faiyazz-shaikh]

As a quick fix, I have removed the DeferredPointerHandler from the main editor and placed it inside the LayerWidget, as it seems to cause issues when used with multiple widgets or a list of widgets.

gskinnerTeam/flutter-defer-pointer#2

Removed from the main Editor

Put Inside LayerWidget -> Positioned -> DeferredPointerHandler

vid.mov

[hm21]

@faiyazz-shaikh

That’s good to know—it’s helpful to understand that it works in this way. However, the question now is how this impacts performance when creating a DeferredPointerHandler for every layer, especially for users who require a large number of layers.

I think it would be a good idea to make some tests on both iOS and Android devices to check if this approach results in a significant performance difference or if the impact is negligible.