Improved input handling by aleclarson · Pull Request #228 · ptmt/react-native-macos

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

aleclarson · 2019-02-19T18:07:06Z

Add the RCTWindow class that improves upon the current input handling logic.

Users can opt-in by using RCTWindow in place of NSWindow. If they don't, they'll continue to use the (flawed) RCTTouchHandler logic.

Event handling in RCTWindow is different in the following ways:

Skip touchStart events that target a focused NSTextView
Emit mouseOut event when the mouse leaves the RCTWindow
Emit touchCancel event when a "touch" leaves the RCTWindow
Support mouseMove events (which can be coalesced)
Emit mouseMove event right after mouseUp events
Blur the focused NSTextView when clicking outside it
Support rightClick events
Add altKey, ctrlKey, metaKey, and shiftKey properties to JS mouse events
Use convertPoint:toView: to compute the relative mouse location

In the future, I might try updating RCTTouchHandler with the same logic that RCTWindow has. That's what I tried originally, but I ran into issues between NSGestureRecognizer and NSTextView.

Other changes

rename mouseEnter to mouseOver (to align with browsers)
rename mouseLeave to mouseOut (to align with browsers)

In the future, I might implement the mouseEnter and mouseLeave events properly (using the JS event system).

The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

ptmt

I love that, thanks for a huge amount of effort!

The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

By subclassing NSWindow and overriding the "sendEvent:" method, we can avoid using the NSGestureRecognizer class, which seems to cause issues with NSTextView event handling. The RCTWindow class reimplements input event handling, which solves the following issues: - Skip "touchStart" events that target a focused NSTextView - Emit "mouseOut" event when the mouse leaves the RCTWindow - Emit "touchCancel" when the mouse leaves the RCTWindow - Support "mouseMove" events (which can be coalesced) - Emit "mouseMove" event right after "mouseUp" events - Blur the focused NSTextView when clicking outside it - Support "contextMenu" events - Add "altKey", "ctrlKey", "metaKey", and "shiftKey" properties to JS mouse events - Use "convertPoint:toView:" to compute the relative mouse location

These new calculations match the UIManager#measure method.

The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

fix: rename "mouseEnter" to "mouseOver"
85aa69a
The "mouseEnter" event in browsers does not bubble, while "mouseOver" does.

aleclarson requested a review from ptmt February 19, 2019 18:07

aleclarson force-pushed the window branch 2 times, most recently from 952a202 to 778cd07Compare February 19, 2019 19:10

ptmt approved these changes Feb 23, 2019
View reviewed changes

Comment threadLibraries/Components/View/ReactNativeViewAttributes.js Outdated

aleclarson force-pushed the window branch 2 times, most recently from b347bbb to 5a1de46Compare February 23, 2019 16:29

aleclarson added 5 commits February 27, 2019 14:52

fix: rename "mouseLeave" to "mouseOut"
024d4bd
The "mouseLeave" event in browsers does not bubble, while "mouseOut" does.

feat: add "onMouseMove" prop
e34e535

feat: add "onContextMenu" prop
6ca1131

use RCTWindow in RNTester/AppDelegate.m
05744ed

aleclarson force-pushed the window branch from 5a1de46 to 05744edCompare February 27, 2019 19:53

aleclarson added this to the 0.20.0 milestone Mar 3, 2019

fix: global coords in mouse events
e2060be
These new calculations match the UIManager#measure method.

This was referenced Mar 14, 2019
Unofficial roadmap #230
Open
Support "onMouseEnter" and "onMouseLeave" props #231
Draft

fix: always clone userInfo of RCTMouseEvent
f5d425a

aleclarson mentioned this pull request Mar 19, 2019
onpress emit in error area when view use transform #235
Open

aleclarson added 4 commits March 25, 2019 16:58

fix: "locationY" prop in mouse events
520326a

fix: RCTWindow hitTest
cf5aa34

fix: RCTRootView hitTest
3ae5088
The RCTRootContentView "hitTest:" method now flips the Y-axis of whatever point is passed to it, instead of relying on the caller to do it. Also, the `passThroughTouches` property of RCTRootView now works as expected.

refactor: RCTWindow internal method
bfc3f1e

aleclarson mentioned this pull request Mar 28, 2019
on mouse right click, show up context menu #237
Closed

This was referenced Apr 11, 2019
Fix for bug where mouse coordinates are wrong #239
Open
TouchableHighlight works only with the first touch #240
Open