Demo：优化大纲编辑

web/src/pages/Edit/components/Outline.vue

@@ -20,7 +20,7 @@
       class="customNode"
       slot-scope="{ node, data }"
       :data-id="data.uid"
-      @click="onClick($event, data)"
+      @click="onClick(data)"
     >
       <span
         class="nodeEdit"
@@ -63,7 +63,9 @@ export default {
       notHandleDataChange: false,
       handleNodeTreeRenderEnd: false,
       beInsertNodeUid: '',
-      isInTreArea: false
+      insertType: '',
+      isInTreArea: false,
+      isAfterCreateNewNode: false
     }
   },
   computed: {
@@ -72,18 +74,27 @@ export default {
   created() {
     window.addEventListener('keydown', this.onKeyDown)
     this.$bus.$on('data_change', () => {
-      // 激活节点会让当前大纲失去焦点
+      // 在大纲里操作节点时不要响应该事件，否则会重新刷新树
       if (this.notHandleDataChange) {
         this.notHandleDataChange = false
         return
       }
+      if (this.isAfterCreateNewNode) {
+        this.isAfterCreateNewNode = false
+        return
+      }
       this.refresh()
     })
     this.$bus.$on('node_tree_render_end', () => {
-      // 激活节点会让当前大纲失去焦点
+      // 当前存在未完成的节点插入操作
+      if (this.insertType) {
+        this[this.insertType]()
+        this.insertType = ''
+        return
+      }
+      // 插入了新节点后需要做一些操作
       if (this.handleNodeTreeRenderEnd) {
         this.handleNodeTreeRenderEnd = false
-        this.notHandleDataChange = false
         this.refresh()
         this.$nextTick(() => {
           this.afterCreateNewNode()
@@ -125,26 +136,32 @@ export default {
       // 如果是新插入节点，那么需要手动高亮该节点、定位该节点及聚焦
       let id = this.beInsertNodeUid
       if (id && this.$refs.tree) {
-        // 高亮树节点
+        try {
-        this.$refs.tree.setCurrentKey(id)
+          this.isAfterCreateNewNode = true
-        let node = this.$refs.tree.getNode(id)
+          // 高亮树节点
-        this.onCurrentChange(node.data)
+          this.$refs.tree.setCurrentKey(id)
-        // 定位该节点
+          let node = this.$refs.tree.getNode(id)
-        this.onClick(null, node.data)
+          this.onCurrentChange(node.data)
-        // 聚焦该树节点的编辑框
+          // 定位该节点
-        const el = document.querySelector(
+          this.onClick(node.data)
-          `.customNode[data-id="${id}"] .nodeEdit`
+          // 聚焦该树节点的编辑框
-        )
+          const el = document.querySelector(
-        if (el) {
+            `.customNode[data-id="${id}"] .nodeEdit`
-          let selection = window.getSelection()
+          )
-          let range = document.createRange()
+          if (el) {
-          range.selectNodeContents(el)
+            let selection = window.getSelection()
-          selection.removeAllRanges()
+            let range = document.createRange()
-          selection.addRange(range)
+            range.selectNodeContents(el)
-          let offsetTop = el.offsetTop
+            selection.removeAllRanges()
-          this.$emit('scrollTo', offsetTop)
+            selection.addRange(range)
+            let offsetTop = el.offsetTop
+            this.$emit('scrollTo', offsetTop)
+          }
+        } catch (error) {
+          console.log(error)
         }
       }
+      this.beInsertNodeUid = ''
     },
 
     // 根节点不允许拖拽
@@ -154,9 +171,16 @@ export default {
 
     // 失去焦点更新节点文本
     onBlur(e, node) {
+      // 节点数据没有修改
       if (node.data.textCache === e.target.innerHTML) {
+        // 如果存在未执行的插入新节点操作，那么直接执行
+        if (this.insertType) {
+          this[this.insertType]()
+          this.insertType = ''
+        }
         return
       }
+      // 否则插入新节点操作需要等待当前修改事件渲染完成后再执行
       const richText = node.data.data.richText
       const text = richText ? e.target.innerHTML : e.target.innerText
       const targetNode = this.mindMap.renderer.findNodeByUid(node.data.uid)
@@ -193,11 +217,13 @@ export default {
     onNodeInputKeydown(e) {
       if (e.keyCode === 13 && !e.shiftKey) {
         e.preventDefault()
-        this.insertNode()
+        this.insertType = 'insertNode'
+        e.target.blur()
       }
       if (e.keyCode === 9) {
         e.preventDefault()
-        this.insertChildNode()
+        this.insertType = 'insertChildNode'
+        e.target.blur()
       }
     },
 
@@ -222,13 +248,14 @@ export default {
     },
 
     // 激活当前节点且移动当前节点到画布中间
-    onClick(e, data) {
+    onClick(data) {
       this.notHandleDataChange = true
       const targetNode = this.mindMap.renderer.findNodeByUid(data.uid)
       if (targetNode && targetNode.nodeData.data.isActive) return
       this.mindMap.renderer.textEdit.stopFocusOnNodeActive()
       this.mindMap.execCommand('GO_TARGET_NODE', data.uid, () => {
         this.mindMap.renderer.textEdit.openFocusOnNodeActive()
+        this.notHandleDataChange = false
       })
     },
 

web/src/pages/Edit/components/OutlineEdit.vue

@@ -7,8 +7,10 @@
     <div class="closeBtn" @click="onClose">
       <span class="icon iconfont iconguanbi"></span>
     </div>
-    <div class="outlineEdit">
+    <div class="outlineEditBox" ref="outlineEditBox">
-      <Outline :mindMap="mindMap" @scrollTo="onScrollTo"></Outline>
+      <div class="outlineEdit">
+        <Outline :mindMap="mindMap" @scrollTo="onScrollTo"></Outline>
+      </div>
     </div>
   </div>
 </template>
@@ -33,11 +35,11 @@ export default {
   },
   watch: {
     isOutlineEdit(val) {
-        if (val) {
+      if (val) {
-            this.$nextTick(() => {
+        this.$nextTick(() => {
-                document.body.appendChild(this.$refs.outlineEditContainer)
+          document.body.appendChild(this.$refs.outlineEditContainer)
-            })
+        })
-        }
+      }
     }
   },
   methods: {
@@ -48,7 +50,7 @@ export default {
     },
 
     onScrollTo(y) {
-      let container = this.$refs.outlineEditContainer
+      let container = this.$refs.outlineEditBox
       let height = container.offsetHeight
       let top = container.scrollTop
       y += 50
@@ -68,14 +70,12 @@ export default {
   width: 100%;
   height: 100%;
   z-index: 9999;
-  display: flex;
-  justify-content: center;
   background-color: #fff;
-  overflow-y: auto;
+  overflow: hidden;
 
   .closeBtn {
     position: absolute;
-    right: 20px;
+    right: 40px;
     top: 20px;
     cursor: pointer;
 
@@ -84,15 +84,22 @@ export default {
     }
   }
 
-  .outlineEdit {
+  .outlineEditBox {
-    width: 1000px;
+    width: 100%;
-    height: max-content;
+    height: 100%;
-    overflow: hidden;
+    overflow-y: auto;
     padding: 50px 0;
 
-    /deep/ .customNode {
+    .outlineEdit {
-      .nodeEdit {
+      width: 1000px;
-        max-width: 800px;
+      height: 100%;
+      height: max-content;
+      margin: 0 auto;
+
+      /deep/ .customNode {
+        .nodeEdit {
+          max-width: 800px;
+        }
       }
     }
   }