fix: Explosive growth mode (#1146)

* fix: Css styles

* feat: Create a new GizmoManager to use babylon 8 features

* refactor: Enhance transform component handling in BabylonJS

- Removed unnecessary gizmo restoration logic.
- Initialized rotation quaternion for new entities and ensured proper handling of existing entities' rotation.
- Updated parenting logic to maintain world transform during reparenting.
- Added normalization for rotation quaternions to ensure validity.
- Improved comments for clarity on transformation operations.

* refactor: Update GizmoManager import and fix alignment method calls

* fix: Rotation Gizmo

* fix: Position Gizmo

* fix: Scale Gizmo

* fix: FreeGizmo behaviour

* fix: Use isGizmoWorldAligned to apply local or global align to entities

* fix: Remove unused code

* fix: Rotations with snap

* fix: Children local rotation

* fix: Update FreeGizmo implementation

* fix: Remove unrequired code

* fix: Comments

* fix: Rotation gizmo snapping and refactor code

* fix: Gizmo syncing when updating entities Transform

* fix: Detect snap changes

* fix: FreeGizmo mesh dragging

* fix: Lint issue

* fix: Rotation update transform only on drag end

* fix: Gizmos works only with the LEFT_CLICK

* fix: tests

* fix: lint

* fix: Remove unused methods in tests

Author: cyaiox

packages/@dcl/inspector/src/components/EntityInspector/AdminToolkitView/VideoControl/VideoControl.css

@@ -4,22 +4,24 @@
   flex-direction: column;
   gap: 16px;
   width: 100%;
+}
+
+.VideoControl .Title {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--base-04);
+}
+
+.VideoControl .ScreenSetup {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 12px;
+}
 
-  .Title {
-    font-size: 14px;
-    font-weight: 400;
-    color: var(--base-04);
-  }
-  .ScreenSetup {
-    display: flex;
-    flex-direction: row;
-    .Label {
-      margin-left: 8px;
-      text-wrap: wrap;
-      width: 80%;
-    }
-    margin-bottom: 12px;
-  }
+.VideoControl .ScreenSetup label {
+  margin-left: 8px;
+  text-wrap: wrap;
+  width: 80%;
 }
 
 /* Checkbox group */

packages/@dcl/inspector/src/components/EntityInspector/SmartItemBasicView/VideoScreenBasicView/VideoScreenBasicView.css

