修复画布距窗口左上角不为0时节点拖拽出现偏移的问题

修复没有激活节点时顺便按上面键都会触发自动聚焦的问题
打包
2026-02-24 18:38:26 +08:00 · 2022-12-30 10:52:04 +08:00 · 2022-12-13 20:21:39 +08:00 · 2022-12-13 20:00:03 +08:00 · 2022-12-13 19:57:54 +08:00 · 2022-12-09 16:56:28 +08:00
15 changed files with 479 additions and 51 deletions
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ npm run build

 # 安装

-> 当前仓库版本：0.2.16，当前npm版本：0.2.16
+> 当前仓库版本：0.2.20，当前npm版本：0.2.20

 ```bash
 npm i simple-mind-map
@@ -423,6 +423,14 @@ v0.1.5+

 将节点移动到另一个节点的后面

+#### moveNodeToCenter(node)
+
+v0.2.17+
+
+移动节点到画布中心。
+
+目前如果是存在缩放的情况下回到中心会重置缩放。
+
 ## keyCommand实例

 `keyCommand`实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过`mindMap.keyCommand`获取到该实例。
@@ -550,6 +558,12 @@ v0.1.1+

 动态设置变换数据，可以通过getTransformData方法获取变换数据

+#### setScale(scale)
+
+v0.2.17+
+
+设置缩放
+
 ## MiniMap实例

 v0.2.11+
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.2abc5635.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.938c190b.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.b39e98f0.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.2abc5635.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.b39e98f0.js"></script><script src="dist/js/app.938c190b.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.10aa67e3.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-5397ae43.e756f28b.js" rel="prefetch"><link href="dist/css/app.f735ed26.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="preload" as="style"><link href="dist/js/app.2fa527aa.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.68a34765.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.f631d5ff.css" rel="stylesheet"><link href="dist/css/app.f735ed26.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.68a34765.js"></script><script src="dist/js/app.2fa527aa.js"></script></body></html>
--- a/simple-mind-map/index.js
+++ b/simple-mind-map/index.js
@@ -15,6 +15,7 @@ import { layoutValueList } from './src/utils/constant'
 import { SVG } from '@svgdotjs/svg.js'
 import xmind from './src/parse/xmind'
 import { simpleDeepClone } from './src/utils'
+import KeyboardNavigation from './src/KeyboardNavigation'

 // 默认选项配置
 const defaultOpt = {
@@ -133,6 +134,11 @@ class MindMap {
      mindMap: this
    })

+    // 键盘导航类
+    this.keyboardNavigation = new KeyboardNavigation({
+      mindMap: this
+    })
+
    // 批量执行类
    this.batchExecution = new BatchExecution()

--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-mind-map",
-  "version": "0.2.16",
+  "version": "0.2.20",
  "description": "一个简单的web在线思维导图",
  "authors": [
    {
--- a/simple-mind-map/src/Drag.js
+++ b/simple-mind-map/src/Drag.js
@@ -76,12 +76,11 @@ class Drag extends Base {
      // 计算鼠标按下的位置距离节点左上角的距离
      this.drawTransform = this.mindMap.draw.transform()
      let { scaleX, scaleY, translateX, translateY } = this.drawTransform
-      this.offsetX = e.clientX - (node.left * scaleX + translateX)
-      this.offsetY = e.clientY - (node.top * scaleY + translateY)
-      //
+      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
+      this.offsetX = x - (node.left * scaleX + translateX)
+      this.offsetY = y - (node.top * scaleY + translateY)
      this.node = node
      this.isMousedown = true
-      let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
      this.mouseDownX = x
      this.mouseDownY = y
    })
@@ -275,7 +274,7 @@ class Drag extends Base {
        }
      }
      // 检测兄弟节点位置
-      if (!this.prevNode && !this.nextNode && this.node.isBrother(node)) {
+      if (!this.prevNode && !this.nextNode && !node.isRoot) {// && this.node.isBrother(node)
        if (left <= checkRight && right >= this.cloneNodeLeft) {
          if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
            this.prevNode = node
--- a/simple-mind-map/src/Event.js
+++ b/simple-mind-map/src/Event.js
@@ -48,6 +48,7 @@ class Event extends EventEmitter {
    this.onMousewheel = this.onMousewheel.bind(this)
    this.onContextmenu = this.onContextmenu.bind(this)
    this.onSvgMousedown = this.onSvgMousedown.bind(this)
+    this.onKeyup = this.onKeyup.bind(this)
  }

  /**
@@ -69,6 +70,7 @@ class Event extends EventEmitter {
      this.mindMap.el.addEventListener('mousewheel', this.onMousewheel)
    }
    this.mindMap.svg.on('contextmenu', this.onContextmenu)
+    window.addEventListener('keyup', this.onKeyup)
  }

  /**
@@ -84,6 +86,7 @@ class Event extends EventEmitter {
    window.removeEventListener('mouseup', this.onMouseup)
    this.mindMap.el.removeEventListener('mousewheel', this.onMousewheel)
    this.mindMap.svg.off('contextmenu', this.onContextmenu)
+    window.removeEventListener('keyup', this.onKeyup)
  }

  /**
@@ -177,6 +180,16 @@ class Event extends EventEmitter {
    e.preventDefault()
    this.emit('contextmenu', e)
  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 11:12:11
+   * @Desc: 按键松开事件
+   */
+  onKeyup(e) {
+    this.emit('keyup', e)
+  }
 }

 export default Event
--- a/simple-mind-map/src/KeyboardNavigation.js
+++ b/simple-mind-map/src/KeyboardNavigation.js
@@ -0,0 +1,276 @@
+import { isKey } from './utils/keyMap'
+import { bfsWalk } from './utils'
+
+/**
+ * javascript comment
+ * @Author: 王林25
+ * @Date: 2022-12-09 11:06:50
+ * @Desc: 键盘导航类
+ */
+export default class KeyboardNavigation {
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 11:07:24
+   * @Desc: 构造函数
+   */
+  constructor(opt) {
+    this.opt = opt
+    this.mindMap = opt.mindMap
+    this.onKeyup = this.onKeyup.bind(this)
+    this.mindMap.on('keyup', this.onKeyup)
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:12:27
+   * @Desc: 处理按键事件
+   */
+  onKeyup(e) {
+    ;['Left', 'Up', 'Right', 'Down'].forEach(dir => {
+      if (isKey(e, dir)) {
+        if (this.mindMap.renderer.activeNodeList.length > 0) {
+          this.focus(dir)
+        } else {
+          let root = this.mindMap.renderer.root
+          this.mindMap.renderer.moveNodeToCenter(root)
+          root.active()
+        }
+      }
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:12:39
+   * @Desc: 聚焦到下一个节点
+   */
+  focus(dir) {
+    // 当前聚焦的节点
+    let currentActiveNode = this.mindMap.renderer.activeNodeList[0]
+    // 当前聚焦节点的位置信息
+    let currentActiveNodeRect = this.getNodeRect(currentActiveNode)
+    // 寻找的下一个聚焦节点
+    let targetNode = null
+    let targetDis = Infinity
+    // 保存并维护距离最近的节点
+    let checkNodeDis = (rect, node) => {
+      let dis = this.getDistance(currentActiveNodeRect, rect)
+      if (dis < targetDis) {
+        targetNode = node
+        targetDis = dis
+      }
+    }
+
+    // 第一优先级：阴影算法
+    this.getFocusNodeByShadowAlgorithm({
+      currentActiveNode,
+      currentActiveNodeRect,
+      dir,
+      checkNodeDis
+    })
+
+    // 第二优先级：区域算法
+    if (!targetNode) {
+      this.getFocusNodeByAreaAlgorithm({
+        currentActiveNode,
+        currentActiveNodeRect,
+        dir,
+        checkNodeDis
+      })
+    }
+
+    // 第三优先级：简单算法
+    if (!targetNode) {
+      this.getFocusNodeBySimpleAlgorithm({
+        currentActiveNode,
+        currentActiveNodeRect,
+        dir,
+        checkNodeDis
+      })
+    }
+
+    // 找到了则让目标节点聚焦
+    if (targetNode) {
+      this.mindMap.renderer.moveNodeToCenter(targetNode)
+      targetNode.active()
+    }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-12 16:22:54
+   * @Desc: 1.简单算法
+   */
+  getFocusNodeBySimpleAlgorithm({
+    currentActiveNode,
+    currentActiveNodeRect,
+    dir,
+    checkNodeDis
+  }) {
+    // 遍历节点树
+    bfsWalk(this.mindMap.renderer.root, node => {
+      // 跳过当前聚焦的节点
+      if (node === currentActiveNode) return
+      // 当前遍历到的节点的位置信息
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      let match = false
+      // 按下了左方向键
+      if (dir === 'Left') {
+        // 判断节点是否在当前节点的左侧
+        match = right <= currentActiveNodeRect.left
+        // 按下了右方向键
+      } else if (dir === 'Right') {
+        // 判断节点是否在当前节点的右侧
+        match = left >= currentActiveNodeRect.right
+        // 按下了上方向键
+      } else if (dir === 'Up') {
+        // 判断节点是否在当前节点的上面
+        match = bottom <= currentActiveNodeRect.top
+        // 按下了下方向键
+      } else if (dir === 'Down') {
+        // 判断节点是否在当前节点的下面
+        match = top >= currentActiveNodeRect.bottom
+      }
+      // 符合要求，判断是否是最近的节点
+      if (match) {
+        checkNodeDis(rect, node)
+      }
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-12 16:24:54
+   * @Desc: 2.阴影算法
+   */
+  getFocusNodeByShadowAlgorithm({
+    currentActiveNode,
+    currentActiveNodeRect,
+    dir,
+    checkNodeDis
+  }) {
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node === currentActiveNode) return
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      let match = false
+      if (dir === 'Left') {
+        match =
+          left < currentActiveNodeRect.left &&
+          top < currentActiveNodeRect.bottom &&
+          bottom > currentActiveNodeRect.top
+      } else if (dir === 'Right') {
+        match =
+          right > currentActiveNodeRect.right &&
+          top < currentActiveNodeRect.bottom &&
+          bottom > currentActiveNodeRect.top
+      } else if (dir === 'Up') {
+        match =
+          top < currentActiveNodeRect.top &&
+          left < currentActiveNodeRect.right &&
+          right > currentActiveNodeRect.left
+      } else if (dir === 'Down') {
+        match =
+          bottom > currentActiveNodeRect.bottom &&
+          left < currentActiveNodeRect.right &&
+          right > currentActiveNodeRect.left
+      }
+      if (match) {
+        checkNodeDis(rect, node)
+      }
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-13 16:15:36
+   * @Desc: 3.区域算法
+   */
+  getFocusNodeByAreaAlgorithm({
+    currentActiveNode,
+    currentActiveNodeRect,
+    dir,
+    checkNodeDis
+  }) {
+    // 当前聚焦节点的中心点
+    let cX = (currentActiveNodeRect.right + currentActiveNodeRect.left) / 2
+    let cY = (currentActiveNodeRect.bottom + currentActiveNodeRect.top) / 2
+    bfsWalk(this.mindMap.renderer.root, node => {
+      if (node === currentActiveNode) return
+      let rect = this.getNodeRect(node)
+      let { left, top, right, bottom } = rect
+      // 遍历到的节点的中心点
+      let ccX = (right + left) / 2
+      let ccY = (bottom + top) / 2
+      // 节点的中心点坐标和当前聚焦节点的中心点坐标的差值
+      let offsetX = ccX - cX
+      let offsetY = ccY - cY
+      if (offsetX === 0 && offsetY === 0) return
+      let match = false
+      if (dir === 'Left') {
+        match = offsetX <= 0 && offsetX <= offsetY && offsetX <= -offsetY
+      } else if (dir === 'Right') {
+        match = offsetX > 0 && offsetX >= -offsetY && offsetX >= offsetY
+      } else if (dir === 'Up') {
+        match = offsetY <= 0 && offsetY < offsetX && offsetY < -offsetX
+      } else if (dir === 'Down') {
+        match = offsetY > 0 && -offsetY < offsetX && offsetY > offsetX
+      }
+      if (match) {
+        checkNodeDis(rect, node)
+      }
+    })
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:12:50
+   * @Desc: 获取节点的位置信息
+   */
+  getNodeRect(node) {
+    let { scaleX, scaleY, translateX, translateY } =
+      this.mindMap.draw.transform()
+    let { left, top, width, height } = node
+    return {
+      right: (left + width) * scaleX + translateX,
+      bottom: (top + height) * scaleY + translateY,
+      left: left * scaleX + translateX,
+      top: top * scaleY + translateY
+    }
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:13:04
+   * @Desc: 获取两个节点的距离
+   */
+  getDistance(node1Rect, node2Rect) {
+    let center1 = this.getCenter(node1Rect)
+    let center2 = this.getCenter(node2Rect)
+    return Math.sqrt(
+      Math.pow(center1.x - center2.x, 2) + Math.pow(center1.y - center2.y, 2)
+    )
+  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 14:13:11
+   * @Desc: 获取节点的中心点
+   */
+  getCenter({ left, right, top, bottom }) {
+    return {
+      x: (left + right) / 2,
+      y: (top + bottom) / 2
+    }
+  }
+}
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -549,32 +549,30 @@ class Render {
    if (node.isRoot) {
      return
    }
-    let parent = node.parent
-    let childList = parent.children
-    // 要移动节点的索引
-    let index = childList.findIndex(item => {
+    // 移动节点
+    let nodeParent = node.parent
+    let nodeBorthers = nodeParent.children
+    let nodeIndex = nodeBorthers.findIndex(item => {
      return item === node
    })
-    if (index === -1) {
+    if (nodeIndex === -1) {
      return
    }
-    // 目标节点的索引
-    let existIndex = childList.findIndex(item => {
+    nodeBorthers.splice(nodeIndex, 1)
+    nodeParent.nodeData.children.splice(nodeIndex, 1)
+
+
+    // 目标节点
+    let existParent = exist.parent
+    let existBorthers = existParent.children
+    let existIndex = existBorthers.findIndex(item => {
      return item === exist
    })
    if (existIndex === -1) {
      return
    }
-    // 当前节点在目标节点前面
-    if (index < existIndex) {
-      existIndex = existIndex - 1
-    }
-    // 节点实例
-    childList.splice(index, 1)
-    childList.splice(existIndex, 0, node)
-    // 节点数据
-    parent.nodeData.children.splice(index, 1)
-    parent.nodeData.children.splice(existIndex, 0, node.nodeData)
+    existBorthers.splice(existIndex, 0, node)
+    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
    this.mindMap.render()
  }

@@ -588,34 +586,31 @@ class Render {
    if (node.isRoot) {
      return
    }
-    let parent = node.parent
-    let childList = parent.children
-    // 要移动节点的索引
-    let index = childList.findIndex(item => {
+    // 移动节点
+    let nodeParent = node.parent
+    let nodeBorthers = nodeParent.children
+    let nodeIndex = nodeBorthers.findIndex(item => {
      return item === node
    })
-    if (index === -1) {
+    if (nodeIndex === -1) {
      return
    }
-    // 目标节点的索引
-    let existIndex = childList.findIndex(item => {
+    nodeBorthers.splice(nodeIndex, 1)
+    nodeParent.nodeData.children.splice(nodeIndex, 1)
+
+
+    // 目标节点
+    let existParent = exist.parent
+    let existBorthers = existParent.children
+    let existIndex = existBorthers.findIndex(item => {
      return item === exist
    })
    if (existIndex === -1) {
      return
    }
-    // 当前节点在目标节点前面
-    if (index < existIndex) {
-      // do nothing
-    } else {
-      existIndex = existIndex + 1
-    }
-    // 节点实例
-    childList.splice(index, 1)
-    childList.splice(existIndex, 0, node)
-    // 节点数据
-    parent.nodeData.children.splice(index, 1)
-    parent.nodeData.children.splice(existIndex, 0, node.nodeData)
+    existIndex++
+    existBorthers.splice(existIndex, 0, node)
+    existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
    this.mindMap.render()
  }

@@ -1097,6 +1092,28 @@ class Render {
      this.mindMap.render()
    }
  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 11:46:57
+   * @Desc: 移动节点到画布中心
+   */
+  moveNodeToCenter(node) {
+    let halfWidth = this.mindMap.width / 2
+    let halfHeight = this.mindMap.height / 2
+    let { left, top, width, height } = node
+    let nodeCenterX = left + width / 2
+    let nodeCenterY = top + height / 2
+    let { state } = this.mindMap.view.getTransformData()
+    let targetX = halfWidth - state.x
+    let targetY = halfHeight - state.y
+    let offsetX = targetX - nodeCenterX
+    let offsetY = targetY - nodeCenterY
+    this.mindMap.view.translateX(offsetX)
+    this.mindMap.view.translateY(offsetY)
+    this.mindMap.view.setScale(1)
+  }
 }

 export default Render
--- a/simple-mind-map/src/TextEdit.js
+++ b/simple-mind-map/src/TextEdit.js
@@ -88,6 +88,9 @@ export default class TextEdit {
      this.textEditNode = document.createElement('div')
      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none;`
      this.textEditNode.setAttribute('contenteditable', true)
