Merge pull request #101 from storytold/feature/transform-markers

Added transform markers for the view port to give a more finished look.

app/pages/PageEnigma/datastructures/clips/transform_clip.ts

@@ -85,7 +85,7 @@ export class TransformClip {
     this.step_frame = frame - offset;
     //if (this.step_frame < 0) { this.step_frame = 0; }
     //if (this.step_frame >= this.length) { return; } // Reached max frames.
-    if (this.keyframes.length < 2) { return; } // If there are enough points in the scene.
+    if (this.keyframes.length < 1) { return; } // If there are enough points in the scene.
 
     // Find the current and next keyframes based on time_frame
     let { currentKeyframe, nextKeyframe } = this.findNextNumber(this.step_frame);

app/pages/PageEnigma/js/editor.ts

@@ -447,6 +447,8 @@ class Editor {
       this.current_scene_media_token,
     );
 
+    console.log(result);
+
     this.dispatchAppUiState({
       type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER,
     });
@@ -554,11 +556,6 @@ class Editor {
           this.cameraViewControls.enabled = true;
         }
         this.cam_obj.scale.set(0, 0, 0);
-        if (this.activeScene.hot_items) {
-          this.activeScene.hot_items.forEach((element) => {
-            element.visible = false;
-          });
-        }
 
         this.removeTransformControls();
         this.selected = this.cam_obj;
@@ -1025,6 +1022,11 @@ class Editor {
   startPlayback() {
     this.timeline.is_playing = true;
     this.timeline.scrubber_frame_position = 0;
+    if (this.activeScene.hot_items) {
+      this.activeScene.hot_items.forEach((element) => {
+        element.visible = false;
+      });
+    }
     if (!this.camera_person_mode) {
       this.switchCameraView();
     }
@@ -1137,6 +1139,7 @@ class Editor {
     this.raycaster.setFromCamera(this.mouse, this.camera);
     const interactable: any[] = [];
     this.activeScene.scene.children.forEach((child: THREE.Object3D) => {
+      console.log(child);
       if (child.name != "") {
         if (child.type == "Mesh" || child.type == "Object3D") {
           interactable.push(child);

app/pages/PageEnigma/js/scene.ts

@@ -61,16 +61,33 @@ class Scene {
         return this.scene.getObjectByName(name);
     }
 
-    createPoint(pos: THREE.Vector3, visable: boolean = true) {
+    createPoint(pos: THREE.Vector3, keyframe_uuid: string): THREE.Object3D {
         let geometry = new THREE.SphereGeometry(0.1, 18, 12);
         let material = new THREE.MeshBasicMaterial({ color: 0x05C3DD });
         let obj = new THREE.Mesh(geometry, material);
         obj.position.copy(pos);
-        obj.receiveShadow = visable;
+        obj.receiveShadow = false;
+        obj.castShadow = false;
+        obj.userData['media_id'] = "Point::" + keyframe_uuid;
         if (this.hot_items != undefined) {
             this.hot_items.push(obj);
         }
         this.scene.add(obj);
+        return obj;
+    }
+
+    deletePoint(keyframe_uuid: string) {
+        this.scene.traverse((object) => {
+            if (object.userData.media_id) {
+                let obj_keyframe_uuid = object.userData.media_id.replace("Point::", "");
+                console.log(obj_keyframe_uuid);
+                if (obj_keyframe_uuid === keyframe_uuid) {
+                    console.log("Found!", object);
+                    this.scene.remove(object);
+                    return;
+                }
+            }
+        });
     }
 
     _disable_skybox() {

app/pages/PageEnigma/js/timeline.ts

@@ -171,6 +171,8 @@ export class TimeLine {
                 0,
                 this.absolute_end))
         }
+
+        this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']);
     }
 
     public async addClip(data: any) {
@@ -230,6 +232,7 @@ export class TimeLine {
         let keyframe_uuid = data['data']["keyframe_uuid"];
         let object_uuid = data['data']['object_uuid'];
         this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid);
+        this.scene.deletePoint(keyframe_uuid);
     }
 
     public async updateKeyFrame(data: any) {

app/pages/PageEnigma/proxy/storyteller_proxy_scene.ts

@@ -67,6 +67,9 @@ export class StoryTellerProxyScene {
           default:
             if(token.includes('m_')){
               obj = await this.scene.load_glb(token);
+            } else if(token.includes('Point::')){
+              let keyframe_uuid = token.replace("Point::", "");
+              obj = this.scene.createPoint(new THREE.Vector3(0,0,0), keyframe_uuid);
             }
             break;
         }