chore: update maps to latest version of ethereal engine

editor/index.ts

@@ -1,13 +1,13 @@
+import { prefabIcons } from '@etherealengine/editor/src/functions/PrefabEditors'
+import { startSystem } from '@etherealengine/engine/src/ecs/functions/SystemFunctions'
 
-import { EntityNodeEditor, prefabIcons } from '@etherealengine/editor/src/functions/PrefabEditors'
-import { MapNodeEditor } from './MapNodeEditor'
 import MapIcon from '@mui/icons-material/Map'
-import { GEO_MAP } from '../worldInjection'
-import MapUpdateSystem from '../engine/MapUpdateSystem'
 
-EntityNodeEditor[GEO_MAP] = MapNodeEditor
-prefabIcons[GEO_MAP] = MapIcon
+import MapUpdateSystem from '../engine/MapUpdateSystem'
+import { GEO_MAP } from '../worldInjection'
 
 export default async () => {
-  return await MapUpdateSystem()
-}
+  prefabIcons[GEO_MAP] = MapIcon
+
+  startSystem(MapUpdateSystem, {})
+}

engine/MapComponent.ts

@@ -1,23 +1,69 @@
-import {useEffect} from 'react'
+import { useEffect } from 'react'
 import { Vector3 } from 'three'
 
