fix skd context initialization

decentraland · Jun 27, 2023 · dcba58f · dcba58f
1 parent 99558fe
commit dcba58f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 45 deletions.
diff --git a/packages/@dcl/inspector/src/components/Toolbar/Preferences/Preferences.tsx b/packages/@dcl/inspector/src/components/Toolbar/Preferences/Preferences.tsx
@@ -24,19 +24,19 @@ export const Preferences = withSdk(({ sdk }) => {
   const toggleFreeCameraInvertRotation = useCallback(() => {
     dispatch(
       setInspectorPreferences({
-        freeCameraInvertRotation: !preferences.freeCameraInvertRotation
+        freeCameraInvertRotation: !preferences?.freeCameraInvertRotation
       })
     )
     // TODO: this should be done by the saga but we dont have the sdk.editorCamera on the store
-    sdk.editorCamera.setFreeCameraInvertRotation(!preferences.freeCameraInvertRotation)
-  }, [preferences.freeCameraInvertRotation])
+    sdk.editorCamera.setFreeCameraInvertRotation(!preferences?.freeCameraInvertRotation)
+  }, [preferences?.freeCameraInvertRotation])
 
   const toggleAutosaveEnabled = useCallback(() => {
-    dispatch(setInspectorPreferences({ autosaveEnabled: !preferences.autosaveEnabled }))
-  }, [preferences.autosaveEnabled])
+    dispatch(setInspectorPreferences({ autosaveEnabled: !preferences?.autosaveEnabled }))
+  }, [preferences?.autosaveEnabled])
 
-  const FreeCameraInvertRotationIcon = preferences.freeCameraInvertRotation ? BiCheckboxChecked : BiCheckbox
-  const AutosaveEnabledIcon = preferences.autosaveEnabled ? BiCheckboxChecked : BiCheckbox
+  const FreeCameraInvertRotationIcon = preferences?.freeCameraInvertRotation ? BiCheckboxChecked : BiCheckbox
+  const AutosaveEnabledIcon = preferences?.autosaveEnabled ? BiCheckboxChecked : BiCheckbox
 
   return (
     <div className="Preferences" ref={ref}>

diff --git a/packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts b/packages/@dcl/inspector/src/hooks/sdk/useSdkContext.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { createSdkContext, SdkContextValue } from '../../lib/sdk/context'
 import { useCatalog } from '../catalog/useCatalog'
 import { useAppDispatch, useAppSelector } from '../../redux/hooks'
-import { getDataLayer, connect as connectDataLayer } from '../../redux/data-layer'
+import { connect as connectDataLayer } from '../../redux/data-layer'
 import { addEngines } from '../../redux/sdk'
 import { getInspectorPreferences } from '../../redux/app'
 
@@ -11,33 +11,30 @@ import { getInspectorPreferences } from '../../redux/app'
  * @returns This hook is only meant to be used by the SdkProvider, use useSdk instead
  */
 export const useSdkContext = () => {
-  const dataLayer = useAppSelector(getDataLayer)
   const preferences = useAppSelector(getInspectorPreferences)
   const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null)
   const [sdk, setSdk] = useState<SdkContextValue | null>(null)
-  const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<Error | null>(null)
   const [catalog] = useCatalog()
   const dispatch = useAppDispatch()
-
+  let sdkInitialized = false
   useEffect(() => {
     dispatch(connectDataLayer())
   }, [dispatch])
 
   useEffect(() => {
-    if (!catalog || !canvas || sdk || isLoading || !preferences) return
-    setIsLoading(true)
+    if (!catalog.length || !canvas || !preferences || sdkInitialized) return
+    sdkInitialized = true
     createSdkContext(canvas, catalog, preferences)
       .then((ctx) => {
-        dispatch(addEngines({ inspector: ctx.engine, babylon: ctx.sceneContext.engine }))
         setSdk(ctx)
+        dispatch(addEngines({ inspector: ctx.engine, babylon: ctx.sceneContext.engine }))
       })
       .catch((e) => {
         console.error(`createSdkContext failed: `, e)
         setError(e)
       })
-      .finally(() => setIsLoading(false))
-  }, [catalog, canvas, sdk, isLoading, dispatch, preferences])
+  }, [catalog, preferences, canvas])
 
   const renderer = useCallback(
     (ref: React.RefObject<HTMLCanvasElement>) => {

diff --git a/packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts b/packages/@dcl/inspector/src/lib/babylon/decentraland/SceneContext.ts
@@ -1,13 +1,10 @@
 import * as BABYLON from '@babylonjs/core'
-import { ComponentDefinition, CrdtMessageType, Engine, Entity, Transport } from '@dcl/ecs'
+import { ComponentDefinition, CrdtMessageType, Engine, Entity } from '@dcl/ecs'
 import * as components from '@dcl/ecs/dist/components'
 import * as Schemas from '@dcl/schemas'
-import { AsyncQueue } from '@well-known-components/pushable-channel'
 import future from 'fp-future'
 
-import { CrdtStreamMessage } from '../../data-layer/proto/gen/data-layer.gen'
 import { createEditorComponents } from '../../sdk/components'
-import { serializeCrdtMessages } from '../../sdk/crdt-logger'
 import { ComponentOperation } from './component-operations'
 import { EcsEntity } from './EcsEntity'
 import { putEntitySelectedComponent } from './editorComponents/selection'
@@ -72,25 +69,6 @@ export class SceneContext {
     Object.assign(globalThis, { babylon: this.engine })
   }
 
-  addTransport(stream: AsyncQueue<CrdtStreamMessage>) {
-    const engine = this.engine
-    const transport: Transport = {
-      filter() {
-        return !stream.closed
-      },
-      async send(message) {
-        if (stream.closed) return
-        stream.enqueue({ data: message })
-        if (message.byteLength) {
-          Array.from(serializeCrdtMessages('Babylon>Datalayer', message, engine)).forEach(($) => console.log($))
-        }
-      }
-    }
-    Object.assign(transport, { name: 'BabylonTransportClient' })
-    this.engine.addTransport(transport)
-    return transport
-  }
-
   private processEcsChange(entityId: Entity, op: CrdtMessageType, component?: ComponentDefinition<any>) {
     if (op === CrdtMessageType.PUT_COMPONENT) {
       // when setting a component value we need to get or create the entity

diff --git a/packages/@dcl/inspector/src/redux/app/index.ts b/packages/@dcl/inspector/src/redux/app/index.ts
@@ -1,6 +1,6 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 import { RootState } from '../store'
-import { InspectorPreferences, getDefaultInspectorPreferences } from '../../lib/logic/preferences/types'
+import { InspectorPreferences } from '../../lib/logic/preferences/types'
 
 export interface AppState {
   canSave: boolean
@@ -30,11 +30,7 @@ export const appState = createSlice({
 
 export const { updateCanSave, updatePreferences } = appState.actions
 export const getCanSave = (state: RootState): boolean => state.app.canSave
-export const getInspectorPreferences = (state: RootState): InspectorPreferences => {
-  if (!state.app.preferences) {
-    // TODO: send to sentry
-    return getDefaultInspectorPreferences()
-  }
+export const getInspectorPreferences = (state: RootState): InspectorPreferences | undefined => {
   return state.app.preferences
 }