Expose box sizing getters and setters in Yoga (#1701)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1701

X-link: https://github.com/facebook/react-native/pull/46630

I would like to write some tests for box sizing that will drive a lot of my development as I implement content box. To do that, I need this publicly exposed. Obviously not that ideal since this currently does not do anything. Maybe we can name the value in such a way that its clear it is in development?

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D63135970

fbshipit-source-id: 7520823bf925364eae45341531e012e80ec92284

javascript/src/Node.cpp

@@ -75,6 +75,10 @@ void Node::copyStyle(Node const& other) {
   YGNodeCopyStyle(m_node, other.m_node);
 }
 
+void Node::setBoxSizing(int boxSizing) {
+  YGNodeStyleSetBoxSizing(m_node, static_cast<YGBoxSizing>(boxSizing));
+}
+
 void Node::setPositionType(int positionType) {
   YGNodeStyleSetPositionType(m_node, static_cast<YGPositionType>(positionType));
 }
@@ -248,6 +252,10 @@ void Node::setGapPercent(int gutter, double gapLength) {
   YGNodeStyleSetGapPercent(m_node, static_cast<YGGutter>(gutter), gapLength);
 }
 
+int Node::getBoxSizing(void) const {
+  return YGNodeStyleGetBoxSizing(m_node);
+}
+
 int Node::getPositionType(void) const {
   return YGNodeStyleGetPositionType(m_node);
 }

javascript/src/Node.h

@@ -127,6 +127,8 @@ class Node {
   void setGap(int gutter, double gapLength);
   void setGapPercent(int gutter, double gapLength);
 
+  void setBoxSizing(int boxSizing);
+
  public: // Style getters
   int getPositionType(void) const;
   Value getPosition(int edge) const;
@@ -165,6 +167,8 @@ class Node {
 
   float getGap(int gutter);
 
+  int getBoxSizing(void) const;
+
  public: // Tree hierarchy mutators
   void insertChild(Node* child, unsigned index);
   void removeChild(Node* child);

javascript/src/embind.cpp

@@ -110,6 +110,8 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("setMaxHeight", &Node::setMaxHeight)
       .function("setMaxHeightPercent", &Node::setMaxHeightPercent)
 
+      .function("setBoxSizing", &Node::setBoxSizing)
+
       .function("setAspectRatio", &Node::setAspectRatio)
 
       .function("setBorder", &Node::setBorder)
@@ -146,6 +148,8 @@ EMSCRIPTEN_BINDINGS(YOGA_LAYOUT) {
       .function("getMaxWidth", &Node::getMaxWidth)
       .function("getMaxHeight", &Node::getMaxHeight)
 
+      .function("getBoxSizing", &Node::getBoxSizing)
+
       .function("getAspectRatio", &Node::getAspectRatio)
 
       .function("getBorder", &Node::getBorder)

javascript/src/generated/YGEnums.ts

@@ -19,6 +19,11 @@ export enum Align {
   SpaceEvenly = 8,
 }
 
+export enum BoxSizing {
+  ContentBox = 0,
+  BorderBox = 1,
+}
+
 export enum Dimension {
   Width = 0,
   Height = 1,
@@ -137,6 +142,8 @@ const constants = {
   ALIGN_SPACE_BETWEEN: Align.SpaceBetween,
   ALIGN_SPACE_AROUND: Align.SpaceAround,
   ALIGN_SPACE_EVENLY: Align.SpaceEvenly,
+  BOX_SIZING_CONTENT_BOX: BoxSizing.ContentBox,
+  BOX_SIZING_BORDER_BOX: BoxSizing.BorderBox,
   DIMENSION_WIDTH: Dimension.Width,
   DIMENSION_HEIGHT: Dimension.Height,
   DIRECTION_INHERIT: Direction.Inherit,

javascript/src/wrapAssembly.ts

@@ -14,6 +14,7 @@ import YGEnums from './generated/YGEnums.ts';
 
 import type {
   Align,
+  BoxSizing,
   Display,
   Edge,
   Errata,
@@ -115,6 +116,7 @@ export type Node = {
   getParent(): Node | null;
   getPosition(edge: Edge): Value;
   getPositionType(): PositionType;
+  getBoxSizing(): BoxSizing;
   getWidth(): Value;
   insertChild(child: Node, index: number): void;
   isDirty(): boolean;
@@ -169,6 +171,7 @@ export type Node = {
   setPositionPercent(edge: Edge, position: number | undefined): void;
   setPositionType(positionType: PositionType): void;
   setPositionAuto(edge: Edge): void;
+  setBoxSizing(boxSizing: BoxSizing): void;
   setWidth(width: number | 'auto' | `${number}%` | undefined): void;
   setWidthAuto(): void;
   setWidthPercent(width: number | undefined): void;