feat: Add tweens component

packages/@dcl/inspector/README.md

@@ -2,15 +2,18 @@
 # Inspector
 
 ## Development
+
 Run `npm start` to spawn esbuild in `watch` mode. This serves the `public/` folder, every change triggers rebuilding the `bundle.js` and you'll need refresh the page. The server created is in `localhost:8000` by default, an initial message is printed but it probably quickly missed.
 
 This also rebuilds the library section (data-layer) and exposes in `dist/` folder.
 
 ### Running with data-layer
+
 For faster development experience, we are faking the file-system for the data-layer, if you want to use your actual file-system, you can either:
 
 * Run the extension from VSCode on a scene
 * Run `npx sdk-commands start --data-layer --port 8001` in a scene & go to localhost:8000/?ws=ws://127.0.0.1:8001/data-layer
 
 ## Build
-The `make build ` in the repo root builds all the necessary for package publishment.
+
+The `make build` in the repo root builds all the necessary for package publishment.

packages/@dcl/inspector/build.js

@@ -128,7 +128,7 @@ function getNotBundledModules() {
   traverseDependencies(ret)
 
   // now remove the ESM dependencies
-  const esmModulesToBundle = ['@dcl/sdk', '@dcl/ecs', '@dcl/mini-rpc', '@dcl/asset-packs']
+  const esmModulesToBundle = ['@dcl/sdk', '@dcl/ecs', '@dcl/mini-rpc', '@dcl/asset-packs', '@dcl-sdk/utils']
   return Array.from(externalModules).concat(builtinModules).filter($ => !esmModulesToBundle.includes($))
 }
 

packages/@dcl/inspector/jest.config.js

@@ -38,7 +38,7 @@ module.exports = isE2E ? {
   testMatch: ["**/*.spec.(ts)"],
   testEnvironment: "jsdom",
   transformIgnorePatterns: [
-    `/node_modules/(?!(@babylonjs)|(@dcl/ecs-math)|(@dcl/asset-packs)|(@dcl/sdk)|(@dcl/ecs))`,
+    `/node_modules/(?!(@babylonjs)|(@dcl/ecs-math)|(@dcl/asset-packs)|(@dcl/sdk)|(@dcl/ecs)|(@dcl-sdk/utils))`,
     ],
     setupFiles: ['./test/setup.ts']
 }

packages/@dcl/inspector/package.json

@@ -7,7 +7,7 @@
     "@babylonjs/inspector": "^6.18.0",
     "@babylonjs/loaders": "^6.18.0",
     "@babylonjs/materials": "^6.18.0",
-    "@dcl/asset-packs": "^0.0.0-20230925211013.commit-bdfb3ae",
+    "@dcl/asset-packs": "^0.0.0-20231003143405.commit-b7b2501",
     "@dcl/ecs": "file:../ecs",
     "@dcl/ecs-math": "2.0.2",
     "@dcl/mini-rpc": "^1.0.7",

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

@@ -29,7 +29,7 @@
 }
 
 .ActionInspector > .content > .Block > .content .row .DropdownContainer label,
-.ActionInspector > .content > .Block > .content .row .field label {
+.ActionInspector > .content > .Block > .content .row .field > label {
   margin: 0px 0px 6px 0px;
   color: var(--text);
   font-size: 12px;
@@ -47,6 +47,10 @@
   width: 100%;
 }
 
+.ActionInspector > .content > .Block > .content .row .field.duration .TextField {
+  width: 40px;
+}
+
 .ActionInspector .content .RemoveButton {
   height: 100%;
   background-color: transparent;
@@ -76,3 +80,24 @@
 .ActionInspector .content .Block .content .MoreOptionsMenu .MoreOptionsContent {
   min-width: 140px;
 }
+
+.ActionInspector .content .Block .content > .TweenActionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 100%;
+}
+
+.ActionInspector > .content > .Block > .content > .TweenActionContainer > .row .field.relative {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.ActionInspector > .content > .Block > .content > .TweenActionContainer > .row .field.relative input[type='checkbox'] {
+  margin-right: 9px;
+}
+
+.ActionInspector > .content > .Block > .content > .TweenActionContainer > .row .field.relative label {
+  margin-bottom: 0;
+}

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

@@ -31,6 +31,8 @@ import MoreOptionsMenu from '../MoreOptionsMenu'
 import { AddButton } from '../AddButton'
 import { Button } from '../../Button'
 
+import { TweenAction } from './TweenAction'
+import { isValidTween } from './TweenAction/utils'
 import { Props } from './types'
 
 import './ActionInspector.css'
@@ -89,6 +91,10 @@ export default withSdk<Props>(
             const payload = getPartialPayload<ActionType.SET_STATE>(action)
             return !!payload.state
           }
+          case ActionType.START_TWEEN: {
+            const payload = getPartialPayload<ActionType.START_TWEEN>(action)
+            return !!payload && isValidTween(payload)
+          }
           default: {
             try {
               const payload = getPartialPayload(action)
@@ -211,6 +217,20 @@ export default withSdk<Props>(
       [setActions]
     )
 
+    const handleChangeTween = useCallback(
+      (tween: ActionPayload['start_tween'], idx: number) => {
+        setActions((prev: Action[]) => {
+          const data = [...prev]
+          data[idx] = {
+            ...data[idx],
+            jsonPayload: getJson<ActionType.START_TWEEN>(tween)
+          }
+          return data
+        })
+      },
+      [setActions]
+    )
+
     const handleChangeType = useCallback(
       ({ target: { value } }: React.ChangeEvent<HTMLSelectElement>, idx: number) => {
         setActions((prev: Action[]) => {
@@ -337,6 +357,14 @@ export default withSdk<Props>(
             </div>
           ) : null
         }
+        case ActionType.START_TWEEN: {
+          return (
+            <TweenAction
+              tween={getPartialPayload<ActionType.START_TWEEN>(action)}
+              onUpdateTween={(tween: ActionPayload['start_tween']) => handleChangeTween(tween, idx)}
+            />
+          )
+        }
         default: {
           // TODO: handle generic schemas with something like <JsonSchemaField/>
           return null
@@ -369,7 +397,10 @@ export default withSdk<Props>(
                 <Dropdown
                   label={'Select Action'}
                   disabled={availableActions.length === 0}
-                  options={availableActions}
+                  options={[
+                    { text: 'Select an Action', value: '' },
+                    ...availableActions.map((availableAction) => ({ text: availableAction, value: availableAction }))
+                  ]}
                   value={action.type}
                   onChange={(e) => handleChangeType(e, idx)}
                 />