fix(composer): Fix to restore drag-&-drop placement after refresh (#361)

Co-authored-by: Emily Dodds <dodemily@amazon.com>
awslabs · Nov 14, 2022 · bd47478 · bd47478
1 parent da574e8
commit bd47478
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 47 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -154,10 +154,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "lines": 77.0,
-        "statements": 76.0,
-        "functions": 76.0,
-        "branches": 63.0,
+        "lines": 77.48,
+        "statements": 76.58,
+        "functions": 76.76,
+        "branches": 63.26,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/components/Tree/tree.scss b/packages/scene-composer/src/components/Tree/tree.scss
@@ -51,10 +51,6 @@ $active-color: #ec7211;
       padding-left: $indent * 2;
       padding-top: 0;
 
-      .tm-draggable[draggable=true]::before {
-        margin-top: 1.6rem;
-    }
-
       .tm-tree-item-inner {
         cursor: pointer;
         margin-left: -2rem;

diff --git a/...s/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.tsx b/...s/scene-composer/src/components/panels/SceneHierarchyPanel/SceneHierarchyDataProvider.tsx
@@ -62,14 +62,12 @@ 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;
@@ -105,38 +103,21 @@ const sortNodes = (a, b) => {
 const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selectionMode, children }) => {
   useLifecycleLogging('SceneHierarchyDataProvider');
   const sceneComposerId = useSceneComposerId();
+  const { document, removeSceneNode } = useStore(sceneComposerId)((state) => state);
   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 { nodeMap } = document;
   const { nodeErrorMap: validationErrors } = useNodeErrorState(sceneComposerId);
 
-  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);
-
-  const rootNodes: Readonly<ISceneNodeInternal>[] = !isEmpty(searchTerms)
-    ? Object.values(nodeMap)
-    : unfilteredRootNodeRefs
-        .map(getSceneNodeByRef)
-        .filter((node) => node !== undefined && searchMatcher(node, searchTerms))
-        .map((item) => item as ISceneNodeInternal)
-        .sort(sortNodes);
+  const [searchTerms, setSearchTerms] = useState('');
+  const [filteredNodeMap, setFilteredNodeMap] = useState([] as ISceneNodeInternal[]);
 
   useEffect(() => {
     if (searchTerms === '') {
@@ -147,6 +128,15 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
     }
   }, [nodeMap, searchTerms]);
 
+  const rootNodes: Readonly<ISceneNodeInternal>[] =
+    filteredNodeMap.length > 0
+      ? filteredNodeMap
+      : rootNodeRefs
+          .map(getSceneNodeByRef)
+          .filter((node) => node !== undefined && searchMatcher(node, searchTerms))
+          .map((item) => item as ISceneNodeInternal)
+          .sort(sortNodes);
+
   const getChildNodes = useCallback(
     async (parentRef?: string) => {
       const results = Object.values(nodeMap)
@@ -193,37 +183,34 @@ const SceneHierarchyDataProvider: FC<SceneHierarchyDataProviderProps> = ({ selec
     (objectRef: string, newParentRef?: string) => {
       updateSceneNodeInternal(objectRef, { parentRef: newParentRef });
     },
-    [sceneComposerId],
+    [updateSceneNodeInternal, getSceneNodeByRef, nodeMap],
   );
 
   const show = useCallback(
     (objectRef: string) => {
-      const getObject3DBySceneNodeRef = useStore(sceneComposerId).getState().getObject3DBySceneNodeRef;
       const object = getObject3DBySceneNodeRef(objectRef);
       if (object) {
         object.visible = true;
       }
     },
-    [sceneComposerId],
+    [getObject3DBySceneNodeRef],
   );
 
   const hide = useCallback(
     (objectRef: string) => {
-      const getObject3DBySceneNodeRef = useStore(sceneComposerId).getState().getObject3DBySceneNodeRef;
       const object = getObject3DBySceneNodeRef(objectRef);
       if (object) {
         object.visible = false;
       }
     },
-    [sceneComposerId],
+    [getObject3DBySceneNodeRef],
   );
 
   const remove = useCallback(
     (objectRef: string) => {
-      const removeSceneNode = useStore(sceneComposerId).getState().removeSceneNode;
       removeSceneNode(objectRef);
     },
-    [sceneComposerId],
+    [removeSceneNode],
   );
 
   return (

diff --git a/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx b/...nents/panels/SceneHierarchyPanel/components/SceneHierarchyTree/SceneHierarchyTreeItem.tsx
@@ -23,6 +23,7 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
   name: labelText,
   componentTypes,
   enableDragAndDrop,
+  childRefs = [],
   expanded: defaultExpanded = true,
 }: SceneHierarchyTreeItemProps) => {
   const [expanded, setExpanded] = useState(defaultExpanded);
@@ -49,6 +50,7 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
 
   const [{ variation: subModelSelectionEnabled }] = useFeature(COMPOSER_FEATURES[COMPOSER_FEATURES.SubModelSelection]);
   const showSubModel = subModelSelectionEnabled === 'T1' && isValidModelRef && !!model && !isViewing();
+  const hasChildRefs = childRefs.length > 0;
 
   const onExpandNode = useCallback((expanded) => {
     setExpanded(expanded);
@@ -74,14 +76,13 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
     },
     [key],
   );
-
   return (
     <EnhancedTreeItem
       key={key}
       labelText={<SceneNodeLabel objectRef={key} labelText={labelText} componentTypes={componentTypes} />}
       onExpand={onExpandNode}
       expanded={expanded}
-      expandable={childNodes.length > 0}
+      expandable={childRefs.length > 0}
       selected={selected === key}
       selectionMode={selectionMode}
       onSelected={isViewing() ? onActivated : onToggle}
@@ -94,12 +95,15 @@ const SceneHierarchyTreeItem: FC<SceneHierarchyTreeItemProps> = ({
     >
       {expanded && (
         <EnhancedTree droppable={enableDragAndDrop} acceptDrop={AcceptableDropTypes} onDropped={dropHandler}>
-          {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 />}
+          {hasChildRefs &&
+            childNodes.map((node, index) => (
+              <React.Fragment key={index}>
+                <SceneHierarchyTreeItem key={node.objectRef} enableDragAndDrop={enableDragAndDrop} {...node} />
+              </React.Fragment>
+            ))}
+          {showSubModel && hasChildRefs && (
+            <SubModelTree parentRef={key} expanded={false} object3D={model!} selectable />
+          )}
         </EnhancedTree>
       )}
     </EnhancedTreeItem>

diff --git a/packages/scene-composer/src/enhancers/draggable.scss b/packages/scene-composer/src/enhancers/draggable.scss
@@ -5,6 +5,6 @@
     content: url("data:image/svg+xml,%3Csvg width='4' height='19' viewBox='0 0 4 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='0.5' y1='0.5' x2='0.499999' y2='18.5' stroke='%23879596'/%3E%3Cline x1='2.96094' y1='0.5' x2='2.96094' y2='18.5' stroke='%23879596'/%3E%3C/svg%3E");
     position: absolute;
     left: 0;
-    margin: 1.9rem 1rem 1rem 0.75rem;
+    margin: 1.6rem 1rem 1rem 0.75rem;
   }
 }