Support RTL direction and ROW_REVERSE & COLUMN_REVERSE flex direction #82

2015-05-08T13:07:10-07:00

lucasr commented

2015-05-08 13:07:10 -07:00

(Migrated from github.com)

This PR adds support for a direction style property (equivalent to Chrome's direction CSS property) that allows you to change the row flow for flexbox allows. By default, all nodes inherit the direction from their parents. If the parent direction is not explicitly defined, left-to-right is used. This means that, by default, nodes from a subtree will share the same direction defined by the root. You can also have node trees with mixed directions, as covered by one of the new tests.

Given that the work to implement RTL support is analogous to ROW_REVERSE and COLUMN_REVERSE, I went ahead and implemented them as well.

These new features require a small API break in the layoutNode() for both C and Java as well as a few new types for the new direction style property and the new flex direction values.

I added a bunch of analogous tests for the reversed layout cases and a few new tests to verify that the new features work correctly.

I split the changes into separate commits to make them a bit easier to review: one with the Javascript changes and another with the updates to the transpiled versions. I'll squash them together before merging.

This PR adds support for a direction style property (equivalent to Chrome's `direction` CSS property) that allows you to change the row flow for flexbox allows. By default, all nodes inherit the direction from their parents. If the parent direction is not explicitly defined, left-to-right is used. This means that, by default, nodes from a subtree will share the same direction defined by the root. You can also have node trees with mixed directions, as covered by one of the new tests. Given that the work to implement RTL support is analogous to `ROW_REVERSE` and `COLUMN_REVERSE`, I went ahead and implemented them as well. These new features require a small API break in the `layoutNode()` for both C and Java as well as a few new types for the new direction style property and the new flex direction values. I added a bunch of analogous tests for the reversed layout cases and a few new tests to verify that the new features work correctly. I split the changes into separate commits to make them a bit easier to review: one with the Javascript changes and another with the updates to the transpiled versions. I'll squash them together before merging.

vjeux commented

2015-05-08 14:42:17 -07:00

(Migrated from github.com)

Grrr, this error is super weird

FAIL should layout text with flexDirection row in rtl
Input:    {flexDirection: 'column', alignItems: 'stretch', flex: 0, },
Output:   {layout: {width: 200, height: 58, top: 0, left: 0}, },
Expected: {layout: {width: 200, height: 58, top: 0, left: 0}, },

Grrr, this error is super weird ``` FAIL should layout text with flexDirection row in rtl Input: {flexDirection: 'column', alignItems: 'stretch', flex: 0, }, Output: {layout: {width: 200, height: 58, top: 0, left: 0}, }, Expected: {layout: {width: 200, height: 58, top: 0, left: 0}, }, ```

vjeux commented

2015-05-08 17:03:46 -07:00

(Migrated from github.com)

Okay, I just pushed a diff that shows all the children.

Input:    {flexDirection: 'column', alignItems: 'stretch', flex: 0, children: [
  {flexDirection: 'row', alignItems: 'stretch', flex: 0, width: 200, children: [
    {flexDirection: 'column', alignItems: 'stretch', flex: 0, margin: 20, padding: 20, },
  ]},
]},
Output:   {layout: {width: 200, height: 58, top: 0, left: 0}, children: [
  {layout: {width: 200, height: 58, top: 0, left: 0}, children: [
    {layout: {width: 172.422, height: 18, top: 20, left: 7.57812}, }, // <--- 7.57812
  ]},
]},
Expected: {layout: {width: 200, height: 58, top: 0, left: 0}, children: [
  {layout: {width: 200, height: 58, top: 0, left: 0}, children: [
    {layout: {width: 172.422, height: 18, top: 20, left: 15}, }, // <--- 15
  ]},
]},

Okay, I just pushed a diff that shows all the children. ``` Input: {flexDirection: 'column', alignItems: 'stretch', flex: 0, children: [ {flexDirection: 'row', alignItems: 'stretch', flex: 0, width: 200, children: [ {flexDirection: 'column', alignItems: 'stretch', flex: 0, margin: 20, padding: 20, }, ]}, ]}, Output: {layout: {width: 200, height: 58, top: 0, left: 0}, children: [ {layout: {width: 200, height: 58, top: 0, left: 0}, children: [ {layout: {width: 172.422, height: 18, top: 20, left: 7.57812}, }, // <--- 7.57812 ]}, ]}, Expected: {layout: {width: 200, height: 58, top: 0, left: 0}, children: [ {layout: {width: 200, height: 58, top: 0, left: 0}, children: [ {layout: {width: 172.422, height: 18, top: 20, left: 15}, }, // <--- 15 ]}, ]}, ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#82