ir-engine · DanielBelmes · Jun 9, 2025 · May 24, 2025 · May 24, 2025 · May 28, 2025
@@ -0,0 +1,62 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/ir-engine/ir-engine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Infinite Reality Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Infinite Reality Engine team.
+
+All portions of the code written by the Infinite Reality Engine team are Copyright © 2021-2025
+Infinite Reality Engine. All Rights Reserved.
+*/
+
+import { setComponent, UndefinedEntity, useComponent } from '@ir-engine/ecs'
+import { ColliderComponent } from '@ir-engine/spatial/src/physics/components/ColliderComponent'
+import { Shapes } from '@ir-engine/spatial/src/physics/types/PhysicsTypes'
+import { ObjectComponent } from '@ir-engine/spatial/src/renderer/components/ObjectComponent'
+import BoxColliderIcon from '@ir-engine/ui/src/components/editor/assets/boxCollider.png'
+import CylinderColliderIcon from '@ir-engine/ui/src/components/editor/assets/cylinderCollider.png'
+import SphereColiderIcon from '@ir-engine/ui/src/components/editor/assets/sphereCollider.png'
+import { useEffect } from 'react'
+import { getIconGizmo } from '../../functions/gizmos/studioIconGizmoHelper'
+
+export const ColliderHelperReactor: React.FC = (props: { parentEntity; iconEntity; selected; hovered }) => {
+  const { parentEntity, iconEntity, selected, hovered } = props
+
+  const colliderComponent = useComponent(parentEntity, ColliderComponent)
+
+  useEffect(() => {
+    if (iconEntity === UndefinedEntity) return
+    const icon = (shape = 'box') => {
+      switch (shape) {
+        case Shapes.Sphere:
+        case Shapes.Capsule:
+          return SphereColiderIcon
+        case Shapes.Cylinder:
+          return CylinderColliderIcon
+        case Shapes.Box: /* fall-through */
+        case Shapes.Plane:
+        default:
+          return BoxColliderIcon
+      }
+    }
+
+    const iconHelper = getIconGizmo(icon(colliderComponent?.shape.value))
+    setComponent(iconEntity, ObjectComponent, iconHelper)
+  }, [iconEntity, colliderComponent.shape])
+
+  return null
+}
@@ -24,6 +24,7 @@ Infinite Reality Engine. All Rights Reserved.
 */
 
 import { PositionalAudioComponent } from '@ir-engine/engine/src/audio/components/PositionalAudioComponent'
+import { GLTFComponent } from '@ir-engine/engine/src/gltf/GLTFComponent'
 import { EnvMapBakeComponent } from '@ir-engine/engine/src/scene/components/EnvMapBakeComponent'
 import { MediaComponent } from '@ir-engine/engine/src/scene/components/MediaComponent'
 import { MountPointComponent } from '@ir-engine/engine/src/scene/components/MountPointComponent'
@@ -40,10 +41,8 @@ import {
 } from '@ir-engine/spatial'
 import { ColliderComponent } from '@ir-engine/spatial/src/physics/components/ColliderComponent'
 import { RigidBodyComponent } from '@ir-engine/spatial/src/physics/components/RigidBodyComponent'
-import { Shapes } from '@ir-engine/spatial/src/physics/types/PhysicsTypes'
 import BoxColliderIcon from '@ir-engine/ui/src/components/editor/assets/boxCollider.png'
 import CameraIcon from '@ir-engine/ui/src/components/editor/assets/camera.png'
-import CylinderColliderIcon from '@ir-engine/ui/src/components/editor/assets/cylinderCollider.png'
 import DirectionalLightIcon from '@ir-engine/ui/src/components/editor/assets/directional.png'
 import EnvMapBakeIcon from '@ir-engine/ui/src/components/editor/assets/envMap.png'
 import HemisphereLightIcon from '@ir-engine/ui/src/components/editor/assets/hemisphere.png'
