diff --git a/src/examples/DynamicAuthoring.tsx b/src/examples/DynamicAuthoring.tsx new file mode 100644 index 0000000..e5c3f0d --- /dev/null +++ b/src/examples/DynamicAuthoring.tsx @@ -0,0 +1,86 @@ +import { + Entity, + Layers, + QueryReactor, + UUIDComponent, + getAuthoringCounterpart, + loadEntitiesIntoAuthoring, + unloadEntitiesFromAuthoring, + useQuery +} from '@ir-engine/ecs' +import { AuthoringState } from '@ir-engine/engine/src/authoring/AuthoringState' +import { GLTFComponent } from '@ir-engine/engine/src/gltf/GLTFComponent' +import { getState } from '@ir-engine/hyperflux' +import Button from '@ir-engine/ui/src/primitives/tailwind/Button' +import React, { useCallback } from 'react' + +export default function DynamicAuthoring() { + // invoke authoring state + getState(AuthoringState) + + return ( + <> +
+ +
+ + ) +} + +const SourceLoaded = (props: { entity: Entity }) => { + const loaded = GLTFComponent.useSceneLoaded(props.entity) + if (!loaded) return null + return +} + +/** + * Contains a button and name of the entity to select and edit it. + */ +const SelectEditReactor = (props: { entity: Entity }) => { + const { entity } = props + const isInAuthoring = !!getAuthoringCounterpart(entity) + + useQuery([UUIDComponent], Layers.Authoring) // trigger rerender + + // Handle loading entity into authoring + const handleLoadIntoAuthoring = useCallback(() => { + try { + const source = GLTFComponent.getSourceID(entity) + const entities = UUIDComponent.getEntitiesBySource(source, Layers.Simulation) + loadEntitiesIntoAuthoring([entity, ...entities]) + console.log('Loaded entities into authoring:', [entity, ...entities]) + } catch (error) { + console.error('Failed to load entity into authoring:', error) + } + }, []) + + // Handle unloading entity from authoring + const handleUnloadFromAuthoring = useCallback(() => { + try { + const authoringEntity = getAuthoringCounterpart(entity) + const source = GLTFComponent.getSourceID(authoringEntity) + const entities = UUIDComponent.getEntitiesBySource(source, Layers.Authoring) + unloadEntitiesFromAuthoring([authoringEntity, ...entities]) + console.log('Unloaded entities from authoring:', [authoringEntity, ...entities]) + } catch (error) { + console.error('Failed to unload entity from authoring:', error) + } + }, []) + + return ( +
+
Entity ID: {entity}
+
+ {isInAuthoring ? ( + + ) : ( + + )} +
+
+ ) +} diff --git a/src/examplesRoute.tsx b/src/examplesRoute.tsx index f936fe8..566a37e 100644 --- a/src/examplesRoute.tsx +++ b/src/examplesRoute.tsx @@ -2,6 +2,7 @@ import React from 'react' import '@ir-engine/client/src/engine' +import DynamicAuthoring from './examples/DynamicAuthoring' import { gltfRoutes } from './examples/GLTFs' import InstanceConnection from './examples/InstanceConnection' import InstancedLODs from './examples/InstancedLODs' @@ -117,6 +118,12 @@ export const examples: RouteCategories = [ name: 'Multiple Canvases with different cameras', description: 'View the same scene from different cameras', entry: MultipleCanvasCameras + }, + { + name: 'Dynamic Authoring', + description: 'Allows you to use editor APIs to edit entities at runtime', + sceneKey: 'projects/ir-engine/default-project/public/scenes/apartment.gltf', + entry: DynamicAuthoring } ] },