[Fabric] Add support for PlatformColor (#7801)

* [Fabric] Add support for PlatformColor

* format

* Change files

* winui3 build fix

* Add tracking issue for color fork

Author: acoates-ms

change/react-native-windows-b9691dda-2b02-4670-a043-8ecd90525929.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Add support for PlatformColor",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/ActivityIndicatorComponentView.cpp

@@ -46,7 +46,7 @@ void ActivityIndicatorComponentView::updateProps(
   }
 
   if (oldActivityProps.color != newActivityProps.color) {
-    m_element.Foreground(SolidColorBrushFrom(newActivityProps.color));
+    m_element.Foreground(newActivityProps.color.AsWindowsBrush());
   }
 
   m_props = std::static_pointer_cast<facebook::react::ActivityIndicatorViewProps const>(props);

vnext/Microsoft.ReactNative/Fabric/ImageComponentView.cpp

@@ -87,7 +87,7 @@ void ImageComponentView::updateProps(
 
   if (oldImageProps.tintColor != newImageProps.tintColor) {
     if (newImageProps.tintColor) {
-      m_element->TintColor(ColorFromNumber(*(newImageProps.tintColor)));
+      m_element->TintColor(newImageProps.tintColor.AsWindowsColor());
     } else {
       m_element->TintColor(winrt::Colors::Transparent());
     }

vnext/Microsoft.ReactNative/Fabric/ParagraphComponentView.cpp

@@ -48,7 +48,7 @@ void ParagraphComponentView::updateProps(
 
   if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
     if (newViewProps.textAttributes.foregroundColor)
-      m_element.Foreground(SolidColorBrushFrom(newViewProps.textAttributes.foregroundColor));
+      m_element.Foreground(newViewProps.textAttributes.foregroundColor.AsWindowsBrush());
     else
       m_element.ClearValue(::xaml::Controls::TextBlock::ForegroundProperty());
   }

vnext/Microsoft.ReactNative/Fabric/ViewComponentView.cpp

@@ -48,15 +48,15 @@ void ViewComponentView::updateProps(
     auto color = *newViewProps.backgroundColor;
 
     if (newViewProps.backgroundColor) {
-      m_panel.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
+      m_panel.ViewBackground(newViewProps.backgroundColor.AsWindowsBrush());
     } else {
       m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
     }
   }
 
   if (oldViewProps.borderColors != newViewProps.borderColors) {
     if (newViewProps.borderColors.all) {
-      m_panel.BorderBrush(SolidColorBrushFrom(*newViewProps.borderColors.all));
+      m_panel.BorderBrush(newViewProps.borderColors.all->AsWindowsBrush());
     } else {
       m_panel.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty());
     }

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "Color.h"
+#include <Utils/ValueUtils.h>
+
+namespace facebook {
+namespace react {
+
+xaml::Media::Brush SharedColor::AsWindowsBrush() const {
+  if (!m_color)
+    return nullptr;
+  if (!m_color->m_platformColor.empty()) {
+    return Microsoft::ReactNative::BrushFromColorObject(winrt::to_hstring(m_color->m_platformColor));
+  }
+  return xaml::Media::SolidColorBrush(m_color->m_color);
+}
+
+SharedColor colorFromComponents(ColorComponents components) {
+  float ratio = 255;
+  return SharedColor(ui::ColorHelper::FromArgb(
+      (int)round(components.alpha * ratio) & 0xff,
+      (int)round(components.red * ratio) & 0xff,
+      (int)round(components.green * ratio) & 0xff,
+      (int)round(components.blue * ratio) & 0xff));
+}
+
+ColorComponents colorComponentsFromColor(SharedColor sharedColor) {
+  float ratio = 255;
+  auto color = sharedColor.AsWindowsColor();
+  return ColorComponents{
+      (float)color.R / ratio, (float)color.G / ratio, (float)color.B / ratio, (float)color.A / ratio};
+}
+
+SharedColor clearColor() {
+  static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 0});
+  return color;
+}
+
+SharedColor blackColor() {
+  static SharedColor color = colorFromComponents(ColorComponents{0, 0, 0, 1});
+  return color;
+}
+
+SharedColor whiteColor() {
+  static SharedColor color = colorFromComponents(ColorComponents{1, 1, 1, 1});
+  return color;
+}
+
+} // namespace react
+} // namespace facebook

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Color.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Float.h

@@ -0,0 +1,5 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+// RN has some weird include directory redirections..this forwards the include to the right place
+#include <react/renderer/graphics/platform/cxx/react/renderer/graphics/Float.h>

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/conversions.h

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <better/map.h>
+#include <folly/dynamic.h>
+#include <glog/logging.h>
+#include <react/debug/react_native_assert.h>
+#include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Geometry.h>
+
+namespace facebook {
+namespace react {
+
+#pragma mark - Color
+
+inline void fromRawValue(const RawValue &value, SharedColor &result) {
+  float red = 0;
+  float green = 0;
+  float blue = 0;
+  float alpha = 0;
+
+  if (value.hasType<int>()) {
+    auto argb = (int64_t)value;
+    auto ratio = 255.f;
+    alpha = ((argb >> 24) & 0xFF) / ratio;
+    red = ((argb >> 16) & 0xFF) / ratio;
+    green = ((argb >> 8) & 0xFF) / ratio;
+    blue = (argb & 0xFF) / ratio;
+  } else if (value.hasType<std::vector<float>>()) {
+    auto items = (std::vector<float>)value;
+    auto length = items.size();
+    react_native_assert(length == 3 || length == 4);
+    red = items.at(0);
+    green = items.at(1);
+    blue = items.at(2);
+    alpha = length == 4 ? items.at(3) : 1.0f;
+    // [Windows - Add support for windowsBrush colors (PlatformColor)
+  } else if (value.hasType<better::map<std::string, std::string>>()) {
+    auto map = (better::map<std::string, std::string>)value;
+    for (const auto &pair : map) {
+      if (pair.first == "windowsbrush") {
+        result = SharedColor(std::string(pair.second));
+        return;
+      }
+    }
+  }
+  // Windows]
+
+  result = colorFromComponents({red, green, blue, alpha});
+}
+
+#ifdef ANDROID
+
+inline folly::dynamic toDynamic(const SharedColor &color) {
+  ColorComponents components = colorComponentsFromColor(color);
+  auto ratio = 255.f;
+  return (
+      ((int)round(components.alpha * ratio) & 0xff) << 24 | ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 | ((int)round(components.blue * ratio) & 0xff));
+}
+
+inline int toMapBuffer(const SharedColor &color) {
+  ColorComponents components = colorComponentsFromColor(color);
+  auto ratio = 255.f;
+  return (
+      ((int)round(components.alpha * ratio) & 0xff) << 24 | ((int)round(components.red * ratio) & 0xff) << 16 |
+      ((int)round(components.green * ratio) & 0xff) << 8 | ((int)round(components.blue * ratio) & 0xff));
+}
+
+#endif
+
+inline std::string toString(const SharedColor &value) {
+  ColorComponents components = colorComponentsFromColor(value);
+  auto ratio = 255.f;
+  return "rgba(" + folly::to<std::string>(round(components.red * ratio)) + ", " +
+      folly::to<std::string>(round(components.green * ratio)) + ", " +
+      folly::to<std::string>(round(components.blue * ratio)) + ", " +
+      folly::to<std::string>(round(components.alpha * ratio)) + ")";
+}
+
+#pragma mark - Geometry
+
+inline void fromRawValue(const RawValue &value, Point &result) {
+  if (value.hasType<better::map<std::string, Float>>()) {
+    auto map = (better::map<std::string, Float>)value;
+    for (const auto &pair : map) {
+      if (pair.first == "x") {
+        result.x = pair.second;
+      } else if (pair.first == "y") {
+        result.y = pair.second;
+      }
+    }
+    return;
+  }
+
+  react_native_assert(value.hasType<std::vector<Float>>());
+  if (value.hasType<std::vector<Float>>()) {
+    auto array = (std::vector<Float>)value;
+    react_native_assert(array.size() == 2);
+    if (array.size() >= 2) {
+      result = {array.at(0), array.at(1)};
+    } else {
+      result = {0, 0};
+      LOG(ERROR) << "Unsupported Point vector size: " << array.size();
+    }
+  } else {
+    LOG(ERROR) << "Unsupported Point type";
+  }
+}
+
+inline void fromRawValue(const RawValue &value, Size &result) {
+  if (value.hasType<better::map<std::string, Float>>()) {
+    auto map = (better::map<std::string, Float>)value;
+    for (const auto &pair : map) {
+      if (pair.first == "width") {
+        result.width = pair.second;
+      } else if (pair.first == "height") {
+        result.height = pair.second;
+      } else {
+        LOG(ERROR) << "Unsupported Size map key: " << pair.first;
+        react_native_assert(false);
+      }
+    }
+    return;
+  }
+
+  react_native_assert(value.hasType<std::vector<Float>>());
+  if (value.hasType<std::vector<Float>>()) {
+    auto array = (std::vector<Float>)value;
+    react_native_assert(array.size() == 2);
+    if (array.size() >= 2) {
+      result = {array.at(0), array.at(1)};
+    } else {
+      result = {0, 0};
+      LOG(ERROR) << "Unsupported Size vector size: " << array.size();
+    }
+  } else {
+    LOG(ERROR) << "Unsupported Size type";
+  }
+}
+
+inline void fromRawValue(const RawValue &value, EdgeInsets &result) {
+  if (value.hasType<Float>()) {
+    auto number = (Float)value;
+    result = {number, number, number, number};
+  }
+
+  if (value.hasType<better::map<std::string, Float>>()) {
+    auto map = (better::map<std::string, Float>)value;
+    for (const auto &pair : map) {
+      if (pair.first == "top") {
+        result.top = pair.second;
+      } else if (pair.first == "left") {
+        result.left = pair.second;
+      } else if (pair.first == "bottom") {
+        result.bottom = pair.second;
+      } else if (pair.first == "right") {
+        result.right = pair.second;
+      } else {
+        LOG(ERROR) << "Unsupported EdgeInsets map key: " << pair.first;
+        react_native_assert(false);
+      }
+    }
+    return;
+  }
+
+  react_native_assert(value.hasType<std::vector<Float>>());
+  if (value.hasType<std::vector<Float>>()) {
+    auto array = (std::vector<Float>)value;
+    react_native_assert(array.size() == 4);
+    if (array.size() >= 4) {
+      result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+    } else {
+      result = {0, 0, 0, 0};
+      LOG(ERROR) << "Unsupported EdgeInsets vector size: " << array.size();
+    }
+  } else {
+    LOG(ERROR) << "Unsupported EdgeInsets type";
+  }
+}
+
+inline void fromRawValue(const RawValue &value, CornerInsets &result) {
+  if (value.hasType<Float>()) {
+    auto number = (Float)value;
+    result = {number, number, number, number};
+    return;
+  }
+
+  if (value.hasType<better::map<std::string, Float>>()) {
+    auto map = (better::map<std::string, Float>)value;
+    for (const auto &pair : map) {
+      if (pair.first == "topLeft") {
+        result.topLeft = pair.second;
+      } else if (pair.first == "topRight") {
+        result.topRight = pair.second;
+      } else if (pair.first == "bottomLeft") {
+        result.bottomLeft = pair.second;
+      } else if (pair.first == "bottomRight") {
+        result.bottomRight = pair.second;
+      } else {
+        LOG(ERROR) << "Unsupported CornerInsets map key: " << pair.first;
+        react_native_assert(false);
+      }
+    }
+    return;
+  }
+
+  react_native_assert(value.hasType<std::vector<Float>>());
+  if (value.hasType<std::vector<Float>>()) {
+    auto array = (std::vector<Float>)value;
+    react_native_assert(array.size() == 4);
+    if (array.size() >= 4) {
+      result = {array.at(0), array.at(1), array.at(2), array.at(3)};
+    } else {
+      LOG(ERROR) << "Unsupported CornerInsets vector size: " << array.size();
+    }
+  }
+
+  // Error case - we should only here if all other supported cases fail
+  // In dev we would crash on assert before this point
+  result = {0, 0, 0, 0};
+  LOG(ERROR) << "Unsupported CornerInsets type";
+}
+
+inline std::string toString(const Point &point) {
+  return "{" + folly::to<std::string>(point.x) + ", " + folly::to<std::string>(point.y) + "}";
+}
+
+inline std::string toString(const Size &size) {
+  return "{" + folly::to<std::string>(size.width) + ", " + folly::to<std::string>(size.height) + "}";
+}
+
+inline std::string toString(const Rect &rect) {
+  return "{" + toString(rect.origin) + ", " + toString(rect.size) + "}";
+}
+
+inline std::string toString(const EdgeInsets &edgeInsets) {
+  return "{" + folly::to<std::string>(edgeInsets.left) + ", " + folly::to<std::string>(edgeInsets.top) + ", " +
+      folly::to<std::string>(edgeInsets.right) + ", " + folly::to<std::string>(edgeInsets.bottom) + "}";
+}
+
+inline std::string toString(const CornerInsets &cornerInsets) {
+  return "{" + folly::to<std::string>(cornerInsets.topLeft) + ", " + folly::to<std::string>(cornerInsets.topRight) +
+      ", " + folly::to<std::string>(cornerInsets.bottomLeft) + ", " + folly::to<std::string>(cornerInsets.bottomRight) +
+      "}";
+}
+
+} // namespace react
+} // namespace facebook