@@ -54,40 +53,115 @@ import PortalIcon from '@ir-engine/ui/src/components/editor/assets/portal.png'
 import PositionalAudioIcon from '@ir-engine/ui/src/components/editor/assets/positionalAudio.png'
 import RigidBodyIcon from '@ir-engine/ui/src/components/editor/assets/rigidBody.png'
 import SpawnPointIcon from '@ir-engine/ui/src/components/editor/assets/spawnPoint.png'
-import SphereColiderIcon from '@ir-engine/ui/src/components/editor/assets/sphereCollider.png'
 import SpotLightIcon from '@ir-engine/ui/src/components/editor/assets/spot.png'
 import TriggerIcon from '@ir-engine/ui/src/components/editor/assets/trigger.png'
+import { ColliderHelperReactor } from './ColliderHelper'
+import { DirectionalLightHelperReactor } from './DirectionalLightHelper'
+import { EnvmapBakeHelperReactor } from './EnvmapBakeHelper'
+import { HemiSphereLightHelperReactor } from './HemiSphereLightHelper'
+import { MediaHelperReactor } from './MediaHelper'
+import { MountPointHelperReactor } from './MountPointHelper'
+import { PointLightHelperReactor } from './PointLightHelper'
+import { PortalHelperReactor } from './PortalHelper'
+import { PositionalAudioHelperReactor } from './PositionalAudioHelper'
+import { ScenePreviewCameraHelperReactor } from './ScenePreviewCameraHelper'
+import { SpawnPointHelperReactor } from './SpawnPointHelper'
+import { SpotLightHelperReactor } from './SpotLightHelper'
 
