search

decentraland / sdk

PM repository for SDK
Apache License 2.0
4 stars 4 forks source link

UI layout isn't working as expected #597

Closed leanmendoza closed 1 year ago

leanmendoza commented 1 year ago

In the current @next version (explorer=dev, js-sdk-toolchain=main) the UI is not working as expected. The code syntax changed a bit, but the same code can be rewritten, in the next two snippets the Latest version is the one that works fine.

Current version

  1. Open: https://playground.decentraland.org/?&sdk-branch=main&explorer-branch=dev
  2. Wait until all is loaded and then paste the next code and click on Run button: 
    
export const uiComponent = () => (
<UiEntity
uiTransform={{
  width: '300px',
  margin: { top: '70px', left: '245px' },
  padding: { top: 10, bottom: 10, left: 10, right: 10 },
  display: 'flex'
}}
uiBackground={{ color: Color4.create(0.5, 0.8, 0.1, 0.6) }}
>
<UiEntity
  uiTransform={{
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex'
  }}
>
  <Label
    value='SDK 7'
    fontSize={32}
    uiBackground={{ color: Color4.fromHexString('#fbf0f0') }}
  />
</UiEntity>
<UiEntity
  uiTransform={{
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex'
  }}
>
  <Label
    value={`Player: ${getPlayerPosition()}`}
    fontSize={18}
    uiBackground={{ color: Color4.fromHexString('#fbf0f0') }}
  />
</UiEntity>
</UiEntity>
)

function getPlayerPosition() { const playerPosition = Transform.getOrNull(engine.PlayerEntity) if (!playerPosition) return '' const { x, y, z } = playerPosition.position return {x: ${x.toFixed(2)}, y: ${y.toFixed(2)}, z: ${z.toFixed(2)} } }

ReactEcsRenderer.setUiRenderer(uiComponent)


