fix: PointerUp update transform for entities with not transform compo…

…nent (#895)

* fix: PointerUp update transform for entities with not transform component

* feat: Debounce useChange on useTree hook

packages/@dcl/inspector/src/components/ui/TextField/TextField.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import cx from 'classnames'
 
+import { debounce } from '../../../lib/utils/debounce'
 import { Message, MessageType } from '../Message'
 import { Label } from '../Label'
-import { debounce } from '../utils'
 import { Props } from './types'
 
 import './TextField.css'

packages/@dcl/inspector/src/components/ui/utils.ts

@@ -1,11 +1,3 @@
 export function isErrorMessage(error?: boolean | string): boolean {
   return !!error && typeof error === 'string'
 }
-
-export function debounce<F extends (...args: any[]) => void>(func: F, delay: number) {
-  let timer: ReturnType<typeof setTimeout>
-  return function (...args: Parameters<F>) {
-    clearTimeout(timer)
-    timer = setTimeout(() => func(...args), delay)
-  }
-}

packages/@dcl/inspector/src/hooks/sdk/useTree.ts

@@ -2,9 +2,10 @@ import { useCallback, useState, useEffect } from 'react'
 import { Entity } from '@dcl/ecs'
 
 import { findParent, getEmptyTree, getTreeFromEngine, ROOT } from '../../lib/sdk/tree'
+import { debounce } from '../../lib/utils/debounce'
+import { DropType } from '../../components/Tree/utils'
 import { useChange } from './useChange'
 import { useSdk } from './useSdk'
-import { DropType } from '../../components/Tree/utils'
 
 /**
  * Used to get a tree and the functions to work with it
@@ -33,7 +34,8 @@ export const useTree = () => {
   }, [sdk])
 
   const handleUpdate = useCallback(() => setTree(getTree()), [setTree, getTree])
-  useChange(handleUpdate)
+  const debounceHandleUpdate = useCallback(debounce(handleUpdate, 10), [handleUpdate])
+  useChange(debounceHandleUpdate)
 
   const getId = useCallback((entity: Entity) => entity.toString(), [])
 

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

@@ -267,7 +267,13 @@ export function createGizmoManager(context: SceneContext) {
   })
 
   context.scene.onPointerDown = function (_e, pickResult) {
-    if (lastEntity === null || pickResult.pickedMesh === null || !gizmoManager.freeGizmoEnabled) return
+    if (
+      lastEntity === null ||
+      pickResult.pickedMesh === null ||
+      !gizmoManager.freeGizmoEnabled ||
+      !context.Transform.getOrNull(lastEntity.entityId)
+    )
+      return
     const selectedEntities = getSelectedEntities().map((entityId) => context.getEntityOrNull(entityId)!)
     if (selectedEntities.some((entity) => pickResult.pickedMesh!.isDescendantOf(entity))) {
       initTransform()
@@ -276,7 +282,8 @@ export function createGizmoManager(context: SceneContext) {
   }
 
   context.scene.onPointerUp = function () {
-    if (lastEntity === null || !gizmoManager.freeGizmoEnabled) return
+    if (lastEntity === null || !gizmoManager.freeGizmoEnabled || !context.Transform.getOrNull(lastEntity.entityId))
+      return
     updateTransform()
     meshPointerDragBehavior.detach()
   }

packages/@dcl/inspector/src/lib/utils/debounce.ts

@@ -0,0 +1,7 @@
+export function debounce<F extends (...args: any[]) => void>(func: F, delay: number) {
+  let timer: ReturnType<typeof setTimeout>
+  return function (...args: Parameters<F>) {
+    clearTimeout(timer)
+    timer = setTimeout(() => func(...args), delay)
+  }
+}