CSS Grid algorithm 1/N: data structures

Summary:
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,30 @@
+/*
+ * 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 {
+  // Sizing functions for this track, immutable after construction
+  const GridTrackSize trackSize;
+
+  // 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) {}
+};
+
+} // 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>