Added centerAnchor prop on Flex, which centers it on position

With centerAnchor={true} Flex starts behaving like a usual threejs element -
it centers itself on a position, rather than having this position as left-upper corner

Besides the fact that this easier to work with (now you don't have to do this manually via `-width / 2`),
the usecase is when you rotate the Flex to face the camera.
If you do it without the centerAnchor with `position={[-width/2, height/2]}`, rotation will behave like the center is shifted (when in fact, it's not)

src/Flex.tsx

@@ -11,6 +11,7 @@ import {
   getDepthAxis,
   getFlex2DSize,
   getOBBSize,
+  getRootShift,
 } from './util'
 import { boxContext, flexContext, SharedFlexContext, SharedBoxContext } from './context'
 import type { R3FlexProps, FlexYogaDirection, FlexPlane } from './props'
@@ -26,6 +27,10 @@ export type FlexProps = PropsWithChildren<
     scaleFactor?: number
     onReflow?: (totalWidth: number, totalHeight: number) => void
     disableSizeRecalc?: boolean
+    /** Centers flex container in position.
+     *
+     * !NB center is based on provided flex size, not on the actual content */
+    centerAnchor?: boolean
   }> &
     R3FlexProps &
     Omit<ReactThreeFiber.Object3DNode<THREE.Group, typeof Group>, 'children'>
@@ -49,6 +54,7 @@ export function Flex({
   scaleFactor = 100,
   onReflow,
   disableSizeRecalc,
+  centerAnchor: rootCenterAnchor,
 
   // flex props
 
@@ -272,8 +278,8 @@ export function Flex({
     [requestReflow, registerBox, unregisterBox, scaleFactor]
   )
   const sharedBoxContext = useMemo<SharedBoxContext>(
-    () => ({ node, size: [flexWidth, flexHeight] }),
-    [node, flexWidth, flexHeight]
+    () => ({ node, size: [flexWidth, flexHeight], centerAnchor: rootCenterAnchor }),
+    [node, flexWidth, flexHeight, rootCenterAnchor]
   )
 
   // Handles the reflow procedure
@@ -306,6 +312,9 @@ export function Flex({
     // Perform yoga layout calculation
     node.calculateLayout(flexWidth * scaleFactor, flexHeight * scaleFactor, yogaDirection_)
 
+    const rootWidth = node.getComputedWidth()
+    const rootHeight = node.getComputedHeight()
+
     let minX = 0
     let maxX = 0
     let minY = 0
@@ -314,15 +323,19 @@ export function Flex({
     // Reposition after recalculation
     boxesRef.current.forEach(({ group, node, centerAnchor }) => {
       const { left, top, width, height } = node.getComputedLayout()
+      const [mainAxisShift, crossAxisShift] = getRootShift(rootCenterAnchor, rootWidth, rootHeight, node)
+
       const position = vectorFromObject({
-        [mainAxis]: (left + (centerAnchor ? width / 2 : 0)) / scaleFactor,
-        [crossAxis]: -(top + (centerAnchor ? height / 2 : 0)) / scaleFactor,
+        [mainAxis]: (mainAxisShift + left + (centerAnchor ? width / 2 : 0)) / scaleFactor,
+        [crossAxis]: -(crossAxisShift + top + (centerAnchor ? height / 2 : 0)) / scaleFactor,
         [depthAxis]: 0,
       } as any)
+
       minX = Math.min(minX, left)
       minY = Math.min(minY, top)
       maxX = Math.max(maxX, left + width)
       maxY = Math.max(maxY, top + height)
+
       group.position.copy(position)
     })
 

src/util.ts

@@ -155,3 +155,20 @@ export const getOBBSize = (object: Object3D, root: Object3D, bb: Box3, size: Vec
   object.matrixAutoUpdate = oldMatrixAutoUpdate
   root.updateMatrixWorld()
 }
+
+const getIsTopLevelChild = (node: YogaNode) => !node.getParent()?.getParent()
+
+/** @returns [mainAxisShift, crossAxisShift] */
+export const getRootShift = (
+  rootCenterAnchor: boolean | undefined,
+  rootWidth: number,
+  rootHeight: number,
+  node: YogaNode
+) => {
+  if (!rootCenterAnchor || !getIsTopLevelChild(node)) {
+    return [0, 0]
+  }
+  const mainAxisShift = -rootWidth / 2
+  const crossAxisShift = -rootHeight / 2
+  return [mainAxisShift, crossAxisShift] as const
+}