Enable orphaned nodes editing

example/missing-n-duplicate.scene

@@ -0,0 +1,37 @@
+{
+  "entities": {
+    "New_Node1": {
+      "parent": "Pillar1x3RndShape",
+      "index": 0
+    },
+    "New_Node2": {
+      "parent": "Pillar1x3RndShape",
+      "index": 1
+    },
+    "New_Node3": {
+      "parent": "Pillar1x3Rnd1",
+      "index": 0
+    },
+    "New_Node4": {
+      "parent": "New_Node3",
+      "index": 0
+    },
+    "New_Node5": {
+      "parent": "New_Node4",
+      "index": 0
+    },
+    "New_Node6": {
+      "parent": "New_Node4",
+      "index": 0
+    },
+    "New_Node7": {
+      "parent": "New_Node6",
+      "index": 0
+    },
+    "New_Node8": {
+      "parent": "New_Node6",
+      "index": 0
+    }
+  },
+  "inherits": "./ArchitectureKit/Pillar1x3Rnd.gltf"
+}

example/missing-node2.scene

@@ -0,0 +1,25 @@
+{
+  "entities": {
+    "New_Node1": {
+      "parent": "Wall2x3Win1x0_75HorzShape",
+      "index": 0
+    },
+    "New_Node2": {
+      "parent": "Wall2x3Win1x0_75HorzShape1",
+      "index": 1
+    },
+    "New_Node3": {
+      "parent": "Wall2x3Win1x0_75Horz",
+      "index": 1
+    },
+    "New_Node4": {
+      "parent": "New_Node5",
+      "index": 0
+    },
+    "New_Node6": {
+      "parent": "New_Node4",
+      "index": 0
+    }
+  },
+  "inherits": "./ArchitectureKit/Wall2x3Win1x0_75Horz.gltf"
+}

src/client/editor/ConflictResolution.js

@@ -0,0 +1,97 @@
+export default class ConflictHandler {
+  constructor() {
+    this._conflicts = {
+      missing: false,
+      duplicate: false
+    };
+    this.duplicateList = {};
+  }
+
+  findDuplicates = (node, layer, index) => {
+    if (node.userData._path) {
+      node.userData._path.push(index);
+    } else {
+      node.userData._path = [0];
+    }
+
+    const name = node.name;
+    this.duplicateList[name] = name in this.duplicateList ? this.duplicateList[name] + 1 : 1;
+    if (this.duplicateList[name] > 1) {
+      this.setDuplicateStatus(true);
+    }
+
+    if (node.children) {
+      node.children.forEach((child, i) => {
+        child.userData._path = node.userData._path.slice(0);
+        this.findDuplicates(child, layer + 1, i);
+      });
+    }
+  };
+
+  setDuplicateStatus = newStatus => {
+    this._conflicts.duplicate = newStatus;
+  };
+
+  setMissingStatus = newStatus => {
+    this._conflicts.missing = newStatus;
+  };
+
+  getDuplicateByName = name => {
+    if (!(name in this.duplicateList)) {
+      return false;
+    }
+    return this.duplicateList[name] > 1;
+  };
+
+  getMissingStatus = () => {
+    return this._conflicts.missing;
+  };
+
+  getConflictInfo = () => {
+    return this._conflicts;
+  };
+
+  updateAllDuplicateStatus = scene => {
+    scene.traverse(child => {
+      child.userData._duplicate = this.getDuplicateByName(child.name);
+      child.userData._isDuplicateRoot = child.userData._duplicate;
+    });
+  };
+
+  updateNodesMissingStatus = scene => {
+    this.updateNodesConflictInfoByProperty(scene, "_missing");
+  };
+
+  updateNodesDuplicateStatus = scene => {
+    this.updateNodesConflictInfoByProperty(scene, "_duplicate");
+  };
+
+  updateNodesConflictInfoByProperty = (scene, propertyName) => {
+    scene.traverse(child => {
+      if (child === scene) {
+        return;
+      }
+      if (!child.userData._isMissingRoot && !child.userData._isDuplicateRoot) {
+        child.userData[propertyName] = child.parent ? child.parent.userData[propertyName] : false;
+      }
+    });
+  };
+
+  checkResolvedMissinRoot = scene => {
+    let newStatus = false;
+    const resolvedList = [];
+    scene.traverse(child => {
+      if (child.userData._isMissingRoot) {
+        if (child.children.length > 0) {
+          newStatus = true;
+        } else {
+          child.userData._isMissingRoot = false;
+          child.userData._missing = false;
+          resolvedList.push(child);
+        }
+      }
+    });
+    this.setMissingStatus(newStatus);
+    return resolvedList;
+  };
+}

src/client/editor/SceneLoader.js

@@ -1,6 +1,7 @@
 import THREE from "../vendor/three";
 import { Components } from "./components";
 import SceneReferenceComponent from "./components/SceneReferenceComponent";
