Move SVG color to a separate SVGBrush struct

Author: MatiPl01

apps/fabric-example/ios/Podfile.lock

@@ -3187,7 +3187,7 @@ SPEC CHECKSUMS:
   RNCClipboard: 4b58c780f63676367640f23c8e114e9bd0cf86ac
   RNCMaskedView: 5ef8c95cbab95334a32763b72896a7b7d07e6299
   RNGestureHandler: f1dd7f92a0faa2868a919ab53bb9d66eb4ebfcf5
-  RNReanimated: 3b47c33660454c6f9700b463e92daa282030866a
+  RNReanimated: 97ebf4d3c76929b6b0f866cfbd41c49b3a0d2dbf
   RNScreens: 6ced6ae8a526512a6eef6e28c2286e1fc2d378c3
   RNSVG: 287504b73fa0e90a605225aa9f852a86d5461e84
   RNWorklets: 991f94e4fa31fc20853e74d5d987426f8580cb0d

packages/react-native-reanimated/Common/cpp/reanimated/CSS/InterpolatorRegistry.cpp

@@ -13,6 +13,7 @@
 #include <reanimated/CSS/common/transforms/TransformMatrix2D.h>
 #include <reanimated/CSS/common/values/complex/CSSBoxShadow.h>
 
+#include <reanimated/CSS/svg/values/SVGBrush.h>
 #include <reanimated/CSS/svg/values/SVGLength.h>
 #include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
 
