feat: add gap, aspectRatio, flex, direction and boxSizing to UiTransform

Author: cyaiox

package-lock.json

@@ -6,7 +6,7 @@
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
     "@actions/core": "^1.10.0",
-    "@dcl/protocol": "1.0.0-30373157983.commit-2c475cb",
+    "@dcl/protocol": "https://sdk-team-cdn.decentraland.org/@dcl/protocol/branch//dcl-protocol-1.0.0-31028775440.commit-ffd471e.tgz",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

package.json

@@ -299,6 +299,9 @@ export namespace BorderRect {
     export function encode(message: BorderRect, writer?: _m0.Writer): _m0.Writer;
 }
 
+// @public
+export type BoxSizingType = 'border-box' | 'content-box';
+
 // Warning: (tsdoc-undefined-tag) The TSDoc tag "@category" is not defined in this configuration
 //
 // @public
@@ -1060,6 +1063,9 @@ export type DeleteEntityNetworkMessageBody = {
     networkId: number;
 };
 
+// @public
+export type DirectionType = 'inherit' | 'ltr' | 'rtl';
+
 // @public (undocumented)
 export type DisplayType = 'flex' | 'none';
 
@@ -1316,6 +1322,9 @@ export const enum Font {
     F_SERIF = 1
 }
 