@@ -2,58 +2,63 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+}
+
+.VideoScreenBasicViewInspector .Info {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 8px;
+}
+
+.VideoScreenBasicViewInspector .Info label {
+  margin-left: 8px;
+  text-wrap: wrap;
+  width: 80%;
+}
+
+.VideoScreenBasicViewInspector .Title {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.VideoScreenBasicViewInspector .Divider {
+  height: 1px;
+  background-color: var(--base-14);
+}
+
+.VideoScreenBasicViewInspector .DefaultMediaSourcesDropdown {
+  margin-top: 6px;
+  max-width: 150px;
+}
+
+.VideoScreenBasicViewInspector .DefaultMediaSourcesDropdown .OptionList {
+  overflow: hidden;
+}
+
+.VideoScreenBasicViewInspector .PanelSection {
+  background-color: var(--background-dark);
+}
+
+.VideoScreenBasicViewInspector .PlayBack {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.VideoScreenBasicViewInspector .PlayBack .CheckboxContainer {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+}
+
+.VideoScreenBasicViewInspector .LiveStreamSection .content {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+}
 
-  .Info {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 8px;
-    .Label {
-      margin-left: 8px;
-      text-wrap: wrap;
-      width: 80%;
-    }
-  }
-
-  .Title {
-    font-size: 14px;
-    font-weight: 400;
-  }
-
-  .Divider {
-    height: 1px;
-    background-color: var(--base-14);
-  }
-
-  .DefaultMediaSourcesDropdown {
-    margin-top: 6px;
-    max-width: 150px;
-
-    .OptionList {
-      overflow: hidden;
-    }
-  }
-  .PanelSection {
-    background-color: var(--background-dark);
-  }
-  .PlayBack {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    .CheckboxContainer {
-      margin-top: 10px;
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
-  .LiveStreamSection .content {
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 10px;
-    .Label {
-      text-wrap: wrap;
-      margin-left: 8px;
-      font-weight: 400;
-      font-size: 11px;
-    }
-  }
+.VideoScreenBasicViewInspector .LiveStreamSection .content .Label {
+  text-wrap: wrap;
+  margin-left: 8px;
+  font-weight: 400;
+  font-size: 11px;
 }

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

@@ -48,12 +48,12 @@ export const Gizmos = withSdk(({ sdk }) => {
   useHotkey(['X'], handleScaleGizmo)
   useHotkey(['F'], handleFreeGizmo)
 
-  const { isPositionGizmoWorldAligned, setPositionGizmoWorldAligned } = useGizmoAlignment()
+  const { isGizmoWorldAligned, setGizmoWorldAligned } = useGizmoAlignment()
 
   const disableGizmos = !entity
 
   const SnapToggleIcon = isEnabled ? BiCheckboxChecked : BiCheckbox
-  const PositionAlignmentIcon = isPositionGizmoWorldAligned ? BiCheckboxChecked : BiCheckbox
+  const WorldAlignmentIcon = isGizmoWorldAligned ? BiCheckboxChecked : BiCheckbox
 
   const ref = useOutsideClick(handleClosePanel)
 
@@ -100,13 +100,7 @@ export const Gizmos = withSdk(({ sdk }) => {
         </div>
         <div className="title">
           <label>Align to world</label>
-        </div>
-        <div className="alignment">
-          <label>Position</label>
-          <PositionAlignmentIcon
-            className="icon"
-            onClick={() => setPositionGizmoWorldAligned(!isPositionGizmoWorldAligned)}
-          />
+          <WorldAlignmentIcon className="icon" onClick={() => setGizmoWorldAligned(!isGizmoWorldAligned)} />
         </div>
       </div>
     </div>

packages/@dcl/inspector/src/components/Warnings/MultipleEntitiesSelected/MultipleEntitiesSelected.tsx

@@ -10,12 +10,12 @@ import { Warning } from '../Warning'
 const MultiSelectEntities: React.FC = withSdk(({ sdk }) => {
   const selectedEntity = useSelectedEntity()
   const [selection] = useComponentValue(selectedEntity || ROOT, sdk.components.Selection)
-  const { isPositionGizmoAlignmentDisabled } = useGizmoAlignment()
+  const { isGizmoWorldAlignmentDisabled } = useGizmoAlignment()
   const areMultipleEntitiesSelected = sdk.operations.getSelectedEntities().length > 1
   if (
     selectedEntity &&
     selection.gizmo === GizmoType.POSITION &&
-    isPositionGizmoAlignmentDisabled &&
+    isGizmoWorldAlignmentDisabled &&
     areMultipleEntitiesSelected
   ) {
     return (

packages/@dcl/inspector/src/components/Warnings/RotationGizmoLocalAlignmentDisabled/RotationGizmoLocalAlignmentDisabled.tsx

@@ -10,8 +10,8 @@ import { GizmoType } from '../../../lib/utils/gizmo'
 const RotationGizmoLocalAlignmentDisabled: React.FC = withSdk(({ sdk }) => {
   const selectedEntity = useSelectedEntity()
   const [selection] = useComponentValue(selectedEntity || ROOT, sdk.components.Selection)
-  const { isRotationGizmoAlignmentDisabled } = useGizmoAlignment()
-  if (selectedEntity && selection.gizmo === GizmoType.ROTATION && isRotationGizmoAlignmentDisabled) {
+  const { isGizmoWorldAlignmentDisabled } = useGizmoAlignment()
+  if (selectedEntity && selection.gizmo === GizmoType.ROTATION && isGizmoWorldAlignmentDisabled) {
     return (
       <Warning
         title={

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

@@ -13,14 +13,9 @@ const gizmoManagerEvents = mitt()
 const mockEntity = 0 as Entity
 const gizmoManagerMock = {
   getEntity: jest.fn().mockReturnValue({ entityId: mockEntity } as EcsEntity),
-  isPositionGizmoWorldAligned: jest.fn().mockReturnValue(true),
-  isRotationGizmoWorldAligned: jest.fn().mockReturnValue(true),
-  isRotationGizmoAlignmentDisabled: jest.fn().mockReturnValue(false),
-  isPositionGizmoAlignmentDisabled: jest.fn().mockReturnValue(false),
-  setPositionGizmoWorldAligned: jest.fn(),
-  setRotationGizmoWorldAligned: jest.fn(),
-  fixRotationGizmoAlignment: jest.fn(),
-  fixPositionGizmoAlignment: jest.fn(),
+  isGizmoWorldAligned: jest.fn().mockReturnValue(true),
+  isGizmoWorldAlignmentDisabled: jest.fn().mockReturnValue(false),
+  setGizmoWorldAligned: jest.fn(),
   onChange: jest.fn().mockImplementation((cb) => gizmoManagerEvents.on('*', cb))
 }
 createGizmoManagerMock.mockReturnValue(gizmoManagerMock as unknown as ReturnType<typeof createGizmoManager>)
@@ -60,71 +55,51 @@ describe('useGizmoAlignment', () => {
   afterEach(() => {
     useSdkMock.mockClear()
     createGizmoManagerMock.mockClear()
-    gizmoManagerMock.isPositionGizmoWorldAligned.mockClear()
-    gizmoManagerMock.isRotationGizmoWorldAligned.mockClear()
-    gizmoManagerMock.setPositionGizmoWorldAligned.mockClear()
-    gizmoManagerMock.setRotationGizmoWorldAligned.mockClear()
+    gizmoManagerMock.isGizmoWorldAligned.mockClear()
+    gizmoManagerMock.isGizmoWorldAlignmentDisabled.mockClear()
+    gizmoManagerMock.setGizmoWorldAligned.mockClear()
     gizmoManagerMock.onChange.mockClear()
     gizmoManagerEvents.all.clear()
     engineEvents.all.clear()
   })
   describe('When the hook is mounted ', () => {
     it('should sync the state with the gizmo manager', () => {
       const { result } = renderHook(() => useGizmoAlignment())
-      const { isPositionGizmoWorldAligned, isRotationGizmoWorldAligned } = result.current
-      expect(isPositionGizmoWorldAligned).toBe(true)
-      expect(isRotationGizmoWorldAligned).toBe(true)
-      expect(gizmoManagerMock.isPositionGizmoWorldAligned).toHaveBeenCalled()
-      expect(gizmoManagerMock.isRotationGizmoWorldAligned).toHaveBeenCalled()
+      const { isGizmoWorldAligned } = result.current
+      expect(isGizmoWorldAligned).toBe(true)
+      expect(gizmoManagerMock.isGizmoWorldAligned).toHaveBeenCalled()
     })
     it('should add a listener for the onChange event of the gizmoManager', () => {
       renderHook(() => useGizmoAlignment())
       expect(gizmoManagerMock.onChange).toHaveBeenCalled()
     })
     it('should not update the renderer', () => {
       renderHook(() => useGizmoAlignment())
-      expect(gizmoManagerMock.setPositionGizmoWorldAligned).not.toHaveBeenCalled()
-      expect(gizmoManagerMock.setRotationGizmoWorldAligned).not.toHaveBeenCalled()
+      expect(gizmoManagerMock.setGizmoWorldAligned).not.toHaveBeenCalled()
     })
   })
   describe('When the hook state is changed ', () => {
     it('should update the renderer', () => {
       const { result } = renderHook(() => useGizmoAlignment())
-      const { setPositionGizmoWorldAligned, setRotationGizmoWorldAligned } = result.current
-      expect(result.current.isPositionGizmoWorldAligned).toBe(true)
-      expect(result.current.isRotationGizmoWorldAligned).toBe(true)
-      gizmoManagerMock.isPositionGizmoWorldAligned.mockReturnValue(true)
-      gizmoManagerMock.isRotationGizmoWorldAligned.mockReturnValue(true)
+      const { setGizmoWorldAligned } = result.current
+      expect(result.current.isGizmoWorldAligned).toBe(true)
+      gizmoManagerMock.isGizmoWorldAligned.mockReturnValue(true)
       act(() => {
-        setPositionGizmoWorldAligned(false)
-        setRotationGizmoWorldAligned(false)
+        setGizmoWorldAligned(false)
       })
-      expect(result.current.isPositionGizmoWorldAligned).toBe(false)
-      expect(result.current.isRotationGizmoWorldAligned).toBe(false)
-      expect(gizmoManagerMock.setPositionGizmoWorldAligned).toHaveBeenCalledWith(false)
-      expect(gizmoManagerMock.setRotationGizmoWorldAligned).toHaveBeenCalledWith(false)
+      expect(result.current.isGizmoWorldAligned).toBe(false)
+      expect(gizmoManagerMock.setGizmoWorldAligned).toHaveBeenCalledWith(false)
     })
   })
   describe('When a change happens in the renderer', () => {
     it('should update the hook state', () => {
       renderHook(() => useGizmoAlignment())
-      gizmoManagerMock.isPositionGizmoWorldAligned.mockClear()
-      gizmoManagerMock.isRotationGizmoWorldAligned.mockClear()
-      gizmoManagerMock.isRotationGizmoAlignmentDisabled.mockReset()
-      gizmoManagerMock.isRotationGizmoAlignmentDisabled.mockReturnValue(true)
+      gizmoManagerMock.isGizmoWorldAligned.mockClear()
+      gizmoManagerMock.isGizmoWorldAlignmentDisabled.mockReset()
+      gizmoManagerMock.isGizmoWorldAlignmentDisabled.mockReturnValue(true)
       gizmoManagerEvents.emit('*')
-      expect(gizmoManagerMock.isPositionGizmoWorldAligned).toHaveBeenCalled()
-      expect(gizmoManagerMock.isRotationGizmoWorldAligned).toHaveBeenCalled()
-      expect(gizmoManagerMock.isRotationGizmoAlignmentDisabled).toHaveBeenCalled()
-    })
-  })
-  describe('When a change happens in the engine', () => {
-    it('should update the renderer', () => {
-      engineEvents.all.clear()
-      renderHook(() => useGizmoAlignment())
-      expect(gizmoManagerMock.fixRotationGizmoAlignment).not.toHaveBeenCalled()
-      engineEvents.emit('*')
-      expect(gizmoManagerMock.fixRotationGizmoAlignment).toHaveBeenCalledWith(mockEvent.value)
+      expect(gizmoManagerMock.isGizmoWorldAligned).toHaveBeenCalled()
+      expect(gizmoManagerMock.isGizmoWorldAlignmentDisabled).toHaveBeenCalled()
     })
   })
 })