Merge pull request #31 from storytold/bugfix/loading-edit

Bugfix/loading edit

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 (
     <div>

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<APIManagerResponseSuccess> {
     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<APIManagerResponseSuccess> {
     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<string> {
     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"}

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.