feat: add Fabric on iOS without ComponentViews (#1821)

Version of #1754 without usage of ComponentViews. It seems like a more proper way, but introduces the necessity of clearing whole state of each component on recycling for it not to be used when view is recycled. Still known problems: We stringify props of type NumberProp since codegen only accepts props of a single type. It is the fastest way of dealing with it, but maybe there could be a better way to handle it. Image resolving should be probably handled the same as in RN core SvgView needs to set opaque = NO so it is does not have black background (it comes from the fact that RCTViewComponentView overrides backgroundColor setter which in turn somehow messes with the view being opaque). All other svg components do it already so maybe it is not such an issue. transform prop won't work when set natively since it is not parsed in Fabric
2026-06-05 07:59:28 +00:00 · 2022-08-11 14:08:11 +02:00
parent f1fa606664
commit 8f1bda4856
228 changed files with 18136 additions and 1102 deletions
@@ -0,0 +1,224 @@
+/**
+ * Copyright (c) 2015-present, Horcrux.
+ * All rights reserved.
+ *
+ * This source code is licensed under the MIT-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+#import "RNSVGForeignObject.h"
+#import "RNSVGClipPath.h"
+#import "RNSVGMask.h"
+#import "RNSVGNode.h"
+
+#ifdef RN_FABRIC_ENABLED
+#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
+#import "RCTFabricComponentsPlugins.h"
+#import "RCTConversions.h"
+#import <react/renderer/components/view/conversions.h>
+#import "RNSVGFabricConversions.h"
+#endif // RN_FABRIC_ENABLED
+
+@implementation RNSVGForeignObject
+
+#ifdef RN_FABRIC_ENABLED
+using namespace facebook::react;
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+  if (self = [super initWithFrame:frame]) {
+    static const auto defaultProps = std::make_shared<const RNSVGForeignObjectProps>();
+    _props = defaultProps;
+  }
+  return self;
+}
+
+#pragma mark - RCTComponentViewProtocol
+
+ (ComponentDescriptorProvider)componentDescriptorProvider
+{
+  return concreteComponentDescriptorProvider<RNSVGForeignObjectComponentDescriptor>();
+}
+
+- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
+{
+    const auto &newProps = *std::static_pointer_cast<const RNSVGForeignObjectProps>(props);
+
+    self.x =  RCTNSStringFromStringNilIfEmpty(newProps.x) ? [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.x)] : nil;
+    self.y =  RCTNSStringFromStringNilIfEmpty(newProps.y) ? [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.y)] : nil;
+    if (RCTNSStringFromStringNilIfEmpty(newProps.foreignObjectheight)) {
+        self.foreignObjectheight =  [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.foreignObjectheight)];
+    }
+    if (RCTNSStringFromStringNilIfEmpty(newProps.foreignObjectwidth)) {
+        self.foreignObjectwidth =  [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.foreignObjectwidth)];
+    }
+    if (RCTNSStringFromStringNilIfEmpty(newProps.height)) {
+        self.foreignObjectheight =  [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.height)];
+    }
+    if (RCTNSStringFromStringNilIfEmpty(newProps.width)) {
+        self.foreignObjectwidth =  [RNSVGLength lengthWithString:RCTNSStringFromString(newProps.width)];
+    }
+
+    setCommonGroupProps(newProps, self);
+}
+
+- (void)prepareForRecycle
+{
+    [super prepareForRecycle];
+    _x = nil;
+    _y = nil;
+    _foreignObjectheight = nil;
+    _foreignObjectwidth = nil;
+}
+#endif // RN_FABRIC_ENABLED
+- (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
+{
+    return nil;
+}
+
+- (void)parseReference
+{
+    self.dirty = false;
+}
+
+- (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect
+{
+    [self clip:context];
+    CGContextTranslateCTM(context, [self relativeOnWidth:self.x], [self relativeOnHeight:self.y]);
+    CGRect clip = CGRectMake(
+                             0,
+                             0,
+                             [self relativeOnWidth:self.foreignObjectwidth],
+                             [self relativeOnHeight:self.foreignObjectheight]
+                             );
+    CGContextClipToRect(context, clip);
+    [super renderLayerTo:context rect:rect];
+}
+
+- (void)renderGroupTo:(CGContextRef)context rect:(CGRect)rect
+{
+    [self pushGlyphContext];
+
+    __block CGRect bounds = CGRectNull;
+
+    [self traverseSubviews:^(RNSVGView *node) {
+        if ([node isKindOfClass:[RNSVGMask class]] || [node isKindOfClass:[RNSVGClipPath class]]) {
+            // no-op
+        } else if ([node isKindOfClass:[RNSVGNode class]]) {
+            RNSVGNode* svgNode = (RNSVGNode*)node;
+            if (svgNode.display && [@"none" isEqualToString:svgNode.display]) {
+                return YES;
+            }
+            if (svgNode.responsible && !self.svgView.responsible) {
+                self.svgView.responsible = YES;
+            }
+
+            if ([node isKindOfClass:[RNSVGRenderable class]]) {
+                [(RNSVGRenderable*)node mergeProperties:self];
+            }
+
+            [svgNode renderTo:context rect:rect];
+
+            CGRect nodeRect = svgNode.clientRect;
+            if (!CGRectIsEmpty(nodeRect)) {
+                bounds = CGRectUnion(bounds, nodeRect);
+            }
+
+            if ([node isKindOfClass:[RNSVGRenderable class]]) {
+                [(RNSVGRenderable*)node resetProperties];
+            }
+        } else if ([node isKindOfClass:[RNSVGSvgView class]]) {
+            RNSVGSvgView* svgView = (RNSVGSvgView*)node;
+            CGFloat width = [self relativeOnWidth:svgView.bbWidth];
+            CGFloat height = [self relativeOnHeight:svgView.bbHeight];
+            CGRect rect = CGRectMake(0, 0, width, height);
+            CGContextClipToRect(context, rect);
+            [svgView drawToContext:context withRect:rect];
+        } else {
+            node.hidden = false;
+            [node.layer renderInContext:context];
+            node.hidden = true;
+        }
+
+        return YES;
+    }];
+    CGPathRef path = [self getPath:context];
+    [self setHitArea:path];
+    if (!CGRectEqualToRect(bounds, CGRectNull)) {
+        self.clientRect = bounds;
+        self.fillBounds = CGPathGetBoundingBox(path);
+        self.strokeBounds = CGPathGetBoundingBox(self.strokePath);
+        self.pathBounds = CGRectUnion(self.fillBounds, self.strokeBounds);
+
+        CGAffineTransform current = CGContextGetCTM(context);
+        CGAffineTransform svgToClientTransform = CGAffineTransformConcat(current, self.svgView.invInitialCTM);
+
+        self.ctm = svgToClientTransform;
+        self.screenCTM = current;
+
+        CGAffineTransform transform = CGAffineTransformConcat(self.matrix, self.transforms);
+        CGPoint mid = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
+        CGPoint center = CGPointApplyAffineTransform(mid, transform);
+
+        self.bounds = bounds;
+        if (!isnan(center.x) && !isnan(center.y)) {
+            self.center = center;
+        }
+        self.frame = bounds;
+    }
+
+    [self popGlyphContext];
+}
+
+- (void)drawRect:(CGRect)rect
+{
+    [self invalidate];
+}
+
+- (void)setX:(RNSVGLength *)x
+{
+    if ([x isEqualTo:_x]) {
+        return;
+    }
+
+    _x = x;
+    [self invalidate];
+}
+
+- (void)setY:(RNSVGLength *)y
+{
+    if ([y isEqualTo:_y]) {
+        return;
+    }
+
+    _y = y;
+    [self invalidate];
+}
+
+- (void)setForeignObjectwidth:(RNSVGLength *)foreignObjectwidth
+{
+    if ([foreignObjectwidth isEqualTo:_foreignObjectwidth]) {
+        return;
+    }
+
+    _foreignObjectwidth = foreignObjectwidth;
+    [self invalidate];
+}
+
+- (void)setForeignObjectheight:(RNSVGLength *)foreignObjectheight
+{
+    if ([foreignObjectheight isEqualTo:_foreignObjectheight]) {
+        return;
+    }
+
+    _foreignObjectheight = foreignObjectheight;
+    [self invalidate];
+}
+
+@end
+
+#ifdef RN_FABRIC_ENABLED
+Class<RCTComponentViewProtocol> RNSVGForeignObjectCls(void)
+{
+  return RNSVGForeignObject.class;
+}
+#endif // RN_FABRIC_ENABLED