fix: nested entities (#925)

* fix: avoid removing nested entities when loading a gltf

* fix: spinner position if entity is nested

* chore: fix test

* fix: get entity absolute position

Author: cazala

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

@@ -55,7 +55,7 @@ describe('EcsEntity', () => {
     expect(entity.gltfContainer).toBeUndefined()
     expect(entity.gltfAssetContainer).toBeUndefined()
     expect(entity.ecsComponentValues).toEqual({})
-    expect(entity.name).toBe(`ecs-${entityId.toString(16)}`)
+    expect(entity.name).toBe(`ecs-${entityId}`)
     expect(scene.getTransformNodeByID(entity.id)).toBe(entity)
   })
 

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

@@ -41,7 +41,7 @@ export class EcsEntity extends BABYLON.TransformNode {
   ecsComponentValues: EcsComponents = {}
 
   constructor(public entityId: Entity, public context: WeakRef<SceneContext>, public scene: BABYLON.Scene) {
-    super(`ecs-${entityId.toString(16)}`, scene)
+    super(`ecs-${entityId}`, scene)
     createDefaultTransform(this)
     this.initEventHandlers()
   }

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

@@ -22,6 +22,7 @@ import { putNftShapeComponent } from './sdkComponents/nft'
 import { putVideoPlayerComponent } from './sdkComponents/video-player'
 import { putHideComponent } from './editorComponents/hide'
 import { putLockComponent } from './editorComponents/lock'
+import { ROOT } from '../../sdk/tree'
 
 export type LoadableScene = {
   readonly entity: Readonly<Omit<Schemas.Entity, 'id'>>
@@ -80,7 +81,7 @@ export class SceneContext {
   readonly stopped = future<void>()
 
   constructor(public babylon: BABYLON.Engine, public scene: BABYLON.Scene, public loadableScene: LoadableScene) {
-    this.rootNode = new EcsEntity(0 as Entity, this.#weakThis, scene)
+    this.rootNode = this.getOrCreateEntity(ROOT)
     Object.assign(globalThis, { babylon: this.engine })
   }
 

packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/gltf-container.ts

@@ -137,9 +137,15 @@ async function tryLoadGltfAsync(sceneId: string, entity: EcsEntity, filePath: st
     (assetContainer) => {
       processGLTFAssetContainer(assetContainer)
 
-      // remove old entities
+      /*
+        The purpose of this is to solve the following issue: 
+        When the scene is reloaded, the gltfs are loaded from two places, a useEffect in the Renderer.tsx component, and the CRDT messages coming from the engine.
+        That could cause GLTFs from being loaded twice in the babylon engine, so in order to avoid that, the loop below empties the entity from any previous GLTF loaded, so if it was loaded twice, the second time would clear the first load and it wouldn't end up duplicated.
+        The problem with that approach is that it would also remove any other entity that was nested onto the parent, and this would mess up the entity tree when the scene is loaded for the first time, that's why the loop needs to skip any node that is an EcsEntity, so it doesn't remove the entity from the tree.
+      */
       const prevChildren = entity.getChildren()
       for (const child of prevChildren) {
+        if (child instanceof EcsEntity) continue // skip EcsEntity nodes, only remove gltf related stuff
         child.setEnabled(false)
         child.dispose(false, true)
       }
@@ -387,12 +393,12 @@ function createLoadingSpinner(
   const CIRCLE = Math.PI * 2
   const LIGHT_GRAY = new BABYLON.Color3(0.9, 0.9, 0.9)
   const torusOutline = createSemiTorus(radius, tube, radialSegments, tubularSegments, CIRCLE, LIGHT_GRAY, scene)
-  torusOutline.position.copyFrom(entity.position)
+  torusOutline.position.copyFrom(entity.getAbsolutePosition())
   torusOutline.position.y += 1
   torusOutline.rotation.x = Math.PI
   torusOutline.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL
 
-  const LIGHT_RED = new BABYLON.Color3(1, 0.5, 0.5)
+  const LIGHT_RED = new BABYLON.Color3(1, 45 / 255, 85 / 255)
   const semiTorus = createSemiTorus(radius, tube, radialSegments, tubularSegments, CIRCLE / 4, LIGHT_RED, scene)
   semiTorus.position.z += 0.001
   semiTorus.parent = torusOutline