CSS Grid algorithm 1/N: data structures (#57459)

Summary:
Pull Request resolved: #57459

  First in a series of PRs splitting the grid layout algorithm into reviewable chunks. Addresses feedback from react/yoga#1894.

  ## Summary
  - Rename `style/GridTrack.h` to `style/GridTrackSize.h` to match the type it defines and CSS grid naming spec.
  - Remove layout state fields (`baseSize`, `growthLimit`, `infinitelyGrowable`) from `GridTrackSize` — these belong in the algorithm layer, not the style definition
  - Add `algorithm/grid/GridTrack.h`, wraps `GridTrackSize` with layout state via composition (removed inheritance)
  - Add `algorithm/grid/GridItem.h`,  represents a grid item with its resolved position (after autoplacement algorithm) and flags used during track sizing algorithm

X-link: react/yoga#1923

Differential Revision: D110780559

Pulled By: rozele

Author: intergalacticspacehighway

packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp

@@ -8,7 +8,7 @@
 #include <yoga/Yoga.h>
 #include <yoga/debug/AssertFatal.h>
 #include <yoga/node/Node.h>
-#include <yoga/style/GridTrack.h>
+#include <yoga/style/GridTrackSize.h>
 
 using namespace facebook;
 using namespace facebook::yoga;

packages/react-native/ReactCommon/yoga/yoga/algorithm/grid/GridItem.h

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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 <yoga/enums/Dimension.h>
+#include <yoga/node/Node.h>
+#include <cstddef>
+#include <map>
+#include <vector>
+
+namespace facebook::yoga {
+
+// A grid item with its resolved position in the grid. Positions are set by the
+// auto-placement algorithm and consumed by the track sizing algorithm.
+struct GridItem {
+  size_t columnStart;
+  size_t columnEnd;
+  size_t rowStart;
+  size_t rowEnd;
+  yoga::Node* node;
+
+  // Additional offset added to item to align baselines
+  // https://www.w3.org/TR/css-grid-1/#algo-baseline-shims
+  float baselineShim = 0.0f;
+
+  // Flags used for optimizations in track sizing algorithm.
+  bool crossesIntrinsicRow = false;
+  bool crossesIntrinsicColumn = false;
+  bool crossesFlexibleRow = false;
+  bool crossesFlexibleColumn = false;
+
+  GridItem(
+      size_t columnStart,
+      size_t columnEnd,
+      size_t rowStart,
+      size_t rowEnd,
+      yoga::Node* node,
+      float baselineShim = 0.0f)
+      : columnStart(columnStart),
+        columnEnd(columnEnd),
+        rowStart(rowStart),
+        rowEnd(rowEnd),
+        node(node),
+        baselineShim(baselineShim) {}
+
+  // Helper functions used by the track sizing algorithm
+  bool crossesIntrinsicTrack(Dimension dimension) const {
+    return dimension == Dimension::Width ? crossesIntrinsicColumn
+                                         : crossesIntrinsicRow;
+  }
+  bool crossesFlexibleTrack(Dimension dimension) const {
+    return dimension == Dimension::Width ? crossesFlexibleColumn
+                                         : crossesFlexibleRow;
+  }
+};
+
+// Baseline sharing groups - items grouped by their starting row for the
+// resolve intrinsic size step in track sizing algorithm.
+// https://www.w3.org/TR/css-grid-1/#algo-baseline-shims
+using BaselineItemGroups = std::map<size_t, std::vector<GridItem*>>;
+
+} // namespace facebook::yoga

packages/react-native/ReactCommon/yoga/yoga/algorithm/grid/GridTrack.h

@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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 <yoga/style/GridTrackSize.h>
+
+namespace facebook::yoga {
+
+// https://www.w3.org/TR/css-grid-1/#algo-track-sizing
+struct GridTrack {
+  // Mutable state used by the track sizing algorithm
+  // https://www.w3.org/TR/css-grid-1/#base-size
+  float baseSize = 0.0f;
+  // https://www.w3.org/TR/css-grid-1/#growth-limit
+  float growthLimit = 0.0f;
+  // https://www.w3.org/TR/css-grid-1/#infinitely-growable
+  bool infinitelyGrowable = false;
+
+  explicit GridTrack(const GridTrackSize& ts) : trackSize_(ts) {}
+
+  const GridTrackSize& trackSize() const {
+    return trackSize_;
+  }
+
+ private:
+  // Sizing functions for this track, immutable after construction
+  GridTrackSize trackSize_;
+};
+
+} // namespace facebook::yoga

…/ReactCommon/yoga/yoga/style/GridTrack.h …ctCommon/yoga/yoga/style/GridTrackSize.hpackages/react-native/ReactCommon/yoga/yoga/style/GridTrack.h renamed to packages/react-native/ReactCommon/yoga/yoga/style/GridTrackSize.h packages/react-native/ReactCommon/yoga/yoga/style/GridTrack.h renamed to packages/react-native/ReactCommon/yoga/yoga/style/GridTrackSize.h

@@ -11,18 +11,13 @@
 #include <vector>
 
 namespace facebook::yoga {
+// Represents a track size as defined in
 // https://www.w3.org/TR/css-grid-1/#typedef-track-size
+// and helper functions for creating common track sizes.
 struct GridTrackSize {
   StyleSizeLength minSizingFunction;
   StyleSizeLength maxSizingFunction;
 
-  // These are used in the grid layout algorithm when distributing spaces among
-  // tracks
-  // TODO: maybe move them to TrackSizing since these are track states
-  float baseSize = 0.0f;
-  float growthLimit = 0.0f;
-  bool infinitelyGrowable = false;
-
   // Static factory methods for common cases
   constexpr static GridTrackSize auto_() {
     return GridTrackSize{

packages/react-native/ReactCommon/yoga/yoga/style/Style.h

@@ -30,7 +30,7 @@
 #include <yoga/enums/Wrap.h>
 #include <yoga/numeric/FloatOptional.h>
 #include <yoga/style/GridLine.h>
-#include <yoga/style/GridTrack.h>
+#include <yoga/style/GridTrackSize.h>
 #include <yoga/style/StyleLength.h>
 #include <yoga/style/StyleSizeLength.h>
 #include <yoga/style/StyleValuePool.h>

scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api

@@ -12835,6 +12835,7 @@ struct facebook::jsi::detail::BeforeCaller<std::tuple<T...>> {
 }
 
 
+using facebook::yoga::BaselineItemGroups = std::map<size_t, std::vector<facebook::yoga::GridItem*>>;
 using facebook::yoga::GridTrackList = std::vector<facebook::yoga::GridTrackSize>;
 template <typename EnumT>
 concept facebook::yoga::Enumeration = std::is_enum_v<EnumT>;
@@ -13560,6 +13561,22 @@ struct facebook::yoga::FloatOptional {
   public constexpr float unwrapOrDefault(float defaultValue) const;
 }
 
+struct facebook::yoga::GridItem {
+  public GridItem(size_t columnStart, size_t columnEnd, size_t rowStart, size_t rowEnd, facebook::yoga::Node* node, float baselineShim = 0.0f);
+  public bool crossesFlexibleColumn;
+  public bool crossesFlexibleRow;
+  public bool crossesFlexibleTrack(facebook::yoga::Dimension dimension) const;
+  public bool crossesIntrinsicColumn;
+  public bool crossesIntrinsicRow;
+  public bool crossesIntrinsicTrack(facebook::yoga::Dimension dimension) const;
+  public facebook::yoga::Node* node;
+  public float baselineShim;
+  public size_t columnEnd;
+  public size_t columnStart;
+  public size_t rowEnd;
+  public size_t rowStart;
+}
+
 struct facebook::yoga::GridLine {
   public bool operator==(const facebook::yoga::GridLine& other) const = default;
   public constexpr bool isAuto() const;
@@ -13572,13 +13589,18 @@ struct facebook::yoga::GridLine {
   public static constexpr facebook::yoga::GridLine span(int32_t value);
 }
 
-struct facebook::yoga::GridTrackSize {
+struct facebook::yoga::GridTrack {
+  public GridTrack(const facebook::yoga::GridTrackSize& ts);
   public bool infinitelyGrowable;
+  public const facebook::yoga::GridTrackSize& trackSize() const;
+  public float baseSize;
+  public float growthLimit;
+}
+
+struct facebook::yoga::GridTrackSize {
   public bool operator==(const facebook::yoga::GridTrackSize& other) const = default;
   public facebook::yoga::StyleSizeLength maxSizingFunction;
   public facebook::yoga::StyleSizeLength minSizingFunction;
-  public float baseSize;
-  public float growthLimit;
   public static constexpr facebook::yoga::GridTrackSize auto_();
   public static constexpr facebook::yoga::GridTrackSize fr(float fraction);
   public static constexpr facebook::yoga::GridTrackSize length(float points);

scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api

@@ -12458,6 +12458,7 @@ struct facebook::jsi::detail::BeforeCaller<std::tuple<T...>> {
 }
 
 
+using facebook::yoga::BaselineItemGroups = std::map<size_t, std::vector<facebook::yoga::GridItem*>>;
 using facebook::yoga::GridTrackList = std::vector<facebook::yoga::GridTrackSize>;
 template <typename EnumT>
 concept facebook::yoga::Enumeration = std::is_enum_v<EnumT>;
@@ -13183,6 +13184,22 @@ struct facebook::yoga::FloatOptional {
   public constexpr float unwrapOrDefault(float defaultValue) const;
 }
 
+struct facebook::yoga::GridItem {
+  public GridItem(size_t columnStart, size_t columnEnd, size_t rowStart, size_t rowEnd, facebook::yoga::Node* node, float baselineShim = 0.0f);
+  public bool crossesFlexibleColumn;
+  public bool crossesFlexibleRow;
+  public bool crossesFlexibleTrack(facebook::yoga::Dimension dimension) const;
+  public bool crossesIntrinsicColumn;
+  public bool crossesIntrinsicRow;
+  public bool crossesIntrinsicTrack(facebook::yoga::Dimension dimension) const;
+  public facebook::yoga::Node* node;
+  public float baselineShim;
+  public size_t columnEnd;
+  public size_t columnStart;
+  public size_t rowEnd;
+  public size_t rowStart;
+}
+
 struct facebook::yoga::GridLine {
   public bool operator==(const facebook::yoga::GridLine& other) const = default;
   public constexpr bool isAuto() const;
@@ -13195,13 +13212,18 @@ struct facebook::yoga::GridLine {
   public static constexpr facebook::yoga::GridLine span(int32_t value);
 }
 
-struct facebook::yoga::GridTrackSize {
+struct facebook::yoga::GridTrack {
+  public GridTrack(const facebook::yoga::GridTrackSize& ts);
   public bool infinitelyGrowable;
+  public const facebook::yoga::GridTrackSize& trackSize() const;
+  public float baseSize;
+  public float growthLimit;
+}
+
+struct facebook::yoga::GridTrackSize {
   public bool operator==(const facebook::yoga::GridTrackSize& other) const = default;
   public facebook::yoga::StyleSizeLength maxSizingFunction;
   public facebook::yoga::StyleSizeLength minSizingFunction;
-  public float baseSize;
-  public float growthLimit;
   public static constexpr facebook::yoga::GridTrackSize auto_();
   public static constexpr facebook::yoga::GridTrackSize fr(float fraction);
   public static constexpr facebook::yoga::GridTrackSize length(float points);

scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api

@@ -12688,6 +12688,7 @@ struct facebook::jsi::detail::BeforeCaller<std::tuple<T...>> {
 }
 
 
+using facebook::yoga::BaselineItemGroups = std::map<size_t, std::vector<facebook::yoga::GridItem*>>;
 using facebook::yoga::GridTrackList = std::vector<facebook::yoga::GridTrackSize>;
 template <typename EnumT>
 concept facebook::yoga::Enumeration = std::is_enum_v<EnumT>;
@@ -13413,6 +13414,22 @@ struct facebook::yoga::FloatOptional {
   public constexpr float unwrapOrDefault(float defaultValue) const;
 }
 
+struct facebook::yoga::GridItem {
+  public GridItem(size_t columnStart, size_t columnEnd, size_t rowStart, size_t rowEnd, facebook::yoga::Node* node, float baselineShim = 0.0f);
+  public bool crossesFlexibleColumn;
+  public bool crossesFlexibleRow;
+  public bool crossesFlexibleTrack(facebook::yoga::Dimension dimension) const;
+  public bool crossesIntrinsicColumn;
+  public bool crossesIntrinsicRow;
+  public bool crossesIntrinsicTrack(facebook::yoga::Dimension dimension) const;
+  public facebook::yoga::Node* node;
+  public float baselineShim;
+  public size_t columnEnd;
+  public size_t columnStart;
+  public size_t rowEnd;
+  public size_t rowStart;
+}
+
 struct facebook::yoga::GridLine {
   public bool operator==(const facebook::yoga::GridLine& other) const = default;
   public constexpr bool isAuto() const;
@@ -13425,13 +13442,18 @@ struct facebook::yoga::GridLine {
   public static constexpr facebook::yoga::GridLine span(int32_t value);
 }
 
-struct facebook::yoga::GridTrackSize {
+struct facebook::yoga::GridTrack {
+  public GridTrack(const facebook::yoga::GridTrackSize& ts);
   public bool infinitelyGrowable;
+  public const facebook::yoga::GridTrackSize& trackSize() const;
+  public float baseSize;
+  public float growthLimit;
+}
+
+struct facebook::yoga::GridTrackSize {
   public bool operator==(const facebook::yoga::GridTrackSize& other) const = default;
   public facebook::yoga::StyleSizeLength maxSizingFunction;
   public facebook::yoga::StyleSizeLength minSizingFunction;
-  public float baseSize;
-  public float growthLimit;
   public static constexpr facebook::yoga::GridTrackSize auto_();
   public static constexpr facebook::yoga::GridTrackSize fr(float fraction);
   public static constexpr facebook::yoga::GridTrackSize length(float points);

scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api

@@ -14655,6 +14655,7 @@ struct facebook::jsi::detail::BeforeCaller<std::tuple<T...>> {
 }
 
 
+using facebook::yoga::BaselineItemGroups = std::map<size_t, std::vector<facebook::yoga::GridItem*>>;
 using facebook::yoga::GridTrackList = std::vector<facebook::yoga::GridTrackSize>;
 template <typename EnumT>
 concept facebook::yoga::Enumeration = std::is_enum_v<EnumT>;
@@ -15380,6 +15381,22 @@ struct facebook::yoga::FloatOptional {
   public constexpr float unwrapOrDefault(float defaultValue) const;
 }
 
+struct facebook::yoga::GridItem {
+  public GridItem(size_t columnStart, size_t columnEnd, size_t rowStart, size_t rowEnd, facebook::yoga::Node* node, float baselineShim = 0.0f);
+  public bool crossesFlexibleColumn;
+  public bool crossesFlexibleRow;
+  public bool crossesFlexibleTrack(facebook::yoga::Dimension dimension) const;
+  public bool crossesIntrinsicColumn;
+  public bool crossesIntrinsicRow;
+  public bool crossesIntrinsicTrack(facebook::yoga::Dimension dimension) const;
+  public facebook::yoga::Node* node;
+  public float baselineShim;
+  public size_t columnEnd;
+  public size_t columnStart;
+  public size_t rowEnd;
+  public size_t rowStart;
+}
+
 struct facebook::yoga::GridLine {
   public bool operator==(const facebook::yoga::GridLine& other) const = default;
   public constexpr bool isAuto() const;
@@ -15392,13 +15409,18 @@ struct facebook::yoga::GridLine {
   public static constexpr facebook::yoga::GridLine span(int32_t value);
 }
 
-struct facebook::yoga::GridTrackSize {
+struct facebook::yoga::GridTrack {
+  public GridTrack(const facebook::yoga::GridTrackSize& ts);
   public bool infinitelyGrowable;
+  public const facebook::yoga::GridTrackSize& trackSize() const;
+  public float baseSize;
+  public float growthLimit;
+}
+
+struct facebook::yoga::GridTrackSize {
   public bool operator==(const facebook::yoga::GridTrackSize& other) const = default;
   public facebook::yoga::StyleSizeLength maxSizingFunction;
   public facebook::yoga::StyleSizeLength minSizingFunction;
-  public float baseSize;
-  public float growthLimit;
   public static constexpr facebook::yoga::GridTrackSize auto_();
   public static constexpr facebook::yoga::GridTrackSize fr(float fraction);
   public static constexpr facebook::yoga::GridTrackSize length(float points);