From 8c013a31a35740358ed3af1ec6548eddbb4aa660 Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Tue, 7 Nov 2023 17:08:17 +0530 Subject: [PATCH 1/6] show loading in Hierarchy Panel --- packages/client-core/i18n/en/editor.json | 1 + .../hierarchy/HierarchyPanelContainer.tsx | 41 ++++++++++++------- .../hierarchy/HierarchyTreeNode.tsx | 10 ++++- .../components/hierarchy/styles.module.scss | 10 +++++ 4 files changed, 46 insertions(+), 16 deletions(-) diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json index 8f4eec40b59..3697e37f429 100755 --- a/packages/client-core/i18n/en/editor.json +++ b/packages/client-core/i18n/en/editor.json @@ -911,6 +911,7 @@ "lbl-collapseAll": "Collapse All", "lbl-explode": "Explode Objects", "lbl-addEntity": "Add Entity", + "lbl-addingEntity": "Adding Entity...", "isseus": "Issues:" }, "materialLibrary": { diff --git a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx index b1f35b8581b..c01f7472d28 100644 --- a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx @@ -42,9 +42,11 @@ import { getMutableState, getState, useHookstate } from '@etherealengine/hyperfl import MenuItem from '@mui/material/MenuItem' import { PopoverPosition } from '@mui/material/Popover' +import Text from '@etherealengine/client-core/src/common/components/Text' import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine' import { entityExists } from '@etherealengine/engine/src/ecs/functions/EntityFunctions' import { UUIDComponent } from '@etherealengine/engine/src/scene/components/UUIDComponent' +import CircularProgress from '@etherealengine/ui/src/primitives/mui/CircularProgress' import { EditorCameraState } from '../../classes/EditorCameraState' import { ItemTypes, SupportedFileTypes } from '../../constants/AssetTypes' import { EditorControlFunctions } from '../../functions/EditorControlFunctions' @@ -92,6 +94,7 @@ export default function HierarchyPanel() { const [selectedNode, _setSelectedNode] = useState(null) const lockPropertiesPanel = useHookstate(getMutableState(EditorState).lockPropertiesPanel) const [searchHierarchy, setSearchHierarchy] = useState('') + const isAssetLoading = useHookstate(false) const activeScene = useHookstate(getMutableState(SceneState).activeScene) const entities = useHookstate(UUIDComponent.entitiesByUUIDState) @@ -404,7 +407,8 @@ export default function HierarchyPanel() { onMouseDown, onClick, onToggle, - onUpload + onUpload, + isAssetLoading }} itemKey={(index) => index} outerRef={treeContainerDropTarget} @@ -427,20 +431,27 @@ export default function HierarchyPanel() { {HierarchyList} )} - EditorControlFunctions.createObjectFromSceneElement()} - > - {t('editor:hierarchy.lbl-addEntity')} - + {isAssetLoading.value ? ( +
+ {t('editor:hierarchy.lbl-addingEntity')} + +
+ ) : ( + EditorControlFunctions.createObjectFromSceneElement()} + > + {t('editor:hierarchy.lbl-addEntity')} + + )} onRenameNode(contextSelectedItem!)}>{t('editor:hierarchy.lbl-rename')} diff --git a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx index 390ef938e2e..d450354f5d9 100644 --- a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx @@ -37,7 +37,7 @@ import { import { entityExists } from '@etherealengine/engine/src/ecs/functions/EntityFunctions' import { EntityTreeComponent } from '@etherealengine/engine/src/ecs/functions/EntityTree' import { NameComponent } from '@etherealengine/engine/src/scene/components/NameComponent' -import { getMutableState, useHookstate } from '@etherealengine/hyperflux' +import { StateMethods, getMutableState, useHookstate } from '@etherealengine/hyperflux' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowRightIcon from '@mui/icons-material/ArrowRight' @@ -79,6 +79,7 @@ export type HierarchyTreeNodeData = { onChangeName: (node: HeirarchyTreeNodeType, name: string) => void onRenameSubmit: (node: HeirarchyTreeNodeType, name: string) => void onUpload: ReturnType + isAssetLoading: StateMethods } export type HierarchyTreeNodeProps = { @@ -176,6 +177,8 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { return (item: any, monitor): void => { if (parentNode && typeof parentNode !== 'string' && typeof beforeNode !== 'string') { if (item.files) { + data.isAssetLoading.set(true) + const dndItem: any = monitor.getItem() const entries = Array.from(dndItem.items).map((item: any) => item.webkitGetAsEntry()) @@ -184,13 +187,18 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { if (!assets) return for (const asset of assets) { addMediaNode(asset, parentNode, beforeNode) + .then(() => data.isAssetLoading.set(false)) + .catch(() => data.isAssetLoading.set(false)) } }) return } if (item.url) { + data.isAssetLoading.set(true) addMediaNode(item.url, parentNode, beforeNode) + .then(() => data.isAssetLoading.set(false)) + .catch(() => data.isAssetLoading.set(false)) return } diff --git a/packages/editor/src/components/hierarchy/styles.module.scss b/packages/editor/src/components/hierarchy/styles.module.scss index 3023c777c0a..56044b011df 100644 --- a/packages/editor/src/components/hierarchy/styles.module.scss +++ b/packages/editor/src/components/hierarchy/styles.module.scss @@ -162,3 +162,13 @@ .checkboxChecked { color: var(--iconButtonColor) !important; } + +.assetLoadingContainer { + width: auto; + margin: 5px auto; + line-height: 0.5; + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} \ No newline at end of file From 2727cf3396dd1c8f760fc35fa7af8d246a02f901 Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Fri, 10 Nov 2023 17:27:47 +0530 Subject: [PATCH 2/6] feat: show loading of assets beside entities --- .../components/hierarchy/HierarchyTreeNode.tsx | 8 ++++++++ .../src/components/hierarchy/styles.module.scss | 6 ++++++ .../engine/src/scene/components/ImageComponent.ts | 15 ++++++++++++++- .../engine/src/scene/components/ModelComponent.ts | 4 ++++ 4 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx index d450354f5d9..60f25254810 100644 --- a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx @@ -43,6 +43,8 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowRightIcon from '@mui/icons-material/ArrowRight' import { ErrorComponent } from '@etherealengine/engine/src/scene/components/ErrorComponent' +import { SceneAssetPendingTagComponent } from '@etherealengine/engine/src/scene/components/SceneAssetPendingTagComponent' +import CircularProgress from '@etherealengine/ui/src/primitives/mui/CircularProgress' import { ItemTypes, SupportedFileTypes } from '../../constants/AssetTypes' import { EntityNodeEditor } from '../../functions/ComponentEditors' import { EditorControlFunctions } from '../../functions/EditorControlFunctions' @@ -98,6 +100,11 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { const errors = node.entity ? useOptionalComponent(node.entity as Entity, ErrorComponent) : undefined const firstError = errors?.keys[0] + const sceneAssetLoading = useOptionalComponent(node.entity as Entity, SceneAssetPendingTagComponent) + + useEffect(() => { + console.log('debug1 scene asset loading was', sceneAssetLoading?.value, 'and entity', node.entity) + }, [node.entity, sceneAssetLoading]) const onClickToggle = useCallback( (e: MouseEvent) => { @@ -339,6 +346,7 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { )} {firstError && } + {sceneAssetLoading?.value && } diff --git a/packages/editor/src/components/hierarchy/styles.module.scss b/packages/editor/src/components/hierarchy/styles.module.scss index 56044b011df..669a02ff2fa 100644 --- a/packages/editor/src/components/hierarchy/styles.module.scss +++ b/packages/editor/src/components/hierarchy/styles.module.scss @@ -171,4 +171,10 @@ justify-content: center; align-items: center; gap: 1rem; +} + +.assetLoadingIndicator { + width: 1rem !important; + height: 1rem !important; + color: var(--textColor); } \ No newline at end of file diff --git a/packages/engine/src/scene/components/ImageComponent.ts b/packages/engine/src/scene/components/ImageComponent.ts index 4cc20e518ae..5740ce9ead3 100644 --- a/packages/engine/src/scene/components/ImageComponent.ts +++ b/packages/engine/src/scene/components/ImageComponent.ts @@ -46,13 +46,20 @@ import { useHookstate } from '@etherealengine/hyperflux' import config from '@etherealengine/common/src/config' import { AssetLoader } from '../../assets/classes/AssetLoader' import { AssetClass } from '../../assets/enum/AssetClass' -import { defineComponent, useComponent } from '../../ecs/functions/ComponentFunctions' +import { + defineComponent, + hasComponent, + removeComponent, + setComponent, + useComponent +} from '../../ecs/functions/ComponentFunctions' import { useEntityContext } from '../../ecs/functions/EntityFunctions' import { EngineRenderer } from '../../renderer/WebGLRendererSystem' import { StaticResourceType } from '../../schemas/media/static-resource.schema' import { ImageAlphaMode, ImageAlphaModeType, ImageProjection, ImageProjectionType } from '../classes/ImageUtils' import { addObjectToGroup, removeObjectFromGroup } from '../components/GroupComponent' import { addError, clearErrors } from '../functions/ErrorFunctions' +import { SceneAssetPendingTagComponent } from './SceneAssetPendingTagComponent' export const PLANE_GEO = new PlaneGeometry(1, 1, 1, 1) export const SPHERE_GEO = new SphereGeometry(1, 64, 32) @@ -163,6 +170,9 @@ export function ImageReactor() { return addError(entity, ImageComponent, `UNSUPPORTED_ASSET_CLASS`) } + if (!hasComponent(entity, SceneAssetPendingTagComponent)) { + setComponent(entity, SceneAssetPendingTagComponent) + } AssetLoader.loadAsync(image.source.value) .then((_texture) => { texture.set(_texture) @@ -170,6 +180,9 @@ export function ImageReactor() { .catch((e) => { addError(entity, ImageComponent, `LOADING_ERROR`, e.message) }) + .finally(() => { + removeComponent(entity, SceneAssetPendingTagComponent) + }) return () => { // TODO: abort load request, pending https://github.com/mrdoob/three.js/pull/23070 diff --git a/packages/engine/src/scene/components/ModelComponent.ts b/packages/engine/src/scene/components/ModelComponent.ts index a6fc83b5e76..2b5cc400d5a 100644 --- a/packages/engine/src/scene/components/ModelComponent.ts +++ b/packages/engine/src/scene/components/ModelComponent.ts @@ -160,6 +160,9 @@ function ModelReactor() { case 'fbx': case 'vrm': case 'usdz': + if (!hasComponent(entity, SceneAssetPendingTagComponent)) { + setComponent(entity, SceneAssetPendingTagComponent) + } AssetLoader.load( model.src, { @@ -176,6 +179,7 @@ function ModelReactor() { if (fileExtension == 'vrm') (model.asset as any).userData = { flipped: true } model.scene && removeObjectFromGroup(entity, model.scene) modelComponent.scene.set(loadedAsset.scene) + removeComponent(entity, SceneAssetPendingTagComponent) }, (onprogress) => { if (!hasComponent(entity, SceneAssetPendingTagComponent)) return From 31d3a494951a00d6b47f9835bce49f8398fb9fde Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Fri, 10 Nov 2023 17:49:37 +0530 Subject: [PATCH 3/6] Revert "show loading in Hierarchy Panel" This reverts commit 8c013a31a35740358ed3af1ec6548eddbb4aa660. --- packages/client-core/i18n/en/editor.json | 1 - .../hierarchy/HierarchyPanelContainer.tsx | 41 +++++++------------ .../hierarchy/HierarchyTreeNode.tsx | 10 +---- .../components/hierarchy/styles.module.scss | 12 +----- 4 files changed, 17 insertions(+), 47 deletions(-) diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json index 3697e37f429..8f4eec40b59 100755 --- a/packages/client-core/i18n/en/editor.json +++ b/packages/client-core/i18n/en/editor.json @@ -911,7 +911,6 @@ "lbl-collapseAll": "Collapse All", "lbl-explode": "Explode Objects", "lbl-addEntity": "Add Entity", - "lbl-addingEntity": "Adding Entity...", "isseus": "Issues:" }, "materialLibrary": { diff --git a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx index c01f7472d28..b1f35b8581b 100644 --- a/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyPanelContainer.tsx @@ -42,11 +42,9 @@ import { getMutableState, getState, useHookstate } from '@etherealengine/hyperfl import MenuItem from '@mui/material/MenuItem' import { PopoverPosition } from '@mui/material/Popover' -import Text from '@etherealengine/client-core/src/common/components/Text' import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine' import { entityExists } from '@etherealengine/engine/src/ecs/functions/EntityFunctions' import { UUIDComponent } from '@etherealengine/engine/src/scene/components/UUIDComponent' -import CircularProgress from '@etherealengine/ui/src/primitives/mui/CircularProgress' import { EditorCameraState } from '../../classes/EditorCameraState' import { ItemTypes, SupportedFileTypes } from '../../constants/AssetTypes' import { EditorControlFunctions } from '../../functions/EditorControlFunctions' @@ -94,7 +92,6 @@ export default function HierarchyPanel() { const [selectedNode, _setSelectedNode] = useState(null) const lockPropertiesPanel = useHookstate(getMutableState(EditorState).lockPropertiesPanel) const [searchHierarchy, setSearchHierarchy] = useState('') - const isAssetLoading = useHookstate(false) const activeScene = useHookstate(getMutableState(SceneState).activeScene) const entities = useHookstate(UUIDComponent.entitiesByUUIDState) @@ -407,8 +404,7 @@ export default function HierarchyPanel() { onMouseDown, onClick, onToggle, - onUpload, - isAssetLoading + onUpload }} itemKey={(index) => index} outerRef={treeContainerDropTarget} @@ -431,27 +427,20 @@ export default function HierarchyPanel() { {HierarchyList} )} - {isAssetLoading.value ? ( -
- {t('editor:hierarchy.lbl-addingEntity')} - -
- ) : ( - EditorControlFunctions.createObjectFromSceneElement()} - > - {t('editor:hierarchy.lbl-addEntity')} - - )} + EditorControlFunctions.createObjectFromSceneElement()} + > + {t('editor:hierarchy.lbl-addEntity')} + onRenameNode(contextSelectedItem!)}>{t('editor:hierarchy.lbl-rename')} diff --git a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx index 60f25254810..f720904f423 100644 --- a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx @@ -37,7 +37,7 @@ import { import { entityExists } from '@etherealengine/engine/src/ecs/functions/EntityFunctions' import { EntityTreeComponent } from '@etherealengine/engine/src/ecs/functions/EntityTree' import { NameComponent } from '@etherealengine/engine/src/scene/components/NameComponent' -import { StateMethods, getMutableState, useHookstate } from '@etherealengine/hyperflux' +import { getMutableState, useHookstate } from '@etherealengine/hyperflux' import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown' import ArrowRightIcon from '@mui/icons-material/ArrowRight' @@ -81,7 +81,6 @@ export type HierarchyTreeNodeData = { onChangeName: (node: HeirarchyTreeNodeType, name: string) => void onRenameSubmit: (node: HeirarchyTreeNodeType, name: string) => void onUpload: ReturnType - isAssetLoading: StateMethods } export type HierarchyTreeNodeProps = { @@ -184,8 +183,6 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { return (item: any, monitor): void => { if (parentNode && typeof parentNode !== 'string' && typeof beforeNode !== 'string') { if (item.files) { - data.isAssetLoading.set(true) - const dndItem: any = monitor.getItem() const entries = Array.from(dndItem.items).map((item: any) => item.webkitGetAsEntry()) @@ -194,18 +191,13 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { if (!assets) return for (const asset of assets) { addMediaNode(asset, parentNode, beforeNode) - .then(() => data.isAssetLoading.set(false)) - .catch(() => data.isAssetLoading.set(false)) } }) return } if (item.url) { - data.isAssetLoading.set(true) addMediaNode(item.url, parentNode, beforeNode) - .then(() => data.isAssetLoading.set(false)) - .catch(() => data.isAssetLoading.set(false)) return } diff --git a/packages/editor/src/components/hierarchy/styles.module.scss b/packages/editor/src/components/hierarchy/styles.module.scss index 669a02ff2fa..2f5d82a9b82 100644 --- a/packages/editor/src/components/hierarchy/styles.module.scss +++ b/packages/editor/src/components/hierarchy/styles.module.scss @@ -163,18 +163,8 @@ color: var(--iconButtonColor) !important; } -.assetLoadingContainer { - width: auto; - margin: 5px auto; - line-height: 0.5; - display: flex; - justify-content: center; - align-items: center; - gap: 1rem; -} - .assetLoadingIndicator { width: 1rem !important; height: 1rem !important; color: var(--textColor); -} \ No newline at end of file +} From 14d98931ed3a35dd0fbbbb81a51631d9e04a908a Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Fri, 10 Nov 2023 17:50:07 +0530 Subject: [PATCH 4/6] remove console.log --- .../editor/src/components/hierarchy/HierarchyTreeNode.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx index f720904f423..387b81bd4b2 100644 --- a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx @@ -101,10 +101,6 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { const firstError = errors?.keys[0] const sceneAssetLoading = useOptionalComponent(node.entity as Entity, SceneAssetPendingTagComponent) - useEffect(() => { - console.log('debug1 scene asset loading was', sceneAssetLoading?.value, 'and entity', node.entity) - }, [node.entity, sceneAssetLoading]) - const onClickToggle = useCallback( (e: MouseEvent) => { e.stopPropagation() From 34ded9648001a734adc984e894c6d4c59a860e2b Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Fri, 10 Nov 2023 18:07:22 +0530 Subject: [PATCH 5/6] show components for entity loading --- .../engine/src/scene/components/ColliderComponent.ts | 4 +++- .../src/scene/components/GroundPlaneComponent.ts | 4 +++- .../engine/src/scene/components/ImageComponent.ts | 12 ++---------- .../engine/src/scene/components/ModelComponent.ts | 4 +--- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/engine/src/scene/components/ColliderComponent.ts b/packages/engine/src/scene/components/ColliderComponent.ts index e5ba0fdc061..098f9d502e8 100644 --- a/packages/engine/src/scene/components/ColliderComponent.ts +++ b/packages/engine/src/scene/components/ColliderComponent.ts @@ -167,6 +167,8 @@ export const ColliderComponent = defineComponent({ const groupComponent = useOptionalComponent(entity, GroupComponent) useEffect(() => { + setComponent(entity, SceneAssetPendingTagComponent) + const isMeshCollider = [ShapeType.TriMesh, ShapeType.ConvexPolyhedron].includes(colliderComponent.shapeType.value) const physicsWorld = getState(PhysicsState).physicsWorld @@ -265,7 +267,7 @@ export const ColliderComponent = defineComponent({ rigidbody.scale.copy(transformComponent.scale.value) } - if (hasComponent(entity, SceneAssetPendingTagComponent)) removeComponent(entity, SceneAssetPendingTagComponent) + removeComponent(entity, SceneAssetPendingTagComponent) }, [isLoadedFromGLTF, colliderComponent, transformComponent, localTransformComponent, groupComponent?.length]) return null diff --git a/packages/engine/src/scene/components/GroundPlaneComponent.ts b/packages/engine/src/scene/components/GroundPlaneComponent.ts index b74bd914d62..ea320d1cfce 100644 --- a/packages/engine/src/scene/components/GroundPlaneComponent.ts +++ b/packages/engine/src/scene/components/GroundPlaneComponent.ts @@ -94,6 +94,8 @@ export const GroundPlaneComponent = defineComponent({ const component = useComponent(entity, GroundPlaneComponent) useEffect(() => { + setComponent(entity, SceneAssetPendingTagComponent) + const radius = 10000 const mesh = new Mesh( @@ -118,7 +120,7 @@ export const GroundPlaneComponent = defineComponent({ const physicsWorld = getState(PhysicsState).physicsWorld Physics.createRigidBody(entity, physicsWorld, rigidBodyDesc, [colliderDesc]) - if (hasComponent(entity, SceneAssetPendingTagComponent)) removeComponent(entity, SceneAssetPendingTagComponent) + removeComponent(entity, SceneAssetPendingTagComponent) return () => { if (!entityExists(entity)) return diff --git a/packages/engine/src/scene/components/ImageComponent.ts b/packages/engine/src/scene/components/ImageComponent.ts index 5740ce9ead3..3937d3ed37c 100644 --- a/packages/engine/src/scene/components/ImageComponent.ts +++ b/packages/engine/src/scene/components/ImageComponent.ts @@ -46,13 +46,7 @@ import { useHookstate } from '@etherealengine/hyperflux' import config from '@etherealengine/common/src/config' import { AssetLoader } from '../../assets/classes/AssetLoader' import { AssetClass } from '../../assets/enum/AssetClass' -import { - defineComponent, - hasComponent, - removeComponent, - setComponent, - useComponent -} from '../../ecs/functions/ComponentFunctions' +import { defineComponent, removeComponent, setComponent, useComponent } from '../../ecs/functions/ComponentFunctions' import { useEntityContext } from '../../ecs/functions/EntityFunctions' import { EngineRenderer } from '../../renderer/WebGLRendererSystem' import { StaticResourceType } from '../../schemas/media/static-resource.schema' @@ -170,9 +164,7 @@ export function ImageReactor() { return addError(entity, ImageComponent, `UNSUPPORTED_ASSET_CLASS`) } - if (!hasComponent(entity, SceneAssetPendingTagComponent)) { - setComponent(entity, SceneAssetPendingTagComponent) - } + setComponent(entity, SceneAssetPendingTagComponent) AssetLoader.loadAsync(image.source.value) .then((_texture) => { texture.set(_texture) diff --git a/packages/engine/src/scene/components/ModelComponent.ts b/packages/engine/src/scene/components/ModelComponent.ts index 2b5cc400d5a..41a238d02db 100644 --- a/packages/engine/src/scene/components/ModelComponent.ts +++ b/packages/engine/src/scene/components/ModelComponent.ts @@ -160,9 +160,7 @@ function ModelReactor() { case 'fbx': case 'vrm': case 'usdz': - if (!hasComponent(entity, SceneAssetPendingTagComponent)) { - setComponent(entity, SceneAssetPendingTagComponent) - } + setComponent(entity, SceneAssetPendingTagComponent) AssetLoader.load( model.src, { From e3909f1ce447e609376370c15b00c176fe56e6ce Mon Sep 17 00:00:00 2001 From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com> Date: Fri, 10 Nov 2023 19:22:30 +0530 Subject: [PATCH 6/6] fix: show error message correctly --- packages/client-core/i18n/en/editor.json | 2 +- .../hierarchy/HierarchyTreeNode.tsx | 4 +- .../components/hierarchy/NodeIssuesIcon.tsx | 80 ++++++------------- .../components/hierarchy/styles.module.scss | 26 +++++- 4 files changed, 50 insertions(+), 62 deletions(-) diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json index 8f4eec40b59..1611d6ff335 100755 --- a/packages/client-core/i18n/en/editor.json +++ b/packages/client-core/i18n/en/editor.json @@ -911,7 +911,7 @@ "lbl-collapseAll": "Collapse All", "lbl-explode": "Explode Objects", "lbl-addEntity": "Add Entity", - "isseus": "Issues:" + "issues": "Issues" }, "materialLibrary": { "lbl": "Material Library", diff --git a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx index 387b81bd4b2..ba3aa372471 100644 --- a/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx +++ b/packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx @@ -98,7 +98,7 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { const nodeName = useComponent(node.entity, NameComponent).value const errors = node.entity ? useOptionalComponent(node.entity as Entity, ErrorComponent) : undefined - const firstError = errors?.keys[0] + const sceneAssetLoading = useOptionalComponent(node.entity as Entity, SceneAssetPendingTagComponent) const onClickToggle = useCallback( @@ -333,7 +333,7 @@ export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => { )} - {firstError && } + {errors?.value && } {sceneAssetLoading?.value && } diff --git a/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx b/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx index b5379f3da4e..0f5dae67769 100755 --- a/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx +++ b/packages/editor/src/components/hierarchy/NodeIssuesIcon.tsx @@ -23,81 +23,49 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20 Ethereal Engine. All Rights Reserved. */ -import React, { useCallback, useMemo } from 'react' +import React from 'react' import { useTranslation } from 'react-i18next' import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline' +import { ErrorComponentType } from '@etherealengine/engine/src/scene/components/ErrorComponent' import Tooltip from '../layout/Tooltip' +import styles from './styles.module.scss' -const issuesTooltipContainerStyles = { - display: 'inline-block', - pointerEvents: 'none', - backgroundColor: 'rgba(21, 23, 27, 0.9)', - borderRadius: '3px', - padding: '8px', - maxWidth: '320px', - overflow: 'hidden', - overflowWrap: 'break-word', - userSelect: 'none' -} - -const issueIconStyles = (color): React.CSSProperties => ({ +const issueIconStyles = { width: '16px', height: 'auto', fontSize: 'inherit', - color: color -}) + color: '#ff0000' +} -export function NodeIssuesIcon({ node }) { - const theme = useMemo( - () => ({ - yellow: '#ffcc00', - red: '#ff0000' - // Add other theme colors here - }), - [] - ) +export function NodeIssuesIcon({ errors }: { errors: ErrorComponentType }) { const { t } = useTranslation() - const severityToColor = useMemo( - () => ({ - warning: theme.yellow, - error: theme.red - }), - [theme] - ) + const renderTooltipInfo = () => { + let errorDetails: string[] = [] + + Object.entries(errors).forEach(([componentName, errorDetail]) => { + Object.entries(errorDetail).forEach(([errorKey, errorValue]) => { + errorDetails.push( + errorValue ? `${componentName} (${errorKey}): ${errorValue}` : `${componentName}: ${errorKey}` + ) + }) + }) - const renderInfo = useCallback(() => { return ( -
-
{t('editor:hierarchy.isseus')}
-
    - {node.map((issue, i) => { - return ( -
  • - {' '} - {issue.message} -
    • - ) - })} -
+
+ {t('editor:hierarchy.issues')} + {errorDetails.map((errorDetail) => ( +
{errorDetail}
+ ))}
) - }, [node, severityToColor]) - - let maxSeverity = 'warning' - - for (const issue of node) { - if (issue.severity === 'error') { - maxSeverity = 'error' - break - } } return ( - - + + ) } diff --git a/packages/editor/src/components/hierarchy/styles.module.scss b/packages/editor/src/components/hierarchy/styles.module.scss index 2f5d82a9b82..debf610ee99 100644 --- a/packages/editor/src/components/hierarchy/styles.module.scss +++ b/packages/editor/src/components/hierarchy/styles.module.scss @@ -82,7 +82,7 @@ padding: 2px 4px; outline: none; border-radius: 3px; - margin:0; + margin: 0; } } @@ -125,8 +125,8 @@ border: none; background: transparent; color: var(--textColor); - margin:0; - + margin: 0; + &:hover { opacity: 0.8; color: var(--textColor); @@ -168,3 +168,23 @@ height: 1rem !important; color: var(--textColor); } + +.issuesTooltipContainer { + display: inline-block; + pointer-events: none; + background-color: rgb(21 23 27 / 90%); + border-radius: 3px; + padding: 8px; + max-width: 320px; + overflow: hidden; + overflow-wrap: break-word; + user-select: none; + + .issuesTooltipHeading { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1rem; + font-weight: bolder; + } +}