refactor: update UUIDComponent usage to include entitySourceID and entityID

Author: HexaField

src/engine/benchmarks/AvatarBenchmark.tsx

@@ -4,7 +4,6 @@ import {
   Engine,
   Entity,
   EntityTreeComponent,
-  EntityUUID,
   UUIDComponent,
   createEntity,
   getComponent,
@@ -25,10 +24,9 @@ import { useHookstate } from '@ir-engine/hyperflux'
 import { NetworkObjectComponent } from '@ir-engine/network'
 import { TransformComponent } from '@ir-engine/spatial'
 import { RigidBodyComponent } from '@ir-engine/spatial/src/physics/components/RigidBodyComponent'
-import { ObjectComponent } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
 import { VisibleComponent, setVisibleComponent } from '@ir-engine/spatial/src/renderer/components/VisibleComponent'
 import React, { useEffect } from 'react'
-import { Group, MathUtils, Quaternion, Vector3 } from 'three'
+import { MathUtils, Quaternion, Vector3 } from 'three'
 import {
   createIkTargetsForAvatar,
   randomQuaternion,
@@ -186,26 +184,21 @@ const AvatarIKSetupReactor = (props: {
   const model = useOptionalComponent(entity, GLTFComponent)
 
   useEffect(() => {
-    const obj3d = new Group()
-    obj3d.entity = entity
-    const uuid = MathUtils.generateUUID()
-    setComponent(entity, UUIDComponent, uuid as EntityUUID)
+    const entityID = UUIDComponent.generate()
+    setComponent(entity, UUIDComponent, { entitySourceID: rootUUID.entitySourceID.value, entityID: entityID })
     setComponent(entity, EntityTreeComponent, { parentEntity: rootEntity })
-    setComponent(entity, ObjectComponent, obj3d)
     setComponent(entity, TransformComponent, { position })
     setComponent(entity, VisibleComponent, true)
     setComponent(entity, RigidBodyComponent, { type: 'kinematic' })
-    setComponent(entity, NetworkObjectComponent, { ownerId: uuid as UserID })
+    setComponent(entity, NetworkObjectComponent, { ownerId: getComponent(entity, UUIDComponent) as any as UserID })
     setComponent(entity, GLTFComponent, { src: src })
     setComponent(entity, AvatarColliderComponent)
     setComponent(entity, AvatarComponent)
-    setComponent(entity, AvatarAnimationComponent, {
-      locomotion: new Vector3()
-    })
+    setComponent(entity, AvatarAnimationComponent)
     setComponent(entity, AvatarRigComponent)
 
-    spawnAvatar(rootUUID.value, uuid, src, { position, rotation: new Quaternion() })
-    const targetUUIDs = createIkTargetsForAvatar(rootUUID.value, uuid, randomVec3(), randomQuaternion())
+    spawnAvatar(UUIDComponent.concatenateUUID(rootUUID.value), entityID, src, { position, rotation: new Quaternion() })
+    const targetUUIDs = createIkTargetsForAvatar(rootUUID.value, randomVec3(), randomQuaternion())
 
     return () => {
       for (const targetUUID of targetUUIDs) {

src/examples/GLTFs.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react'
 import { ComponentType, getComponent, setComponent, useOptionalComponent } from '@ir-engine/ecs/src/ComponentFunctions'
 import { State, getMutableState, useImmediateEffect } from '@ir-engine/hyperflux'
 
-import { Entity, EntityUUID, UUIDComponent, createEntity, removeEntity } from '@ir-engine/ecs'
+import { Entity, EntityID, UUIDComponent, createEntity, removeEntity } from '@ir-engine/ecs'
 
 import config from '@ir-engine/common/src/config'
 import { EntityTreeComponent } from '@ir-engine/ecs'
@@ -648,7 +648,12 @@ const GLTF = (props: {
 
     const imageEntity = createEntity()
 
-    setComponent(imageEntity, UUIDComponent, UUIDComponent.generateUUID())
+    const rootSourceID = getComponent(root, UUIDComponent).entitySourceID
+
+    setComponent(imageEntity, UUIDComponent, {
+      entitySourceID: rootSourceID,
+      entityID: 'screenshot' as EntityID
+    })
     setComponent(imageEntity, NameComponent, 'Screenshot')
     setComponent(imageEntity, TransformComponent)
     setComponent(imageEntity, EntityTreeComponent, { parentEntity: root })
@@ -718,7 +723,11 @@ export default function GLTFViewer(props: {
     if (!props.light || !sceneEntity) return
 
     const entity = createEntity()
-    setComponent(entity, UUIDComponent, 'ambient light' as EntityUUID)
+    const sourceID = getComponent(sceneEntity, UUIDComponent).entitySourceID
+    setComponent(entity, UUIDComponent, {
+      entitySourceID: sourceID,
+      entityID: 'ambient light' as EntityID
+    })
     setComponent(entity, NameComponent, 'Ambient Light')
     setComponent(entity, TransformComponent, { rotation: new Quaternion().setFromEuler(new Euler(2, 5, 3)) })
     setComponent(entity, EntityTreeComponent, { parentEntity: sceneEntity })

src/examples/MultipleCanvasCameras.tsx

@@ -1,11 +1,11 @@
 import config from '@ir-engine/common/src/config'
 import {
+  EntityID,
   EntityTreeComponent,
   EntityUUID,
   UUIDComponent,
   UndefinedEntity,
   createEntity,
-  generateEntityUUID,
   getMutableComponent,
   hasComponent,
   removeEntityNodeRecursively,
@@ -58,7 +58,10 @@ const useScene = (canvas: React.MutableRefObject<HTMLCanvasElement>) => {
     const { cameraEntity } = panelState.value
 
     setComponent(cameraEntity, NameComponent, '3D Preview Camera for ' + count)
-    setComponent(cameraEntity, UUIDComponent, ('3D Preview Camera for ' + count) as EntityUUID)
+    setComponent(cameraEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: ('camera' + count) as EntityID
+    })
 
     count++
 
@@ -76,8 +79,10 @@ const useScene = (canvas: React.MutableRefObject<HTMLCanvasElement>) => {
 export default function MultipleCanvasCameras() {
   const sceneEntity = useHookstate(() => {
     const sceneEntity = createEntity()
-    const uuid = generateEntityUUID()
-    setComponent(sceneEntity, UUIDComponent, (uuid + '-scene') as EntityUUID)
+    setComponent(sceneEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: 'scene' as EntityID
+    })
     setComponent(sceneEntity, TransformComponent)
     setComponent(sceneEntity, VisibleComponent)
     setComponent(sceneEntity, EntityTreeComponent, { parentEntity: UndefinedEntity })
@@ -103,7 +108,10 @@ export default function MultipleCanvasCameras() {
     const camera1Entity = panel1State.cameraEntity
     const camera2Entity = panel2State.cameraEntity
     const modelEntity = createEntity()
-    setComponent(modelEntity, UUIDComponent, generateEntityUUID())
+    setComponent(modelEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: 'model' as EntityID
+    })
     setComponent(modelEntity, TransformComponent)
     setComponent(modelEntity, VisibleComponent)
     setComponent(modelEntity, NameComponent, 'Model Entity 1')

src/examples/MultipleCanvasScenes.tsx

@@ -1,11 +1,11 @@
 import config from '@ir-engine/common/src/config'
 import {
+  EntityID,
   EntityTreeComponent,
   EntityUUID,
   UUIDComponent,
   UndefinedEntity,
   createEntity,
-  generateEntityUUID,
   hasComponent,
   removeEntityNodeRecursively,
   setComponent
@@ -28,15 +28,20 @@ const useScene = (canvas: React.MutableRefObject<HTMLCanvasElement>) => {
 
   const panelState = useHookstate(() => {
     const sceneEntity = createEntity()
-    const uuid = generateEntityUUID()
-    setComponent(sceneEntity, UUIDComponent, (uuid + '-scene') as EntityUUID)
+    setComponent(sceneEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: 'scene' as EntityID
+    })
     setComponent(sceneEntity, TransformComponent)
     setComponent(sceneEntity, VisibleComponent)
     setComponent(sceneEntity, EntityTreeComponent, { parentEntity: UndefinedEntity })
     setComponent(sceneEntity, SceneComponent)
 
     const cameraEntity = createEntity()
-    setComponent(cameraEntity, UUIDComponent, (uuid + '-camera') as EntityUUID)
+    setComponent(cameraEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: 'camera' as EntityID
+    })
     setComponent(cameraEntity, CameraComponent)
     setComponent(cameraEntity, TransformComponent)
     setComponent(cameraEntity, VisibleComponent)
@@ -95,7 +100,10 @@ export default function MultipleCanvasScenes() {
   useEffect(() => {
     const { cameraEntity, sceneEntity } = panel1State
     const modelEntity = createEntity()
-    setComponent(modelEntity, UUIDComponent, generateEntityUUID())
+    setComponent(modelEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: 'model 1' as EntityID
+    })
     setComponent(modelEntity, TransformComponent)
     setComponent(modelEntity, VisibleComponent)
     setComponent(modelEntity, NameComponent, 'Model Entity 1')
@@ -109,7 +117,10 @@ export default function MultipleCanvasScenes() {
   useEffect(() => {
     const { cameraEntity, sceneEntity } = panel2State
     const modelEntity = createEntity()
-    setComponent(modelEntity, UUIDComponent, generateEntityUUID())
+    setComponent(modelEntity, UUIDComponent, {
+      entitySourceID: 'engine' as EntityUUID,
+      entityID: 'model 2' as EntityID
+    })
     setComponent(modelEntity, TransformComponent)
     setComponent(modelEntity, VisibleComponent)
     setComponent(modelEntity, NameComponent, 'Model Entity 2')

src/examples/PostProcessing.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect } from 'react'
 
-import { getMutableState, useHookstate } from '@ir-engine/hyperflux'
+import { useHookstate } from '@ir-engine/hyperflux'
 
-import { UUIDComponent, useQuery } from '@ir-engine/ecs'
-import { getComponent } from '@ir-engine/ecs/src/ComponentFunctions'
+import { useQuery } from '@ir-engine/ecs'
 import { Entity } from '@ir-engine/ecs/src/Entity'
-import { SelectionState } from '@ir-engine/editor/src/services/SelectionServices'
 import { PostProcessingComponent } from '@ir-engine/spatial/src/renderer/components/PostProcessingComponent'
 import PostProcessingSettingsEditor from '@ir-engine/ui/src/components/editor/properties/postProcessing'
 import { useSearchParams } from 'react-router-dom'
@@ -24,7 +22,7 @@ export default function PostProcessing() {
     // EditorControlFunctions.modifyProperty = (entities, component, properties) => {
     //   setComponent(entity.value!, PostProcessingComponent, properties)
     // }
-    getMutableState(SelectionState).selectedEntities.set([getComponent(entity.value!, UUIDComponent)])
+    // getMutableState(SelectionState).selectedEntities.set([getComponent(entity.value!, UUIDComponent)])
   }, [postProEnt])
 
   return (

src/examples/avatarMocap.tsx

@@ -1,5 +1,5 @@
 import { useWorldNetwork } from '@ir-engine/client-core/src/common/services/LocationInstanceConnectionService'
-import { Entity, EntityUUID, UUIDComponent, generateEntityUUID, removeEntityNodeRecursively } from '@ir-engine/ecs'
+import { Entity, EntityID, EntityUUID, UUIDComponent, removeEntityNodeRecursively } from '@ir-engine/ecs'
 import { setComponent, useComponent, useOptionalComponent } from '@ir-engine/ecs/src/ComponentFunctions'
 import { AvatarRigComponent } from '@ir-engine/engine/src/avatar/components/AvatarAnimationComponent'
 import { MotionCaptureResults, mocapDataChannelType } from '@ir-engine/engine/src/mocap/MotionCaptureSystem'
@@ -170,12 +170,14 @@ function AvatarMocap(props: { sceneEntity: Entity }) {
   useEffect(() => {
     if (!selectedAvatar.value || !network?.ready.value) return
 
-    const uuid = generateEntityUUID()
     const entity = setupEntity(props.sceneEntity)
-    setComponent(entity, UUIDComponent, uuid)
+    setComponent(entity, UUIDComponent, {
+      entitySourceID: rootUUID.value.entitySourceID,
+      entityID: 'avatar' as EntityID
+    })
     setComponent(entity, VisibleComponent, true)
 
-    const id = spawnAvatar(rootUUID.value, uuid, selectedAvatar.value, {
+    const id = spawnAvatar(rootUUID.value.entitySourceID, rootUUID.value.entityID, selectedAvatar.value, {
       position: new Vector3(),
       rotation: new Quaternion()
     })

src/examples/avatarSimple.tsx

@@ -17,6 +17,7 @@ import { useFind } from '@ir-engine/common'
 import { avatarPath } from '@ir-engine/common/src/schema.type.module'
 import {
   createEntity,
+  EntityID,
   EntityTreeComponent,
   EntityUUID,
   getComponent,
@@ -72,8 +73,14 @@ export default function AvatarSimpleEntry() {
   useEffect(() => {
     if (!renderer?.value) return
 
+    const originEntity = getState(ReferenceSpaceState).originEntity
+    const originUUID = getComponent(originEntity, UUIDComponent)
+
     const lightEntity = createEntity()
-    setComponent(lightEntity, UUIDComponent, 'directional light' as EntityUUID)
+    setComponent(lightEntity, UUIDComponent, {
+      entitySourceID: originUUID.entitySourceID,
+      entityID: 'directional light' as EntityID
+    })
     setComponent(lightEntity, NameComponent, 'Directional Light')
     setComponent(lightEntity, TransformComponent, { rotation: new Quaternion().setFromEuler(new Euler(2, 5, 3)) })
     setComponent(lightEntity, EntityTreeComponent, { parentEntity: getState(ReferenceSpaceState).originEntity })
@@ -89,7 +96,7 @@ export default function AvatarSimpleEntry() {
     const blob = new Blob([JSON.stringify(gltf)], { type: 'application/json' })
     const blobURL = URL.createObjectURL(blob)
 
-    const gltfEntity = AssetState.load(blobURL, blobURL as EntityUUID)
+    const gltfEntity = AssetState.load(blobURL, 'scene' as EntityID)
     renderer.scenes.merge([gltfEntity])
     setComponent(gltfEntity, SceneComponent)
     getMutableState(SceneState)[sceneURL].set(gltfEntity)
@@ -122,13 +129,14 @@ export default function AvatarSimpleEntry() {
         })
       )
       peerIndexesCreated.push(i)
-      const parentUUID = getComponent(entity.value, UUIDComponent)
+      const parentUUID = UUIDComponent.concatenateUUID(getComponent(entity.value, UUIDComponent))
       dispatchAction(
         AvatarNetworkAction.spawn({
           position: new Vector3((Math.random() - 0.5) * spread, 0, (Math.random() - 0.5) * spread),
-          parentUUID,
+          parentUUID: parentUUID,
           avatarURL: randomAvatar.modelResource!.url,
-          entityUUID: ('test user ' + i + '_avatar') as EntityUUID,
+          entitySourceID: parentUUID,
+          entityID: 'avatar' as EntityID,
           name: 'test user ' + i,
           $peer: ('test peer ' + i) as PeerID
         })

src/examples/componentExamples/componentExamples.tsx

@@ -6,7 +6,6 @@ import {
   UUIDComponent,
   UndefinedEntity,
   createEntity,
-  generateEntityUUID,
   getComponent,
   removeEntity,
   setComponent,
@@ -226,16 +225,14 @@ export const subComponentExamples = [
       const { parent, onLoad } = props
       const entity = useExampleEntity(parent)
       const particles = useOptionalComponent(entity, ParticleSystemComponent)
-      const source = GLTFComponent.useInstanceID(parent)
 
       useEffect(() => {
-        if (!source) return
         setComponent(entity, NameComponent, 'Particle-Example')
         setComponent(entity, ParticleSystemComponent)
-        setComponent(entity, SourceComponent, source)
+        setComponent(entity, SourceComponent, parent)
         setVisibleComponent(entity, true)
         getComponent(entity, TransformComponent).position.set(0, 2, 0)
-      }, [source])
+      }, [])
 
       useEffect(() => {
         if (particles?.system.value) onLoad(entity)
@@ -351,7 +348,7 @@ export const subComponentExamples = [
           geometryParams: { radius: 0.2, segments: 10 }
         })
         setVisibleComponent(childEntity, true)
-        setComponent(childEntity, SplineTrackComponent, { splineEntityUUID: getComponent(entity, NodeIDComponent) })
+        setComponent(childEntity, SplineTrackComponent, { splineEntityUUID: UUIDComponent.getUUID(entity) })
         onLoad(entity)
       }, [])
 
@@ -495,7 +492,11 @@ export const ComponentExamples = (props: {
 
   useEffect(() => {
     const componentNamesUIEntity = createEntity()
-    setComponent(componentNamesUIEntity, UUIDComponent, generateEntityUUID())
+    const sceneSourceID = getComponent(sceneEntity, UUIDComponent).entitySourceID
+    setComponent(componentNamesUIEntity, UUIDComponent, {
+      entitySourceID: sceneSourceID,
+      entityID: UUIDComponent.generate()
+    })
     setComponent(componentNamesUIEntity, EntityTreeComponent, { parentEntity: sceneEntity })
     setComponent(componentNamesUIEntity, NameComponent, 'componentNamesUI')
     const componentNamesUI = createXRUI(ComponentNamesUI, xrui, { interactable: false }, componentNamesUIEntity)

src/examples/gltfViewer.tsx

@@ -5,7 +5,7 @@ import { getComponent, removeComponent, setComponent } from '@ir-engine/ecs/src/
 import { DndWrapper } from '@ir-engine/editor/src/components/dnd/DndWrapper'
 import { getMutableState, getState, useHookstate, useMutableState } from '@ir-engine/hyperflux'
 
-import { Entity, EntityUUID, UUIDComponent, createEntity, removeEntity } from '@ir-engine/ecs'
+import { Entity, EntityID, UUIDComponent, createEntity, removeEntity } from '@ir-engine/ecs'
 
 import config from '@ir-engine/common/src/config'
 import { EntityTreeComponent } from '@ir-engine/ecs'
@@ -45,7 +45,12 @@ const GLTF = () => {
     let modelEntity: Entity | undefined
     if (loadOldModel) {
       modelEntity = createEntity()
-      setComponent(modelEntity, UUIDComponent, 'gltf viewer' as EntityUUID)
+      const originEntity = getState(ReferenceSpaceState).originEntity
+      const originUUID = getComponent(originEntity, UUIDComponent)
+      setComponent(modelEntity, UUIDComponent, {
+        entitySourceID: originUUID.entitySourceID,
+        entityID: '3D Preview Entity' as EntityID
+      })
       setComponent(modelEntity, NameComponent, '3D Preview Entity')
       setComponent(modelEntity, TransformComponent, { position: new Vector3(3, 0, 0) })
       setComponent(modelEntity, EntityTreeComponent, { parentEntity: getState(ReferenceSpaceState).originEntity })
@@ -55,7 +60,12 @@ const GLTF = () => {
     }
 
     const entity = createEntity()
-    setComponent(entity, UUIDComponent, 'directional light' as EntityUUID)
+    const originEntity = getState(ReferenceSpaceState).originEntity
+    const originUUID = getComponent(originEntity, UUIDComponent)
+    setComponent(entity, UUIDComponent, {
+      entitySourceID: originUUID.entitySourceID,
+      entityID: 'directional light' as EntityID
+    })
     setComponent(entity, NameComponent, 'Directional Light')
     setComponent(entity, TransformComponent, { rotation: new Quaternion().setFromEuler(new Euler(2, 5, 3)) })
     setComponent(entity, EntityTreeComponent, { parentEntity: getState(ReferenceSpaceState).originEntity })