+      this.textEditNode.addEventListener('keyup', e => {
+        e.stopPropagation()
+      })
      document.body.appendChild(this.textEditNode)
    }
    node.style.domText(this.textEditNode, this.mindMap.view.scale)
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -213,6 +213,18 @@ class View {
    this.transform()
    this.mindMap.emit('scale', this.scale)
  }
+
+  /**
+   * javascript comment
+   * @Author: 王林25
+   * @Date: 2022-12-09 16:31:59
+   * @Desc: 设置缩放
+   */
+  setScale(scale) {
+    this.scale = scale
+    this.transform()
+    this.mindMap.emit('scale', this.scale)
+  }
 }

 export default View
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -4,7 +4,7 @@
    <Count v-if="!isZenMode"></Count>
    <Navigator :mindMap="mindMap"></Navigator>
    <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
-    <Outline></Outline>
+    <Outline :mindMap="mindMap"></Outline>
    <Style v-if="!isZenMode"></Style>
    <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
    <Theme :mindMap="mindMap"></Theme>
@@ -328,6 +328,11 @@ export default {
    top: 0px;
    width: 100%;
    height: 100%;
+
+    // left: 100px;
+    // top: 100px;
+    // right: 100px;
+    // bottom: 100px;
  }
 }
 </style>
--- a/web/src/pages/Edit/components/NodeHyperlink.vue
+++ b/web/src/pages/Edit/components/NodeHyperlink.vue
@@ -11,11 +11,12 @@
        v-model="link"
        size="mini"
        placeholder="http://xxxx.com/"
