Skip to content

Commit ded011f

Browse files
intergalacticspacehighwayintergalacticspacehighway
committed
grid-auto-columns and grid-auto-rows
1 parent 33030ec commit ded011f

File tree

18 files changed

+1973
-5276
lines changed

18 files changed

+1973
-5276
lines changed

‎gentest/fixtures/YGGridTest.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div
2+
id="grid_template_all_properties_2"
3+
style="
4+
display: grid;
5+
grid-template-rows: 100px 100px 100px;
6+
grid-template-columns: 100px 100px 100px;
7+
grid-auto-rows: 100px 200px;
8+
grid-auto-columns: 100px 200px;
9+
">
10+
<div
11+
style="
12+
width: 100px;
13+
height: 100px;
14+
grid-column-start: 1;
15+
grid-column-end: 5;
16+
grid-row-start: 1;
17+
grid-row-end: 3;
18+
"></div>
19+
<div
20+
style="
21+
width: 100px;
22+
height: 100px;
23+
grid-row-start: 2;
24+
grid-row-end: 4;
25+
"></div>
26+
<div></div>
27+
</div>

‎gentest/gentest-cpp.js‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
179179
YGFitContent: {value: 'FitContent'},
180180
YGStretch: {value: 'Stretch'},
181181

182+
YGDisplayGrid: {value: 'YGDisplayGrid'},
183+
182184
YGNodeCalculateLayout: {
183185
value: function (node, dir, _experiments) {
184186
this.push(
@@ -509,4 +511,193 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
509511
);
510512
},
511513
},
514+
515+
YGNodeStyleSetGridTemplateRows: {
516+
value: function (nodeName, value) {
517+
if (!value) {
518+
return;
519+
}
520+
521+
const tracks = parseGridTrackList(this, value);
522+
if (!tracks || tracks.length === 0) {
523+
return;
524+
}
525+
526+
this.push(`auto ${nodeName}_gridTemplateRows = YGGridTrackListCreate();`);
527+
528+
for (const track of tracks) {
529+
if (track.type === 'minmax') {
530+
const minVal = this.formatGridTrackValue(track.min);
531+
const maxVal = this.formatGridTrackValue(track.max);
532+
this.push(
533+
`YGGridTrackListAddTrack(${nodeName}_gridTemplateRows, YGMinMax(${minVal}, ${maxVal}));`,
534+
);
535+
} else {
536+
const val = this.formatGridTrackValue(track);
537+
this.push(
538+
`YGGridTrackListAddTrack(${nodeName}_gridTemplateRows, ${val});`,
539+
);
540+
}
541+
}
542+
543+
this.push(
544+
`YGNodeStyleSetGridTemplateRows(${nodeName}, ${nodeName}_gridTemplateRows);`,
545+
);
546+
this.push(
547+
`YGGridTrackListFree(${nodeName}_gridTemplateRows);`,
548+
);
549+
},
550+
},
551+
552+
YGNodeStyleSetGridTemplateColumns: {
553+
value: function (nodeName, value) {
554+
if (!value) {
555+
return;
556+
}
557+
558+
const tracks = parseGridTrackList(this, value);
559+
if (!tracks || tracks.length === 0) {
560+
return;
561+
}
562+
563+
this.push(`auto ${nodeName}_gridTemplateColumns = YGGridTrackListCreate();`);
564+
565+
for (const track of tracks) {
566+
if (track.type === 'minmax') {
567+
const minVal = this.formatGridTrackValue(track.min);
568+
const maxVal = this.formatGridTrackValue(track.max);
569+
this.push(
570+
`YGGridTrackListAddTrack(${nodeName}_gridTemplateColumns, YGMinMax(${minVal}, ${maxVal}));`,
571+
);
572+
} else {
573+
const val = this.formatGridTrackValue(track);
574+
this.push(
575+
`YGGridTrackListAddTrack(${nodeName}_gridTemplateColumns, ${val});`,
576+
);
577+
}
578+
}
579+
580+
this.push(
581+
`YGNodeStyleSetGridTemplateColumns(${nodeName}, ${nodeName}_gridTemplateColumns);`,
582+
);
583+
this.push(
584+
`YGGridTrackListFree(${nodeName}_gridTemplateColumns);`,
585+
);
586+
},
587+
},
588+
589+
YGNodeStyleSetGridColumnStart: {
590+
value: function (nodeName, value) {
591+
this.push(`YGNodeStyleSetGridColumnStart(${nodeName}, ${value});`);
592+
},
593+
},
594+
595+
YGNodeStyleSetGridColumnEnd: {
596+
value: function (nodeName, value) {
597+
this.push(`YGNodeStyleSetGridColumnEnd(${nodeName}, ${value});`);
598+
},
599+
},
600+
601+
YGNodeStyleSetGridRowStart: {
602+
value: function (nodeName, value) {
603+
this.push(`YGNodeStyleSetGridRowStart(${nodeName}, ${value});`);
604+
},
605+
},
606+
607+
YGNodeStyleSetGridRowEnd: {
608+
value: function (nodeName, value) {
609+
this.push(`YGNodeStyleSetGridRowEnd(${nodeName}, ${value});`);
610+
},
611+
},
612+
613+
YGNodeStyleSetGridAutoColumns: {
614+
value: function (nodeName, value) {
615+
if (!value) {
616+
return;
617+
}
618+
619+
const tracks = parseGridTrackList(this, value);
620+
if (!tracks || tracks.length === 0) {
621+
return;
622+
}
623+
624+
this.push(`auto ${nodeName}_gridAutoColumns = YGGridTrackListCreate();`);
625+
626+
for (const track of tracks) {
627+
if (track.type === 'minmax') {
628+
const minVal = this.formatGridTrackValue(track.min);
629+
const maxVal = this.formatGridTrackValue(track.max);
630+
this.push(
631+
`YGGridTrackListAddTrack(${nodeName}_gridAutoColumns, YGMinMax(${minVal}, ${maxVal}));`,
632+
);
633+
} else {
634+
const val = this.formatGridTrackValue(track);
635+
this.push(
636+
`YGGridTrackListAddTrack(${nodeName}_gridAutoColumns, ${val});`,
637+
);
638+
}
639+
}
640+
641+
this.push(
642+
`YGNodeStyleSetGridAutoColumns(${nodeName}, ${nodeName}_gridAutoColumns);`,
643+
);
644+
this.push(
645+
`YGGridTrackListFree(${nodeName}_gridAutoColumns);`,
646+
);
647+
},
648+
},
649+
650+
YGNodeStyleSetGridAutoRows: {
651+
value: function (nodeName, value) {
652+
if (!value) {
653+
return;
654+
}
655+
656+
const tracks = parseGridTrackList(this, value);
657+
if (!tracks || tracks.length === 0) {
658+
return;
659+
}
660+
661+
this.push(`auto ${nodeName}_gridAutoRows = YGGridTrackListCreate();`);
662+
663+
for (const track of tracks) {
664+
if (track.type === 'minmax') {
665+
const minVal = this.formatGridTrackValue(track.min);
666+
const maxVal = this.formatGridTrackValue(track.max);
667+
this.push(
668+
`YGGridTrackListAddTrack(${nodeName}_gridAutoRows, YGMinMax(${minVal}, ${maxVal}));`,
669+
);
670+
} else {
671+
const val = this.formatGridTrackValue(track);
672+
this.push(
673+
`YGGridTrackListAddTrack(${nodeName}_gridAutoRows, ${val});`,
674+
);
675+
}
676+
}
677+
678+
this.push(
679+
`YGNodeStyleSetGridAutoRows(${nodeName}, ${nodeName}_gridAutoRows);`,
680+
);
681+
this.push(
682+
`YGGridTrackListFree(${nodeName}_gridAutoRows);`,
683+
);
684+
},
685+
},
686+
687+
formatGridTrackValue: {
688+
value: function (track) {
689+
switch (track.type) {
690+
case 'auto':
691+
return 'YGAuto()';
692+
case 'points':
693+
return `YGPoints(${toValueCpp(track.value)})`;
694+
case 'percent':
695+
return `YGPercent(${toValueCpp(track.value)})`;
696+
case 'fr':
697+
return `YGFr(${toValueCpp(track.value)})`;
698+
default:
699+
return 'YGAuto()';
700+
}
701+
},
702+
},
512703
});

‎gentest/gentest-driver.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,14 +76,16 @@ for (const fileName of fixtures) {
7676
// TODO: replace this with something more robust than just blindly replacing
7777
// start/end in the entire fixture
7878
const ltrFixture = fixture
79-
.replaceAll('start', 'left')
80-
.replaceAll('end', 'right')
79+
// prevent replacing grid-column-start and grid-row-start
80+
.replaceAll(/(?<!grid-column-)(?<!grid-row-)start/g, 'left')
81+
.replaceAll(/(?<!grid-column-)(?<!grid-row-)end/g, 'right')
8182
.replaceAll('flex-left', 'flex-start')
8283
.replaceAll('flex-right', 'flex-end');
8384

8485
const rtlFixture = fixture
85-
.replaceAll('start', 'right')
86-
.replaceAll('end', 'left')
86+
// prevent replacing grid-column-start and grid-row-start
87+
.replaceAll(/(?<!grid-column-)(?<!grid-row-)start/g, 'right')
88+
.replaceAll(/(?<!grid-column-)(?<!grid-row-)end/g, 'left')
8789
.replaceAll('flex-right', 'flex-start')
8890
.replaceAll('flex-left', 'flex-end');
8991

0 commit comments

Comments
 (0)