From 1a8b63dc88dcb754ad039f93ee4cba933427a470 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20D=C3=ADaz?= <gabrieldiaz31@gmail.com>
Date: Tue, 13 Feb 2024 17:14:28 -0300
Subject: [PATCH] fix: PointerUp update transform for entities with not
 transform component (#895)

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

* feat: Debounce useChange on useTree hook
---
 .../src/components/ui/TextField/TextField.tsx         |  2 +-
 packages/@dcl/inspector/src/components/ui/utils.ts    |  8 --------
 packages/@dcl/inspector/src/hooks/sdk/useTree.ts      |  6 ++++--
 .../src/lib/babylon/decentraland/gizmo-manager.ts     | 11 +++++++++--
 packages/@dcl/inspector/src/lib/utils/debounce.ts     |  7 +++++++
 5 files changed, 21 insertions(+), 13 deletions(-)
 create mode 100644 packages/@dcl/inspector/src/lib/utils/debounce.ts

diff --git a/packages/@dcl/inspector/src/components/ui/TextField/TextField.tsx b/packages/@dcl/inspector/src/components/ui/TextField/TextField.tsx
index ec62bc2f3..18d1b9bff 100644
--- a/packages/@dcl/inspector/src/components/ui/TextField/TextField.tsx
+++ b/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'
diff --git a/packages/@dcl/inspector/src/components/ui/utils.ts b/packages/@dcl/inspector/src/components/ui/utils.ts
index d18a3627a..3f3f11ddc 100644
--- a/packages/@dcl/inspector/src/components/ui/utils.ts
+++ b/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)
-  }
-}
diff --git a/packages/@dcl/inspector/src/hooks/sdk/useTree.ts b/packages/@dcl/inspector/src/hooks/sdk/useTree.ts
index abf77405b..8b183a151 100644
--- a/packages/@dcl/inspector/src/hooks/sdk/useTree.ts
+++ b/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(), [])
 
diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/gizmo-manager.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/gizmo-manager.ts
index 4b0f87057..21efed233 100644
--- a/packages/@dcl/inspector/src/lib/babylon/decentraland/gizmo-manager.ts
+++ b/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()
   }
diff --git a/packages/@dcl/inspector/src/lib/utils/debounce.ts b/packages/@dcl/inspector/src/lib/utils/debounce.ts
new file mode 100644
index 000000000..1f71625b8
--- /dev/null
+++ b/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)
+  }
+}