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

WIP: Upgrade to THREE 155: Fix the double key error in r3f

Browse source
This commit is contained in:
Aria Minaei 2023-08-04 11:27:52 +02:00
parent 3837e179bb
commit 872b2f741f
1 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import type {VFC} from 'react'
import type {FC} from 'react'
import React, {useLayoutEffect, useMemo, useRef, useState} from 'react'
import type {Editable} from '../../main/store'
import {createPortal} from '@react-three/fiber'
@ -25,7 +25,7 @@ type IEditableProxy<T> = {
editable: Editable<T>
}
const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
const ProxyManager: FC<ProxyManagerProps> = ({orbitControlsRef}) => {
const isBeingEdited = useRef(false)
const editorObject = getEditorSheetObject()
const [sceneSnapshot, editables] = useExtensionStore(
@ -69,9 +69,18 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
object.parent!.remove(object)
} else {
editableProxies[theatreKey] = {
portal: createPortal(
portal: (
// we gotta wrap the portal because as of [this commit](https://github.com/pmndrs/react-three-fiber/commit/5d1652ce5b63397ad79c39d3dd100b26a465c41f)
// in react-three-fiber, portals use the uuid of their parent object as their own key. Since many of these objects are nested
// inside the same parent, they end up having the same react key. We avoid this issue by wrapping the portal in a component
// so that its react key is unique within its parent component.
<PortalWrapper
portal={createPortal(
<EditableProxy storeKey={theatreKey} object={object} />,
object.parent!,
)}
key={`portal-wrapper-${theatreKey}`}
/>
),
object: object,
editable: editables[theatreKey]!,
@ -246,4 +255,8 @@ const ProxyManager: VFC<ProxyManagerProps> = ({orbitControlsRef}) => {
)
}
const PortalWrapper: React.FC<{portal: React.ReactNode}> = ({portal}) => {
return <>{portal}</>
}
export default ProxyManager