bring back loading progress overlay

culdo · Jan 10, 2025 · b520e37 · b520e37
1 parent f3262b8
commit b520e37
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 15 deletions.
diff --git a/app/components/loading-overlay/index.tsx b/app/components/loading-overlay/index.tsx
@@ -6,7 +6,7 @@ function LoadingOverlay({ children = "" }: { children?: string }) {
     if (presetReady) return <></>
     return (
         <div className={styles.overlay}>
-            <h1 className="text-4xl">
+            <h1 id="loading" className="text-4xl">
                 Loading {children}...
             </h1>
         </div>

diff --git a/app/components/three-world/ModelController/material/index.tsx b/app/components/three-world/ModelController/material/index.tsx
@@ -1,5 +1,5 @@
 import WithSuspense from "@/app/components/suspense";
-import defaultConfig from '@/app/configs/Default_config.json';
+import defaultConfig from '@/app/presets/Default_config.json';
 import useGlobalStore from "@/app/stores/useGlobalStore";
 import usePresetStore from "@/app/stores/usePresetStore";
 import { buildGuiItem, buildMaterialGuiItem } from "@/app/utils/gui";

diff --git a/app/components/three-world/camera/index.tsx b/app/components/three-world/camera/index.tsx
@@ -6,7 +6,7 @@ import { button, useControls } from "leva";
 import useGlobalStore from "@/app/stores/useGlobalStore";
 import { buildGuiItem, buildLoadFileFn } from "@/app/utils/gui";
 import { useThree } from "@react-three/fiber";
-import defaultConfig from '@/app/configs/Default_config.json';
+import defaultConfig from '@/app/presets/Default_config.json';
 import usePresetStore from "@/app/stores/usePresetStore";
 
 function Camera() {

diff --git a/app/components/three-world/lights/index.tsx b/app/components/three-world/lights/index.tsx
@@ -1,4 +1,4 @@
-import defaultConfig from '@/app/configs/Default_config.json'
+import defaultConfig from '@/app/presets/Default_config.json'
 import useGlobalStore from "@/app/stores/useGlobalStore"
 import usePresetStore from "@/app/stores/usePresetStore"
 import { buildGuiItem } from "@/app/utils/gui"

diff --git a/app/configs/Default_config.json → app/presets/Default_config.json b/app/configs/Default_config.json → app/presets/Default_config.json
diff --git a/app/stores/usePresetStore.ts b/app/stores/usePresetStore.ts
@@ -1,11 +1,11 @@
-import defaultConfig from '@/app/configs/Default_config.json';
-import defaultData from '@/app/configs/Default_data.json';
+import defaultConfig from '@/app/presets/Default_config.json';
 import localforage from 'localforage';
 import { create } from 'zustand';
 import { PersistStorage, StorageValue, persist, subscribeWithSelector } from 'zustand/middleware';
 import { CameraClip } from '../components/three-world/camera/helper/composite-mode';
 import useConfigStore from './useConfigStore';
 import useGlobalStore from './useGlobalStore';
+import { withProgress } from '../utils/base';
 
 export type PresetState = typeof defaultConfig & {
     motionFile: string,
@@ -18,20 +18,25 @@ export type PresetState = typeof defaultConfig & {
             stage: Record<string, Record<string, string>>
         }
     },
+    resetPreset: () => Promise<void>
 } & {
     compositeClips?: CameraClip[]
-} & { [key: `${string}.color`]: string, [key: `${string}.intensity`]: number, [key: `${string}.position`]: number[] }
-    & { Light: Record<string, any> }
-    & { material: Record<string, any>};
-export const presetSep = "."
+} & {
+    [key: `${string}.color`]: string,
+    [key: `${string}.intensity`]: number,
+    [key: `${string}.position`]: number[]
+} & {
+    Light: Record<string, any>,
+    material: Record<string, any>
+}
 
 const storage: PersistStorage<PresetState> = {
     getItem: async (name: string): Promise<StorageValue<PresetState>> => {
         console.log(name, 'has been retrieved')
         return (await localforage.getItem(name)) || null
     },
     setItem: async (name: string, value: StorageValue<PresetState>): Promise<void> => {
-        if(!useGlobalStore.getState().presetReady) return
+        if (!useGlobalStore.getState().presetReady) return
         console.log(name, 'with value', value, 'has been saved')
         document.title = "Web MMD (Saving...)"
         await localforage.setItem(name, value)
@@ -43,20 +48,34 @@ const storage: PersistStorage<PresetState> = {
     },
 }
 
+const getDefaultDataWithProgress = async () => {
+    const dataResp = withProgress(await fetch('presets/Default_data.json'), 38204932)
+    return await dataResp.json()
+}
+
+export const resetPreset = async () => {
+    const defaultData = await getDefaultDataWithProgress()
+    usePresetStore.setState({ ...defaultConfig, ...defaultData })
+}
+
 const usePresetStore = create(
     subscribeWithSelector(
         persist<PresetState>(
-            (set, get) => ({ ...defaultConfig, ...defaultData }) as PresetState,
+            () => {
+                return {
+                    ...defaultConfig
+                } as PresetState
+            },
             {
                 name: useConfigStore.getState().preset,
                 storage
             })
     )
 )
 
-export const resetPreset = () => usePresetStore.setState({ ...defaultConfig, ...defaultData })
-
-usePresetStore.persist.onFinishHydration(() => {
+usePresetStore.persist.onFinishHydration(async () => {
+    const defaultData = await getDefaultDataWithProgress()
+    usePresetStore.setState({ ...defaultData })
     useGlobalStore.setState({ presetReady: true })
     useGlobalStore.setState({ presetInit: true })
 })

diff --git a/app/configs/Default_data.json → public/presets/Default_data.json b/app/configs/Default_data.json → public/presets/Default_data.json