+// @public
+export type GapShorthand = PositionUnit | `${PositionUnit} ${PositionUnit}`;
+
 // @public
 export function getComponentEntityTree<T>(engine: Pick<IEngine, 'getEntitiesWith'>, entity: Entity, component: ComponentDefinition<T & {
     parent?: Entity;
@@ -3913,6 +3922,7 @@ export interface PBUiTransform {
     alignContent?: YGAlign | undefined;
     alignItems?: YGAlign | undefined;
     alignSelf: YGAlign;
+    aspectRatio?: number | undefined;
     // (undocumented)
     borderBottomColor?: PBColor4 | undefined;
     // (undocumented)
@@ -3944,7 +3954,13 @@ export interface PBUiTransform {
     // (undocumented)
     borderTopWidth?: number | undefined;
     borderTopWidthUnit?: YGUnit | undefined;
+    boxSizing?: YGBoxSizing | undefined;
+    // (undocumented)
+    columnGap?: number | undefined;
+    columnGapUnit?: YGUnit | undefined;
+    direction?: YGDirection | undefined;
     display: YGDisplay;
+    flex?: number | undefined;
     // (undocumented)
     flexBasis: number;
     flexBasisUnit: YGUnit;
@@ -3954,6 +3970,9 @@ export interface PBUiTransform {
     flexShrink?: number | undefined;
     flexWrap?: YGWrap | undefined;
     // (undocumented)
+    gap?: number | undefined;
+    gapUnit?: YGUnit | undefined;
+    // (undocumented)
     height: number;
     heightUnit: YGUnit;
     justifyContent: YGJustify;
@@ -4014,6 +4033,9 @@ export interface PBUiTransform {
     // (undocumented)
     rightOf: number;
     // (undocumented)
+    rowGap?: number | undefined;
+    rowGapUnit?: YGUnit | undefined;
+    // (undocumented)
     width: number;
     widthUnit: YGUnit;
     zIndex?: number | undefined;
@@ -5435,19 +5457,24 @@ export interface UiTransformProps {
     alignContent?: AlignType;
     alignItems?: AlignType;
     alignSelf?: AlignType;
+    aspectRatio?: number;
     // (undocumented)
     borderColor?: Record<keyof Partial<Position>, PBColor4> | PBColor4 | undefined;
     // (undocumented)
     borderRadius?: Partial<BorderRadius> | PositionUnit;
     // (undocumented)
     borderWidth?: Partial<Position> | PositionUnit;
+    boxSizing?: BoxSizingType;
+    columnGap?: PositionUnit;
+    direction?: DirectionType;
     display?: DisplayType;
     flex?: number;
     flexBasis?: number;
     flexDirection?: FlexDirectionType;
     flexGrow?: number;
     flexShrink?: number;
     flexWrap?: FlexWrapType;
+    gap?: GapShorthand;
     height?: PositionUnit | 'auto';
     justifyContent?: JustifyType;
     margin?: Partial<Position> | PositionShorthand;
@@ -5461,6 +5488,7 @@ export interface UiTransformProps {
     pointerFilter?: PointerFilterType;
     position?: Partial<Position> | PositionShorthand;
     positionType?: PositionType;
+    rowGap?: PositionUnit;
     width?: PositionUnit | 'auto';
     zIndex?: number;
 }
@@ -5693,6 +5721,24 @@ export const enum YGAlign {
     YGA_STRETCH = 4
 }
 
+// @public (undocumented)
+export const enum YGBoxSizing {
+    // (undocumented)
+    YGBS_BORDER_BOX = 0,
+    // (undocumented)
+    YGBS_CONTENT_BOX = 1
+}
+
+// @public (undocumented)
+export const enum YGDirection {
+    // (undocumented)
+    YGDIR_INHERIT = 0,
+    // (undocumented)
+    YGDIR_LTR = 1,
+    // (undocumented)
+    YGDIR_RTL = 2
+}
+
 // @public (undocumented)
 export const enum YGDisplay {
     // (undocumented)

packages/@dcl/playground-assets/etc/playground-assets.api.md

@@ -100,6 +100,10 @@ The layout system is based on Flexbox and supports the following properties:
 - `width`, `height`
 - `margin`, `padding`
 - `positionType: 'absolute' | 'relative'`
+- `gap`, `rowGap`, `columnGap`
+- `flex`, `aspectRatio`
+- `direction: 'inherit' | 'ltr' | 'rtl'`
+- `boxSizing: 'border-box' | 'content-box'`
 
 ## Event Handling
 

packages/@dcl/react-ecs/README.md

@@ -1,5 +1,7 @@
 import {
   getAlign,
+  getBoxSizing,
+  getDirection,
   getDisplay,
   getFlexDirection,
   getFlexWrap,
@@ -10,6 +12,7 @@ import {
   parseBorderColor,
   parseBorderRadius,
   parseBorderWidth,
+  parseGap,
   parsePosition,
   parseSize
 } from './utils'
@@ -102,12 +105,18 @@ export function parseUiTransform(props: UiTransformProps = {}): PBUiTransform {
     borderRadius,
     borderWidth,
     borderColor,
+    gap,
+    rowGap,
+    columnGap,
+    direction,
+    boxSizing,
     ...otherProps
   } = props
 
   return {
     ...defaultUiTransform,
     ...otherProps,
+    ...parseGap(gap, rowGap, columnGap),
     ...parsePosition(props.position, 'position'),
     ...parsePosition(props.margin, 'margin'),
     ...parsePosition(props.padding, 'padding'),
@@ -130,6 +139,8 @@ export function parseUiTransform(props: UiTransformProps = {}): PBUiTransform {
     ...(flexWrap && getFlexWrap(flexWrap)),
     ...(borderRadius && parseBorderRadius(borderRadius)),
     ...(borderWidth && parseBorderWidth(borderWidth)),
-    ...(borderColor && parseBorderColor(borderColor))
+    ...(borderColor && parseBorderColor(borderColor)),
+    ...(direction && getDirection(direction)),
+    ...(boxSizing && getBoxSizing(boxSizing))
   }
 }

packages/@dcl/react-ecs/src/components/uiTransform/index.ts

@@ -95,14 +95,32 @@ export type PositionType = 'absolute' | 'relative'
  */
 export type PointerFilterType = 'none' | 'block'
 
+/**
+ * @public
+ * The direction property specifies the layout direction of the element (left-to-right or right-to-left)
+ */
+export type DirectionType = 'inherit' | 'ltr' | 'rtl'
+
+/**
+ * @public
+ * The box-sizing property defines whether width/height include padding and border (border-box) or only the content (content-box)
+ */
+export type BoxSizingType = 'border-box' | 'content-box'
+
+/**
+ * The gap shorthand: one value applies to both axes; two space-separated values apply to row then column
+ * @public
+ */
+export type GapShorthand = PositionUnit | `${PositionUnit} ${PositionUnit}`
+
 /**
  * Layout props to position things in the canvas
  * @public
  */
 export interface UiTransformProps {
   /** The display property controls if a item is going to be displayed or not. */
   display?: DisplayType
-  /** The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. */
+  /** The flex shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. It sets flex-grow, flex-shrink and flex-basis following Yoga semantics. */
   flex?: number
   /** Justify content describes how to align children within the main axis of their container. */
   justifyContent?: JustifyType
@@ -155,4 +173,16 @@ export interface UiTransformProps {
   opacity?: number
   /** default 0 */
   zIndex?: number
+  /** The gap shorthand sets the spacing between rows and columns of a flex container. One value applies to both axes; two space-separated values apply to row then column. */
+  gap?: GapShorthand
+  /** The row-gap property sets the spacing between the rows of a flex container. Takes precedence over gap on its axis. */
+  rowGap?: PositionUnit
+  /** The column-gap property sets the spacing between the columns of a flex container. Takes precedence over gap on its axis. */
+  columnGap?: PositionUnit
+  /** The aspect-ratio property locks the element's width / height ratio. */
+  aspectRatio?: number
+  /** The direction property specifies the layout direction of the element @defaultValue 'inherit' */
+  direction?: DirectionType
+  /** The box-sizing property defines whether width/height include padding and border @defaultValue 'border-box' */
+  boxSizing?: BoxSizingType
 }

packages/@dcl/react-ecs/src/components/uiTransform/types.ts

@@ -1,5 +1,7 @@
 import {
   YGAlign,
+  YGBoxSizing,
+  YGDirection,
   YGDisplay,
   YGFlexDirection,
   YGJustify,
@@ -11,9 +13,12 @@ import {
 } from '@dcl/ecs'
 import {
   AlignType,
+  BoxSizingType,
+  DirectionType,
   FlexDirectionType,
   DisplayType,
   FlexWrapType,
+  GapShorthand,
   JustifyType,
   OverflowType,
   Position,
@@ -213,6 +218,49 @@ export function parsePosition<T extends PropName>(
   return parsePosition({ top, right, bottom, left }, prop)
 }
 
+type GapProp = 'gap' | 'rowGap' | 'columnGap'
+type GapPropUnit = `${GapProp}Unit`
+type GapProps = {
+  [key in GapProp]?: number
+} & {
+  [key in GapPropUnit]?: YGUnit
+}
+/**
+ * @internal
+ */
+export function parseGap(
+  gap: GapShorthand | undefined,
+  rowGap: PositionUnit | undefined,
+  columnGap: PositionUnit | undefined
+): Partial<GapProps> {
+  const obj: Partial<GapProps> = {}
+
+  function setGap(prop: GapProp, val: PositionUnit | undefined) {
+    const [value, unit] = parsePositionUnit(val)
+    if (value === undefined) return
+    obj[prop] = value
+    obj[`${prop}Unit`] = unit
+  }
+
+  if (typeof gap === 'string') {
+    const values = gap.split(' ').filter((a) => a !== '') as PositionUnit[]
+    if (values.length >= 2) {
+      setGap('rowGap', values[0])
+      setGap('columnGap', values[1])
+    } else {
+      setGap('gap', values[0])
+    }
+  } else {
+    setGap('gap', gap)
+  }
+
+  // longhands win over the shorthand; Yoga resolves row/column precedence over the all-gutter
+  setGap('rowGap', rowGap)
+  setGap('columnGap', columnGap)
+
+  return obj
+}
+
 // Size Props
 type HeightWidth = 'height' | 'width'
 type SizePropName = HeightWidth | `max${Capitalize<HeightWidth>}` | `min${Capitalize<HeightWidth>}`
@@ -351,3 +399,28 @@ const parsePointerFilter: Readonly<Record<PointerFilterType, PointerFilterMode>>
   none: PointerFilterMode.PFM_NONE,
   block: PointerFilterMode.PFM_BLOCK
 }
+
+/**
+ * @internal
+ */
+export function getDirection(direction: DirectionType): Record<'direction', YGDirection> {
+  return { direction: parseDirection[direction] }
+}
+
+const parseDirection: Readonly<Record<DirectionType, YGDirection>> = {
+  inherit: YGDirection.YGDIR_INHERIT,
+  ltr: YGDirection.YGDIR_LTR,
+  rtl: YGDirection.YGDIR_RTL
+}
+
+/**
+ * @internal
+ */
+export function getBoxSizing(boxSizing: BoxSizingType): Record<'boxSizing', YGBoxSizing> {
+  return { boxSizing: parseBoxSizing[boxSizing] }
+}
+
+const parseBoxSizing: Readonly<Record<BoxSizingType, YGBoxSizing>> = {
+  'border-box': YGBoxSizing.YGBS_BORDER_BOX,
+  'content-box': YGBoxSizing.YGBS_CONTENT_BOX
+}