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

Replace uniqueName with theatreKey (#285)

Browse source
This commit is contained in:
Andrew Prifer 2022-09-14 19:36:49 +07:00 committed by GitHub
parent ce79d3cd95
commit 8680f9d89e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 111 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
compatibility-tests/test-cra-react18/src/index.js
View file

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
function Plane({color, theatreKey, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -33,20 +33,20 @@ function App() {
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
</SheetProvider>

18
compatibility-tests/test-next/pages/index.js
View file

@ -12,9 +12,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
function Plane({color, theatreKey, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -32,20 +32,20 @@ function App() {
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -53,28 +53,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
</SheetProvider>

18
compatibility-tests/test-parcel1-react17/src/index.js
View file

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
function Plane({color, theatreKey, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -33,20 +33,20 @@ function App() {
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
</SheetProvider>

18
compatibility-tests/test-parcel1-react18/src/index.js
View file

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
function Plane({color, theatreKey, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -33,20 +33,20 @@ function App() {
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
</SheetProvider>

18
compatibility-tests/test-parcel2-react18/src/index.js
View file

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}) {
function Plane({color, theatreKey, ...props}) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -33,20 +33,20 @@ function App() {
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
</SheetProvider>

18
compatibility-tests/test-vite-react18/src/main.tsx
View file

@ -13,9 +13,9 @@ if (process.env.NODE_ENV === 'development' && typeof window !== 'undefined') {
// credit: https://codesandbox.io/s/camera-pan-nsb7f
function Plane({color, uniqueName, ...props}: any) {
function Plane({color, theatreKey, ...props}: any) {
return (
<e.mesh {...props} uniqueName={uniqueName}>
<e.mesh {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -33,20 +33,20 @@ function App() {
>
<SheetProvider sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}>
{/* @ts-ignore */}
<e.orthographicCamera makeDefault uniqueName="Camera" />
<e.orthographicCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -54,28 +54,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
</SheetProvider>

20
examples/r3f-cra/src/App.js
View file

@ -51,7 +51,7 @@ function Button() {
onClick={() => set(!zoom)}
onPointerOver={() => setActive(true)}
onPointerOut={() => setActive(false)}
uniqueName="The Button"
theatreKey="The Button"
>
<sphereBufferGeometry args={[0.75, 64, 64]} />
<meshPhysicalMaterial
@ -75,9 +75,9 @@ function Button() {
)
}
function Plane({color, uniqueName, ...props}) {
function Plane({color, theatreKey, ...props}) {
return (
<e.mesh receiveShadow castShadow {...props} uniqueName={uniqueName}>
<e.mesh receiveShadow castShadow {...props} theatreKey={theatreKey}>
<boxBufferGeometry />
<meshStandardMaterial color={color} />
</e.mesh>
@ -99,20 +99,20 @@ function App() {
sheet={getProject('Playground - R3F').sheet('R3F-Canvas')}
>
{/* @ts-ignore */}
<e.perspectiveCamera makeDefault uniqueName="Camera" />
<e.perspectiveCamera makeDefault theatreKey="Camera" />
<ambientLight intensity={0.4} />
<e.pointLight
position={[-10, -10, 5]}
intensity={2}
color="#ff20f0"
uniqueName="Light 1"
theatreKey="Light 1"
/>
<e.pointLight
position={[0, 0.5, -1]}
distance={1}
intensity={2}
color="#e4be00"
uniqueName="Light 2"
theatreKey="Light 2"
/>
<group position={[0, -0.9, -3]}>
<Plane
@ -120,28 +120,28 @@ function App() {
rotation-x={-Math.PI / 2}
position-z={2}
scale={[4, 20, 0.2]}
uniqueName="plane1"
theatreKey="plane1"
/>
<Plane
color="#e4be00"
rotation-x={-Math.PI / 2}
position-y={1}
scale={[4.2, 0.2, 4]}
uniqueName="plane2"
theatreKey="plane2"
/>
<Plane
color="#736fbd"
rotation-x={-Math.PI / 2}
position={[-1.7, 1, 3.5]}
scale={[0.5, 4, 4]}
uniqueName="plane3"
theatreKey="plane3"
/>
<Plane
color="white"
rotation-x={-Math.PI / 2}
position={[0, 4.5, 3]}
scale={[2, 0.03, 4]}
uniqueName="plane4"
theatreKey="plane4"
/>
</group>
<Button />

2
packages/playground/src/shared/custom-editable-components/App.tsx
View file

@ -20,7 +20,7 @@ function App() {
>
<SheetProvider sheet={getProject('Space').sheet('Scene')}>
<ambientLight intensity={0.75} />
<EditablePoints uniqueName="points">
<EditablePoints theatreKey="points">
<torusKnotGeometry args={[1, 0.3, 128, 64]} />
<meshNormalMaterial />
</EditablePoints>

2
packages/playground/src/shared/hello-world-extension-dataverse/App.tsx
View file

@ -22,7 +22,7 @@ function App() {
>
<SheetProvider sheet={getProject('Space').sheet('Scene')}>
<ambientLight intensity={0.75} />
<e.group uniqueName="trefoil">
<e.group theatreKey="trefoil">
<TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
<meshNormalMaterial />
</TorusKnot>

2
packages/playground/src/shared/hello-world-extension-using-sheet-object/App.tsx
View file

@ -22,7 +22,7 @@ function App() {
>
<SheetProvider sheet={getProject('Space').sheet('Scene')}>
<ambientLight intensity={0.75} />
<e.group uniqueName="trefoil">
<e.group theatreKey="trefoil">
<TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
<meshNormalMaterial />
</TorusKnot>

2
packages/playground/src/shared/hello-world-extension/App.tsx
View file

@ -26,7 +26,7 @@ function App() {
>
<SheetProvider sheet={sheet}>
<ambientLight intensity={0.75} />
<e.group uniqueName="trefoil">
<e.group theatreKey="trefoil">
<TorusKnot scale={[1, 1, 1]} args={[1, 0.3, 128, 64]}>
<meshNormalMaterial />
</TorusKnot>

16
packages/playground/src/shared/instances/App.tsx
View file

@ -19,28 +19,28 @@ function Model({
return (
<e.group
uniqueName={`Transforms for Rocket: ${instance ?? 'default'}`}
theatreKey={`Transforms for Rocket: ${instance ?? 'default'}`}
{...props}
>
<SheetProvider sheet={getProject('Space').sheet('Rocket', instance)}>
<group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
<group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
<e.mesh
uniqueName="Thingy"
theatreKey="Thingy"
receiveShadow
castShadow
geometry={nodes.planet001.geometry}
material={nodes.planet001.material}
/>
<e.mesh
uniqueName="Debris 2"
theatreKey="Debris 2"
receiveShadow
castShadow
geometry={nodes.planet002.geometry}
material={nodes.planet002.material}
/>
<e.mesh
uniqueName="Debris 1"
theatreKey="Debris 1"
geometry={nodes.planet003.geometry}
material={nodes.planet003.material}
/>
@ -70,7 +70,7 @@ function App() {
<color attach="background" args={[bg]} />
<ambientLight intensity={0.75} />
<EditableCamera
uniqueName="Camera"
theatreKey="Camera"
makeDefault
position={[0, 0, 0]}
fov={75}
@ -78,12 +78,12 @@ function App() {
far={70}
>
<e.pointLight
uniqueName="Light 1"
theatreKey="Light 1"
intensity={1}
position={[-10, -25, -10]}
/>
<e.spotLight
uniqueName="Light 2"
theatreKey="Light 2"
castShadow
intensity={2.25}
angle={0.2}
@ -92,7 +92,7 @@ function App() {
shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001}
/>
<e.directionalLight uniqueName="Light 3" />
<e.directionalLight theatreKey="Light 3" />
</EditableCamera>
<Suspense fallback={null}>
<RefreshSnapshot />

14
packages/playground/src/shared/r3f-rocket/App.tsx
View file

@ -17,21 +17,21 @@ function Model({url}: {url: string}) {
<group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
<group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
<e.mesh
uniqueName="Example Namespace / Thingy"
theatreKey="Example Namespace / Thingy"
receiveShadow
castShadow
geometry={nodes.planet001.geometry}
material={nodes.planet001.material}
/>
<e.mesh
uniqueName="Example Namespace / Debris 2"
theatreKey="Example Namespace / Debris 2"
receiveShadow
castShadow
geometry={nodes.planet002.geometry}
material={nodes.planet002.material}
/>
<e.mesh
uniqueName="Debris 1"
theatreKey="Debris 1"
geometry={nodes.planet003.geometry}
material={nodes.planet003.material}
/>
@ -65,18 +65,18 @@ function App() {
<color attach="background" args={[bg]} />
<ambientLight intensity={0.75} />
<EditableCamera
uniqueName="Camera"
theatreKey="Camera"
makeDefault
position={[0, 0, 16]}
fov={75}
>
<e.pointLight
uniqueName="Light 1"
theatreKey="Light 1"
intensity={1}
position={[-10, -25, -10]}
/>
<e.spotLight
uniqueName="Light 2"
theatreKey="Light 2"
castShadow
intensity={2.25}
angle={0.2}
@ -85,7 +85,7 @@ function App() {
shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001}
/>
<e.directionalLight uniqueName="Light 3" />
<e.directionalLight theatreKey="Light 3" />
</EditableCamera>
<Suspense fallback={null}>
<RefreshSnapshot />

14
packages/playground/src/tests/r3f-stress-test/App.tsx
View file

@ -19,21 +19,21 @@ function Model({url}: {url: string}) {
<group rotation={[-Math.PI / 2, 0, 0]} position={[0, -7, 0]} scale={7}>
<group rotation={[Math.PI / 13.5, -Math.PI / 5.8, Math.PI / 5.6]}>
<e.mesh
uniqueName="Example Namespace / Thingy"
theatreKey="Example Namespace / Thingy"
receiveShadow
castShadow
geometry={nodes.planet001.geometry}
material={nodes.planet001.material}
/>
<e.mesh
uniqueName="Example Namespace / Debris 2"
theatreKey="Example Namespace / Debris 2"
receiveShadow
castShadow
geometry={nodes.planet002.geometry}
material={nodes.planet002.material}
/>
<e.mesh
uniqueName="Debris 1"
theatreKey="Debris 1"
geometry={nodes.planet003.geometry}
material={nodes.planet003.material}
/>
@ -102,18 +102,18 @@ function App() {
<color attach="background" args={[bg]} />
<ambientLight intensity={0.75} />
<EditableCamera
uniqueName="Camera"
theatreKey="Camera"
makeDefault
position={[0, 0, 16]}
fov={75}
>
<e.pointLight
uniqueName="Light 1"
theatreKey="Light 1"
intensity={1}
position={[-10, -25, -10]}
/>
<e.spotLight
uniqueName="Light 2"
theatreKey="Light 2"
castShadow
intensity={2.25}
angle={0.2}
@ -122,7 +122,7 @@ function App() {
shadow-mapSize={[1024, 1024]}
shadow-bias={-0.0001}
/>
<e.directionalLight uniqueName="Light 3" />
<e.directionalLight theatreKey="Light 3" />
</EditableCamera>
<Suspense fallback={null}>
<RefreshSnapshot />

8
packages/r3f/README.md
View file

@ -41,10 +41,10 @@ export default function App() {
position={[10, 10, 10]}
angle={0.15}
penumbra={1}
uniqueName="Spotlight"
theatreKey="Spotlight"
/>
<e.pointLight uniqueName="PointLight" />
<e.mesh uniqueName="Box">
<e.pointLight theatreKey="PointLight" />
<e.mesh theatreKey="Box">
<boxBufferGeometry />
<meshStandardMaterial color="orange" />
</e.mesh>
@ -79,7 +79,7 @@ const EditableCamera = editable(PerspectiveCamera, 'perspectiveCamera');
#### Props
`uniqueName: string`: a unique name used to identify the object in the editor.
`theatreKey: string`: a unique name used to identify the object in the editor.
### `<SheetProvider sheet={...} />`

8
packages/r3f/src/extension/components/ProxyManager.tsx
View file

@ -58,13 +58,13 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
sceneProxy.traverse((object) => {
if (object.userData.__editable) {
// there are duplicate uniqueNames in the scene, only display one instance in the editor
// there are duplicate theatreKeys in the scene, only display one instance in the editor
if (editableProxies[object.userData.__storeKey]) {
object.parent!.remove(object)
} else {
const uniqueName = object.userData.__storeKey
const theatreKey = object.userData.__storeKey
editableProxies[uniqueName] = {
editableProxies[theatreKey] = {
portal: createPortal(
<EditableProxy
storeKey={object.userData.__storeKey}
@ -73,7 +73,7 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
object.parent!,
),
object: object,
editable: editables[uniqueName]!,
editable: editables[theatreKey]!,
}
}
}

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

@ -21,7 +21,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
type: T extends 'primitive' ? null : U,
) => {
type Props = Omit<ComponentProps<T>, 'visible'> & {
uniqueName: string
theatreKey: string
visible?: boolean | 'editor'
additionalProps?: $FixMe
objRef?: $FixMe
@ -35,7 +35,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
return forwardRef(
(
{
uniqueName,
theatreKey,
visible,
editableType,
additionalProps,
@ -50,7 +50,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
const sheet = useCurrentSheet()!
const storeKey = makeStoreKey(sheet, uniqueName)
const storeKey = makeStoreKey(sheet, theatreKey)
const [sheetObject, setSheetObject] = useState<
undefined | ISheetObject<$FixMe>
@ -61,7 +61,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
useLayoutEffect(() => {
if (!sheet) return
const sheetObject = sheet.object(
uniqueName,
theatreKey,
Object.assign(
{
...additionalProps,
@ -164,7 +164,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
[Property in Keys]: React.ForwardRefExoticComponent<
React.PropsWithoutRef<
Omit<JSX.IntrinsicElements[Property], 'visible'> & {
uniqueName: string
theatreKey: string
visible?: boolean | 'editor'
additionalProps?: $FixMe
objRef?: $FixMe
@ -176,7 +176,7 @@ const createEditable = <Keys extends keyof JSX.IntrinsicElements>(
React.PropsWithoutRef<
{
object: any
uniqueName: string
theatreKey: string
visible?: boolean | 'editor'
additionalProps?: $FixMe
objRef?: $FixMe

14
packages/r3f/src/main/store.ts
View file

@ -44,11 +44,11 @@ export type EditorStore = {
init: (scene: Scene, gl: WebGLRenderer) => void
addEditable: (uniqueName: string, editable: Editable<any>) => void
addEditable: (theatreKey: string, editable: Editable<any>) => void
createSnapshot: () => void
setSnapshotProxyObject: (
proxyObject: Object3D | null,
uniqueName: string,
theatreKey: string,
) => void
}
@ -76,11 +76,11 @@ const config: StateCreator<EditorStore> = (set, get) => {
get().createSnapshot()
},
addEditable: (uniqueName, editable) => {
addEditable: (theatreKey, editable) => {
set((state) => ({
editables: {
...state.editables,
[uniqueName]: editable,
[theatreKey]: editable,
},
}))
},
@ -92,12 +92,12 @@ const config: StateCreator<EditorStore> = (set, get) => {
}))
},
setSnapshotProxyObject: (proxyObject, uniqueName) => {
setSnapshotProxyObject: (proxyObject, theatreKey) => {
set((state) => ({
editablesSnapshot: {
...state.editablesSnapshot,
[uniqueName]: {
...state.editablesSnapshot![uniqueName],
[theatreKey]: {
...state.editablesSnapshot![theatreKey],
proxyObject,
},
},