fix several issues (#1072)

* fix scroll on assets catalog

* fix tooltip link on Action & Trigger components

* deprecate alphaTexture on PBR & add it to unlit materials

* replace 'ctrl' for '⌘' on shortcuts when necessary

* add 'global' prop to AudioSource

Author: nicoecheza

packages/@dcl/inspector/src/components/AssetsCatalog/Categories/Categories.css

@@ -5,7 +5,7 @@
   overflow: scroll;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 0 24px;
+  padding: 0 24px 40px 0;
   gap: 16px;
 }
 

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

@@ -944,7 +944,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
       rightContent={
         <InfoTooltip
           text="Actions list the capabilities of entities, from playing animations to changing visibility. Customize or add new actions, which are activated by triggers."
-          link="https://docs.decentraland.org/creator/smart-items/#actions"
+          link="https://docs.decentraland.org/creator/editor/smart-items-advanced/"
           type="help"
         />
       }

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

@@ -58,6 +58,7 @@ export default withSdk<Props>(({ sdk, entity }) => {
 
   const playing = getInputProps('playing', (e) => e.target.checked)
   const loop = getInputProps('loop', (e) => e.target.checked)
+  const global = getInputProps('global', (e) => e.target.checked)
   const volume = getInputProps('volume', (e) => e.target.value)
 
   return (
@@ -75,6 +76,7 @@ export default withSdk<Props>(({ sdk, entity }) => {
       <Block label="Playback">
         <CheckboxField label="Start playing" checked={!!playing.value} {...playing} />
         <CheckboxField label="Loop" checked={!!loop.value} {...loop} />
+        <CheckboxField label="Global" checked={!!global.value} {...global} />
       </Block>
       <Block className="volume">
         <RangeField {...volume} label="Volume" isValidValue={isValidVolume} />

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

@@ -9,4 +9,5 @@ export type AudioSourceInput = {
   playing?: boolean
   loop?: boolean
   volume?: string
+  global?: boolean
 }

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

@@ -53,6 +53,12 @@ export default withSdk<Props>(({ sdk, entity }) => {
           <Block>
             <RangeField label="Alpha test" max={1} step={0.1} {...getInputProps('alphaTest')} />
           </Block>
+          <Texture
+            label="Alpha texture"
+            texture={TextureType.TT_ALPHA_TEXTURE}
+            files={files}
+            getInputProps={getTextureProps}
+          />
         </>
       )}
       {materialType.value === MaterialType.MT_PBR && (
@@ -91,12 +97,6 @@ export default withSdk<Props>(({ sdk, entity }) => {
             <Block>
               <RangeField label="Alpha test" max={1} step={0.1} {...getInputProps('alphaTest')} />
             </Block>
-            <Texture
-              label="Alpha texture"
-              texture={TextureType.TT_ALPHA_TEXTURE}
-              files={files}
-              getInputProps={getTextureProps}
-            />
           </Container>
 
           <Container label="Emissive" border>

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

@@ -308,7 +308,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
       rightContent={
         <InfoTooltip
           text={`Triggers activate actions based on player interactions like clicks, entering/exiting areas, or global events like "on spawn".`}
-          link="https://docs.decentraland.org/creator/smart-items/#triggers"
+          link="https://docs.decentraland.org/creator/editor/smart-items-advanced/"
           type="help"
         />
       }

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

@@ -16,6 +16,8 @@ import { Props } from './types'
 import './Shortcuts.css'
 
 const ICON_SIZE = 18
+const isMac = /Mac|iPhone|iPod|iPad/.test(navigator.userAgent)
+const prefixKey = isMac ? '⌘' : 'ctrl'
 
 const Shortcuts: React.FC<Props> = ({ canvas, onResetCamera, onZoomIn, onZoomOut }) => {
   const [showShortcuts, setShowShortcuts] = React.useState(false)
@@ -87,37 +89,37 @@ const Shortcuts: React.FC<Props> = ({ canvas, onResetCamera, onZoomIn, onZoomOut
             <div className="Item">
               <div className="Title">Select Multiple Items</div>
               <div className="Description">
-                Hold<span className="Key">ctrl</span>and click
+                Hold<span className="Key">{prefixKey}</span>and click
               </div>
             </div>
             <div className="Item">
               <div className="Title">Save</div>
               <div className="Description">
-                <span className="Key">ctrl</span>+<span className="Key">S</span>
+                <span className="Key">{prefixKey}</span>+<span className="Key">S</span>
               </div>
             </div>
             <div className="Item">
               <div className="Title">Undo</div>
               <div className="Description">
-                <span className="Key">ctrl</span>+<span className="Key">Z</span>
+                <span className="Key">{prefixKey}</span>+<span className="Key">Z</span>
               </div>
             </div>
             <div className="Item">
               <div className="Title">Redo</div>
               <div className="Description">
-                <span className="Key">ctrl</span>+<span className="Key">Y</span>
+                <span className="Key">{prefixKey}</span>+<span className="Key">Y</span>
               </div>
             </div>
             <div className="Item">
               <div className="Title">Copy</div>
               <div className="Description">
-                <span className="Key">ctrl</span>+<span className="Key">C</span>
+                <span className="Key">{prefixKey}</span>+<span className="Key">C</span>
               </div>
             </div>
             <div className="Item">
               <div className="Title">Paste</div>
               <div className="Description">
-                <span className="Key">ctrl</span>+<span className="Key">V</span>
+                <span className="Key">{prefixKey}</span>+<span className="Key">V</span>
               </div>
             </div>
             <div className="Item">
@@ -156,7 +158,7 @@ const Shortcuts: React.FC<Props> = ({ canvas, onResetCamera, onZoomIn, onZoomOut
             <div className="Item">
               <div className="Title">Duplicate</div>
               <div className="Description">
-                <span className="Key">ctrl</span>+<span className="Key">D</span>
+                <span className="Key">{prefixKey}</span>+<span className="Key">D</span>
               </div>
             </div>
             <div className="Item">

packages/@dcl/inspector/src/lib/babylon/decentraland/sdkComponents/material.ts

@@ -69,7 +69,6 @@ export const putMaterialComponent: ComponentOperation = (entity, component) => {
         m.alphaCutOff = pbr.alphaTest ?? 0.5
 
         void loadTexture(entity, pbr.texture?.tex).then((texture) => (m.albedoTexture = texture))
-        void loadTexture(entity, pbr.alphaTexture?.tex).then((texture) => (m.opacityTexture = texture))
         void loadTexture(entity, pbr.bumpTexture?.tex).then((texture) => (m.bumpTexture = texture))
         void loadTexture(entity, pbr.emissiveTexture?.tex).then((texture) => (m.emissiveTexture = texture))
       })
@@ -80,6 +79,7 @@ export const putMaterialComponent: ComponentOperation = (entity, component) => {
         m.alphaCutOff = unlit.alphaTest ?? 0.5
         unlit.diffuseColor && m.diffuseColor.set(unlit.diffuseColor.r, unlit.diffuseColor.g, unlit.diffuseColor.b) // unlit.albedoColor.a?
         void loadTexture(entity, unlit.texture?.tex).then((texture) => (m.diffuseTexture = texture))
+        void loadTexture(entity, unlit.alphaTexture?.tex).then((texture) => (m.opacityTexture = texture))
       })
     }
 
@@ -128,13 +128,13 @@ function disposeTextures(material?: StandardMaterial | PBRMaterial) {
   if (material instanceof StandardMaterial) {
     material.diffuseTexture?.dispose()
     material.diffuseTexture = null
+    material.opacityTexture?.dispose()
+    material.opacityTexture = null
   }
 
   if (material instanceof PBRMaterial) {
     material.albedoTexture?.dispose()
     material.albedoTexture = null
-    material.opacityTexture?.dispose()
-    material.opacityTexture = null
     material.bumpTexture?.dispose()
     material.bumpTexture = null
     material.emissiveTexture?.dispose()