fix: gizmos settings

packages/@dcl/inspector/src/components/Toolbar/Gizmos/Gizmos.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { BsCaretDown } from 'react-icons/bs'
 import { BiCheckbox, BiCheckboxChecked } from 'react-icons/bi'
 import cx from 'classnames'
@@ -47,8 +47,12 @@ export const Gizmos = withSdk(({ sdk }) => {
 
   const ref = useOutsideClick(handleClosePanel)
 
+  useEffect(() => {
+    setShowPanel(false)
+  }, [selection])
+
   return (
-    <div className="Gizmos">
+    <div className="Gizmos" ref={ref}>
       <ToolbarButton
         className={cx('gizmo position', { active: selection?.gizmo === GizmoType.POSITION })}
         disabled={disableGizmos}
@@ -65,7 +69,7 @@ export const Gizmos = withSdk(({ sdk }) => {
         onClick={handleScaleGizmo}
       />
       <BsCaretDown className="open-panel" onClick={handleTogglePanel} />
-      <div ref={ref} className={cx('panel', { visible: showPanel })}>
+      <div className={cx('panel', { visible: showPanel })}>
         <div className="title">
           <label>Snap</label>
           <SnapToggleIcon className="icon" onClick={toggle} />

packages/@dcl/inspector/src/hooks/editor/useGizmoAlignment.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { CrdtMessageType } from '@dcl/ecs'
 import { useSdk } from '../sdk/useSdk'
 import { useChange } from '../sdk/useChange'
 import { Gizmos } from '../../lib/babylon/decentraland/gizmo-manager'
-import { CrdtMessageType } from '@dcl/ecs'
 
 export const useGizmoAlignment = () => {
   const gizmosRef = useRef<Gizmos | null>(null)

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

@@ -69,7 +69,7 @@ describe('GizmoManager', () => {
             entity.scaling = new Vector3(1, 2, 1)
           })
           afterEach(() => {
-            entity.scaling = Vector3.Zero()
+            entity.scaling = new Vector3(1, 1, 1)
           })
           describe('and the rotation gizmo is not world aligned', () => {
             beforeEach(() => {
@@ -120,6 +120,22 @@ describe('GizmoManager', () => {
             })
           })
         })
+        describe('and the entity is almost proportionally scaled except for a tiny rounding error', () => {
+          beforeEach(() => {
+            entity.scaling = new Vector3(1.0000001192092896, 0.9999998807907104, 1)
+          })
+          afterEach(() => {
+            entity.scaling = new Vector3(1, 1, 1)
+          })
+          it('should not force the rotation gizmo to be world aligned', () => {
+            gizmos.setRotationGizmoWorldAligned(false)
+            expect(gizmos.isRotationGizmoWorldAligned()).toBe(false)
+            expect(gizmos.isRotationGizmoAlignmentDisabled()).toBe(false)
+            gizmos.gizmoManager.gizmos.scaleGizmo?.onDragEndObservable.notifyObservers({} as any)
+            expect(gizmos.isRotationGizmoWorldAligned()).toBe(false)
+            expect(gizmos.isRotationGizmoAlignmentDisabled()).toBe(false)
+          })
+        })
       })
     })
     describe('When getting the gizmo types', () => {

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

@@ -8,6 +8,11 @@ import { snapManager, snapPosition, snapRotation, snapScale } from './snap-manag
 import { SceneContext } from './SceneContext'
 import { GizmoType } from '../../utils/gizmo'
 
+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
+}
+
 export function createGizmoManager(context: SceneContext) {
   // events
   const events = mitt<{ change: void }>()
@@ -47,7 +52,7 @@ export function createGizmoManager(context: SceneContext) {
 
   function fixRotationGizmoAlignment(value: TransformType) {
     const isProportional =
-      Math.abs(value.scale.x) === Math.abs(value.scale.y) && Math.abs(value.scale.y) === value.scale.z
+      areProportional(value.scale.x, value.scale.y) && areProportional(value.scale.y, value.scale.z)
     rotationGizmoAlignmentDisabled = !isProportional
     if (!isProportional && !isRotationGizmoWorldAligned()) {
       setRotationGizmoWorldAligned(true) // set to world