-import { createMappedComponent, defineComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
-import { SCENE_COMPONENT_MAP, _updateMap, serializeMap } from './MapFunctions'
 import { isClient } from '@etherealengine/engine/src/common/functions/getEnvironment'
+import { ComponentType, defineComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { useEntityContext } from '@etherealengine/engine/src/ecs/functions/EntityFunctions'
 
-export type MapComponentType = {
-  apiKey: string
-  name?: string
-  scale?: Vector3
-  style?: any
-  useTimeOfDay?: number
-  useDirectionalShadows?: boolean
-  useDeviceGeolocation?: boolean
-  startLatitude?: string
-  startLongitude?: string
-  showRasterTiles?: boolean
-  enableDebug?: boolean
-}
+import { _updateMap, deserializeMap, SCENE_COMPONENT_MAP } from './MapFunctions'
 
-export const MapComponent = createMappedComponent<MapComponentType>('MapComponent')
+export const MapComponent = defineComponent({
+  name: 'EE_maps_scene_component',
+  jsonID: SCENE_COMPONENT_MAP,
+  onInit: (entity) => {
+    return {
+      apiKey: '',
+      name: '',
+      scale: new Vector3(),
+      style: {},
+      useTimeOfDay: 0,
+      useDirectionalShadows: false,
+      useDeviceGeolocation: false,
+      startLatitude: '',
+      startLongitude: '',
+      showRasterTiles: false,
+      enableDebug: false
+    }
+  },
+  onSet: (entity, component, json) => {
+    if (!json) return
+    component.apiKey.set(json.apiKey!)
+    component.name.set(json.name!)
+    component.scale.set(json.scale!)
+    component.style.set(json.style!)
+    component.useTimeOfDay.set(json.useTimeOfDay!)
+    component.useDirectionalShadows.set(json.useDirectionalShadows!)
+    component.useDeviceGeolocation.set(json.useDeviceGeolocation!)
+    component.startLatitude.set(json.startLatitude!)
+    component.startLongitude.set(json.startLongitude!)
+    component.showRasterTiles.set(json.showRasterTiles!)
+    component.enableDebug.set(json.enableDebug!)
+    deserializeMap(entity, component.value)
+  },
+  toJSON: (entity, component) => {
+    return {
+      apiKey: component.apiKey,
+      name: component.name,
+      scale: component.scale,
+      useTimeOfDay: component.useTimeOfDay,
+      useDirectionalShadows: component.useDirectionalShadows,
+      useDeviceGeolocation: component.useDeviceGeolocation,
+      startLatitude: component.startLatitude,
+      startLongitude: component.startLongitude,
+      showRasterTiles: component.showRasterTiles,
+      enableDebug: component.enableDebug
+    }
+  },
+  reactor: () => {
+    if (!isClient) return null
+    const entity = useEntityContext()
+
+    useEffect(() => {
+      _updateMap(entity, {})
+    }, [entity])
+
+    return null
+  }
+})
+
+export type MapComponentType = ComponentType<typeof MapComponent>

engine/MapFunctions.ts

@@ -11,6 +11,7 @@ import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import {
   addComponent,
+  ComponentType,
   defineQuery,
   getAllComponents,
   getComponent,
@@ -32,11 +33,13 @@ export const SCENE_COMPONENT_MAP = 'map'
 export const SCENE_COMPONENT_MAP_DEFAULT_VALUES = {}
 
 export const deserializeMap = (entity: Entity, json: ComponentJson<typeof MapComponent>) => {
+  console.log('deserialize_map')
   const sceneAssetPendingTagQuery = defineQuery([SceneAssetPendingTagComponent])
+  console.log('sceneassetpending', sceneAssetPendingTagQuery.length)
   if (isClient) {
-    if (sceneAssetPendingTagQuery.length > 0) {
-      createMap(entity, json.props as MapComponentType)
-    }
+    // if (sceneAssetPendingTagQuery.length > 0) {
+    createMap(entity, json.props as MapComponentType)
+    // }
 
     // if (getState(EngineState).isEditor) {
     //   const components = getAllComponents(entity)
@@ -46,12 +49,12 @@ export const deserializeMap = (entity: Entity, json: ComponentJson<typeof MapCom
 }
 
 export const createMap = async (entity: Entity, args: MapComponentType) => {
+  console.log('create_map_1')
   if (getState(EngineState).isEditor && hasComponent(entity, MapComponent)) {
     _updateMap(entity, args)
     return
   }
   // TODO: handle "navigator.geolocation.getCurrentPosition" rejection?
-
   addComponent(entity, MapComponent, args)
   const center = await getStartCoords(args)
 
@@ -66,6 +69,8 @@ export const createMap = async (entity: Entity, args: MapComponentType) => {
     // addComponent(entity, DebugNavMeshComponent, { object3d: new Group() })
   }
 
+  console.log('map_functions_create_map')
+
   const state = mapReducer(null, MapAction.initialize(center, args.scale?.x))
 
   // const spinnerGLTF = getState(EngineState).publicPath + '/projects/ee-maps/EarthLowPoly.glb'
@@ -107,17 +112,22 @@ export const createMap = async (entity: Entity, args: MapComponentType) => {
 
 export const _updateMap = async (entity: Entity, props: any) => {
   // only update on some property changes
-  if (
-    !(
-      Object.keys(props).includes('startLatitude') ||
-      Object.keys(props).includes('startLongitude') ||
-      Object.keys(props).includes('useDeviceGeolocation')
-    )
-  )
-    return
+  console.log('props_update_map', Object.keys(props)) 
+
+  // if (
+  //   !(
+  //     Object.keys(props).includes('startLatitude') ||
+  //     Object.keys(props).includes('startLongitude') ||
+  //     Object.keys(props).includes('useDeviceGeolocation')
+  //   )
+  // )
+  //   return
+
+  console.log('_updatemap')
 
   const args = getComponent(entity, MapComponent)
   const center = await getStartCoords(args)
+  console.log('center->', center)
   const subSceneChildren = []
   const subScene = this as unknown as Object3D
 
@@ -140,23 +150,8 @@ export const _updateMap = async (entity: Entity, props: any) => {
   }
   subScene.children = subSceneChildren
 }
+
 export const updateMap = debounce((entity, args) => _updateMap(entity, args), 500) as any as (
   entity: Entity,
   props: any
 ) => void
-
-export const serializeMap = (entity: Entity) => {
-  const mapComponent = getComponent(entity, MapComponent)
-  return {
-    apiKey: mapComponent.apiKey,
-    name: mapComponent.name,
-    scale: mapComponent.scale,
-    useTimeOfDay: mapComponent.useTimeOfDay,
-    useDirectionalShadows: mapComponent.useDirectionalShadows,
-    useDeviceGeolocation: mapComponent.useDeviceGeolocation,
-    startLatitude: mapComponent.startLatitude,
-    startLongitude: mapComponent.startLongitude,
-    showRasterTiles: mapComponent.showRasterTiles,
-    enableDebug: mapComponent.enableDebug
-  }
-}