-export const ComponentStudioIconState = defineState({
-  name: 'ee.editor.ComponentStudioIconState',
+export interface ComponentHelperEntry {
+  reactor?: React.FC
+  icon?: any
+  directional?: boolean
+  volume?: boolean
+  priority: number
+}
+
+export const ComponentHelperState = defineState({
+  name: 'ee.editor.ComponentHelperState',
   initial: () => {
     return {
-      [DirectionalLightComponent.jsonID]: DirectionalLightIcon, // point to texture files
-      [EnvMapBakeComponent.jsonID]: EnvMapBakeIcon,
-      [MediaComponent.jsonID]: MediaIcon,
-      [HemisphereLightComponent.jsonID]: HemisphereLightIcon,
-      [MountPointComponent.jsonID]: MountPointIcon,
-      [PointLightComponent.jsonID]: PointLightIcon,
-      [PositionalAudioComponent.jsonID]: PositionalAudioIcon,
-      [PortalComponent.jsonID]: PortalIcon,
-      [ScenePreviewCameraComponent.jsonID]: CameraIcon,
-      [SpotLightComponent.jsonID]: SpotLightIcon,
-      [SpawnPointComponent.jsonID]: SpawnPointIcon,
-      [RigidBodyComponent.jsonID]: RigidBodyIcon,
-      [TriggerCallbackComponent.jsonID]: TriggerIcon,
-      [ColliderComponent.jsonID]: (shape = 'box') => {
-        switch (shape) {
-          case Shapes.Sphere:
-          case Shapes.Capsule:
-            return SphereColiderIcon
-          case Shapes.Cylinder:
-            return CylinderColliderIcon
-          case Shapes.Box: /*fall-through*/
-          case Shapes.Plane:
-          default:
-            return BoxColliderIcon
-        }
+      [DirectionalLightComponent.jsonID]: {
+        icon: DirectionalLightIcon,
+        reactor: DirectionalLightHelperReactor,
+        directional: true,
+        priority: 3
+      },
+      [EnvMapBakeComponent.jsonID]: {
+        icon: EnvMapBakeIcon,
+        reactor: EnvmapBakeHelperReactor,
+        priority: 2
+      },
+      [MediaComponent.jsonID]: {
+        icon: MediaIcon,
+        reactor: MediaHelperReactor,
+        priority: 1
+      },
+      [HemisphereLightComponent.jsonID]: {
+        icon: HemisphereLightIcon,
+        reactor: HemiSphereLightHelperReactor,
+        priority: 3
+      },
+      [MountPointComponent.jsonID]: {
+        icon: MountPointIcon,
+        reactor: MountPointHelperReactor,
+        volume: true,
+        priority: 1
+      },
+      [PointLightComponent.jsonID]: {
+        icon: PointLightIcon,
+        reactor: PointLightHelperReactor,
+        priority: 3
+      },
+      [PositionalAudioComponent.jsonID]: {
+        icon: PositionalAudioIcon,
+        reactor: PositionalAudioHelperReactor,
+        directional: true,
+        priority: 2
+      },
+      [PortalComponent.jsonID]: {
+        icon: PortalIcon,
+        reactor: PortalHelperReactor,
+        priority: 2
+      },
+      [ScenePreviewCameraComponent.jsonID]: {
+        icon: CameraIcon,
+        reactor: ScenePreviewCameraHelperReactor,
+        directional: true,
+        priority: 2
+      },
+      [SpotLightComponent.jsonID]: {
+        icon: SpotLightIcon,
+        reactor: SpotLightHelperReactor,
+        directional: true,
+        priority: 3
+      },
+      [SpawnPointComponent.jsonID]: {
+        icon: SpawnPointIcon,
+        reactor: SpawnPointHelperReactor,
+        directional: true,
+        volume: true,
+        priority: 2
+      },
+      [RigidBodyComponent.jsonID]: {
+        icon: RigidBodyIcon,
+        volume: true,
+        priority: 0
+      },
+      [TriggerCallbackComponent.jsonID]: {
+        icon: TriggerIcon,
+        volume: true,
+        priority: 0
+      },
+      [ColliderComponent.jsonID]: {
+        icon: BoxColliderIcon,
+        reactor: ColliderHelperReactor,
+        volume: true,
+        priority: -1
+      },
+      [GLTFComponent.jsonID]: {
+        volume: true,
+        priority: -1
       }
-    } as Record<string, any>
+    } as Record<string, ComponentHelperEntry>
   }
 })
@@ -0,0 +1,131 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/ir-engine/ir-engine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Infinite Reality Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Infinite Reality Engine team.
+
+All portions of the code written by the Infinite Reality Engine team are Copyright © 2021-2025
+Infinite Reality Engine. All Rights Reserved.
+*/
+
+import { useHookstate } from '@hookstate/core'
+import {
+  createEntity,
+  Entity,
+  EntityTreeComponent,
+  getMutableComponent,
+  removeEntity,
+  setComponent,
+  UndefinedEntity,
+  useComponent
+} from '@ir-engine/ecs'
+import { mergeBufferGeometries } from '@ir-engine/spatial/src/common/classes/BufferGeometryUtils'
+import { LineSegmentComponent } from '@ir-engine/spatial/src/renderer/components/LineSegmentComponent'
+import { DirectionalLightComponent } from '@ir-engine/spatial/src/SpatialModule'
+import { BOUNDING_BOX_COLORS } from '@ir-engine/spatial/src/transform/components/BoundingBoxComponent'
+import { useEffect } from 'react'
+import { BufferGeometry, Float32BufferAttribute } from 'three'
+
+const size = 3
+const lightPlaneGeometry = new BufferGeometry()
+lightPlaneGeometry.setAttribute(
+  'position',
+  new Float32BufferAttribute(
+    [
+      -size,
+      size,
+      0,
+      size,
+      size,
+      0,
+      size,
+      size,
+      0,
+      size,
+      -size,
+      0,
+      size,
+      -size,
+      0,
+      -size,
+      -size,
+      0,
+      -size,
+      -size,
+      0,
+      -size,
+      size,
+      0,
+      -size,
+      size,
+      0,
+      size,
+      -size,
+      0,
+      size,
+      size,
+      0,
+      -size,
+      -size,
+      0
+    ],
+    3
+  )
+)
+
+const targetLineGeometry = new BufferGeometry()
+const t = size * 0.1
+targetLineGeometry.setAttribute(
+  'position',
+  new Float32BufferAttribute([-t, t, 0, 0, 0, 1, t, t, 0, 0, 0, 1, t, -t, 0, 0, 0, 1, -t, -t, 0, 0, 0, 1], 3)
+)
+
+const mergedGeometry = mergeBufferGeometries([targetLineGeometry, lightPlaneGeometry])
+
+export const DirectionalLightHelperReactor: React.FC = (props: { parentEntity; iconEntity; selected; hovered }) => {
+  const { parentEntity, iconEntity, selected, hovered } = props
+
+  const directionalLight = useComponent(parentEntity, DirectionalLightComponent)
+  const directionalLightHelperEntity = useHookstate<Entity>(UndefinedEntity)
+  useEffect(() => {
+    if (!(selected || hovered)) return
+
+    const helperEntity = createEntity()
+    setComponent(helperEntity, EntityTreeComponent, { parentEntity })
+    setComponent(helperEntity, LineSegmentComponent, {
+      name: 'directional-light-helper',
+      geometry: mergedGeometry?.clone(),
+      color: directionalLight.color.value
+    })
+    directionalLightHelperEntity.set(helperEntity)
+
+    return () => {
+      removeEntity(helperEntity)
+      directionalLightHelperEntity.set(UndefinedEntity)
+    }
+  }, [selected, hovered])
+
+  useEffect(() => {
+    if (directionalLightHelperEntity.value === UndefinedEntity) return
+    const helper = getMutableComponent(directionalLightHelperEntity.value, LineSegmentComponent)
+    if (!helper) return
+    helper.color.set(hovered ? BOUNDING_BOX_COLORS.HOVERED : directionalLight.color.value)
+  }, [directionalLightHelperEntity, directionalLight.color, hovered])
+
+  return null
+}
@@ -23,26 +23,16 @@ All portions of the code written by the Infinite Reality Engine team are Copyrig
 Infinite Reality Engine. All Rights Reserved.
 */
 
-import { S } from '@ir-engine/ecs'
-import { defineComponent } from '@ir-engine/ecs/src/ComponentFunctions'
-
-export const ActiveHelperComponent = defineComponent({
-  name: 'ActiveHelperComponent',
-  jsonID: 'EE_activeHelper',
-  schema: S.Object({
-    enabled: S.Bool({ default: true }),
-    helperIconGizmo: S.Entity(), // manages the icon and minor gizmo
-    hovered: S.Bool({ default: false }),
-    selected: S.Bool({ default: false }),
-    helperSelectedGizmo: S.Entity(), // manages the elaborate gizmo
-    directional: S.Bool({ default: false }),
-    directionalEntities: S.Array(S.Entity()),
-    lineEntities: S.Array(S.Entity()),
-    volumeEnabled: S.Bool({ default: false }),
-    volumeControlled: S.Bool({ default: true }),
-    sizeFactor: S.Number({ default: 0.25 })
-  }),
-  reactor: () => {
-    return null
-  }
-})
+import { useHelperEntity } from '@ir-engine/spatial/src/helper/functions/useHelperEntity'
+import { Mesh, MeshPhysicalMaterial, SphereGeometry } from 'three'
+
+const sphereGeometry = new SphereGeometry(0.75)
+const helperMeshMaterial = new MeshPhysicalMaterial({ roughness: 0, metalness: 1 })
+
+export const EnvmapBakeHelperReactor: React.FC = (props: { parentEntity; iconEntity; selected; hovered }) => {
+  const { parentEntity, iconEntity, selected, hovered } = props
+
+  const debugEnabled = selected || hovered
+  useHelperEntity(parentEntity, () => new Mesh(sphereGeometry, helperMeshMaterial), debugEnabled)
+  return null
+}