fix(layout): use array instead of a merged bounding box to fix issue (#334)

Author: yorkie

fixtures/html/simple.html

@@ -60,7 +60,7 @@
     }
 
     main:hover {
-      background-color: rgba(224, 172, 150, 0.352);
+      background-color: rgba(150, 156, 224, 0.352);
     }
 
     article {

src/client/layout/layout_box.cpp

@@ -12,7 +12,6 @@ namespace client_layout
 
   LayoutBox::LayoutBox(shared_ptr<dom::Node> node)
       : LayoutBoxModelObject(node)
-      , hit_testable_bounding_box_{glm::vec3(0.0f), glm::vec3(0.0f), glm::mat4(1.0f)}
   {
   }
 
@@ -287,21 +286,30 @@ namespace client_layout
 
   bool LayoutBox::mayIntersect(const HitTestResult &r, const HitTestRay &ray, const glm::vec3 &accumulatedOffset) const
   {
-    optional<geometry::BoundingBox> overflowBox = nullopt;
+    vector<geometry::BoundingBox> overflowBoxes;
     if (hasHitTestableOverflow())
     {
       // TODO(yorkie): handle the hit test for the box with overflow.
     }
     else
-      overflowBox = getHitTestableBoundingBox();
+      overflowBoxes = getHitTestableBoundingBoxes();
 
-    if (overflowBox.has_value())
+    if (overflowBoxes.size() > 0)
     {
-      overflowBox->move(accumulatedOffset);
-
-      auto min = overflowBox->minimumWorld;
-      auto max = overflowBox->maximumWorld;
-      return ray.intersectsBoxMinMax(min, max);
+      bool intersects = false;
+      for (auto box : overflowBoxes)
+      {
+        box.move(accumulatedOffset);
+
+        auto min = box.minimumWorld;
+        auto max = box.maximumWorld;
+        if (ray.intersectsBoxMinMax(min, max))
+        {
+          intersects = true;
+          break;
+        }
+      }
+      return intersects;
     }
     else
     {
@@ -329,6 +337,14 @@ namespace client_layout
     return false;
   }
 
+  void LayoutBox::didComputeLayout(const ConstraintSpace &availableSpace)
+  {
+    LayoutBoxModelObject::didComputeLayout(availableSpace);
+
+    // Update the hit-testable bounding box.
+    updateHitTestableBoundingBoxes();
+  }
+
   void LayoutBox::didComputeLayoutOnce(const ConstraintSpace &availableSpace)
   {
     LayoutBoxModelObject::didComputeLayoutOnce(availableSpace);
@@ -340,9 +356,6 @@ namespace client_layout
       getScrollableArea()
         ->updateAfterLayout(formattingContext().liveFragment());
     }
-
-    // Update the hit-testable bounding box.
-    updateHitTestableBoundingBox();
   }
 
   void LayoutBox::updateFromStyle()
@@ -398,31 +411,43 @@ namespace client_layout
     return childBoxes;
   }
 
-  void LayoutBox::updateHitTestableBoundingBox()
+  void LayoutBox::updateHitTestableBoundingBoxes()
   {
-    auto selfBoundingBox = physicalBorderBoxRect();
-    glm::vec3 unionMin = selfBoundingBox.minimumWorld;
-    glm::vec3 unionMax = selfBoundingBox.maximumWorld;
+    hit_testable_bounding_boxes_.clear();
+
+    geometry::BoundingBox mainBoundingBox = physicalBorderBoxRect();
+    hit_testable_bounding_boxes_.push_back(mainBoundingBox);
+
+    glm::vec3 mainMin = mainBoundingBox.minimumWorld;
+    glm::vec3 mainMax = mainBoundingBox.maximumWorld;
 
     for (const auto &childBox : getChildBoxes())
     {
       if (!childBox->visible())
         continue;
 
-      const geometry::BoundingBox &childBoundingBox = childBox->getHitTestableBoundingBox();
-      unionMin.x = min(unionMin.x, childBoundingBox.minimumWorld.x);
-      unionMin.y = min(unionMin.y, childBoundingBox.minimumWorld.y);
-      unionMin.z = min(unionMin.z, childBoundingBox.minimumWorld.z);
-      unionMax.x = max(unionMax.x, childBoundingBox.maximumWorld.x);
-      unionMax.y = max(unionMax.y, childBoundingBox.maximumWorld.y);
-      unionMax.z = max(unionMax.z, childBoundingBox.maximumWorld.z);
+      for (const auto &childBoundingBox : childBox->getHitTestableBoundingBoxes())
+      {
+        // Skip extending if the child box has no size.
+        if (glm::all(glm::epsilonEqual(childBoundingBox.extendSizeWorld,
+                                       glm::vec3(0.0f),
+                                       glm::epsilon<float>())))
+        {
+          continue;
+        }
+
+        // Check if the child box is fully contained in the main bounding box.
+        glm::vec3 childMin = childBoundingBox.minimumWorld;
+        glm::vec3 childMax = childBoundingBox.maximumWorld;
+        if (childMin.x >= mainMin.x && childMin.y >= mainMin.y && childMin.z >= mainMin.z &&
+            childMax.x <= mainMax.x && childMax.y <= mainMax.y && childMax.z <= mainMax.z)
+        {
+          continue; // Child box is fully contained, skip adding it.
+        }
+        hit_testable_bounding_boxes_.push_back(childBoundingBox);
+      }
     }
-    hit_testable_bounding_box_ = geometry::BoundingBox(unionMin, unionMax, glm::mat4(1.0f));
 
-    // Notify the parent box to update its hit-testable bounding box.
-    if (parent() && parent()->isBox())
-    {
-      parentBox()->updateHitTestableBoundingBox();
-    }
+    assert(hit_testable_bounding_boxes_.size() > 0);
   }
 }