+import ConflictHandler from "./ConflictResolution";
 
 export function absoluteToRelativeURL(from, to) {
   if (from === to) {
@@ -245,40 +246,9 @@ export async function loadSerializedScene(sceneDef, baseURI, addComponent, isRoo
   }
 
   // init scene conflict status
-  scene.userData._conflicts = {
-    missing: false,
-    duplicate: false
-  };
-  const duplicateList = {};
-  // check duplicate names
-  // update children duplicate status
-  const findDuplicates = (node, layer, index) => {
-    if (node.userData._path) {
-      node.userData._path.push(index);
-    } else {
-      node.userData._path = [0];
-    }
-
-    // count the name and save to the list
-    const name = node.name;
-    duplicateList[name] = name in duplicateList ? duplicateList[name] + 1 : 1;
-    if (duplicateList[name] > 1) {
-      scene.userData._conflicts.duplicate = true;
-    }
-
-    if (node.children) {
-      node.children.forEach((child, i) => {
-        child.userData._path = node.userData._path.slice(0);
-        findDuplicates(child, layer + 1, i);
-      });
-    }
-  };
-  findDuplicates(scene, 0, 0);
-
-  scene.traverse(child => {
-    child.userData._duplicate = duplicateList[child.name] > 1;
-    child.userData._isDuplicateRoot = child.userData._duplicate;
-  });
+  scene.userData._conflictHandler = new ConflictHandler();
+  scene.userData._conflictHandler.findDuplicates(scene, 0, 0);
+  scene.userData._conflictHandler.updateAllDuplicateStatus(scene);
 
   if (entities) {
     // Convert any relative URLs in the scene to absolute URLs so that other code does not need to know about the scene path.
@@ -313,7 +283,7 @@ export async function loadSerializedScene(sceneDef, baseURI, addComponent, isRoo
           parentObject.name = entity.parent;
           parentObject.userData._isMissingRoot = true;
           parentObject.userData._missing = true;
-          scene.userData._conflicts.missing = true;
+          scene.userData._conflictHandler.setMissingStatus(true);
           scene.add(parentObject);
         } else {
           if (!parentObject.userData._missing) {

src/client/ui/panels/HierarchyPanelContainer.js

@@ -69,22 +69,21 @@ class HierarchyPanelContainer extends Component {
     }
 
     const object = node.object;
-    const newParent = parent.object;
+    const newParent = parent;
     let newBefore; // The object to insert the moved node before.
 
     if (newParent.children.length === 1) {
       newBefore = undefined;
     } else {
-      const movedNodeIndex = newParent.children.indexOf(node.object);
-
+      const movedNodeIndex = newParent.children.indexOf(node);
       if (movedNodeIndex === newParent.children.length - 1) {
         newBefore = undefined;
       } else {
-        newBefore = newParent.children[movedNodeIndex + 1];
+        newBefore = newParent.children[movedNodeIndex + 1].object;
       }
     }
 
-    this.props.editor.execute(new MoveObjectCommand(object, newParent, newBefore));
+    this.props.editor.execute(new MoveObjectCommand(object, newParent.object, newBefore));
   };
 
   onMouseUpNode = (e, node) => {
@@ -130,26 +129,37 @@ class HierarchyPanelContainer extends Component {
   };
 
   rebuildNodeHierarchy = () => {
+    const handler = this.props.editor.scene.userData._conflictHandler;
+    const list = handler.checkResolvedMissinRoot(this.props.editor.scene);
+    if (list.length > 0) {
+      list.forEach(resolvedMissingRoot => {
+        this.props.editor.removeObject(resolvedMissingRoot);
+      });
+    }
+
+    handler.updateNodesMissingStatus(this.props.editor.scene);
+    handler.updateNodesDuplicateStatus(this.props.editor.scene);
     this.setState({
       tree: createNodeHierarchy(this.props.editor.scene)
     });
   };
 
   renderNode = node => {
-    const isConflict = node.object.userData._missing || node.object.userData._duplicate;
     const isMissingChild = node.object.userData._missing && !node.object.userData._isMissingRoot;
     const isDuplicateChild = node.object.userData._duplicate && !node.object.userData._isDuplicateRoot;
+    const disableEditing =
+      node.object.userData._duplicate || node.object.userData._isDuplicateRoot || node.object.userData._isMissingRoot;
     return (
       <div
         className={classNames("node", {
           "is-active": this.props.editor.selected && node.object.id === this.props.editor.selected.id,
-          conflict: isConflict,
+          conflict: disableEditing,
           "error-root": node.object.userData._isMissingRoot ? node.object.userData._missing : false,
           "warning-root": node.object.userData._isDuplicateRoot ? node.object.userData._duplicate : false,
           disabled: isMissingChild || isDuplicateChild
         })}
-        onMouseUp={isConflict ? null : e => this.onMouseUpNode(e, node)}
-        onMouseDown={isConflict ? e => e.stopPropagation() : null}
+        onMouseUp={disableEditing ? null : e => this.onMouseUpNode(e, node)}
+        onMouseDown={disableEditing ? e => e.stopPropagation() : null}
       >
         <ContextMenuTrigger
           attributes={{ className: styles.treeNode }}
@@ -202,11 +212,12 @@ class HierarchyPanelContainer extends Component {
   };
 
   renderWarnings = () => {
-    if (!this.props.editor.scene.userData._conflicts) {
+    const handler = this.props.editor.scene.userData._conflictHandler;
+    if (!handler) {
       return;
     }
 
-    const conflicts = this.props.editor.scene.userData._conflicts;
+    const conflicts = handler.getConflictInfo();
 
     return (
       <div className={styles.conflictDisplay}>