Skip to content

Fix transforms #1035

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 26, 2022
Merged

Fix transforms #1035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
70ea1a3
fix transforms #280
sahrens Jun 18, 2020
e01b7db
Merge branch 'main' of github.com:microsoft/react-native-macos into f…
Saadnajmi Feb 21, 2022
b16dd95
remove duplicate
Saadnajmi Feb 21, 2022
25136d0
Merge branch 'main' of github.com:microsoft/react-native-macos into f…
Saadnajmi Feb 25, 2022
5400242
fix errors
Saadnajmi Feb 25, 2022
ca02e47
Update from PR feedback
Saadnajmi Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions React/Views/RCTView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@ extern const UIAccessibilityTraits SwitchAccessibilityTrait;
/**
* macOS Properties
*/

@property (nonatomic, assign) CATransform3D transform3D;

@property (nonatomic, copy) RCTDirectEventBlock onDoubleClick;
@property (nonatomic, copy) RCTDirectEventBlock onClick;
@property (nonatomic, copy) RCTDirectEventBlock onMouseEnter;
Expand Down
16 changes: 16 additions & 0 deletions React/Views/RCTView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,9 @@ - (instancetype)initWithFrame:(CGRect)frame
_borderBottomEndRadius = -1;
_borderStyle = RCTBorderStyleSolid;
_hitTestEdgeInsets = UIEdgeInsetsZero;
#if TARGET_OS_OSX // TODO(macOS GH#774)
_transform3D = CATransform3DIdentity;
#endif // TODO(macOS GH#774)

_backgroundColor = super.backgroundColor;
}
Expand Down Expand Up @@ -1169,6 +1172,19 @@ - (void)displayLayer:(CALayer *)layer
backgroundColor = _backgroundColor.CGColor;
#endif

#if TARGET_OS_OSX // [TODO(macOS GH#1035)
CATransform3D transform = [self transform3D];
CGPoint anchorPoint = [layer anchorPoint];
if (CGPointEqualToPoint(anchorPoint, CGPointZero) && !CATransform3DEqualToTransform(transform, CATransform3DIdentity)) {
// https://developer.apple.com/documentation/quartzcore/calayer/1410817-anchorpoint
// This compensates for the fact that layer.anchorPoint is {0, 0} instead of {0.5, 0.5} on macOS for some reason.
CATransform3D originAdjust = CATransform3DTranslate(CATransform3DIdentity, self.frame.size.width / 2, self.frame.size.height / 2, 0);
transform = CATransform3DConcat(CATransform3DConcat(CATransform3DInvert(originAdjust), transform), originAdjust);
// Enable edge antialiasing in perspective transforms
[layer setAllowsEdgeAntialiasing:!(transform.m34 == 0.0f)];
}
[layer setTransform:transform];
#endif // ]TODO(macOS GH#1035)
if (useIOSBorderRendering) {
layer.cornerRadius = cornerRadii.topLeft;
layer.borderColor = borderColors.left;
Expand Down
17 changes: 9 additions & 8 deletions React/Views/RCTViewManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,15 +215,16 @@ - (RCTShadowView *)shadowView

RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RCTView)
{
#if !TARGET_OS_OSX // TODO(macOS GH#774)
#if TARGET_OS_OSX // [TODO(macOS GH#460)
CATransform3D transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
[view setTransform3D:transform];
[view setNeedsDisplay];
#else // ]TODO(macOS GH#460)]
view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform;
// Enable edge antialiasing in perspective transforms
view.layer.allowsEdgeAntialiasing = !(view.layer.transform.m34 == 0.0f);
#elif TARGET_OS_OSX // [TODO(macOS GH#774)
view.layer.sublayerTransform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.sublayerTransform;
// TODO: Improve this by enabling edge antialiasing only for transforms with rotation or skewing
view.layer.edgeAntialiasingMask = !CATransform3DIsIdentity(view.layer.sublayerTransform) ? kCALayerLeftEdge | kCALayerRightEdge | kCALayerBottomEdge | kCALayerTopEdge : 0;
#endif // ]TODO(macOS GH#774)
// Enable edge antialiasing in rotation, skew, or perspective transforms
view.layer.allowsEdgeAntialiasing =
view.layer.transform.m12 != 0.0f || view.layer.transform.m21 != 0.0f || view.layer.transform.m34 != 0.0f;
#endif // [TODO(macOS GH#460)]
}

