feat: FeComposite filter

RNSVG.podspec

@@ -12,13 +12,18 @@ Pod::Spec.new do |s|
   s.homepage          = package['homepage']
   s.authors           = 'Horcrux Chen'
   s.source            = { :git => 'https://github.com/react-native-community/react-native-svg.git', :tag => "v#{s.version}" }
-  s.source_files    = 'apple/**/*.{h,m,mm}'
+  s.source_files      = 'apple/**/*.{h,m,mm,metal}'
   s.ios.exclude_files = '**/*.macos.{h,m,mm}'
   s.tvos.exclude_files = '**/*.macos.{h,m,mm}'
   s.visionos.exclude_files = '**/*.macos.{h,m,mm}' if s.respond_to?(:visionos)
   s.osx.exclude_files = '**/*.ios.{h,m,mm}'
-  s.requires_arc    = true
+  s.requires_arc      = true
   s.platforms         = { :osx => "10.14", :ios => "12.4", :tvos => "12.4", :visionos => "1.0" }
+
+  s.osx.resource_bundles  = {'RNSVGFilters' => ['apple/**/*.macosx.metallib']}
+  s.ios.resource_bundles  = {'RNSVGFilters' => ['apple/**/*.iphoneos.metallib']}
+  s.tvos.resource_bundles  = {'RNSVGFilters' => ['apple/**/*.appletvos.metallib']}
+  s.visionos.resource_bundles  = {'RNSVGFilters' => ['apple/**/*.xros.metallib']}
 
   if fabric_enabled
     install_modules_dependencies(s)

android/src/main/java/com/horcrux/svg/FeCompositeView.java

@@ -0,0 +1,132 @@
+package com.horcrux.svg;
+
+import android.annotation.SuppressLint;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
+import com.facebook.react.bridge.ReactContext;
+import java.util.HashMap;
+
+@SuppressLint("ViewConstructor")
+class FeCompositeView extends FilterPrimitiveView {
+  String mIn1;
+  String mIn2;
+  float mK1;
+  float mK2;
+  float mK3;
+  float mK4;
+  FilterProperties.FeCompositeOperator mOperator;
+
+  public FeCompositeView(ReactContext reactContext) {
+    super(reactContext);
+  }
+
+  public void setIn1(String in1) {
+    this.mIn1 = in1;
+    invalidate();
+  }
+
+  public void setIn2(String in2) {
+    this.mIn2 = in2;
+    invalidate();
+  }
+
+  public void setK1(Float value) {
+    this.mK1 = value;
+    invalidate();
+  }
+
+  public void setK2(Float value) {
+    this.mK2 = value;
+    invalidate();
+  }
+
+  public void setK3(Float value) {
+    this.mK3 = value;
+    invalidate();
+  }
+
+  public void setK4(Float value) {
+    this.mK4 = value;
+    invalidate();
+  }
+
+  public void setOperator(String operator) {
+    this.mOperator = FilterProperties.FeCompositeOperator.getEnum(operator);
+    invalidate();
+  }
+
+  @Override
+  public Bitmap applyFilter(HashMap<String, Bitmap> resultsMap, Bitmap prevResult) {
+    Bitmap in1 = getSource(resultsMap, prevResult, this.mIn1);
+    Bitmap in2 = getSource(resultsMap, prevResult, this.mIn2);
+    Bitmap result = Bitmap.createBitmap(in1.getWidth(), in1.getHeight(), Bitmap.Config.ARGB_8888);
+    Canvas canvas = new Canvas(result);
+    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
+    canvas.drawBitmap(in1, 0, 0, paint);
+
+    switch (this.mOperator) {
+      case OVER -> {
+        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
+      }
+      case IN -> {
+        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
+      }
+      case OUT -> {
+        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
+      }
+      case ATOP -> {
+        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));
+      }
+      case XOR -> {
+        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
+      }
+      case ARITHMETIC -> {
+        // result = k1*i1*i2 + k2*i1 + k3*i2 + k4
+        int nPixels = result.getWidth() * result.getHeight();
+        int[] pixels1 = new int[nPixels];
+        int[] pixels2 = new int[nPixels];
+        result.getPixels(
+            pixels1, 0, result.getWidth(), 0, 0, result.getWidth(), result.getHeight());
+
+        for (int i = 0; i < nPixels; i++) {
+          int color1 = pixels1[i];
+          int color2 = pixels2[i];
+
+          int r1 = (color1 >> 16) & 0xFF;
+          int g1 = (color1 >> 8) & 0xFF;
+          int b1 = color1 & 0xFF;
+          int a1 = (color1 >>> 24);
+          int r2 = (color2 >> 16) & 0xFF;
+          int g2 = (color2 >> 8) & 0xFF;
+          int b2 = color2 & 0xFF;
+          int a2 = (color2 >>> 24);
+
+          int rResult = (int) (mK1 * r1 * r2 + mK2 * r1 + mK3 * r2 + mK4);
+          int gResult = (int) (mK1 * g1 * g2 + mK2 * g1 + mK3 * g2 + mK4);
+          int bResult = (int) (mK1 * b1 * b2 + mK2 * b1 + mK3 * b2 + mK4);
+          int aResult = (int) (mK1 * a1 * a2 + mK2 * a1 + mK3 * a2 + mK4);
+
+          rResult = Math.min(255, Math.max(0, rResult));
+          gResult = Math.min(255, Math.max(0, gResult));
+          bResult = Math.min(255, Math.max(0, bResult));
+          aResult = Math.min(255, Math.max(0, aResult));
+
+          int pixel = (aResult << 24) | (rResult << 16) | (gResult << 8) | bResult;
+          pixels1[i] = pixel;
+        }
+
+        result.setPixels(
+            pixels1, 0, result.getWidth(), 0, 0, result.getWidth(), result.getHeight());
+      }
+    }
+
+    if (this.mOperator != FilterProperties.FeCompositeOperator.ARITHMETIC) {
+      canvas.drawBitmap(in2, 0, 0, paint);
+    }
+
+    return result;
+  }
+}

