fix: card example

pmndrs · Mar 26, 2024 · 45794f3 · 45794f3
1 parent da48ed8
commit 45794f3
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 36 deletions.
diff --git a/examples/card/index.html b/examples/card/index.html
@@ -7,7 +7,7 @@
     <title>Document</title>
   </head>
   <body style="margin: 0; overscroll-behavior: none">
-    <script type="module" src="./src/index.jsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/examples/card/src/App.jsx → examples/card/src/App.tsx b/examples/card/src/App.jsx → examples/card/src/App.tsx
@@ -9,10 +9,9 @@ import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from
 import { Switch } from '@/switch.js'
 import { useMemo, useRef } from 'react'
 import { signal } from '@preact/signals-core'
-import { geometry, easing } from 'maath'
+import { easing, geometry } from 'maath'
 import { Floating, Physical } from './components/Simulation.js'
 
-extend(geometry)
 setPreferredColorScheme('light')
 const notifications = [{ title: 'Your call has been confirmed.', description: '1 hour ago' }]
 
@@ -47,8 +46,11 @@ function Rig() {
     easing.damp3(state.camera.position, [state.pointer.x * 2, state.pointer.y * 2, 18], 0.35, delta)
     state.camera.lookAt(0, 0, -10)
   })
+  return null
 }
 
