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

enums.py

@@ -4,7 +4,6 @@
 # This source code is licensed under the MIT license found in the
 # LICENSE file in the root directory of this source tree.
 
-import math
 import os
 
 ENUMS = {
@@ -34,6 +33,7 @@ ENUMS = {
     "PositionType": ["Static", "Relative", "Absolute"],
     "Display": ["Flex", "None"],
     "Wrap": ["NoWrap", "Wrap", "WrapReverse"],
+    "BoxSizing": ["ContentBox", "BorderBox"],
     "MeasureMode": ["Undefined", "Exactly", "AtMost"],
     "Dimension": ["Width", "Height"],
     "Edge": [

java/com/facebook/yoga/YogaBoxSizing.java

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+// @generated by enums.py
+
+package com.facebook.yoga;
+
+public enum YogaBoxSizing {
+  CONTENT_BOX(0),
+  BORDER_BOX(1);
+
+  private final int mIntValue;
+
+  YogaBoxSizing(int intValue) {
+    mIntValue = intValue;
+  }
+
+  public int intValue() {
+    return mIntValue;
+  }
+
+  public static YogaBoxSizing fromInt(int value) {
+    switch (value) {
+      case 0: return CONTENT_BOX;
+      case 1: return BORDER_BOX;
+      default: throw new IllegalArgumentException("Unknown enum value: " + value);
+    }
+  }
+}

java/com/facebook/yoga/YogaNative.java

@@ -56,6 +56,8 @@ public class YogaNative {
   static native void jni_YGNodeStyleSetAlignContentJNI(long nativePointer, int alignContent);
   static native int jni_YGNodeStyleGetPositionTypeJNI(long nativePointer);
   static native void jni_YGNodeStyleSetPositionTypeJNI(long nativePointer, int positionType);
+  static native int jni_YGNodeStyleGetBoxSizingJNI(long nativePointer);
+  static native void jni_YGNodeStyleSetBoxSizingJNI(long nativePointer, int boxSizing);
   static native int jni_YGNodeStyleGetFlexWrapJNI(long nativePointer);
   static native void jni_YGNodeStyleSetFlexWrapJNI(long nativePointer, int wrapType);
   static native int jni_YGNodeStyleGetOverflowJNI(long nativePointer);

java/com/facebook/yoga/YogaNode.java

@@ -88,6 +88,10 @@ public abstract class YogaNode implements YogaProps {
 
   public abstract void setPositionType(YogaPositionType positionType);
 
+  public abstract YogaBoxSizing getBoxSizing();
+
+  public abstract void setBoxSizing(YogaBoxSizing boxSizing);
+
   public abstract YogaWrap getWrap();
 
   public abstract void setWrap(YogaWrap flexWrap);

java/com/facebook/yoga/YogaNodeJNIBase.java

@@ -299,6 +299,14 @@ public abstract class YogaNodeJNIBase extends YogaNode implements Cloneable {
     YogaNative.jni_YGNodeStyleSetPositionTypeJNI(mNativePointer, positionType.intValue());
   }
 
+  public YogaBoxSizing getBoxSizing() {
+    return YogaBoxSizing.fromInt(YogaNative.jni_YGNodeStyleGetBoxSizingJNI(mNativePointer));
+  }
+
+  public void setBoxSizing(YogaBoxSizing boxSizing) {
+    YogaNative.jni_YGNodeStyleSetBoxSizingJNI(mNativePointer, boxSizing.intValue());
+  }
+
   public YogaWrap getWrap() {
     return YogaWrap.fromInt(YogaNative.jni_YGNodeStyleGetFlexWrapJNI(mNativePointer));
   }

java/com/facebook/yoga/YogaProps.java

@@ -105,6 +105,8 @@ public interface YogaProps {
 
   void setBaselineFunction(YogaBaselineFunction yogaBaselineFunction);
 
+  void setBoxSizing(YogaBoxSizing boxSizing);
+
   /* Getters */
 
   YogaValue getWidth();
@@ -148,4 +150,6 @@ public interface YogaProps {
   YogaValue getPosition(YogaEdge edge);
 
   float getBorder(YogaEdge edge);
+
+  YogaBoxSizing getBoxSizing();
 }

java/jni/YGJNIVanilla.cpp

@@ -475,6 +475,7 @@ YG_NODE_JNI_STYLE_PROP(jint, YGAlign, AlignItems);
 YG_NODE_JNI_STYLE_PROP(jint, YGAlign, AlignSelf);
 YG_NODE_JNI_STYLE_PROP(jint, YGAlign, AlignContent);
 YG_NODE_JNI_STYLE_PROP(jint, YGPositionType, PositionType);
+YG_NODE_JNI_STYLE_PROP(jint, YGBoxSizing, BoxSizing);
 YG_NODE_JNI_STYLE_PROP(jint, YGWrap, FlexWrap);
 YG_NODE_JNI_STYLE_PROP(jint, YGOverflow, Overflow);
 YG_NODE_JNI_STYLE_PROP(jint, YGDisplay, Display);
@@ -819,6 +820,12 @@ static JNINativeMethod methods[] = {
     {"jni_YGNodeStyleSetPositionTypeJNI",
      "(JI)V",
      (void*)jni_YGNodeStyleSetPositionTypeJNI},
+    {"jni_YGNodeStyleGetBoxSizingJNI",
+     "(J)I",
+     (void*)jni_YGNodeStyleGetBoxSizingJNI},
+    {"jni_YGNodeStyleSetBoxSizingJNI",
+     "(JI)V",
+     (void*)jni_YGNodeStyleSetBoxSizingJNI},
     {"jni_YGNodeStyleGetFlexWrapJNI",
      "(J)I",
      (void*)jni_YGNodeStyleGetFlexWrapJNI},

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;

yoga/YGEnums.cpp

@@ -33,6 +33,16 @@ const char* YGAlignToString(const YGAlign value) {
   return "unknown";
 }
 
+const char* YGBoxSizingToString(const YGBoxSizing value) {
+  switch (value) {
+    case YGBoxSizingContentBox:
+      return "content-box";
+    case YGBoxSizingBorderBox:
+      return "border-box";
+  }
+  return "unknown";
+}
+
 const char* YGDimensionToString(const YGDimension value) {
   switch (value) {
     case YGDimensionWidth:

yoga/YGEnums.h

@@ -24,6 +24,11 @@ YG_ENUM_DECL(
     YGAlignSpaceAround,
     YGAlignSpaceEvenly)
 
+YG_ENUM_DECL(
+    YGBoxSizing,
+    YGBoxSizingContentBox,
+    YGBoxSizingBorderBox)
+
 YG_ENUM_DECL(
     YGDimension,
     YGDimensionWidth,

yoga/YGNodeStyle.cpp

@@ -296,6 +296,15 @@ float YGNodeStyleGetAspectRatio(const YGNodeConstRef node) {
   return op.isUndefined() ? YGUndefined : op.unwrap();
 }
 
+void YGNodeStyleSetBoxSizing(YGNodeRef node, YGBoxSizing boxSizing) {
+  updateStyle<&Style::boxSizing, &Style::setBoxSizing>(
+      node, scopedEnum(boxSizing));
+}
+
+YGBoxSizing YGNodeStyleGetBoxSizing(const YGNodeConstRef node) {
+  return unscopedEnum(resolveRef(node)->style().boxSizing());
+}
+
 void YGNodeStyleSetWidth(YGNodeRef node, float points) {
   updateStyle<&Style::dimension, &Style::setDimension>(
       node, Dimension::Width, value::points(points));

yoga/YGNodeStyle.h

@@ -95,6 +95,9 @@ YG_EXPORT void
 YGNodeStyleSetGapPercent(YGNodeRef node, YGGutter gutter, float gapLength);
 YG_EXPORT float YGNodeStyleGetGap(YGNodeConstRef node, YGGutter gutter);
 
+YG_EXPORT void YGNodeStyleSetBoxSizing(YGNodeRef node, YGBoxSizing boxSizing);
+YG_EXPORT YGBoxSizing YGNodeStyleGetBoxSizing(YGNodeConstRef node);
+
 YG_EXPORT void YGNodeStyleSetWidth(YGNodeRef node, float width);
 YG_EXPORT void YGNodeStyleSetWidthPercent(YGNodeRef node, float width);
 YG_EXPORT void YGNodeStyleSetWidthAuto(YGNodeRef node);

yoga/enums/BoxSizing.h

@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+// @generated by enums.py
+// clang-format off
+#pragma once
+
+#include <cstdint>
+#include <yoga/YGEnums.h>
+#include <yoga/enums/YogaEnums.h>
+
+namespace facebook::yoga {
+
+enum class BoxSizing : uint8_t {
+  ContentBox = YGBoxSizingContentBox,
+  BorderBox = YGBoxSizingBorderBox,
+};
+
+template <>
+constexpr int32_t ordinalCount<BoxSizing>() {
+  return 2;
+}
+
+constexpr BoxSizing scopedEnum(YGBoxSizing unscoped) {
+  return static_cast<BoxSizing>(unscoped);
+}
+
+constexpr YGBoxSizing unscopedEnum(BoxSizing scoped) {
+  return static_cast<YGBoxSizing>(scoped);
+}
+
+inline const char* toString(BoxSizing e) {
+  return YGBoxSizingToString(unscopedEnum(e));
+}
+
+} // namespace facebook::yoga

yoga/style/Style.h

@@ -15,6 +15,7 @@
 
 #include <yoga/algorithm/FlexDirection.h>
 #include <yoga/enums/Align.h>
+#include <yoga/enums/BoxSizing.h>
 #include <yoga/enums/Dimension.h>
 #include <yoga/enums/Direction.h>
 #include <yoga/enums/Display.h>
@@ -206,6 +207,13 @@ class YG_EXPORT Style {
         value == 0.0f || std::isinf(value.unwrap()) ? FloatOptional{} : value);
   }
 
+  BoxSizing boxSizing() const {
+    return boxSizing_;
+  }
+  void setBoxSizing(BoxSizing value) {
+    boxSizing_ = value;
+  }
+
   bool horizontalInsetsDefined() const {
     return position_[yoga::to_underlying(Edge::Left)].isDefined() ||
         position_[yoga::to_underlying(Edge::Right)].isDefined() ||
@@ -675,6 +683,7 @@ class YG_EXPORT Style {
   Wrap flexWrap_ : bitCount<Wrap>() = Wrap::NoWrap;
   Overflow overflow_ : bitCount<Overflow>() = Overflow::Visible;
   Display display_ : bitCount<Display>() = Display::Flex;
+  BoxSizing boxSizing_ : bitCount<BoxSizing>() = BoxSizing::BorderBox;
 
   StyleValueHandle flex_{};
   StyleValueHandle flexGrow_{};