@@ -31,8 +32,8 @@ namespace reanimated::css {
 namespace {
 
 // Private implementation details
-const auto BLACK = CSSColor(0, 0, 0, 255);
-const auto TRANSPARENT = CSSColor::Transparent;
+const std::array<uint8_t, 4> BLACK = {0, 0, 0, 255};
+const std::array<uint8_t, 4> TRANSPARENT = {0, 0, 0, 0};
 
 InterpolatorFactoriesRecord mergeInterpolators(
     const std::vector<InterpolatorFactoriesRecord> &maps) {
@@ -275,17 +276,17 @@ const InterpolatorFactoriesRecord IMAGE_INTERPOLATORS = mergeInterpolators(
 // =================
 
 const InterpolatorFactoriesRecord SVG_COLOR_INTERPOLATORS = {
-    {"color", value<CSSColor>(BLACK)},
+    {"color", value<SVGBrush>(BLACK)},
 };
 
 const InterpolatorFactoriesRecord SVG_FILL_INTERPOLATORS = {
-    {"fill", value<CSSColor>(BLACK)},
+    {"fill", value<SVGBrush>(BLACK)},
     {"fillOpacity", value<CSSDouble>(1)},
     {"fillRule", value<CSSInteger>(0)},
 };
 
 const InterpolatorFactoriesRecord SVG_STROKE_INTERPOLATORS = {
-    {"stroke", value<CSSColor>(BLACK)},
+    {"stroke", value<SVGBrush>(BLACK)},
     {"strokeWidth", value<SVGLength>(1)},
     {"strokeOpacity", value<CSSDouble>(1)},
     {"strokeDasharray",

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSColor.cpp

@@ -1,15 +1,23 @@
 #include <reanimated/CSS/common/values/CSSColor.h>
+#include <reanimated/CSS/svg/values/SVGBrush.h>
+
+#include <utility>
 
 namespace reanimated::css {
 
-CSSColor::CSSColor()
-    : channels{0, 0, 0, 0}, colorType(ColorType::Transparent) {}
+// CSSColorBase template implementations
+
+template <ColorTypeEnum TColorType, typename TDerived>
+CSSColorBase<TColorType, TDerived>::CSSColorBase()
+    : channels{0, 0, 0, 0}, colorType(TColorType::Transparent) {}
 
-CSSColor::CSSColor(ColorType colorType)
+template <ColorTypeEnum TColorType, typename TDerived>
+CSSColorBase<TColorType, TDerived>::CSSColorBase(TColorType colorType)
     : channels{0, 0, 0, 0}, colorType(colorType) {}
 
-CSSColor::CSSColor(int64_t numberValue)
-    : channels{0, 0, 0, 0}, colorType(ColorType::Rgba) {
+template <ColorTypeEnum TColorType, typename TDerived>
+CSSColorBase<TColorType, TDerived>::CSSColorBase(int64_t numberValue)
+    : channels{0, 0, 0, 0}, colorType(TColorType::Rgba) {
   uint32_t color;
   // On Android, colors are represented as signed 32-bit integers. In JS, we use
   // a bitwise operation (normalizedColor = normalizedColor | 0x0) to ensure the
@@ -26,130 +34,98 @@ CSSColor::CSSColor(int64_t numberValue)
   channels[1] = (color >> 8) & 0xFF; // Green
   channels[2] = color & 0xFF; // Blue
   channels[3] = (color >> 24) & 0xFF; // Alpha
-  colorType = ColorType::Rgba;
-}
-
-CSSColor::CSSColor(const std::string &colorString)
-    : channels{0, 0, 0, 0}, colorType(ColorType::Transparent) {
-  if (colorString == "transparent") {
-    colorType = ColorType::Transparent;
-  } else if (colorString == "currentColor") {
-    colorType = ColorType::CurrentColor;
-  } else {
-    throw std::invalid_argument(
-        "[Reanimated] CSSColor: Invalid string value: " + colorString);
-  }
+  colorType = TColorType::Rgba;
 }
 
-CSSColor::CSSColor(const uint8_t r, const uint8_t g, const uint8_t b)
-    : channels{r, g, b, 255}, colorType(ColorType::Rgba) {}
-
-CSSColor::CSSColor(
+template <ColorTypeEnum TColorType, typename TDerived>
+CSSColorBase<TColorType, TDerived>::CSSColorBase(
     const uint8_t r,
     const uint8_t g,
     const uint8_t b,
     const uint8_t a)
-    : channels{r, g, b, a}, colorType(ColorType::Rgba) {}
+    : channels{r, g, b, a}, colorType(TColorType::Rgba) {}
+
+template <ColorTypeEnum TColorType, typename TDerived>
+CSSColorBase<TColorType, TDerived>::CSSColorBase(ColorChannels colorChannels)
+    : channels{std::move(colorChannels)}, colorType(TColorType::Rgba) {}
+
+template <ColorTypeEnum TColorType, typename TDerived>
+TDerived CSSColorBase<TColorType, TDerived>::interpolate(
+    double progress,
+    const TDerived &to) const {
+  ColorChannels fromChannels = channels;
+  ColorChannels toChannels = to.channels;
+
+  if (colorType == TColorType::Transparent) {
+    fromChannels = {toChannels[0], toChannels[1], toChannels[2], 0};
+  } else if (to.colorType == TColorType::Transparent) {
+    toChannels = {fromChannels[0], fromChannels[1], fromChannels[2], 0};
+  }
+
+  ColorChannels resultChannels;
+  for (size_t i = 0; i < 4; ++i) {
+    const auto &from = fromChannels[i];
+    const auto &to = toChannels[i];
+    // Cast one of operands to double to avoid unsigned int subtraction overflow
+    // (when from > to)
+    const double interpolated =
+        (static_cast<double>(to) - from) * progress + from;
+    resultChannels[i] =
+        static_cast<uint8_t>(std::round(std::clamp(interpolated, 0.0, 255.0)));
+  }
+
+  return TDerived(std::move(resultChannels));
+}
+
+template <ColorTypeEnum TColorType, typename TDerived>
+bool CSSColorBase<TColorType, TDerived>::operator==(
+    const TDerived &other) const {
+  return colorType == other.colorType && channels == other.channels;
+}
 
-CSSColor::CSSColor(const ColorChannels &colorChannels)
-    : channels{colorChannels[0], colorChannels[1], colorChannels[2], colorChannels[3]},
-      colorType(ColorType::Rgba) {}
+// CSSColor implementations
 
 CSSColor::CSSColor(jsi::Runtime &rt, const jsi::Value &jsiValue)
-    : channels{0, 0, 0, 0}, colorType(ColorType::Transparent) {
+    : CSSColorBase<CSSColorType, CSSColor>(CSSColorType::Transparent) {
   if (jsiValue.isNumber()) {
     *this = CSSColor(jsiValue.getNumber());
-  } else if (jsiValue.isString()) {
-    *this = CSSColor(jsiValue.getString(rt).utf8(rt));
-  } else {
-    *this = Transparent;
   }
 }
 
 CSSColor::CSSColor(const folly::dynamic &value)
-    : channels{0, 0, 0, 0}, colorType(ColorType::Transparent) {
+    : CSSColorBase<CSSColorType, CSSColor>(CSSColorType::Transparent) {
   if (value.isNumber()) {
     *this = CSSColor(value.asInt());
-  } else if (value.isString()) {
-    *this = CSSColor(value.getString());
-  } else {
-    *this = Transparent;
   }
 }
 
 bool CSSColor::canConstruct(jsi::Runtime &rt, const jsi::Value &jsiValue) {
   return jsiValue.isNumber() || jsiValue.isUndefined() ||
-      (jsiValue.isString() &&
-       isValidColorString(jsiValue.getString(rt).utf8(rt)));
+      (jsiValue.isString() && jsiValue.getString(rt).utf8(rt) == "transparent");
 }
 
 bool CSSColor::canConstruct(const folly::dynamic &value) {
   return value.isNumber() || value.empty() ||
-      (value.isString() && isValidColorString(value.getString()));
+      (value.isString() && value.getString() == "transparent");
 }
 
 folly::dynamic CSSColor::toDynamic() const {
-  if (colorType == ColorType::Transparent) {
-    return 0x00000000;
+  if (colorType == CSSColorType::Rgba) {
+    return (channels[3] << 24) | (channels[0] << 16) | (channels[1] << 8) |
+        channels[2];
   }
-  return (channels[3] << 24) | (channels[0] << 16) | (channels[1] << 8) |
-      channels[2];
+  return 0;
 }
 
 std::string CSSColor::toString() const {
-  if (colorType == ColorType::Rgba) {
+  if (colorType == CSSColorType::Rgba) {
     return "rgba(" + std::to_string(channels[0]) + "," +
         std::to_string(channels[1]) + "," + std::to_string(channels[2]) + "," +
         std::to_string(channels[3]) + ")";
   }
-  if (colorType == ColorType::CurrentColor) {
-    return "currentColor";
-  }
   return "transparent";
 }
 
-CSSColor CSSColor::interpolate(const double progress, const CSSColor &to)
-    const {
-  if ((to.colorType == ColorType::Transparent &&
-       colorType == ColorType::Transparent) ||
-      colorType == ColorType::CurrentColor ||
-      to.colorType == ColorType::CurrentColor) {
-    return progress < 0.5 ? *this : to;
-  }
-
-  ColorChannels fromChannels = channels;
-  ColorChannels toChannels = to.channels;
-  if (colorType == ColorType::Transparent) {
-    fromChannels = {toChannels[0], toChannels[1], toChannels[2], 0};
-  } else if (to.colorType == ColorType::Transparent) {
-    toChannels = {fromChannels[0], fromChannels[1], fromChannels[2], 0};
-  }
-
-  ColorChannels resultChannels;
-  for (size_t i = 0; i < 4; ++i) {
-    resultChannels[i] =
-        interpolateChannel(fromChannels[i], toChannels[i], progress);
-  }
-
-  return CSSColor(resultChannels);
-}
-
-uint8_t CSSColor::interpolateChannel(
-    const uint8_t from,
-    const uint8_t to,
-    const double progress) {
-  // Cast one of operands to double to avoid unsigned int subtraction overflow
-  // (when from > to)
-  double interpolated = (static_cast<double>(to) - from) * progress + from;
-  return static_cast<uint8_t>(std::round(std::clamp(interpolated, 0.0, 255.0)));
-}
-
-bool CSSColor::operator==(const CSSColor &other) const {
-  return colorType == other.colorType && channels[0] == other.channels[0] &&
-      channels[1] == other.channels[1] && channels[2] == other.channels[2] &&
-      channels[3] == other.channels[3];
-}
-
 #ifndef NDEBUG
 
 std::ostream &operator<<(std::ostream &os, const CSSColor &colorValue) {
@@ -159,8 +135,8 @@ std::ostream &operator<<(std::ostream &os, const CSSColor &colorValue) {
 
 #endif // NDEBUG
 
-bool CSSColor::isValidColorString(const std::string &colorString) {
-  return colorString == "transparent" || colorString == "currentColor";
-}
+// Explicit template instantiation
+template struct CSSColorBase<CSSColorType, CSSColor>;
+template struct CSSColorBase<SVGBrushType, SVGBrush>;
 
 } // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSColor.h

@@ -7,26 +7,40 @@
 
 namespace reanimated::css {
 
-enum class ColorType {
-  Rgba,
-  Transparent,
-  CurrentColor, // for SVG
+// Base class with common color value functionality
+
+template <typename T>
+concept ColorTypeEnum = std::is_enum_v<T> && requires {
+  T::Rgba;
+  T::Transparent;
 };
 
-struct CSSColor : public CSSSimpleValue<CSSColor> {
+template <ColorTypeEnum TColorType, typename TDerived>
+struct CSSColorBase : public CSSSimpleValue<TDerived> {
   ColorChannels channels;
-  ColorType colorType;
+  TColorType colorType;
+
+  CSSColorBase();
+  explicit CSSColorBase(TColorType colorType);
+  explicit CSSColorBase(int64_t numberValue);
 
-  static const CSSColor Transparent;
+  explicit CSSColorBase(uint8_t r, uint8_t g, uint8_t b, uint8_t a);
+  explicit CSSColorBase(ColorChannels colorChannels);
 
-  CSSColor();
-  explicit CSSColor(ColorType colorType);
-  explicit CSSColor(int64_t numberValue);
-  explicit CSSColor(const std::string &colorString);
+  TDerived interpolate(double progress, const TDerived &to) const override;
 
-  explicit CSSColor(uint8_t r, uint8_t g, uint8_t b);
-  explicit CSSColor(uint8_t r, uint8_t g, uint8_t b, uint8_t a);
-  explicit CSSColor(const ColorChannels &colorChannels);
+  bool operator==(const TDerived &other) const;
+};
+
+// Enum class for color type
+
+enum class CSSColorType {
+  Rgba,
+  Transparent,
+};
+
+struct CSSColor : public CSSColorBase<CSSColorType, CSSColor> {
+  using CSSColorBase<CSSColorType, CSSColor>::CSSColorBase;
 
   explicit CSSColor(jsi::Runtime &rt, const jsi::Value &jsiValue);
   explicit CSSColor(const folly::dynamic &value);
@@ -36,20 +50,10 @@ struct CSSColor : public CSSSimpleValue<CSSColor> {
 
   folly::dynamic toDynamic() const override;
   std::string toString() const override;
-  CSSColor interpolate(double progress, const CSSColor &to) const override;
-
-  static uint8_t interpolateChannel(uint8_t from, uint8_t to, double progress);
-
-  bool operator==(const CSSColor &other) const;
 
 #ifndef NDEBUG
   friend std::ostream &operator<<(std::ostream &os, const CSSColor &colorValue);
 #endif // NDEBUG
-
- private:
-  static bool isValidColorString(const std::string &colorString);
 };
 
-inline const CSSColor CSSColor::Transparent(ColorType::Transparent);
-
 } // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/common/values/CSSValueVariant.cpp

@@ -7,6 +7,7 @@
 #include <reanimated/CSS/common/values/CSSNumber.h>
 #include <reanimated/CSS/common/values/CSSValueVariant.h>
 #include <reanimated/CSS/common/values/complex/CSSBoxShadow.h>
+#include <reanimated/CSS/svg/values/SVGBrush.h>
 #include <reanimated/CSS/svg/values/SVGLength.h>
 #include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
 
@@ -179,5 +180,6 @@ template class CSSValueVariant<CSSDiscreteArray<CSSKeyword>>;
 template class CSSValueVariant<SVGLength>;
 template class CSSValueVariant<SVGLength, CSSKeyword>;
 template class CSSValueVariant<SVGStrokeDashArray, CSSKeyword>;
+template class CSSValueVariant<SVGBrush>;
 
 } // namespace reanimated::css

packages/react-native-reanimated/Common/cpp/reanimated/CSS/interpolation/values/SimpleValueInterpolator.cpp

@@ -11,6 +11,7 @@
 #include <reanimated/CSS/common/values/CSSLength.h>
 #include <reanimated/CSS/common/values/CSSNumber.h>
 #include <reanimated/CSS/common/values/complex/CSSBoxShadow.h>
+#include <reanimated/CSS/svg/values/SVGBrush.h>
 #include <reanimated/CSS/svg/values/SVGLength.h>
 #include <reanimated/CSS/svg/values/SVGStrokeDashArray.h>
 
@@ -66,5 +67,6 @@ template class SimpleValueInterpolator<CSSDiscreteArray<CSSKeyword>>;
 template class SimpleValueInterpolator<SVGLength>;
 template class SimpleValueInterpolator<SVGLength, CSSKeyword>;
 template class SimpleValueInterpolator<SVGStrokeDashArray, CSSKeyword>;
+template class SimpleValueInterpolator<SVGBrush>;
 
 } // namespace reanimated::css