fix: macOS percentage values and images (#2496)

# Summary Continuation of #2136, specifically for percentage values, images and this: #2136 (comment) | before | after | | --- | --- | | <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 07 46" src="https:/user-attachments/assets/8903e069-d700-449d-ab7a-3a866f362c62"> | <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 09 16" src="https:/user-attachments/assets/2a166d73-9082-4d40-af1e-c945400cb56c"> | | <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 07 41" src="https:/user-attachments/assets/ee2c6c22-ba3f-47f4-a0c4-1864c94e4953"> | <img width="1392" alt="Zrzut ekranu 2024-10-21 o 12 09 09" src="https:/user-attachments/assets/2c5bdff5-5ef4-4cae-bfc6-dcdc9d532070"> | ## Test Plan Run `fabric-macos-example` ## Compatibility | OS | Implemented | | ------- | :---------: | | macOS | ✅ |
software-mansion · Oct 22, 2024 · 3faf625 · 3faf625
1 parent f9528e5
commit 3faf625
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/apple/Elements/RNSVGGroup.mm b/apple/Elements/RNSVGGroup.mm
@@ -156,6 +156,12 @@ - (void)renderGroupTo:(CGContextRef)context rect:(CGRect)rect
 - (void)setupGlyphContext:(CGContextRef)context
 {
  CGRect clipBounds = CGContextGetClipBoundingBox(context);
+#if TARGET_OS_OSX // [macOS
+ RNSVGSvgView *svgView = [self svgView];
+ if (svgView != nil && (clipBounds.origin.x < 0 || clipBounds.origin.y < 0)) {
+ clipBounds = CGRectApplyAffineTransform([svgView boundingBox], [svgView getInvViewBoxTransform]);
+ }
+#endif // macOS]
  clipBounds = CGRectApplyAffineTransform(clipBounds, self.matrix);
  clipBounds = CGRectApplyAffineTransform(clipBounds, self.transforms);
  CGFloat width = CGRectGetWidth(clipBounds);

diff --git a/apple/Elements/RNSVGSvgView.h b/apple/Elements/RNSVGSvgView.h
@@ -72,4 +72,6 @@
 
 - (CGAffineTransform)getViewBoxTransform;
 
+- (CGAffineTransform)getInvViewBoxTransform;
+
 @end
diff --git a/apple/Elements/RNSVGSvgView.mm b/apple/Elements/RNSVGSvgView.mm
@@ -26,7 +26,7 @@ @implementation RNSVGSvgView {
  NSMutableDictionary<NSString *, RNSVGMarker *> *_markers;
  NSMutableDictionary<NSString *, RNSVGMask *> *_masks;
  NSMutableDictionary<NSString *, RNSVGFilter *> *_filters;
- CGAffineTransform _invviewBoxTransform;
+ CGAffineTransform _invViewBoxTransform;
  bool rendered;
 }
 
@@ -120,7 +120,7 @@ - (void)prepareForRecycle
  _markers = nil;
  _masks = nil;
  _filters = nil;
- _invviewBoxTransform = CGAffineTransformIdentity;
+ _invViewBoxTransform = CGAffineTransformIdentity;
  rendered = NO;
 }
 
@@ -289,11 +289,11 @@ - (void)drawToContext:(CGContextRef)context withRect:(CGRect)rect
  if (self.align) {
  CGRect tRect = CGRectMake(self.minX, self.minY, self.vbWidth, self.vbHeight);
  _viewBoxTransform = [RNSVGViewBox getTransform:tRect eRect:rect align:self.align meetOrSlice:self.meetOrSlice];
- _invviewBoxTransform = CGAffineTransformInvert(_viewBoxTransform);
+ _invViewBoxTransform = CGAffineTransformInvert(_viewBoxTransform);
  CGContextConcatCTM(context, _viewBoxTransform);
  } else {
  _viewBoxTransform = CGAffineTransformIdentity;
- _invviewBoxTransform = CGAffineTransformIdentity;
+ _invViewBoxTransform = CGAffineTransformIdentity;
  }
  for (RNSVGPlatformView *node in self.subviews) {
  if ([node isKindOfClass:[RNSVGNode class]]) {
@@ -316,7 +316,11 @@ - (void)drawRect:(CGRect)rect
  if ([parent isKindOfClass:[RNSVGNode class]]) {
  return;
  }
+#if TARGET_OS_OSX // [macOS
+ _boundingBox = [self bounds];
+#else // macOS]
  _boundingBox = rect;
+#endif
  CGContextRef context = UIGraphicsGetCurrentContext();
 
  [self drawToContext:context withRect:[self bounds]];
@@ -335,7 +339,7 @@ - (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
 {
  CGPoint transformed = point;
  if (self.align) {
- transformed = CGPointApplyAffineTransform(transformed, _invviewBoxTransform);
+ transformed = CGPointApplyAffineTransform(transformed, _invViewBoxTransform);
  }
  for (RNSVGNode *node in [self.subviews reverseObjectEnumerator]) {
  if (![node isKindOfClass:[RNSVGNode class]]) {
@@ -476,6 +480,11 @@ - (CGAffineTransform)getViewBoxTransform
  return _viewBoxTransform;
 }
 
+- (CGAffineTransform)getInvViewBoxTransform
+{
+ return _invViewBoxTransform;
+}
+
 #if !RCT_NEW_ARCH_ENABLED && TARGET_OS_OSX // [macOS
 - (void)updateReactTransformInternal:(CATransform3D)transform
 {