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 1/4] 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. From 92025fcf67e0d4bce19d6bde847895e9014b76bb Mon Sep 17 00:00:00 2001 From: Michael Chung <6252325+ArEnSc@users.noreply.github.com> Date: Thu, 28 Mar 2024 00:14:20 -0400 Subject: [PATCH 2/4] Saving and Loading Scene has 401 error still it's a backend issue afaik. --- app/pages/PageEnigma/js/api_manager.ts | 31 ++++++++++++++------------ app/pages/PageEnigma/js/editor.ts | 13 +++++++---- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/app/pages/PageEnigma/js/api_manager.ts b/app/pages/PageEnigma/js/api_manager.ts index 395bac774c..ab3fa0a2ff 100644 --- a/app/pages/PageEnigma/js/api_manager.ts +++ b/app/pages/PageEnigma/js/api_manager.ts @@ -50,30 +50,32 @@ class APIManager { public async saveSceneState( scene: THREE.Scene, scene_name: string, + scene_glb_media_file_token: string | null = null, scene_media_file_token: string | null = 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, - glb_scene_media_file_token, + scene_glb_media_file_token, ); - const glb_media_file_token = upload_glb_response["media_file_token"]; + const result_scene_glb_media_file_token = upload_glb_response["media_file_token"]; // now write the scene const save_scene_timeline_response = await this.saveSceneAndTimeLineState( + result_scene_glb_media_file_token, 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"]; - // "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 }; + + const data = { "scene_glb_media_file_token":result_scene_glb_media_file_token, + "scene_media_file_token": result_scene_media_file_token }; return new APIManagerResponseSuccess("Scene Saved", data); } @@ -159,7 +161,7 @@ class APIManager { private async uploadGLB( file: File, - glb_scene_media_file_token: string | null, + scene_glb_media_file_token: string | null, ): Promise { const url = `${this.baseUrl}/v1/media_files/write/engine_asset`; let uuid = uuidv4(); @@ -167,8 +169,8 @@ class APIManager { form_data.append("uuid_idempotency_token", uuid); // 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); + if (scene_glb_media_file_token != null) { + form_data.append("media_file_token", scene_glb_media_file_token); } form_data.append("file", file); @@ -195,7 +197,7 @@ class APIManager { } private async saveSceneAndTimeLineState( - glb_media_file_token: string | null, + scene_glb_media_file_token: string | null, scene_media_file_token: string | null, scene_file_name: string, timeline_state: TimelineDataState | null, // only for now. @@ -203,11 +205,12 @@ class APIManager { const url = `${this.baseUrl}/v1/media_files/write/scene_file`; let uuid = uuidv4(); + console.log(`Saving Scene scene_media_file_token:${scene_media_file_token} | scene_glb_media_file_token:${scene_glb_media_file_token}`) // turn json into a blob const scene_schema = { - scene_glb_media_file_token: glb_media_file_token, - scene_name: scene_file_name, - timeline: { objects: [] }, + 'scene_glb_media_file_token': scene_glb_media_file_token, + 'scene_name': scene_file_name, + 'timeline': { 'objects': [] }, }; const json = JSON.stringify(scene_schema); const blob = new Blob([json], { type: "application/json" }); @@ -237,7 +240,7 @@ class APIManager { }); if (!response.ok) { - throw new APIManagerResponseError("Failed to Send GLB Data"); + throw new APIManagerResponseError("Failed to Save Scene."); } else { const json_data = await response.json(); // example response {"success":true,"media_file_token":"m_r1ztnn501g2rn0vv2np08nd6zy2fvt"} diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 6bd73280c4..acc92cabee 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -289,14 +289,19 @@ class Editor { const result = await this.api_manager.saveSceneState( this.activeScene.scene, name, + this.current_glb_scene_media_token, this.current_scene_media_token, - new TimelineDataState(), + new TimelineDataState() ) - const scene_media_token_id = result.data["scene_media_token_id"] - if (scene_media_token_id != null) { - this.current_scene_media_token = scene_media_token_id + const scene_media_token = result.data["scene_media_file_token"] + if (scene_media_token != null) { + this.current_scene_media_token = scene_media_token } + const scene_glb_media_token = result.data["scene_glb_media_file_token"] + if (scene_glb_media_token != null) { + this.current_glb_scene_media_token = scene_glb_media_token + } this.dispatchAppUiState({ type: ACTION_TYPES.HIDE_EDITOR_LOADER From e0a6cbde3bb3cea90127c0ec74391a75f0559e6c Mon Sep 17 00:00:00 2001 From: Michael Chung <6252325+ArEnSc@users.noreply.github.com> Date: Thu, 28 Mar 2024 00:26:04 -0400 Subject: [PATCH 3/4] its likely the backend being the issue --- app/pages/PageEnigma/js/editor.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index acc92cabee..9be3a72ddf 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -82,7 +82,7 @@ class Editor { renderPass: RenderPass | undefined; current_scene_media_token: string | null; - current_glb_scene_media_token: string | null; + current_scene_glb_media_token: string | null; can_initialize: boolean; dispatchAppUiState: any; // todo figure out the type @@ -167,7 +167,7 @@ class Editor { // Scene State this.current_scene_media_token = null; - this.current_glb_scene_media_token = null; + this.current_scene_glb_media_token = null; } initialize(config:any) { @@ -230,7 +230,7 @@ class Editor { // saving state of the scene this.current_scene_media_token = null; - this.current_glb_scene_media_token = null; + this.current_scene_glb_media_token = null; // hide loader this.dispatchAppUiState({ @@ -255,9 +255,9 @@ class Editor { // 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"] + this.current_scene_glb_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}`); + console.log(`SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`); this.activeScene.scene.children = loaded_scene.children; @@ -289,7 +289,7 @@ class Editor { const result = await this.api_manager.saveSceneState( this.activeScene.scene, name, - this.current_glb_scene_media_token, + this.current_scene_glb_media_token, this.current_scene_media_token, new TimelineDataState() ) @@ -300,7 +300,7 @@ class Editor { } const scene_glb_media_token = result.data["scene_glb_media_file_token"] if (scene_glb_media_token != null) { - this.current_glb_scene_media_token = scene_glb_media_token + this.current_scene_glb_media_token = scene_glb_media_token } this.dispatchAppUiState({ From 047e56d259c5cb6b167c3320683c42bf8bad7a02 Mon Sep 17 00:00:00 2001 From: Michael Chung <6252325+ArEnSc@users.noreply.github.com> Date: Thu, 28 Mar 2024 00:29:13 -0400 Subject: [PATCH 4/4] lets double check --- app/pages/PageEnigma/js/editor.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 9be3a72ddf..12d899a409 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -257,7 +257,7 @@ class Editor { this.current_scene_media_token = load_scene_state_response.data["scene_media_file_token"] this.current_scene_glb_media_token = load_scene_state_response.data["scene_glb_media_file_token"] - console.log(`SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`); + console.log(`loadScene => SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`); this.activeScene.scene.children = loaded_scene.children; @@ -285,7 +285,8 @@ class Editor { this.dispatchAppUiState({ type: ACTION_TYPES.SHOW_EDITOR_LOADER }); - + console.log(`saveScene => SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`); + const result = await this.api_manager.saveSceneState( this.activeScene.scene, name,