更新群二维码

Feat: 支持滚轮情况下，以光标为中心进行缩放

README.md

@@ -86,7 +86,7 @@ const mindMap = new MindMap({
 
 # License
 
-MIT
+[MIT](./LICENSE)
 
 # 微信交流群
 
@@ -96,11 +96,56 @@ MIT
 
 # 请作者喝杯咖啡
 
+开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡哟~
+
 > 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
 
-> 转账请备注哦~你的头像和名称会出现在[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
+> 转账请备注【思维导图】。你的头像和名字将会出现在下面和[文档页面](https://wanglin2.github.io/mind-map/#/doc/zh/introduction/%E8%AF%B7%E4%BD%9C%E8%80%85%E5%96%9D%E6%9D%AF%E5%92%96%E5%95%A1)
 
 <p>
   <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
   <img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
+</p>
+
+<p>
+    <span>
+        <img src="./web/src/assets/avatar/Think.jpg" style="width: 50px;height: 50px;" />
+        <span>Think</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/志斌.jpg" style="width: 50px;height: 50px;" />
+        <span>志斌</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
+        <span>小土渣的宇宙</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/qp.jpg" style="width: 50px;height: 50px;" />
+        <span>qp</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/ZXR.jpg" style="width: 50px;height: 50px;" />
+        <span>ZXR</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/花儿朵朵.jpg" style="width: 50px;height: 50px;" />
+        <span>花儿朵朵</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/suka.jpg" style="width: 50px;height: 50px;" />
+        <span>suka</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/Chris.jpg" style="width: 50px;height: 50px;" />
+        <span>Chris</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/水车.jpg" style="width: 50px;height: 50px;" />
+        <span>水车</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
+        <span>仓鼠</span>
+    </span>
 </p>

simple-mind-map/full.js

@@ -8,13 +8,22 @@ import Drag from './src/plugins/Drag.js'
 import Select from './src/plugins/Select.js'
 import AssociativeLine from './src/plugins/AssociativeLine'
 import RichText from './src/plugins/RichText'
+import NodeImgAdjust from './src/plugins/NodeImgAdjust.js'
+import TouchEvent from './src/plugins/TouchEvent.js'
+import Search from './src/plugins/Search.js'
 import xmind from './src/parse/xmind.js'
 import markdown from './src/parse/markdown.js'
 import icons from './src/svg/icons.js'
+import * as constants from './src/constants/constant.js'
+import themes from './src/themes/index.js'
+import * as defaultTheme from './src/themes/default.js'
 
 MindMap.xmind = xmind
 MindMap.markdown = markdown
 MindMap.iconList = icons.nodeIconList
+MindMap.constants = constants
+MindMap.themes = themes
+MindMap.defaultTheme = defaultTheme
 
 MindMap
   .usePlugin(MiniMap)
@@ -26,5 +35,8 @@ MindMap
   .usePlugin(Select)
   .usePlugin(AssociativeLine)
   .usePlugin(RichText)
+  .usePlugin(TouchEvent)
+  .usePlugin(NodeImgAdjust)
+  .usePlugin(Search)
 
 export default MindMap

simple-mind-map/index.js

@@ -7,9 +7,9 @@ import Style from './src/core/render/node/Style'
 import KeyCommand from './src/core/command/KeyCommand'
 import Command from './src/core/command/Command'
 import BatchExecution from './src/utils/BatchExecution'
-import { layoutValueList, CONSTANTS } from './src/constants/constant'
+import { layoutValueList, CONSTANTS, commonCaches } from './src/constants/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import { simpleDeepClone } from './src/utils'
+import { simpleDeepClone, getType } from './src/utils'
 import defaultTheme, { checkIsNodeSizeIndependenceConfig } from './src/themes/default'
 import { defaultOpt } from './src/constants/defaultOptions'
 
@@ -32,12 +32,12 @@ class MindMap {
     this.svg = SVG().addTo(this.el).size(this.width, this.height)
     this.draw = this.svg.group()
 
-    // 节点id
-    this.uid = 1
-
     // 初始化主题
     this.initTheme()
 
+    // 初始化缓存数据
+    this.initCache()
+
     // 事件类
     this.event = new Event({
       mindMap: this
@@ -132,6 +132,23 @@ class MindMap {
     this.event.off(event, fn)
   }
 
+  // 初始化缓存数据
+  initCache() {
+    Object.keys(commonCaches).forEach((key) => {
+      let type = getType(commonCaches[key])
+      let value = ''
+      switch(type) {
+        case 'Boolean':
+          value = false
+          break
+        default:
+          value = null
+          break
+      }
+      commonCaches[key] = value
+    })
+  }
+
   //  设置主题
   initTheme() {
     // 合并主题配置
@@ -194,7 +211,7 @@ class MindMap {
     this.opt.layout = layout
     this.view.reset()
     this.renderer.setLayout()
-    this.render()
+    this.render(null, CONSTANTS.CHANGE_LAYOUT)
   }
 
   //  执行命令
@@ -238,7 +255,7 @@ class MindMap {
 
   //  获取思维导图数据，节点树、主题、布局等
   getData(withConfig) {
-    let nodeData = this.command.removeDataUid(this.command.getCopyData())
+    let nodeData = this.command.getCopyData()
     let data = {}
     if (withConfig) {
       data = {

simple-mind-map/package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.0",
+  "version": "0.6.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.6.0",
+      "version": "0.6.7",
       "license": "MIT",
       "dependencies": {
         "@svgdotjs/svg.js": "^3.0.16",

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.6.3",
+  "version": "0.6.9",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/constants/constant.js

@@ -27,136 +27,169 @@ export const themeList = [
   {
     name: '默认',
     value: 'default',
+    dark: false
   },
   {
     name: '暗色2',
     value: 'dark2',
+    dark: true
   },
   {
     name: '天清绿',
     value: 'skyGreen',
+    dark: false
   },
   {
     name: '脑图经典2',
     value: 'classic2',
+    dark: false
   },
   {
     name: '脑图经典3',
     value: 'classic3',
+    dark: false
   },
   {
     name: '经典绿',
     value: 'classicGreen',
+    dark: false
   },
   {
     name: '经典蓝',
     value: 'classicBlue',
+    dark: false
   },
   {
     name: '天空蓝',
     value: 'blueSky',
+    dark: false
   },
   {
     name: '脑残粉',
     value: 'brainImpairedPink',
+    dark: false
   },
   {
     name: '暗色',
     value: 'dark',
+    dark: true
   },
   {
     name: '泥土黄',
     value: 'earthYellow',
+    dark: false
   },
   {
     name: '清新绿',
     value: 'freshGreen',
+    dark: false
   },
   {
     name: '清新红',
     value: 'freshRed',
+    dark: false
   },
   {
     name: '浪漫紫',
     value: 'romanticPurple',
+    dark: false
   },
   {
     name: '粉红葡萄',
     value: 'pinkGrape',
+    dark: false
   },
   {
     name: '薄荷',
     value: 'mint',
+    dark: false
   },
   {
     name: '金色vip',
     value: 'gold',
+    dark: false
   },
   {
     name: '活力橙',
     value: 'vitalityOrange',
+    dark: false
   },
   {
     name: '绿叶',
     value: 'greenLeaf',
+    dark: false
   },
   {
     name: '脑图经典',
     value: 'classic',
+    dark: true
   },
   {
     name: '脑图经典4',
     value: 'classic4',
+    dark: false
   },
   {
     name: '小黄人',
     value: 'minions',
+    dark: false
   },
   {
     name: '简约黑',
     value: 'simpleBlack',
+    dark: true
   },
   {
     name: '课程绿',
     value: 'courseGreen',
+    dark: false
   },
   {
     name: '咖啡',
     value: 'coffee',
+    dark: false
   },
   {
     name: '红色精神',
     value: 'redSpirit',
+    dark: false
   },
   {
     name: '黑色幽默',
     value: 'blackHumour',
+    dark: true
   },
   {
     name: '深夜办公室',
     value: 'lateNightOffice',
+    dark: true
   },
   {
     name: '黑金',
     value: 'blackGold',
+    dark: true
   },
   {
     name: '牛油果',
     value: 'avocado',
+    dark: false
   },
   {
     name: '秋天',
     value: 'autumn',
+    dark: false
   },
   {
     name: '橙汁',
     value: 'orangeJuice',
+    dark: true
   }
 ]
 
 // 常量
 export const CONSTANTS = {
   CHANGE_THEME: 'changeTheme',
+  CHANGE_LAYOUT: 'changeLayout',
   SET_DATA: 'setData',
   TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
   MODE: {
@@ -170,7 +203,8 @@ export const CONSTANTS = {
     CATALOG_ORGANIZATION: 'catalogOrganization',
     TIMELINE: 'timeline',
     TIMELINE2: 'timeline2',
-    FISHBONE: 'fishbone'
+    FISHBONE: 'fishbone',
+    VERTICAL_TIMELINE: 'verticalTimeline'
   },
   DIR: {
     UP: 'up',
@@ -206,9 +240,15 @@ export const CONSTANTS = {
     BOTTOM: 'bottom',
     CENTER: 'center'
   },
-  TIMELINE_DIR: {
+  LAYOUT_GROW_DIR: {
+    LEFT: 'left',
     TOP: 'top',
+    RIGHT: 'right',
     BOTTOM: 'bottom'
+  },
+  PASTE_TYPE: {
+    CLIP_BOARD: 'clipBoard',
+    CANVAS: 'canvas'
   }
 }
 
@@ -246,6 +286,10 @@ export const layoutList = [
     name: '时间轴2',
     value: CONSTANTS.LAYOUT.TIMELINE2,
   },
+  {
+    name: '竖向时间轴',
+    value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
+  },
   {
     name: '鱼骨图',
     value: CONSTANTS.LAYOUT.FISHBONE,
@@ -258,6 +302,7 @@ export const layoutValueList = [
   CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
   CONSTANTS.LAYOUT.TIMELINE,
   CONSTANTS.LAYOUT.TIMELINE2,
+  CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
   CONSTANTS.LAYOUT.FISHBONE
 ]
 
@@ -279,4 +324,9 @@ export const nodeDataNoStylePropList = [
   'resetRichText',
   'uid',
   'activeStyle'
-]
+]
+
+// 数据缓存
+export const commonCaches = {
+  measureCustomNodeContentSizeEl: null
+}

simple-mind-map/src/constants/defaultOptions.js

@@ -13,7 +13,9 @@ export const defaultOpt = {
   // 主题配置，会和所选择的主题进行合并
   themeConfig: {},
   // 放大缩小的增量比例
-  scaleRatio: 0.1,
+  scaleRatio: 0.2,
+  // 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
+  mouseScaleCenterUseMousePosition: true,
   // 最多显示几个标签
   maxTag: 5,
   // 导出图片时的内边距
@@ -59,6 +61,8 @@ export const defaultOpt = {
   mousewheelAction: CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM, // zoom（放大缩小）、move（上下移动）
   // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
   mousewheelMoveStep: 100,
+  // 当mousewheelAction设为zoom时，默认向前滚动是缩小，向后滚动是放大，如果该属性设为true，那么会反过来
+  mousewheelZoomActionReverse: false,
   // 默认插入的二级节点的文字
   defaultInsertSecondLevelNodeText: '二级节点',
   // 默认插入的二级以下节点的文字
@@ -75,10 +79,6 @@ export const defaultOpt = {
   },
   // 是否只有当鼠标在画布内才响应快捷键事件
   enableShortcutOnlyWhenMouseInSvg: true,
-  // 是否开启节点动画过渡
-  enableNodeTransitionMove: true,
-  // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms
-  nodeTransitionMoveDuration: 300,
   // 初始根节点的位置
   initRootNodePosition: null,
   // 导出png、svg、pdf时的图形内边距

simple-mind-map/src/core/command/Command.js

@@ -89,7 +89,7 @@ class Command {
       this.history.shift()
     }
     this.activeHistoryIndex = this.history.length - 1
-    this.mindMap.emit('data_change', this.removeDataUid(data))
+    this.mindMap.emit('data_change', data)
     this.mindMap.emit(
       'back_forward',
       this.activeHistoryIndex,
@@ -110,7 +110,7 @@ class Command {
         this.history.length
       )
       let data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.mindMap.emit('data_change', this.removeDataUid(data))
+      this.mindMap.emit('data_change', data)
       return data
     }
   }
@@ -125,7 +125,7 @@ class Command {
       this.activeHistoryIndex += step
       this.mindMap.emit('back_forward', this.activeHistoryIndex, this.history.length)
       let data = simpleDeepClone(this.history[this.activeHistoryIndex])
-      this.mindMap.emit('data_change', this.removeDataUid(data))
+      this.mindMap.emit('data_change', data)
       return data
     }
   }

simple-mind-map/src/core/command/KeyCommand.js

@@ -57,8 +57,11 @@ export default class KeyCommand {
       }
       Object.keys(this.shortcutMap).forEach(key => {
         if (this.checkKey(e, key)) {
-          e.stopPropagation()
-          e.preventDefault()
+          // 粘贴事件不组织，因为要监听paste事件
+          if (!this.checkKey(e, 'Control+v')) {
+            e.stopPropagation()
+            e.preventDefault()
+          }
           this.shortcutMap[key].forEach(fn => {
             fn()
           })

simple-mind-map/src/core/render/Render.js

@@ -4,9 +4,16 @@ import MindMap from '../../layouts/MindMap'
 import CatalogOrganization from '../../layouts/CatalogOrganization'
 import OrganizationStructure from '../../layouts/OrganizationStructure'
 import Timeline from '../../layouts/Timeline'
+import VerticalTimeline from '../../layouts/VerticalTimeline'
 import Fishbone from '../../layouts/Fishbone'
 import TextEdit from './TextEdit'
-import { copyNodeTree, simpleDeepClone, walk } from '../../utils'
+import {
+  copyNodeTree,
+  simpleDeepClone,
+  walk,
+  bfsWalk,
+  loadImage
+} from '../../utils'
 import { shapeList } from './node/Shape'
 import { lineStyleProps } from '../../themes/default'
 import { CONSTANTS } from '../../constants/constant'
@@ -25,8 +32,10 @@ const layouts = {
   [CONSTANTS.LAYOUT.TIMELINE]: Timeline,
   // 时间轴2
   [CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
+  // 竖向时间轴
+  [CONSTANTS.LAYOUT.VERTICAL_TIMELINE]: VerticalTimeline,
   // 鱼骨图
-  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
+  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone
 }
 
 //  渲染
@@ -57,6 +66,12 @@ class Render {
     this.root = null
     // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改
     this.textEdit = new TextEdit(this)
+    // 当前复制的数据
+    this.lastBeingCopyData = null
+    this.beingCopyData = null
+    this.beingPasteText = ''
+    this.beingPasteImgSize = 0
+    this.currentBeingPasteType = ''
     // 布局
     this.setLayout()
     // 绑定事件
@@ -79,18 +94,24 @@ class Render {
   //   绑定事件
   bindEvent() {
     // 点击事件
-    this.mindMap.on('draw_click', (e) => {
+    this.mindMap.on('draw_click', e => {
       // 清除激活状态
       let isTrueClick = true
       let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
       if (useLeftKeySelectionRightKeyDrag) {
         let mousedownPos = this.mindMap.event.mousedownPos
-        isTrueClick = Math.abs(e.clientX - mousedownPos.x) <= 5 && Math.abs(e.clientY - mousedownPos.y) <= 5
+        isTrueClick =
+          Math.abs(e.clientX - mousedownPos.x) <= 5 &&
+          Math.abs(e.clientY - mousedownPos.y) <= 5
       }
       if (isTrueClick && this.activeNodeList.length > 0) {
         this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
       }
     })
+    // 粘贴事件
+    this.mindMap.on('paste', data => {
+      this.onPaste(data)
+    })
   }
 
   //  注册命令
@@ -192,6 +213,9 @@ class Render {
     // 设置节点形状
     this.setNodeShape = this.setNodeShape.bind(this)
     this.mindMap.command.add('SET_NODE_SHAPE', this.setNodeShape)
+    // 定位节点
+    this.goTargetNode = this.goTargetNode.bind(this)
+    this.mindMap.command.add('GO_TARGET_NODE', this.goTargetNode)
   }
 
   //  注册快捷键
@@ -209,7 +233,7 @@ class Render {
     }
     this.mindMap.keyCommand.addShortcut('Enter', this.insertNodeWrap)
     // 插入概要
-    this.mindMap.keyCommand.addShortcut('Control+s', this.addGeneralization)
+    this.mindMap.keyCommand.addShortcut('Control+g', this.addGeneralization)
     // 展开/收起节点
     this.toggleActiveExpand = this.toggleActiveExpand.bind(this)
     this.mindMap.keyCommand.addShortcut('/', this.toggleActiveExpand)
@@ -236,6 +260,14 @@ class Render {
     // 下移节点
     this.mindMap.keyCommand.addShortcut('Control+Down', this.downNode)
     // 复制节点、剪切节点、粘贴节点的快捷键需开发者自行注册实现，可参考demo
+    this.copy = this.copy.bind(this)
+    this.mindMap.keyCommand.addShortcut('Control+c', this.copy)
+    this.mindMap.keyCommand.addShortcut('Control+v', () => {
+      // 隐藏输入框可能会失去焦点，所以要重新聚焦
+      this.textEdit.focusHiddenInput()
+    })
+    this.cut = this.cut.bind(this)
+    this.mindMap.keyCommand.addShortcut('Control+x', this.cut)
   }
 
   //  开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
@@ -256,7 +288,6 @@ class Render {
 
   //   渲染
   render(callback = () => {}, source) {
-    let t = Date.now()
     // 如果当前还没有渲染完毕，不再触发渲染
     if (this.isRendering) {
       // 等待当前渲染完毕后再进行一次渲染
@@ -276,7 +307,7 @@ class Render {
     // 计算布局
     this.layout.doLayout(root => {
       // 删除本次渲染时不再需要的节点
-      Object.keys(this.lastNodeCache).forEach((uid) => {
+      Object.keys(this.lastNodeCache).forEach(uid => {
         if (!this.nodeCache[uid]) {
           this.lastNodeCache[uid].destroy()
           if (this.lastNodeCache[uid].parent) {
@@ -287,7 +318,7 @@ class Render {
       // 更新根节点
       this.root = root
       // 渲染节点
-      const onEnd = () => {
+      this.root.render(() => {
         this.isRendering = false
         this.mindMap.emit('node_tree_render_end')
         callback && callback()
@@ -296,22 +327,13 @@ class Render {
           this.render(callback, source)
         } else {
           // 触发一次保存，因为修改了渲染树的数据
-          if (this.mindMap.richText && [CONSTANTS.CHANGE_THEME, CONSTANTS.SET_DATA].includes(source)) {
+          if (
+            this.mindMap.richText &&
+            [CONSTANTS.CHANGE_THEME, CONSTANTS.SET_DATA].includes(source)
+          ) {
             this.mindMap.command.addHistory()
           }
         }
-      }
-      let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
-      this.mindMap.opt
-      this.root.render(() => {
-        let dur = Date.now() - t
-        if (enableNodeTransitionMove && dur <= nodeTransitionMoveDuration) {
-          setTimeout(() => {
-            onEnd()
-          }, nodeTransitionMoveDuration - dur);
-        } else {
-          onEnd()
-        }
       })
     })
     this.mindMap.emit('node_active', null, this.activeNodeList)
@@ -413,7 +435,7 @@ class Render {
   // 规范指定节点数据
   formatAppointNodes(appointNodes) {
     if (!appointNodes) return []
-    return Array.isArray(appointNodes) ? appointNodes: [appointNodes]
+    return Array.isArray(appointNodes) ? appointNodes : [appointNodes]
   }
 
   //  插入同级节点，多个节点只会操作第一个节点
@@ -422,7 +444,11 @@ class Render {
     if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
       return
     }
-    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
+    this.textEdit.hideEditTextBox()
+    let {
+      defaultInsertSecondLevelNodeText,
+      defaultInsertBelowSecondLevelNodeText
+    } = this.mindMap.opt
     let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     let first = list[0]
     if (first.isGeneralization) {
@@ -431,16 +457,22 @@ class Render {
     if (first.isRoot) {
       this.insertChildNode(openEdit, appointNodes, appointData)
     } else {
-      let text = first.layerIndex === 1 ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
+      let text =
+        first.layerIndex === 1
+          ? defaultInsertSecondLevelNodeText
+          : defaultInsertBelowSecondLevelNodeText
       if (first.layerIndex === 1) {
         first.parent.destroy()
       }
       let index = this.getNodeIndex(first)
+      let isRichText = !!this.mindMap.richText
       first.parent.nodeData.children.splice(index + 1, 0, {
         inserting: openEdit,
         data: {
           text: text,
           expand: true,
+          richText: isRichText,
+          resetRichText: isRichText,
           ...(appointData || {})
         },
         children: []
@@ -455,7 +487,11 @@ class Render {
     if (this.activeNodeList.length <= 0 && appointNodes.length <= 0) {
       return
     }
-    let { defaultInsertSecondLevelNodeText, defaultInsertBelowSecondLevelNodeText } = this.mindMap.opt
+    this.textEdit.hideEditTextBox()
+    let {
+      defaultInsertSecondLevelNodeText,
+      defaultInsertBelowSecondLevelNodeText
+    } = this.mindMap.opt
     let list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     list.forEach(node => {
       if (node.isGeneralization) {
@@ -464,12 +500,17 @@ class Render {
       if (!node.nodeData.children) {
         node.nodeData.children = []
       }
-      let text = node.isRoot ? defaultInsertSecondLevelNodeText : defaultInsertBelowSecondLevelNodeText
+      let text = node.isRoot
+        ? defaultInsertSecondLevelNodeText
+        : defaultInsertBelowSecondLevelNodeText
+      let isRichText = !!this.mindMap.richText
       node.nodeData.children.push({
         inserting: openEdit,
         data: {
           text: text,
           expand: true,
+          richText: isRichText,
+          resetRichText: isRichText,
           ...(appointData || {})
         },
         children: []
@@ -537,13 +578,81 @@ class Render {
     this.mindMap.render()
   }
 
+  // 复制节点
+  copy() {
+    this.beingCopyData = this.copyNode()
+  }
+
+  // 剪切节点
+  cut() {
+    this.mindMap.execCommand('CUT_NODE', copyData => {
+      this.beingCopyData = copyData
+    })
+  }
+
+  // 粘贴节点
+  paste() {
+    if (this.beingCopyData) {
+      this.mindMap.execCommand('PASTE_NODE', this.beingCopyData)
+    }
+  }
+
+  // 粘贴事件
+  async onPaste({ text, img }) {
+    // 检查剪切板数据是否有变化
+    // 通过图片大小来判断图片是否发生变化，可能是不准确的，但是目前没有其他好方法
+    const imgSize = img ? img.size : 0
+    if (this.beingPasteText !== text || this.beingPasteImgSize !== imgSize) {
+      this.currentBeingPasteType = CONSTANTS.PASTE_TYPE.CLIP_BOARD
+      this.beingPasteText = text
+      this.beingPasteImgSize = imgSize
+    }
+    // 检查要粘贴的节点数据是否有变化，节点优先级高于剪切板
+    if (this.lastBeingCopyData !== this.beingCopyData) {
+      this.lastBeingCopyData = this.beingCopyData
+      this.currentBeingPasteType = CONSTANTS.PASTE_TYPE.CANVAS
+    }
+    // 粘贴剪切板的数据
+    if (this.currentBeingPasteType === CONSTANTS.PASTE_TYPE.CLIP_BOARD) {
+      // 存在文本，则创建子节点
+      if (text) {
+        this.mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
+          text
+        })
+      }
+      // 存在图片，则添加到当前激活节点
+      if (img) {
+        try {
+          let imgData = await loadImage(img)
+          if (this.activeNodeList.length > 0) {
+            this.activeNodeList.forEach(node => {
+              this.mindMap.execCommand('SET_NODE_IMAGE', node, {
+                url: imgData.url,
+                title: '',
+                width: imgData.size.width,
+                height: imgData.size.height
+              })
+            })
+          }
+        } catch (error) {
+          console.log(error)
+        }
+      }
+    } else {
+      // 粘贴节点数据
+      this.paste()
+    }
+  }
+
   //  将节点移动到另一个节点的前面
   insertBefore(node, exist) {
     if (node.isRoot) {
       return
     }
     // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
-    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
+    let nodeLayerChanged =
+      (node.layerIndex === 1 && exist.layerIndex !== 1) ||
+      (node.layerIndex !== 1 && exist.layerIndex === 1)
     // 移动节点
     let nodeParent = node.parent
     let nodeBorthers = nodeParent.children
@@ -580,7 +689,9 @@ class Render {
       return
     }
     // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
-    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
+    let nodeLayerChanged =
+      (node.layerIndex === 1 && exist.layerIndex !== 1) ||
+      (node.layerIndex !== 1 && exist.layerIndex === 1)
     // 移动节点
     let nodeParent = node.parent
     let nodeBorthers = nodeParent.children
@@ -620,7 +731,7 @@ class Render {
     }
     let isAppointNodes = appointNodes.length > 0
     let list = isAppointNodes ? appointNodes : this.activeNodeList
-    let root = list.find((node) => {
+    let root = list.find(node => {
       return node.isRoot
     })
     if (root) {
@@ -693,11 +804,11 @@ class Render {
     if (node.isRoot) {
       return
     }
-    let copyData = copyNodeTree({}, node, false, true)
+    // let copyData = copyNodeTree({}, node, false, true)
     this.removeActiveNode(node)
     this.removeOneNode(node)
     this.mindMap.emit('node_active', null, this.activeNodeList)
-    toNode.nodeData.children.push(copyData)
+    toNode.nodeData.children.push(node.nodeData)
     this.mindMap.render()
     if (toNode.isRoot) {
       toNode.destroy()
@@ -706,7 +817,7 @@ class Render {
 
   //   粘贴节点到节点
   pasteNode(data) {
-    if (this.activeNodeList.length <= 0) {
+    if (this.activeNodeList.length <= 0 || !data) {
       return
     }
     this.activeNodeList.forEach(item => {
@@ -864,18 +975,20 @@ class Render {
   setNodeText(node, text, richText) {
     this.setNodeDataRender(node, {
       text,
-      richText
+      richText,
+      resetRichText: richText
     })
   }
 
   //  设置节点图片
-  setNodeImage(node, { url, title, width, height }) {
+  setNodeImage(node, { url, title, width, height, custom = false }) {
     this.setNodeDataRender(node, {
       image: url,
       imageTitle: title || '',
       imageSize: {
         width,
-        height
+        height,
+        custom
       }
     })
   }
@@ -988,6 +1101,20 @@ class Render {
     })
   }
 
+  // 定位到指定节点
+  goTargetNode(node, callback = () => {}) {
+    let uid = typeof node === 'string' ? node : node.nodeData.data.uid
+    if (!uid) return
+    this.expandToNodeUid(uid, () => {
+      let targetNode = this.findNodeByUid(uid)
+      if (targetNode) {
+        targetNode.active()
+        this.moveNodeToCenter(targetNode)
+        callback()
+      }
+    })
+  }
+
   //  更新节点数据
   setNodeData(node, data) {
     Object.keys(data).forEach(key => {
@@ -996,7 +1123,7 @@ class Render {
   }
 
   //  设置节点数据，并判断是否渲染
-  setNodeDataRender(node, data) {
+  setNodeDataRender(node, data, notRender = false) {
     this.setNodeData(node, data)
     let changed = node.reRender()
     if (changed) {
@@ -1004,7 +1131,7 @@ class Render {
         // 概要节点
         node.generalizationBelongNode.updateGeneralization()
       }
-      this.mindMap.render()
+      if (!notRender) this.mindMap.render()
     }
   }
 
@@ -1024,6 +1151,44 @@ class Render {
     this.mindMap.view.translateY(offsetY)
     this.mindMap.view.setScale(1)
   }
+
+  // 展开到指定uid的节点
+  expandToNodeUid(uid, callback = () => {}) {
+    let parentsList = []
+    const cache = {}
+    bfsWalk(this.renderTree, (node, parent) => {
+      if (node.data.uid === uid) {
+        parentsList = parent ? [...cache[parent.data.uid], parent] : []
+        return 'stop'
+      } else {
+        cache[node.data.uid] = parent ? [...cache[parent.data.uid], parent] : []
+      }
+    })
+    let needRender = false
+    parentsList.forEach(node => {
+      if (!node.data.expand) {
+        needRender = true
+        node.data.expand = true
+      }
+    })
+    if (needRender) {
+      this.mindMap.render(callback)
+    } else {
+      callback()
+    }
+  }
+
+  // 根据uid找到对应的节点实例
+  findNodeByUid(uid) {
+    let res = null
+    walk(this.root, null, node => {
+      if (node.nodeData.data.uid === uid) {
+        res = node
+        return true
+      }
+    })
+    return res
+  }
 }
 
 export default Render

simple-mind-map/src/core/render/TextEdit.js

@@ -10,11 +10,14 @@ export default class TextEdit {
     this.currentNode = null
     // 文本编辑框
     this.textEditNode = null
+    // 隐藏的文本输入框
+    this.hiddenInputEl = null
     // 文本编辑框是否显示
     this.showTextEdit = false
     // 如果编辑过程中缩放画布了，那么缓存当前编辑的内容
     this.cacheEditingText = ''
     this.bindEvent()
+    this.createHiddenInput()
   }
 
   //  事件
@@ -46,6 +49,10 @@ export default class TextEdit {
     this.mindMap.on('before_node_active', () => {
       this.hideEditTextBox()
     })
+    // 节点激活事件
+    this.mindMap.on('node_active', () => {
+      this.focusHiddenInput()
+    })
     // 注册编辑快捷键
     this.mindMap.keyCommand.addShortcut('F2', () => {
       if (this.renderer.activeNodeList.length <= 0) {
@@ -56,16 +63,57 @@ export default class TextEdit {
     this.mindMap.on('scale', this.onScale)
   }
 
+  // 创建一个隐藏的文本输入框
+  createHiddenInput() {
+    if (this.hiddenInputEl) return
+    this.hiddenInputEl = document.createElement('input')
+    this.hiddenInputEl.type = 'text'
+    this.hiddenInputEl.style.cssText = `
+      position: fixed;
+      left: -99999px;
+      top: -99999px;
+    `
+    // 监听粘贴事件
+    this.hiddenInputEl.addEventListener('paste', async event => {
+      event.preventDefault()
+      const text = (event.clipboardData || window.clipboardData).getData('text')
+      const files = event.clipboardData.files
+      let img = null
+      if (files.length > 0) {
+        for (let i = 0; i < files.length; i++) {
+          if (/^image\//.test(files[i].type)) {
+            img = files[i]
+            break
+          }
+        }
+      }
+      this.mindMap.emit('paste', {
+        text,
+        img
+      })
+    })
+    document.body.appendChild(this.hiddenInputEl)
+  }
+
+  // 让隐藏的文本输入框聚焦
+  focusHiddenInput() {
+    if (this.hiddenInputEl) this.hiddenInputEl.focus()
+  }
+
   //  注册临时快捷键
   registerTmpShortcut() {
     // 注册回车快捷键
     this.mindMap.keyCommand.addShortcut('Enter', () => {
       this.hideEditTextBox()
     })
+    this.mindMap.keyCommand.addShortcut('Tab', () => {
+      this.hideEditTextBox()
+    })
   }
 
   //  显示文本编辑框
-  async show(node) {
+  // isInserting：是否是刚创建的节点
+  async show(node, e, isInserting = false) {
     // 使用了自定义节点内容那么不响应编辑事件
     if (node.isUseCustomNodeContent()) {
       return
@@ -74,7 +122,7 @@ export default class TextEdit {
     if (typeof beforeTextEdit === 'function') {
       let isShow = false
       try {
-        isShow = await beforeTextEdit(node)
+        isShow = await beforeTextEdit(node, isInserting)
       } catch (error) {
         isShow = false
       }
@@ -85,7 +133,7 @@ export default class TextEdit {
     this.mindMap.view.translateXY(offsetLeft, offsetTop)
     let rect = node._textData.node.node.getBoundingClientRect()
     if (this.mindMap.richText) {
-      this.mindMap.richText.showEditText(node, rect)
+      this.mindMap.richText.showEditText(node, rect, isInserting)
       return
     }
     this.showEditTextBox(node, rect)
@@ -95,7 +143,8 @@ export default class TextEdit {
   onScale() {
     if (!this.currentNode) return
     if (this.mindMap.richText) {
-      this.mindMap.richText.cacheEditingText = this.mindMap.richText.getEditText()
+      this.mindMap.richText.cacheEditingText =
+        this.mindMap.richText.getEditText()
       this.mindMap.richText.showTextEdit = false
     } else {
       this.cacheEditingText = this.getEditText()
@@ -123,7 +172,9 @@ export default class TextEdit {
     let scale = this.mindMap.view.scale
     let lineHeight = node.style.merge('lineHeight')
     let fontSize = node.style.merge('fontSize')
-    let textLines = (this.cacheEditingText || node.nodeData.data.text).split(/\n/gim)
+    let textLines = (this.cacheEditingText || node.nodeData.data.text).split(
+      /\n/gim
+    )
     let isMultiLine = node._textData.node.attr('data-ismultiLine') === 'true'
     node.style.domText(this.textEditNode, scale, isMultiLine)
     this.textEditNode.style.zIndex = this.mindMap.opt.nodeTextEditZIndex
@@ -133,9 +184,12 @@ export default class TextEdit {
     this.textEditNode.style.left = rect.left + 'px'
     this.textEditNode.style.top = rect.top + 'px'
     this.textEditNode.style.display = 'block'
-    this.textEditNode.style.maxWidth = this.mindMap.opt.textAutoWrapWidth * scale + 'px'
+    this.textEditNode.style.maxWidth =
+      this.mindMap.opt.textAutoWrapWidth * scale + 'px'
     if (isMultiLine && lineHeight !== 1) {
-      this.textEditNode.style.transform = `translateY(${-((lineHeight * fontSize - fontSize) / 2) * scale}px)`
+      this.textEditNode.style.transform = `translateY(${
+        -((lineHeight * fontSize - fontSize) / 2) * scale
+      }px)`
     }
     this.showTextEdit = true
     // 选中文本

simple-mind-map/src/core/render/node/Node.js

@@ -269,15 +269,7 @@ class Node {
     this.group.add(this.shapeNode)
     this.updateNodeShape()
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      if (!this._unVisibleRectRegionNode) {
-        this._unVisibleRectRegionNode = new Rect()
-      }
-      this._unVisibleRectRegionNode.fill({
-        color: 'transparent'
-      }).size(this.expandBtnSize, height).x(width).y(0)
-      this.group.add(this._unVisibleRectRegionNode)
-    }
+    this.renderExpandBtnPlaceholderRect()
     // 概要节点添加一个带所属节点id的类名
     if (this.isGeneralization && this.generalizationBelongNode) {
       this.group.addClass('generalization_' + this.generalizationBelongNode.uid)
@@ -289,7 +281,7 @@ class Node {
       foreignObject.height(height)
       foreignObject.add(SVG(this._customNodeContent))
       this.group.add(foreignObject)
-      return 
+      return
     }
     // 图片节点
     let imgHeight = 0
@@ -364,6 +356,21 @@ class Node {
     this.group.add(textContentNested)
   }
 
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnPlaceholderRect() {
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      let { width, height } = this
+      if (!this._unVisibleRectRegionNode) {
+        this._unVisibleRectRegionNode = new Rect()
+        this._unVisibleRectRegionNode.fill({
+          color: 'transparent'
+        })
+      }
+      this.group.add(this._unVisibleRectRegionNode)
+      this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this)
+    }
+  }
+
   // 给节点绑定事件
   bindGroupEvent() {
     // 单击事件，选中节点
@@ -433,7 +440,8 @@ class Node {
     // 右键菜单事件
     this.group.on('contextmenu', e => {
       // 按住ctrl键点击鼠标左键不知为何触发的是contextmenu事件
-      if (this.mindMap.opt.readonly || e.ctrlKey) {// || this.isGeneralization
+      if (this.mindMap.opt.readonly || e.ctrlKey) {
+        // || this.isGeneralization
         return
       }
       e.stopPropagation()
@@ -467,8 +475,9 @@ class Node {
     if (!this.group) {
       return
     }
-    let { enableNodeTransitionMove, nodeTransitionMoveDuration, alwaysShowExpandBtn } =
-      this.mindMap.opt
+    let {
+      alwaysShowExpandBtn
+    } = this.mindMap.opt
     if (alwaysShowExpandBtn) {
       // 需要移除展开收缩按钮
       if (this._expandBtn && this.nodeData.children.length <= 0) {
@@ -492,13 +501,7 @@ class Node {
     let t = this.group.transform()
     // 如果节点位置没有变化，则返回
     if (this.left === t.translateX && this.top === t.translateY) return
-    if (!isLayout && enableNodeTransitionMove) {
-      this.group
-        .animate(nodeTransitionMoveDuration)
-        .translate(this.left - t.translateX, this.top - t.translateY)
-    } else {
-      this.group.translate(this.left - t.translateX, this.top - t.translateY)
-    }
+    this.group.translate(this.left - t.translateX, this.top - t.translateY)
   }
 
   // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置
@@ -520,8 +523,6 @@ class Node {
 
   //  递归渲染
   render(callback = () => {}) {
-    let { enableNodeTransitionMove, nodeTransitionMoveDuration } =
-      this.mindMap.opt
     // 节点
     // 重新渲染连线
     this.renderLine()
@@ -543,6 +544,10 @@ class Node {
         this.needLayout = false
         this.layout()
       }
+      if (this.needRerenderExpandBtnPlaceholderRect) {
+        this.needRerenderExpandBtnPlaceholderRect = false
+        this.renderExpandBtnPlaceholderRect()
+      }
       this.update()
     }
     // 子节点
@@ -565,20 +570,14 @@ class Node {
         })
       )
     } else {
-      if (enableNodeTransitionMove && !isLayout) {
-        setTimeout(() => {
-          callback()
-        }, nodeTransitionMoveDuration)
-      } else {
-        callback()
-      }
+      callback()
     }
     // 手动插入的节点立即获得焦点并且开启编辑模式
     if (this.nodeData.inserting) {
       delete this.nodeData.inserting
       this.active()
       setTimeout(() => {
-        this.mindMap.emit('node_dblclick', this)
+        this.mindMap.emit('node_dblclick', this, null, true)
       }, 0)
     }
   }
@@ -783,7 +782,7 @@ class Node {
 
   //  获取padding值
   getPaddingVale() {
-    let { isActive }= this.nodeData.data
+    let { isActive } = this.nodeData.data
     return {
       paddingX: this.getStyle('paddingX', true, isActive),
       paddingY: this.getStyle('paddingY', true, isActive)

simple-mind-map/src/core/render/node/nodeCreateContents.js

@@ -1,7 +1,7 @@
 import { measureText, resizeImgSize, getTextFromHtml } from '../../../utils'
 import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
 import iconsSvg from '../../../svg/icons'
-import { CONSTANTS } from '../../../constants/constant'
+import { CONSTANTS, commonCaches } from '../../../constants/constant'
 
 //  创建图片节点
 function createImgNode() {
@@ -17,6 +17,15 @@ function createImgNode() {
   node.on('dblclick', e => {
     this.mindMap.emit('node_img_dblclick', this, e)
   })
+  node.on('mouseenter', e => {
+    this.mindMap.emit('node_img_mouseenter', this, node, e)
+  })
+  node.on('mouseleave', e => {
+    this.mindMap.emit('node_img_mouseleave', this, node, e)
+  })
+  node.on('mousemove', e => {
+    this.mindMap.emit('node_img_mousemove', this, node, e)
+  })
   return {
     node,
     width: imgSize[0],
@@ -26,9 +35,12 @@ function createImgNode() {
 
 //  获取图片显示宽高
 function getImgShowSize() {
+  const { custom, width, height } = this.nodeData.data.imageSize
+  // 如果是自定义了图片的宽高，那么不受最大宽高限制
+  if (custom) return [width, height]
   return resizeImgSize(
-    this.nodeData.data.imageSize.width,
-    this.nodeData.data.imageSize.height,
+    width,
+    height,
     this.mindMap.themeConfig.imgMaxWidth,
     this.mindMap.themeConfig.imgMaxHeight
   )
@@ -89,7 +101,7 @@ function createRichTextNode() {
   el.style.maxWidth = this.mindMap.opt.textAutoWrapWidth + 'px'
   this.mindMap.el.appendChild(div)
   let { width, height } = el.getBoundingClientRect()
-  width = Math.ceil(width)
+  width = Math.ceil(width) + 1// 修复getBoundingClientRect方法对实际宽度是小数的元素获取到的值是整数，导致宽度不够文本发生换行的问题
   height = Math.ceil(height)
   g.attr('data-width', width)
   g.attr('data-height', height)
@@ -281,20 +293,19 @@ function createNoteNode() {
 }
 
 // 测量自定义节点内容元素的宽高
-let warpEl = null
 function measureCustomNodeContentSize (content) {
-  if (!warpEl) {
-    warpEl = document.createElement('div')
-    warpEl.style.cssText = `
+  if (!commonCaches.measureCustomNodeContentSizeEl) {
+    commonCaches.measureCustomNodeContentSizeEl = document.createElement('div')
+    commonCaches.measureCustomNodeContentSizeEl.style.cssText = `
       position: fixed;
       left: -99999px;
       top: -99999px;
     `
-    this.mindMap.el.appendChild(warpEl)
+    this.mindMap.el.appendChild(commonCaches.measureCustomNodeContentSizeEl)
   }
-  warpEl.innerHTML = ''
-  warpEl.appendChild(content)
-  let rect = warpEl.getBoundingClientRect()
+  commonCaches.measureCustomNodeContentSizeEl.innerHTML = ''
+  commonCaches.measureCustomNodeContentSizeEl.appendChild(content)
+  let rect = commonCaches.measureCustomNodeContentSizeEl.getBoundingClientRect()
   return {
     width: rect.width,
     height: rect.height

simple-mind-map/src/core/render/node/nodeGeneralization.js

@@ -1,4 +1,5 @@
 import Node from './Node'
+import { createUid } from '../../../utils/index'
 
 //  检查是否存在概要
 function checkHasGeneralization () {
@@ -18,7 +19,7 @@ function createGeneralizationNode () {
       data: {
         data: this.nodeData.data.generalization
       },
-      uid: this.mindMap.uid++,
+      uid: createUid(),
       renderer: this.renderer,
       mindMap: this.mindMap,
       draw: this.draw,
@@ -35,15 +36,14 @@ function createGeneralizationNode () {
 
 //  更新概要节点
 function updateGeneralization () {
+  if (this.isGeneralization) return
   this.removeGeneralization()
   this.createGeneralizationNode()
 }
 
 //  渲染概要节点
 function renderGeneralization () {
-  if (this.isGeneralization) {
-    return
-  }
+  if (this.isGeneralization) return
   if (!this.checkHasGeneralization()) {
     this.removeGeneralization()
     this._generalizationNodeWidth = 0
@@ -66,6 +66,7 @@ function renderGeneralization () {
 
 //  删除概要节点
 function removeGeneralization () {
+  if (this.isGeneralization) return
   if (this._generalizationLine) {
     this._generalizationLine.remove()
     this._generalizationLine = null
@@ -86,6 +87,7 @@ function removeGeneralization () {
 
 //  隐藏概要节点
 function hideGeneralization () {
+  if (this.isGeneralization) return
   if (this._generalizationLine) {
     this._generalizationLine.hide()
   }
@@ -96,6 +98,7 @@ function hideGeneralization () {
 
 //  显示概要节点
 function showGeneralization () {
+  if (this.isGeneralization) return
   if (this._generalizationLine) {
     this._generalizationLine.show()
   }

simple-mind-map/src/core/view/View.js

@@ -60,29 +60,38 @@ class View {
     })
     // 放大缩小视图
     this.mindMap.event.on('mousewheel', (e, dir, event, isTouchPad) => {
+      let {
+        customHandleMousewheel,
+        mousewheelAction,
+        mouseScaleCenterUseMousePosition,
+        mousewheelMoveStep,
+        mousewheelZoomActionReverse
+      } = this.mindMap.opt
+      // 是否自定义鼠标滚轮事件
       if (
-        this.mindMap.opt.customHandleMousewheel &&
-        typeof this.mindMap.opt.customHandleMousewheel === 'function'
+        customHandleMousewheel &&
+        typeof customHandleMousewheel === 'function'
       ) {
-        return this.mindMap.opt.customHandleMousewheel(e)
+        return customHandleMousewheel(e)
       }
-      if (
-        this.mindMap.opt.mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM
-      ) {
+      // 鼠标滚轮事件控制缩放
+      if (mousewheelAction === CONSTANTS.MOUSE_WHEEL_ACTION.ZOOM) {
+        let cx = mouseScaleCenterUseMousePosition ? e.clientX : undefined
+        let cy = mouseScaleCenterUseMousePosition ? e.clientY : undefined
         switch (dir) {
           // 鼠标滚轮，向上和向左，都是缩小
           case CONSTANTS.DIR.UP:
           case CONSTANTS.DIR.LEFT:
-            this.narrow()
+            mousewheelZoomActionReverse ? this.enlarge(cx, cy, isTouchPad) : this.narrow(cx, cy, isTouchPad)
             break
           // 鼠标滚轮，向下和向右，都是放大
           case CONSTANTS.DIR.DOWN:
           case CONSTANTS.DIR.RIGHT:
-            this.enlarge()
+            mousewheelZoomActionReverse ? this.narrow(cx, cy, isTouchPad) : this.enlarge(cx, cy, isTouchPad)
             break
         }
-      } else {
-        let step = this.mindMap.opt.mousewheelMoveStep
+      } else {// 鼠标滚轮事件控制画布移动
+        let step = mousewheelMoveStep
         if (isTouchPad) {
           step = 5
         }
@@ -190,40 +199,45 @@ class View {
   }
 
   //  缩小
-  narrow() {
-    let scale
-    if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
-      scale = this.scale - this.mindMap.opt.scaleRatio
-    } else {
-      scale = 0.1
-    }
-    this.scaleInCenter(this.mindMap.width / 2, this.mindMap.height / 2, scale)
+  narrow(cx, cy, isTouchPad) {
+    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = Math.max(this.scale - scaleRatio, 0.1)
+    this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }
 
   //  放大
-  enlarge() {
-    const scale = this.scale + this.mindMap.opt.scaleRatio
-    this.scaleInCenter(this.mindMap.width / 2, this.mindMap.height / 2, scale)
+  enlarge(cx, cy, isTouchPad) {
+    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = this.scale + scaleRatio
+    this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }
 
-  // 基于画布中心进行缩放
-  scaleInCenter(cx, cy, scale) {
+  // 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
+  scaleInCenter(scale, cx, cy) {
+    if (cx === undefined || cy === undefined) {
+      cx = this.mindMap.width / 2
+      cy = this.mindMap.height / 2
+    }
     const prevScale = this.scale
-    const dx = (cx - this.x) * (1 - scale / prevScale)
-    const dy = (cy - this.y) * (1 - scale / prevScale)
-
-    this.x += dx;
-    this.y += dy;
+    const ratio = 1 - scale / prevScale
+    const dx = (cx - this.x) * ratio
+    const dy = (cy - this.y) * ratio
+    this.x += dx
+    this.y += dy
     this.scale = scale
   }
 
   //  设置缩放
-  setScale(scale) {
-    this.scale = scale
+  setScale(scale, cx, cy) {
+    if (cx !== undefined && cy !== undefined) {
+      this.scaleInCenter(scale, cx, cy)
+    } else {
+      this.scale = scale
+    }
     this.transform()
     this.mindMap.emit('scale', this.scale)
   }

simple-mind-map/src/layouts/Base.js

@@ -1,6 +1,7 @@
 import Node from '../core/render/node/Node'
 import { CONSTANTS, initRootNodePositionMap } from '../constants/constant'
 import Lru from '../utils/Lru'
+import { createUid } from '../utils/index'
 
 //  布局基类
 class Base {
@@ -48,6 +49,20 @@ class Base {
     return [CONSTANTS.CHANGE_THEME, CONSTANTS.TRANSFORM_TO_NORMAL_NODE].includes(this.renderer.renderSource)
   }
 
+  // 层级类型改变
+  checkIsLayerTypeChange(oldIndex, newIndex) {
+    if (oldIndex >= 2 && newIndex >= 2) return false
+    if (oldIndex >= 2 && newIndex < 2) return true
+    if (oldIndex < 2 && newIndex >= 2) return true
+  }
+
+  // 检查是否是结构布局改变重新渲染展开收起按钮占位元素
+  checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node) {
+    if (this.renderer.renderSource === CONSTANTS.CHANGE_LAYOUT) {
+      node.needRerenderExpandBtnPlaceholderRect = true
+    }
+  }
+
   //  创建节点实例
   createNode(data, parent, isRoot, layerIndex) {
     // 创建节点
@@ -55,11 +70,13 @@ class Base {
     // 数据上保存了节点引用，那么直接复用节点
     if (data && data._node && !this.renderer.reRender) {
       newNode = data._node
+      let isLayerTypeChange = this.checkIsLayerTypeChange(newNode.layerIndex, layerIndex)
       newNode.reset()
       newNode.layerIndex = layerIndex
       this.cacheNode(data._node.uid, newNode)
+      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
       // 主题或主题配置改变了需要重新计算节点大小和布局
-      if (this.checkIsNeedResizeSources()) {
+      if (this.checkIsNeedResizeSources() || isLayerTypeChange) {
         newNode.getSize()
         newNode.needLayout = true
       }
@@ -68,22 +85,24 @@ class Base {
       newNode = this.lru.get(data.data.uid)
       // 保存该节点上一次的数据
       let lastData = JSON.stringify(newNode.nodeData.data)
+      let isLayerTypeChange = this.checkIsLayerTypeChange(newNode.layerIndex, layerIndex)
       newNode.reset()
       newNode.nodeData = newNode.handleData(data || {})
       newNode.layerIndex = layerIndex
       this.cacheNode(data.data.uid, newNode)
+      this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
       data._node = newNode
       // 主题或主题配置改变了需要重新计算节点大小和布局
       let isResizeSource = this.checkIsNeedResizeSources()
       // 节点数据改变了需要重新计算节点大小和布局
       let isNodeDataChange = lastData !== JSON.stringify(data.data)
-      if (isResizeSource || isNodeDataChange) {
+      if (isResizeSource || isNodeDataChange || isLayerTypeChange) {
         newNode.getSize()
         newNode.needLayout = true
       }
     } else {
       // 创建新节点
-      let uid = this.mindMap.uid++
+      let uid = data.data.uid || createUid()
       newNode = new Node({
         data,
         uid,

simple-mind-map/src/layouts/CatalogOrganization.js

@@ -349,6 +349,11 @@ class CatalogOrganization extends Base {
     gNode.left = right + generalizationNodeMargin
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(width, expandBtnSize).x(0).y(height)
+  }
 }
 
 export default CatalogOrganization

simple-mind-map/src/layouts/Fishbone.js

@@ -51,8 +51,8 @@ class Fishbone extends Base {
             // 节点生长方向
             newNode.dir =
               index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
+                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
           }
           // 计算二级节点的top值
           if (parent._node.isRoot) {
@@ -222,7 +222,7 @@ class Fishbone extends Base {
 
   // 检查节点是否是上方节点
   checkIsTop(node) {
-    return node.dir === CONSTANTS.TIMELINE_DIR.TOP
+    return node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
   }
 
   //  绘制连线，连接该节点到其子节点
@@ -239,7 +239,7 @@ class Fishbone extends Base {
       // 当前节点是根节点
       // 根节点的子节点是和根节点同一水平线排列
       let maxx = -Infinity
-      node.children.forEach((item) => {
+      node.children.forEach(item => {
         if (item.left > maxx) {
           maxx = item.left
         }
@@ -250,15 +250,15 @@ class Fishbone extends Base {
         let line = this.draw.path()
         if (this.checkIsTop(item)) {
           line.plot(
-            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
-              item.top + item.height
-            }`
+            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${
+              item.left
+            },${item.top + item.height}`
           )
         } else {
           line.plot(
-            `M ${nodeLineX - offsetX},${
-              item.top - offset
-            } L ${nodeLineX},${item.top}`
+            `M ${nodeLineX - offsetX},${item.top - offset} L ${nodeLineX},${
+              item.top
+            }`
           )
         }
         node.style.line(line)
@@ -373,6 +373,27 @@ class Fishbone extends Base {
     gNode.left = right + generalizationNodeMargin
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    let dir = ''
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+      dir =
+        node.layerIndex === 1
+          ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+          : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+    } else {
+      dir =
+        node.layerIndex === 1
+          ? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+          : CONSTANTS.LAYOUT_GROW_DIR.TOP
+    }
+    if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+      rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
+    } else {
+      rect.size(width, expandBtnSize).x(0).y(height)
+    }
+  }
 }
 
 export default Fishbone

simple-mind-map/src/layouts/FishboneBottom.js

@@ -52,8 +52,8 @@ class Fishbone extends Base {
             // 节点生长方向
             newNode.dir =
               index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
+                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
           }
           // 计算二级节点的top值
           if (parent._node.isRoot) {

simple-mind-map/src/layouts/FishboneTop.js

@@ -52,8 +52,8 @@ class Fishbone extends Base {
             // 节点生长方向
             newNode.dir =
               index % 2 === 0
-                ? CONSTANTS.TIMELINE_DIR.TOP
-                : CONSTANTS.TIMELINE_DIR.BOTTOM
+                ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+                : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
           }
           // 计算二级节点的top值
           if (parent._node.isRoot) {
@@ -281,7 +281,7 @@ class Fishbone extends Base {
         if (
           node.parent &&
           node.parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
         ) {
           line.plot(
             `M ${x},${top} L ${x + lineLength},${

simple-mind-map/src/layouts/LogicalStructure.js

@@ -172,9 +172,7 @@ class LogicalStructure extends Base {
       let x2 = item.left
       let y2 = item.top + item.height / 2
       // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
+      let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
       y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
       y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
       let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
@@ -260,10 +258,7 @@ class LogicalStructure extends Base {
     if (_x === translateX && _y === translateY) {
       return
     }
-    btn.translate(
-      _x - translateX,
-      _y - translateY
-    )
+    btn.translate(_x - translateX, _y - translateY)
   }
 
   //  创建概要节点
@@ -286,6 +281,11 @@ class LogicalStructure extends Base {
     gNode.left = right + generalizationNodeMargin
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(expandBtnSize, height).x(width).y(0)
+  }
 }
 
 export default LogicalStructure

simple-mind-map/src/layouts/MindMap.js

@@ -1,5 +1,6 @@
 import Base from './Base'
 import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../constants/constant'
 
 //  思维导图
 class MindMap extends Base {
@@ -45,11 +46,14 @@ class MindMap extends Base {
             newNode.dir = parent._node.dir
           } else {
             // 节点生长方向
-            newNode.dir = index % 2 === 0 ? 'right' : 'left'
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
           }
           // 根据生长方向定位到父节点的左侧或右侧
           newNode.left =
-            newNode.dir === 'right'
+            newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
               ? parent._node.left +
                 parent._node.width +
                 this.getMarginX(layerIndex)
@@ -72,7 +76,7 @@ class MindMap extends Base {
         let leftChildrenAreaHeight = 0
         let rightChildrenAreaHeight = 0
         cur._node.children.forEach(item => {
-          if (item.dir === 'left') {
+          if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
             leftLen++
             leftChildrenAreaHeight += item.height
           } else {
@@ -109,7 +113,7 @@ class MindMap extends Base {
           let leftTotalTop = baseTop - node.leftChildrenAreaHeight / 2
           let rightTotalTop = baseTop - node.rightChildrenAreaHeight / 2
           node.children.forEach(cur => {
-            if (cur.dir === 'left') {
+            if (cur.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
               cur.top = leftTotalTop
               leftTotalTop += cur.height + marginY
             } else {
@@ -162,7 +166,10 @@ class MindMap extends Base {
           return
         }
         let _offset = 0
-        let addHeight = item.dir === 'left' ? leftAddHeight : rightAddHeight
+        let addHeight =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? leftAddHeight
+            : rightAddHeight
         // 上面的节点往上移
         if (_index < index) {
           _offset = -addHeight
@@ -208,10 +215,8 @@ class MindMap extends Base {
       let x1 = 0
       let _s = 0
       // 节点使用横线风格，需要额外渲染横线
-      let nodeUseLineStyleOffset = nodeUseLineStyle
-        ? item.width
-        : 0
-      if (item.dir === 'left') {
+      let nodeUseLineStyleOffset = nodeUseLineStyle ? item.width : 0
+      if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
         _s = -s1
         x1 = node.layerIndex === 0 ? left : left - expandBtnSize
         nodeUseLineStyleOffset = -nodeUseLineStyleOffset
@@ -220,7 +225,10 @@ class MindMap extends Base {
         x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
       }
       let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          ? item.left + item.width
+          : item.left
       let y2 = item.top + item.height / 2
       y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
       y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
@@ -246,18 +254,21 @@ class MindMap extends Base {
       let x1 =
         node.layerIndex === 0
           ? left + width / 2
-          : item.dir === 'left'
+          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
           ? left - expandBtnSize
           : left + width + expandBtnSize
       let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          ? item.left + item.width
+          : item.left
       let y2 = item.top + item.height / 2
       y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
       y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
       // 节点使用横线风格，需要额外渲染横线
       let nodeUseLineStylePath = ''
       if (nodeUseLineStyle) {
-        if (item.dir === 'left') {
+        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
           nodeUseLineStylePath = ` L ${item.left},${y2}`
         } else {
           nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@@ -283,11 +294,14 @@ class MindMap extends Base {
       let x1 =
         node.layerIndex === 0
           ? left + width / 2
-          : item.dir === 'left'
+          : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
           ? left - expandBtnSize
           : left + width + expandBtnSize
       let y1 = top + height / 2
-      let x2 = item.dir === 'left' ? item.left + item.width : item.left
+      let x2 =
+        item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          ? item.left + item.width
+          : item.left
       let y2 = item.top + item.height / 2
       let path = ''
       y1 = nodeUseLineStyle && !node.isRoot ? y1 + height / 2 : y1
@@ -295,7 +309,7 @@ class MindMap extends Base {
       // 节点使用横线风格，需要额外渲染横线
       let nodeUseLineStylePath = ''
       if (this.mindMap.themeConfig.nodeUseLineStyle) {
-        if (item.dir === 'left') {
+        if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
           nodeUseLineStylePath = ` L ${item.left},${y2}`
         } else {
           nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
@@ -320,7 +334,8 @@ class MindMap extends Base {
       ? height / 2
       : 0
     // 位置没有变化则返回
-    let _x = (node.dir === 'left' ? 0 - expandBtnSize : width)
+    let _x =
+      node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT ? 0 - expandBtnSize : width
     let _y = height / 2 + nodeUseLineStyleOffset
     if (_x === translateX && _y === translateY) {
       return
@@ -332,7 +347,7 @@ class MindMap extends Base {
 
   //  创建概要节点
   renderGeneralization(node, gLine, gNode) {
-    let isLeft = node.dir === 'left'
+    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
     let {
       top,
       bottom,
@@ -358,6 +373,15 @@ class MindMap extends Base {
       (isLeft ? gNode.width : 0)
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
+      rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
+    } else {
+      rect.size(expandBtnSize, height).x(width).y(0)
+    }
+  }
 }
 
 export default MindMap

simple-mind-map/src/layouts/OrganizationStructure.js

@@ -255,6 +255,11 @@ class OrganizationStructure extends Base {
     gNode.top = bottom + generalizationNodeMargin
     gNode.left = left + (right - left - gNode.width) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    rect.size(width, expandBtnSize).x(0).y(height)
+  }
 }
 
 export default OrganizationStructure

simple-mind-map/src/layouts/Timeline.js

@@ -50,8 +50,8 @@ class Timeline extends Base {
               // 节点生长方向
               newNode.dir =
                 index % 2 === 0
-                  ? CONSTANTS.TIMELINE_DIR.BOTTOM
-                  : CONSTANTS.TIMELINE_DIR.TOP
+                  ? CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+                  : CONSTANTS.LAYOUT_GROW_DIR.TOP
             }
           } else {
             newNode.dir = ''
@@ -151,7 +151,7 @@ class Timeline extends Base {
         if (
           parent &&
           parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
         ) {
           // 遍历二级节点的子节点
           node.children.forEach(item => {
@@ -280,7 +280,7 @@ class Timeline extends Base {
         if (
           node.parent &&
           node.parent.isRoot &&
-          node.dir === CONSTANTS.TIMELINE_DIR.TOP
+          node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
         ) {
           line.plot(`M ${x},${top} L ${x},${miny}`)
         } else {
@@ -301,7 +301,7 @@ class Timeline extends Base {
       if (
         node.parent &&
         node.parent.isRoot &&
-        node.dir === CONSTANTS.TIMELINE_DIR.TOP
+        node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP
       ) {
         btn.translate(
           width * 0.3 - expandBtnSize / 2 - translateX,
@@ -336,6 +336,28 @@ class Timeline extends Base {
     gNode.left = right + generalizationNodeMargin
     gNode.top = top + (bottom - top - gNode.height) / 2
   }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (this.layout === CONSTANTS.LAYOUT.TIMELINE) {
+      rect.size(width, expandBtnSize).x(0).y(height)
+    } else {
+      let dir = ''
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+        dir =
+          node.layerIndex === 1
+            ? CONSTANTS.LAYOUT_GROW_DIR.TOP
+            : CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+      } else {
+        dir = CONSTANTS.LAYOUT_GROW_DIR.BOTTOM
+      }
+      if (dir === CONSTANTS.LAYOUT_GROW_DIR.TOP) {
+        rect.size(width, expandBtnSize).x(0).y(-expandBtnSize)
+      } else {
+        rect.size(width, expandBtnSize).x(0).y(height)
+      }
+    }
+  }
 }
 
 export default Timeline

simple-mind-map/src/layouts/VerticalTimeline.js

@@ -0,0 +1,431 @@
+import Base from './Base'
+import { walk, asyncRun } from '../utils'
+import { CONSTANTS } from '../constants/constant'
+
+//  竖向时间轴
+class VerticalTimeline extends Base {
+  //  构造函数
+  constructor(opt = {}, layout) {
+    super(opt)
+    this.layout = layout
+  }
+
+  //  布局
+  doLayout(callback) {
+    let task = [
+      () => {
+        this.computedBaseValue()
+      },
+      () => {
+        this.computedTopValue()
+      },
+      () => {
+        this.adjustLeftTopValue()
+      },
+      () => {
+        callback(this.root)
+      }
+    ]
+    asyncRun(task)
+  }
+
+  //  遍历数据创建节点、计算根节点的位置，计算根节点的子节点的top值
+  computedBaseValue() {
+    walk(
+      this.renderer.renderTree,
+      null,
+      (cur, parent, isRoot, layerIndex, index) => {
+        let newNode = this.createNode(cur, parent, isRoot, layerIndex)
+        // 根节点定位在画布中心位置
+        if (isRoot) {
+          this.setNodeCenter(newNode)
+        } else {
+          // 非根节点
+          // 节点生长方向
+          // 三级及以下节点以上级为准
+          if (parent._node.dir) {
+            newNode.dir = parent._node.dir
+          } else {
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                : CONSTANTS.LAYOUT_GROW_DIR.LEFT
+          }
+          // 定位二级节点的left
+          if (parent._node.isRoot) {
+            newNode.left =
+              parent._node.left +
+              (cur._node.width > parent._node.width
+                ? -(cur._node.width - parent._node.width) / 2
+                : (parent._node.width - cur._node.width) / 2)
+          } else {
+            newNode.left =
+              newNode.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT
+                ? parent._node.left +
+                  parent._node.width +
+                  this.getMarginX(layerIndex)
+                : parent._node.left -
+                  this.getMarginX(layerIndex) -
+                  newNode.width
+          }
+        }
+        if (!cur.data.expand) {
+          return true
+        }
+      },
+      (cur, parent, isRoot, layerIndex) => {
+        // 返回时计算节点的areaHeight，也就是子节点所占的高度之和，包括外边距
+        if (isRoot) {
+          return
+        }
+        let len = cur.data.expand === false ? 0 : cur._node.children.length
+        cur._node.childrenAreaHeight = len
+          ? cur._node.children.reduce((h, item) => {
+              return h + item.height
+            }, 0) +
+            (len + 1) * this.getMarginY(layerIndex + 1)
+          : 0
+      },
+      true,
+      0
+    )
+  }
+
+  //  遍历节点树计算节点的top
+  computedTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex, index) => {
+        if (
+          node.nodeData.data.expand &&
+          node.children &&
+          node.children.length
+        ) {
+          let marginY = this.getMarginY(layerIndex + 1)
+          // 定位二级节点的top
+          if (isRoot) {
+            let top = node.top + node.height
+            let totalTop = top + marginY
+            node.children.forEach(cur => {
+              cur.top = totalTop
+              totalTop += cur.height + marginY
+            })
+          } else {
+            // 定位三级及以下节点的top
+            let marginY = this.getMarginY(layerIndex + 1)
+            let baseTop = node.top + node.height / 2 + marginY
+            // 第一个子节点的top值 = 该节点中心的top值 - 子节点的高度之和的一半
+            let totalTop = baseTop - node.childrenAreaHeight / 2
+            node.children.forEach(cur => {
+              cur.top = totalTop
+              totalTop += cur.height + marginY
+            })
+          }
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  调整节点left、top
+  adjustLeftTopValue() {
+    walk(
+      this.root,
+      null,
+      (node, parent, isRoot, layerIndex) => {
+        if (!node.nodeData.data.expand) {
+          return
+        }
+        if (isRoot) return
+        // 判断子节点所占的高度之和是否大于该节点自身，大于则需要调整位置
+        let base = this.getMarginY(layerIndex + 1) * 2 + node.height
+        let difference = node.childrenAreaHeight - base
+        if (difference > 0) {
+          this.updateBrothers(node, difference / 2)
+        }
+      },
+      null,
+      true
+    )
+  }
+
+  //  更新兄弟节点的top
+  updateBrothers(node, addHeight) {
+    if (node.parent) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        // 自定义节点位置
+        if (item.hasCustomPosition()) return
+        // 三级或三级以下节点自身位置不需要动
+        if (!node.parent.isRoot && item === node) return
+        let _offset = 0
+        // 二级节点上面的兄弟节点不需要移动，自身需要往下移动
+        if (node.parent.isRoot) {
+          // 上面的节点不用移
+          if (_index < index) {
+            _offset = 0
+          } else if (_index > index) {
+            // 下面的节点往下移
+            _offset = addHeight * 2
+          } else {
+            // 自身也要移动
+            _offset = addHeight
+          }
+        } else {
+          // 三级或三级以下节点两侧的兄弟节点向两侧移动
+          // 上面的节点往上移
+          if (_index < index) {
+            _offset = -addHeight
+          } else if (_index > index) {
+            // 下面的节点往下移
+            _offset = addHeight
+          }
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothers(node.parent, addHeight)
+    }
+  }
+
+  //  调整兄弟节点的top
+  updateBrothersTop(node, addHeight) {
+    if (node.parent && !node.parent.isRoot) {
+      let childrenList = node.parent.children
+      let index = childrenList.findIndex(item => {
+        return item === node
+      })
+      childrenList.forEach((item, _index) => {
+        if (item.hasCustomPosition()) {
+          // 适配自定义位置
+          return
+        }
+        let _offset = 0
+        // 下面的节点往下移
+        if (_index > index) {
+          _offset = addHeight
+        }
+        item.top += _offset
+        // 同步更新子节点的位置
+        if (item.children && item.children.length) {
+          this.updateChildren(item.children, 'top', _offset)
+        }
+      })
+      // 更新父节点的位置
+      this.updateBrothersTop(node.parent, addHeight)
+    }
+  }
+
+  //  绘制连线，连接该节点到其子节点
+  renderLine(node, lines, style, lineStyle) {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
+      this.renderLineDirect(node, lines, style)
+    } else {
+      this.renderLineStraight(node, lines, style)
+    }
+  }
+
+  // 直线连接
+  renderLineStraight(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    if (node.isRoot) {
+      // 当前节点是根节点
+      let prevBother = node
+      // 根节点的子节点是和根节点同一水平线排列
+      node.children.forEach((item, index) => {
+        let y1 = prevBother.top + prevBother.height
+        let y2 = item.top
+        let x = node.left + node.width / 2
+        let path = `M ${x},${y1} L ${x},${y2}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+        prevBother = item
+      })
+    } else {
+      // 当前节点为非根节点
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
+        let nodeRight = node.left + node.width
+        let nodeYCenter = node.top + node.height / 2
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let offset = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+          let itemLeft = item.left
+          let itemYCenter = item.top + item.height / 2
+          let path = `
+            M ${nodeRight},${nodeYCenter} 
+            L ${nodeRight + offset},${nodeYCenter} 
+            L ${nodeRight + offset},${itemYCenter} 
+            L ${itemLeft},${itemYCenter}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        })
+      } else {
+        let nodeLeft = node.left
+        let nodeYCenter = node.top + node.height / 2
+        let marginX = this.getMarginX(node.layerIndex + 1)
+        let offset = (marginX - expandBtnSize) * 0.6
+        node.children.forEach((item, index) => {
+          let itemRight = item.left + item.width
+          let itemYCenter = item.top + item.height / 2
+          let path = `
+            M ${nodeLeft},${nodeYCenter} 
+            L ${nodeLeft - offset},${nodeYCenter} 
+            L ${nodeLeft - offset},${itemYCenter} 
+            L ${itemRight},${itemYCenter}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        })
+      }
+    }
+  }
+
+  // 直连
+  renderLineDirect(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    node.children.forEach((item, index) => {
+      if (node.isRoot) {
+        let prevBother = node
+        // 根节点的子节点是和根节点同一水平线排列
+        node.children.forEach((item, index) => {
+          let y1 = prevBother.top + prevBother.height
+          let y2 = item.top
+          let x = node.left + node.width / 2
+          let path = `M ${x},${y1} L ${x},${y2}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+          prevBother = item
+        })
+      } else {
+        let x1 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? left - expandBtnSize
+            : left + width + expandBtnSize
+        let y1 = top + height / 2
+        let x2 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? item.left + item.width
+            : item.left
+        let y2 = item.top + item.height / 2
+        let path = `M ${x1},${y1} L ${x2},${y2}`
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      }
+    })
+  }
+
+  //  曲线风格连线
+  renderLineCurve(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    node.children.forEach((item, index) => {
+      if (node.isRoot) {
+        let prevBother = node
+        // 根节点的子节点是和根节点同一水平线排列
+        node.children.forEach((item, index) => {
+          let y1 = prevBother.top + prevBother.height
+          let y2 = item.top
+          let x = node.left + node.width / 2
+          let path = `M ${x},${y1} L ${x},${y2}`
+          lines[index].plot(path)
+          style && style(lines[index], item)
+          prevBother = item
+        })
+      } else {
+        let x1 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? left - expandBtnSize
+            : left + width + expandBtnSize
+        let y1 = top + height / 2
+        let x2 =
+          item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+            ? item.left + item.width
+            : item.left
+        let y2 = item.top + item.height / 2
+        let path = this.cubicBezierPath(x1, y1, x2, y2)
+        lines[index].plot(path)
+        style && style(lines[index], item)
+      }
+    })
+  }
+
+  //  渲染按钮
+  renderExpandBtn(node, btn) {
+    let { width, height, expandBtnSize, isRoot } = node
+    if (!isRoot) {
+      let { translateX, translateY } = btn.transform()
+      if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.RIGHT) {
+        btn.translate(width - translateX, height / 2 - translateY)
+      } else {
+        btn.translate(-expandBtnSize - translateX, height / 2 - translateY)
+      }
+    }
+  }
+
+  //  创建概要节点
+  renderGeneralization(node, gLine, gNode) {
+    let isLeft = node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
+    let {
+      top,
+      bottom,
+      left,
+      right,
+      generalizationLineMargin,
+      generalizationNodeMargin
+    } = this.getNodeBoundaries(node, 'h', isLeft)
+    let x = isLeft
+      ? left - generalizationLineMargin
+      : right + generalizationLineMargin
+    let x1 = x
+    let y1 = top
+    let x2 = x
+    let y2 = bottom
+    let cx = x1 + (isLeft ? -20 : 20)
+    let cy = y1 + (y2 - y1) / 2
+    let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
+    gLine.plot(path)
+    gNode.left =
+      x +
+      (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) -
+      (isLeft ? gNode.width : 0)
+    gNode.top = top + (bottom - top - gNode.height) / 2
+  }
+
+  // 渲染展开收起按钮的隐藏占位元素
+  renderExpandBtnRect(rect, expandBtnSize, width, height, node) {
+    if (node.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
+      rect.size(expandBtnSize, height).x(-expandBtnSize).y(0)
+    } else {
+      rect.size(expandBtnSize, height).x(width).y(0)
+    }
+  }
+}
+
+export default VerticalTimeline

simple-mind-map/src/parse/xmind.js

@@ -1,5 +1,11 @@
 import JSZip from 'jszip'
 import xmlConvert from 'xml-js'
+import {
+  getTextFromHtml,
+  imgToDataUrl,
+  parseDataUrl,
+  getImageSize
+} from '../utils/index'
 
 //  解析.xmind文件
 const parseXmindFile = file => {
@@ -10,7 +16,7 @@ const parseXmindFile = file => {
           let content = ''
           if (zip.files['content.json']) {
             let json = await zip.files['content.json'].async('string')
-            content = transformXmind(json)
+            content = await transformXmind(json, zip.files)
           } else if (zip.files['content.xml']) {
             let xml = await zip.files['content.xml'].async('string')
             let json = xmlConvert.xml2json(xml)
@@ -33,18 +39,20 @@ const parseXmindFile = file => {
 }
 
 //  转换xmind数据
-const transformXmind = content => {
+const transformXmind = async (content, files) => {
   let data = JSON.parse(content)[0]
   let nodeTree = data.rootTopic
   let newTree = {}
-  let walk = (node, newNode) => {
+  let waitLoadImageList = []
+  let walk = async (node, newNode) => {
     newNode.data = {
       // 节点内容
       text: node.title
     }
     // 节点备注
     if (node.notes) {
-      newNode.data.note = (node.notes.realHTML || node.notes.plain).content
+      let notesData = node.notes.realHTML || node.notes.plain
+      newNode.data.note = notesData ? notesData.content || '' : ''
     }
     // 超链接
     if (node.href && /^https?:\/\//.test(node.href)) {
@@ -54,6 +62,42 @@ const transformXmind = content => {
     if (node.labels && node.labels.length > 0) {
       newNode.data.tag = node.labels
     }
+    // 图片
+    if (node.image && /\.(jpg|jpeg|png|gif|webp)$/.test(node.image.src)) {
+      try {
+        // 处理异步逻辑
+        let resolve = null
+        let promise = new Promise(_resolve => {
+          resolve = _resolve
+        })
+        waitLoadImageList.push(promise)
+        // 读取图片
+        let imageType = /\.([^.]+)$/.exec(node.image.src)[1]
+        let imageBase64 =
+          `data:image/${imageType};base64,` +
+          (await files['resources/' + node.image.src.split('/')[1]].async(
+            'base64'
+          ))
+        newNode.data.image = imageBase64
+        // 如果图片尺寸不存在
+        if (!node.image.width && !node.image.height) {
+          let imageSize = await getImageSize(imageBase64)
+          newNode.data.imageSize = {
+            width: imageSize.width,
+            height: imageSize.height
+          }
+        } else {
+          newNode.data.imageSize = {
+            width: node.image.width,
+            height: node.image.height
+          }
+        }
+        resolve()
+      } catch (error) {
+        console.log(error)
+        resolve()
+      }
+    }
     // 子节点
     newNode.children = []
     if (
@@ -69,6 +113,7 @@ const transformXmind = content => {
     }
   }
   walk(nodeTree, newTree)
+  await Promise.all(waitLoadImageList)
   return newTree
 }
 
@@ -157,8 +202,127 @@ const transformOldXmind = content => {
   return newTree
 }
 
+// 数据转换为xmind文件
+const transformToXmind = async (data, name) => {
+  const id = 'simpleMindMap_' + Date.now()
+  const imageList = []
+  // 转换核心数据
+  let newTree = {}
+  let waitLoadImageList = []
+  let walk = async (node, newNode, isRoot) => {
+    let newData = {
+      structureClass: 'org.xmind.ui.logic.right',
+      title: getTextFromHtml(node.data.text), // 节点文本
+      children: {
+        attached: []
+      }
+    }
+    // 备注
+    if (node.data.note !== undefined) {
+      newData.notes = {
+        realHTML: {
+          content: node.data.note
+        },
+        plain: {
+          content: node.data.note
+        }
+      }
+    }
+    // 超链接
+    if (node.data.hyperlink !== undefined) {
+      newData.href = node.data.hyperlink
+    }
+    // 标签
+    if (node.data.tag !== undefined) {
+      newData.labels = node.data.tag || []
+    }
+    // 图片
+    if (node.data.image) {
+      try {
+        // 处理异步逻辑
+        let resolve = null
+        let promise = new Promise(_resolve => {
+          resolve = _resolve
+        })
+        waitLoadImageList.push(promise)
+        let imgName = ''
+        let imgData = node.data.image
+        // 网络图片要先转换成data:url
+        if (/^https?:\/\//.test(node.data.image)) {
+          imgData = await imgToDataUrl(node.data.image)
+        }
+        // 从data:url中解析出图片类型和base64
+        let dataUrlRes = parseDataUrl(imgData)
+        imgName = 'image_' + imageList.length + '.' + dataUrlRes.type
+        imageList.push({
+          name: imgName,
+          data: dataUrlRes.base64
+        })
+        newData.image = {
+          src: 'xap:resources/' + imgName,
+          width: node.data.imageSize.width,
+          height: node.data.imageSize.height
+        }
+        resolve()
+      } catch (error) {
+        console.log(error)
+        resolve()
+      }
+    }
+    // 样式
+    // 暂时不考虑样式
+    if (isRoot) {
+      newData.class = 'topic'
+      newNode.id = id
+      newNode.class = 'sheet'
+      newNode.title = name
+      newNode.extensions = []
+      newNode.topicPositioning = 'fixed'
+      newNode.topicOverlapping = 'overlap'
+      newNode.coreVersion = '2.100.0'
+      newNode.rootTopic = newData
+    } else {
+      Object.keys(newData).forEach(key => {
+        newNode[key] = newData[key]
+      })
+    }
+    if (node.children && node.children.length > 0) {
+      node.children.forEach(child => {
+        let newChild = {}
+        walk(child, newChild)
+        newData.children.attached.push(newChild)
+      })
+    }
+  }
+  walk(data, newTree, true)
+  await Promise.all(waitLoadImageList)
+  const contentData = [newTree]
+  // 创建压缩包
+  const zip = new JSZip()
+  zip.file('content.json', JSON.stringify(contentData))
+  zip.file(
+    'metadata.json',
+    `{"modifier":"","dataStructureVersion":"1","layoutEngineVersion":"2","activeSheetId":"${id}"}`
+  )
+  const manifestData = {
+    'file-entries': { 'content.json': {}, 'metadata.json': {} }
+  }
+  // 图片
+  if (imageList.length > 0) {
+    imageList.forEach(item => {
+      manifestData['file-entries']['resources/' + item.name] = {}
+      const img = zip.folder('resources')
+      img.file(item.name, item.data, { base64: true })
+    })
+  }
+  zip.file('manifest.json', JSON.stringify(manifestData))
+  const zipData = await zip.generateAsync({ type: 'blob' })
+  return zipData
+}
+
 export default {
   parseXmindFile,
   transformXmind,
-  transformOldXmind
+  transformOldXmind,
+  transformToXmind
 }

simple-mind-map/src/plugins/AssociativeLine.js

@@ -11,7 +11,7 @@ import {
 import associativeLineControlsMethods from './associativeLine/associativeLineControls'
 import associativeLineTextMethods from './associativeLine/associativeLineText'
 
-// 关联线类
+// 关联线插件
 class AssociativeLine {
   constructor(opt = {}) {
     this.mindMap = opt.mindMap

simple-mind-map/src/plugins/Drag.js

@@ -1,8 +1,7 @@
 import { bfsWalk, throttle } from '../utils'
 import Base from '../layouts/Base'
 
-//  节点拖动类
-
+// 节点拖动插件
 class Drag extends Base {
   //  构造函数
   constructor({ mindMap }) {

simple-mind-map/src/plugins/Export.js

@@ -1,9 +1,9 @@
-import { imgToDataUrl, downloadFile, readBlob } from '../utils'
+import { imgToDataUrl, downloadFile, readBlob, removeHTMLEntities } from '../utils'
 import { SVG } from '@svgdotjs/svg.js'
 import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas'
 import { transformToMarkdown } from '../parse/toMarkdown'
 
-//  导出类
+//  导出插件
 class Export {
   //  构造函数
   constructor(opt) {
@@ -154,6 +154,7 @@ class Export {
    */
   async png(name, transparent = false) {
     let { node, str } = await this.getSvgData()
+    str = removeHTMLEntities(str)
     // 如果开启了富文本，则使用htmltocanvas转换为图片
     if (this.mindMap.richText) {
       let res =  await this.mindMap.richText.handleExportPng(node.node)
@@ -180,6 +181,17 @@ class Export {
     this.mindMap.doExportPDF.pdf(name, img)
   }
 
+  // 导出为xmind
+  async xmind(name) {
+    if (!this.mindMap.doExportXMind) {
+      throw new Error('请注册ExportXMind插件')
+    }
+    const data = this.mindMap.getData()
+    const blob = await this.mindMap.doExportXMind.xmind(data, name)
+    const res = await readBlob(blob)
+    return res
+  }
+
   //  导出为svg
   // plusCssText：附加的css样式，如果svg中存在dom节点，想要设置一些针对节点的样式可以通过这个参数传入
   async svg(name, plusCssText) {
@@ -196,6 +208,7 @@ class Export {
     node.first().before(SVG(`<title>${name}</title>`))
     await this.drawBackgroundToSvg(node)
     let str = node.svg()
+    str = removeHTMLEntities(str)
     // 转换成blob数据
     let blob = new Blob([str], {
       type: 'image/svg+xml'

simple-mind-map/src/plugins/ExportPDF.js

@@ -1,6 +1,6 @@
 import JsPDF from 'jspdf'
 
-//  导出PDF类，需要通过Export插件使用
+//  导出PDF插件，需要通过Export插件使用
 class ExportPDF {
   //  构造函数
   constructor(opt) {

simple-mind-map/src/plugins/ExportXMind.js

@@ -0,0 +1,19 @@
+import xmind from '../parse/xmind'
+
+//  导出XMind插件，需要通过Export插件使用
+class ExportXMind {
+  //  构造函数
+  constructor(opt) {
+    this.mindMap = opt.mindMap
+  }
+
+  // 导出xmind
+  async xmind(data, name) {
+    const zipData = await xmind.transformToXmind(data, name)
+    return zipData
+  }
+}
+
+ExportXMind.instanceName = 'doExportXMind'
+
+export default ExportXMind

simple-mind-map/src/plugins/KeyboardNavigation.js

@@ -1,7 +1,7 @@
 import { bfsWalk } from '../utils'
 import { CONSTANTS } from '../constants/constant'
 
-//  键盘导航类
+//  键盘导航插件
 class KeyboardNavigation {
   //  构造函数
   constructor(opt) {
@@ -28,8 +28,7 @@ class KeyboardNavigation {
       this.focus(dir)
     } else {
       let root = this.mindMap.renderer.root
-      this.mindMap.renderer.moveNodeToCenter(root)
-      root.active()
+      this.mindMap.execCommand('GO_TARGET_NODE', root)
     }
   }
 
@@ -81,8 +80,7 @@ class KeyboardNavigation {
 
     // 找到了则让目标节点聚焦
     if (targetNode) {
-      this.mindMap.renderer.moveNodeToCenter(targetNode)
-      targetNode.active()
+      this.mindMap.execCommand('GO_TARGET_NODE', targetNode)
     }
   }
 

simple-mind-map/src/plugins/MiniMap.js

@@ -1,4 +1,4 @@
-// 小地图类
+// 小地图插件
 class MiniMap {
   //  构造函数
   constructor(opt) {

simple-mind-map/src/plugins/NodeImgAdjust.js

@@ -0,0 +1,223 @@
+// 节点图片大小调整插件
+import { resizeImgSizeByOriginRatio } from '../utils/index'
+import btnsSvg from '../svg/btns'
+
+class NodeImgAdjust {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    this.resizeBtnSize = 26 // 调整按钮的大小
+    this.handleEl = null // 自定义元素，用来渲染临时图片、调整按钮
+    this.isShowHandleEl = false // 自定义元素是否在显示中
+    this.node = null // 当前节点实例
+    this.img = null // 当前节点的图片节点
+    this.rect = null // 当前图片节点的尺寸信息
+    this.isMousedown = false // 当前是否是按住调整按钮状态
+    this.currentImgWidth = 0 // 当前拖拽实时图片的大小
+    this.currentImgHeight = 0
+    this.isAdjusted = false // 是否是拖拽结束后的渲染期间
+    this.bindEvent()
+  }
+
+  // 监听事件
+  bindEvent() {
+    this.onNodeImgMouseleave = this.onNodeImgMouseleave.bind(this)
+    this.onNodeImgMousemove = this.onNodeImgMousemove.bind(this)
+    this.onMousemove = this.onMousemove.bind(this)
+    this.onMouseup = this.onMouseup.bind(this)
+    this.onRenderEnd = this.onRenderEnd.bind(this)
+    this.mindMap.on('node_img_mouseleave', this.onNodeImgMouseleave)
+    this.mindMap.on('node_img_mousemove', this.onNodeImgMousemove)
+    this.mindMap.on('mousemove', this.onMousemove)
+    this.mindMap.on('mouseup', this.onMouseup)
+    this.mindMap.on('node_mouseup', this.onMouseup)
+    this.mindMap.on('node_tree_render_end', this.onRenderEnd)
+  }
+
+  // 解绑事件
+  unBindEvent() {
+    this.mindMap.off('node_img_mouseleave', this.onNodeImgMouseleave)
+    this.mindMap.off('node_img_mousemove', this.onNodeImgMousemove)
+    this.mindMap.off('mousemove', this.onMousemove)
+    this.mindMap.off('mouseup', this.onMouseup)
+    this.mindMap.off('node_mouseup', this.onMouseup)
+    this.mindMap.off('node_tree_render_end', this.onRenderEnd)
+  }
+
+  // 节点图片鼠标移动事件
+  onNodeImgMousemove(node, img) {
+    // 如果当前正在拖动调整中那么直接返回
+    if (this.isMousedown || this.isAdjusted || this.mindMap.opt.readonly) return
+    // 如果在当前节点内移动，以及自定义元素已经是显示状态，那么直接返回
+    if (this.node === node && this.isShowHandleEl) return
+    // 更新当前节点信息
+    this.node = node
+    this.img = img
+    this.rect = this.img.rbox()
+    // 显示自定义元素
+    this.showHandleEl()
+  }
+
+  // 节点图片鼠标移出事件
+  onNodeImgMouseleave() {
+    if (this.isMousedown) return
+    this.hideHandleEl()
+  }
+
+  // 隐藏节点实际的图片
+  hideNodeImage() {
+    if (!this.img) return
+    this.img.hide()
+  }
+
+  // 显示节点实际的图片
+  showNodeImage() {
+    if (!this.img) return
+    this.img.show()
+  }
+
+  // 显示自定义元素
+  showHandleEl() {
+    if (!this.handleEl) {
+      this.createResizeBtnEl()
+    }
+    this.setHandleElRect()
+    document.body.appendChild(this.handleEl)
+    this.isShowHandleEl = true
+  }
+
+  // 隐藏自定义元素
+  hideHandleEl() {
+    if (!this.isShowHandleEl) return
+    this.isShowHandleEl = false
+    document.body.removeChild(this.handleEl)
+    this.handleEl.style.backgroundImage = ``
+    this.handleEl.style.width = 0
+    this.handleEl.style.height = 0
+    this.handleEl.style.left = 0
+    this.handleEl.style.top = 0
+  }
+
+  // 设置自定义元素尺寸位置信息
+  setHandleElRect() {
+    let { width, height, x, y } = this.rect
+    this.handleEl.style.left = `${x}px`
+    this.handleEl.style.top = `${y}px`
+    this.currentImgWidth = width
+    this.currentImgHeight = height
+    this.updateHandleElSize()
+  }
+
+  // 更新自定义元素宽高
+  updateHandleElSize() {
+    this.handleEl.style.width = `${this.currentImgWidth}px`
+    this.handleEl.style.height = `${this.currentImgHeight}px`
+  }
+
+  // 创建调整按钮元素
+  createResizeBtnEl() {
+    // 容器元素
+    this.handleEl = document.createElement('div')
+    this.handleEl.style.cssText = `
+      pointer-events: none;
+      position: fixed;
+      background-size: cover;
+    `
+    // 调整按钮元素
+    const btnEl = document.createElement('div')
+    btnEl.innerHTML = btnsSvg.imgAdjust
+    btnEl.style.cssText = `
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0.3);
+      width: ${this.resizeBtnSize}px;
+      height: ${this.resizeBtnSize}px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: nwse-resize;
+    `
+    this.handleEl.appendChild(btnEl)
+    // 给按钮元素绑定事件
+    btnEl.addEventListener('mouseenter', () => {
+      // 移入按钮，会触发节点图片的移出事件，所以需要再次显示按钮
+      this.showHandleEl()
+    })
+    btnEl.addEventListener('mouseleave', () => {
+      // 移除按钮，需要隐藏按钮
+      if (this.isMousedown) return
+      this.hideHandleEl()
+    })
+    btnEl.addEventListener('mousedown', e => {
+      this.onMousedown(e)
+    })
+  }
+
+  // 鼠标按钮按下事件
+  onMousedown() {
+    this.isMousedown = true
+    // 隐藏节点实际图片
+    this.hideNodeImage()
+    // 将节点图片渲染到自定义元素上
+    this.handleEl.style.backgroundImage = `url(${this.node.nodeData.data.image})`
+  }
+
+  // 鼠标移动
+  onMousemove(e) {
+    if (!this.isMousedown) return
+    e.preventDefault()
+    // 计算当前拖拽位置对应的图片的实时大小
+    let { width: imageOriginWidth, height: imageOriginHeight } =
+      this.node.nodeData.data.imageSize
+    let newWidth = e.clientX - this.rect.x
+    let newHeight = e.clientY - this.rect.y
+    if (newWidth <= 0 || newHeight <= 0) return
+    let [actWidth, actHeight] = resizeImgSizeByOriginRatio(
+      imageOriginWidth,
+      imageOriginHeight,
+      newWidth,
+      newHeight
+    )
+    this.currentImgWidth = actWidth
+    this.currentImgHeight = actHeight
+    this.updateHandleElSize()
+  }
+
+  // 鼠标松开
+  onMouseup() {
+    if (!this.isMousedown) return
+    // 显示节点实际图片
+    this.showNodeImage()
+    // 隐藏自定义元素
+    this.hideHandleEl()
+    // 更新节点图片为新的大小
+    let { image, imageTitle } = this.node.nodeData.data
+    let { scaleX, scaleY } = this.mindMap.draw.transform()
+    this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
+      url: image,
+      title: imageTitle,
+      width: this.currentImgWidth / scaleX,
+      height: this.currentImgHeight / scaleY,
+      custom: true // 代表自定义了图片大小
+    })
+    this.isAdjusted = true
+    this.isMousedown = false
+  }
+
+  // 渲染完成事件
+  onRenderEnd() {
+    if (!this.isAdjusted) return
+    this.isAdjusted = false
+  }
+
+  // 插件被移除前做的事情
+  beforePluginRemove() {
+    this.unBindEvent()
+  }
+}
+
+NodeImgAdjust.instanceName = 'nodeImgAdjust'
+
+export default NodeImgAdjust

simple-mind-map/src/plugins/RichText.js

@@ -28,7 +28,7 @@ let fontSizeList = new Array(100).fill(0).map((_, index) => {
   return index + 'px'
 })
 
-// 节点支持富文本编辑功能
+// 富文本编辑插件
 class RichText {
   constructor({ mindMap, pluginOpt }) {
     this.mindMap = mindMap
@@ -39,6 +39,7 @@ class RichText {
     this.range = null
     this.lastRange = null
     this.node = null
+    this.isInserting = false
     this.styleEl = null
     this.cacheEditingText = ''
     this.lostStyle = false
@@ -145,11 +146,12 @@ class RichText {
   }
 
   // 显示文本编辑控件
-  showEditText(node, rect) {
+  showEditText(node, rect, isInserting) {
     if (this.showTextEdit) {
       return
     }
     this.node = node
+    this.isInserting = isInserting
     if (!rect) rect = node._textData.node.node.getBoundingClientRect()
     this.mindMap.emit('before_show_text_edit')
     this.mindMap.renderer.textEdit.registerTmpShortcut()
@@ -200,7 +202,8 @@ class RichText {
     this.initQuillEditor()
     document.querySelector('.ql-editor').style.minHeight = originHeight + 'px'
     this.showTextEdit = true
-    this.focus()
+    // 如果是刚创建的节点，那么默认全选，否则普通激活不全选
+    this.focus(isInserting ? 0 : null)
     if (!node.nodeData.data.richText) {
       // 如果是非富文本的情况，需要手动应用文本样式
       this.setTextStyleIfNotRichText(node)
@@ -250,6 +253,7 @@ class RichText {
     this.showTextEdit = false
     this.mindMap.emit('rich_text_selection_change', false)
     this.node = null
+    this.isInserting = false
   }
 
   // 初始化Quill富文本编辑器
@@ -264,6 +268,12 @@ class RichText {
               handler: function () {
                 // 覆盖默认的回车键换行
               }
+            },
+            tab: {
+              key: 9,
+              handler: function () {
+                // 覆盖默认的tab键
+              }
             }
           }
         }
@@ -271,6 +281,8 @@ class RichText {
       theme: 'snow'
     })
     this.quill.on('selection-change', range => {
+      // 刚创建的节点全选不需要显示操作条
+      if (this.isInserting) return
       this.lastRange = this.range
       this.range = null
       if (range) {
@@ -338,9 +350,9 @@ class RichText {
   }
 
   // 聚焦
-  focus() {
+  focus(start) {
     let len = this.quill.getLength()
-    this.quill.setSelection(len, len)
+    this.quill.setSelection(typeof start === 'number' ? start : len, len)
   }
 
   // 格式化当前选中的文本

simple-mind-map/src/plugins/Search.js

@@ -0,0 +1,143 @@
+import { bfsWalk, getTextFromHtml } from '../utils/index'
+
+// 搜索插件
+class Search {
+  //  构造函数
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+    // 是否正在搜索
+    this.isSearching = false
+    // 搜索文本
+    this.searchText = ''
+    // 匹配的节点列表
+    this.matchNodeList = []
+    // 当前所在的节点列表索引
+    this.currentIndex = -1
+    // 是否正在跳转中
+    this.isJumping = false
+    this.onDataChange = this.onDataChange.bind(this)
+    this.mindMap.on('data_change', this.onDataChange)
+  }
+
+  // 节点数据改变了，需要重新搜索
+  onDataChange() {
+    if (this.isJumping) return
+    this.searchText = ''
+  }
+
+  // 搜索
+  search(text, callback) {
+    text = String(text).trim()
+    if (!text) return this.endSearch()
+    this.isSearching = true
+    if (this.searchText === text) {
+      // 和上一次搜索文本一样，那么搜索下一个
+      this.searchNext(callback)
+    } else {
+      // 和上次搜索文本不一样，那么重新开始
+      this.searchText = text
+      this.doSearch()
+      this.searchNext(callback)
+    }
+    this.emitEvent()
+  }
+
+  // 结束搜索
+  endSearch() {
+    if (!this.isSearching) return
+    this.searchText = ''
+    this.matchNodeList = []
+    this.currentIndex = -1
+    this.isJumping = false
+    this.isSearching = false
+    this.emitEvent()
+  }
+
+  // 搜索匹配的节点
+  doSearch() {
+    this.matchNodeList = []
+    this.currentIndex = -1
+    bfsWalk(this.mindMap.renderer.root, node => {
+      let { richText, text } = node.nodeData.data
+      if (richText) {
+        text = getTextFromHtml(text)
+      }
+      if (text.includes(this.searchText)) {
+        this.matchNodeList.push(node)
+      }
+    })
+  }
+
+  // 搜索下一个，定位到下一个匹配节点
+  searchNext(callback) {
+    if (!this.isSearching || this.matchNodeList.length <= 0) return
+    if (this.currentIndex < this.matchNodeList.length - 1) {
+      this.currentIndex++
+    } else {
+      this.currentIndex = 0
+    }
+    let currentNode = this.matchNodeList[this.currentIndex]
+    this.isJumping = true
+    this.mindMap.execCommand('GO_TARGET_NODE', currentNode, () => {
+      this.isJumping = false
+      callback()
+    })
+  }
+
+  // 替换当前节点
+  replace(replaceText) {
+    replaceText = String(replaceText).trim()
+    if (!replaceText || !this.isSearching || this.matchNodeList.length <= 0)
+      return
+    let currentNode = this.matchNodeList[this.currentIndex]
+    if (!currentNode) return
+    let text = this.getReplacedText(currentNode, this.searchText, replaceText)
+    currentNode.setText(text, currentNode.nodeData.data.richText)
+    this.matchNodeList = this.matchNodeList.filter(node => {
+      return currentNode !== node
+    })
+    this.emitEvent()
+  }
+
+  // 替换所有
+  replaceAll(replaceText) {
+    replaceText = String(replaceText).trim()
+    if (!replaceText || !this.isSearching || this.matchNodeList.length <= 0)
+      return
+    this.matchNodeList.forEach(node => {
+      let text = this.getReplacedText(node, this.searchText, replaceText)
+      this.mindMap.renderer.setNodeDataRender(
+        node,
+        {
+          text,
+          resetRichText: !!node.nodeData.data.richText
+        },
+        true
+      )
+    })
+    this.mindMap.render()
+    this.mindMap.command.addHistory()
+    this.endSearch()
+  }
+
+  // 获取某个节点替换后的文本
+  getReplacedText(node, searchText, replaceText) {
+    let { richText, text } = node.nodeData.data
+    if (richText) {
+      text = getTextFromHtml(text)
+    }
+    return text.replaceAll(searchText, replaceText)
+  }
+
+  // 发送事件
+  emitEvent() {
+    this.mindMap.emit('search_info_change', {
+      currentIndex: this.currentIndex,
+      total: this.matchNodeList.length
+    })
+  }
+}
+
+Search.instanceName = 'search'
+
+export default Search

simple-mind-map/src/plugins/Select.js

@@ -1,7 +1,6 @@
 import { bfsWalk, throttle } from '../utils'
 
-//  选择节点类
-
+// 节点选择插件
 class Select {
   //  构造函数
   constructor({ mindMap }) {

simple-mind-map/src/plugins/TouchEvent.js

@@ -1,5 +1,4 @@
-// 手势事件支持类
-
+// 手势事件支持插件
 class TouchEvent {
   //  构造函数
   constructor({ mindMap }) {
@@ -50,16 +49,20 @@ class TouchEvent {
     } else if (len === 2) {
       let touch1 = e.touches[0]
       let touch2 = e.touches[1]
-      let distance = Math.sqrt(
-        Math.pow(touch1.clientX - touch2.clientX, 2) +
-          Math.pow(touch1.clientY - touch2.clientY, 2)
-      )
+      let ox = touch1.clientX - touch2.clientX
+      let oy = touch1.clientY - touch2.clientY
+      let distance = Math.sqrt(Math.pow(ox, 2) + Math.pow(oy, 2))
+      // 以两指中心点进行缩放
+      let { x: touch1ClientX, y: touch1ClientY } = this.mindMap.toPos(touch1.clientX, touch1.clientY)
+      let { x: touch2ClientX, y: touch2ClientY } = this.mindMap.toPos(touch2.clientX, touch2.clientY)
+      let cx = (touch1ClientX + touch2ClientX) / 2
+      let cy = (touch1ClientY + touch2ClientY) / 2
       if (distance > this.doubleTouchmoveDistance) {
         // 放大
-        this.mindMap.view.enlarge()
+        this.mindMap.view.enlarge(cx, cy)
       } else {
         // 缩小
-        this.mindMap.view.narrow()
+        this.mindMap.view.narrow(cx, cy)
       }
       this.doubleTouchmoveDistance = distance
     }
@@ -82,7 +85,8 @@ class TouchEvent {
         this.clickNum = 0
         this.dispatchMouseEvent('dblclick', ev.target, ev)
       } else {
-        this.dispatchMouseEvent('click', ev.target, ev)
+        // 点击事件应该不用模拟
+        // this.dispatchMouseEvent('click', ev.target, ev)
       }
     }
     this.touchesNum = 0

simple-mind-map/src/plugins/Watermark.js

@@ -2,7 +2,7 @@ import { Text, G } from '@svgdotjs/svg.js'
 import { degToRad, camelCaseToHyphen } from '../utils'
 import merge from 'deepmerge'
 
-// 水印类
+// 水印插件
 class Watermark {
   constructor(opt = {}) {
     this.mindMap = opt.mindMap

simple-mind-map/src/svg/btns.js

@@ -4,7 +4,11 @@ const open = `<svg t="1618141562310" class="icon" viewBox="0 0 1024 1024" versio
 //  收缩按钮
 const close = `<svg t="1618141589243" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13611" width="200" height="200"><path d="M512 105.472c225.28 0 407.04 181.76 407.04 407.04s-181.76 407.04-407.04 407.04-407.04-181.76-407.04-407.04 181.76-407.04 407.04-407.04z m0-74.24c-265.216 0-480.768 215.552-480.768 480.768s215.552 480.768 480.768 480.768 480.768-215.552 480.768-480.768-215.552-480.768-480.768-480.768z" p-id="13612"></path><path d="M252.928 474.624h518.144v74.24h-518.144z" p-id="13613"></path></svg>`
 
+// 图片调整按钮
+const imgAdjust = `<svg width="12px" height="12px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M1008.128 614.4a25.6 25.6 0 0 0-27.648 5.632l-142.848 142.848L259.072 186.88 401.92 43.52A25.6 25.6 0 0 0 384 0h-358.4a25.6 25.6 0 0 0-25.6 25.6v358.4a25.6 25.6 0 0 0 43.52 17.92l143.36-142.848 578.048 578.048-142.848 142.848a25.6 25.6 0 0 0 17.92 43.52h358.4a25.6 25.6 0 0 0 25.6-25.6v-358.4a25.6 25.6 0 0 0-15.872-25.088z"  /></svg>`
+
 export default {
   open,
-  close
+  close,
+  imgAdjust
 }

simple-mind-map/src/utils/index.js

@@ -1,3 +1,5 @@
+import { v4 as uuidv4 } from 'uuid'
+
 //  深度优先遍历树
 export const walk = (
   root,
@@ -31,9 +33,11 @@ export const walk = (
 
 //  广度优先遍历树
 export const bfsWalk = (root, callback) => {
-  callback(root)
   let stack = [root]
   let isStop = false
+  if (callback(root, null) === 'stop') {
+    isStop = true
+  }
   while (stack.length) {
     if (isStop) {
       break
@@ -41,8 +45,9 @@ export const bfsWalk = (root, callback) => {
     let cur = stack.shift()
     if (cur.children && cur.children.length) {
       cur.children.forEach(item => {
+        if (isStop) return
         stack.push(item)
-        if (callback(item) === 'stop') {
+        if (callback(item, cur) === 'stop') {
           isStop = true
         }
       })
@@ -50,6 +55,26 @@ export const bfsWalk = (root, callback) => {
   }
 }
 
+// 按原比例缩放图片
+export const resizeImgSizeByOriginRatio = (
+  width,
+  height,
+  newWidth,
+  newHeight
+) => {
+  let arr = []
+  let nRatio = width / height
+  let mRatio = newWidth / newHeight
+  if (nRatio > mRatio) {
+    // 固定高度
+    arr = [nRatio * newHeight, newHeight]
+  } else {
+    // 固定宽度
+    arr = [newWidth, newWidth / nRatio]
+  }
+  return arr
+}
+
 //  缩放图片尺寸
 export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
   let nRatio = width / height
@@ -137,7 +162,12 @@ export const copyRenderTree = (tree, root, removeActiveState = false) => {
 }
 
 //  复制节点树数据
-export const copyNodeTree = (tree, root, removeActiveState = false, keepId = false) => {
+export const copyNodeTree = (
+  tree,
+  root,
+  removeActiveState = false,
+  keepId = false
+) => {
   tree.data = simpleDeepClone(root.nodeData ? root.nodeData.data : root.data)
   // 去除节点id，因为节点id不能重复
   if (tree.data.id && !keepId) delete tree.data.id
@@ -188,6 +218,18 @@ export const imgToDataUrl = src => {
   })
 }
 
+// 解析dataUrl
+export const parseDataUrl = data => {
+  if (!/^data:/.test(data)) return data
+  let [typeStr, base64] = data.split(',')
+  let res = /^data:[^/]+\/([^;]+);/.exec(typeStr)
+  let type = res[1]
+  return {
+    type,
+    base64
+  }
+}
+
 //  下载文件
 export const downloadFile = (file, fileName) => {
   let a = document.createElement('a')
@@ -236,8 +278,8 @@ export const degToRad = deg => {
   return deg * (Math.PI / 180)
 }
 
-// 驼峰转连字符 
-export const camelCaseToHyphen = (str) => {
+// 驼峰转连字符
+export const camelCaseToHyphen = str => {
   return str.replace(/([a-z])([A-Z])/g, (...args) => {
     return args[1] + '-' + args[2].toLowerCase()
   })
@@ -258,11 +300,8 @@ export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
   }
   measureTextContext.save()
   measureTextContext.font = font
-  const {
-    width,
-    actualBoundingBoxAscent,
-    actualBoundingBoxDescent
-  } = measureTextContext.measureText(text)
+  const { width, actualBoundingBoxAscent, actualBoundingBoxDescent } =
+    measureTextContext.measureText(text)
   measureTextContext.restore()
   const height = actualBoundingBoxAscent + actualBoundingBoxDescent
   return { width, height }
@@ -270,7 +309,9 @@ export const measureText = (text, { italic, bold, fontSize, fontFamily }) => {
 
 // 拼接font字符串
 export const joinFontStr = ({ italic, bold, fontSize, fontFamily }) => {
-  return `${italic ? 'italic ' : ''} ${bold ? 'bold ' : ''} ${fontSize}px ${fontFamily} `
+  return `${italic ? 'italic ' : ''} ${
+    bold ? 'bold ' : ''
+  } ${fontSize}px ${fontFamily} `
 }
 
 //  在下一个事件循环里执行任务
@@ -336,7 +377,7 @@ export const checkNodeOuter = (mindMap, node) => {
 
 // 提取html字符串里的纯文本
 let getTextFromHtmlEl = null
-export const getTextFromHtml = (html) => {
+export const getTextFromHtml = html => {
   if (!getTextFromHtmlEl) {
     getTextFromHtmlEl = document.createElement('div')
   }
@@ -345,13 +386,13 @@ export const getTextFromHtml = (html) => {
 }
 
 // 将blob转成data:url
-export const readBlob = (blob) => {
+export const readBlob = blob => {
   return new Promise((resolve, reject) => {
     let reader = new FileReader()
-    reader.onload = (evt) => {
+    reader.onload = evt => {
       resolve(evt.target.result)
     }
-    reader.onerror = (err) => {
+    reader.onerror = err => {
       reject(err)
     }
     reader.readAsDataURL(blob)
@@ -360,11 +401,68 @@ export const readBlob = (blob) => {
 
 // 将dom节点转换成html字符串
 let nodeToHTMLWrapEl = null
-export const nodeToHTML = (node) => {
+export const nodeToHTML = node => {
   if (!nodeToHTMLWrapEl) {
     nodeToHTMLWrapEl = document.createElement('div')
   }
   nodeToHTMLWrapEl.innerHTML = ''
   nodeToHTMLWrapEl.appendChild(node)
   return nodeToHTMLWrapEl.innerHTML
+}
+
+// 获取图片大小
+export const getImageSize = src => {
+  return new Promise(resolve => {
+    let img = new Image()
+    img.src = src
+    img.onload = () => {
+      resolve({
+        width: img.width,
+        height: img.height
+      })
+    }
+    img.onerror = () => {
+      resolve({
+        width: 0,
+        height: 0
+      })
+    }
+  })
+}
+
+// 创建节点唯一的id
+export const createUid = () => {
+  return uuidv4()
+}
+
+// 加载图片文件
+export const loadImage = imgFile => {
+  return new Promise((resolve, reject) => {
+    let fr = new FileReader()
+    fr.readAsDataURL(imgFile)
+    fr.onload = async e => {
+      let url = e.target.result
+      let size = await getImageSize(url)
+      resolve({
+        url,
+        size
+      })
+    }
+    fr.onerror = error => {
+      reject(error)
+    }
+  })
+}
+
+// 移除字符串中的html实体
+export const removeHTMLEntities = (str) => {
+  [[' ', ' ']].forEach((item) => {
+    str = str.replaceAll(item[0], item[1])
+  })
+  return str
+}
+
+// 获取一个数据的类型
+export const getType = (data) => {
+  return Object.prototype.toString.call(data).slice(7, -1)
 }

web/public/index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
-    <link rel="icon" href="./dist/logo.png">
-    <title>一个简单的web思维导图实现</title>
+    <link rel="icon" href="./dist/logo.ico">
+    <title>思绪思维导图</title>
   </head>
   <body>
     <noscript>

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1686298427624') format('woff2'),
-       url('iconfont.woff?t=1686298427624') format('woff'),
-       url('iconfont.ttf?t=1686298427624') format('truetype');
+  src: url('iconfont.woff2?t=1690506335310') format('woff2'),
+       url('iconfont.woff?t=1690506335310') format('woff'),
+       url('iconfont.ttf?t=1690506335310') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,62 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconsousuo:before {
+  content: "\e693";
+}
+
+.iconjiantouyou:before {
+  content: "\e62d";
+}
+
+.iconbianji1:before {
+  content: "\e60a";
+}
+
+.icondaohang1:before {
+  content: "\e632";
+}
+
+.iconyanjing:before {
+  content: "\e8bf";
+}
+
+.iconwangzhan:before {
+  content: "\e628";
+}
+
+.iconcsdn:before {
+  content: "\e608";
+}
+
+.iconshejiaotubiao-10:before {
+  content: "\e644";
+}
+
+.iconstar:before {
+  content: "\e7df";
+}
+
+.iconfork:before {
+  content: "\e641";
+}
+
+.iconxiazai:before {
+  content: "\e613";
+}
+
+.iconteamwork:before {
+  content: "\e870";
+}
+
+.iconshuiyin:before {
+  content: "\e67a";
+}
+
+.iconxmind:before {
+  content: "\ea57";
+}
+
 .iconmouseR:before {
   content: "\e6bd";
 }

web/src/config/constant.js

@@ -1,12 +1,13 @@
 //  布局结构图片映射
 export const layoutImgMap = {
-    logicalStructure: require('../assets/img/logicalStructure.jpg'),
-    mindMap: require('../assets/img/mindMap.jpg'),
-    organizationStructure: require('../assets/img/organizationStructure.jpg'),
-    catalogOrganization: require('../assets/img/catalogOrganization.jpg'),
-    timeline: require('../assets/img/timeline.jpg'),
-    timeline2: require('../assets/img/timeline2.jpg'),
-    fishbone: require('../assets/img/fishbone.jpg'),
+    logicalStructure: require('../assets/img/logicalStructure.png'),
+    mindMap: require('../assets/img/mindMap.png'),
+    organizationStructure: require('../assets/img/organizationStructure.png'),
+    catalogOrganization: require('../assets/img/catalogOrganization.png'),
+    timeline: require('../assets/img/timeline.png'),
+    timeline2: require('../assets/img/timeline2.png'),
+    fishbone: require('../assets/img/fishbone.png'),
+    verticalTimeline: require('../assets/img/verticalTimeline.png'),
 }
 
 //  主题图片映射

web/src/config/en.js

@@ -210,7 +210,7 @@ export const shortcutKeyList = [
       {
         icon: 'icongaikuozonglan',
         name: 'Insert summary',
-        value: 'Ctrl + S'
+        value: 'Ctrl + G'
       },
       {
         icon: 'iconzhankai',
@@ -271,6 +271,11 @@ export const shortcutKeyList = [
         icon: 'iconzhengli',
         name: 'Arrange layout',
         value: 'Ctrl + L'
+      },
+      {
+        icon: 'iconsousuo',
+        name: 'Search and Replace',
+        value: 'Ctrl + F'
       }
     ]
   },
@@ -412,5 +417,11 @@ export const downTypeList = [
     type: 'md',
     icon: 'iconmarkdown',
     desc: 'Easy for other software to open'
+  },
+  {
+    name: 'XMind',
+    type: 'xmind',
+    icon: 'iconxmind',
+    desc: 'XMind file'
   }
 ]

web/src/config/zh.js

@@ -270,7 +270,7 @@ export const shortcutKeyList = [
       {
         icon: 'icongaikuozonglan',
         name: '插入概要',
-        value: 'Ctrl + S'
+        value: 'Ctrl + G'
       },
       {
         icon: 'iconzhankai',
@@ -331,6 +331,11 @@ export const shortcutKeyList = [
         icon: 'iconzhengli',
         name: '一键整理布局',
         value: 'Ctrl + L'
+      },
+      {
+        icon: 'iconsousuo',
+        name: '搜索和替换',
+        value: 'Ctrl + F'
       }
     ]
   },
@@ -484,5 +489,11 @@ export const downTypeList = [
     type: 'md',
     icon: 'iconmarkdown',
     desc: '便于其他软件打开'
+  },
+  {
+    name: 'XMind',
+    type: 'xmind',
+    icon: 'iconxmind',
+    desc: 'XMind格式'
   }
 ]

web/src/lang/en_us.js

@@ -43,7 +43,10 @@ export default {
     associativeLineWidth: 'Width',
     associativeLineColor: 'Color',
     associativeLineActiveWidth: 'Active width',
-    associativeLineActiveColor: 'Active color'
+    associativeLineActiveColor: 'Active color',
+    mousewheelZoomActionReverse: 'Mouse Wheel Zoom',
+    mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back',
+    mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back'
   },
   color: {
     moreColor: 'More color'
@@ -111,8 +114,9 @@ export default {
   },
   navigatorToolbar: {
     openMiniMap: 'Open mini map',
-    readonly: 'Readonly',
-    edit: 'Edit'
+    closeMiniMap: 'Close mini map',
+    readonly: 'Change to eadonly',
+    edit: 'Change to edit'
   },
   nodeHyperlink: {
     title: 'Link',
@@ -206,5 +210,12 @@ export default {
   mouseAction: {
     tip1: 'Current: Left click to drag the canvas, right click to box select nodes',
     tip2: 'Current: Left click to box select nodes, right click to drag the canvas',
+  },
+  search: {
+    searchPlaceholder: 'Please enter the search content',
+    replacePlaceholder: 'Please enter replacement content',
+    replace: 'Replace',
+    replaceAll: 'Replace all',
+    cancel: 'Cancel'
   }
 }

web/src/lang/zh_cn.js

@@ -43,7 +43,10 @@ export default {
     associativeLineWidth: '粗细',
     associativeLineColor: '颜色',
     associativeLineActiveWidth: '激活粗细',
-    associativeLineActiveColor: '激活颜色'
+    associativeLineActiveColor: '激活颜色',
+    mousewheelZoomActionReverse: '鼠标滚轮缩放',
+    mousewheelZoomActionReverse1: '向前缩小向后放大',
+    mousewheelZoomActionReverse2: '向前放大向后缩小'
   },
   color: {
     moreColor: '更多颜色'
@@ -111,8 +114,9 @@ export default {
   },
   navigatorToolbar: {
     openMiniMap: '开启小地图',
-    readonly: '只读模式',
-    edit: '编辑模式'
+    closeMiniMap: '关闭小地图',
+    readonly: '切换为只读模式',
+    edit: '切换为编辑模式'
   },
   nodeHyperlink: {
     title: '超链接',
@@ -206,5 +210,12 @@ export default {
   mouseAction: {
     tip1: '当前：左键拖动画布，右键框选节点',
     tip2: '当前：左键框选节点，右键拖动画布',
+  },
+  search: {
+    searchPlaceholder: '请输入查找内容',
+    replacePlaceholder: '请输入替换内容',
+    replace: '替换',
+    replaceAll: '全部替换',
+    cancel: '取消'
   }
 }

web/src/pages/Doc/Index.vue

@@ -15,7 +15,8 @@
 import Header from './components/Header.vue'
 import Sidebar from './components/Sidebar.vue'
 import CatalogBar from './components/CatalogBar.vue'
-import 'highlight.js/styles/atom-one-dark.css'
+// import 'highlight.js/styles/atom-one-dark.css'
+import 'highlight.js/styles/github.css'
 
 export default {
   components: {
@@ -103,7 +104,7 @@ export default {
       a {
         font-weight: 500;
         text-decoration: none;
-        color: #42b883;
+        color: #1ea59a;
         transition: color 0.25s;
 
         &:hover {

web/src/pages/Doc/catalogList.js

@@ -11,7 +11,7 @@ let langList = [
   }
 ]
 let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(20).fill(0).map((_, index) => {
+let CourseList = new Array(21).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })
 let APIList = [
@@ -31,10 +31,15 @@ let APIList = [
   'watermark',
   'associativeLine',
   'touchEvent',
+  'nodeImgAdjust',
+  'search',
   'xmind',
   'markdown',
   'utils'
 ]
+let helpList = new Array(2).fill(0).map((_, index) => {
+  return 'help' + (index + 1)
+})
 
 const createList = (lang, list) => {
   let langRouter = routerList.find(item => {
@@ -61,28 +66,39 @@ export default {
   zh: [
     {
       groupName: '开始',
+      type: 'doc',
       list: createList('zh', StartList)
     },
     {
       groupName: '教程',
+      type: 'doc',
       list: createList('zh', CourseList)
     },
     {
       groupName: 'API',
+      type: 'doc',
       list: createList('zh', APIList)
+    },
+    {
+      groupName: '使用帮助',
+      type: 'help',
+      list: createList('zh', helpList)
     }
   ],
   en: [
     {
       groupName: 'Start',
+      type: 'doc',
       list: createList('en', StartList)
     },
     {
       groupName: 'Course',
+      type: 'doc',
       list: createList('zh', CourseList)
     },
     {
       groupName: 'API',
+      type: 'doc',
       list: createList('en', APIList)
     }
   ]

web/src/pages/Doc/components/CatalogBar.vue

@@ -66,18 +66,18 @@ export default {
   methods: {
     // 获取当前语言
     initLang() {
-      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
-      if (lang && lang[1]) {
-        this.lang = lang[1]
+      let lang = /^\/(doc|help)\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[2]) {
+        this.lang = lang[2]
       }
     },
 
     // 初始化二级标题目录
     initCatalogList(newPath, oldPath) {
-      let newPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(newPath)
-      let oldPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(oldPath)
+      let newPathRes = /^\/(doc|help)\/[^\/]+\/([^\/]+)/.exec(newPath)
+      let oldPathRes = /^\/(doc|help)\/[^\/]+\/([^\/]+)/.exec(oldPath)
       // 语言变了、章节变了，需要重新获取二级标题目录
-      if ((!newPath && !oldPath) || newPathRes[1] !== oldPathRes[1]) {
+      if ((!newPath && !oldPath) || newPathRes[2] !== oldPathRes[2]) {
         this.$emit('scroll', 0)
         this.resetActive()
         let container = document.getElementById('doc')
@@ -93,9 +93,9 @@ export default {
 
     // 如果url中存在二级标题，那么滚动到该标题所在位置
     scrollToCatalog() {
-      let url = /^\/doc\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
-      if (url && url[1]) {
-        let h = decodeURIComponent(url[1])
+      let url = /^\/(doc|help)\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
+      if (url && url[2]) {
+        let h = decodeURIComponent(url[2])
         let item = this.list.find(item => {
           return item.title === h
         })
@@ -126,15 +126,15 @@ export default {
       let path = this.$route.path
       let url = ''
       if (!title) {
-        url = path.replace(/^(\/doc\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
-      } else if (/^\/doc\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
+        url = path.replace(/^(\/(doc|help)\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
+      } else if (/^\/(doc|help)\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
         url = path.replace(
-          /^(\/doc\/[^\/]+\/[^\/]+)($|\/)$/,
+          /^(\/(doc|help)\/[^\/]+\/[^\/]+)($|\/)$/,
           '$1/' + encodeURIComponent(title)
         )
       } else {
         url = path.replace(
-          /^(\/doc\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
+          /^(\/(doc|help)\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
           (...args) => {
             return args[1] + encodeURIComponent(title)
           }
@@ -225,7 +225,7 @@ export default {
       left: -10px;
       width: 4px;
       height: 20px;
-      background-color: #42b883;
+      background-color: #1ea59a;
       border-radius: 4px;
       transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
         background-color 0.5s;

web/src/pages/Doc/components/Header.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="headerContainer">
     <div class="left">
-      <div class="title">
-        <img src="../../../assets/img/logo.png" alt="">
+      <div class="title" @click="toIndex">
+        <img src="../../../assets/img/logo2.png" alt="">
         SimpleMindMap
       </div>
     </div>
@@ -74,6 +74,10 @@ export default {
       }
     },
 
+    toIndex() {
+      this.$router.push('/index')
+    },
+
     toDemo() {
       this.$router.push('/')
     },
@@ -108,6 +112,7 @@ export default {
       font-weight: bold;
       display: flex;
       align-items: center;
+      cursor: pointer;
 
       img {
         width: 30px;
@@ -130,7 +135,7 @@ export default {
       font-size: 14px;
 
       &:hover {
-        color: #42b883;
+        color: #1ea59a;
       }
     }
 

web/src/pages/Doc/components/Sidebar.vue

@@ -31,7 +31,8 @@ export default {
     return {
       groupList: [],
       lang: '',
-      currentPath: ''
+      currentPath: '',
+      type: ''// doc、help
     }
   },
   created() {
@@ -47,20 +48,24 @@ export default {
       if (item.path === this.currentPath) {
         return
       }
-      this.$router.push(`/doc/${this.lang}/${item.path}`)
+      this.$router.push(`/${this.type}/${this.lang}/${item.path}`)
     },
 
     initCatalog() {
       // 目录列表
-      let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
-      if (lang && lang[1]) {
-        this.lang = lang[1]
-        this.groupList = catalogList[this.lang]
+      let lang = /^\/(doc|help)\/([^\/]+)\//.exec(this.$route.path)
+      if (lang && lang[2]) {
+        this.type = lang[1]// 判断是开发文档还是帮助文档
+        this.lang = lang[2]
+        // 过滤出对应文档的章节
+        this.groupList = catalogList[this.lang].filter((item) => {
+          return item.type === this.type
+        })
       }
       // 当前所在路径
-      let path = /^\/doc\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
-      if (path && path[1]) {
-        this.currentPath = path[1]
+      let path = /^\/(doc|help)\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
+      if (path && path[2]) {
+        this.currentPath = path[2]
       }
     }
   }
@@ -108,7 +113,7 @@ export default {
           }
 
           &.active {
-            color: #42b883;
+            color: #1ea59a;
           }
         }
       }

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,59 @@
 # Changelog
 
+## 0.6.9
+
+Fix: 1.Fixed an issue where setting styles to summary nodes would cause summary nodes to disappear. 2.Fixed the issue of node content not rendering when creating a root instance again when customizing node content. 3.Fix the issue of losing focus when adding a new node while the node is in editing. 2.Fix the issue of continuously pressing the tab key not being able to continuously create child nodes.
+
+New: 1.Replace existing ` ` in SVG when exporting Characters to avoid exporting SVG errors. 2.Support for search and replace.
+
+Demo: 1.When switching themes, it is supported to choose whether to overwrite the set basic style.
+
+## 0.6.8
+
+Fix: 1.Change the shortcut key for inserting a summary to Ctrl+G to avoid conflicts with the save shortcut key. 2.Fix the issue of abnormal switching between rich text editing configuration input boxes while nodes are being edited.
+
+New: 1.Modify the copy, cut, and paste logic, and support pasting data from the clipboard.
+
+Demo: 1.Fix the issue of not saving the outer margin of the basic style setting node. 2.Supports automatic switching to dark mode based on the theme.
+
+## 0.6.7
+
+Fix: 1.Fixed the issue of missing placeholder elements for the expand and collapse button after node collapse and expansion. 2.Fixed the issue of being able to scale images in read-only mode.
+
+New: 1.Support locating to a node based on node instance or node uid. 2.Modify the creation method of node uids and export data to add node uids.
+
+Remove: 1.Remove the node transition effect.
+
+Demo: 1.Add website homepage. 2.Fixed the issue of missing node styles when creating new nodes in the outline. 3.Fixed the issue of missing edited text after pressing Enter or Tab after editing nodes in the outline. 4.Optimize the node positioning of the outline, and the collapsed nodes will automatically expand. 5.The sidebar button supports folding. 6.Optimize small screen adaptation.
+
+## 0.6.6
+
+New: 1.Support exporting to Xmind new version files. 2.Importing the new version of Xmind file supports importing images from nodes. 3.Add a vertical timeline structure.
+
+Fix: 1.The TouchEvent plugin no longer sends click events, solving the problem of two windows opening when clicking on a hyperlink on the mobile end.  2.Fix the issue of dragging and moving a node to become a child node of another node, where the parent node of that node points to not being updated.  3.Fixed an issue where the node border style was not updated when dragging a second level node into a third level node.  4.Fix the issue where the mouse will not trigger the button display when moving into the unfolded or retracted button position, except for the structure growing to the right.
+
+optimization: 1.The issue of excessive amplitude when optimizing the touchpad to scale the canvas. 2.The newly created node defaults to selecting all for easy deletion of default text.
+
+## 0.6.5-fix.1
+
+Fix: 1.Fix the issue of adjusting the image size incorrectly while zooming.
+
+## 0.6.5
+
+Fix: 1.Fix the issue of xmind file import errors. 2.Fixed a rare issue where line breaks occur when the width of the node text is decimal.
+
+New: 1.The packaged library supports obtaining built-in constants, themes, and other data. 2.Supports configuring the zoom behavior corresponding to the direction of the mouse wheel. 3.Node images support dragging and resizing.
+
+## 0.6.4-fix.1
+
+New: 1.When zooming with the mouse wheel, the default zoom is centered around the current position of the mouse, which can be turned off by configuring.
+
+Fix: 1.Fixed an issue where the default value of the zoom center point was not updated after changing the canvas size.
+
+## 0.6.4
+
+New: 1.The default is to scale at the center point of the canvas. 2.Optimize the scaling of both fingers on the mobile end, with the center position of the two fingers as the center point for scaling.
+
 ## 0.6.3
 
 Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,33 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.9</h2>
+<p>Fix: 1.Fixed an issue where setting styles to summary nodes would cause summary nodes to disappear. 2.Fixed the issue of node content not rendering when creating a root instance again when customizing node content. 3.Fix the issue of losing focus when adding a new node while the node is in editing. 2.Fix the issue of continuously pressing the tab key not being able to continuously create child nodes.</p>
+<p>New: 1.Replace existing <code>&amp;nbsp;</code> in SVG when exporting Characters to avoid exporting SVG errors. 2.Support for search and replace.</p>
+<p>Demo: 1.When switching themes, it is supported to choose whether to overwrite the set basic style.</p>
+<h2>0.6.8</h2>
+<p>Fix: 1.Change the shortcut key for inserting a summary to Ctrl+G to avoid conflicts with the save shortcut key. 2.Fix the issue of abnormal switching between rich text editing configuration input boxes while nodes are being edited.</p>
+<p>New: 1.Modify the copy, cut, and paste logic, and support pasting data from the clipboard.</p>
+<p>Demo: 1.Fix the issue of not saving the outer margin of the basic style setting node. 2.Supports automatic switching to dark mode based on the theme.</p>
+<h2>0.6.7</h2>
+<p>Fix: 1.Fixed the issue of missing placeholder elements for the expand and collapse button after node collapse and expansion. 2.Fixed the issue of being able to scale images in read-only mode.</p>
+<p>New: 1.Support locating to a node based on node instance or node uid. 2.Modify the creation method of node uids and export data to add node uids.</p>
+<p>Remove: 1.Remove the node transition effect.</p>
+<p>Demo: 1.Add website homepage. 2.Fixed the issue of missing node styles when creating new nodes in the outline. 3.Fixed the issue of missing edited text after pressing Enter or Tab after editing nodes in the outline. 4.Optimize the node positioning of the outline, and the collapsed nodes will automatically expand. 5.The sidebar button supports folding. 6.Optimize small screen adaptation.</p>
+<h2>0.6.6</h2>
+<p>New: 1.Support exporting to Xmind new version files. 2.Importing the new version of Xmind file supports importing images from nodes. 3.Add a vertical timeline structure.</p>
+<p>Fix: 1.The TouchEvent plugin no longer sends click events, solving the problem of two windows opening when clicking on a hyperlink on the mobile end.  2.Fix the issue of dragging and moving a node to become a child node of another node, where the parent node of that node points to not being updated.  3.Fixed an issue where the node border style was not updated when dragging a second level node into a third level node.  4.Fix the issue where the mouse will not trigger the button display when moving into the unfolded or retracted button position, except for the structure growing to the right.</p>
+<p>optimization: 1.The issue of excessive amplitude when optimizing the touchpad to scale the canvas. 2.The newly created node defaults to selecting all for easy deletion of default text.</p>
+<h2>0.6.5-fix.1</h2>
+<p>Fix: 1.Fix the issue of adjusting the image size incorrectly while zooming.</p>
+<h2>0.6.5</h2>
+<p>Fix: 1.Fix the issue of xmind file import errors. 2.Fixed a rare issue where line breaks occur when the width of the node text is decimal.</p>
+<p>New: 1.The packaged library supports obtaining built-in constants, themes, and other data. 2.Supports configuring the zoom behavior corresponding to the direction of the mouse wheel. 3.Node images support dragging and resizing.</p>
+<h2>0.6.4-fix.1</h2>
+<p>New: 1.When zooming with the mouse wheel, the default zoom is centered around the current position of the mouse, which can be turned off by configuring.</p>
+<p>Fix: 1.Fixed an issue where the default value of the zoom center point was not updated after changing the canvas size.</p>
+<h2>0.6.4</h2>
+<p>New: 1.The default is to scale at the center point of the canvas. 2.Optimize the scaling of both fingers on the mobile end, with the center position of the two fingers as the center point for scaling.</p>
 <h2>0.6.3</h2>
 <p>Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.</p>
 <p>New: 1.Support custom node content.</p>

web/src/pages/Doc/en/constructor/index.md

@@ -45,13 +45,14 @@ const mindMap = new MindMap({
 | customHandleMousewheel（v0.4.3+）     | Function  | null | User-defined mouse wheel event processing can pass a function, and the callback parameter is the event object |          |
 | mousewheelAction（v0.4.3+）     | String  | zoom | The behavior of the mouse wheel, `zoom`(Zoom in and out)、`move`(Move up and down). If `customHandleMousewheel` passes a custom function, this property will not take effect                 |          |
 | mousewheelMoveStep（v0.4.3+）     | Number  | 100 | When the `mousewheelAction` is set to `move`, you can use this attribute to control the step length of the view movement when the mouse scrolls. The unit is `px`  |          |
+| mousewheelZoomActionReverse（v0.6.5+）     | Boolean  | false | When `mousewheelAction` is set to `zoom`, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed   |          |
 | defaultInsertSecondLevelNodeText（v0.4.7+）     | String  | 二级节点 | Text of the default inserted secondary node               |          |
 | defaultInsertBelowSecondLevelNodeText（v0.4.7+）     | String  | 分支主题 | Text for nodes below the second level inserted by default               |          |
 | expandBtnStyle（v0.5.0+）     | Object  | { color: '#808080', fill: '#fff' } | Expand the color of the stow button  |          |
 | expandBtnIcon（v0.5.0+）     | Object  | { open: '', close: '' } | Customize the icon of the expand/collapse button, and you can transfer the svg string of the icon  |          |
 | enableShortcutOnlyWhenMouseInSvg（v0.5.1+）     | Boolean  | true | Only respond to shortcut key events when the mouse is inside the canvas  |          |
-| enableNodeTransitionMove（v0.5.1+）     | Boolean  | true | Whether to enable node animation transition  |          |
-| nodeTransitionMoveDuration（v0.5.1+）     | Number  | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds  |          |
+| enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature）     | Boolean  | true | Whether to enable node animation transition  |          |
+| nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）     | Number  | 300 | If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds  |          |
 | initRootNodePosition（v0.5.3+）     | Array  | null | The position of the initial root node can be passed as an array, default is `['center', 'center']`, Represents the root node at the center of the canvas, In addition to `center`, keywords can also be set to `left`, `top`, `right`, and `bottom`, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as `['40%', '60%']`, Represents a horizontal position at `40%` of the canvas width, and a vertical position at `60%` of the canvas height   |          |
 | exportPaddingX（v0.5.5+）     |  Number | 10 | Horizontal padding of graphics when exporting PNG, SVG, and PDF  |          |
 | exportPaddingY（v0.5.5+）     | Number  | 10 | Vertical padding of graphics when exporting PNG, SVG, and PDF  |          |
@@ -69,6 +70,7 @@ const mindMap = new MindMap({
 | beforeTextEdit（v0.6.0+）     |  Function/null | null | The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance  |          |
 | isUseCustomNodeContent（v0.6.3+）     |  Boolean | false |  Whether to customize node content |          |
 | customCreateNodeContent（v0.6.3+）     |  Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` |          |
+| mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）     | Boolean  | true | Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas |          |
 
 ### Watermark config
 
@@ -233,6 +235,9 @@ Listen to an event. Event list:
 | hide_text_edit                   | Node text edit box close event                                           | textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)                            |
 | scale                            | Zoom event                                                               | scale (zoom ratio)                                                                                              |
 | node_img_dblclick（v0.2.15+）    | Node image double-click event                                            | this (node instance), e (event object)                                                                          |
+| node_img_mouseenter（v0.6.5+）    |  Node image mouseenter event                    | this（node instance）、imgNode（img node）、e（event object）                              |
+| node_img_mouseleave（v0.6.5+）    |  Node image mouseleave event                    | this（node instance）、imgNode（img node）、e（event object）                              |
+| node_img_mousemove（v0.6.5+）    |  Node image mousemove event                      | this（node instance）、imgNode（img node）、e（event object）                              |
 | node_tree_render_end（v0.2.16+） | Node tree render end event                                               |                                                                                                                 |
 | rich_text_selection_change（v0.4.0+）         |  Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited         |  hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）            |
 | transforming-dom-to-images（v0.4.0+）         |  Available when the `RichText` plugin is registered. When there is a `DOM` node in `svg`, the `DOM` node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting         |  index（Index of the node currently converted to）、len（Total number of nodes to be converted）            |
@@ -342,6 +347,7 @@ redo. All commands are as follows:
 | SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node                             | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) |
 | RESET_LAYOUT (v0.2.0+)             | Arrange layout with one click                                |                                                              |
 | SET_NODE_SHAPE (v0.2.4+)           | Set the shape of a node                                      | node (the node to set), shape (the shape, all shapes: [Shape.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js)) |
+| GO_TARGET_NODE（v0.6.7+）           |  Navigate to a node, and if the node is collapsed, it will automatically expand to that node   | node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion） |
 
 ### setData(data)
 

web/src/pages/Doc/en/constructor/index.vue

@@ -176,6 +176,13 @@
 <td></td>
 </tr>
 <tr>
+<td>mousewheelZoomActionReverse（v0.6.5+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>When <code>mousewheelAction</code> is set to <code>zoom</code>, the default scrolling forward is to zoom out, and scrolling backward is to zoom in. If this property is set to true, it will be reversed</td>
+<td></td>
+</tr>
+<tr>
 <td>defaultInsertSecondLevelNodeText（v0.4.7+）</td>
 <td>String</td>
 <td>二级节点</td>
@@ -211,14 +218,14 @@
 <td></td>
 </tr>
 <tr>
-<td>enableNodeTransitionMove（v0.5.1+）</td>
+<td>enableNodeTransitionMove（v0.5.1+）（v0.6.7+ is remove this feature）</td>
 <td>Boolean</td>
 <td>true</td>
 <td>Whether to enable node animation transition</td>
 <td></td>
 </tr>
 <tr>
-<td>nodeTransitionMoveDuration（v0.5.1+）</td>
+<td>nodeTransitionMoveDuration（v0.5.1+）（v0.6.7+ is remove this feature）</td>
 <td>Number</td>
 <td>300</td>
 <td>If node animation transition is enabled, the transition time can be set using this attribute, in milliseconds</td>
@@ -343,6 +350,13 @@
 <td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
 <td></td>
 </tr>
+<tr>
+<td>mouseScaleCenterUseMousePosition（v0.6.4-fix.1+）</td>
+<td>Boolean</td>
+<td>true</td>
+<td>Is the mouse zoom centered around the current position of the mouse, otherwise centered around the canvas</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>
@@ -646,6 +660,21 @@ poor performance and should be used sparingly.</p>
 <td>this (node instance), e (event object)</td>
 </tr>
 <tr>
+<td>node_img_mouseenter（v0.6.5+）</td>
+<td>Node image mouseenter event</td>
+<td>this（node instance）、imgNode（img node）、e（event object）</td>
+</tr>
+<tr>
+<td>node_img_mouseleave（v0.6.5+）</td>
+<td>Node image mouseleave event</td>
+<td>this（node instance）、imgNode（img node）、e（event object）</td>
+</tr>
+<tr>
+<td>node_img_mousemove（v0.6.5+）</td>
+<td>Node image mousemove event</td>
+<td>this（node instance）、imgNode（img node）、e（event object）</td>
+</tr>
+<tr>
 <td>node_tree_render_end（v0.2.16+）</td>
 <td>Node tree render end event</td>
 <td></td>
@@ -891,6 +920,11 @@ redo. All commands are as follows:</p>
 <td>Set the shape of a node</td>
 <td>node (the node to set), shape (the shape, all shapes: <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/core/render/node/Shape.js">Shape.js</a>)</td>
 </tr>
+<tr>
+<td>GO_TARGET_NODE（v0.6.7+）</td>
+<td>Navigate to a node, and if the node is collapsed, it will automatically expand to that node</td>
+<td>node（Node instance or node uid to locate）、callback（v0.6.9+, Callback function after positioning completion）</td>
+</tr>
 </tbody>
 </table>
 <h3>setData(data)</h3>

web/src/pages/Doc/en/deploy/index.md

@@ -1 +1,66 @@
-# Deploy
+# Deploy
+
+The 'web' directory of this project provides a complete project developed based on the 'simple mind map' library, 'Vue2. x', and 'ElementUI'. The data is stored locally on the computer by default, and can also be manipulated locally on the computer. Originally intended as an online 'demo', it can also be directly used as an online version of the mind map application, online address: [https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/).
+
+If your network environment is slow to access the 'GitHub' service, you can also deploy it to your server.
+
+## Deploying to a static file server
+
+The project itself does not rely on the backend, so it can be deployed to a static file server. The following commands can be executed in sequence:
+
+```bash
+git clone https://github.com/wanglin2/mind-map.git
+cd mind-map
+cd simple-mind-map
+npm i
+npm link
+cd ..
+cd web
+npm i
+npm link simple-mind-map
+```
+
+Then you can choose to start the local service:
+
+```bash
+npm run serve
+```
+
+You can also directly package and generate construction products:
+
+```bash
+npm run build
+```
+
+The packaged entry page 'index.html' can be found in the project root directory, and the corresponding static resources are located in the 'dist' directory under the root directory. The 'html' file will access the resources in the 'dist' directory through relative paths, such as 'dist/xxx'. You can directly upload these two files or directories to your static file server. In fact, this project is deployed to 'GitHub Pages' in this way.
+
+If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.
+
+If you want to package 'index.html' into the 'dist' directory as well, you can modify the 'scripts.build' command in the 'web/package.json' file to delete '&& node ../copy.js' from 'vue-cli-service build && node ../copy.js'.
+
+If you want to modify the directory for packaging output, you can modify the 'outputDir' configuration of the 'web/vue.config.js' file to the path you want to output.
+
+If you want to modify the path of the 'index. html' file referencing static resources, you can modify the 'publicPath' configuration of the 'web/vue.config.js' file.
+
+In addition, the default route used is 'hash ', which means that there will be '#'in the path. If you want to use the 'history' route, you can modify the 'web/src/router.js' file to:
+
+```js
+const router = new VueRouter({
+  routes
+})
+```
+
+Change to:
+
+```js
+const router = new VueRouter({
+  mode: 'history',
+  routes
+})
+```
+
+However, this requires backend support, as our application is a single page client application. If the backend is not properly configured, users will return 404 when accessing sub routes directly in the browser. Therefore, you need to add a candidate resource on the server that covers all situations: if the 'URL' cannot match any static resources, the same 'index. html' page should be returned.
+
+## Docker
+
+In writing...

web/src/pages/Doc/en/deploy/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <h1>Deploy</h1>
+<p>The 'web' directory of this project provides a complete project developed based on the 'simple mind map' library, 'Vue2. x', and 'ElementUI'. The data is stored locally on the computer by default, and can also be manipulated locally on the computer. Originally intended as an online 'demo', it can also be directly used as an online version of the mind map application, online address: <a href="https://wanglin2.github.io/mind-map/">https://wanglin2.github.io/mind-map/</a>.</p>
+<p>If your network environment is slow to access the 'GitHub' service, you can also deploy it to your server.</p>
+<h2>Deploying to a static file server</h2>
+<p>The project itself does not rely on the backend, so it can be deployed to a static file server. The following commands can be executed in sequence:</p>
+<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
+<span class="hljs-built_in">cd</span> mind-map
+<span class="hljs-built_in">cd</span> simple-mind-map
+npm i
+npm link
+<span class="hljs-built_in">cd</span> ..
+<span class="hljs-built_in">cd</span> web
+npm i
+npm link simple-mind-map
+</code></pre>
+<p>Then you can choose to start the local service:</p>
+<pre class="hljs"><code>npm run serve
+</code></pre>
+<p>You can also directly package and generate construction products:</p>
+<pre class="hljs"><code>npm run build
+</code></pre>
+<p>The packaged entry page 'index.html' can be found in the project root directory, and the corresponding static resources are located in the 'dist' directory under the root directory. The 'html' file will access the resources in the 'dist' directory through relative paths, such as 'dist/xxx'. You can directly upload these two files or directories to your static file server. In fact, this project is deployed to 'GitHub Pages' in this way.</p>
+<p>If you do not have any code modification requirements, it is also possible to directly copy these files from this repository.</p>
+<p>If you want to package 'index.html' into the 'dist' directory as well, you can modify the 'scripts.build' command in the 'web/package.json' file to delete '&amp;&amp; node ../copy.js' from 'vue-cli-service build &amp;&amp; node ../copy.js'.</p>
+<p>If you want to modify the directory for packaging output, you can modify the 'outputDir' configuration of the 'web/vue.config.js' file to the path you want to output.</p>
+<p>If you want to modify the path of the 'index. html' file referencing static resources, you can modify the 'publicPath' configuration of the 'web/vue.config.js' file.</p>
+<p>In addition, the default route used is 'hash ', which means that there will be '#'in the path. If you want to use the 'history' route, you can modify the 'web/src/router.js' file to:</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
+  routes
+})
+</code></pre>
+<p>Change to:</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> VueRouter({
+  <span class="hljs-attr">mode</span>: <span class="hljs-string">&#x27;history&#x27;</span>,
+  routes
+})
+</code></pre>
+<p>However, this requires backend support, as our application is a single page client application. If the backend is not properly configured, users will return 404 when accessing sub routes directly in the browser. Therefore, you need to add a candidate resource on the server that covers all situations: if the 'URL' cannot match any static resources, the same 'index. html' page should be returned.</p>
+<h2>Docker</h2>
+<p>In writing...</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Doc/en/doExport/index.md

@@ -104,4 +104,15 @@ Gets `svg` data, an async method that returns an object:
   node // svg node
   str // svg string
 }
-```
+```
+
+### xmind(name)
+
+> v0.6.6+, an additional ExportXMind plugin needs to be registered
+
+```js
+import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
+MindMap.usePlugin(ExportXMind)
+```
+
+Export as an `xmind` file type, asynchronous method, returns a `Promise` instance, and the returned data is the `data:url` data of a `zip` compressed package, which can be directly downloaded.

web/src/pages/Doc/en/doExport/index.vue

@@ -85,6 +85,14 @@ MindMap.usePlugin(ExportPDF)
   str <span class="hljs-comment">// svg string</span>
 }
 </code></pre>
+<h3>xmind(name)</h3>
+<blockquote>
+<p>v0.6.6+, an additional ExportXMind plugin needs to be registered</p>
+</blockquote>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> ExportXMind <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/ExportXMind.js&#x27;</span>
+MindMap.usePlugin(ExportXMind)
+</code></pre>
+<p>Export as an <code>xmind</code> file type, asynchronous method, returns a <code>Promise</code> instance, and the returned data is the <code>data:url</code> data of a <code>zip</code> compressed package, which can be directly downloaded.</p>
 
   </div>
 </template>

web/src/pages/Doc/en/introduction/index.md

@@ -136,4 +136,36 @@ Open source is not easy. If this project is helpful to you, you can invite the a
         <img src="../../../../assets/avatar/志斌.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>志斌</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>小土渣的宇宙</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/qp.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>qp</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/ZXR.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>ZXR</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/花儿朵朵.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>花儿朵朵</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/suka.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>suka</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Chris.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Chris</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/水车.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>水车</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>仓鼠</p>
+    </div>
 </div>

web/src/pages/Doc/en/introduction/index.vue

@@ -95,6 +95,38 @@ full screen, support mini map</li>
         <img src="../../../../assets/avatar/志斌.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>志斌</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>小土渣的宇宙</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/qp.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>qp</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/ZXR.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>ZXR</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/花儿朵朵.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>花儿朵朵</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/suka.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>suka</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/Chris.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>Chris</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/水车.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>水车</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>仓鼠</p>
+    </div>
 </div>
   </div>
 </template>

web/src/pages/Doc/en/nodeImgAdjust/index.md

@@ -0,0 +1,16 @@
+# NodeImgAdjust plugin
+
+> v0.6.5+
+
+This plugin provides the function of dragging and adjusting the size of images within nodes.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
+
+MindMap.usePlugin(NodeImgAdjust)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.nodeImgAdjust`.

web/src/pages/Doc/en/nodeImgAdjust/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h1>NodeImgAdjust plugin</h1>
+<blockquote>
+<p>v0.6.5+</p>
+</blockquote>
+<p>This plugin provides the function of dragging and adjusting the size of images within nodes.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> NodeImgAdjust <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/NodeImgAdjust.js&#x27;</span>
+
+MindMap.usePlugin(NodeImgAdjust)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.nodeImgAdjust</code>.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Doc/en/render/index.md

@@ -61,7 +61,9 @@ Delete a specific node
 Copy a node, the active node is the node to be operated on, if there are
 multiple active nodes, only the first node will be operated on
 
-### setNodeDataRender(node, data)
+### setNodeDataRender(node, data, notRender)
+
+- `notRender`: v0.6.9+, `Boolean`, Default is `false`, Do not trigger rendering.
 
 Set node `data`, i.e. the data in the data field, and will determine whether the
 node needs to be re-rendered based on whether the node size has changed, `data`
@@ -91,4 +93,40 @@ Move a node behind another node
 
 Move a node to the center of the canvas.
 
-Currently, if there is zoom, returning to the center will reset the zoom.
+Currently, if there is zoom, returning to the center will reset the zoom.
+
+### expandToNodeUid(uid, callback)
+
+> v0.6.7+
+
+- `uid`: uid of node
+
+- `callback`: Expand completed callback function
+
+Expand to the node of the specified uid.
+
+### findNodeByUid(uid)
+
+> v0.6.7+
+
+- `uid`: uid of node
+
+Find the corresponding node instance based on the uid.
+
+### copy()
+
+> v0.6.8+
+
+Copy nodes. After calling this method, the current activated node data will be stored. Multiple activated nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.
+
+### cut()
+
+> v0.6.8+
+
+Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. Multiple nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.
+
+### paste()
+
+> v0.6.8+
+
+Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it. This method does not support pasting data from the user's clipboard. Please use the built-in 'Ctrl+v' shortcut key.

web/src/pages/Doc/en/render/index.vue

@@ -37,7 +37,10 @@ disable the enter key and delete key related shortcuts to prevent conflicts</p>
 <h3>copyNode()</h3>
 <p>Copy a node, the active node is the node to be operated on, if there are
 multiple active nodes, only the first node will be operated on</p>
-<h3>setNodeDataRender(node, data)</h3>
+<h3>setNodeDataRender(node, data, notRender)</h3>
+<ul>
+<li><code>notRender</code>: v0.6.9+, <code>Boolean</code>, Default is <code>false</code>, Do not trigger rendering.</li>
+</ul>
 <p>Set node <code>data</code>, i.e. the data in the data field, and will determine whether the
 node needs to be re-rendered based on whether the node size has changed, <code>data</code>
 is an object, e.g. <code>{text: 'I am new text'}</code></p>
@@ -62,6 +65,42 @@ is an object, e.g. <code>{text: 'I am new text'}</code></p>
 </blockquote>
 <p>Move a node to the center of the canvas.</p>
 <p>Currently, if there is zoom, returning to the center will reset the zoom.</p>
+<h3>expandToNodeUid(uid, callback)</h3>
+<blockquote>
+<p>v0.6.7+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>uid</code>: uid of node</p>
+</li>
+<li>
+<p><code>callback</code>: Expand completed callback function</p>
+</li>
+</ul>
+<p>Expand to the node of the specified uid.</p>
+<h3>findNodeByUid(uid)</h3>
+<blockquote>
+<p>v0.6.7+</p>
+</blockquote>
+<ul>
+<li><code>uid</code>: uid of node</li>
+</ul>
+<p>Find the corresponding node instance based on the uid.</p>
+<h3>copy()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>Copy nodes. After calling this method, the current activated node data will be stored. Multiple activated nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.</p>
+<h3>cut()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>Cut a node. After calling this method, the currently active node will be cut and the node data will be stored. Multiple nodes will only operate on the first node, and subsequent calls to the 'paste()' method can be pasted.</p>
+<h3>paste()</h3>
+<blockquote>
+<p>v0.6.8+</p>
+</blockquote>
+<p>Pasting nodes can be done by calling the 'copy()' or 'cut()' method after calling it. This method does not support pasting data from the user's clipboard. Please use the built-in 'Ctrl+v' shortcut key.</p>
 
   </div>
 </template>

web/src/pages/Doc/en/search/index.md

@@ -0,0 +1,68 @@
+# Search plugin
+
+> v0.6.9+
+
+This plugin provides the ability to search and replace node content.
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import Search from 'simple-mind-map/src/plugins/Search.js'
+MindMap.usePlugin(Search)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.Search`.
+
+## Event
+
+### search_info_change
+
+You can listen to 'search_info_change' event to get the number of current search results and the index currently located.
+
+```js
+mindMap.on('search_info_change', (data) => {
+    /*
+        data: {
+            currentIndex,// Index, from zero
+            total
+        }
+    */
+})
+```
+
+## Method
+
+### search(searchText, callback)
+
+- `searchText`: Text to search for
+
+- `callback`: The callback function that completes this search will be triggered after jumping to the node
+
+Search for node content, which can be called repeatedly. Each call will search and locate to the next matching node. If the search text changes, it will be searched again.
+
+### endSearch()
+
+End search.
+
+### replace(replaceText)
+
+- `replaceText`: Text to be replaced
+
+To replace the content of the current node, call the 'search' method after calling it to replace the content of the currently located matching node.
+
+### replaceAll(replaceText)
+
+- `replaceText`: Text to be replaced
+
+Replace all matching node contents, and call it after calling the 'search' method.
+
+### getReplacedText(node, searchText, replaceText)
+
+- `node`: Node instance
+
+- `searchText`: Text to search for
+
+- `replaceText`: Text to be replaced
+
+Return the text content of the node after search and replacement. Note that the node content will not be actually changed, but is only used to calculate the content of a node after replacement.

web/src/pages/Doc/en/search/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h1>Search plugin</h1>
+<blockquote>
+<p>v0.6.9+</p>
+</blockquote>
+<p>This plugin provides the ability to search and replace node content.</p>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> Search <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/Search.js&#x27;</span>
+MindMap.usePlugin(Search)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.Search</code>.</p>
+<h2>Event</h2>
+<h3>search_info_change</h3>
+<p>You can listen to 'search_info_change' event to get the number of current search results and the index currently located.</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;search_info_change&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
+    <span class="hljs-comment">/*
+        data: {
+            currentIndex,// Index, from zero
+            total
+        }
+    */</span>
+})
+</code></pre>
+<h2>Method</h2>
+<h3>search(searchText, callback)</h3>
+<ul>
+<li>
+<p><code>searchText</code>: Text to search for</p>
+</li>
+<li>
+<p><code>callback</code>: The callback function that completes this search will be triggered after jumping to the node</p>
+</li>
+</ul>
+<p>Search for node content, which can be called repeatedly. Each call will search and locate to the next matching node. If the search text changes, it will be searched again.</p>
+<h3>endSearch()</h3>
+<p>End search.</p>
+<h3>replace(replaceText)</h3>
+<ul>
+<li><code>replaceText</code>: Text to be replaced</li>
+</ul>
+<p>To replace the content of the current node, call the 'search' method after calling it to replace the content of the currently located matching node.</p>
+<h3>replaceAll(replaceText)</h3>
+<ul>
+<li><code>replaceText</code>: Text to be replaced</li>
+</ul>
+<p>Replace all matching node contents, and call it after calling the 'search' method.</p>
+<h3>getReplacedText(node, searchText, replaceText)</h3>
+<ul>
+<li>
+<p><code>node</code>: Node instance</p>
+</li>
+<li>
+<p><code>searchText</code>: Text to search for</p>
+</li>
+<li>
+<p><code>replaceText</code>: Text to be replaced</p>
+</li>
+</ul>
+<p>Return the text content of the node after search and replacement. Note that the node content will not be actually changed, but is only used to calculate the content of a node after replacement.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Doc/en/start/index.md

@@ -112,6 +112,8 @@ cd web
 npm run buildLibrary
 ```
 
+The packaging entry is `simple-mind-map/full.js`, which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.
+
 The `package.json` file in the `simple-mind-map` library provides two export
 fields:
 

web/src/pages/Doc/en/start/index.vue

@@ -80,6 +80,7 @@ simple-mind-map. This uses the same packaging tool as the sample project web.</p
 <pre class="hljs"><code><span class="hljs-built_in">cd</span> web
 npm run buildLibrary
 </code></pre>
+<p>The packaging entry is <code>simple-mind-map/full.js</code>, which will introduce all plugins by default. If you don't need all plugins, you can modify the file to only introduce the plugins you need, which can reduce the size of the packaged file.</p>
 <p>The <code>package.json</code> file in the <code>simple-mind-map</code> library provides two export
 fields:</p>
 <pre class="hljs"><code>{

web/src/pages/Doc/en/utils/index.md

@@ -10,6 +10,20 @@ import {walk, ...} from 'simple-mind-map/src/utils'
 
 ### Methods
 
+#### resizeImgSizeByOriginRatio(width, height, newWidth, newHeight)
+
+> v0.6.5+
+
+`width`: The original width of the image
+
+`height`：The original height of the image
+
+`newWidth`：Width to zoom in to
+
+`newHeight`：Height to zoom in to
+
+Scale the image proportionally. Zoom to the specified size of `newWidth` and `newHeight` while maintaining the original aspect ratio of the image.
+
 #### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
 
 Depth-first traversal of a tree
@@ -139,6 +153,55 @@ Extract plain text content from an HTML string.
 
 Convert `blob` data to `data:url` data.
 
+#### parseDataUrl(data)
+
+> v0.6.6+
+
+Parse `data:url` data, return:
+
+```js
+{
+  type,// file type of data
+  base64// base64 data
+}
+```
+
+#### getImageSize(src)
+
+> v0.6.6+
+
+- `src`: The url of img
+
+Get the size of image, return:
+
+```js
+{
+  width,
+  height
+}
+```
+
+#### loadImage(imgFile)
+
+> v0.6.8+
+
+- `imgFile`: File object of image type
+
+Load image, return:
+
+```js
+{
+  url,// DataUrl
+  size// { width, height } width and height of image
+}
+```
+
+#### getType(data)
+
+> v0.6.9+
+
+Get the type of a data, such as `Boolean`、`Array`.
+
 ## Simulate CSS background in Canvas
 
 Import: