Merge remote-tracking branch 'origin' into fix/multiplayer-clone

packages/@dcl/inspector/package.json

@@ -2,7 +2,7 @@
   "name": "@dcl/inspector",
   "version": "0.1.0",
   "dependencies": {
-    "@dcl/asset-packs": "^1.20.3-20241003132817.commit-926ddc8",
+    "@dcl/asset-packs": "^2.1.0",
     "ts-deepmerge": "^7.0.0"
   },
   "devDependencies": {

packages/@dcl/inspector/src/components/AssetsCatalog/Asset/Asset.tsx

@@ -11,7 +11,7 @@ import { fetchImage, resizeImage } from '../../../lib/utils/img'
 import { useIsMounted } from '../../../hooks/useIsMounted'
 
 const Asset: React.FC<{ value: Asset }> = ({ value }) => {
-  const [, drag, preview] = useDrag(() => ({ type: 'builder-asset', item: { value } }), [value])
+  const [, drag, preview] = useDrag(() => ({ type: 'catalog-asset', item: { value } }), [value])
   const isSmartItem = isSmart(value)
   const isGroundItem = isGround(value)
   const imgSrc = getContentsUrl(value.contents['thumbnail.png'])

packages/@dcl/inspector/src/components/EntityInspector/EntityHeader/EntityHeader.tsx

@@ -32,7 +32,7 @@ interface ModalState {
   cb?: () => void
 }
 
-const getLabel = (sdk: SdkContextValue, entity: Entity) => {
+export const getLabel = (sdk: SdkContextValue, entity: Entity) => {
   const nameComponent = sdk.components.Name.getOrNull(entity)
   switch (entity) {
     case ROOT:

packages/@dcl/inspector/src/components/EntityInspector/EntityInspector.tsx

@@ -1,10 +1,12 @@
+import { Entity } from '@dcl/ecs'
 import { useEffect, useMemo, useState } from 'react'
 
 import { withSdk } from '../../hoc/withSdk'
 import { useChange } from '../../hooks/sdk/useChange'
-import { useSelectedEntity } from '../../hooks/sdk/useSelectedEntity'
+import { useEntitiesWith } from '../../hooks/sdk/useEntitiesWith'
 import { useAppSelector } from '../../redux/hooks'
 import { getHiddenComponents } from '../../redux/ui'
+import { EDITOR_ENTITIES } from '../../lib/sdk/tree'
 
 import { GltfInspector } from './GltfInspector'
 import { ActionInspector } from './ActionInspector'
@@ -32,8 +34,42 @@ import { SmartItemBasicView } from './SmartItemBasicView'
 
 import './EntityInspector.css'
 
-export const EntityInspector = withSdk(({ sdk }) => {
-  const entity = useSelectedEntity()
+export function EntityInspector() {
+  const selectedEntities = useEntitiesWith((components) => components.Selection)
+  const ownedEntities = useMemo(
+    () => selectedEntities.filter((entity) => !EDITOR_ENTITIES.includes(entity)),
+    [selectedEntities]
+  )
+  const entity = useMemo(() => (selectedEntities.length > 0 ? selectedEntities[0] : null), [selectedEntities])
+
+  if (ownedEntities.length > 1) {
+    return <MultiEntityInspector entities={ownedEntities} />
+  }
+
+  return <SingleEntityInspector entity={entity} />
+}
+
+const MultiEntityInspector = withSdk<{ entities: Entity[] }>(({ sdk, entities }) => {
+  const hiddenComponents = useAppSelector(getHiddenComponents)
+  const inspectors = useMemo(
+    () => [{ name: sdk.components.Transform.componentName, component: TransformInspector }],
+    [sdk]
+  )
+
+  return (
+    <div className="EntityInspector">
+      <div className="EntityHeader">
+        <div className="title">{entities.length} entities selected</div>
+      </div>
+      {inspectors.map(
+        ({ name, component: Inspector }, index) =>
+          !hiddenComponents[name] && <Inspector key={`${index}-${entities.join(',')}`} entities={entities} />
+      )}
+    </div>
+  )
+})
+
+const SingleEntityInspector = withSdk<{ entity: Entity | null }>(({ sdk, entity }) => {
   const hiddenComponents = useAppSelector(getHiddenComponents)
   const [isBasicViewEnabled, setIsBasicViewEnabled] = useState(false)
 
@@ -123,20 +159,20 @@ export const EntityInspector = withSdk(({ sdk }) => {
   )
 
   return (
-    <div className="EntityInspector" key={entity}>
+    <div className="EntityInspector">
       {entity !== null ? (
         <>
           <EntityHeader entity={entity} />
           {inspectors.map(
             ({ name, component: Inspector }, index) =>
-              !hiddenComponents[name] && <Inspector key={index} entity={entity} />
+              !hiddenComponents[name] && <Inspector key={`${index}-${entity}`} entities={[entity]} />
           )}
           {isBasicViewEnabled ? (
             <SmartItemBasicView entity={entity} />
           ) : (
             advancedInspectorComponents.map(
               ({ name, component: Inspector }, index) =>
-                !hiddenComponents[name] && <Inspector key={index} entity={entity} />
+                !hiddenComponents[name] && <Inspector key={`${index}-${entity}`} entity={entity} />
             )
           )}
         </>

packages/@dcl/inspector/src/components/EntityInspector/SmartItemBasicView/SmartItemBasicView.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 import { BsFillLightningChargeFill as SmartItemIcon } from 'react-icons/bs'
 import { withSdk } from '../../../hoc/withSdk'
-import { useHasComponent } from '../../../hooks/sdk/useHasComponent'
 import { ConfigComponent } from '../../../lib/sdk/components'
 import { Container } from '../../Container'
 import { NftView } from './NftView'
@@ -17,7 +16,6 @@ import './SmartItemBasicView.css'
 
 const SmartItemBasicView = withSdk<Props>(({ sdk, entity }) => {
   const { Config } = sdk.components
-  const hasConfig = useHasComponent(entity, Config)
 
   const renderField = useCallback(
     (field: ConfigComponent['fields'][0], idx: number) => {
@@ -52,12 +50,12 @@ const SmartItemBasicView = withSdk<Props>(({ sdk, entity }) => {
     )
   }, [])
 
-  if (!hasConfig) return null
-
   const config = useMemo(() => {
-    return Config.get(entity)
+    return Config.getOrNull(entity)
   }, [entity])
 
+  if (!config) return null
+
   return (
     <Container
       label={config.componentName}

packages/@dcl/inspector/src/components/EntityInspector/SmartItemBasicView/VideoView/VideoView.tsx

@@ -5,15 +5,15 @@ import { Entity } from '@dcl/ecs'
 import { withSdk, WithSdkProps } from '../../../../hoc/withSdk'
 import { useHasComponent } from '../../../../hooks/sdk/useHasComponent'
 import { useComponentInput } from '../../../../hooks/sdk/useComponentInput'
-import { ProjectAssetDrop, getNode } from '../../../../lib/sdk/drag-drop'
+import { LocalAssetDrop, getNode } from '../../../../lib/sdk/drag-drop'
 import { withAssetDir } from '../../../../lib/data-layer/host/fs-utils'
 import { useAppSelector } from '../../../../redux/hooks'
 import { selectAssetCatalog } from '../../../../redux/app'
 import { Block } from '../../../Block'
 import { TextField, CheckboxField, RangeField, InfoTooltip } from '../../../ui'
 import { fromVideoPlayer, toVideoPlayer, isValidInput, isVideo, isValidVolume } from '../../VideoPlayerInspector/utils'
 
-const DROP_TYPES = ['project-asset']
+const DROP_TYPES = ['local-asset']
 
 export default React.memo(
   withSdk<WithSdkProps & { entity: Entity }>(({ sdk, entity }) => {
@@ -44,13 +44,13 @@ export default React.memo(
     const [{ isHover }, drop] = useDrop(
       () => ({
         accept: DROP_TYPES,
-        drop: ({ value, context }: ProjectAssetDrop, monitor) => {
+        drop: ({ value, context }: LocalAssetDrop, monitor) => {
           if (monitor.didDrop()) return
           const node = context.tree.get(value)!
           const model = getNode(node, context.tree, isVideo)
           if (model) void handleDrop(withAssetDir(model.asset.src))
         },
-        canDrop: ({ value, context }: ProjectAssetDrop) => {
+        canDrop: ({ value, context }: LocalAssetDrop) => {
           const node = context.tree.get(value)!
           return !!getNode(node, context.tree, isVideo)
         },

packages/@dcl/inspector/src/components/EntityInspector/TransformInspector/TransformInspector.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-import { isValidNumericInput, useComponentInput } from '../../../hooks/sdk/useComponentInput'
+import { isValidNumericInput, useComponentInput, useMultiComponentInput } from '../../../hooks/sdk/useComponentInput'
 import { useHasComponent } from '../../../hooks/sdk/useHasComponent'
 import { withSdk } from '../../../hoc/withSdk'
 
@@ -13,14 +13,15 @@ import { Link, Props as LinkProps } from './Link'
 
 import './TransformInspector.css'
 
-export default withSdk<Props>(({ sdk, entity }) => {
+export default withSdk<Props>(({ sdk, entities }) => {
   const { Transform, TransformConfig } = sdk.components
+  const entity = entities.find((entity) => Transform.has(entity)) || entities[0]
 
   const hasTransform = useHasComponent(entity, Transform)
   const transform = Transform.getOrNull(entity) ?? undefined
   const config = TransformConfig.getOrNull(entity) ?? undefined
-  const { getInputProps } = useComponentInput(
-    entity,
+  const { getInputProps } = useMultiComponentInput(
+    entities,
     Transform,
     fromTransform,
     toTransform(transform, config),

packages/@dcl/inspector/src/components/EntityInspector/TransformInspector/types.ts

@@ -1,7 +1,7 @@
 import { Entity } from '@dcl/ecs'
 
 export interface Props {
-  entity: Entity
+  entities: Entity[]
 }
 
 export type TransformInput = {

packages/@dcl/inspector/src/components/EntityInspector/VideoPlayerInspector/VideoPlayerInspector.tsx

@@ -9,7 +9,7 @@ import { getComponentValue } from '../../../hooks/sdk/useComponentValue'
 import { analytics, Event } from '../../../lib/logic/analytics'
 import { getAssetByModel } from '../../../lib/logic/catalog'
 import { CoreComponents } from '../../../lib/sdk/components'
-import { ProjectAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
+import { LocalAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
 import { withAssetDir } from '../../../lib/data-layer/host/fs-utils'
 import { useAppSelector } from '../../../redux/hooks'
 import { selectAssetCatalog } from '../../../redux/app'
@@ -19,7 +19,7 @@ import { TextField, CheckboxField, RangeField, InfoTooltip } from '../../ui'
 import { fromVideoPlayer, toVideoPlayer, isValidInput, isVideo, isValidVolume } from './utils'
 import type { Props } from './types'
 
-const DROP_TYPES = ['project-asset']
+const DROP_TYPES = ['local-asset']
 
 export default withSdk<Props>(({ sdk, entity }) => {
   const files = useAppSelector(selectAssetCatalog)
@@ -56,13 +56,13 @@ export default withSdk<Props>(({ sdk, entity }) => {
   const [{ isHover }, drop] = useDrop(
     () => ({
       accept: DROP_TYPES,
-      drop: ({ value, context }: ProjectAssetDrop, monitor) => {
+      drop: ({ value, context }: LocalAssetDrop, monitor) => {
         if (monitor.didDrop()) return
         const node = context.tree.get(value)!
         const model = getNode(node, context.tree, isVideo)
         if (model) void handleDrop(withAssetDir(model.asset.src))
       },
-      canDrop: ({ value, context }: ProjectAssetDrop) => {
+      canDrop: ({ value, context }: LocalAssetDrop) => {
         const node = context.tree.get(value)!
         return !!getNode(node, context.tree, isVideo)
       },

packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx

@@ -30,7 +30,7 @@ interface ModalState {
 
 export const ROOT = 'File System'
 
-export const DRAG_N_DROP_ASSET_KEY = 'project-asset'
+export const DRAG_N_DROP_ASSET_KEY = 'local-asset'
 
 export type TreeNode = Omit<AssetNode, 'children'> & { children?: string[]; matches?: string[] }
 

packages/@dcl/inspector/src/components/ProjectAssetExplorer/types.ts

@@ -1,5 +1,4 @@
-import { ComponentName } from '@dcl/asset-packs'
-import { CoreComponents } from '../../lib/sdk/components'
+import { AssetData } from '../../lib/logic/catalog'
 
 export interface IAsset {
   src: string
@@ -20,7 +19,7 @@ export interface AssetCellProp {
 export type AssetNodeBase = {
   name: string
   parent: AssetNodeFolder | null
-  components?: Partial<Record<ComponentName | CoreComponents, any>>
+  composite?: AssetData['composite']
 }
 
 export type AssetNodeItem = AssetNodeBase & {

packages/@dcl/inspector/src/components/Renderer/Renderer.tsx

@@ -8,7 +8,7 @@ import { Entity } from '@dcl/ecs'
 import { DIRECTORY, withAssetDir } from '../../lib/data-layer/host/fs-utils'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
 import { getReloadAssets, importAsset, saveThumbnail } from '../../redux/data-layer'
-import { getNode, BuilderAsset, DROP_TYPES, IDrop, ProjectAssetDrop, isDropType } from '../../lib/sdk/drag-drop'
+import { getNode, CatalogAssetDrop, DROP_TYPES, IDrop, LocalAssetDrop, isDropType } from '../../lib/sdk/drag-drop'
 import { useRenderer } from '../../hooks/sdk/useRenderer'
 import { useSdk } from '../../hooks/sdk/useSdk'
 import { getPointerCoords } from '../../lib/babylon/decentraland/mouse-utils'
@@ -212,7 +212,7 @@ const Renderer: React.FC = () => {
       position,
       basePath,
       sdk.enumEntity,
-      asset.components,
+      asset.composite,
       asset.asset.id
     )
     await operations.dispatch()
@@ -239,10 +239,10 @@ const Renderer: React.FC = () => {
     canvasRef.current?.focus()
   }
 
-  const importBuilderAsset = async (asset: Asset) => {
+  const importCatalogAsset = async (asset: Asset) => {
     const position = await getDropPosition()
     const fileContent: Record<string, Uint8Array> = {}
-    const destFolder = 'builder'
+    const destFolder = 'asset-packs'
     const assetPackageName = asset.name.trim().replaceAll(' ', '_').toLowerCase()
     const path = Object.keys(asset.contents).find(($) => isAsset($))
     let thumbnail: Uint8Array | undefined
@@ -299,7 +299,7 @@ const Renderer: React.FC = () => {
       name: asset.name,
       parent: null,
       asset: { type: path ? 'gltf' : 'unknown', src: path ?? '', id: asset.id },
-      components: asset.components
+      composite: asset.composite
     }
     const basePath = withAssetDir(`${destFolder}/${assetPackageName}`)
     if (isGround(asset) && !placeSingleTile) {
@@ -320,12 +320,12 @@ const Renderer: React.FC = () => {
         if (monitor.didDrop()) return
         const itemType = monitor.getItemType()
 
-        if (isDropType<BuilderAsset>(item, itemType, 'builder-asset')) {
-          void importBuilderAsset(item.value)
+        if (isDropType<CatalogAssetDrop>(item, itemType, 'catalog-asset')) {
+          void importCatalogAsset(item.value)
           return
         }
 
-        if (isDropType<ProjectAssetDrop>(item, itemType, 'project-asset')) {
+        if (isDropType<LocalAssetDrop>(item, itemType, 'local-asset')) {
           const node = item.context.tree.get(item.value)!
           const model = getNode(node, item.context.tree, isModel)
           if (model) {
@@ -335,7 +335,7 @@ const Renderer: React.FC = () => {
         }
       },
       hover(item, monitor) {
-        if (isDropType<BuilderAsset>(item, monitor.getItemType(), 'builder-asset')) {
+        if (isDropType<CatalogAssetDrop>(item, monitor.getItemType(), 'catalog-asset')) {
           const asset = item.value
           if (isGround(asset)) {
             if (!showSingleTileHint) {

packages/@dcl/inspector/src/components/ui/FileUploadField/FileUploadField.tsx

@@ -8,7 +8,7 @@ import { selectAssetCatalog, selectUploadFile, updateUploadFile } from '../../..
 import { selectAssetsTab } from '../../../redux/ui'
 import { AssetsTab } from '../../../redux/ui/types'
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks'
-import { DropTypesEnum, ProjectAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
+import { DropTypesEnum, LocalAssetDrop, getNode } from '../../../lib/sdk/drag-drop'
 import { EXTENSIONS, withAssetDir } from '../../../lib/data-layer/host/fs-utils'
 
 import { isModel } from '../../EntityInspector/GltfInspector/utils'
@@ -97,8 +97,8 @@ const FileUploadField: React.FC<Props> = ({
 
   const [{ isHover, canDrop }, drop] = useDrop(
     () => ({
-      accept: [DropTypesEnum.ProjectAsset],
-      drop: ({ value, context }: ProjectAssetDrop, monitor) => {
+      accept: [DropTypesEnum.LocalAsset],
+      drop: ({ value, context }: LocalAssetDrop, monitor) => {
         if (monitor.didDrop()) return
         const node = context.tree.get(value)!
         const element = getNode(node, context.tree, isValid)
@@ -109,7 +109,7 @@ const FileUploadField: React.FC<Props> = ({
           setDropError(true)
         }
       },
-      canDrop: ({ value, context }: ProjectAssetDrop) => {
+      canDrop: ({ value, context }: LocalAssetDrop) => {
         const node = context.tree.get(value)!
         return !!getNode(node, context.tree, isValid)
       },

packages/@dcl/inspector/src/components/ui/TextField/TextField.tsx

@@ -123,7 +123,7 @@ const TextField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         <input
           className="input"
           ref={ref}
-          type={type}
+          type={inputValue === '--' ? 'text' : type}
           value={inputValue}
           onChange={handleInputChange}
           onFocus={handleInputFocus}