+        @keyup.native.stop
      ></el-input>
    </div>
    <div class="item">
      <span class="name">{{ $t('nodeHyperlink.name') }}</span>
-      <el-input v-model="linkTitle" size="mini"></el-input>
+      <el-input v-model="linkTitle" size="mini" @keyup.native.stop></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
--- a/web/src/pages/Edit/components/NodeNote.vue
+++ b/web/src/pages/Edit/components/NodeNote.vue
@@ -12,7 +12,7 @@
      v-model="note"
    >
    </el-input> -->
-    <div class="noteEditor" ref="noteEditor"></div>
+    <div class="noteEditor" ref="noteEditor" @keyup.stop></div>
    <!-- <div class="tip">换行请使用：Enter+Shift</div> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('dialog.cancel') }}</el-button>
--- a/web/src/pages/Edit/components/NodeTag.vue
+++ b/web/src/pages/Edit/components/NodeTag.vue
@@ -8,6 +8,7 @@
    <el-input
      v-model="tag"
      @keyup.native.enter="add"
+      @keyup.native.stop
      :disabled="tagArr.length >= max"
      :placeholder="$t('nodeTag.addTip')"
    >
--- a/web/src/pages/Edit/components/Outline.vue
+++ b/web/src/pages/Edit/components/Outline.vue
@@ -1,6 +1,24 @@
 <template>
  <Sidebar ref="sidebar" :title="$t('outline.title')">