+const cardGeometry = new geometry.RoundedPlaneGeometry(1, 1, 0.025)
+
 export function CardPage() {
   const openRef = useRef(false)
   const translateY = useMemo(() => signal(-460), [])
@@ -71,8 +73,7 @@ export function CardPage() {
           transformTranslateZ={translateZ}
         >
           <Content transformTranslateZ={1} padding={14} keepAspectRatio={false} width="100%" height={400}>
-            <mesh>
-              <roundedPlaneGeometry args={[1, 1, 0.025]} />
+            <mesh geometry={cardGeometry}>
               <MeshPortalMaterial>
                 <color attach="background" args={['white']} />
                 <ambientLight intensity={Math.PI} />

diff --git a/examples/card/src/components/Simulation.jsx → examples/card/src/components/Simulation.tsx b/examples/card/src/components/Simulation.jsx → examples/card/src/components/Simulation.tsx
@@ -1,49 +1,49 @@
 import * as THREE from 'three'
 import { useGLTF, Float } from '@react-three/drei'
 import { useFrame } from '@react-three/fiber'
-import { Physics, RigidBody, BallCollider } from '@react-three/rapier'
+import { Physics, RigidBody, BallCollider, RapierRigidBody } from '@react-three/rapier'
 import { useMemo, useRef } from 'react'
 
 // Shapes by https://app.spline.design/library/a4eeaee4-be03-4df8-ab05-5a073eda2eb4
-export function Floating(props) {
+export function Floating(props: any) {
   const { nodes, materials } = useGLTF('/uikit/examples/card/smileys-transformed.glb')
   return (
     <group {...props} dispose={null}>
       <Float>
         <mesh
-          geometry={nodes.hash.geometry}
+          geometry={(nodes.hash as any).geometry}
           material={materials.PaletteMaterial001}
           position={[-4.095, 1.891, -2.58]}
           scale={0.216}
         />
       </Float>
       <Float>
         <mesh
-          geometry={nodes.star001.geometry}
+          geometry={(nodes.star001 as any).geometry}
           material={materials.PaletteMaterial001}
           position={[2.932, -2.747, -2.807]}
           scale={0.278}
         />
       </Float>
       <Float>
         <mesh
-          geometry={nodes.play.geometry}
+          geometry={(nodes.play as any).geometry}
           material={materials.PaletteMaterial001}
           position={[3.722, 0.284, -1.553]}
           scale={0.245}
         />
       </Float>
       <Float>
         <mesh
-          geometry={nodes.points.geometry}
+          geometry={(nodes.points as any).geometry}
           material={materials.PaletteMaterial001}
           position={[3, 2.621, -1.858]}
           scale={0.239}
         />
       </Float>
       <Float>
         <mesh
-          geometry={nodes.Ellipse.geometry}
+          geometry={(nodes.Ellipse as any).geometry}
           material={materials.PaletteMaterial001}
           position={[-3.275, -1, -3.389]}
           scale={0.317}
@@ -55,23 +55,24 @@ export function Floating(props) {
 
 export function Physical() {
   const { nodes, materials } = useGLTF('/uikit/examples/card/smileys-transformed.glb')
-  const meshes = useMemo(() => Object.values(nodes).filter((node) => node.isMesh), [nodes])
+  const meshes = useMemo(() => Object.values(nodes).filter((node) => 'isMesh' in node), [nodes])
   return (
     <Physics gravity={[0, 0, 0]}>
       {meshes.map((mesh) => (
-        <RigidShape key={mesh.uuid} mesh={mesh} />
+        <RigidShape key={mesh.uuid} mesh={mesh as THREE.Mesh} />
       ))}
-      <Pointer offset={0} />
+      <Pointer />
     </Physics>
   )
 }
 
-function RigidShape({ mesh, vec = new THREE.Vector3() }) {
-  const api = useRef()
+function RigidShape({ mesh, vec = new THREE.Vector3() }: { mesh: THREE.Mesh; vec?: THREE.Vector3 }) {
+  const api = useRef<RapierRigidBody>(null)
   useFrame((state, delta) => {
     delta = Math.min(0.1, delta)
     api.current?.applyImpulse(
       vec.copy(api.current.translation()).negate().add({ x: 0, y: 2, z: 0 }).multiplyScalar(0.2),
+      false,
     )
   })
   return (
@@ -94,7 +95,7 @@ function RigidShape({ mesh, vec = new THREE.Vector3() }) {
 }
 
 function Pointer({ vec = new THREE.Vector3() }) {
-  const ref = useRef()
+  const ref = useRef<RapierRigidBody>(null)
   useFrame(({ mouse, viewport }) => {
     ref.current?.setNextKinematicTranslation(
       vec.set((mouse.x * viewport.width) / 2, (mouse.y * viewport.height) / 2, 0),

diff --git a/examples/card/src/index.jsx b/examples/card/src/index.jsx
diff --git a/examples/card/src/index.tsx b/examples/card/src/index.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './styles.css'
+import App from './App.js'
+
+createRoot(document.getElementById('root') as HTMLCanvasElement).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/packages/uikit/scripts/flex-generate-setter.ts b/packages/uikit/scripts/flex-generate-setter.ts
@@ -1,6 +1,6 @@
 import { writeFileSync } from 'fs'
 import Yoga, { Edge, Gutter, Unit, Node } from 'yoga-layout'
-import { defaultYogaConfig } from '../src/flex/index.js'
+import { defaultYogaConfig } from '../src/flex/config.js'
 
 async function main() {
   const node = Yoga.Node.create(defaultYogaConfig)

diff --git a/packages/uikit/src/flex/config.ts b/packages/uikit/src/flex/config.ts
@@ -0,0 +1,7 @@
+import Yoga from 'yoga-layout'
+
+export const PointScaleFactor = 100
+
+export const defaultYogaConfig = Yoga.Config.create()
+defaultYogaConfig.setUseWebDefaults(true)
+defaultYogaConfig.setPointScaleFactor(PointScaleFactor)
diff --git a/packages/uikit/src/flex/node.ts b/packages/uikit/src/flex/node.ts
@@ -6,19 +6,14 @@ import { setMeasureFunc, yogaNodeEqual } from './utils.js'
 import { WithImmediateProperties } from '../properties/immediate.js'
 import { RefObject } from 'react'
 import { CameraDistanceRef } from '../order.js'
+import { defaultYogaConfig } from './config.js'
 
 export type YogaProperties = {
   [Key in keyof typeof setter]?: Parameters<(typeof setter)[Key]>[1]
 }
 
 export type Inset = [top: number, right: number, bottom: number, left: number]
 
-export const PointScaleFactor = 100
-
-export const defaultYogaConfig = Yoga.Config.create()
-defaultYogaConfig.setUseWebDefaults(true)
-defaultYogaConfig.setPointScaleFactor(PointScaleFactor)
-
 export class FlexNode implements WithImmediateProperties {
   public readonly size = signal<Vector2Tuple>([0, 0])
   public readonly relativeCenter = signal<Vector2Tuple>([0, 0])

diff --git a/packages/uikit/src/flex/utils.ts b/packages/uikit/src/flex/utils.ts
@@ -1,5 +1,5 @@
 import { Node, MeasureFunction } from 'yoga-layout'
-import { PointScaleFactor } from './index.js'
+import { PointScaleFactor } from './config.js'
 
 export function yogaNodeEqual(n1: Node, n2: Node): boolean {
   return (n1 as any)['M']['O'] === (n2 as any)['M']['O']