diff --git a/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css b/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css index b0bee1934..b35bd64bb 100644 --- a/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css +++ b/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.css @@ -22,6 +22,10 @@ background-image: url(./icons/camera.svg); } +.Hierarchy .custom-icon { + background-image: url(./icons/custom.svg); +} + .Hierarchy .smart-icon { background-image: url(./icons/smart.svg); } diff --git a/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx b/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx index 6bda74bf2..8039e12b0 100644 --- a/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx +++ b/packages/@dcl/inspector/src/components/Hierarchy/Hierarchy.tsx @@ -21,6 +21,8 @@ const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => { [sdk, value] ) + const isCustom = useMemo(() => sdk.components.CustomAsset.has(value), [sdk, value]) + const isTile = useMemo(() => sdk.components.Tile.has(value), [sdk, value]) const isGroup = useMemo(() => { @@ -35,6 +37,8 @@ const HierarchyIcon = withSdk<{ value: Entity }>(({ sdk, value }) => { return } else if (value === CAMERA) { return + } else if (isCustom) { + return } else if (isSmart) { return } else if (isTile) { diff --git a/packages/@dcl/inspector/src/components/Hierarchy/icons/custom.svg b/packages/@dcl/inspector/src/components/Hierarchy/icons/custom.svg new file mode 100644 index 000000000..b1f22e394 --- /dev/null +++ b/packages/@dcl/inspector/src/components/Hierarchy/icons/custom.svg @@ -0,0 +1,8 @@ + + + + \ No newline at end of file diff --git a/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx b/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx index fa28e2b30..61aaae487 100644 --- a/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx +++ b/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx @@ -211,7 +211,7 @@ const Renderer: React.FC = () => { return snapPosition(new Vector3(fixedNumber(pointerCoords.x), 0, fixedNumber(pointerCoords.z))) } - const addAsset = async (asset: AssetNodeItem, position: Vector3, basePath: string) => { + const addAsset = async (asset: AssetNodeItem, position: Vector3, basePath: string, isCustom: boolean) => { if (!sdk) return const { operations } = sdk operations.addAsset( @@ -222,14 +222,16 @@ const Renderer: React.FC = () => { basePath, sdk.enumEntity, asset.composite, - asset.asset.id + asset.asset.id, + isCustom ) await operations.dispatch() analytics.track(Event.ADD_ITEM, { itemId: asset.asset.id, itemName: asset.name, itemPath: asset.asset.src, - isSmart: isSmart(asset) + isSmart: isSmart(asset), + isCustom }) canvasRef.current?.focus() } @@ -303,7 +305,7 @@ const Renderer: React.FC = () => { console.log('model', model) dispatch(importAsset({ content, basePath, assetPackageName: '', reload: true })) - await addAsset(model, position, basePath) + await addAsset(model, position, basePath, true) } const importCatalogAsset = async (asset: Asset) => { @@ -376,7 +378,7 @@ const Renderer: React.FC = () => { if (isGround(asset)) { position.y += 0.25 } - await addAsset(model, position, basePath) + await addAsset(model, position, basePath, false) } } @@ -397,7 +399,7 @@ const Renderer: React.FC = () => { const model = getNode(node, item.context.tree, isModel) if (model) { const position = await getDropPosition() - await addAsset(model, position, DIRECTORY.ASSETS) + await addAsset(model, position, DIRECTORY.ASSETS, false) } } diff --git a/packages/@dcl/inspector/src/lib/logic/analytics.ts b/packages/@dcl/inspector/src/lib/logic/analytics.ts index cded8050d..e6aa493ae 100644 --- a/packages/@dcl/inspector/src/lib/logic/analytics.ts +++ b/packages/@dcl/inspector/src/lib/logic/analytics.ts @@ -19,6 +19,7 @@ export type Events = { itemName: string itemPath: string isSmart: boolean + isCustom: boolean } [Event.ADD_COMPONENT]: { componentName: string diff --git a/packages/@dcl/inspector/src/lib/sdk/components/index.ts b/packages/@dcl/inspector/src/lib/sdk/components/index.ts index 30f48c6d4..d24a104f0 100644 --- a/packages/@dcl/inspector/src/lib/sdk/components/index.ts +++ b/packages/@dcl/inspector/src/lib/sdk/components/index.ts @@ -53,7 +53,8 @@ export enum EditorComponentNames { Lock = 'inspector::Lock', Config = 'inspector::Config', Ground = 'inspector::Ground', - Tile = 'inspector::Tile' + Tile = 'inspector::Tile', + CustomAsset = 'inspector::CustomAsset' } export enum SceneAgeRating { @@ -118,6 +119,10 @@ export type GroundComponent = {} // eslint-disable-next-line @typescript-eslint/ban-types export type TileComponent = {} +export type CustomAssetComponent = { + assetId: string +} + export enum SceneCategory { ART = 'art', GAME = 'game', @@ -148,6 +153,7 @@ export type EditorComponentsTypes = { Config: ConfigComponent Ground: GroundComponent Tile: TileComponent + CustomAsset: CustomAssetComponent } export type EditorComponents = { @@ -166,6 +172,7 @@ export type EditorComponents = { Config: LastWriteWinElementSetComponentDefinition Ground: LastWriteWinElementSetComponentDefinition Tile: LastWriteWinElementSetComponentDefinition + CustomAsset: LastWriteWinElementSetComponentDefinition } export type SdkComponents = { @@ -344,6 +351,9 @@ export function createEditorComponents(engine: IEngine): EditorComponents { const Ground = engine.defineComponent(EditorComponentNames.Ground, {}) const Tile = engine.defineComponent(EditorComponentNames.Tile, {}) + const CustomAsset = engine.defineComponent(EditorComponentNames.CustomAsset, { + assetId: Schemas.String + }) return { Selection, @@ -362,6 +372,9 @@ export function createEditorComponents(engine: IEngine): EditorComponents { States: States as unknown as LastWriteWinElementSetComponentDefinition, CounterBar: CounterBar as unknown as LastWriteWinElementSetComponentDefinition, Ground: Ground as unknown as LastWriteWinElementSetComponentDefinition, - Tile: Tile as unknown as LastWriteWinElementSetComponentDefinition + Tile: Tile as unknown as LastWriteWinElementSetComponentDefinition, + CustomAsset: CustomAsset as unknown as LastWriteWinElementSetComponentDefinition< + EditorComponentsTypes['CustomAsset'] + > } } diff --git a/packages/@dcl/inspector/src/lib/sdk/operations/add-asset/index.ts b/packages/@dcl/inspector/src/lib/sdk/operations/add-asset/index.ts index 9d27588c0..74ea5b20b 100644 --- a/packages/@dcl/inspector/src/lib/sdk/operations/add-asset/index.ts +++ b/packages/@dcl/inspector/src/lib/sdk/operations/add-asset/index.ts @@ -36,12 +36,14 @@ export function addAsset(engine: IEngine) { base: string, enumEntityId: EnumEntity, composite?: AssetData['composite'], - assetId?: string + assetId?: string, + custom?: boolean ): Entity { const Transform = engine.getComponent(TransformEngine.componentId) as typeof TransformEngine const GltfContainer = engine.getComponent(GltfEngine.componentId) as typeof GltfEngine const NetworkEntity = engine.getComponent(NetworkEntityEngine.componentId) as typeof NetworkEntityEngine const Nodes = engine.getComponent(EditorComponentNames.Nodes) as EditorComponents['Nodes'] + const CustomAsset = engine.getComponent(EditorComponentNames.CustomAsset) as EditorComponents['CustomAsset'] if (composite) { // Get all unique entity IDs from components @@ -317,6 +319,10 @@ export function addAsset(engine: IEngine) { throw new Error('No main entity found') } + if (assetId && custom) { + CustomAsset.createOrReplace(mainEntity, { assetId }) + } + // update selection updateSelectedEntity(engine)(mainEntity) return mainEntity