Improved model debug tools

packages/client-core/i18n/en/editor.json

@@ -258,6 +258,7 @@
       "lbl-receiveShadow": "Receive Shadow",
       "lbl-interactable": "Interactable",
       "lbl-generateBVH": "Generate BVH",
+      "lbl-avoidCameraOcclusion": "Avoid Camera Occlusion",
       "lbl-matrixAutoUpdate": "MatrixAutoUpdate",
       "lbl-name": "Name",
       "lbl-url": "Model Url",

packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx

@@ -151,7 +151,7 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => {
       const entityTreeComponent = getComponent(node.entityNode as Entity, EntityTreeComponent)
       parentNode = entityTreeComponent?.parentEntity
       const parentTreeComponent = getComponent(entityTreeComponent?.parentEntity!, EntityTreeComponent)
-      if (!node.lastChild && parentNode && parentTreeComponent.children.length > node.childIndex + 1) {
+      if (!node.lastChild && parentNode && parentTreeComponent?.children.length > node.childIndex + 1) {
         beforeNode = parentTreeComponent.children[node.childIndex + 1]
       }
     } else {

packages/editor/src/components/inputs/AudioInput.tsx

@@ -4,6 +4,7 @@ import { AudioFileTypes } from '@etherealengine/engine/src/assets/constants/file
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
+import { StringInputProps } from './StringInput'
 
 /**
  * AudioInput used to render component view for audio inputs.
@@ -12,7 +13,7 @@ import FileBrowserInput from './FileBrowserInput'
  * @param       {any} rest
  * @constructor
  */
-export function AudioInput({ onChange, ...rest }) {
+export function AudioInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={AudioFileTypes}

packages/editor/src/components/inputs/FileBrowserInput.tsx

@@ -5,7 +5,9 @@ import { AssetType } from '@etherealengine/engine/src/assets/enum/AssetType'
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import useUpload from '../assets/useUpload'
-import { ControlledStringInput, StringInputProp } from './StringInput'
+import { ControlledStringInput, StringInputProps } from './StringInput'
+
+export type FileBrowserInputProps = StringInputProps & { acceptFileTypes: string[]; acceptDropItems: string[] }
 
 /**
  * Function component used for rendering FileBrowserInput.
@@ -16,10 +18,11 @@ import { ControlledStringInput, StringInputProp } from './StringInput'
  */
 export function FileBrowserInput({
   onChange,
+  value,
   acceptFileTypes,
   acceptDropItems,
   ...rest
-}: StringInputProp & { acceptFileTypes: string[]; acceptDropItems: string[] }) {
+}: FileBrowserInputProps) {
   const uploadOptions = {
     multiple: false,
     accepts: acceptFileTypes
@@ -62,6 +65,7 @@ export function FileBrowserInput({
     <>
       <ControlledStringInput
         ref={dropRef}
+        value={value}
         onChange={(value, e) => onChange?.(value, {}, e)}
         error={isOver && !canDrop}
         canDrop={isOver && canDrop}

packages/editor/src/components/inputs/FolderInput.tsx

@@ -4,6 +4,7 @@ import { AllFileTypes } from '@etherealengine/engine/src/assets/constants/fileTy
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
+import { StringInputProps } from './StringInput'
 
 /**
  * FolderInput used to render component view for folder inputs.
@@ -12,7 +13,7 @@ import FileBrowserInput from './FileBrowserInput'
  * @param       {any} rest
  * @constructor
  */
-export function FolderInput({ onChange, ...rest }) {
+export function FolderInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={AllFileTypes}

packages/editor/src/components/inputs/ImageInput.tsx

@@ -4,7 +4,7 @@ import { ImageFileTypes } from '@etherealengine/engine/src/assets/constants/file
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
-import { StringInputProp } from './StringInput'
+import { StringInputProps } from './StringInput'
 
 /**
  * ImageInput used to render component view for image inputs.
@@ -13,7 +13,7 @@ import { StringInputProp } from './StringInput'
  * @param       {any} rest
  * @constructor
  */
-export function ImageInput({ onChange, ...rest }: StringInputProp) {
+export function ImageInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={ImageFileTypes}

packages/editor/src/components/inputs/ImagePreviewInput.tsx

@@ -4,7 +4,8 @@ import styled from 'styled-components'
 import { Stack } from '@mui/material'
 
 import ImageInput from './ImageInput'
-import InputGroup from './InputGroup'
+import InputGroup, { InputGroupProps } from './InputGroup'
+import { StringInputProps } from './StringInput'
 
 export const ImageContainer = (styled as any).div`
   display: flex;
@@ -16,7 +17,7 @@ export const ImageContainer = (styled as any).div`
   padding: 4px;
 `
 
-export default function ImagePreviewInput({ value, onChange, ...rest }) {
+export default function ImagePreviewInput({ value, onChange, ...rest }: StringInputProps) {
   return (
     <ImageContainer>
       <Stack>
@@ -35,7 +36,7 @@ export default function ImagePreviewInput({ value, onChange, ...rest }) {
   )
 }
 
-export function ImagePreviewInputGroup({ name, label, value, onChange, ...rest }) {
+export function ImagePreviewInputGroup({ name, label, value, onChange, ...rest }: StringInputProps & InputGroupProps) {
   return (
     <InputGroup name={name} label={label} {...rest}>
       <ImagePreviewInput value={value} onChange={onChange} />

packages/editor/src/components/inputs/InputGroup.tsx

@@ -149,7 +149,7 @@ export function InputGroupInfo({ info }: InputGroupInfoProp) {
  *
  * @type {Object}
  */
-type InputGroupPropType = React.PropsWithChildren<
+export type InputGroupProps = React.PropsWithChildren<
   {
     name: string
     disabled?: boolean
@@ -169,7 +169,7 @@ type InputGroupPropType = React.PropsWithChildren<
  * @param       {string} label
  * @constructor
  */
-export function InputGroup({ name, children, disabled, info, label, ...rest }: InputGroupPropType) {
+export function InputGroup({ name, children, disabled, info, label, ...rest }: InputGroupProps) {
   const styles = useStyles()
 
   return (

packages/editor/src/components/inputs/MaterialInput.tsx

@@ -6,7 +6,9 @@ import { EntityOrObjectUUID } from '@etherealengine/engine/src/ecs/functions/Ent
 import { ItemTypes } from '../../constants/AssetTypes'
 import { ControlledStringInput } from './StringInput'
 
-export function MaterialInput({ value, onChange, ...rest }) {
+export function MaterialInput<
+  T extends { value: EntityOrObjectUUID; onChange: (val: EntityOrObjectUUID) => any; [key: string]: any }
+>({ value, onChange, ...rest }: T) {
   function onDrop(item, monitor: DropTargetMonitor) {
     const value = item.value
     let element = value as EntityOrObjectUUID | EntityOrObjectUUID[] | undefined
@@ -29,7 +31,13 @@ export function MaterialInput({ value, onChange, ...rest }) {
 
   return (
     <>
-      <ControlledStringInput ref={dropRef} onChange={onChange} canDrop={isOver && canDrop} value={value} {...rest} />
+      <ControlledStringInput
+        ref={dropRef}
+        onChange={onChange}
+        canDrop={isOver && canDrop}
+        value={'' + value}
+        {...rest}
+      />
     </>
   )
 }

packages/editor/src/components/inputs/ModelInput.tsx

@@ -4,6 +4,7 @@ import { ModelFileTypes } from '@etherealengine/engine/src/assets/constants/file
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
+import { StringInputProps } from './StringInput'
 
 /**
  * ModelInput used to render component view for script inputs.
@@ -12,7 +13,7 @@ import FileBrowserInput from './FileBrowserInput'
  * @param       {any} rest
  * @constructor
  */
-export function ModelInput({ onChange, ...rest }) {
+export function ModelInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={ModelFileTypes}

packages/editor/src/components/inputs/PrefabInput.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
+import { StringInputProps } from './StringInput'
 
 /**
  *
@@ -10,7 +11,7 @@ import FileBrowserInput from './FileBrowserInput'
  * @param       {any} rest
  * @constructor
  */
-function PrefabInput({ onChange, ...rest }) {
+function PrefabInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={['xre.gltf']}

packages/editor/src/components/inputs/SceneObjectInput.tsx

@@ -9,7 +9,9 @@ import { UUIDComponent } from '@etherealengine/engine/src/scene/components/UUIDC
 import { ItemTypes } from '../../constants/AssetTypes'
 import { ControlledStringInput } from './StringInput'
 
-export function SceneObjectInput({ value, onChange, ...rest }) {
+export function SceneObjectInput<
+  T extends { value: EntityOrObjectUUID; onChange: (val: EntityOrObjectUUID) => any; [key: string]: any }
+>({ value, onChange, ...rest }: T) {
   function onDrop(item, monitor: DropTargetMonitor) {
     const value = item.value
     let element = value as EntityOrObjectUUID | EntityOrObjectUUID[] | undefined
@@ -31,7 +33,13 @@ export function SceneObjectInput({ value, onChange, ...rest }) {
 
   return (
     <>
-      <ControlledStringInput ref={dropRef} onChange={onChange} canDrop={isOver && canDrop} value={value} {...rest} />
+      <ControlledStringInput
+        ref={dropRef}
+        onChange={onChange}
+        canDrop={isOver && canDrop}
+        value={'' + value}
+        {...rest}
+      />
     </>
   )
 }

packages/editor/src/components/inputs/ScriptInput.tsx

@@ -4,6 +4,7 @@ import { CustomScriptFileTypes } from '@etherealengine/engine/src/assets/constan
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
+import { StringInputProps } from './StringInput'
 
 /**
  * ScriptInput used to render component view for script inputs.
@@ -12,7 +13,7 @@ import FileBrowserInput from './FileBrowserInput'
  * @param       {any} rest
  * @constructor
  */
-export function ScriptInput({ onChange, ...rest }) {
+export function ScriptInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={CustomScriptFileTypes}

packages/editor/src/components/inputs/StringInput.tsx

@@ -8,7 +8,7 @@ const StyledStringInput = (styled as any)(Input)`
   width: 100%;
 `
 
-export interface StringInputProp {
+export interface StringInputProps {
   id?: string
   value?: string
   onChange?: Function
@@ -25,7 +25,7 @@ export interface StringInputProp {
   disabled?: boolean
 }
 
-const StringInput = React.forwardRef<{}, StringInputProp>(({ onChange, ...rest }, ref) => (
+const StringInput = React.forwardRef<{}, StringInputProps>(({ onChange, ...rest }, ref) => (
   <StyledStringInput onChange={(e) => onChange?.(e.target.value, e)} {...rest} ref={ref} />
 ))
 
@@ -45,7 +45,7 @@ const DropContainer = (styled as any).div`
   width: 100%;
 `
 
-export const ControlledStringInput = React.forwardRef<{}, StringInputProp>((values, ref) => {
+export const ControlledStringInput = React.forwardRef<{}, StringInputProps>((values, ref) => {
   const { onChange, value, ...rest } = values
   const inputRef = useRef<HTMLInputElement>()
 

packages/editor/src/components/inputs/TexturePreviewInput.tsx

@@ -12,6 +12,7 @@ import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
 import { ImageContainer } from './ImagePreviewInput'
 import InputGroup from './InputGroup'
+import { StringInputProps } from './StringInput'
 import Vector2Input from './Vector2Input'
 
 /**
@@ -21,7 +22,7 @@ import Vector2Input from './Vector2Input'
  * @param       {any} rest
  * @constructor
  */
-export function TextureInput({ onChange, ...rest }) {
+export function TextureInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={[...ImageFileTypes, ...VideoFileTypes]}

packages/editor/src/components/inputs/VideoInput.tsx

@@ -4,6 +4,7 @@ import { VideoFileTypes } from '@etherealengine/engine/src/assets/constants/file
 
 import { ItemTypes } from '../../constants/AssetTypes'
 import FileBrowserInput from './FileBrowserInput'
+import { StringInputProps } from './StringInput'
 
 /**
  * VideoInput used to render component view for video inputs.
@@ -12,7 +13,7 @@ import FileBrowserInput from './FileBrowserInput'
  * @param       {any} rest
  * @constructor
  */
-export function VideoInput({ onChange, ...rest }) {
+export function VideoInput({ onChange, ...rest }: StringInputProps) {
   return (
     <FileBrowserInput
       acceptFileTypes={VideoFileTypes}

packages/editor/src/components/properties/EnvMapEditor.tsx

@@ -87,7 +87,7 @@ export const EnvMapEditor: EditorComponentType = (props) => {
           </InputGroup>
           <InputGroup name="Texture URL" label="Texture URL">
             {envmapComponent.envMapTextureType.value === EnvMapTextureType.Cubemap && (
-              <FolderInput value={envmapComponent.envMapSourceURL} onChange={onChangeCubemapURLSource} />
+              <FolderInput value={envmapComponent.envMapSourceURL.value} onChange={onChangeCubemapURLSource} />
             )}
             {envmapComponent.envMapTextureType.value === EnvMapTextureType.Equirectangular && (
               <ImagePreviewInput

packages/editor/src/components/properties/ModelNodeEditor.tsx

@@ -112,6 +112,12 @@ export const ModelNodeEditor: EditorComponentType = (props) => {
           onChange={updateProperty(ModelComponent, 'generateBVH')}
         />
       </InputGroup>
+      <InputGroup name="Avoid Camera Occlusion" label={t('editor:properties.model.lbl-avoidCameraOcclusion')}>
+        <BooleanInput
+          value={modelComponent.avoidCameraOcclusion.value}
+          onChange={updateProperty(ModelComponent, 'avoidCameraOcclusion')}
+        />
+      </InputGroup>
       <InputGroup name="Is Equippable" label={t('editor:properties.model.lbl-isEquippable')}>
         <BooleanInput value={isEquippable} onChange={onChangeEquippable} />
       </InputGroup>

packages/editor/src/components/properties/NodeEditor.tsx

@@ -8,6 +8,47 @@ import { SelectionAction } from '../../services/SelectionServices'
 import PropertyGroup from './PropertyGroup'
 import { EditorPropType } from './Util'
 
+interface NodeErrorProps {
+  name?: string
+  children?: React.ReactNode
+}
+
+interface NodeErrorState {
+  error: Error | null
+}
+
+class NodeEditorErrorBoundary extends React.Component<NodeErrorProps, NodeErrorState> {
+  public state: NodeErrorState = {
+    error: null
+  }
+
+  public static getDerivedStateFromError(error: Error): NodeErrorState {
+    // Update state so the next render will show the fallback UI.
+    return { error }
+  }
+
+  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo)
+  }
+
+  public render() {
+    if (this.state.error) {
+      return (
+        <div style={{ margin: 10, color: '#ff0000', overflow: 'auto', backgroundColor: '#222222' }}>
+          <h1>
+            <b>
+              [{this.props.name}] {this.state.error.message}`
+            </b>
+          </h1>
+          <pre>{this.state.error.stack}</pre>
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
 //declaring NodeEditorProps
 type NodeEditorProps = EditorPropType & {
   description?: string
@@ -40,7 +81,7 @@ export const NodeEditor: React.FC<PropsWithChildren<NodeEditorProps>> = ({
           : undefined
       }
     >
-      {children}
+      <NodeEditorErrorBoundary name={name}>{children}</NodeEditorErrorBoundary>
     </PropertyGroup>
   )
 }