update left/right click button behaviour on renderer (#1078)

* update left/right click button behaviour on renderer

* remove gizmo right click button

* fixed review comments

Author: nicoecheza

packages/@dcl/inspector/src/lib/babylon/decentraland/camera.spec.ts

@@ -1,5 +1,7 @@
 import * as BABYLON from '@babylonjs/core'
+
 import { CameraManager } from './camera'
+import { MIDDLE_BUTTON, RIGHT_BUTTON } from './mouse-utils'
 
 describe('Camera manager', () => {
   let engine: BABYLON.Engine
@@ -28,15 +30,15 @@ describe('Camera manager', () => {
       cameraManager = new CameraManager(scene, document.createElement('canvas'), [0, 1, 2], 1, 1, 1)
       mouseDown = {
         type: BABYLON.PointerEventTypes.POINTERDOWN,
-        event: { pointerType: 'mouse' }
+        event: { pointerType: 'mouse', button: RIGHT_BUTTON }
       } as unknown as BABYLON.PointerInfo
       mouseWheelUp = {
         type: BABYLON.PointerEventTypes.POINTERWHEEL,
-        event: { deltaY: -240 }
+        event: { deltaY: -240, button: MIDDLE_BUTTON }
       } as unknown as BABYLON.PointerInfo
       mouseWheelDown = {
         type: BABYLON.PointerEventTypes.POINTERWHEEL,
-        event: { deltaY: 240 }
+        event: { deltaY: 240, button: MIDDLE_BUTTON }
       } as unknown as BABYLON.PointerInfo
     })
     it('should start with correct default speed', () => {

packages/@dcl/inspector/src/lib/babylon/decentraland/camera.ts

@@ -1,10 +1,12 @@
 import * as BABYLON from '@babylonjs/core'
-import { Keys, keyState } from './keys'
-import { PARCEL_SIZE } from '../../utils/scene'
+import { Vector3, Quaternion } from '@dcl/ecs-math'
 import mitt, { Emitter } from 'mitt'
+
+import { Keys, keyState } from './keys'
 import { EcsEntity } from './EcsEntity'
+import { RIGHT_BUTTON } from './mouse-utils'
 import { fitSphereIntoCameraFrustum } from '../../logic/math'
-import { Vector3, Quaternion } from '@dcl/ecs-math'
+import { PARCEL_SIZE } from '../../utils/scene'
 
 type SpeedChangeEvent = { change: number }
 
@@ -135,8 +137,11 @@ export class CameraManager {
     const center = new BABYLON.Vector3(PARCEL_SIZE / 2, 0, PARCEL_SIZE / 2)
     const size = center.length()
     const camera = new BABYLON.FreeCamera('editorCamera', center.subtractFromFloats(size, -size * 1.5, size * 2), scene)
+    const mouseInput = camera.inputs.attached.mouse as BABYLON.FreeCameraMouseInput
     camera.target = center
 
+    mouseInput.buttons = [RIGHT_BUTTON] // disable all buttons except right mouse button
+
     camera.inertia = 0
     camera.speed = this.speeds[this.speedIndex]
     camera.angularSensibility = CameraManager.ANGULAR_SENSIBILITY
@@ -160,10 +165,10 @@ export class CameraManager {
 
     let holdingMouseButton = false
     scene.onPointerObservable.add((ev) => {
-      if (ev.type === BABYLON.PointerEventTypes.POINTERDOWN) {
+      if (ev.type === BABYLON.PointerEventTypes.POINTERDOWN && ev.event.button === RIGHT_BUTTON) {
         holdingMouseButton = true
       }
-      if (ev.type === BABYLON.PointerEventTypes.POINTERUP) {
+      if (ev.type === BABYLON.PointerEventTypes.POINTERUP && ev.event.button === RIGHT_BUTTON) {
         holdingMouseButton = false
       }
       if (ev.type === BABYLON.PointerEventTypes.POINTERWHEEL) {

packages/@dcl/inspector/src/lib/babylon/decentraland/gizmo-manager.ts

@@ -10,12 +10,14 @@ import {
 } from '@babylonjs/core'
 import { Entity, TransformType } from '@dcl/ecs'
 import { Vector3 as DclVector3, Quaternion as DclQuaternion } from '@dcl/ecs-math'
+
 import { GizmoType } from '../../utils/gizmo'
 import { EcsEntity } from './EcsEntity'
 import { snapManager, snapPosition, snapRotation, snapScale } from './snap-manager'
 import { SceneContext } from './SceneContext'
 import { PatchedGizmoManager } from './gizmo-patch'
 import { ROOT } from '../../sdk/tree'
+import { LEFT_BUTTON } from './mouse-utils'
 
 const GIZMO_DUMMY_NODE = 'GIZMO_DUMMY_NODE'
 
@@ -31,6 +33,12 @@ function releaseDragFromGizmo({ xGizmo, yGizmo, zGizmo }: GizmoAxis) {
   zGizmo.dragBehavior.releaseDrag()
 }
 
+function configureGizmoButtons(gizmo: GizmoAxis, buttons: number[]) {
+  gizmo.xGizmo.dragBehavior.dragButtons = buttons
+  gizmo.yGizmo.dragBehavior.dragButtons = buttons
+  gizmo.zGizmo.dragBehavior.dragButtons = buttons
+}
+
 function areProportional(a: number, b: number) {
   // this leeway is here to account for rounding errors due to serializing/deserializing floating point numbers
   return Math.abs(a - b) < 1e-5
@@ -65,6 +73,11 @@ export function createGizmoManager(context: SceneContext) {
   gizmoManager.gizmos.positionGizmo!.updateGizmoRotationToMatchAttachedMesh = false
   gizmoManager.gizmos.rotationGizmo!.updateGizmoRotationToMatchAttachedMesh = true
 
+  // Configure all gizmos to only work with left click
+  if (gizmoManager.gizmos.positionGizmo) configureGizmoButtons(gizmoManager.gizmos.positionGizmo, [LEFT_BUTTON])
+  if (gizmoManager.gizmos.rotationGizmo) configureGizmoButtons(gizmoManager.gizmos.rotationGizmo, [LEFT_BUTTON])
+  if (gizmoManager.gizmos.scaleGizmo) configureGizmoButtons(gizmoManager.gizmos.scaleGizmo, [LEFT_BUTTON])
+
   let selectedEntities: EcsEntity[] = []
   let rotationGizmoAlignmentDisabled = false
   let positionGizmoAlignmentDisabled = false

packages/@dcl/inspector/src/lib/babylon/decentraland/mouse-utils.ts

@@ -1,6 +1,10 @@
 import { Scene, Vector3 } from '@babylonjs/core'
 import future from 'fp-future'
 
+export const LEFT_BUTTON = 0
+export const MIDDLE_BUTTON = 1
+export const RIGHT_BUTTON = 2
+
 export async function getPointerCoords(scene: Scene) {
   const coords = future<Vector3>()
   scene.onPointerObservable.addOnce(() => {