diff --git a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx index 62429c96e..9823a0808 100644 --- a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx +++ b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx @@ -46,6 +46,7 @@ const SceneHierarchyTreeItem: FC = ({ const { getSceneNodeByRef } = useSceneDocument(sceneComposerId); const node = getSceneNodeByRef(key); const isSubModel = !!findComponentByType(node, KnownComponentType.SubModelRef); + const componentRef = findComponentByType(node, KnownComponentType.ModelRef)?.ref; const { searchTerms } = useSceneHierarchyData(); const isSearching = searchTerms !== ''; @@ -101,7 +102,7 @@ const SceneHierarchyTreeItem: FC = ({ ))} {showSubModel && !isSearching && ( - + )} )} diff --git a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/SubModelTree.spec.tsx b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/SubModelTree.spec.tsx index 4a0d1ac71..86ed3ae40 100644 --- a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/SubModelTree.spec.tsx +++ b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/SubModelTree.spec.tsx @@ -43,6 +43,8 @@ const defaultObject = { node(3, 'Node 3', [], false), node(4), node(5, 'Node 5', [node(6, 'Child 1'), node(7, 'Child 2'), node(8, 'Child 3')]), + node(9, '', [node(10, 'Child 4'), node(11, 'Child 5'), node(12, 'Child 6')]), + node(13, 'Composer Added', [node(14, 'Child 7'), node(15, 'Child 8'), node(16, 'Child 9')], false), ] as unknown as Object3D[], } as unknown as Object3D, parentRef: '112', @@ -61,7 +63,7 @@ describe('SubModelTree', () => { const objectNullName = { ...defaultObject, - name: null, + name: undefined, }; const { container } = render(); diff --git a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/__snapshots__/SubModelTree.spec.tsx.snap b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/__snapshots__/SubModelTree.spec.tsx.snap index 2c4a2bdac..c7501c628 100644 --- a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/__snapshots__/SubModelTree.spec.tsx.snap +++ b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/__tests__/__snapshots__/SubModelTree.spec.tsx.snap @@ -167,6 +167,96 @@ exports[`SubModelTree should not render a SubModel Tree if isOriginal flag is fa +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • @@ -299,6 +389,96 @@ exports[`SubModelTree should not render a SubModel Tree if name is null 1`] = ` +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • @@ -431,6 +611,96 @@ exports[`SubModelTree should render appropriately based on the object 1`] = ` +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • +
  • + +
  • diff --git a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/index.tsx b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/index.tsx index 905681e68..ce44a9213 100644 --- a/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/index.tsx +++ b/packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SubModelTree/index.tsx @@ -15,15 +15,29 @@ import TreeItemLabel from './SubModelTreeItemLabel'; export interface SubModelTreeProps { parentRef: string; object3D: Object3D; + componentRef: string; selected?: boolean; visible?: boolean; selectable?: boolean; expanded?: boolean; } +const reduceNamed = (obj: Object3D, acc: Object3D[] = []) => { + obj.children.forEach((child) => { + if (child.name) { + acc.push(child); + } else { + reduceNamed(child, acc); + } + }); + + return acc; +}; + const SubModelTree: FC = ({ parentRef, object3D, + componentRef, expanded: defaultExpanded = true, visible: defaultVisible = true, }) => { @@ -34,11 +48,12 @@ const SubModelTree: FC = ({ const [visible, setVisible] = useState(defaultVisible); const hoverColor = new Color(0x00ff00); + console.log('ModelRef', componentRef, object3D.userData); - const skipNode = !object3D.name || !object3D.userData?.isOriginal; + const skipNode = !object3D.name || !object3D.userData?.isOriginal || object3D.userData?.componentRef !== componentRef; - const { name, children: allNodes } = object3D; - const nodes = allNodes.filter((n) => !!n.name); // Only nodes with Names will appear as viable submodels + const { name } = object3D; + const namedChildren = reduceNamed(object3D); // allChildren.filter((n) => !!n.name); // Only nodes with Names will appear as viable submodels const [transform, restore] = useMaterialEffect( /* istanbul ignore next */ (o) => { @@ -112,7 +127,17 @@ const SubModelTree: FC = ({ if (skipNode) { return ( - <>{nodes[0] && } + <> + {namedChildren.map((node) => ( + + ))} + ); } @@ -130,15 +155,15 @@ const SubModelTree: FC = ({ {name} } - expandable={nodes.length > 0} + expandable={namedChildren.length > 0} expanded={expanded} onExpand={setExpanded} selectable={false} > - {nodes.length > 0 && ( + {namedChildren.length > 0 && ( - {nodes.map((c) => ( - + {namedChildren.map((c) => ( + ))} )} diff --git a/packages/scene-composer/src/components/three-fiber/ModelRefComponent/GLTFModelComponent.tsx b/packages/scene-composer/src/components/three-fiber/ModelRefComponent/GLTFModelComponent.tsx index 44805d409..05c436b53 100644 --- a/packages/scene-composer/src/components/three-fiber/ModelRefComponent/GLTFModelComponent.tsx +++ b/packages/scene-composer/src/components/three-fiber/ModelRefComponent/GLTFModelComponent.tsx @@ -30,6 +30,7 @@ function processObject(component: IModelRefComponentInternal, obj: THREE.Object3 acceleratedRaycasting(obj); enableShadow(component, obj, options.maxAnisotropy); obj.userData.isOriginal = true; // This is important to the SubModelSelection tool, it's used to filter out geomtry we've added with our + obj.userData.componentRef = component.ref; } interface GLTFModelProps {