diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index 0d22a666a5..58389e8920 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..ab3fa0a2ff 100644 --- a/app/pages/PageEnigma/js/api_manager.ts +++ b/app/pages/PageEnigma/js/api_manager.ts @@ -50,32 +50,35 @@ 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, + timeline_state: TimelineDataState | 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, + 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( - glb_media_file_token, + result_scene_glb_media_file_token, + scene_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 }; + 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); } - 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 +104,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 +115,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 +161,16 @@ class APIManager { private async uploadGLB( file: File, - 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(); 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 (scene_glb_media_file_token != null) { + form_data.append("media_file_token", scene_glb_media_file_token); } form_data.append("file", file); @@ -194,6 +197,7 @@ class APIManager { } private async saveSceneAndTimeLineState( + scene_glb_media_file_token: string | null, scene_media_file_token: string | null, scene_file_name: string, timeline_state: TimelineDataState | null, // only for now. @@ -201,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 = { - glb_media_file_id: scene_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" }); @@ -214,6 +219,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"); @@ -229,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 e10f37f004..12d899a409 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_scene_glb_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_scene_glb_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_scene_glb_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_scene_glb_media_token = load_scene_state_response.data["scene_glb_media_file_token"] + + console.log(`loadScene => SceneMediaToken:${this.current_scene_media_token} SceneGLBMediaToken:${this.current_scene_glb_media_token}`); + this.activeScene.scene.children = loaded_scene.children; this.activeScene.scene.children.forEach((child: THREE.Object3D) => { @@ -256,41 +279,50 @@ 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 }); - + 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, - this.current_scene_media_token_id, - new TimelineDataState(), + this.current_scene_glb_media_token, + 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 + 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_scene_glb_media_token = scene_glb_media_token + } this.dispatchAppUiState({ type: ACTION_TYPES.HIDE_EDITOR_LOADER }); } + /** + * 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.