Remove deprecated createMappedComponent API (#7719)

* remove some deprecated createMappedComponent API * update TweenComponent * refactor editor camera state * convert a bunch more components * update all remaining * fix test * move dirtyTransforms to TransformComponent * fix tsc err
EtherealEngine · Mar 12, 2023 · ea205b7 · ea205b7
1 parent a9dfc0a
commit ea205b7
Show file tree

Hide file tree

Showing 110 changed files with 1,095 additions and 748 deletions.
diff --git a/packages/editor/src/classes/EditorCameraComponent.ts b/packages/editor/src/classes/EditorCameraComponent.ts
diff --git a/packages/editor/src/classes/EditorCameraState.ts b/packages/editor/src/classes/EditorCameraState.ts
@@ -0,0 +1,18 @@
+import { Vector3 } from 'three'
+
+import { EntityOrObjectUUID } from '@etherealengine/engine/src/ecs/functions/EntityTree'
+import { defineState } from '@etherealengine/hyperflux'
+
+export const EditorCameraState = defineState({
+  name: 'EditorCameraState',
+  initial: {
+    center: new Vector3(),
+    zoomDelta: 0,
+    focusedObjects: [] as EntityOrObjectUUID[],
+    isPanning: false,
+    cursorDeltaX: 0,
+    cursorDeltaY: 0,
+    isOrbiting: false,
+    refocus: false
+  }
+})
diff --git a/packages/editor/src/components/graph/GraphPanel.tsx b/packages/editor/src/components/graph/GraphPanel.tsx
@@ -5,7 +5,7 @@ import { BehaveGraphComponent } from '@etherealengine/engine/src/behave-graph/co
 import { UndefinedEntity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import {
   getComponent,
-  getComponentState,
+  getMutableComponent,
   hasComponent,
   useOptionalComponent
 } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'

diff --git a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx
@@ -22,13 +22,13 @@ import {
 import { GroupComponent } from '@etherealengine/engine/src/scene/components/GroupComponent'
 import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
 import { NameComponent } from '@etherealengine/engine/src/scene/components/NameComponent'
-import { dispatchAction } from '@etherealengine/hyperflux'
+import { dispatchAction, getMutableState } from '@etherealengine/hyperflux'
 
 import { Checkbox } from '@mui/material'
 import MenuItem from '@mui/material/MenuItem'
 import { PopoverPosition } from '@mui/material/Popover'
 
-import { EditorCameraComponent } from '../../classes/EditorCameraComponent'
+import { EditorCameraState } from '../../classes/EditorCameraState'
 import { ItemTypes, SupportedFileTypes } from '../../constants/AssetTypes'
 import { addMediaNode } from '../../functions/addMediaNode'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
@@ -270,9 +270,9 @@ export default function HierarchyPanel({
   const onClick = useCallback((e: MouseEvent, node: HeirarchyTreeNodeType) => {
     if (node.obj3d) return // todo
     if (e.detail === 2) {
-      const cameraComponent = getComponent(Engine.instance.cameraEntity, EditorCameraComponent)
-      cameraComponent.focusedObjects = [node.entityNode]
-      cameraComponent.refocus = true
+      const editorCameraState = getMutableState(EditorCameraState)
+      editorCameraState.focusedObjects.set([node.entityNode])
+      editorCameraState.refocus.set(true)
     }
   }, [])
 

diff --git a/packages/editor/src/components/properties/InstancingNodeEditor.tsx b/packages/editor/src/components/properties/InstancingNodeEditor.tsx
@@ -7,7 +7,7 @@ import {
   addComponent,
   ComponentType,
   getComponent,
-  getComponentState,
+  getMutableComponent,
   getOrAddComponent,
   hasComponent,
   useComponent
@@ -93,7 +93,7 @@ export const InstancingNodeEditor: EditorComponentType = (props) => {
       (eNode) => {
         if (eNode === entity) return false
         if (hasComponent(eNode, ModelComponent)) {
-          const obj3d = getComponentState(eNode, ModelComponent).scene.value as Scene | undefined
+          const obj3d = getMutableComponent(eNode, ModelComponent).scene.value as Scene | undefined
           if (!obj3d) return false
           const mesh = getFirstMesh(obj3d)
           return !!mesh && mesh.geometry.hasAttribute('uv') && mesh.geometry.hasAttribute('normal')
@@ -108,13 +108,13 @@ export const InstancingNodeEditor: EditorComponentType = (props) => {
 
   const onUnstage = () => {
     if (!hasComponent(entity, InstancingUnstagingComponent)) {
-      addComponent(entity, InstancingUnstagingComponent, {})
+      addComponent(entity, InstancingUnstagingComponent)
     }
   }
 
   const onStage = async () => {
     if (!hasComponent(entity, InstancingStagingComponent)) {
-      addComponent(entity, InstancingStagingComponent, {})
+      addComponent(entity, InstancingStagingComponent)
     }
   }
 
@@ -125,7 +125,7 @@ export const InstancingNodeEditor: EditorComponentType = (props) => {
 
   const onChangeMode = (mode) => {
     if (scatter.mode === mode) return
-    const scene = getComponentState(entity, ModelComponent).scene! as any
+    const scene = getMutableComponent(entity, ModelComponent).scene! as any
     if (!scene.value) return
     const uData = JSON.parse(JSON.stringify(scene.userData.value))
     uData[scatter.mode] = scatter.sourceProperties

diff --git a/packages/editor/src/components/properties/ModelNodeEditor.tsx b/packages/editor/src/components/properties/ModelNodeEditor.tsx
@@ -9,7 +9,7 @@ import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineSta
 import {
   addComponent,
   getComponent,
-  getComponentState,
+  getMutableComponent,
   getOptionalComponent,
   hasComponent,
   removeComponent,

diff --git a/packages/editor/src/components/properties/ModelTransformProperties.tsx b/packages/editor/src/components/properties/ModelTransformProperties.tsx
@@ -9,7 +9,7 @@ import { ModelTransformParameters } from '@etherealengine/engine/src/assets/clas
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
 import {
   ComponentType,
-  getComponentState,
+  getMutableComponent,
   hasComponent
 } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { MaterialSource, SourceType } from '@etherealengine/engine/src/renderer/materials/components/MaterialSource'
@@ -246,7 +246,7 @@ export default function ModelTransformProperties({
       .map((entity: Entity) => entity)
     for (const entity of selectedModelEntities) {
       console.log('at entity ' + entity)
-      const modelComponent = getComponentState(entity, ModelComponent)
+      const modelComponent = getMutableComponent(entity, ModelComponent)
       console.log('processing model from src ' + modelComponent.src.value)
       //bake lightmaps to vertices
       console.log('baking vertices...')

diff --git a/packages/editor/src/components/properties/SystemNodeEditor.tsx b/packages/editor/src/components/properties/SystemNodeEditor.tsx
@@ -100,7 +100,7 @@ export const SystemNodeEditor: EditorComponentType = (props) => {
         <BooleanInput onChange={updateProperty(SystemComponent, 'enableServer')} value={systemComponent.enableServer} />
       </InputGroup>
       <InputGroup name="args" label={t('editor:properties.systemnode.lbl-args')}>
-        <StringInput onChange={updateProperty(SystemComponent, 'args')} value={systemComponent.args} />
+        <StringInput onChange={updateProperty(SystemComponent, 'args')} value={systemComponent.args as any} />
       </InputGroup>
     </NodeEditor>
   )

diff --git a/packages/editor/src/functions/EditorControlFunctions.test.ts b/packages/editor/src/functions/EditorControlFunctions.test.ts
@@ -5,6 +5,7 @@ import { destroyEngine, Engine } from '@etherealengine/engine/src/ecs/classes/En
 import {
   addComponent,
   createMappedComponent,
+  defineComponent,
   getComponent,
   hasComponent,
   setComponent
@@ -49,7 +50,25 @@ type TestComponentType = {
   data: TempProp
 }
 
-export const TestComponent = createMappedComponent<TestComponentType>('TestComponent')
+export const TestComponent = defineComponent({
+  name: 'TestComponent',
+
+  onInit(entity) {
+    return {
+      pos: new Vector3(),
+      index: 0,
+      data: new TempProp(0)
+    }
+  },
+
+  onSet(entity, component, json) {
+    if (!json) return
+
+    if (json.pos) component.pos.value.copy(json.pos)
+    if (json.index) component.index.set(json.index)
+    if (json.data) component.data.set(json.data)
+  }
+})
 function getRandomValues(): TestComponentType {
   return {
     pos: new Vector3(Math.random(), Math.random(), Math.random()),

diff --git a/packages/editor/src/functions/EditorControlFunctions.ts b/packages/editor/src/functions/EditorControlFunctions.ts
@@ -11,7 +11,7 @@ import {
   addComponent,
   Component,
   getComponent,
-  getComponentState,
+  getMutableComponent,
   getOptionalComponent,
   hasComponent,
   removeComponent,

diff --git a/packages/editor/src/functions/sceneRenderFunctions.ts b/packages/editor/src/functions/sceneRenderFunctions.ts
@@ -10,13 +10,12 @@ import {
 } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { matchActionOnce } from '@etherealengine/engine/src/networking/functions/matchActionOnce'
 import InfiniteGridHelper from '@etherealengine/engine/src/scene/classes/InfiniteGridHelper'
-import TransformGizmo from '@etherealengine/engine/src/scene/classes/TransformGizmo'
 import { ObjectLayers } from '@etherealengine/engine/src/scene/constants/ObjectLayers'
 import { updateSceneFromJSON } from '@etherealengine/engine/src/scene/systems/SceneLoadingSystem'
 import { TransformComponent } from '@etherealengine/engine/src/transform/components/TransformComponent'
-import { dispatchAction } from '@etherealengine/hyperflux'
+import { dispatchAction, getMutableState } from '@etherealengine/hyperflux'
 
-import { EditorCameraComponent } from '../classes/EditorCameraComponent'
+import { EditorCameraState } from '../classes/EditorCameraState'
 import { EditorHistoryAction } from '../services/EditorHistory'
 import { EditorAction } from '../services/EditorServices'
 
@@ -56,21 +55,21 @@ export async function initializeScene(sceneData: SceneData): Promise<Error[] | v
   camera.lookAt(new Vector3())
   transform.position.copy(camera.position)
   transform.rotation.copy(camera.quaternion)
-  Engine.instance.dirtyTransforms[Engine.instance.cameraEntity] = true
+  TransformComponent.dirtyTransforms[Engine.instance.cameraEntity] = true
 
   Engine.instance.camera.layers.enable(ObjectLayers.Scene)
   Engine.instance.camera.layers.enable(ObjectLayers.NodeHelper)
   Engine.instance.camera.layers.enable(ObjectLayers.Gizmos)
 
-  removeComponent(Engine.instance.cameraEntity, EditorCameraComponent)
-  addComponent(Engine.instance.cameraEntity, EditorCameraComponent, {
+  getMutableState(EditorCameraState).set({
     center: new Vector3(),
     zoomDelta: 0,
-    isOrbiting: false,
+    focusedObjects: [],
     isPanning: false,
     cursorDeltaX: 0,
     cursorDeltaY: 0,
-    focusedObjects: []
+    isOrbiting: false,
+    refocus: false
   })
 
   // Require when changing scene

diff --git a/packages/editor/src/services/EditorHelperState.ts b/packages/editor/src/services/EditorHelperState.ts
@@ -2,14 +2,7 @@ import { useHookstate } from '@hookstate/core'
 import React, { useEffect } from 'react'
 
 import { matches, Validator } from '@etherealengine/engine/src/common/functions/MatchesUtils'
-import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
-import {
-  hasComponent,
-  useComponent,
-  useOptionalComponent
-} from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import InfiniteGridHelper from '@etherealengine/engine/src/scene/classes/InfiniteGridHelper'
-import { TransformGizmoComponent } from '@etherealengine/engine/src/scene/components/TransformGizmo'
 import {
   SnapMode,
   SnapModeType,
@@ -27,8 +20,6 @@ import {
   syncStateWithLocalStorage
 } from '@etherealengine/hyperflux'
 
-import { createTransformGizmo } from '../systems/EditorControlSystem'
-
 export const EditorHelperState = defineState({
   name: 'EditorHelperState',
   initial: () => ({