variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add instant editable cameras to the r3f extension (#315)

Browse source 
Add spruced up editable orthographic/perspective camera
This commit is contained in:
Andrew Prifer 2022-10-13 20:14:53 +02:00 • committed by GitHub
parent 25cf1d7fe8
commit 6497bf2097
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 182 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/r3f/src/main/editable.tsx
View file

@ -1,4 +1,4 @@
import type {ComponentProps, ComponentType, RefAttributes} from 'react'
import type {ComponentProps, ComponentType, Ref, RefAttributes} from 'react'
import React, {
forwardRef,
useEffect,
@ -64,6 +64,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
const invalidate = useInvalidate()
// warn about cameras in r3f
useEffect(() => {
if (
Component === 'perspectiveCamera' ||
@ -95,6 +96,7 @@ Then you can use it in your JSX like any other editable component. Note the make
}
}, [Component, theatreKey])
// create sheet object and add editable to store
useLayoutEffect(() => {
if (!sheet) return
const sheetObject = sheet.object(
@ -199,27 +201,29 @@ Then you can use it in your JSX like any other editable component. Note the make
primitive: editable('primitive', null),
} as unknown as {
[Property in Keys]: React.ForwardRefExoticComponent<
React.PropsWithoutRef<
React.PropsWithRef<
Omit<JSX.IntrinsicElements[Property], 'visible'> & {
theatreKey: string
visible?: boolean | 'editor'
additionalProps?: $FixMe
objRef?: $FixMe
} & React.RefAttributes<JSX.IntrinsicElements[Property]>
// not exactly sure how to get the type of the threejs object itself
ref?: Ref<unknown>
}
>
>
} & {
primitive: React.ForwardRefExoticComponent<
React.PropsWithoutRef<
{
object: any
theatreKey: string
visible?: boolean | 'editor'
additionalProps?: $FixMe
objRef?: $FixMe
editableType: keyof JSX.IntrinsicElements
} & React.RefAttributes<JSX.IntrinsicElements['primitive']>
> & {
React.PropsWithRef<{
object: any
theatreKey: string
visible?: boolean | 'editor'
additionalProps?: $FixMe
objRef?: $FixMe
editableType: keyof JSX.IntrinsicElements
// not exactly sure how to get the type of the threejs object itself
ref?: Ref<unknown>
}> & {
// Have to reproduce the primitive component's props here because we need to
// lift this index type here to the outside to make auto-complete work
[props: string]: any