disableSizeRecalc option in Flex

[bbohlender]

Fixes #48

Option to disable the automatic calculation of the bounding box, through the Flex-Element. Allows the developer to talk to the yoga node directly and change the node's size without any rerender from react and gives much more control over the yoga node.

I've also added 3 hooks:

• useNode-> get the yoga node
• useSetSize -> set the yoga node size explicitly (uses useNode)
• useSyncGeometrySize -> synchronize the yoga node size with a mesh explicitly (uses useSetSize)

useSetSize and useSyncGeometrySize might be very specific, but useNode would be required to make these implementations (since I think the context is not exported). Having the useSyncGeometrySize hook allows to implement sth. like this:

import React from "react"
import { useSyncGeometrySize } from "@react-three/flex"
import { Text } from "@react-three/drei"

export function FlexText({ ...props }: React.ComponentProps<typeof Text>) {
    const onSync = useSyncGeometrySize()
    return (
        <Text onSync={onSync} {...props} />
    )
}

which would then be used inside a flex & box element:

<Flex disableSizeRecalc><Box><FlexText>Hello World!</FlexText></Box></Flex>

But as soon as someone uses disableSizeRecalc he now has to have every element declare its own size explicitly (which is intended in this case).

[giulioz]

Is it ready for merge now?

[bbohlender]

Is it ready for merge now?

Regarding the prettier change, it seems like it's done automatically by the pre-commit pipeline. So I can't remove the prettier change directly. If that's fine, then the PR would be done. 😄 Thank you for your fast responses 👍