-    <el-tree :data="data" :props="defaultProps" default-expand-all></el-tree>
+    <el-tree
+      class="outlineTree"
+      :data="data"
+      :props="defaultProps"
+      :expand-on-click-node="false"
+      default-expand-all
+    >
+      <span class="customNode" slot-scope="{ node, data }">
+        <span
+          class="nodeEdit"
+          :key="getKey()"
+          contenteditable="true"
+          @keydown.stop
+          @keyup.stop
+          @blur="onBlur($event, node)"
+          v-html="node.label"
+        ></span>
+      </span>
+    </el-tree>
  </Sidebar>
 </template>

@@ -18,12 +36,17 @@ export default {
  components: {
    Sidebar
  },
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
  data() {
    return {
      data: [],
      defaultProps: {
        label(data) {
-          return data.data.text
+          return data.data.text.replaceAll(/\n/g, '</br>')
        }
      }
    }
@@ -42,10 +65,68 @@ export default {
  },
  created() {
    this.$bus.$on('data_change', data => {
-      this.data = [data]
+      this.data = [this.mindMap.renderer.renderTree]
    })
+  },
+  methods: {
+    onBlur(e, node) {
+      node.data._node.setText(e.target.innerText)
+    },
+
+    getKey() {
+      return Math.random()
+    }
  }
 }
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.customNode {
+  width: 100%;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    width: 7px;
+    height: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 7px;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: none;
+    background: transparent;
+    display: none;
+  }
+
+  .nodeEdit {
+    outline: none;
+  }
+}
+
+.outlineTree {
+  /deep/ .el-tree-node__content {
+    height: auto;
+    margin: 5px 0;
+
+    .el-tree-node__expand-icon.is-leaf {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        content: '';
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        background-color: #c0c4cc;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+</style>
Author	SHA1	Message	Date
wanglin2	47328236f7	修复画布距窗口左上角不为0时节点拖拽出现偏移的问题	2022-12-30 10:52:04 +08:00
wanglin2	566147c530	修复没有激活节点时顺便按上面键都会触发自动聚焦的问题	2022-12-13 20:21:39 +08:00
wanglin2	54fad1ee08	打包	2022-12-13 20:00:03 +08:00
wanglin2	8c8e283a88	优化键盘导航寻找焦点的算法	2022-12-13 19:57:54 +08:00
wanglin2	4553bc37f5	'打包'	2022-12-09 16:56:28 +08:00
wanglin2	41b0b21354	'新增键盘导航，即通过方向键来切换激活的节点'	2022-12-09 16:53:42 +08:00
wanglin2	39b55b0cd7	支持在大纲直接编辑节点文本内容	2022-12-08 09:19:47 +08:00
wanglin2	ede01c069e	打包	2022-11-16 08:59:13 +08:00
wanglin2	aa56e53c4d	优化侧边栏显示和隐藏方式	2022-11-15 20:00:03 +08:00
wanglin2	3a723a15bf	优化备注显示	2022-11-14 19:59:21 +08:00
wanglin2	1b2da4eb72	新增禅模式	2022-11-14 19:25:25 +08:00
wanglin2	6f351d4cee	打包	2022-11-05 14:46:52 +08:00
wanglin2	dba93d4363	demo网站增加英文翻译	2022-11-05 14:42:15 +08:00
wanglin2	b46a94bd96	多语言开发中	2022-10-28 16:26:55 +08:00
wanglin2	fadd8217e8	'增加从excel导入的功能'	2022-10-24 15:16:27 +08:00
wanglin2	b0d898054e	打包	2022-10-24 10:31:35 +08:00
wanglin2	3e84892a28	修复在小屏幕下侧边栏和工具栏重叠的问题	2022-10-24 10:28:50 +08:00
wanglin2	f663f8d60a	增加eslint校验、prettier格式化	2022-10-19 16:33:09 +08:00
wanglin2	0aeee0ff28	优化小地图、优化拖拽性能	2022-10-19 09:54:38 +08:00
wanglin2	140e9cf893	'支持双击节点内图片进行大图预览'	2022-10-18 19:13:15 +08:00
wanglin2	89e426e522	优化本地文件编辑	2022-10-18 09:40:34 +08:00
wanglin2	c77062b660	打包	2022-10-17 09:25:21 +08:00
街角小林	bca2912390	Merge pull request #43 from huangyuanyin/main 优化地图组件卸载的时候把相关事件移除	2022-10-17 09:20:38 +08:00
liuzhanghao	ed7177e29d	优化地图组件卸载的时候把相关事件移除	2022-10-14 18:11:57 +08:00
wanglin2	12ca3ed556	Merge branch 'dev6' into main	2022-10-11 18:54:24 +08:00
wanglin2	d7de86209c	打包	2022-10-11 18:53:30 +08:00
wanglin2	e53c6cd559	优化：插入子节点时自动展开	2022-10-11 18:48:52 +08:00
wanglin2	352711c871	修复小地图关闭时报错的问题	2022-10-11 18:36:16 +08:00
wanglin2	d304ebc544	合并	2022-10-11 11:10:00 +08:00
wanglin2	27291fe5c9	更新版本	2022-10-11 11:08:58 +08:00
wanglin2	f714e47722	修改文档	2022-10-10 22:40:44 +08:00
wanglin2	ce135dd111	修改文档	2022-10-10 22:40:12 +08:00
wanglin2	fb4bfedef4	打包	2022-10-10 16:27:49 +08:00
wanglin2	5cbe5d2906	修复子节点收起状态复制时丢失的问题	2022-10-10 16:11:00 +08:00
wanglin2	b6c15164ac	更新文档	2022-10-10 15:02:22 +08:00
wanglin2	1960e96a19	打包	2022-10-10 14:39:09 +08:00
wanglin2	7a0fd5adfb	支持小地图	2022-10-10 14:31:43 +08:00
wanglin2	9ae40cff32	修改文档	2022-09-30 22:16:27 +08:00
wanglin2	0070cab9f1	打包	2022-09-30 14:48:08 +08:00
wanglin2	79ae876eeb	逻辑结构图、思维导图新增直线连接风格、直连风格	2022-09-30 14:44:40 +08:00
wanglin2	ca35b84308	逻辑结构图和思维导图支持直线连接线开发中	2022-09-25 22:07:21 +08:00
wanglin2	3b4f386900	打包	2022-09-24 20:42:53 +08:00
wanglin2	34ef1e908e	优化：手动创建节点时立即聚焦	2022-09-24 20:38:47 +08:00
wanglin2	6a3f016920	修复连线样式深度更新问题	2022-09-24 20:13:53 +08:00
wanglin2	d1ab67cd4c	支持新建、打开、	2022-09-24 17:08:11 +08:00
wanglin2	0d81f9ff9c	修改文档	2022-09-24 10:51:09 +08:00
wanglin2	471bd3c5e5	支持展开到指定层级	2022-09-24 10:49:40 +08:00
wanglin2	5d4cf8a3c3	支持展开到指定层级	2022-09-23 17:41:38 +08:00
wanglin2	5a5062ecaf	修复xmind8版本文件导入失败的问题	2022-09-23 16:16:08 +08:00
wanglin2	13c4b51f69	修改README	2022-09-21 21:02:17 +08:00
wanglin2	a3ddcc93e5	打包	2022-09-21 20:11:12 +08:00
wanglin2	365e51e2e9	支持导入.xmind文件	2022-09-21 20:07:46 +08:00
wanglin2	fd096c4444	修复根节点添加多个节点爆栈的问题	2022-09-21 09:38:41 +08:00
wanglin2	4c1786e127	导出svg增加title标签	2022-09-19 09:36:19 +08:00
wanglin2	bfeb59d43f	打包	2022-09-17 22:00:15 +08:00
wanglin2	aa998b1829	节点支持设置自定义线条样式	2022-09-17 16:18:38 +08:00
wanglin2	c8f5c94683	优化节点自定义线条样式	2022-09-17 15:09:34 +08:00
wanglin2	2aea7a3c88	节点支持自定义线条样式	2022-09-17 15:00:12 +08:00
wanglin2	9f16691cd6	修改文档	2022-09-13 22:30:45 +08:00
wanglin2	8363819933	修复节点展开收起的bug&打包	2022-09-13 10:34:20 +08:00
wanglin2	7d6149dbdf	打包	2022-09-13 09:43:18 +08:00
wanglin2	b088c40101	修改文档	2022-09-13 09:33:05 +08:00
wanglin2	5b5aab1c9e	节点支持多种形状开发完成	2022-09-12 23:07:01 +08:00
wanglin2	13a4b12ad4	打包	2022-09-01 11:11:33 +08:00
街角小林	3e59d84e6b	Merge pull request #26 from huangyuanyin/main fix 二级节点后无子节点，展开所有/收起所有操作后的报错信息	2022-09-01 11:07:38 +08:00
liuzhanghao	cd987a382a	fix	2022-09-01 10:28:26 +08:00
liuzhanghao	fdada41327	fix 二级节点后无子节点，展开所有/收起所有操作后的报错信息	2022-09-01 10:22:01 +08:00
wanglin	46d44e6753	更新readme	2022-08-22 21:03:08 +08:00
wanglin2	d63d9873ac	fix:修改右键菜单快捷键提示	2022-08-17 09:25:16 +08:00
wanglin2	7eeb7ab51b	fix:修复右键菜单快捷键提示错误	2022-08-16 18:48:11 +08:00
wanglin2	7a2075df51	fix:修复编辑节点文本时快捷键冲突的问题	2022-08-16 16:47:43 +08:00
wanglin	ba5ff54b9a	修复输入字符串/和快捷键/冲突问题	2022-08-14 09:43:00 +08:00
wanglin	8af44b2d45	打包	2022-08-08 21:24:02 +08:00
街角小林	72c989ae11	Update README.md	2022-08-08 20:09:31 +08:00
wanglin2	861309d517	支持导出为pdf	2022-08-08 20:06:59 +08:00
wanglin	2f0d64cf41	打包&发布新版本	2022-08-06 09:21:18 +08:00
wanglin2	5df8a28403	支持Ctrl+左键多选	2022-08-05 17:21:21 +08:00
wanglin2	3c9940e076	Merge branch 'dev' of https://github.com/wanglin2/mind-map into dev	2022-08-05 09:30:19 +08:00
wanglin2	0b11aff105	新增库打包&修改文档	2022-08-05 09:29:59 +08:00
wanglin	3e4fe06197	增加图标	2022-08-04 20:24:57 +08:00
wanglin2	8bf23f8397	修改文档	2022-08-04 15:06:07 +08:00
wanglin2	10d04549fc	新增快捷键	2022-08-04 14:48:52 +08:00
wanglin2	b4193d50a3	支持自由拖拽、修复一些bug	2022-08-04 11:39:17 +08:00
wanglin2	0620d31d0a	修复概要的一些bug	2022-08-02 08:59:05 +08:00
wanglin2	a804a5e2fa	修复拖拽节点时为隐藏概要内容的问题	2022-08-01 09:59:43 +08:00
wanglin2	06daffbaab	修复初始渲染时激活节点没有触发页面效果的问题	2022-08-01 09:51:53 +08:00
wanglin2	b901c08156	修复概要展开收起的定位错误问题	2022-08-01 09:36:25 +08:00
wanglin	e27eb63627	新增方法	2022-07-31 22:29:40 +08:00
wanglin	990a4e5c4c	修复概要定位问题	2022-07-31 20:46:40 +08:00
wanglin	7f79d4881d	修改及新增主题	2022-07-31 14:54:32 +08:00
wanglin	2d8643015f	概要开发中	2022-07-31 10:28:13 +08:00
wanglin	30f7713af1	更新版本	2022-07-30 08:21:43 +08:00
街角小林	7ab9db4bbd	Merge pull request #16 from harris2012/patch-2 fix typo	2022-07-29 21:59:53 +08:00
街角小林	fa7548afaf	Merge pull request #15 from harris2012/patch-1 Update Node.js	2022-07-29 21:57:05 +08:00
Harris Zhang	676efa792a	fix typo	2022-07-29 17:55:20 +08:00
Harris Zhang	9ffa1e2744	Update Node.js	2022-07-29 11:29:25 +08:00
街角小林	1108b29da0	Merge pull request #13 from harris2012/patch-1 Update index.js	2022-07-26 21:15:41 +08:00
Harris Zhang	b00d5f6adb	Update index.js	2022-07-26 19:12:47 +08:00
wanglin2	c6438668f2	fix:1.节点图标不能删除的问题；2.工具按钮置灰仍然可以点击的问题	2022-06-28 19:55:31 +08:00
wanglin2	608adb21e1	增加只读模式	2022-06-08 14:30:45 +08:00
wanglin	495cb4c62a	修改README	2022-05-10 23:09:54 +08:00
wanglin	3048cba1ae	发布0.1.6版本	2022-05-10 23:08:02 +08:00
wanglin2	5b1f5f803e	打包	2022-05-09 14:31:22 +08:00
wanglin2	0d79e28ec9	节点备注支持markdown及富文本、修复不能选中文字的问题	2022-05-09 14:24:11 +08:00
wanglin2	806be0b537	修复节点标注在节点激活后无法隐藏问题	2022-05-09 11:31:05 +08:00
wanglin2	c15b9be7ef	修复超链接、备注、标签等文字编辑时返回键和回车键与思维导图快捷键冲突的问题	2022-05-09 11:03:56 +08:00
wanglin	f6ac2c80ed	增加版本号	2021-11-25 22:25:26 +08:00
wanglin2	5f19509079	新增支持节点拖拽	2021-11-25 16:06:18 +08:00
wanglin2	4677b11dfb	'状态数据支持保存激活状态、视图状态（拖动位置、缩放值）'	2021-11-22 19:59:21 +08:00
wanglin	b3e9797b0e	修复存在激活节点时设置主题存在的问题	2021-08-05 22:29:02 +08:00
wanglin	f72deb0478	升级版本	2021-08-05 08:09:48 +08:00
wanglin	455e97074f	增加快捷键功能	2021-08-05 00:06:27 +08:00
wanglin	3e52fa6585	修复回退问题	2021-08-04 23:45:05 +08:00
wanglin	48172bc035	新增导出为json；优化一些细节	2021-08-04 07:26:01 +08:00
wanglin	09d1f82021	修改版本号及package.json	2021-08-01 11:58:08 +08:00
wanglin	786e183091	增加本地存储功能	2021-08-01 10:49:57 +08:00
wanglin2	0ebac39716	修复删除节点和节点编辑时的删除冲突问题	2021-07-27 14:17:58 +08:00
wanglin2	10b8a33ab7	'修改文章与打包'	2021-07-22 19:06:51 +08:00
wanglin2	72b9001b56	'打包'	2021-07-22 14:13:49 +08:00
wanglin2	1efabd44ec	'打包'	2021-07-22 09:36:50 +08:00
wanglin	5e66bd29ff	优化	2021-07-22 08:03:00 +08:00
wanglin	2f1114b722	修改文章	2021-07-21 22:50:46 +08:00
wanglin2	4428028146	'完成文章'	2021-07-21 20:24:37 +08:00
wanglin2	e660a74630	文章写作中	2021-07-20 20:18:03 +08:00
wanglin	8f29d63441	文章	2021-07-20 07:48:22 +08:00
wanglin	98afa6eb5b	修改文章	2021-07-19 07:39:34 +08:00
wanglin	c06971987d	添加图片	2021-07-18 22:47:03 +08:00
wanglin	e385ecf35d	优化与文档编写	2021-07-18 22:27:34 +08:00
wanglin	62fb0b15e0	完善开发文档	2021-07-16 19:33:01 +08:00
wanglin	19da1a4ff3	优化代码	2021-07-16 13:58:48 +08:00
wanglin	a798a40fab	基本完成	2021-07-16 13:42:37 +08:00
wanglin2	7982a1373f	'右键功能开发中'	2021-07-15 17:46:36 +08:00
wanglin2	a812637cf0	Merge branch 'main' of https://github.com/wanglin2/mind-map into main	2021-07-15 09:46:53 +08:00
wanglin2	53c4d3945a	'优化'	2021-07-15 09:46:27 +08:00
wanglin	2e7519cf29	右键菜单开发中	2021-07-14 23:57:36 +08:00
wanglin2	acad210d57	'修改样式'	2021-07-14 09:54:45 +08:00
wanglin2	ba5807932e	'打包'	2021-07-14 09:34:13 +08:00
wanglin	59d572ae18	修改配置	2021-07-14 08:13:23 +08:00
wanglin	14aa8659ee	修改配置	2021-07-14 08:09:23 +08:00
wanglin	59c8ed4ef8	打包	2021-07-14 07:38:30 +08:00
wanglin	b886a0572d	修改打包配置i	2021-07-14 07:34:06 +08:00
wanglin	42755cac8a	修改	2021-07-14 07:28:31 +08:00
wanglin	ab1306357e	上传打包文件	2021-07-13 23:29:22 +08:00
wanglin	fa506f4212	修改README	2021-07-13 23:20:41 +08:00
wanglin2	364aed858f	'基本完成'	2021-07-13 16:39:50 +08:00
wanglin	58703597e3	优化	2021-07-13 08:04:47 +08:00
wanglin	5d4b42d519	新增主题	2021-07-12 22:49:22 +08:00
wanglin2	cd55db7ed7	'完成部分结构'	2021-07-12 20:12:21 +08:00
wanglin2	ca9b3678dc	'优化及增加主题'	2021-07-12 14:55:50 +08:00
wanglin	395e802b6b	回退功能开发中	2021-07-12 07:56:38 +08:00
wanglin	f38b92a2e2	增加快捷键和全屏功能	2021-07-11 22:21:40 +08:00
wanglin	5c6fef71bd	完成多选操作	2021-07-11 13:33:06 +08:00
wanglin	f3780baedc	完成基本逻辑	2021-07-10 22:06:45 +08:00
wanglin	388656f6e0	日常提交	2021-07-04 22:53:36 +08:00
wanglin	df60f103cc	完成导出功能	2021-07-04 16:56:37 +08:00
wanglin	7a977d74dc	日常提交	2021-06-28 07:46:12 +08:00
wanglin	7336c57e80	提交	2021-06-26 00:03:39 +08:00
wanglin	66963ca3ac	完成节点内容设置及主题	2021-06-26 00:01:03 +08:00
wanglin2	1bb1afd1b7	Delete .DS_Store	2021-06-20 23:05:11 +08:00
wanglin2	52cfc40c24	Delete .DS_Store	2021-06-20 23:04:56 +08:00
wanglin	debb058889	完成节点内容布局	2021-06-20 23:03:23 +08:00
wanglin2	3d5e3ac9a0	修改忽略文件	2021-06-19 14:24:52 +08:00
wanglin2	a06cb2e031	重构	2021-06-19 14:04:05 +08:00