feat: custom component and icon

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);
 }

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 <span className="tree-icon player-icon"></span>
   } else if (value === CAMERA) {
     return <span className="tree-icon camera-icon"></span>
+  } else if (isCustom) {
+    return <span className="tree-icon custom-icon"></span>
   } else if (isSmart) {
     return <span className="tree-icon smart-icon"></span>
   } else if (isTile) {

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)
           }
         }
 

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

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<EditorComponentsTypes['Config']>
   Ground: LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['Ground']>
   Tile: LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['Tile']>
+  CustomAsset: LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['CustomAsset']>
 }
 
 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<EditorComponentsTypes['States']>,
     CounterBar: CounterBar as unknown as LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['CounterBar']>,
     Ground: Ground as unknown as LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['Ground']>,
-    Tile: Tile as unknown as LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['Tile']>
+    Tile: Tile as unknown as LastWriteWinElementSetComponentDefinition<EditorComponentsTypes['Tile']>,
+    CustomAsset: CustomAsset as unknown as LastWriteWinElementSetComponentDefinition<
+      EditorComponentsTypes['CustomAsset']
+    >
   }
 }

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