Chore: Removed more unused code from r3f
This commit is contained in:
parent
02d5f6c9c4
commit
94261107fb
3 changed files with 4 additions and 143 deletions
|
@ -41,7 +41,6 @@
|
|||
"@react-three/fiber": "^6.2.2",
|
||||
"@theatre/core": "workspace:*",
|
||||
"@theatre/studio": "workspace:*",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"lodash-es": "^4.17.21",
|
||||
"prism-react-renderer": "1.2.1",
|
||||
"react": "^17.0.2",
|
||||
|
|
|
@ -1,11 +1,5 @@
|
|||
import type {VFC} from 'react'
|
||||
import React, {
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
Suspense,
|
||||
} from 'react'
|
||||
import React, {useEffect, useRef, Suspense} from 'react'
|
||||
import {Canvas} from '@react-three/fiber'
|
||||
import {useEditorStore} from '../store'
|
||||
import {OrbitControls, Environment} from '@react-three/drei'
|
||||
|
@ -14,17 +8,7 @@ import root from 'react-shadow'
|
|||
import styles from '../bundle.css.txt'
|
||||
import UI from './UI'
|
||||
import ProxyManager from './ProxyManager'
|
||||
import {
|
||||
Button,
|
||||
Heading,
|
||||
Code,
|
||||
PortalManager,
|
||||
Modal,
|
||||
ModalHeader,
|
||||
ModalFooter,
|
||||
ModalBody,
|
||||
IdProvider,
|
||||
} from './elements'
|
||||
import {Button, Heading, Code, PortalManager, IdProvider} from './elements'
|
||||
import studio from '@theatre/studio'
|
||||
|
||||
const EditorScene = () => {
|
||||
|
@ -83,8 +67,6 @@ const Editor: VFC = () => {
|
|||
initialEditorCamera,
|
||||
setEditorOpen,
|
||||
createSnapshot,
|
||||
isPersistedStateDifferentThanInitial,
|
||||
applyPersistedState,
|
||||
] = useEditorStore(
|
||||
(state) => [
|
||||
state.sceneSnapshot,
|
||||
|
@ -93,22 +75,10 @@ const Editor: VFC = () => {
|
|||
state.initialEditorCamera,
|
||||
state.setEditorOpen,
|
||||
state.createSnapshot,
|
||||
state.isPersistedStateDifferentThanInitial,
|
||||
state.applyPersistedState,
|
||||
],
|
||||
shallow,
|
||||
)
|
||||
|
||||
const [stateMismatch, setStateMismatch] = useState(false)
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (initialState) {
|
||||
setStateMismatch(isPersistedStateDifferentThanInitial())
|
||||
} else {
|
||||
applyPersistedState()
|
||||
}
|
||||
}, [applyPersistedState, initialState, isPersistedStateDifferentThanInitial])
|
||||
|
||||
return (
|
||||
<root.div>
|
||||
<div id="react-three-editable-editor-root">
|
||||
|
@ -207,31 +177,7 @@ const MyComponent = () => (
|
|||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Modal visible={stateMismatch}>
|
||||
<ModalHeader>Saved state found</ModalHeader>
|
||||
<ModalBody>
|
||||
Would you like to use initial state or saved state?
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
applyPersistedState()
|
||||
setStateMismatch(false)
|
||||
}}
|
||||
>
|
||||
Saved
|
||||
</Button>
|
||||
<Button
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
setStateMismatch(false)
|
||||
}}
|
||||
>
|
||||
Initial
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
<style type="text/css">{styles}</style>
|
||||
</IdProvider>
|
||||
</PortalManager>
|
||||
|
|
|
@ -4,7 +4,6 @@ import type {Object3D, Scene, WebGLRenderer} from 'three'
|
|||
import {DefaultLoadingManager, Group} from 'three'
|
||||
import type {MutableRefObject} from 'react'
|
||||
import type {OrbitControls} from '@react-three/drei'
|
||||
import deepEqual from 'fast-deep-equal'
|
||||
// @ts-ignore TODO
|
||||
import type {ContainerProps} from '@react-three/fiber'
|
||||
import type {ISheet, ISheetObject} from '@theatre/core'
|
||||
|
@ -207,9 +206,6 @@ export type EditorStore = {
|
|||
proxyObject: Object3D | null,
|
||||
uniqueName: string,
|
||||
) => void
|
||||
serialize: () => {}
|
||||
isPersistedStateDifferentThanInitial: () => boolean
|
||||
applyPersistedState: () => void
|
||||
}
|
||||
|
||||
interface PersistedState {
|
||||
|
@ -400,72 +396,11 @@ const config: StateCreator<EditorStore> = (set, get) => {
|
|||
},
|
||||
}))
|
||||
},
|
||||
serialize: () => ({}),
|
||||
isPersistedStateDifferentThanInitial: () => {
|
||||
const initialState = get().initialState
|
||||
const canvasName = get().canvasName!
|
||||
|
||||
if (!initialState || !initialPersistedState) {
|
||||
return false
|
||||
}
|
||||
|
||||
return !deepEqual(
|
||||
initialPersistedState.canvases[canvasName],
|
||||
initialState,
|
||||
)
|
||||
},
|
||||
applyPersistedState: () => {
|
||||
const editables = get().editables
|
||||
const canvasName = get().canvasName!
|
||||
|
||||
if (!initialPersistedState) {
|
||||
return
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const useEditorStore = create<EditorStore>(config)
|
||||
|
||||
const initPersistence = (
|
||||
key: string,
|
||||
): [PersistedState | null, (() => void) | undefined] => {
|
||||
let initialPersistedState: PersistedState | null = null
|
||||
let unsub
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
try {
|
||||
const rawPersistedState = localStorage.getItem(key)
|
||||
if (rawPersistedState) {
|
||||
initialPersistedState = JSON.parse(rawPersistedState)
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
unsub = useEditorStore.subscribe(
|
||||
() => {
|
||||
const canvasName = useEditorStore.getState().canvasName
|
||||
const serialize = useEditorStore.getState().serialize
|
||||
if (canvasName) {
|
||||
const editables = serialize()
|
||||
localStorage.setItem(
|
||||
key,
|
||||
JSON.stringify({
|
||||
canvases: {
|
||||
[canvasName]: editables,
|
||||
},
|
||||
}),
|
||||
)
|
||||
}
|
||||
},
|
||||
(state) => state.editables,
|
||||
)
|
||||
}
|
||||
|
||||
return [initialPersistedState, unsub]
|
||||
}
|
||||
|
||||
let [initialPersistedState, unsub] = initPersistence('react-three-editable_')
|
||||
|
||||
export type BindFunction = (options: {
|
||||
allowImplicitInstancing?: boolean
|
||||
state?: EditableState
|
||||
|
@ -473,26 +408,7 @@ export type BindFunction = (options: {
|
|||
sheet: ISheet
|
||||
}) => (options: {gl: WebGLRenderer; scene: Scene}) => void
|
||||
|
||||
export const configure = ({
|
||||
localStorageNamespace = '',
|
||||
enablePersistence = true,
|
||||
} = {}): BindFunction => {
|
||||
if (unsub) {
|
||||
unsub()
|
||||
}
|
||||
|
||||
if (enablePersistence) {
|
||||
const persistence = initPersistence(
|
||||
`react-three-editable_${localStorageNamespace}`,
|
||||
)
|
||||
|
||||
initialPersistedState = persistence[0]
|
||||
unsub = persistence[1]
|
||||
} else {
|
||||
initialPersistedState = null
|
||||
unsub = undefined
|
||||
}
|
||||
|
||||
export const configure = ({} = {}): BindFunction => {
|
||||
return ({
|
||||
allowImplicitInstancing = false,
|
||||
state,
|
||||
|
|
Loading…
Reference in a new issue