diff --git a/packages/plugin-r3f/package.json b/packages/plugin-r3f/package.json index f85dde9..5143f07 100644 --- a/packages/plugin-r3f/package.json +++ b/packages/plugin-r3f/package.json @@ -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", diff --git a/packages/plugin-r3f/src/components/Editor.tsx b/packages/plugin-r3f/src/components/Editor.tsx index d2c4041..2ab252f 100644 --- a/packages/plugin-r3f/src/components/Editor.tsx +++ b/packages/plugin-r3f/src/components/Editor.tsx @@ -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 (
@@ -207,31 +177,7 @@ const MyComponent = () => ( )}
- - Saved state found - - Would you like to use initial state or saved state? - - - - - - + diff --git a/packages/plugin-r3f/src/store.ts b/packages/plugin-r3f/src/store.ts index cd2f549..8f486fe 100644 --- a/packages/plugin-r3f/src/store.ts +++ b/packages/plugin-r3f/src/store.ts @@ -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 = (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(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,