diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue index ca7e119c..47ed6a9a 100644 --- a/web/src/pages/Edit/components/Outline.vue +++ b/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)" > { - // 激活节点会让当前大纲失去焦点 + // 在大纲里操作节点时不要响应该事件,否则会重新刷新树 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) { - // 高亮树节点 - this.$refs.tree.setCurrentKey(id) - let node = this.$refs.tree.getNode(id) - this.onCurrentChange(node.data) - // 定位该节点 - this.onClick(null, node.data) - // 聚焦该树节点的编辑框 - const el = document.querySelector( - `.customNode[data-id="${id}"] .nodeEdit` - ) - if (el) { - let selection = window.getSelection() - let range = document.createRange() - range.selectNodeContents(el) - selection.removeAllRanges() - selection.addRange(range) - let offsetTop = el.offsetTop - this.$emit('scrollTo', offsetTop) + try { + this.isAfterCreateNewNode = true + // 高亮树节点 + this.$refs.tree.setCurrentKey(id) + let node = this.$refs.tree.getNode(id) + this.onCurrentChange(node.data) + // 定位该节点 + this.onClick(node.data) + // 聚焦该树节点的编辑框 + const el = document.querySelector( + `.customNode[data-id="${id}"] .nodeEdit` + ) + if (el) { + let selection = window.getSelection() + let range = document.createRange() + range.selectNodeContents(el) + selection.removeAllRanges() + 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 }) }, diff --git a/web/src/pages/Edit/components/OutlineEdit.vue b/web/src/pages/Edit/components/OutlineEdit.vue index 57d3017f..59882ecb 100644 --- a/web/src/pages/Edit/components/OutlineEdit.vue +++ b/web/src/pages/Edit/components/OutlineEdit.vue @@ -7,8 +7,10 @@
-
- +
+
+ +
@@ -33,11 +35,11 @@ export default { }, watch: { isOutlineEdit(val) { - if (val) { - this.$nextTick(() => { - document.body.appendChild(this.$refs.outlineEditContainer) - }) - } + if (val) { + this.$nextTick(() => { + 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 { - width: 1000px; - height: max-content; - overflow: hidden; + .outlineEditBox { + width: 100%; + height: 100%; + overflow-y: auto; padding: 50px 0; - /deep/ .customNode { - .nodeEdit { - max-width: 800px; + .outlineEdit { + width: 1000px; + height: 100%; + height: max-content; + margin: 0 auto; + + /deep/ .customNode { + .nodeEdit { + max-width: 800px; + } } } }