编辑器-导航-场景导航：场景的拖拽

packages/code/src/Store/index.js

@@ -45,6 +45,7 @@ const store = new Vuex.Store({
     isEditing: state => state.isEditing,
     info: state => state.info,
     catalogTopology: (state) => {
+      console.log('触发计算catalogTopology');
       if (!state.info) {
         return
       }
@@ -62,25 +63,25 @@ const store = new Vuex.Store({
               // 对于该二级分类
               const itemLevel2 = itemLevel1.childrenTemp[itemLevel1.childrenTemp.length - 1]
               itemLevel2.children = []
-              // 对于每个三级分类
+              // 对于每个三级元素
               for (const itemLevel3 of state.info.scenes) {
                 // 如果属于上述二级分类
                 if (itemLevel2.id === itemLevel3.category /* 注意拼写！！！ */) {
                   itemLevel2.children.push(deepClone(itemLevel3))
-                  itemLevel2.children.sort((a, b) => {
-                    if (a.weight === undefined && b.weight === undefined) {
-                      return 0
-                    } else if (a.weight !== undefined && b.weight === undefined) {
-                      return -1
-                    } else if (a.weight === undefined && b.weight !== undefined) {
-                      return 1
-                    } else {
-                      return a.weight - b.weight
-                    }
-                  })
                 }
               }
-              
+              // 按weight排序
+              itemLevel2.children.sort((a, b) => {
+                if (a.weight === undefined && b.weight === undefined) {
+                  return 0
+                } else if (a.weight !== undefined && b.weight === undefined) {
+                  return -1
+                } else if (a.weight === undefined && b.weight !== undefined) {
+                  return 1
+                } else {
+                  return a.weight - b.weight
+                }
+              })
               break
             }
           }

packages/code/src/components/insertPositionTipInEditor.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     class="insert-position-tip"
-    @dragenter="onDragEnterMarginPlaceholder"
-    @dragover="onDragOverMarginPlaceholder"
-    @dragleave="onDragLeaveMarginPlaceHolder"
-    @drop="onDropInMarginPlaceHolder"
+    @dragenter="onDragEnter"
+    @dragover="onDragOver"
+    @dragleave="onDragLeave"
+    @drop="onDrop"
     :style="{
       marginLeft: marginLeft,
     }"
@@ -15,9 +15,14 @@
 
 <script>
 import { mapGetters } from "vuex";
+import { deepClone } from "@/utils/other.js";
 
 export default {
   props: {
+    index: {
+      type: Number,
+      required: true,
+    },
     positionDebug: {
       type: String,
       default: '',
@@ -37,6 +42,7 @@ export default {
   },
   computed: {
     ...mapGetters({
+      navInfo: 'info',
       dragInfo: 'editorNavDragInfo',
     }),
     marginLeft() {
@@ -118,7 +124,7 @@ export default {
           return false
       }
     },
-    onDragEnterMarginPlaceholder(e) {
+    onDragEnter(e) {
       if (!this.canDrop()) {
         return
       } else {
@@ -127,7 +133,7 @@ export default {
         e.dataTransfer.dropEffect = 'move'
       }
     },
-    onDragOverMarginPlaceholder(e) {
+    onDragOver(e) {
       if (!this.canDrop()) {
         return
       } else {
@@ -135,13 +141,77 @@ export default {
         e.dataTransfer.dropEffect = 'move'
       }
     },
-    onDragLeaveMarginPlaceHolder(e) {
+    onDragLeave(e) {
       // e.preventDefault()
       e.target.style.backgroundColor = ''
     },
-    onDropInMarginPlaceHolder(e) {
+    onDrop(e) {
       // e.preventDefault()
       e.target.style.backgroundColor = ''
+
+      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开始递增，小的先显示）
+           */
+          // eslint-disable-next-line no-case-declarations
+          const belongGroupCopy = deepClone(this.parentNode.children)
+          // eslint-disable-next-line no-case-declarations
+          const draggedNodeCopy = deepClone(this.dragInfo.node)
+          draggedNodeCopy.isCopy = true
+          belongGroupCopy.splice(this.index, 0, draggedNodeCopy)
+          // eslint-disable-next-line no-case-declarations
+          const toDeleteIndex = belongGroupCopy.findIndex((item) => {
+            return (item.id === this.dragInfo.node.id && !item.isCopy)
+          })
+          if (toDeleteIndex >= 0) {
+            belongGroupCopy.splice(toDeleteIndex, 1)
+          }
+          for (let [index, elem] of belongGroupCopy.entries()) {
+            elem.weight = index + 1
+          }
+
+          /**
+           * 真正修改场景原始数据的weight和所属分组
+           */
+          for (const eachSceneCopy of belongGroupCopy) {
+            for (const eachScene of this.navInfo.scenes) {
+              if (eachSceneCopy.id === eachScene.id) {
+                this.$set( eachScene, 'weight', eachSceneCopy.weight )
+              }
+              if (this.dragInfo.node.id === eachScene.id) {
+                eachScene.category = this.parentNode.id // 注意category拼写！
+              }
+            }
+          }
+          
+          break;
+        case 'topologyGroupLevel2': // 被拖拽的是拓扑结构中二级分组
+          if (this.topologyLevel === 1) {
+            console.log('情况5：被拖拽的是拓扑结构中二级分组，拖拽到一级分组列表');
+            return true
+          } else if (this.topologyLevel === 2) {
+            console.log('情况6：被拖拽的是拓扑结构中二级分组，拖拽到二级分组列表');
+            return true
+          } else if (this.topologyLevel === 3) {
+              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：被拖拽的一级分组只有一个隐藏的默认二级分组，拖拽到另一个一级分组中隐藏的默认二级分组中的场景列表');
+          }
+          break;
+      }
     }
   }
 }

packages/code/src/components/sceneGroupInEditor.vue

@@ -84,9 +84,10 @@
           :indentLevel="level + 1"
           :topologyLevel="level + 1"
           :parentNode="groupNode"
+          :index="0"
         ></InsertPositionTip>
         <div
-          v-for="(item) of groupNode.children"
+          v-for="(item, index) of groupNode.children"
           :key=item.id
         >
           <component
@@ -113,6 +114,7 @@
             :indentLevel="level + 1"
             :topologyLevel="level + 1"
             :parentNode="groupNode"
+            :index="index + 1"
           ></InsertPositionTip>
         </div>
       </template>
@@ -123,9 +125,10 @@
           :indentLevel="level + 1"
           :topologyLevel="level + 2"
           :parentNode="groupNode.children[0]"
+          :index="0"
         ></InsertPositionTip>
         <div
-          v-for="(item) of groupNode.children[0].children"
+          v-for="(item, index) of groupNode.children[0].children"
           :key=item.id
         >
           <SceneInGroup
@@ -141,6 +144,7 @@
             :indentLevel="level + 1"
             :topologyLevel="level + 2"
             :parentNode="groupNode.children[0]"
+            :index="index + 1"
           ></InsertPositionTip>
         </div>
       </template>

packages/code/src/views/navigation/groupSettings.vue

@@ -12,9 +12,9 @@
     </button>
 
     <div class="scene-group-wrap">
-      <InsertPositionTip position-debug="-1"></InsertPositionTip>
+      <InsertPositionTip position-debug="-1" :index="0"></InsertPositionTip>
       <div
-        v-for="(item) of catalogTopology"
+        v-for="(item, index) of catalogTopology"
         :key=item.id
       >
         <SceneGroupInEditor
@@ -26,7 +26,7 @@
           @renameGroup="onRenameGroup"
           @deleteGroup="onDeleteGroup"
         />
-        <InsertPositionTip position-debug="0"></InsertPositionTip>
+        <InsertPositionTip position-debug="0" :index="index + 1"></InsertPositionTip>
       </div>
     </div>
     <popup v-if="addGroupLevel" :canClose="false">