Skip to content

Commit

Permalink
fix(composer): Restores drag-&-drop functionality in Scene Hierarchy (#…
Browse files Browse the repository at this point in the history 
…359)

Co-authored-by: Emily Dodds <dodemily@amazon.com>
  • Loading branch information
@mumanity
mumanity and mumanity committed Nov 11, 2022
1 parent 446a4ca commit b220501
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 43 deletions.
8 changes: 4 additions & 4 deletions packages/scene-composer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,10 +154,10 @@
"jest": {
"coverageThreshold": {
"global": {
"lines": 77.51,
"statements": 76.64,
"functions": 77.1,
"branches": 63.32,
"lines": 77.0,
"statements": 76.0,
"functions": 76.0,
"branches": 63.0,
"branchesTrue": 100
}
}
Expand Down
57 changes: 46 additions & 11 deletions ...s/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { FC, createContext, useContext, useCallback, useState } from 'react';
import React, { FC, createContext, useContext, useCallback, useState, useEffect } from 'react';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { isEmpty } from 'lodash';
Expand All @@ -18,7 +18,7 @@ interface ISceneHierarchyContext {
searchTerms: string;
selected?: string;
selectionMode: SelectionMode;
getChildNodes(parentRef: string): ISceneHierarchyNode[];
getChildNodes(parentRef: string): Promise<ISceneHierarchyNode[]>;
search(terms: string): void;
select(objectRef: string): void;
show(objectRef: string): void;
Expand Down Expand Up @@ -50,7 +50,9 @@ export const Context = createContext<ISceneHierarchyContext>({
unselect: () => {},
remove: () => {},
getObject3DBySceneNodeRef: () => {},
getChildNodes: () => [],
async getChildNodes() {
return Promise.resolve([] as ISceneHierarchyNode[]);
},
isViewing: () => true,
});

Expand All @@ -60,17 +62,36 @@ export const useSceneHierarchyData = () => {

const toSceneHeirarchyNode = (
{ ref, name, parentRef, childRefs = [], components }: ISceneNodeInternal | Readonly<ISceneNodeInternal>,
canExpand: boolean,
hideChild?: boolean,
) => {
return {
objectRef: ref,
name,
componentTypes: components.map((c) => c.type),
hasChildren: canExpand,
childRefs: hideChild ? [] : childRefs,
parentRef,
} as ISceneHierarchyNode;
};

export const useChildNodes = (parentRef: string) => {
const { getChildNodes } = useSceneHierarchyData();
const [loading, setLoading] = useState(false);
const [childNodes, setChildNodes] = useState([] as ISceneHierarchyNode[]);

useEffect(() => {
(async () => {
setLoading(true);
const results = await getChildNodes(parentRef);
setChildNodes(results);
setLoading(false);
})();
}, [getChildNodes]);

return [childNodes, loading] as [ISceneHierarchyNode[], boolean];
};

const searchMatcher = (node: ISceneNodeInternal, terms: string) => {
return node.name.toLowerCase().includes(terms.toLowerCase()); // Basic search matching algorithm;
};
Expand All @@ -84,22 +105,27 @@ const sortNodes = (a, b) => {
const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selectionMode, children }) => {
useLifecycleLogging('SceneHierarchyDataProvider');
const sceneComposerId = useSceneComposerId();
const { updateSceneNodeInternal, isEditing } = useStore(sceneComposerId)((state) => state);
const selectedSceneNodeRef = useStore(sceneComposerId)((state) => state.selectedSceneNodeRef);
const getSceneNodeByRef = useStore(sceneComposerId)((state) => state.getSceneNodeByRef);
const getObject3DBySceneNodeRef = useStore(sceneComposerId)((state) => state.getObject3DBySceneNodeRef);
const isViewing = useStore(sceneComposerId)((state) => state.isViewing);

const { nodeErrorMap: validationErrors } = useNodeErrorState(sceneComposerId);

const unfilteredNodeMap = useStore(sceneComposerId)((state) => state.document.nodeMap);

const [searchTerms, setSearchTerms] = useState('');
const unfilteredNodeMap = useStore(sceneComposerId)((state) => state.document.nodeMap);
const [, setFilteredNodeMap] = useState([] as ISceneNodeInternal[]);

const nodeMap =
searchTerms === ''
? unfilteredNodeMap
: Object.values(unfilteredNodeMap).filter((node) => searchMatcher(node, searchTerms));

const rootNodeRefs = Object.values(nodeMap)
.filter((item) => !item.parentRef && (!isEnvironmentNode(item) || isEditing()))
.map((item) => item.ref);

const unfilteredRootNodeRefs = Object.values(unfilteredNodeMap)
.filter((item) => !item.parentRef && (!isEnvironmentNode(item) || !isViewing()))
.map((item) => item.ref);
Expand All @@ -112,17 +138,27 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
.map((item) => item as ISceneNodeInternal)
.sort(sortNodes);

useEffect(() => {
if (searchTerms === '') {
setFilteredNodeMap([]);
} else {
const matchingNodes = Object.values(nodeMap).filter((node) => searchMatcher(node, searchTerms));
setFilteredNodeMap(matchingNodes);
}
}, [nodeMap, searchTerms]);

const getChildNodes = useCallback(
(parentRef?: string) => {
const nodeMap = useStore(sceneComposerId).getState().document.nodeMap;
async (parentRef?: string) => {
const results = Object.values(nodeMap)
.filter((node) => node.parentRef === parentRef)
.map((node) => toSceneHeirarchyNode(node))
.map((item) =>
toSceneHeirarchyNode(item, Object.values(nodeMap).filter((n) => n.parentRef === item.ref).length > 0),
)
.sort(sortNodes);

return results;
return Promise.resolve(results);
},
[sceneComposerId],
[getSceneNodeByRef, sceneComposerId, nodeMap, rootNodeRefs],
);

const activate = useCallback(
Expand Down Expand Up @@ -155,7 +191,6 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec

const move = useCallback(
(objectRef: string, newParentRef?: string) => {
const updateSceneNodeInternal = useStore(sceneComposerId).getState().updateSceneNodeInternal;
updateSceneNodeInternal(objectRef, { parentRef: newParentRef });
},
[sceneComposerId],
Expand Down
18 changes: 8 additions & 10 deletions ...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from 'react';
import { Object3D } from 'three';

import ISceneHierarchyNode from '../../model/ISceneHierarchyNode';
import { useSceneHierarchyData } from '../../SceneHierarchyDataProvider';
import { useChildNodes, useSceneHierarchyData } from '../../SceneHierarchyDataProvider';
import { DropHandler } from '../../../../../hooks/useDropMonitor';
import SubModelTree from '../SubModelTree';
import { COMPOSER_FEATURES, KnownComponentType } from '../../../../../interfaces';
Expand All @@ -23,7 +23,6 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
name: labelText,
componentTypes,
enableDragAndDrop,
childRefs = [],
expanded: defaultExpanded = true,
}: SceneHierarchyTreeItemProps) => {
const [expanded, setExpanded] = useState(defaultExpanded);
Expand All @@ -41,7 +40,7 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
} = useSceneHierarchyData();

const model = getObject3DBySceneNodeRef(key) as Object3D | undefined;

const [childNodes] = useChildNodes(key);
const isValidModelRef = componentTypes?.find(
(type) =>
type === KnownComponentType.ModelRef &&
Expand Down Expand Up @@ -82,7 +81,7 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
labelText={<SceneNodeLabel objectRef={key} labelText={labelText} componentTypes={componentTypes} />}
onExpand={onExpandNode}
expanded={expanded}
expandable={childRefs.length > 0}
expandable={childNodes.length > 0}
selected={selected === key}
selectionMode={selectionMode}
onSelected={isViewing() ? onActivated : onToggle}
Expand All @@ -95,12 +94,11 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
>
{expanded && (
<EnhancedTree droppable={enableDragAndDrop} acceptDrop={AcceptableDropTypes} onDropped={dropHandler}>
{childRefs.length > 0 &&
getChildNodes(key).map((node, index) => (
<React.Fragment key={index}>
<SceneHierarchyTreeItem key={node.objectRef} enableDragAndDrop={enableDragAndDrop} {...node} />
</React.Fragment>
))}
{childNodes.map((node, index) => (
<React.Fragment key={index}>
<SceneHierarchyTreeItem key={node.objectRef} enableDragAndDrop={enableDragAndDrop} {...node} />
</React.Fragment>
))}
{showSubModel && <SubModelTree parentRef={key} expanded={false} object3D={model!} selectable />}
</EnhancedTree>
)}
Expand Down
10 changes: 5 additions & 5 deletions ...eneHierarchyPanel/components/SceneHierarchyTree/__tests__/SceneHierarchyTreeItem.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useCallback } from 'react';
import { render } from '@testing-library/react';

import { useSceneHierarchyData } from '../../../SceneHierarchyDataProvider';
import { useSceneHierarchyData, useChildNodes } from '../../../SceneHierarchyDataProvider';
import SceneHierarchyTreeItem from '../SceneHierarchyTreeItem';
import { KnownComponentType } from '../../../../../../interfaces';

Expand All @@ -26,7 +26,7 @@ describe('SceneHierarchyTreeItem', () => {
const activate = jest.fn();
const move = jest.fn();
const getObject3DBySceneNodeRef = jest.fn();
const getChildNodes = jest.fn();
const remove = jest.fn();
const isViewing = jest.fn();
let callbacks: any[] = [];

Expand All @@ -42,11 +42,13 @@ describe('SceneHierarchyTreeItem', () => {
move,
getObject3DBySceneNodeRef,
selectionMode: 'single',
getChildNodes,
remove,
isViewing,
};
});

(useChildNodes as unknown as jest.Mock).mockImplementation(() => [[]]);

(useCallback as jest.Mock).mockImplementation((cb) => callbacks.push(cb));
});

Expand Down Expand Up @@ -77,8 +79,6 @@ describe('SceneHierarchyTreeItem', () => {
});

it('should bubble up when expanded', () => {
getChildNodes.mockImplementationOnce((key) => [{ name: key }]);

const { container } = render(
<SceneHierarchyTreeItem
objectRef='1'
Expand Down
14 changes: 1 addition & 13 deletions ...omponents/SceneHierarchyTree/__tests__/__snapshots__/SceneHierarchyTreeItem.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,7 @@ exports[`SceneHierarchyTreeItem should bubble up when expanded 1`] = `
>
<enhancedtree
acceptdrop="AcceptableDropTypes"
>
<enhancedtreeitem
acceptdrop="AcceptableDropTypes"
data="[object Object]"
datatype="default"
labeltext="[object Object]"
selectionmode="single"
>
<enhancedtree
acceptdrop="AcceptableDropTypes"
/>
</enhancedtreeitem>
</enhancedtree>
/>
</enhancedtreeitem>
</div>
`;
Expand Down

0 comments on commit b220501

Please sign in to comment.