Cannot select text unless you set disabled=true in TransformWrapper

[farukparhat]

I tried many solutions based on the other approaches

• overriding user-select CSS on both TransformWrapper and TransformComponent
• disabling various capabilities like pinch, pan, wheel

The only way I could get text to be selectable again was if I disabled the entire TransformWrapper library by setting the disabled=true prop. This would really not be ideal in our case.

You can repro this easily by simply trying to select text in the controls example https://prc5.github.io/react-zoom-pan-pinch/?path=/story/examples-controls--controls

Try altering the various props/CSS and I was not able to find a way to select the text without disabling the entire library. Is the library handling mousedown or some other selection event somewhere and not letting it propogate?

[prc5]

@farukparhat That's a tricky one - so there is a question: how to distinguish if the person clicking wants to select something or move the view with panning?

In my opinion if two of those would be possible at the same time it may not be the best experience to use it 🤔

I think the solution might be to add the "activation key" for panning, without clicking it - it should be possible to select text, is this good enough?

[Taaqif]

@farukparhat That's a tricky one - so there is a question: how to distinguish if the person clicking wants to select something or move the view with panning?

In my opinion if two of those would be possible at the same time it may not be the best experience to use it 🤔

I think the solution might be to add the "activation key" for panning, without clicking it - it should be possible to select text, is this good enough?

I'm assuming the issue only apply to mobile/touch devices.

Mobile applications have solved this problem for a while now. Just look at any mobile pdf reader. They allow panning, zooming and text selection so this is definitely achievable.

Perhaps the 'activation' key on a mobile or touch device can be the length of time they hold the finger on the canvas

[farukparhat]

@farukparhat That's a tricky one - so there is a question: how to distinguish if the person clicking wants to select something or move the view with panning?

In my opinion if two of those would be possible at the same time it may not be the best experience to use it 🤔

I think the solution might be to add the "activation key" for panning, without clicking it - it should be possible to select text, is this good enough?

Panning is a bit complicated, but in general zooming rarely conflicts with user text interactions. For example, using a mouse the current way the user zooms in/out is via scroll wheel and dragging with cursor does not pan by default. Instead by default it allows our users to select text and interact with elements within the transform wrapper (including editable text fields).

On touchpads/mobile zooming is handled via pinching interaction and panning is only available via 2 finger panning. If the user is using 1 finger they are able to select text and edit text on our application.

Lastly, the way we handle panning is we have a dedicated tool (which is activated temporarily when the user holds the space key) that allows them to pan via click + drag or touch + drag. When in this mode the user cannot select/edit text because they are using the "Panning" tool rather than the "Cursor" tool. A good example of this behavior is any modern whiteboarding software such as Miro

[kachkaev]

@farukparhat I know it’s been a while since you’ve asked this question, but have you found a solution? 😅