![image](https://user-images.githubusercontent.com/8042536/217103169-57d9b276-04de-44bd-9158-5093a6f8f624.png)

## Latest Version
1. Open: https://playground.decentraland.org/
2. Wait until all is loaded and then paste the next code and click on `Run` button:
```tsx
export const uiComponent = () => (
  <UiEntity
    uiTransform={{
      width: '300px',
      margin: { top: '70px', left: '245px' },
      padding: { top: 10, bottom: 10, left: 10, right: 10 },
      display: YGDisplay.YGD_FLEX
    }}
    uiBackground={{ backgroundColor: Color4.create(0.5, 0.8, 0.1, 0.6) }}
  >
    <UiEntity
      uiTransform={{
        width: '100%',
        justifyContent: YGJustify.YGJ_CENTER,
        alignItems: YGAlign.YGA_CENTER,
        display: YGDisplay.YGD_FLEX
      }}
    >
      <UiEntity
        uiText={{ value: 'SDK 7' , fontSize: 32}}
        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
      />
    </UiEntity>
    <UiEntity
      uiTransform={{
        width: '100%',
        justifyContent: YGJustify.YGJ_CENTER,
        alignItems: YGAlign.YGA_CENTER,
        display: YGDisplay.YGD_FLEX
      }}
    >
      <UiEntity
        uiText={{ value: `Player: ${getPlayerPosition()}` , fontSize: 18}}
        uiBackground={{ backgroundColor: Color4.fromHexString('#fbf0f0') }}
      />
    </UiEntity>
  </UiEntity>
)

function getPlayerPosition() {
  const playerPosition = Transform.getOrNull(engine.PlayerEntity)
  if (!playerPosition) return ''
  const { x, y, z } = playerPosition.position
  return `{x: ${x.toFixed(2)}, y: ${y.toFixed(2)}, z: ${z.toFixed(2)} }`
}

ReactEcsRenderer.setUiRenderer(uiComponent)

image

leanmendoza commented 1 year ago

It might be a SDK problem, while debugging the model received by the renderer, they're not the same.

Latest version

[
    {
        "widthUnit": "YGU_POINT",
        "width": 300,
        "marginLeftUnit": "YGU_POINT",
        "marginLeft": 245,
        "marginTopUnit": "YGU_POINT",
        "marginTop": 70,
        "paddingLeftUnit": "YGU_POINT",
        "paddingLeft": 10,
        "paddingTopUnit": "YGU_POINT",
        "paddingTop": 10,
        "paddingRightUnit": "YGU_POINT",
        "paddingRight": 10,
        "paddingBottomUnit": "YGU_POINT",
        "paddingBottom": 10
    },
    {
        "parent": 516,
        "rightOf": 513,
        "alignItems": "YGA_CENTER",
        "justifyContent": "YGJ_CENTER",
        "widthUnit": "YGU_PERCENT",
        "width": 100,
        "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        "parent": 515,
        "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        "parent": 516,
        "alignItems": "YGA_CENTER",
        "justifyContent": "YGJ_CENTER",
        "widthUnit": "YGU_PERCENT",
        "width": 100,
        "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        "parent": 513,
        "paddingBottomUnit": "YGU_PERCENT"
    }
]

Next version (broken)

[
    {
        "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_FLEX_START",
        "flexWrap": "YGW_WRAP",
        "alignSelf": "YGA_FLEX_START",
        "widthUnit": "YGU_POINT",
        "width": 300,
        "marginLeftUnit": "YGU_POINT",
        "marginLeft": 245,
        "marginTopUnit": "YGU_POINT",
        "marginTop": 70,
        "paddingLeftUnit": "YGU_POINT",
        "paddingLeft": 10,
        "paddingTopUnit": "YGU_POINT",
        "paddingTop": 10,
        "paddingRightUnit": "YGU_POINT",
        "paddingRight": 10,
        "paddingBottomUnit": "YGU_POINT",
        "paddingBottom": 10
    },
    {
        "parent": 516,
        "rightOf": 513,
        "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_CENTER",
        "flexWrap": "YGW_WRAP",
        "alignSelf": "YGA_FLEX_START",
        "justifyContent": "YGJ_CENTER",
        "widthUnit": "YGU_PERCENT",
        "width": 100
    },
    {
        "parent": 515,
        "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_FLEX_START",
        "flexWrap": "YGW_WRAP",
        "alignSelf": "YGA_FLEX_START"
    },
    {
        "parent": 516,
        "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_CENTER",
        "flexWrap": "YGW_WRAP",
        "alignSelf": "YGA_FLEX_START",
        "justifyContent": "YGJ_CENTER",
        "widthUnit": "YGU_PERCENT",
        "width": 100
    },
    {
        "parent": 513,
        "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_FLEX_START",
        "flexWrap": "YGW_WRAP",
        "alignSelf": "YGA_FLEX_START"
    }
]

Compares

[
    {
        + "alignContent": "YGA_FLEX_START",
        + "alignItems": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        "widthUnit": "YGU_POINT",
        "width": 300,
        "marginLeftUnit": "YGU_POINT",
        "marginLeft": 245,
        "marginTopUnit": "YGU_POINT",
        "marginTop": 70,
        "paddingLeftUnit": "YGU_POINT",
        "paddingLeft": 10,
        "paddingTopUnit": "YGU_POINT",
        "paddingTop": 10,
        "paddingRightUnit": "YGU_POINT",
        "paddingRight": 10,
        "paddingBottomUnit": "YGU_POINT",
        "paddingBottom": 10
    },
    {
        "parent": 516,
        "rightOf": 513,
        + "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_CENTER",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        "justifyContent": "YGJ_CENTER",
        "widthUnit": "YGU_PERCENT",
        "width": 100,
        - "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        "parent": 515,
        + "alignContent": "YGA_FLEX_START",
        + "alignItems": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        - "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        "parent": 516,
        + "alignContent": "YGA_FLEX_START",
        "alignItems": "YGA_CENTER",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        "justifyContent": "YGJ_CENTER",
        "widthUnit": "YGU_PERCENT",
        "width": 100,
        - "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        "parent": 513,
        + "alignContent": "YGA_FLEX_START",
        + "alignItems": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        - "paddingBottomUnit": "YGU_PERCENT"
    }
]

Difference

[
    {
        + "alignContent": "YGA_FLEX_START",
        + "alignItems": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
    },
    {
        + "alignContent": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        - "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        + "alignContent": "YGA_FLEX_START",
        + "alignItems": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        - "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        + "alignContent": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        - "paddingBottomUnit": "YGU_PERCENT"
    },
    {
        + "alignContent": "YGA_FLEX_START",
        + "alignItems": "YGA_FLEX_START",
        + "flexWrap": "YGW_WRAP",
        + "alignSelf": "YGA_FLEX_START",
        - "paddingBottomUnit": "YGU_PERCENT"
    }
]