From f5f252f7e4a00932df52f0565852f2e8e646e1e3 Mon Sep 17 00:00:00 2001 From: Rob Sawyer Date: Tue, 30 Aug 2022 19:24:44 +0900 Subject: [PATCH] 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 | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/core/Center.tsx b/src/core/Center.tsx index 9696627fe..45501694f 100644 --- a/src/core/Center.tsx +++ b/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(function Center( - { children, left, right, top, bottom, ...props }, + { children, left, right, top, bottom, onCentered, ...props }, fRef ) { const outer = React.useRef(null!) @@ -26,6 +29,17 @@ export const Center = React.forwardRef(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 (