编辑器-导航-场景导航：拖拽二级分组到一级分组中的功能

packages/code/src/Store/index.js

@@ -57,16 +57,17 @@ const store = new Vuex.Store({
         for (const itemLevel2Id of itemLevel1.children) {
           for (const catalogsItem of state.info.catalogs) {
             if (itemLevel2Id === catalogsItem.id) {
-              itemLevel1.childrenTemp.push(deepClone(catalogsItem))
-              
-              // 对于该二级分类
-              const itemLevel2 = itemLevel1.childrenTemp[itemLevel1.childrenTemp.length - 1]
+              const itemLevel2 = deepClone(catalogsItem)
+              itemLevel2.parentId = itemLevel1.id // 看起来，vuex getter中的数据如果存在循环引用，在通过mutation转而再存储到vuex中时，会导致调用栈溢出，原因难道是vuex mutation在深拷贝时没有考虑循环引用的情况？所以这里不进行循环引用，只记录parent的id。
               itemLevel2.children = []
+              itemLevel1.childrenTemp.push(itemLevel2)
               // 对于每个三级元素
-              for (const itemLevel3 of state.info.scenes) {
+              for (const sceneItem of state.info.scenes) {
                 // 如果属于上述二级分类
-                if (itemLevel2.id === itemLevel3.category /* 注意拼写！！！ */) {
-                  itemLevel2.children.push(deepClone(itemLevel3))
+                if (itemLevel2.id === sceneItem.category /* 注意拼写！！！ */) {
+                  const itemLevel3 = deepClone(sceneItem)
+                  itemLevel3.parentId = itemLevel2.id  // 看起来，vuex getter中的数据如果存在循环引用，在通过mutation转而再存储到vuex中时，会导致调用栈溢出，原因难道是vuex mutation在深拷贝时没有考虑循环引用的情况？所以这里不进行循环引用，只记录parent的id。
+                  itemLevel2.children.push(itemLevel3)
                 }
               }
               // 按weight排序

packages/code/src/components/insertPositionTipInEditor.vue

@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     ...mapGetters({
-      navInfo: 'info',
+      info: 'info',
       dragInfo: 'editorNavDragInfo',
     }),
     marginLeft() {
@@ -54,13 +54,13 @@ export default {
       switch (this.dragInfo.type) {
         case 'scene': // 被拖拽的是场景
           if (this.topologyLevel === 1) {
-            console.log('情况1：被拖拽的是场景，拖拽到一级分组列表');
+            // console.log('情况1：被拖拽的是场景，拖拽到一级分组列表');
             return false
           } else if (this.topologyLevel === 2) {
-            console.log('情况2：被拖拽的是场景，拖拽到二级分组列表');
+            // console.log('情况2：被拖拽的是场景，拖拽到一级分组中');
             return false
           } else if (this.topologyLevel === 3) {
-            console.log('情况3：被拖拽的是场景，拖拽到场景列表');
+            // console.log('情况3：被拖拽的是场景，拖拽到二级分组中');
             return true
           } else {
             console.error('情况4：不该出现');
@@ -68,17 +68,17 @@ export default {
           }
         case 'topologyGroupLevel2': // 被拖拽的是拓扑结构中二级分组
           if (this.topologyLevel === 1) {
-            console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
+            // console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
             return true
           } else if (this.topologyLevel === 2) {
-            console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到二级分组列表');
+            // console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到一级分组中');
             return true
           } else if (this.topologyLevel === 3) {
             if (this.indentLevel === 2) {
-              console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中场景列表');
+              // console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中');
               return true
             } else {
-              console.log('情况8：被拖拽的是拓扑结构中二级分组，拖拽到普通的二级分组中场景列表');
+              // console.log('情况8：被拖拽的是拓扑结构中二级分组，拖拽到普通的二级分组中');
               return false
             }
           } else {
@@ -87,32 +87,32 @@ export default {
           }
         case 'topologyGroupLevel1': // 被拖拽的是拓扑结构中一级分组
           if (this.topologyLevel === 1) {
-            console.log('情况10：被拖拽的是拓扑结构中一级分组，拖拽到一级分组列表');
+            // console.log('情况10：被拖拽的是拓扑结构中一级分组，拖拽到一级分组列表');
             return true
-          } else if (this.topologyLevel === 2) { // 拖拽到二级分组列表
+          } else if (this.topologyLevel === 2) { // 拖拽到一级分组中
             if (this.dragInfo.node.children.length === 1 && this.dragInfo.node.children[0].name === '默认二级分组') {
-              console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到二级分组列表');
+              // console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到一级分组中');
               return true
             } else {
-              console.log('情况12：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到二级分组列表');
+              // console.log('情况12：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到一级分组中');
               return false
             }
-          } else if (this.topologyLevel === 3) { // 拖拽到场景列表
-            if (this.indentLevel === 2) { // 拖拽到隐藏的默认二级分组中的场景列表
+          } else if (this.topologyLevel === 3) { // 拖拽到二级分组中
+            if (this.indentLevel === 2) { // 拖拽到隐藏的默认二级分组中
               if (this.dragInfo.node.children.length === 1 && this.dragInfo.node.children[0].name === '默认二级分组') {
                 if (this.dragInfo.node.children[0].id === this.parentNode?.id) {
-                  console.log('情况13：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到自身的默认二级分组中的场景列表');
+                  // console.log('情况13：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到自身的默认二级分组中');
                   return false
                 } else {
-                  console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中的场景列表');
+                  // console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中');
                   return true
                 }
               } else {
-                console.log('情况15：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到隐藏的默认二级分组中的场景列表');
+                // console.log('情况15：被拖拽的一级分组并非只有一个隐藏的默认二级分组，拖拽到隐藏的默认二级分组中');
                 return false
               }
             } else {
-              console.log('情况16：被拖拽的是拓扑结构中一级分组，拖拽到普通二级分组中的场景列表')
+              // console.log('情况16：被拖拽的是拓扑结构中一级分组，拖拽到普通二级分组中')
               return false
             }
           } else {
@@ -152,9 +152,6 @@ export default {
       switch (this.dragInfo.type) {
         case 'scene': // 被拖拽的是场景
           // console.log('情况3：被拖拽的是场景，插入到二级分组中');
-          // console.log('被拖拽场景的id: ', this.dragInfo.node.id);
-          // console.log('要插入的二级分组id: ', this.parentNode.id);
-          // console.log('要插入的位置: ', this.index);
 
           /**
            * 确定要插入的分组中各场景应有的weight（从1开始递增，小的先显示）
@@ -180,7 +177,7 @@ export default {
            * 真正修改场景原始数据的weight和所属分组
            */
           for (const eachSceneCopy of belongGroupCopy) {
-            for (const eachScene of this.navInfo.scenes) {
+            for (const eachScene of this.info.scenes) {
               if (eachSceneCopy.id === eachScene.id) {
                 this.$set( eachScene, 'weight', eachSceneCopy.weight )
               }
@@ -193,22 +190,80 @@ export default {
           break;
         case 'topologyGroupLevel2': // 被拖拽的是拓扑结构中二级分组
           if (this.topologyLevel === 1) {
-            console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
-            return true
+            // console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
+            /**
+             * 在拖拽到的位置新增一个一级分组，name是原二级分组的name；唯一child的id赋值为被拖拽的二级分组的id
+             */
+            const newGroupLevel1 = {
+              id: 'r_' + this.$randomWord(true, 8, 8),
+              name: this.dragInfo.node.name,
+              children: [this.dragInfo.node.id],
+            }
+            this.info.catalogRoot.splice(this.index, 0, newGroupLevel1)
+            
+            /**
+             * 被拖拽的二级分组名称改为“默认二级分组”；
+             */
+            const draggedGroup = this.info.catalogs.find((item) => {
+              return item.id === this.dragInfo.node.id
+            })
+            draggedGroup.name = '默认二级分组'
+
+            /**
+             * 
+             */
+            // 被拖拽的二级分组原属的一级分组的children中，删除【被拖拽的二级分组对应的元素】
+            const parentGroup = this.info.catalogRoot.find((item) => {
+              return item.id === this.dragInfo.node.parentId
+            })
+            const idxToDelete = parentGroup.children.findIndex((item) => {
+              return item.id === this.dragInfo.node.id
+            })
+            parentGroup.children.splice(idxToDelete, 1)
+            
+            break;
           } else if (this.topologyLevel === 2) {
-            console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到二级分组列表');
-            return true
+            // console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到一级分组中');
+
+            // 找到原属一级分组
+            const originalParentGroup = this.info.catalogRoot.find((item) => {
+              return item.id === this.dragInfo.node.parentId
+            })
+            
+            // 找到原属一级分组children中那个二级分组条目，并做上待删除记号
+            const originalGroupIndex = originalParentGroup.children.findIndex((eachLevel2Id) => {
+              return eachLevel2Id === this.dragInfo.node.id
+            })
+            originalParentGroup.children[originalGroupIndex] += '__need__delete__'
+            
+            // 找到要插入的一级分组
+            const targetGroup = this.info.catalogRoot.find((item) => {
+              return item.id === this.parentNode.id
+            })
+            
+            // 把被拖拽的二级分组的id插进去
+            targetGroup.children.splice(this.index, 0, this.dragInfo.node.id)
+
+            // 把原来那个二级分组条目删除
+            this.$nextTick(() => {
+              const toDeleteIndex = originalParentGroup.children.findIndex((eachLevel2Id) => {
+                return eachLevel2Id.endsWith('__need__delete__')
+              })
+              originalParentGroup.children.splice(toDeleteIndex, 1)
+            })
+
+            break;
           } else if (this.topologyLevel === 3) {
-              console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中场景列表');
+              console.log('情况7：被拖拽的是拓扑结构中二级分组，拖拽到隐藏的默认二级分组中');
           }
           break;
         case 'topologyGroupLevel1': // 被拖拽的是拓扑结构中一级分组
           if (this.topologyLevel === 1) {
             console.log('情况10：被拖拽的是拓扑结构中一级分组，拖拽到一级分组列表');
-          } else if (this.topologyLevel === 2) { // 拖拽到二级分组列表
-            console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到二级分组列表');
-          } else if (this.topologyLevel === 3) { // 拖拽到场景列表
-            console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中的场景列表');
+          } else if (this.topologyLevel === 2) { // 拖拽到一级分组中
+            console.log('情况11：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到一级分组中');
+          } else if (this.topologyLevel === 3) { // 拖拽到二级分组中
+            console.log('情况14：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中');
           }
           break;
       }