From 5577f454332a3338015afbaf1e34ca212ccfcbf7 Mon Sep 17 00:00:00 2001 From: Gonzalo DCL Date: Mon, 19 Jun 2023 16:07:58 -0300 Subject: [PATCH] remove dataLayer from sdk context --- .../components/ImportAsset/ImportAsset.tsx | 13 +++++--- .../ProjectAssetExplorer/ProjectView.tsx | 32 +++++++++++-------- .../src/components/Renderer/Renderer.tsx | 8 +++-- .../src/components/Toolbar/Toolbar.tsx | 14 +++++--- .../src/hooks/catalog/useFileSystem.ts | 22 +++++++------ .../inspector/src/hooks/editor/useSave.ts | 9 +++--- .../inspector/src/hooks/sdk/useSdkContext.ts | 2 +- .../lib/babylon/decentraland/SceneContext.ts | 13 +++----- .../@dcl/inspector/src/lib/sdk/context.ts | 7 ++-- .../inspector/src/lib/sdk/inspector-engine.ts | 5 +-- 10 files changed, 68 insertions(+), 57 deletions(-) diff --git a/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx b/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx index 0a5c9ece9..2b37e73a2 100644 --- a/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx +++ b/packages/@dcl/inspector/src/components/ImportAsset/ImportAsset.tsx @@ -4,7 +4,6 @@ import { RxCross2 } from 'react-icons/rx' import { IoIosImage } from 'react-icons/io' import FileInput from '../FileInput' -import { withSdk } from '../../hoc/withSdk' import { Container } from '../Container' import { TextField } from '../EntityInspector/TextField' import { Block } from '../Block' @@ -16,6 +15,8 @@ import { GLTFValidation } from '@babylonjs/loaders' import './ImportAsset.css' import classNames from 'classnames' import { withAssetDir } from '../../lib/data-layer/host/fs-utils' +import { getDataLayer } from '../../redux/data-layer' +import { useAppSelector } from '../../redux/hooks' const ONE_MB_IN_BYTES = 1_048_576 const ONE_GB_IN_BYTES = ONE_MB_IN_BYTES * 1024 @@ -59,8 +60,10 @@ async function validateGltf(data: ArrayBuffer): Promise { } } -const ImportAsset = withSdk(({ sdk, onSave }) => { +const ImportAsset: React.FC = ({ onSave }) => { // TODO: multiple files + const dataLayer = useAppSelector(getDataLayer) + const [file, setFile] = useState() const [validationError, setValidationError] = useState(null) const [assetName, setAssetName] = useState('') @@ -100,9 +103,9 @@ const ImportAsset = withSdk(({ sdk, onSave }) => { const content: Map = new Map() content.set(assetName + '.' + assetExtension, new Uint8Array(binary)) - const basePath = withAssetDir((await sdk!.dataLayer.getProjectData({})).path) + const basePath = withAssetDir((await dataLayer!.getProjectData({})).path) - await sdk!.dataLayer.importAsset({ + await dataLayer?.importAsset({ content, basePath, assetPackageName: '' @@ -165,6 +168,6 @@ const ImportAsset = withSdk(({ sdk, onSave }) => { ) -}) +} export default ImportAsset diff --git a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx index 88a192447..50c7897bd 100644 --- a/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx +++ b/packages/@dcl/inspector/src/components/ProjectAssetExplorer/ProjectView.tsx @@ -13,6 +13,8 @@ import { AssetNode, AssetNodeFolder } from './types' import { getFullNodePath } from './utils' import Search from '../Search' import { withAssetDir } from '../../lib/data-layer/host/fs-utils' +import { getDataLayer } from '../../redux/data-layer' +import { useAppSelector } from '../../redux/hooks' function noop() {} @@ -36,6 +38,8 @@ const FilesTree = Tree() function ProjectView({ folders }: Props) { const sdk = useSdk() + const dataLayer = useAppSelector(getDataLayer) + const [open, setOpen] = useState(new Set()) const [modal, setModal] = useState(undefined) const [lastSelected, setLastSelected] = useState() @@ -146,12 +150,11 @@ function ProjectView({ folders }: Props) { const removeAsset = useCallback( async (path: string, _: Entity[] = []) => { - if (!sdk) return - const { dataLayer } = sdk + if (!dataLayer) return await dataLayer.removeAsset({ path }) fileSystemEvent.emit('change') }, - [sdk] + [dataLayer] ) const handleConfirm = useCallback(async () => { @@ -249,7 +252,7 @@ function ProjectView({ folders }: Props) { - } - else - return ( - <> - - - - ) + return ( +
+ +
+ ) + } else + return ( + <> + + + + ) } export default React.memo(ProjectView) diff --git a/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx b/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx index a8b39b871..d8c9bccbc 100644 --- a/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx +++ b/packages/@dcl/inspector/src/components/Renderer/Renderer.tsx @@ -4,6 +4,9 @@ import { Vector3 } from '@babylonjs/core' import { Loader } from 'decentraland-ui/dist/components/Loader/Loader' import { Dimmer } from 'decentraland-ui/dist/components/Dimmer/Dimmer' +import { withAssetDir } from '../../lib/data-layer/host/fs-utils' +import { useAppSelector } from '../../redux/hooks' +import { getDataLayer } from '../../redux/data-layer' import { BuilderAsset, DROP_TYPES, IDrop, ProjectAssetDrop, isDropType } from '../../lib/sdk/drag-drop' import { useRenderer } from '../../hooks/sdk/useRenderer' import { useSdk } from '../../hooks/sdk/useSdk' @@ -20,7 +23,6 @@ import { Warnings } from '../Warnings' import { CameraSpeed } from './CameraSpeed' import './Renderer.css' -import { withAssetDir } from '../../lib/data-layer/host/fs-utils' const fixedNumber = (val: number) => Math.round(val * 1e2) / 1e2 @@ -28,6 +30,8 @@ const Renderer: React.FC = () => { const canvasRef = React.useRef(null) useRenderer(() => canvasRef) const sdk = useSdk() + const dataLayer = useAppSelector(getDataLayer) + const [isLoading, setIsLoading] = useState(false) const isMounted = useIsMounted() const [files, init] = useFileSystem() @@ -84,7 +88,7 @@ const Renderer: React.FC = () => { }) ) - await sdk!.dataLayer.importAsset({ + await dataLayer?.importAsset({ content: new Map(Object.entries(fileContent)), basePath: withAssetDir(destFolder), assetPackageName diff --git a/packages/@dcl/inspector/src/components/Toolbar/Toolbar.tsx b/packages/@dcl/inspector/src/components/Toolbar/Toolbar.tsx index 8fda1cbc0..969220b06 100644 --- a/packages/@dcl/inspector/src/components/Toolbar/Toolbar.tsx +++ b/packages/@dcl/inspector/src/components/Toolbar/Toolbar.tsx @@ -8,10 +8,13 @@ import { withSdk } from '../../hoc/withSdk' import { Gizmos } from './Gizmos' import { Camera } from './Camera' import { ToolbarButton } from './ToolbarButton' - import './Toolbar.css' +import { getDataLayer } from '../../redux/data-layer' +import { useAppSelector } from '../../redux/hooks' +import { DataLayerRpcClient } from '../../lib/data-layer/types' const Toolbar = withSdk(({ sdk }) => { + const dataLayer = useAppSelector(getDataLayer) const [save, isDirty] = useSave() const handleInspector = useCallback(() => { const { debugLayer } = sdk.scene @@ -23,14 +26,15 @@ const Toolbar = withSdk(({ sdk }) => { }, []) const handleUndoRedo = useCallback( - (fn: typeof sdk.dataLayer.undo) => async () => { + (fn?: DataLayerRpcClient['undo']) => async () => { + if (!fn) return const { type } = await fn({}) if (type === 'file') { fileSystemEvent.emit('change') } saveEvent.emit('change', true) }, - [sdk.dataLayer] + [dataLayer] ) return ( @@ -38,10 +42,10 @@ const Toolbar = withSdk(({ sdk }) => { {isDirty ? : } - + - + diff --git a/packages/@dcl/inspector/src/hooks/catalog/useFileSystem.ts b/packages/@dcl/inspector/src/hooks/catalog/useFileSystem.ts index 914ba9624..3bba3d002 100644 --- a/packages/@dcl/inspector/src/hooks/catalog/useFileSystem.ts +++ b/packages/@dcl/inspector/src/hooks/catalog/useFileSystem.ts @@ -1,8 +1,9 @@ import mitt from 'mitt' -import { useState } from 'react' +import { useCallback, useState } from 'react' -import { useSdk } from '../sdk/useSdk' import { AssetCatalogResponse } from '../../tooling-entrypoint' +import { useAppSelector } from '../../redux/hooks' +import { getDataLayer } from '../../redux/data-layer' type FileSystemEvent = { change: unknown } export const fileSystemEvent = mitt() @@ -14,15 +15,16 @@ export const removeBasePath = (basePath: string, path: string) => { /* istanbul ignore next */ export const useFileSystem = (): [AssetCatalogResponse, boolean] => { const [files, setFiles] = useState({ basePath: '', assets: [] }) + const dataLayer = useAppSelector(getDataLayer) + const [init, setInit] = useState(false) - useSdk(({ dataLayer }) => { - async function fetchFiles() { - const assets = await dataLayer.getAssetCatalog({}) - setFiles(assets) - } - fileSystemEvent.on('change', fetchFiles) - void fetchFiles().then(() => setInit(true)) - }) + const fetchFiles = useCallback(async () => { + if (!dataLayer) return + const assets = await dataLayer.getAssetCatalog({}) + setFiles(assets) + }, [dataLayer]) + fileSystemEvent.on('change', fetchFiles) + void fetchFiles().then(() => setInit(true)) return [files, init] } diff --git a/packages/@dcl/inspector/src/hooks/editor/useSave.ts b/packages/@dcl/inspector/src/hooks/editor/useSave.ts index 4e5a80f5a..fa485de9a 100644 --- a/packages/@dcl/inspector/src/hooks/editor/useSave.ts +++ b/packages/@dcl/inspector/src/hooks/editor/useSave.ts @@ -1,19 +1,20 @@ import mitt from 'mitt' import { useCallback, useState } from 'react' -import { useSdk } from '../sdk/useSdk' +import { useAppSelector } from '../../redux/hooks' +import { getDataLayer } from '../../redux/data-layer' type SaveEvent = { change: boolean } export const saveEvent = mitt() export const useSave = (): [() => Promise, boolean] => { - const sdk = useSdk() + const dataLayer = useAppSelector(getDataLayer) const [isDirty, setIsDirty] = useState(false) const saveFn = useCallback(async () => { - await sdk?.dataLayer.save({}) + await dataLayer?.save({}) setIsDirty(false) - }, [sdk]) + }, [dataLayer]) saveEvent.on('change', (value: boolean) => setIsDirty(value)) diff --git a/packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts b/packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts index 68eed625c..0c47c24f7 100644 --- a/packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts +++ b/packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts @@ -35,7 +35,7 @@ export const useSdkContext = () => { setError(e) }) .finally(() => setIsLoading(false)) - }, [catalog, canvas, sdk, isLoading, dispatch]) + }, [catalog, canvas, sdk, isLoading, dispatch, dataLayer]) const renderer = useCallback( (ref: React.RefObject) => { diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts index 5ec73b334..bba17cf42 100644 --- a/packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts +++ b/packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts @@ -16,10 +16,10 @@ import { putBillboardComponent } from './sdkComponents/billboard' import { putGltfContainerComponent } from './sdkComponents/gltf-container' import { putMeshRendererComponent } from './sdkComponents/mesh-renderer' import { putTransformComponent } from './sdkComponents/transform' -import { consumeAllMessagesInto } from '../../logic/consume-stream' import { putSceneComponent } from './editorComponents/scene' import { createOperations } from '../../sdk/operations' import { createGizmoManager } from './gizmo-manager' +import { store } from '../../../redux/store' export type LoadableScene = { readonly entity: Readonly> @@ -68,12 +68,7 @@ export class SceneContext { // this future is resolved when the scene is disposed readonly stopped = future() - constructor( - public babylon: BABYLON.Engine, - public scene: BABYLON.Scene, - public loadableScene: LoadableScene, - public dataLayer: DataLayerRpcClient - ) { + constructor(public babylon: BABYLON.Engine, public scene: BABYLON.Scene, public loadableScene: LoadableScene) { this.rootNode = new EcsEntity(0 as Entity, this.#weakThis, scene) Object.assign(globalThis, { babylon: this.engine }) } @@ -152,7 +147,9 @@ export class SceneContext { async getFile(src: string): Promise { if (!src) return null try { - const response = await this.dataLayer.getAssetData({ path: src }) + const { dataLayer } = store.getState().dataLayer + if (!dataLayer) return null + const response = await dataLayer.getAssetData({ path: src }) return response.data } catch (err) { console.error('Error fetching file ' + src, err) diff --git a/packages/@dcl/inspector/src/lib/sdk/context.ts b/packages/@dcl/inspector/src/lib/sdk/context.ts index 771cafad8..e899f37e0 100644 --- a/packages/@dcl/inspector/src/lib/sdk/context.ts +++ b/packages/@dcl/inspector/src/lib/sdk/context.ts @@ -26,7 +26,6 @@ export type SdkContextValue = { sceneContext: SceneContext events: Emitter dispose(): void - dataLayer: DataLayerRpcClient operations: ReturnType gizmos: Gizmos editorCamera: CameraManager @@ -51,13 +50,12 @@ export async function createSdkContext( getHardcodedLoadableScene( 'urn:decentraland:entity:bafkreid44xhavttoz4nznidmyj3rjnrgdza7v6l7kd46xdmleor5lmsxfm1', catalog - ), - dataLayer + ) ) ctx.rootNode.position.set(0, 0, 0) // create inspector engine context and components - const { engine, components, events, dispose } = createInspectorEngine(dataLayer) + const { engine, components, events, dispose } = createInspectorEngine() // register some globals for debugging Object.assign(globalThis, { dataLayer, inspectorEngine: engine }) @@ -69,7 +67,6 @@ export async function createSdkContext( scene, sceneContext: ctx, dispose, - dataLayer, operations: createOperations(engine), gizmos: ctx.gizmos, editorCamera: renderer.editorCamera, diff --git a/packages/@dcl/inspector/src/lib/sdk/inspector-engine.ts b/packages/@dcl/inspector/src/lib/sdk/inspector-engine.ts index eaf74dedd..4f5f6ae03 100644 --- a/packages/@dcl/inspector/src/lib/sdk/inspector-engine.ts +++ b/packages/@dcl/inspector/src/lib/sdk/inspector-engine.ts @@ -1,12 +1,9 @@ import mitt from 'mitt' -import { DataLayerRpcClient } from '../data-layer/types' import { SdkContextEvents, SdkContextValue } from './context' import { createEngineContext } from '../data-layer/host/utils/engine' -export function createInspectorEngine( - _dataLayer: DataLayerRpcClient -): Omit< +export function createInspectorEngine(): Omit< SdkContextValue, 'scene' | 'sceneContext' | 'dataLayer' | 'operations' | 'gizmos' | 'editorCamera' | 'preferences' > {