From 321a47ac4ae9a310b72f2bab28755b4d7536e1fc Mon Sep 17 00:00:00 2001 From: Michael Chung <6252325+ArEnSc@users.noreply.github.com> Date: Wed, 27 Mar 2024 23:27:46 -0400 Subject: [PATCH] Fixing Loading Bug and Resaving --- app/pages/PageEnigma/PageEnigmaComponent.tsx | 5 -- app/pages/PageEnigma/js/api_manager.ts | 34 +++++---- app/pages/PageEnigma/js/editor.ts | 78 +++++++++++++------- 3 files changed, 73 insertions(+), 44 deletions(-) diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index fafb18591e..702a51d6d1 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -21,11 +21,6 @@ import { ViewSideBySide } from "./comps/ViewSideBySide"; export const PageEnigmaComponent = () => { const [appUiState, dispatchAppUiState] = useReducer(reducer, initialState); - useEffect(()=>{ - setTimeout(()=>dispatchAppUiState({ - type: ACTION_TYPES.HIDE_EDITOR_LOADER - }), 500); - },[]); return (
diff --git a/app/pages/PageEnigma/js/api_manager.ts b/app/pages/PageEnigma/js/api_manager.ts index f1ffe4b311..395bac774c 100644 --- a/app/pages/PageEnigma/js/api_manager.ts +++ b/app/pages/PageEnigma/js/api_manager.ts @@ -51,31 +51,32 @@ class APIManager { scene: THREE.Scene, scene_name: string, scene_media_file_token: string | null = null, - timeline_state: TimelineDataState | null, + timeline_state: TimelineDataState | null = null, + glb_scene_media_file_token: string | null = null ): Promise { const file = await this.gltfExport(scene); // will overwrite the scene on db if token exists const upload_glb_response = await this.uploadGLB( file, - scene_media_file_token, + glb_scene_media_file_token, ); const glb_media_file_token = upload_glb_response["media_file_token"]; // now write the scene const save_scene_timeline_response = await this.saveSceneAndTimeLineState( + scene_media_file_token, glb_media_file_token, scene_name, timeline_state, ); const result_scene_media_file_token = save_scene_timeline_response["media_file_token"]; - - const data = { media_file_token: result_scene_media_file_token }; + // "scene_glb_media_file_token": scene_glb_media_file_token , "scene_media_file_token":scene_media_file_token, + const data = { "glb_media_file_token": result_scene_media_file_token,"scene_media_file_token": result_scene_media_file_token }; return new APIManagerResponseSuccess("Scene Saved", data); } - public async loadSceneState(scene_media_file_token: string | null): Promise { const api_base_url = "https://api.fakeyou.com"; const url = `${api_base_url}/v1/media_files/file/${scene_media_file_token}`; @@ -101,9 +102,9 @@ class APIManager { console.log(`loadSceneState: ${JSON.stringify(json_result)}`); - const scene_glb_media_file_id: string = json_result["glb_media_file_id"]; + const scene_glb_media_file_token: string = json_result["scene_glb_media_file_token"]; - const media_bucket_path = await this.getMediaFile(scene_glb_media_file_id); + const media_bucket_path = await this.getMediaFile(scene_glb_media_file_token); console.log(`GLB ${media_bucket_path}`) let glbLoader = new GLTFLoader(); // promisify this @@ -112,7 +113,7 @@ class APIManager { glbLoader.load(bucket_path, (glb) => { if (glb) { const scene: THREE.Scene = glb.scene; - const data = { "media_file_token": scene_glb_media_file_id , "scene": scene }; + const data = { "scene_glb_media_file_token": scene_glb_media_file_token , "scene_media_file_token":scene_media_file_token, "scene": scene }; console.log(`Data: ${data}`) resolve(new APIManagerResponseSuccess("Success Loaded", data)); } else { @@ -158,16 +159,16 @@ class APIManager { private async uploadGLB( file: File, - scene_media_file_token: string | null, + glb_scene_media_file_token: string | null, ): Promise { const url = `${this.baseUrl}/v1/media_files/write/engine_asset`; let uuid = uuidv4(); const form_data = new FormData(); form_data.append("uuid_idempotency_token", uuid); - // update existing scene otherwise create new scene and use it's media_file_id - if (scene_media_file_token != null) { - form_data.append("media_file_token", scene_media_file_token); + // update existing scene otherwise create new glb scene and use it's media_file_id + if (glb_scene_media_file_token != null) { + form_data.append("media_file_token", glb_scene_media_file_token); } form_data.append("file", file); @@ -194,6 +195,7 @@ class APIManager { } private async saveSceneAndTimeLineState( + glb_media_file_token: string | null, scene_media_file_token: string | null, scene_file_name: string, timeline_state: TimelineDataState | null, // only for now. @@ -203,7 +205,7 @@ class APIManager { // turn json into a blob const scene_schema = { - glb_media_file_id: scene_media_file_token, + scene_glb_media_file_token: glb_media_file_token, scene_name: scene_file_name, timeline: { objects: [] }, }; @@ -214,6 +216,12 @@ class APIManager { const form_data = new FormData(); form_data.append("uuid_idempotency_token", uuid); + + // overrwrites the scene json file and edits. + if (scene_media_file_token != null) { + form_data.append("media_file_token", scene_media_file_token); + } + form_data.append("file", blob, file_name); form_data.append("source", "file"); form_data.append("type", "scene_json"); diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index e10f37f004..6bd73280c4 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -81,9 +81,12 @@ class Editor { renderPass: RenderPass | undefined; - current_scene_media_token_id: string | null; + current_scene_media_token: string | null; + current_glb_scene_media_token: string | null; + can_initialize: boolean; dispatchAppUiState: any; // todo figure out the type + // Default params. constructor() { console.log( @@ -158,11 +161,24 @@ class Editor { ); this.current_frame = 0; - this.current_scene_media_token_id = null; + + // Dispatcher this.dispatchAppUiState = null; + + // Scene State + this.current_scene_media_token = null; + this.current_glb_scene_media_token = null; } initialize(config:any) { + //setup reactland Callbacks + this.dispatchAppUiState = config.dispatchAppUiState + + // Show Loader + this.dispatchAppUiState({ + type: ACTION_TYPES.SHOW_EDITOR_LOADER + }); + if (this.can_initialize == false) { console.log( "Editor Already Initialized", @@ -213,29 +229,36 @@ class Editor { this._test_demo(); // saving state of the scene - this.current_scene_media_token_id = null; - //setup reactland Callbacks - this.dispatchAppUiState = config.dispatchAppUiState + this.current_scene_media_token = null; + this.current_glb_scene_media_token = null; + + // hide loader + this.dispatchAppUiState({ + type: ACTION_TYPES.HIDE_EDITOR_LOADER + }); } // Token comes in from the front end to load the scene from the site. - public async loadScene(scene_token: string) { + public async loadScene(scene_media_token: string) { this.dispatchAppUiState({ type: ACTION_TYPES.SHOW_EDITOR_LOADER }); - if (scene_token != null) { - this.current_scene_media_token_id = scene_token; + if (scene_media_token != null) { + this.current_scene_media_token = scene_media_token; } const load_scene_state_response = await this.api_manager.loadSceneState( - this.current_scene_media_token_id, + this.current_scene_media_token, ); - - console.log(load_scene_state_response) - const loaded_scene = load_scene_state_response.data["scene"] - this.current_scene_media_token_id = load_scene_state_response.data["media_file_token"] + + // Load these so you can rewrite the scene glb using it's token. + this.current_scene_media_token = load_scene_state_response.data["scene_media_file_token"] + this.current_glb_scene_media_token = load_scene_state_response.data["scene_glb_media_file_token"] + + console.log(`SceneMediaToken:${this.current_scene_media_token} GLBSceneMediaToken${this.current_glb_scene_media_token}`); + this.activeScene.scene.children = loaded_scene.children; this.activeScene.scene.children.forEach((child: THREE.Object3D) => { @@ -256,20 +279,9 @@ class Editor { }); } - public removeTransformControls() { - if (this.control == undefined) { return }; - if (this.outlinePass == undefined) { return }; - - this.last_selected = this.selected; - this.control.detach(); - this.activeScene.scene.remove(this.control); - this.outlinePass.selectedObjects = []; - } - public async saveScene(name: string) { // remove controls when saving scene. this.removeTransformControls(); - this.dispatchAppUiState({ type: ACTION_TYPES.SHOW_EDITOR_LOADER }); @@ -277,13 +289,13 @@ class Editor { const result = await this.api_manager.saveSceneState( this.activeScene.scene, name, - this.current_scene_media_token_id, + this.current_scene_media_token, new TimelineDataState(), ) const scene_media_token_id = result.data["scene_media_token_id"] if (scene_media_token_id != null) { - this.current_scene_media_token_id = scene_media_token_id + this.current_scene_media_token = scene_media_token_id } this.dispatchAppUiState({ @@ -291,6 +303,20 @@ class Editor { }); } + /** + * This cleans up the transform controls + * During saving it + * Doesn't retain those controls. + * @returns + */ + private removeTransformControls() { + if (this.control == undefined) { return }; + if (this.outlinePass == undefined) { return }; + this.last_selected = this.selected; + this.control.detach(); + this.activeScene.scene.remove(this.control); + this.outlinePass.selectedObjects = []; + } async _serialize_timeline() { // note the database from the server is the source of truth for all the data.