Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flex with text #77

Open
netgfx opened this issue Mar 19, 2022 · 2 comments
Open

Flex with text #77

netgfx opened this issue Mar 19, 2022 · 2 comments

Comments

@netgfx
Copy link

netgfx commented Mar 19, 2022

I'm wondering how could we achieve scaling a Box and their contents based on the size of the text inside. The text could change dynamically so the box (or surrounding element) should also resize.

I have this so far https://codesandbox.io/s/angry-maxwell-ovw6c5?file=/src/App.js

Thanks!

@aronanol45
Copy link

Hi , did you found something for this one ? Facing same issue actually

@netgfx
Copy link
Author

netgfx commented Dec 18, 2024

Hi , did you found something for this one ? Facing same issue actually

A bit more complicated but I made this and works: https://codesandbox.io/p/sandbox/r3f-ts-template-nckjsv

Adding the component here for reference as well

import { Flex, Box as FlexBox } from '@react-three/flex'
import { Text } from '@react-three/drei'
import { useRef, useState, useEffect, useLayoutEffect } from 'react'
import { useThree } from '@react-three/fiber'
interface TextBoxProps {
  text: string
  padding?: number
  fontSize?: number
}

export const TextBox: FC<TextBoxProps> = ({ text, padding = 0.2, fontSize = 0.2 }) => {
  const textRef = useRef<any>(null)
  const [dimensions, setDimensions] = useState({ width: 1, height: 1 })
  const [isTextReady, setIsTextReady] = useState(false)

  // Reset text ready state when text changes
  useEffect(() => {
    setIsTextReady(false)
  }, [text])

  useLayoutEffect(() => {
    if (textRef.current && isTextReady) {
      const bbox = textRef.current.geometry?.boundingBox
      if (bbox) {
        const width = Math.abs(bbox.max.x - bbox.min.x)
        const height = Math.abs(bbox.max.y - bbox.min.y)

        // Only update if we have valid, non-zero dimensions
        if (width > 0 && height > 0) {
          setDimensions({
            width: width + padding * 2,
            height: height + padding * 2,
          })
        }
      }
    }
  }, [text, padding, fontSize, isTextReady])

  return (
    <Flex
      size={[dimensions.width, dimensions.height, 0.1]}
      position={[0, 0, 0]}
      flexDirection="row"
      alignItems="center"
      justifyContent="center"
    >
      <FlexBox centerAnchor margin={padding} width="auto">
        <mesh>
          <boxGeometry args={[dimensions.width, dimensions.height, 0.1]} />
          <meshStandardMaterial color="#444444" />
        </mesh>

        <Text
          ref={textRef}
          position={[0, 0, 0.051]}
          fontSize={fontSize}
          color="white"
          anchorX="center"
          anchorY="middle"
          onSync={() => {
            setIsTextReady(true)
          }}
        >
          {text}
        </Text>
      </FlexBox>
    </Flex>
  )
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants