fix(composer): Auto expand hierarchy when selecting node on scene (#452)

* fix(composer): Auto expand hierarchy when selecting node on scene

packages/scene-composer/package.json

@@ -159,10 +159,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77.35,
-        "statements": 76.47,
-        "functions": 76.7,
-        "branches": 62.98,
+        "lines": 77.42,
+        "statements": 76.54,
+        "functions": 76.8,
+        "branches": 63.03,
         "branchesTrue": 100
       }
     }

packages/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { useStore } from '../../../store';
+
+import SceneHierarchyDataProvider, { Context } from './SceneHierarchyDataProvider';
+
+describe('SceneHierarchyDataProvider', () => {
+  const getSceneNodeByRef = jest.fn();
+  const baseState: any = {
+    getSceneNodeByRef: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it(`should return correct path from selected node to root`, () => {
+    useStore('default').setState(baseState);
+    baseState.getSceneNodeByRef.mockReturnValueOnce({ ref: 'node-1' });
+    baseState.getSceneNodeByRef.mockReturnValueOnce({ ref: 'sub-parent-1' });
+    baseState.getSceneNodeByRef.mockReturnValueOnce({ ref: 'parent-1' });
+
+    const expectedResult = ['sub-parent-1', 'parent-1'];
+
+    const { getByText } = render(
+      <SceneHierarchyDataProvider selectionMode='single'>
+        <Context.Consumer>
+          {(value) => <span>Path to root: {value.pathFromSelectedToRoot?.toString()}</span>}
+        </Context.Consumer>
+      </SceneHierarchyDataProvider>,
+    );
+
+    expect(baseState.getSceneNodeByRef).toBeCalledTimes(4);
+    expect(getByText('Path to root: ' + expectedResult.toString())).toBeTruthy();
+  });
+});

packages/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.tsx

@@ -19,6 +19,7 @@ interface ISceneHierarchyContext {
   rootNodes: ISceneHierarchyNode[];
   searchTerms: string;
   selected?: string;
+  pathFromSelectedToRoot?: string[];
   selectionMode: SelectionMode;
   getChildNodes(parentRef: string): Promise<ISceneHierarchyNode[]>;
   search(terms: string): void;
@@ -137,6 +138,19 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
     }
   }, [nodeMap, searchTerms]);
 
+  const [pathToRoot, setpathToRoot] = useState<string[]>([]);
+  useEffect(() => {
+    let currentNode = getSceneNodeByRef(selectedSceneNodeRef);
+    const parentNodes: string[] = [];
+    while (currentNode) {
+      currentNode = getSceneNodeByRef(currentNode.parentRef);
+      if (currentNode && parentNodes.indexOf(currentNode.ref) === -1) {
+        parentNodes.push(currentNode.ref);
+      }
+    }
+    setpathToRoot(parentNodes);
+  }, [selectedSceneNodeRef]);
+
   const rootNodes: Readonly<ISceneNodeInternal>[] =
     filteredNodeMap.length > 0
       ? filteredNodeMap
@@ -266,6 +280,7 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
           validationErrors,
           activate,
           selected: selectedSceneNodeRef,
+          pathFromSelectedToRoot: pathToRoot,
           move,
           searchTerms,
           search,

packages/scene-composer/src/components/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useContext, useMemo, useState } from 'react';
+import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Object3D } from 'three';
 
 import ISceneHierarchyNode from '../../model/ISceneHierarchyNode';
@@ -17,20 +17,27 @@ import { AcceptableDropTypes, EnhancedTree, EnhancedTreeItem } from './constants
 
 interface SceneHierarchyTreeItemProps extends ISceneHierarchyNode {
   enableDragAndDrop?: boolean;
-  expanded?: boolean;
 }
 
 const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
   objectRef: key,
   name: labelText,
   componentTypes,
   enableDragAndDrop,
-  expanded: defaultExpanded = false,
 }: SceneHierarchyTreeItemProps) => {
-  const [expanded, setExpanded] = useState(defaultExpanded);
+  const [expanded, setExpanded] = useState(false);
 
-  const { selected, select, unselect, activate, move, selectionMode, getObject3DBySceneNodeRef, isViewing } =
-    useSceneHierarchyData();
+  const {
+    selected,
+    pathFromSelectedToRoot,
+    select,
+    unselect,
+    activate,
+    move,
+    selectionMode,
+    getObject3DBySceneNodeRef,
+    isViewing,
+  } = useSceneHierarchyData();
 
   const model = getObject3DBySceneNodeRef(key) as Object3D | undefined;
   const [childNodes] = useChildNodes(key);
@@ -49,6 +56,16 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
   const { searchTerms } = useSceneHierarchyData();
   const isSearching = searchTerms !== '';
 
+  useEffect(() => {
+    /**
+     * Use default state only if node is not expanded
+     * If node is already expanded, then skip this
+     *  */
+    if (!expanded) {
+      setExpanded(!!pathFromSelectedToRoot?.includes(key));
+    }
+  }, [pathFromSelectedToRoot]);
+
   const onExpandNode = useCallback((expanded) => {
     setExpanded(expanded);
   }, []);