android/src/main/java/com/horcrux/svg/FilterProperties.java

@@ -144,4 +144,41 @@ public String toString() {
       return type;
     }
   }
+
+  enum FeCompositeOperator {
+    OVER("over"),
+    IN("in"),
+    OUT("out"),
+    ATOP("atop"),
+    XOR("xor"),
+    ARITHMETIC("arithmetic"),
+    ;
+
+    private final String type;
+
+    FeCompositeOperator(String type) {
+      this.type = type;
+    }
+
+    static FeCompositeOperator getEnum(String strVal) {
+      if (!typeToEnum.containsKey(strVal)) {
+        throw new IllegalArgumentException("Unknown String Value: " + strVal);
+      }
+      return typeToEnum.get(strVal);
+    }
+
+    private static final Map<String, FeCompositeOperator> typeToEnum = new HashMap<>();
+
+    static {
+      for (final FeCompositeOperator en : FeCompositeOperator.values()) {
+        typeToEnum.put(en.type, en);
+      }
+    }
+
+    @Nonnull
+    @Override
+    public String toString() {
+      return type;
+    }
+  }
 }

android/src/main/java/com/horcrux/svg/RenderableViewManager.java

@@ -107,6 +107,8 @@
 import com.facebook.react.viewmanagers.RNSVGFeBlendManagerInterface;
 import com.facebook.react.viewmanagers.RNSVGFeColorMatrixManagerDelegate;
 import com.facebook.react.viewmanagers.RNSVGFeColorMatrixManagerInterface;
+import com.facebook.react.viewmanagers.RNSVGFeCompositeManagerDelegate;
+import com.facebook.react.viewmanagers.RNSVGFeCompositeManagerInterface;
 import com.facebook.react.viewmanagers.RNSVGFeFloodManagerDelegate;
 import com.facebook.react.viewmanagers.RNSVGFeFloodManagerInterface;
 import com.facebook.react.viewmanagers.RNSVGFeGaussianBlurManagerDelegate;
