Skip to content

Commit e802349

Browse files
NickGerlemanintergalacticspacehighway
NickGerleman
authored and
intergalacticspacehighway
committed
CSS Grid 6/9: JavaScript bindings
Summary: Add JavaScript/WASM bindings for CSS Grid support. Includes embind bindings, TypeScript types (YGEnums.ts), Node wrapper updates (wrapAssembly.ts). Existing generated JS tests are updated to import GridTrackType. Differential Revision: D93946255
1 parent fcdd6a7 commit e802349

5 files changed

Lines changed: 163 additions & 1 deletion

File tree

‎javascript/CMakeLists.txt‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ project(yoga)
99

1010
file(GLOB_RECURSE SOURCES CONFIGURE_DEPENDS
1111
${CMAKE_CURRENT_SOURCE_DIR}/../yoga/*.cpp
12-
${CMAKE_CURRENT_SOURCE_DIR}/../yoga/**/*.cpp
1312
${CMAKE_CURRENT_SOURCE_DIR}/src/*.cpp)
1413

1514
include_directories(..)

‎javascript/src/Node.cpp‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
*/
77

88
#include <algorithm>
9+
#include <string>
910

11+
#include <yoga/YGGridTrackList.h>
1012
#include <yoga/Yoga.h>
1113

1214
#include "./Config.h"
@@ -124,6 +126,14 @@ void Node::setJustifyContent(int justifyContent) {
124126
YGNodeStyleSetJustifyContent(m_node, static_cast<YGJustify>(justifyContent));
125127
}
126128

129+
void Node::setJustifyItems(int justifyItems) {
130+
YGNodeStyleSetJustifyItems(m_node, static_cast<YGJustify>(justifyItems));
131+
}
132+
133+
void Node::setJustifySelf(int justifySelf) {
134+
YGNodeStyleSetJustifySelf(m_node, static_cast<YGJustify>(justifySelf));
135+
}
136+
127137
void Node::setMargin(int edge, double margin) {
128138
YGNodeStyleSetMargin(m_node, static_cast<YGEdge>(edge), margin);
129139
}
@@ -590,3 +600,102 @@ void Node::setAlwaysFormsContainingBlock(bool alwaysFormsContainingBlock) {
590600
return YGNodeSetAlwaysFormsContainingBlock(
591601
m_node, alwaysFormsContainingBlock);
592602
}
603+
604+
// Helper function to convert JS track value to YGGridTrackValueRef
605+
static YGGridTrackValueRef convertTrackValue(emscripten::val track) {
606+
int type = track["type"].as<int>();
607+
608+
switch (type) {
609+
case YGGridTrackTypeAuto:
610+
return YGAuto();
611+
case YGGridTrackTypePoints: {
612+
float value = track["value"].as<float>();
613+
return YGPoints(value);
614+
}
615+
case YGGridTrackTypePercent: {
616+
float value = track["value"].as<float>();
617+
return YGPercent(value);
618+
}
619+
case YGGridTrackTypeFr: {
620+
float value = track["value"].as<float>();
621+
return YGFr(value);
622+
}
623+
case YGGridTrackTypeMinmax: {
624+
YGGridTrackValueRef minVal = convertTrackValue(track["min"]);
625+
YGGridTrackValueRef maxVal = convertTrackValue(track["max"]);
626+
return YGMinMax(minVal, maxVal);
627+
}
628+
default:
629+
return YGAuto();
630+
}
631+
}
632+
633+
// Helper function to build grid track list from JS array
634+
static YGGridTrackListRef buildGridTrackList(emscripten::val tracks) {
635+
YGGridTrackListRef trackList = YGGridTrackListCreate();
636+
637+
unsigned length = tracks["length"].as<unsigned>();
638+
for (unsigned i = 0; i < length; i++) {
639+
emscripten::val track = tracks[i];
640+
YGGridTrackValueRef trackValue = convertTrackValue(track);
641+
YGGridTrackListAddTrack(trackList, trackValue);
642+
}
643+
644+
return trackList;
645+
}
646+
647+
void Node::setGridTemplateColumns(emscripten::val tracks) {
648+
YGGridTrackListRef trackList = buildGridTrackList(tracks);
649+
YGNodeStyleSetGridTemplateColumns(m_node, trackList);
650+
YGGridTrackListFree(trackList);
651+
}
652+
653+
void Node::setGridTemplateRows(emscripten::val tracks) {
654+
YGGridTrackListRef trackList = buildGridTrackList(tracks);
655+
YGNodeStyleSetGridTemplateRows(m_node, trackList);
656+
YGGridTrackListFree(trackList);
657+
}
658+
659+
void Node::setGridAutoColumns(emscripten::val tracks) {
660+
YGGridTrackListRef trackList = buildGridTrackList(tracks);
661+
YGNodeStyleSetGridAutoColumns(m_node, trackList);
662+
YGGridTrackListFree(trackList);
663+
}
664+
665+
void Node::setGridAutoRows(emscripten::val tracks) {
666+
YGGridTrackListRef trackList = buildGridTrackList(tracks);
667+
YGNodeStyleSetGridAutoRows(m_node, trackList);
668+
YGGridTrackListFree(trackList);
669+
}
670+
671+
void Node::setGridColumnStart(int value) {
672+
YGNodeStyleSetGridColumnStart(m_node, value);
673+
}
674+
675+
void Node::setGridColumnStartSpan(int span) {
676+
YGNodeStyleSetGridColumnStartSpan(m_node, span);
677+
}
678+
679+
void Node::setGridColumnEnd(int value) {
680+
YGNodeStyleSetGridColumnEnd(m_node, value);
681+
}
682+
683+
void Node::setGridColumnEndSpan(int span) {
684+
YGNodeStyleSetGridColumnEndSpan(m_node, span);
685+
}
686+
687+
void Node::setGridRowStart(int value) {
688+
YGNodeStyleSetGridRowStart(m_node, value);
689+
}
690+
691+
void Node::setGridRowStartSpan(int span) {
692+
YGNodeStyleSetGridRowStartSpan(m_node, span);
693+
}
694+
695+
void Node::setGridRowEnd(int value) {
696+
YGNodeStyleSetGridRowEnd(m_node, value);
697+
}
698+
699+
void Node::setGridRowEndSpan(int span) {
700+
YGNodeStyleSetGridRowEndSpan(m_node, span);
701+
}

‎javascript/src/Node.h‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ class Node {
8484
void setFlexDirection(int flexDirection);
8585
void setFlexWrap(int flexWrap);
8686
void setJustifyContent(int justifyContent);
87+
void setJustifyItems(int justifyItems);
88+
void setJustifySelf(int justifySelf);
8789
void setDirection(int direction);
8890

8991
void setMargin(int edge, double margin);
@@ -150,6 +152,20 @@ class Node {
150152

151153
void setBoxSizing(int boxSizing);
152154

155+
// Grid setters
156+
void setGridTemplateColumns(emscripten::val tracks);
157+
void setGridTemplateRows(emscripten::val tracks);
158+
void setGridAutoColumns(emscripten::val tracks);
159+
void setGridAutoRows(emscripten::val tracks);
160+
void setGridColumnStart(int value);
161+
void setGridColumnStartSpan(int span);
162+
void setGridColumnEnd(int value);
163+
void setGridColumnEndSpan(int span);
164+
void setGridRowStart(int value);
165+
void setGridRowStartSpan(int span);
166+
void setGridRowEnd(int value);
167+
void setGridRowEndSpan(int span);
168+
153169
public: // Style getters
154170
int getPositionType(void) const;
155171
Value getPosition(int edge) const;

‎javascript/src/embind.cpp‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
7878
.function("setFlexDirection", &Node::setFlexDirection)
7979
.function("setFlexWrap", &Node::setFlexWrap)
8080
.function("setJustifyContent", &Node::setJustifyContent)
81+
.function("setJustifyItems", &Node::setJustifyItems)
82+
.function("setJustifySelf", &Node::setJustifySelf)
8183

8284
.function("setMargin", &Node::setMargin)
8385
.function("setMarginPercent", &Node::setMarginPercent)
@@ -192,6 +194,20 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
192194
.function(
193195
"setAlwaysFormsContainingBlock", &Node::setAlwaysFormsContainingBlock)
194196

197+
// Grid setters
198+
.function("setGridTemplateColumns", &Node::setGridTemplateColumns)
199+
.function("setGridTemplateRows", &Node::setGridTemplateRows)
200+
.function("setGridAutoColumns", &Node::setGridAutoColumns)
201+
.function("setGridAutoRows", &Node::setGridAutoRows)
202+
.function("setGridColumnStart", &Node::setGridColumnStart)
203+
.function("setGridColumnStartSpan", &Node::setGridColumnStartSpan)
204+
.function("setGridColumnEnd", &Node::setGridColumnEnd)
205+
.function("setGridColumnEndSpan", &Node::setGridColumnEndSpan)
206+
.function("setGridRowStart", &Node::setGridRowStart)
207+
.function("setGridRowStartSpan", &Node::setGridRowStartSpan)
208+
.function("setGridRowEnd", &Node::setGridRowEnd)
209+
.function("setGridRowEndSpan", &Node::setGridRowEndSpan)
210+
195211
.function("isReferenceBaseline", &Node::isReferenceBaseline)
196212
.function("setIsReferenceBaseline", &Node::setIsReferenceBaseline)
197213

‎javascript/src/wrapAssembly.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type {
2020
Errata,
2121
ExperimentalFeature,
2222
FlexDirection,
23+
GridTrackType,
2324
Gutter,
2425
Justify,
2526
MeasureMode,
@@ -47,6 +48,13 @@ type Value = {
4748
value: number;
4849
};
4950

51+
type GridTrackValue = {
52+
type: GridTrackType;
53+
value?: number;
54+
min?: GridTrackValue;
55+
max?: GridTrackValue;
56+
};
57+
5058
export type Config = {
5159
free(): void;
5260
isExperimentalFeatureEnabled(feature: ExperimentalFeature): boolean;
@@ -170,6 +178,8 @@ export type Node = {
170178
setHeightPercent(height: number | undefined): void;
171179
setHeightStretch(): void;
172180
setJustifyContent(justifyContent: Justify): void;
181+
setJustifyItems(justifyItems: Justify): void;
182+
setJustifySelf(justifySelf: Justify): void;
173183
setGap(gutter: Gutter, gapLength: number | `${number}%` | undefined): Value;
174184
setGapPercent(gutter: Gutter, gapLength: number | undefined): Value;
175185
setMargin(
@@ -258,6 +268,18 @@ export type Node = {
258268
unsetDirtiedFunc(): void;
259269
unsetMeasureFunc(): void;
260270
setAlwaysFormsContainingBlock(alwaysFormsContainingBlock: boolean): void;
271+
setGridTemplateColumns(tracks: GridTrackValue[]): void;
272+
setGridTemplateRows(tracks: GridTrackValue[]): void;
273+
setGridAutoColumns(tracks: GridTrackValue[]): void;
274+
setGridAutoRows(tracks: GridTrackValue[]): void;
275+
setGridColumnStart(value: number): void;
276+
setGridColumnStartSpan(span: number): void;
277+
setGridColumnEnd(value: number): void;
278+
setGridColumnEndSpan(span: number): void;
279+
setGridRowStart(value: number): void;
280+
setGridRowStartSpan(span: number): void;
281+
setGridRowEnd(value: number): void;
282+
setGridRowEndSpan(span: number): void;
261283
};
262284

263285
export type Yoga = {

0 commit comments

Comments
 (0)