New Movement Keys (#571)

app/pages/PageEnigma/Editor/editor.ts

@@ -153,6 +153,7 @@ class Editor {
   sceneManager: SceneManager | undefined;
 
   outliner_feature_flag: boolean;
+  focused: boolean = false;
 
   constructor() {
     console.log(
@@ -450,6 +451,7 @@ class Editor {
       //TODO: any should be the following
       this.updateSelectedUI();
       this.camera_last_pos.copy(new THREE.Vector3(-99999, -99999, -99999));
+      this.focused = !event.value;
       // this.update_properties()
     });
     this.control.setSize(0.5); // Good default value for visuals.
@@ -504,6 +506,7 @@ class Editor {
       this.last_selected,
       this.getAssetType.bind(this),
       this.setSelected.bind(this),
+      this.isMovable.bind(this)
     );
 
     if (this.outliner_feature_flag) {
@@ -541,8 +544,10 @@ class Editor {
         ) {
           this.cameraViewControls.enabled = true;
           this.selectedCanvas = true;
+          this.focused = true;
         } else {
           this.cameraViewControls.reset();
+          this.focused = false;
           this.cameraViewControls.enabled = false;
           this.selectedCanvas = false;
         }
@@ -556,6 +561,10 @@ class Editor {
     loadingBarIsShowing.value = false;
   }
 
+  public isMovable(): boolean {
+    return this.focused;
+  }
+
   public async newScene(sceneTitleInput: string) {
     this.activeScene.clear();
     this.audio_engine = new AudioEngine();

app/pages/PageEnigma/Editor/keybinds_controls.ts

@@ -42,6 +42,8 @@ export class MouseControls {
   sceneManager: SceneManager | undefined;
   private isProcessing: boolean = false;
   private cameraViewControls: FreeCam;
+  private isMouseClicked: boolean = false;
+  private isMovable: Function;
 
   constructor(
     camera: THREE.PerspectiveCamera | null,
@@ -67,6 +69,7 @@ export class MouseControls {
     last_selected: THREE.Object3D | undefined,
     getAssetType: Function,
     setSelected: Function,
+    isMovable: Function,
   ) {
     this.camera = camera;
     this.camera_person_mode = camera_person_mode;
@@ -93,6 +96,7 @@ export class MouseControls {
     this.getAssetType = getAssetType;
     this.setSelected = setSelected;
     this.sceneManager = undefined;
+    this.isMovable = isMovable;
   }
 
   focus() {
@@ -143,14 +147,15 @@ export class MouseControls {
   }
 
   onMouseDown(event: any) {
-    if (event.button === 1) {
-      this.lockControls?.lock();
+    if ((event.button === 0 || event.button === 1) && this.isMovable()) {
+      this.isMouseClicked = true;
     }
   }
 
   onMouseUp(event: any) {
-    if (event.button === 1) {
+    if (event.button === 0 || event.button === 1) {
       this.lockControls?.unlock();
+      this.isMouseClicked = false;
     }
 
     if (event.button !== 0 && this.camera) {
@@ -246,6 +251,12 @@ export class MouseControls {
     this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
     this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
     this.timeline_mouse = this.mouse;
+
+    if(this.isMouseClicked) {
+      this.lockControls?.lock();
+    } else {
+      this.lockControls?.unlock();
+    }
   }
 
   // When the mouse clicks the screen.