Files
react-native-svg/apple/Elements/RNSVGMask.mm
T
SergeyYurkevich 832522d1c1 feat: implement mask-type property (#2152)
# Summary

"mask-type: alpha" is not supported. 
resolve issue: #1790  

## Explanation

svg example:
```
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none">
<g clip-path="url(#clip0_8_3)">
<rect width="100" height="100" fill="white"/>
<mask id="mask0_8_3" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
<circle cx="50" cy="50" r="50" fill="#000000"/>
</mask>
<g mask="url(#mask0_8_3)">
<rect x="-26" y="-78" width="209" height="263" fill="#252E74"/>
</g>
</g>
<defs>
<clipPath id="clip0_8_3">
<rect width="100" height="100" fill="white"/>
</clipPath>
</defs>
</svg>
```

Current behavior: 

![image](https://github.com/software-mansion/react-native-svg/assets/17138397/2dca6f46-fe8f-48f3-80f9-799563911e8b)

Expected behavior:

![image](https://github.com/software-mansion/react-native-svg/assets/17138397/fb49cf0b-d677-491f-8215-9c9b1d69080f)

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |        |
| Android |        |

## Checklist

<!-- Check completed item, when applicable, via: [X] -->

- [x] I have tested this on a device and a simulator
- [ ] I added documentation in `README.md`
- [x] I updated the typed files (typescript)
- [ ] I added a test for the API in the `__tests__` folder

---------

Co-authored-by: Sergey <s.yurkevich@logiclike.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-07-05 15:11:48 +02:00

172 lines
3.8 KiB
Plaintext

/**
* 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 "RNSVGMask.h"
#import "RNSVGBrushType.h"
#import "RNSVGNode.h"
#import "RNSVGPainter.h"
#ifdef RCT_NEW_ARCH_ENABLED
#import <React/RCTConversions.h>
#import <React/RCTFabricComponentsPlugins.h>
#import <react/renderer/components/rnsvg/ComponentDescriptors.h>
#import <react/renderer/components/view/conversions.h>
#import "RNSVGFabricConversions.h"
#endif // RCT_NEW_ARCH_ENABLED
@implementation RNSVGMask
#ifdef RCT_NEW_ARCH_ENABLED
using namespace facebook::react;
- (instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
static const auto defaultProps = std::make_shared<const RNSVGMaskProps>();
_props = defaultProps;
}
return self;
}
#pragma mark - RCTComponentViewProtocol
+ (ComponentDescriptorProvider)componentDescriptorProvider
{
return concreteComponentDescriptorProvider<RNSVGMaskComponentDescriptor>();
}
- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
{
const auto &newProps = static_cast<const RNSVGMaskProps &>(*props);
id x = RNSVGConvertFollyDynamicToId(newProps.x);
if (x != nil) {
self.x = [RCTConvert RNSVGLength:x];
}
id y = RNSVGConvertFollyDynamicToId(newProps.y);
if (y != nil) {
self.y = [RCTConvert RNSVGLength:y];
}
id maskheight = RNSVGConvertFollyDynamicToId(newProps.height);
if (maskheight != nil) {
self.maskheight = [RCTConvert RNSVGLength:maskheight];
}
id maskwidth = RNSVGConvertFollyDynamicToId(newProps.width);
if (maskwidth != nil) {
self.maskwidth = [RCTConvert RNSVGLength:maskwidth];
}
self.maskUnits = newProps.maskUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse;
self.maskContentUnits = newProps.maskUnits == 0 ? kRNSVGUnitsObjectBoundingBox : kRNSVGUnitsUserSpaceOnUse;
self.maskType = newProps.maskType == 0 ? kRNSVGMaskTypeLuminance : kRNSVGMaskTypeAlpha;
setCommonGroupProps(newProps, self);
_props = std::static_pointer_cast<RNSVGMaskProps const>(props);
}
- (void)prepareForRecycle
{
[super prepareForRecycle];
_x = nil;
_y = nil;
_maskheight = nil;
_maskwidth = nil;
_maskUnits = kRNSVGUnitsObjectBoundingBox;
_maskContentUnits = kRNSVGUnitsObjectBoundingBox;
_maskType = kRNSVGMaskTypeLuminance;
}
#endif // RCT_NEW_ARCH_ENABLED
- (RNSVGPlatformView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
return nil;
}
- (void)parseReference
{
self.dirty = false;
[self.svgView defineMask:self maskName:self.name];
}
- (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)setMaskwidth:(RNSVGLength *)maskwidth
{
if ([maskwidth isEqualTo:_maskwidth]) {
return;
}
_maskwidth = maskwidth;
[self invalidate];
}
- (void)setMaskheight:(RNSVGLength *)maskheight
{
if ([maskheight isEqualTo:_maskheight]) {
return;
}
_maskheight = maskheight;
[self invalidate];
}
- (void)setMaskUnits:(RNSVGUnits)maskUnits
{
if (maskUnits == _maskUnits) {
return;
}
_maskUnits = maskUnits;
[self invalidate];
}
- (void)setMaskContentUnits:(RNSVGUnits)maskContentUnits
{
if (maskContentUnits == _maskContentUnits) {
return;
}
_maskContentUnits = maskContentUnits;
[self invalidate];
}
- (void)setMaskType:(RNSVGMaskType)maskType
{
if (maskType == _maskType) {
return;
}
_maskType = maskType;
[self invalidate];
}
@end
#ifdef RCT_NEW_ARCH_ENABLED
Class<RCTComponentViewProtocol> RNSVGMaskCls(void)
{
return RNSVGMask.class;
}
#endif // RCT_NEW_ARCH_ENABLED