Meh

Author: hmans

apps/scene-ui-examples/src/App.tsx

@@ -1,15 +1,20 @@
 import "r3f-stage/styles.css"
 import { Application } from "r3f-stage"
 import * as UI from "@hmans/scene-ui"
+import { RectProps } from "@hmans/scene-ui"
 
 export const App = () => {
   return (
     <Application>
       <UI.Canvas width={8} height={4} debug>
-        <UI.Rect left={"50%"} top={"100%"} bottom={0} right={"50%"}>
-          <UI.Rect top={-1.25} bottom={0.25} left={2} right={2} />
-        </UI.Rect>
+        <BottomCenter>
+          <UI.Rect bottom={1.5} width={4} height={1} />
+        </BottomCenter>
       </UI.Canvas>
     </Application>
   )
 }
+
+const BottomCenter = (props: RectProps) => (
+  <UI.Rect left={"50%"} top={"100%"} bottom={0} right={"50%"} {...props} />
+)

packages/hmans-scene-ui/src/components/Rect.tsx

@@ -72,8 +72,8 @@ export const Rect = ({
   const bottom = resolveRatio(_bottom, parent.height)
   const left = resolveRatio(_left, parent.width)
 
-  const width = parent.width - left - right
-  const height = parent.height - top - bottom
+  const width = _width ? _width : parent.width - left - right
+  const height = _height ? _height : parent.height - top - bottom
 
   return (
     <group {...props}>