@@ -85,6 +85,19 @@ export function GridItemResizer( { clientId, onChange } ) {
8585 ) ;
8686}
8787
88+ /**
89+ * Given a grid-template-columns or grid-template-rows CSS property value, gets the start and end
90+ * position in pixels of each grid track.
91+ *
92+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
93+ *
94+ * @param {string } template The grid-template-columns or grid-template-rows CSS property value.
95+ * Only supports fixed sizes in pixels.
96+ * @param {number } gap The gap between grid tracks in pixels.
97+ *
98+ * @return {Array<{start: number, end: number}> } An array of objects with the start and end
99+ * position in pixels of each grid track.
100+ */
88101function getGridTracks ( template , gap ) {
89102 const tracks = [ ] ;
90103 for ( const size of template . split ( ' ' ) ) {
@@ -96,6 +109,21 @@ function getGridTracks( template, gap ) {
96109 return tracks ;
97110}
98111
112+ /**
113+ * Given an array of grid tracks and a position in pixels, gets the index of the closest track to
114+ * that position.
115+ *
116+ * https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-track
117+ *
118+ * @param {Array<{start: number, end: number}> } tracks An array of objects with the start and end
119+ * position in pixels of each grid track.
120+ * @param {number } position The position in pixels.
121+ * @param {string } edge The edge of the track to compare the
122+ * position to. Either 'start' or 'end'.
123+ *
124+ * @return {number } The index of the closest track to the position. 0-based, unlike CSS grid which
125+ * is 1-based.
126+ */
99127function getClosestTrack ( tracks , position , edge = 'start' ) {
100128 return tracks . reduce (
101129 ( closest , track , index ) =>
0 commit comments