From 45794f398fa0b118ac0c5545ada9c2e92fd8b4e8 Mon Sep 17 00:00:00 2001 From: Bela Bohlender Date: Tue, 26 Mar 2024 17:51:25 +0100 Subject: [PATCH] fix: card example --- examples/card/index.html | 2 +- examples/card/src/{App.jsx => App.tsx} | 9 ++++--- .../{Simulation.jsx => Simulation.tsx} | 27 ++++++++++--------- examples/card/src/index.jsx | 10 ------- examples/card/src/index.tsx | 10 +++++++ .../uikit/scripts/flex-generate-setter.ts | 2 +- packages/uikit/src/flex/config.ts | 7 +++++ packages/uikit/src/flex/node.ts | 7 +---- packages/uikit/src/flex/utils.ts | 2 +- 9 files changed, 40 insertions(+), 36 deletions(-) rename examples/card/src/{App.jsx => App.tsx} (97%) rename examples/card/src/components/{Simulation.jsx => Simulation.tsx} (78%) delete mode 100644 examples/card/src/index.jsx create mode 100644 examples/card/src/index.tsx create mode 100644 packages/uikit/src/flex/config.ts diff --git a/examples/card/index.html b/examples/card/index.html index 8f1dd110..cf853ae4 100644 --- a/examples/card/index.html +++ b/examples/card/index.html @@ -7,7 +7,7 @@ Document - +
diff --git a/examples/card/src/App.jsx b/examples/card/src/App.tsx similarity index 97% rename from examples/card/src/App.jsx rename to examples/card/src/App.tsx index 74c4d36e..e6a81df6 100644 --- a/examples/card/src/App.jsx +++ b/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} > - - + diff --git a/examples/card/src/components/Simulation.jsx b/examples/card/src/components/Simulation.tsx similarity index 78% rename from examples/card/src/components/Simulation.jsx rename to examples/card/src/components/Simulation.tsx index 41237356..332c9377 100644 --- a/examples/card/src/components/Simulation.jsx +++ b/examples/card/src/components/Simulation.tsx @@ -1,17 +1,17 @@ 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 ( Object.values(nodes).filter((node) => node.isMesh), [nodes]) + const meshes = useMemo(() => Object.values(nodes).filter((node) => 'isMesh' in node), [nodes]) return ( {meshes.map((mesh) => ( - + ))} - + ) } -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(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(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 deleted file mode 100644 index 4e1e0d75..00000000 --- a/examples/card/src/index.jsx +++ /dev/null @@ -1,10 +0,0 @@ -import { StrictMode } from "react" -import { createRoot } from "react-dom/client" -import "./styles.css" -import App from "./App" - -createRoot(document.getElementById("root")).render( - - - , -) diff --git a/examples/card/src/index.tsx b/examples/card/src/index.tsx new file mode 100644 index 00000000..826e9194 --- /dev/null +++ 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( + + + , +) diff --git a/packages/uikit/scripts/flex-generate-setter.ts b/packages/uikit/scripts/flex-generate-setter.ts index 0598b918..0707a494 100644 --- 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 new file mode 100644 index 00000000..0028ac00 --- /dev/null +++ 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 index 8662d478..c25b9ec1 100644 --- a/packages/uikit/src/flex/node.ts +++ b/packages/uikit/src/flex/node.ts @@ -6,6 +6,7 @@ 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] @@ -13,12 +14,6 @@ export type YogaProperties = { 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([0, 0]) public readonly relativeCenter = signal([0, 0]) diff --git a/packages/uikit/src/flex/utils.ts b/packages/uikit/src/flex/utils.ts index 56474c49..e598684c 100644 --- 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']