Axis orientation

[promontis]

Hi all!

First of all, thanks for this awesome library! It is really really cool!

I've had a hard time figuring out how the axis orientation works. I've created a sandbox here to get some more grip on it: https://codesandbox.io/s/hardcore-fog-0eqrh?file=/src/App.js

Note that I've added the AxesHelper to help me know which axis is what.

While typing this everything started making a lot more sense... hopefully this process also helps others...

I've concluded that - when I choose flexDirection="row" - it first layouts the boxes (you pick how many boxes you want, but after 4 boxes it should wrap) on the axis of the first character of the plane. So say, for plane XY the boxes layout in the direction of the X axis, but after 3 boxes, the wrapping occurs on the Y axis. Hence, XY. When I pick flexDirection="column" it does the same thing, but now it layouts on Y first (second character) and then wraps on X.

This is consistent for all planes. The difference between XY and XZ is that the first one will wrap on the Y axis, and the second will wrap on the Z axis.

When there is no wrapping configured, there is no difference between selecting XY or XZ - when selected flexDirection="row".

I do wonder why it layouts like this:

1. XY and row: on the X axis, from the origin (of the scene) TO the direction of the AxesHelper X line
2. XY and column: on the Y axis, from the origin (of the scene) AWAY from the direction of the AxesHelper Y line
3. YZ and row: on the Y axis, from the origin (of the scene) TO the direction of the AxesHelper Y line
4. YZ and column: on the Z axis, from the origin (of the scene) AWAY from the direction of the AxesHelper Z line
5. XZ and row: on the X axis, from the origin (of the scene) TO the direction of the AxesHelper X line (same as 1.)
6. XZ and column: on the Z axis, from the origin (of the scene) AWAY from the direction of the AxesHelper Z line (same as 4.)

So: A) I cannot layout AWAY from the direction of the AxesHelper X line. Only TO (1. and 5.) B) I can layout TO and AWAY to/from the direction of the AxesHelper Y line (2. and 3.) C) I cannot layout TO the direction of the AxesHelper Z line. Only AWAY (4. and 6.)

Is this by design? If so, how can I do A or C? Should I flip something, so that it goes to the correct direction?

[promontis]

I've added flipping like this...

const [flipMainAxis, setFlipMainAxis] = useState(false);
  const [flipSecondaryAxis, setFlipSecondaryAxis] = useState(false);

  const mainAxis = flexDirection === "row" ? plane[0] : plane[1];
  const secondaryAxis = flexDirection === "row" ? plane[1] : plane[0];
  let scale = [
    (flipMainAxis && mainAxis === "x") ||
    (flipSecondaryAxis && secondaryAxis === "x")
      ? -1
      : 1,
    (flipMainAxis && mainAxis === "y") ||
    (flipSecondaryAxis && secondaryAxis === "y")
      ? -1
      : 1,
    (flipMainAxis && mainAxis === "z") ||
    (flipSecondaryAxis && secondaryAxis === "z")
      ? -1
      : 1
  ];

<group scale={scale}>
              <Flex ...>
</group>

Is this the way to go?

[giulioz]

Hi @promontis, really sorry for inactivity on your issue, we will look at it in depth ASAP. Just a little tip: have you considered the -reverse variant? Like row-reverse and column-reverse.