RCT_CUSTOM_VIEW_PROPERTY(accessibilityRole, UIAccessibilityTraits, RCTView)
Expand Down
58 changes: 29 additions & 29 deletions packages/rn-tester/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,8 +542,8 @@ SPEC CHECKSUMS:
boost-for-react-native: 8f7c9ecfe357664c072ffbe2432569667cbf1f1b
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
DoubleConversion: ed15e075aa758ac0e4c1f8b830bd4e4d40d669e8
FBLazyVector: c6aa9a9619d963282360abc4bb47d2712717504e
FBReactNativeSpec: 0ca7ec65c7f09ab67e221ac5f0532b8385bc2138
FBLazyVector: f9a49507e1136243adff1c1a795595a5e847d811
FBReactNativeSpec: 0b76599045f10c00164afbc3b7dadbc0586b06aa
Flipper: 30e8eeeed6abdc98edaf32af0cda2f198be4b733
Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c
Expand All @@ -558,34 +558,34 @@ SPEC CHECKSUMS:
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
RCT-Folly: 43adc9ce880eb76792f88c011773cb5c664c1419
RCTRequired: 633fe8690af80ea0d6d1743ea0fbeee6a8de0978
RCTTypeSafety: 2a1aa8c0ffa214900ea5e96dd1ce844be196decc
React: 4f7007b4f9f59b3d935cfc415e0b3e3dd03d2021
React-callinvoker: 775c5ec2ad1d1b7f0f4a8458397bfd68aced33a7
React-Core: b1cdd30e896e76499480e4603f5cad119d238885
React-CoreModules: c6609f09932ba5fc8dae3c20f8ba294653159370
React-cxxreact: 3d44d388b2feccc0d6b2f0735cf4ac78f71c26be
React-jsi: 743b50fb3db21ad787c384fd6601c7e3e6784dec
React-jsiexecutor: cc19fe20e9f6c261c8f1eed5727f2b724f945494
React-jsinspector: 90fbbc33233c45021327ddd921f5b91622c77190
React-logger: 4f94752a4d8e071ac861865ea5f1d341650b6d70
React-perflogger: 0eaad01e3aaefb12799c39333d0b584dd5b4dae8
React-RCTActionSheet: e80fd63af2c04195f544a51f237f0bb8c999ba02
React-RCTAnimation: 5827d917ff6c716a50b0008856ffb1772578c446
React-RCTBlob: cd43b543b917d9b66eb303dc08c4058f7b3e52c4
React-RCTImage: 9d0661b1b0de30e825cadd8b94fefb6b8485b370
React-RCTLinking: 1e0f88ba8ecc3e36fe7f4ca89e3a7bb8ba9b033d
React-RCTNetwork: c9ac771311a39f42c43ad5633f090e2d01d2710d
React-RCTPushNotification: 9398208d33368b68b6afb3887c04e3f5ae1c7049
React-RCTSettings: 99d2d69f4183c6e9ef89ba589a8dc77c6465a2c8
React-RCTTest: a57ea516520309b75fc9c152847beedf26c7926e
React-RCTText: 0732843b7d073ae2dd7687b95774a534c0fae0fb
React-RCTVibration: 8a50e8ddd4402a7b123fcfe41efd1220d1b23798
React-runtimeexecutor: 8993403523caba788cd6483b26a6e67384ec2224
RCTRequired: ea4892e8dc691de4cf2129f4d29fe83cb491bdcc
RCTTypeSafety: 6aee186c117ff01665977d2d70f0a300cdc9b4ad
React: e7fc9cffd3c5988b438fa5aaba6141aad86971e6
React-callinvoker: bea112449c41192b309cdb7c712e6ae9a8f4c070
React-Core: 41d3242d227eb7a0481750798f48d52359054450
React-CoreModules: 29ff97252b5a4ec16c5adbcab8d49a8d5e6ea3bf
React-cxxreact: 9bd13f543f7c2f6fcd9d117a2a3f486e5c2530bb
React-jsi: 05a3c6306ba9b754e879dfaf7110bf559f96cbda
React-jsiexecutor: 199a16dbf1b183c7f3068b49f848013c1d0c8506
React-jsinspector: 911c0c94d9f51d297827722451d5e457fab635da
React-logger: c57708498fefd433ebfcbabd9a063ed174010d62
React-perflogger: 8aac65f8d87f45d8a7c980e3d3d37b97a9ed650c
React-RCTActionSheet: 3b36d5f3011473512b04a0f39b144505271ed3ef
React-RCTAnimation: 33df7e35b98b9e83f1574e6b92c217ef54178867
React-RCTBlob: 5ee404a8716f0055ff78999f5d12d060b03a352b
React-RCTImage: 876e01ce57e5027eee514170b21e95aada21b203
React-RCTLinking: 8002745c01b7723379a262dfe8575c81100b0d87
React-RCTNetwork: fdf2f1e67be55ee3792366bc832461fc2044ab52
React-RCTPushNotification: f7fbaf9b10ce0abd3a43ffa3204ea5bb7f9a110a
React-RCTSettings: 49a609a6c7d4273a9f6fdf29c1f21d14e3f5c92d
React-RCTTest: d35e7daa9fa7bb6e2febacb85eeee19527711706
React-RCTText: 14747294de36617bdc7808529b3a223c10ea20ef
React-RCTVibration: 5d1a1a5ae3714a3f1eadad43df60c9e6f9e04f85
React-runtimeexecutor: 83250c622f59b5851d03dfe820936aff9f98368a
React-TurboModuleCxx-RNW: f2e32cbfced49190a61d66c993a8975de79a158a
React-TurboModuleCxx-WinRTPort: e7647958397b6cdafa0deb18f9db886d6acf6fcf
ReactCommon: 90d5510f055f513dd4f1123ef1883062903b56b8
Yoga: d7d6de52ed443bd01bfa17cb314b95e86876289b
React-TurboModuleCxx-WinRTPort: 2fce7b4eb8e260b508acee6d26f4f0531709a74e
ReactCommon: 2d0e5b1f1b90ffb71ab452cc904d7865ea5bf504
Yoga: 6ca992f0bab255c81622a6e0ab8ad856d6203eba
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a

PODFILE CHECKSUM: c7a7110b242497f2bf323ba74caedb9ee61ee05e
Expand Down
4 changes: 2 additions & 2 deletions packages/rn-tester/RNTesterPods.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1869,7 +1869,7 @@
ENABLE_BITCODE = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
ENABLE_TESTABILITY = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
GCC_C_LANGUAGE_STANDARD = gnu11;
GCC_DYNAMIC_NO_PIC = NO;
GCC_NO_COMMON_BLOCKS = YES;
Expand Down Expand Up @@ -1953,7 +1953,7 @@
ENABLE_BITCODE = NO;
ENABLE_NS_ASSERTIONS = NO;
ENABLE_STRICT_OBJC_MSGSEND = YES;
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "";
"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = "arm64 ";
GCC_C_LANGUAGE_STANDARD = gnu11;
GCC_NO_COMMON_BLOCKS = YES;
GCC_TREAT_INCOMPATIBLE_POINTER_TYPE_WARNINGS_AS_ERRORS = YES;
Expand Down