feat: add aspect ratio

examples/config/examples.ts

@@ -57,6 +57,11 @@ const examples: Example[] = [
     pathname: "interactions",
     component: React.lazy(() => import("@/examples/interactions")),
   },
+  {
+    title: "Aspect Ratio",
+    pathname: "aspect-ratio",
+    component: React.lazy(() => import("@/examples/aspect-ratio")),
+  },
 ];
 
 export default examples;

examples/examples/aspect-ratio.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Example from "@/components/example";
+import { Layer } from "react-xr-ui";
+import ViewCode from "@/components/view-code";
+import Button from "@/components/button";
+
+export default function RelativeSizing() {
+  const [aspectRatio, setAspectRatio] = React.useState(16 / 9);
+
+  return (
+    <>
+      <Example>
+        <Layer width={1} height={0.1} gap={0.05} position-y={0.6}>
+          <Button
+            width={0.1}
+            height={0.1}
+            fontSize={0.35}
+            textContent="16:9"
+            selected={aspectRatio === 16 / 9}
+            onClick={() => setAspectRatio(16 / 9)}
+          />
+          <Button
+            width={0.1}
+            height={0.1}
+            fontSize={0.35}
+            textContent="1:1"
+            selected={aspectRatio === 1}
+            onClick={() => setAspectRatio(1)}
+          />
+          <Button
+            width={0.1}
+            height={0.1}
+            fontSize={0.35}
+            textContent="2:4"
+            selected={aspectRatio === 2 / 4}
+            onClick={() => setAspectRatio(2 / 4)}
+          />
+        </Layer>
+        <Layer
+          height={1}
+          aspectRatio={aspectRatio}
+          gap={0.1}
+          backgroundColor="crimson"
+        />
+      </Example>
+      <ViewCode pathname="aspect-ratio" />
+    </>
+  );
+}

src/components/layer.tsx

@@ -33,6 +33,7 @@ function Layer(
     autoLayout = true,
     width,
     height,
+    aspectRatio,
     opacity = 1,
     backgroundColor = "transparent",
     backgroundImage,
@@ -140,8 +141,22 @@ function Layer(
     } else {
       size.height = height ?? 1;
     }
+    if (aspectRatio !== undefined) {
+      if (width === undefined) {
+        size.width = size.height * aspectRatio;
+      }
+      if (height === undefined) {
+        size.height = size.width * aspectRatio;
+      }
+    }
     return size;
-  }, [width, height, layerContext.parentUuid, layerContext.parentSize]);
+  }, [
+    width,
+    height,
+    layerContext.parentUuid,
+    layerContext.parentSize,
+    aspectRatio,
+  ]);
 
   const uuid = React.useMemo(() => {
     return THREE.MathUtils.generateUUID();

src/types.ts

@@ -39,6 +39,7 @@ export type LayerProps = GroupProps & {
   resolution?: number;
   width?: number | string;
   height?: number | string;
+  aspectRatio?: number;
   opacity?: number;
   backgroundColor?: string;
   backgroundImage?: string;