Chore: Removed more unused code from r3f

This commit is contained in:
Aria Minaei 2021-06-29 15:15:14 +02:00
parent 02d5f6c9c4
commit 94261107fb
3 changed files with 4 additions and 143 deletions

View file

@ -41,7 +41,6 @@
"@react-three/fiber": "^6.2.2", "@react-three/fiber": "^6.2.2",
"@theatre/core": "workspace:*", "@theatre/core": "workspace:*",
"@theatre/studio": "workspace:*", "@theatre/studio": "workspace:*",
"fast-deep-equal": "^3.1.3",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"prism-react-renderer": "1.2.1", "prism-react-renderer": "1.2.1",
"react": "^17.0.2", "react": "^17.0.2",

View file

@ -1,11 +1,5 @@
import type {VFC} from 'react' import type {VFC} from 'react'
import React, { import React, {useEffect, useRef, Suspense} from 'react'
useEffect,
useLayoutEffect,
useRef,
useState,
Suspense,
} from 'react'
import {Canvas} from '@react-three/fiber' import {Canvas} from '@react-three/fiber'
import {useEditorStore} from '../store' import {useEditorStore} from '../store'
import {OrbitControls, Environment} from '@react-three/drei' import {OrbitControls, Environment} from '@react-three/drei'
@ -14,17 +8,7 @@ import root from 'react-shadow'
import styles from '../bundle.css.txt' import styles from '../bundle.css.txt'
import UI from './UI' import UI from './UI'
import ProxyManager from './ProxyManager' import ProxyManager from './ProxyManager'
import { import {Button, Heading, Code, PortalManager, IdProvider} from './elements'
Button,
Heading,
Code,
PortalManager,
Modal,
ModalHeader,
ModalFooter,
ModalBody,
IdProvider,
} from './elements'
import studio from '@theatre/studio' import studio from '@theatre/studio'
const EditorScene = () => { const EditorScene = () => {
@ -83,8 +67,6 @@ const Editor: VFC = () => {
initialEditorCamera, initialEditorCamera,
setEditorOpen, setEditorOpen,
createSnapshot, createSnapshot,
isPersistedStateDifferentThanInitial,
applyPersistedState,
] = useEditorStore( ] = useEditorStore(
(state) => [ (state) => [
state.sceneSnapshot, state.sceneSnapshot,
@ -93,22 +75,10 @@ const Editor: VFC = () => {
state.initialEditorCamera, state.initialEditorCamera,
state.setEditorOpen, state.setEditorOpen,
state.createSnapshot, state.createSnapshot,
state.isPersistedStateDifferentThanInitial,
state.applyPersistedState,
], ],
shallow, shallow,
) )
const [stateMismatch, setStateMismatch] = useState(false)
useLayoutEffect(() => {
if (initialState) {
setStateMismatch(isPersistedStateDifferentThanInitial())
} else {
applyPersistedState()
}
}, [applyPersistedState, initialState, isPersistedStateDifferentThanInitial])
return ( return (
<root.div> <root.div>
<div id="react-three-editable-editor-root"> <div id="react-three-editable-editor-root">
@ -207,31 +177,7 @@ const MyComponent = () => (
</Button> </Button>
)} )}
</div> </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> <style type="text/css">{styles}</style>
</IdProvider> </IdProvider>
</PortalManager> </PortalManager>

View file

@ -4,7 +4,6 @@ import type {Object3D, Scene, WebGLRenderer} from 'three'
import {DefaultLoadingManager, Group} from 'three' import {DefaultLoadingManager, Group} from 'three'
import type {MutableRefObject} from 'react' import type {MutableRefObject} from 'react'
import type {OrbitControls} from '@react-three/drei' import type {OrbitControls} from '@react-three/drei'
import deepEqual from 'fast-deep-equal'
// @ts-ignore TODO // @ts-ignore TODO
import type {ContainerProps} from '@react-three/fiber' import type {ContainerProps} from '@react-three/fiber'
import type {ISheet, ISheetObject} from '@theatre/core' import type {ISheet, ISheetObject} from '@theatre/core'
@ -207,9 +206,6 @@ export type EditorStore = {
proxyObject: Object3D | null, proxyObject: Object3D | null,
uniqueName: string, uniqueName: string,
) => void ) => void
serialize: () => {}
isPersistedStateDifferentThanInitial: () => boolean
applyPersistedState: () => void
} }
interface PersistedState { 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) 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: { export type BindFunction = (options: {
allowImplicitInstancing?: boolean allowImplicitInstancing?: boolean
state?: EditableState state?: EditableState
@ -473,26 +408,7 @@ export type BindFunction = (options: {
sheet: ISheet sheet: ISheet
}) => (options: {gl: WebGLRenderer; scene: Scene}) => void }) => (options: {gl: WebGLRenderer; scene: Scene}) => void
export const configure = ({ export const configure = ({} = {}): BindFunction => {
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
}
return ({ return ({
allowImplicitInstancing = false, allowImplicitInstancing = false,
state, state,