-
Notifications
You must be signed in to change notification settings - Fork 25.1k
feat(ios(old arch)): transform origin #38514
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.
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,6 +18,7 @@ | |
| #import "RCTLog.h" | ||
| #import "RCTViewUtils.h" | ||
| #import "UIView+React.h" | ||
| #import "RCTConvert+Transform.h" | ||
|
|
||
| RCT_MOCK_DEF(RCTView, RCTContentInsets); | ||
| #define RCTContentInsets RCT_MOCK_USE(RCTView, RCTContentInsets) | ||
|
|
@@ -785,6 +786,10 @@ - (void)reactSetFrame:(CGRect)frame | |
| [super reactSetFrame:frame]; | ||
| if (!CGSizeEqualToSize(self.bounds.size, oldSize)) { | ||
| [self.layer setNeedsDisplay]; | ||
| // Update transform for transform origin due to change in view dimension | ||
| if (self.transformOrigin.length > 0) { | ||
| self.layer.transform = [RCTConvert CATransform3D:self.rawTransform viewWidth:self.bounds.size.width viewHeight:self.bounds.size.height transformOrigin: self.transformOrigin]; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think you can use anchorPoint instead. It'd save you having to store Note that it's a percent value rather than pixel, so if you do this you'll need to flip your logic so your non-percent values are multiplied by the view width/height. Also note that it only supports x and y, and there's
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The initial version that I tried used anchorPoint but anchorPoint also changes the position of the view and it might conflict with yoga's setting position or will need some handling so I dropped that idea, also Android has pivot x and pivot y but no pivot z so thought of using the raw translates to achieve transform-origin and keeping it consistent on android and iOS. 😅 |
||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -218,12 +218,18 @@ - (RCTShadowView *)shadowView | |
|
|
||
| RCT_CUSTOM_VIEW_PROPERTY(transform, CATransform3D, RCTView) | ||
| { | ||
| view.layer.transform = json ? [RCTConvert CATransform3D:json] : defaultView.layer.transform; | ||
| view.rawTransform = json; | ||
| view.layer.transform = json ? [RCTConvert CATransform3D:view.rawTransform viewWidth:view.bounds.size.width viewHeight:view.bounds.size.height transformOrigin: view.transformOrigin] : defaultView.layer.transform; | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this so you can use
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah exactly, also |
||
| // 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; | ||
| } | ||
|
|
||
| RCT_CUSTOM_VIEW_PROPERTY(transformOrigin, NSString, RCTView){ | ||
| view.transformOrigin = json; | ||
| view.layer.transform = [RCTConvert CATransform3D:view.rawTransform viewWidth:view.bounds.size.width viewHeight:view.bounds.size.height transformOrigin: view.transformOrigin]; | ||
| } | ||
|
|
||
| RCT_CUSTOM_VIEW_PROPERTY(accessibilityRole, UIAccessibilityTraits, RCTView) | ||
| { | ||
| UIAccessibilityTraits accessibilityRoleTraits = | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use this to pre-process it on the JS side so you can share it with the Android side - https://gist.github.com/jacobp100/86bc3fa863e41f42ca091386f6252f29 - I maintain css-to-react-native so you can trust me 🤣
It gives you an array with 3 components corresponding to
x,y, andz. Gives either a number ([json isKindOfClass:NSNumber.class]), or a string with a%at the end (re-use your existing logic here)There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah, had that in mind 😅, was saving for the last. I'll check your code! Thanks!