@@ -595,6 +597,7 @@ protected enum SVGClass {
     RNSVGFilter,
     RNSVGFeBlend,
     RNSVGFeColorMatrix,
+    RNSVGFeComposite,
     RNSVGFeFlood,
     RNSVGFeGaussianBlur,
     RNSVGFeMerge,
@@ -649,6 +652,8 @@ protected VirtualView createViewInstance(@Nonnull ThemedReactContext reactContex
         return new FeBlendView(reactContext);
       case RNSVGFeColorMatrix:
         return new FeColorMatrixView(reactContext);
+      case RNSVGFeComposite:
+        return new FeCompositeView(reactContext);
       case RNSVGFeFlood:
         return new FeFloodView(reactContext);
       case RNSVGFeGaussianBlur:
@@ -1640,6 +1645,51 @@ public void setValues(FeColorMatrixView node, @Nullable ReadableArray values) {
     }
   }
 
+  static class FeCompositeManager extends FilterPrimitiveManager<FeCompositeView>
+      implements RNSVGFeCompositeManagerInterface<FeCompositeView> {
+    FeCompositeManager() {
+      super(SVGClass.RNSVGFeComposite);
+      mDelegate = new RNSVGFeCompositeManagerDelegate(this);
+    }
+
+    public static final String REACT_CLASS = "RNSVGFeComposite";
+
+    @ReactProp(name = "in1")
+    public void setIn1(FeCompositeView node, String in1) {
+      node.setIn1(in1);
+    }
+
+    @ReactProp(name = "in2")
+    public void setIn2(FeCompositeView node, String in2) {
+      node.setIn2(in2);
+    }
+
+    @ReactProp(name = "operator1")
+    public void setOperator1(FeCompositeView node, String operator) {
+      node.setOperator(operator);
+    }
+
+    @ReactProp(name = "k1")
+    public void setK1(FeCompositeView node, float value) {
+      node.setK1(value);
+    }
+
+    @ReactProp(name = "k2")
+    public void setK2(FeCompositeView node, float value) {
+      node.setK2(value);
+    }
+
+    @ReactProp(name = "k3")
+    public void setK3(FeCompositeView node, float value) {
+      node.setK3(value);
+    }
+
+    @ReactProp(name = "k4")
+    public void setK4(FeCompositeView node, float value) {
+      node.setK4(value);
+    }
+  }
+
   static class FeFloodManager extends FilterPrimitiveManager<FeFloodView>
       implements RNSVGFeFloodManagerInterface<FeFloodView> {
     FeFloodManager() {

android/src/main/java/com/horcrux/svg/SvgPackage.java

@@ -232,6 +232,15 @@ public NativeModule get() {
                   return new FeColorMatrixManager();
                 }
               }));
+      specs.put(
+          FeCompositeManager.REACT_CLASS,
+          ModuleSpec.viewManagerSpec(
+              new Provider<NativeModule>() {
+                @Override
+                public NativeModule get() {
+                  return new FeCompositeManager();
+                }
+              }));
       specs.put(
           FeFloodManager.REACT_CLASS,
           ModuleSpec.viewManagerSpec(

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGFeCompositeManagerDelegate.java

@@ -0,0 +1,65 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.DynamicFromObject;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.BaseViewManagerInterface;
+
+public class RNSVGFeCompositeManagerDelegate<T extends View, U extends BaseViewManagerInterface<T> & RNSVGFeCompositeManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public RNSVGFeCompositeManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "x":
+        mViewManager.setX(view, new DynamicFromObject(value));
+        break;
+      case "y":
+        mViewManager.setY(view, new DynamicFromObject(value));
+        break;
+      case "width":
+        mViewManager.setWidth(view, new DynamicFromObject(value));
+        break;
+      case "height":
+        mViewManager.setHeight(view, new DynamicFromObject(value));
+        break;
+      case "result":
+        mViewManager.setResult(view, value == null ? null : (String) value);
+        break;
+      case "in1":
+        mViewManager.setIn1(view, value == null ? null : (String) value);
+        break;
+      case "in2":
+        mViewManager.setIn2(view, value == null ? null : (String) value);
+        break;
+      case "operator1":
+        mViewManager.setOperator1(view, (String) value);
+        break;
+      case "k1":
+        mViewManager.setK1(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
+      case "k2":
+        mViewManager.setK2(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
+      case "k3":
+        mViewManager.setK3(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
+      case "k4":
+        mViewManager.setK4(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}

android/src/paper/java/com/facebook/react/viewmanagers/RNSVGFeCompositeManagerInterface.java

@@ -0,0 +1,29 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.bridge.Dynamic;
+
+public interface RNSVGFeCompositeManagerInterface<T extends View> {
+  void setX(T view, Dynamic value);
+  void setY(T view, Dynamic value);
+  void setWidth(T view, Dynamic value);
+  void setHeight(T view, Dynamic value);
+  void setResult(T view, @Nullable String value);
+  void setIn1(T view, @Nullable String value);
+  void setIn2(T view, @Nullable String value);
+  void setOperator1(T view, @Nullable String value);
+  void setK1(T view, float value);
+  void setK2(T view, float value);
+  void setK3(T view, float value);
+  void setK4(T view, float value);
+}

apple/Filters/MetalCI/RNSVGArithmeticFilter.h

@@ -0,0 +1,11 @@
+#import "RNSVGCustomFilter.h"
+
+@interface RNSVGArithmeticFilter : RNSVGCustomFilter {
+  CIImage *inputImage2;
+  NSNumber *inputK1;
+  NSNumber *inputK2;
+  NSNumber *inputK3;
+  NSNumber *inputK4;
+}
+
+@end