fix: stage center props

README.md

@@ -2777,20 +2777,6 @@ This component makes its contents float or hover.
 Creates a "stage" with proper studio lighting, 0/0/0 top-centred, model-shadows, ground-shadows and optional zoom to fit. Make sure to set `makeDefault` on your controls when `adjustCamera` is true!
 
 ```tsx
-type StageShadows = Partial<AccumulativeShadowsProps> &
-  Partial<RandomizedLightProps> &
-  Partial<ContactShadowsProps> & {
-    type: 'contact' | 'accumulative'
-    /** Shadow plane offset, default: 0 */
-    offset?: number
-    /** Shadow bias, default: -0.0001 */
-    bias?: number
-    /** Shadow normal bias, default: 0 */
-    normalBias?: number
-    /** Shadow map size, default: 1024 */
-    size?: number
-  }
-
 type StageProps = {
   /** Lighting setup, default: "rembrandt" */
   preset?:
@@ -2807,7 +2793,23 @@ type StageProps = {
   environment?: PresetsType | Partial<EnvironmentProps>
   /** The lighting intensity, default: 0.5 */
   intensity?: number
+  /** To adjust centering, default: undefined */
+  center?: Partial<CenterProps>
 }
+
+type StageShadows = Partial<AccumulativeShadowsProps> &
+  Partial<RandomizedLightProps> &
+  Partial<ContactShadowsProps> & {
+    type: 'contact' | 'accumulative'
+    /** Shadow plane offset, default: 0 */
+    offset?: number
+    /** Shadow bias, default: -0.0001 */
+    bias?: number
+    /** Shadow normal bias, default: 0 */
+    normalBias?: number
+    /** Shadow map size, default: 1024 */
+    size?: number
+  }
 ```
 
 By default it gives you contact shadows and auto-centering.

src/core/Center.tsx

@@ -17,7 +17,7 @@ export type OnCenterCallbackProps = {
   depthAlignment: number
 }
 
-type CenterProps = JSX.IntrinsicElements['group'] & {
+export type CenterProps = {
   top?: boolean
   right?: boolean
   bottom?: boolean
@@ -36,7 +36,7 @@ type CenterProps = JSX.IntrinsicElements['group'] & {
   onCentered?: (props: OnCenterCallbackProps) => void
 }
 
-export const Center = React.forwardRef<Group, CenterProps>(function Center(
+export const Center = React.forwardRef<Group, JSX.IntrinsicElements['group'] & CenterProps>(function Center(
   {
     children,
     disableX,

src/core/Stage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { EnvironmentProps, Environment } from './Environment'
 import { ContactShadowsProps, ContactShadows } from './ContactShadows'
-import { Center } from './Center'
+import { CenterProps, Center } from './Center'
 import {
   AccumulativeShadowsProps,
   RandomizedLightProps,
@@ -60,6 +60,8 @@ type StageProps = {
   environment?: PresetsType | Partial<EnvironmentProps>
   /** The lighting intensity, default: 0.5 */
   intensity?: number
+  /** To adjust centering, default: undefined */
+  center?: Partial<CenterProps>
 }
 
 function Refit({ radius, adjustCamera }) {
@@ -72,6 +74,7 @@ function Refit({ radius, adjustCamera }) {
 
 export function Stage({
   children,
+  center,
   adjustCamera = true,
   intensity = 0.5,
   shadows = 'contact',
@@ -109,10 +112,13 @@ export function Stage({
       <Bounds fit={!!adjustCamera} clip={!!adjustCamera} margin={Number(adjustCamera)} observe {...props}>
         <Refit radius={radius} adjustCamera={adjustCamera} />
         <Center
+          {...center}
           position={[0, shadowOffset / 2, 0]}
-          onCentered={({ width, height, depth, boundingSphere, ...data }) =>
+          onCentered={(props) => {
+            const { width, height, depth, boundingSphere } = props
             set({ radius: boundingSphere.radius, width, height, depth })
-          }
+            if (center?.onCentered) center.onCentered(props)
+          }}
         >
           {children}
         </Center>