feat: added onCentered callback in the useLayoutEffect (#1020)

* feat: added onCentered callback in the useLayoutEffect

* fix: added more props to the onCentered callback

* fix: only fire onCentered when width and height are greater than 1

src/core/Center.tsx

@@ -1,15 +1,18 @@
 import { Box3, Vector3, Sphere, Group } from 'three'
 import * as React from 'react'
 
+type OnCenteredFunction = (bounds: object) => void
+
 type Props = JSX.IntrinsicElements['group'] & {
   top?: boolean
   right?: boolean
   bottom?: boolean
   left?: boolean
+  onCentered?: OnCenteredFunction
 }
 
 export const Center = React.forwardRef<Group, Props>(function Center(
-  { children, left, right, top, bottom, ...props },
+  { children, left, right, top, bottom, onCentered, ...props },
   fRef
 ) {
   const outer = React.useRef<Group>(null!)
@@ -26,6 +29,17 @@ export const Center = React.forwardRef<Group, Props>(function Center(
     const vAlign = top ? height / 2 : bottom ? -height / 2 : 0
     const hAlign = left ? -width / 2 : right ? width / 2 : 0
     outer.current.position.set(-center.x + hAlign, -center.y + vAlign, -center.z)
+    if (typeof onCentered !== 'undefined' && width > 1 && height > 1) {
+      onCentered({
+        boundingBox: box3,
+        center: box3.getCenter(center),
+        boundingSphere: box3.getBoundingSphere(sphere),
+        width,
+        height,
+        verticalAlignment: vAlign,
+        horizontalAlignment: hAlign,
+      })
+    }
   }, [children])
   return (
     <group ref={fRef} {...props}>