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.