Attempt to introduce root

Differential Revision: D65085733

packages/react-native/ReactCommon/react/nativemodule/intersectionobserver/NativeIntersectionObserver.cpp

@@ -31,11 +31,18 @@ void NativeIntersectionObserver::observe(
   auto intersectionObserverId = options.intersectionObserverId;
   auto shadowNode =
       shadowNodeFromValue(runtime, std::move(options.targetShadowNode));
+  auto observationRootShadowNode = options.rootShadowNode.isObject()
+      ? shadowNodeFromValue(runtime, std::move(options.rootShadowNode))
+      : nullptr;
   auto thresholds = options.thresholds;
   auto& uiManager = getUIManagerFromRuntime(runtime);
 
   intersectionObserverManager_.observe(
-      intersectionObserverId, shadowNode, thresholds, uiManager);
+      intersectionObserverId,
+      observationRootShadowNode,
+      shadowNode,
+      thresholds,
+      uiManager);
 }
 
 void NativeIntersectionObserver::unobserve(

packages/react-native/ReactCommon/react/nativemodule/intersectionobserver/NativeIntersectionObserver.h

@@ -25,7 +25,9 @@ using NativeIntersectionObserverObserveOptions =
         // targetShadowNode
         jsi::Object,
         // thresholds
-        std::vector<Float>>;
+        std::vector<Float>,
+        // rootShadowNode
+        jsi::Value>;
 
 template <>
 struct Bridging<NativeIntersectionObserverObserveOptions>

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.cpp

@@ -16,15 +16,23 @@ namespace facebook::react {
 
 IntersectionObserver::IntersectionObserver(
     IntersectionObserverObserverId intersectionObserverId,
+    ShadowNode::Shared observationRootShadowNode,
     ShadowNode::Shared targetShadowNode,
     std::vector<Float> thresholds)
     : intersectionObserverId_(intersectionObserverId),
+      observationRootShadowNode_(std::move(observationRootShadowNode)),
       targetShadowNode_(std::move(targetShadowNode)),
       thresholds_(std::move(thresholds)) {}
 
-static Rect getRootBoundingRect(
-    const LayoutableShadowNode& layoutableRootShadowNode) {
-  auto layoutMetrics = layoutableRootShadowNode.getLayoutMetrics();
+static Rect getRootNodeBoundingRect(const RootShadowNode& rootShadowNode) {
+  const auto layoutableRootShadowNode =
+      dynamic_cast<const LayoutableShadowNode*>(&rootShadowNode);
+
+  react_native_assert(
+      layoutableRootShadowNode != nullptr &&
+      "RootShadowNode instances must always inherit from LayoutableShadowNode.");
+
+  auto layoutMetrics = layoutableRootShadowNode->getLayoutMetrics();
 
   if (layoutMetrics == EmptyLayoutMetrics ||
       layoutMetrics.displayType == DisplayType::None) {
@@ -33,7 +41,7 @@ static Rect getRootBoundingRect(
 
   // Apply the transform to translate the root view to its location in the
   // viewport.
-  return layoutMetrics.frame * layoutableRootShadowNode.getTransform();
+  return layoutMetrics.frame * layoutableRootShadowNode->getTransform();
 }
 
 static Rect getTargetBoundingRect(
@@ -45,10 +53,24 @@ static Rect getTargetBoundingRect(
   return layoutMetrics == EmptyLayoutMetrics ? Rect{} : layoutMetrics.frame;
 }
 
-static Rect getClippedTargetBoundingRect(
-    const ShadowNodeFamily::AncestorList& targetAncestors) {
+static Rect getRootBoundingRect(
+    const ShadowNode::Shared& observationRootShadowNode,
+    const RootShadowNode& rootShadowNode,
+    const ShadowNodeFamily::AncestorList& rootAncestors) {
+  if (observationRootShadowNode == nullptr) {
+    return getRootNodeBoundingRect(rootShadowNode);
+  }
+
+  // Absolute coordinates of the root
+  auto rootBoundingRect = getTargetBoundingRect(rootAncestors);
+
+  return rootBoundingRect;
+}
+
+static Rect getClippedBoundingRect(
+    const ShadowNodeFamily::AncestorList& ancestors) {
   auto layoutMetrics = LayoutableShadowNode::computeRelativeLayoutMetrics(
-      targetAncestors,
+      ancestors,
       {/* .includeTransform = */ true,
        /* .includeViewportOffset = */ true,
        /* .applyParentClipping = */ true});
@@ -60,6 +82,7 @@ static Rect getClippedTargetBoundingRect(
 // https://w3c.github.io/IntersectionObserver/#compute-the-intersection
 static Rect computeIntersection(
     const Rect& rootBoundingRect,
+    const ShadowNodeFamily::AncestorList& rootAncestors,
     const Rect& targetBoundingRect,
     const ShadowNodeFamily::AncestorList& targetAncestors) {
   auto absoluteIntersectionRect =
@@ -79,10 +102,12 @@ static Rect computeIntersection(
 
   // Coordinates of the target after clipping the parts hidden by a parent
   // (e.g.: in scroll views, or in views with a parent with overflow: hidden)
-  auto clippedTargetBoundingRect =
-      getClippedTargetBoundingRect(targetAncestors);
+  auto clippedRootBoundingRect = rootAncestors.empty()
+      ? rootBoundingRect
+      : getClippedBoundingRect(rootAncestors);
+  auto clippedTargetBoundingRect = getClippedBoundingRect(targetAncestors);
 
-  return Rect::intersect(rootBoundingRect, clippedTargetBoundingRect);
+  return Rect::intersect(clippedRootBoundingRect, clippedTargetBoundingRect);
 }
 
 // Partially equivalent to
@@ -91,24 +116,29 @@ std::optional<IntersectionObserverEntry>
 IntersectionObserver::updateIntersectionObservation(
     const RootShadowNode& rootShadowNode,
     double time) {
-  const auto layoutableRootShadowNode =
-      dynamic_cast<const LayoutableShadowNode*>(&rootShadowNode);
-
-  react_native_assert(
-      layoutableRootShadowNode != nullptr &&
-      "RootShadowNode instances must always inherit from LayoutableShadowNode.");
+  auto rootAncestors = observationRootShadowNode_ == nullptr
+      ? ShadowNodeFamily::AncestorList{}
+      : observationRootShadowNode_->getFamily().getAncestors(rootShadowNode);
 
   auto targetAncestors =
       targetShadowNode_->getFamily().getAncestors(rootShadowNode);
 
   // Absolute coordinates of the root
-  auto rootBoundingRect = getRootBoundingRect(*layoutableRootShadowNode);
+  auto rootBoundingRect = getRootBoundingRect(
+      observationRootShadowNode_, rootShadowNode, rootAncestors);
 
   // Absolute coordinates of the target
   auto targetBoundingRect = getTargetBoundingRect(targetAncestors);
 
+  if ((observationRootShadowNode_ != nullptr && rootAncestors.empty()) ||
+      targetAncestors.empty()) {
+    // If observation root is not a descendant of root
+    // Or target is not a descendant of observation root
+    return setNotIntersectingState(rootBoundingRect, targetBoundingRect, time);
+  }
+
   auto intersectionRect = computeIntersection(
-      rootBoundingRect, targetBoundingRect, targetAncestors);
+      rootBoundingRect, rootAncestors, targetBoundingRect, targetAncestors);
 
   Float targetBoundingRectArea =
       targetBoundingRect.size.width * targetBoundingRect.size.height;

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.h

@@ -34,6 +34,7 @@ class IntersectionObserver {
  public:
   IntersectionObserver(
       IntersectionObserverObserverId intersectionObserverId,
+      ShadowNode::Shared observationRootShadowNode,
       ShadowNode::Shared targetShadowNode,
       std::vector<Float> thresholds);
 
@@ -74,6 +75,7 @@ class IntersectionObserver {
       double time);
 
   IntersectionObserverObserverId intersectionObserverId_;
+  ShadowNode::Shared observationRootShadowNode_;
   ShadowNode::Shared targetShadowNode_;
   std::vector<Float> thresholds_;
   mutable IntersectionObserverState state_ =

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserverManager.cpp

@@ -17,6 +17,7 @@ IntersectionObserverManager::IntersectionObserverManager() = default;
 
 void IntersectionObserverManager::observe(
     IntersectionObserverObserverId intersectionObserverId,
+    const ShadowNode::Shared& observationRootShadowNode,
     const ShadowNode::Shared& shadowNode,
     std::vector<Float> thresholds,
     const UIManager& uiManager) {
@@ -34,7 +35,10 @@ void IntersectionObserverManager::observe(
 
     auto& observers = observersBySurfaceId_[surfaceId];
     observers.emplace_back(IntersectionObserver{
-        intersectionObserverId, shadowNode, std::move(thresholds)});
+        intersectionObserverId,
+        observationRootShadowNode,
+        shadowNode,
+        std::move(thresholds)});
     observer = &observers.back();
   }
 

packages/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserverManager.h

@@ -22,6 +22,7 @@ class IntersectionObserverManager final : public UIManagerMountHook {
 
   void observe(
       IntersectionObserverObserverId intersectionObserverId,
+      const ShadowNode::Shared& observationRootShadowNode,
       const ShadowNode::Shared& shadowNode,
       std::vector<Float> thresholds,
       const UIManager& uiManager);

packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserver.js

@@ -22,7 +22,7 @@ export type IntersectionObserverCallback = (
 ) => mixed;
 
 type IntersectionObserverInit = {
-  // root?: ReactNativeElement, // This option exists on the Web but it's not currently supported in React Native.
+  root?: ?ReactNativeElement,
   // rootMargin?: string, // This option exists on the Web but it's not currently supported in React Native.
   threshold?: number | $ReadOnlyArray<number>,
 };
@@ -51,6 +51,7 @@ export default class IntersectionObserver {
   _thresholds: $ReadOnlyArray<number>;
   _observationTargets: Set<ReactNativeElement> = new Set();
   _intersectionObserverId: ?IntersectionObserverId;
+  _root: ReactNativeElement | null;
 
   constructor(
     callback: IntersectionObserverCallback,
@@ -68,13 +69,6 @@ export default class IntersectionObserver {
       );
     }
 
-    // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
-    if (options?.root != null) {
-      throw new TypeError(
-        "Failed to construct 'IntersectionObserver': root is not supported",
-      );
-    }
-
     // $FlowExpectedError[prop-missing] it's not typed in React Native but exists on Web.
     if (options?.rootMargin != null) {
       throw new TypeError(
@@ -84,6 +78,7 @@ export default class IntersectionObserver {
 
     this._callback = callback;
     this._thresholds = normalizeThresholds(options?.threshold);
+    this._root = validateRoot(options?.root ?? null);
   }
 
   /**
@@ -95,7 +90,7 @@ export default class IntersectionObserver {
    * NOTE: This cannot currently be configured and `root` is always `null`.
    */
   get root(): ReactNativeElement | null {
-    return null;
+    return this._root;
   }
 
   /**
@@ -149,6 +144,7 @@ export default class IntersectionObserver {
 
     const didStartObserving = IntersectionObserverManager.observe({
       intersectionObserverId: this._getOrCreateIntersectionObserverId(),
+      root: this._root,
       target,
     });
 
@@ -217,6 +213,21 @@ export default class IntersectionObserver {
   }
 }
 
+function validateRoot(
+  root: ReactNativeElement | null,
+): ReactNativeElement | null {
+  if (root == null) {
+    return null;
+  }
+
+  if (!(root instanceof ReactNativeElement)) {
+    throw new TypeError(
+      "Failed to construct 'IntersectionObserver': Failed to read the 'root' property from 'IntersectionObserverInit': The provided value is not of type '(null or ReactNativeElement)",
+    );
+  }
+  return root;
+}
+
 /**
  * Converts the user defined `threshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).

packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserverManager.js

@@ -112,9 +112,11 @@ export function unregisterObserver(
  */
 export function observe({
   intersectionObserverId,
+  root,
   target,
 }: {
   intersectionObserverId: IntersectionObserverId,
+  root: ?ReactNativeElement,
   target: ReactNativeElement,
 }): boolean {
   if (NativeIntersectionObserver == null) {
@@ -146,6 +148,14 @@ export function observe({
     return false;
   }
 
+  const rootShadowNode = root != null ? getShadowNode(root) : null;
+  if (root != null && rootShadowNode == null) {
+    console.error(
+      'IntersectionObserverManager: could not find shadow node for observation root',
+    );
+    return false;
+  }
+
   // Store the mapping between the instance handle and the target so we can
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
@@ -160,6 +170,7 @@ export function observe({
 
   NativeIntersectionObserver.observe({
     intersectionObserverId,
+    rootShadowNode,
     targetShadowNode,
     thresholds: registeredObserver.observer.thresholds,
   });

packages/react-native/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js

@@ -26,6 +26,7 @@ export type NativeIntersectionObserverObserveOptions = {
   intersectionObserverId: number,
   targetShadowNode: mixed,
   thresholds: $ReadOnlyArray<number>,
+  rootShadowNode?: ?mixed,
 };
 
 export interface Spec extends TurboModule {