src/client/layout/layout_box.hpp

@@ -198,6 +198,7 @@ namespace client_layout
 
   protected:
     virtual bool hitTestChildren(HitTestResult &, const HitTestRay &, const glm::vec3 &accumulatedOffset, HitTestPhase);
+    virtual void didComputeLayout(const ConstraintSpace &) override;
     virtual void didComputeLayoutOnce(const ConstraintSpace &) override;
 
     void updateFromStyle() override;
@@ -213,11 +214,11 @@ namespace client_layout
     {
       return overflow_ != nullptr && overflow_->visualOverflow;
     }
-    inline geometry::BoundingBox getHitTestableBoundingBox() const
+    inline const std::vector<geometry::BoundingBox> &getHitTestableBoundingBoxes() const
     {
-      return hit_testable_bounding_box_;
+      return hit_testable_bounding_boxes_;
     }
-    void updateHitTestableBoundingBox();
+    void updateHitTestableBoundingBoxes();
 
     glm::vec3 computeSize() const;
     vector<std::shared_ptr<LayoutBox>> getChildBoxes() const;
@@ -229,6 +230,6 @@ namespace client_layout
 
   private:
     std::shared_ptr<BoxOverflowModel> overflow_;
-    geometry::BoundingBox hit_testable_bounding_box_;
+    std::vector<geometry::BoundingBox> hit_testable_bounding_boxes_;
   };
 }

src/client/layout/layout_object.cpp

@@ -949,11 +949,15 @@ namespace client_layout
     }
   }
 
-  void LayoutObject::willComputeLayout(const ConstraintSpace &avilableSpace)
+  void LayoutObject::willComputeLayout(const ConstraintSpace &availableSpace)
   {
   }
 
-  void LayoutObject::didComputeLayoutOnce(const ConstraintSpace &avilableSpace)
+  void LayoutObject::didComputeLayout(const ConstraintSpace &availableSpace)
+  {
+  }
+
+  void LayoutObject::didComputeLayoutOnce(const ConstraintSpace &availableSpace)
   {
     if (hasSceneComponent<WebContent>())
     {

src/client/layout/layout_object.hpp

@@ -456,6 +456,7 @@ namespace client_layout
     virtual void sizeDidChange(const Fragment &);
 
     virtual void willComputeLayout(const ConstraintSpace &);
+    virtual void didComputeLayout(const ConstraintSpace &);
     virtual void didComputeLayoutOnce(const ConstraintSpace &);
 
   private:

src/client/layout/layout_view.cpp

@@ -48,14 +48,16 @@ namespace client_layout
   {
   }
 
-  bool LayoutView::computeLayout(const ConstraintSpace &avilableSpace)
+  bool LayoutView::computeLayout(const ConstraintSpace &availableSpace)
   {
     function<void(LayoutObject &, const LayoutObject &)> traverseChildNode =
       [&traverseChildNode](LayoutObject &object, const LayoutObject &parent)
     {
       if (object.isNone())
         return;
-      object.didComputeLayoutOnce(parent.fragment());
+
+      const auto &space = parent.fragment();
+      object.didComputeLayoutOnce(space);
 
       // traverse the children of the block or inline object.
       if (object.isLayoutBlock())
@@ -70,20 +72,25 @@ namespace client_layout
         for (shared_ptr<LayoutObject> child : inlineObject->childrenRef())
           traverseChildNode(*child, *inlineObject); // Just traverse the inline's children but don't compute layout.
       }
+
+      // Finally, call `didComputeLayout` for the object itself.
+      object.didComputeLayout(space);
     };
 
     // TODO(yorkie): support the lifecycle `willComputeLayout`?
 
     // Use taffy to compute the layout.
-    bool r = LayoutBlockFlow::computeLayout(avilableSpace);
-    didComputeLayoutOnce(avilableSpace);
+    bool r = LayoutBlockFlow::computeLayout(availableSpace);
+    didComputeLayoutOnce(availableSpace);
 
     // Traverse the children of the view and call `didComputeLayout` for each child.
     // This lifecycle `didComputeLayout` is used to setup for the next layout computation such as setting the content
     // size for text and replaced elements.
     for (shared_ptr<LayoutObject> child : childrenRef())
       traverseChildNode(*child, *this);
 
+    // Finally, call `didComputeLayout` for the view itself.
+    didComputeLayout(availableSpace);
     return r;
   }