Merge branch 'feature' into main

simple-mind-map/index.js

@@ -194,7 +194,7 @@ class MindMap {
     this.opt.layout = layout
     this.view.reset()
     this.renderer.setLayout()
-    this.render()
+    this.render(null, CONSTANTS.CHANGE_LAYOUT)
   }
 
   //  执行命令

simple-mind-map/package.json

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

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

@@ -157,6 +157,7 @@ export const themeList = [
 // 常量
 export const CONSTANTS = {
   CHANGE_THEME: 'changeTheme',
+  CHANGE_LAYOUT: 'changeLayout',
   SET_DATA: 'setData',
   TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode',
   MODE: {
@@ -170,7 +171,8 @@ export const CONSTANTS = {
     CATALOG_ORGANIZATION: 'catalogOrganization',
     TIMELINE: 'timeline',
     TIMELINE2: 'timeline2',
-    FISHBONE: 'fishbone'
+    FISHBONE: 'fishbone',
+    VERTICAL_TIMELINE: 'verticalTimeline'
   },
   DIR: {
     UP: 'up',
@@ -206,8 +208,10 @@ export const CONSTANTS = {
     BOTTOM: 'bottom',
     CENTER: 'center'
   },
-  TIMELINE_DIR: {
+  LAYOUT_GROW_DIR: {
+    LEFT: 'left',
     TOP: 'top',
+    RIGHT: 'right',
     BOTTOM: 'bottom'
   }
 }
@@ -246,6 +250,10 @@ export const layoutList = [
     name: '时间轴2',
     value: CONSTANTS.LAYOUT.TIMELINE2,
   },
+  {
+    name: '竖向时间轴',
+    value: CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
+  },
   {
     name: '鱼骨图',
     value: CONSTANTS.LAYOUT.FISHBONE,
@@ -258,6 +266,7 @@ export const layoutValueList = [
   CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
   CONSTANTS.LAYOUT.TIMELINE,
   CONSTANTS.LAYOUT.TIMELINE2,
+  CONSTANTS.LAYOUT.VERTICAL_TIMELINE,
   CONSTANTS.LAYOUT.FISHBONE
 ]
 

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

@@ -4,6 +4,7 @@ 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'
@@ -25,6 +26,8 @@ const layouts = {
   [CONSTANTS.LAYOUT.TIMELINE]: Timeline,
   // 时间轴2
   [CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
+  // 竖向时间轴
+  [CONSTANTS.LAYOUT.VERTICAL_TIMELINE]: VerticalTimeline,
   // 鱼骨图
   [CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
 }
@@ -693,11 +696,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()

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

@@ -65,7 +65,8 @@ export default class TextEdit {
   }
 
   //  显示文本编辑框
-  async show(node) {
+  // isInserting：是否是刚创建的节点
+  async show(node, e, isInserting = false) {
     // 使用了自定义节点内容那么不响应编辑事件
     if (node.isUseCustomNodeContent()) {
       return
@@ -74,7 +75,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 +86,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)

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,11 @@ class Node {
     if (!this.group) {
       return
     }
-    let { enableNodeTransitionMove, nodeTransitionMoveDuration, alwaysShowExpandBtn } =
-      this.mindMap.opt
+    let {
+      enableNodeTransitionMove,
+      nodeTransitionMoveDuration,
+      alwaysShowExpandBtn
+    } = this.mindMap.opt
     if (alwaysShowExpandBtn) {
       // 需要移除展开收缩按钮
       if (this._expandBtn && this.nodeData.children.length <= 0) {
@@ -543,6 +554,10 @@ class Node {
         this.needLayout = false
         this.layout()
       }
+      if (this.needRerenderExpandBtnPlaceholderRect) {
+        this.needRerenderExpandBtnPlaceholderRect = false
+        this.renderExpandBtnPlaceholderRect()
+      }
       this.update()
     }
     // 子节点
@@ -578,7 +593,7 @@ class Node {
       delete this.nodeData.inserting
       this.active()
       setTimeout(() => {
-        this.mindMap.emit('node_dblclick', this)
+        this.mindMap.emit('node_dblclick', this, null, true)
       }, 0)
     }
   }
@@ -783,7 +798,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/view/View.js

@@ -82,12 +82,12 @@ class View {
           // 鼠标滚轮，向上和向左，都是缩小
           case CONSTANTS.DIR.UP:
           case CONSTANTS.DIR.LEFT:
-            mousewheelZoomActionReverse ? this.enlarge(cx, cy) : this.narrow(cx, cy)
+            mousewheelZoomActionReverse ? this.enlarge(cx, cy, isTouchPad) : this.narrow(cx, cy, isTouchPad)
             break
           // 鼠标滚轮，向下和向右，都是放大
           case CONSTANTS.DIR.DOWN:
           case CONSTANTS.DIR.RIGHT:
-            mousewheelZoomActionReverse ? this.narrow(cx, cy) : this.enlarge(cx, cy)
+            mousewheelZoomActionReverse ? this.narrow(cx, cy, isTouchPad) : this.enlarge(cx, cy, isTouchPad)
             break
         }
       } else {// 鼠标滚轮事件控制画布移动
@@ -199,16 +199,18 @@ class View {
   }
 
   //  缩小
-  narrow(cx, cy) {
-    const scale = Math.max(this.scale - this.mindMap.opt.scaleRatio, 0.1)
+  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(cx, cy) {
-    const scale = this.scale + this.mindMap.opt.scaleRatio
+  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)

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

@@ -48,6 +48,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 +69,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,16 +84,18 @@ 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
       }

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,11 +39,12 @@ 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
@@ -55,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 (
@@ -70,6 +113,7 @@ const transformXmind = content => {
     }
   }
   walk(nodeTree, newTree)
+  await Promise.all(waitLoadImageList)
   return newTree
 }
 
@@ -158,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/Export.js

@@ -180,6 +180,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) {

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/RichText.js

@@ -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富文本编辑器
@@ -271,6 +275,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 +344,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/TouchEvent.js

@@ -86,7 +86,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/utils/index.js

@@ -213,6 +213,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')
@@ -392,3 +404,23 @@ export const nodeToHTML = node => {
   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
+      })
+    }
+  })
+}

web/public/index.html

@@ -5,7 +5,7 @@
     <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>
+    <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=1688536767282') format('woff2'),
+       url('iconfont.woff?t=1688536767282') format('woff'),
+       url('iconfont.ttf?t=1688536767282') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.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

@@ -412,5 +412,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

@@ -484,5 +484,11 @@ export const downTypeList = [
     type: 'md',
     icon: 'iconmarkdown',
     desc: '便于其他软件打开'
+  },
+  {
+    name: 'XMind',
+    type: 'xmind',
+    icon: 'iconxmind',
+    desc: 'XMind格式'
   }
 ]

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

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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.

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

@@ -1,6 +1,10 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<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>

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/utils/index.md

@@ -153,6 +153,34 @@ 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
+}
+```
+
 ## Simulate CSS background in Canvas
 
 Import:

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

@@ -98,6 +98,29 @@ and copying the <code>data</code> of the data object, example:</p>
 <p>v0.5.9+</p>
 </blockquote>
 <p>Convert <code>blob</code> data to <code>data:url</code> data.</p>
+<h4>parseDataUrl(data)</h4>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<p>Parse <code>data:url</code> data, return:</p>
+<pre class="hljs"><code>{
+  type,<span class="hljs-comment">// file type of data</span>
+  base64<span class="hljs-comment">// base64 data</span>
+}
+</code></pre>
+<h4>getImageSize(src)</h4>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<ul>
+<li><code>src</code>: The url of img</li>
+</ul>
+<p>Get the size of image, return:</p>
+<pre class="hljs"><code>{
+  width,
+  height
+}
+</code></pre>
 <h2>Simulate CSS background in Canvas</h2>
 <p>Import:</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

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

@@ -2,7 +2,7 @@
 
 > v0.2.7+
 
-Provides methods for importing `XMind` files.
+Provides methods for importing and export `XMind` files.
 
 ## Import
 
@@ -31,6 +31,8 @@ Parsing the `.xmind` file and returning the parsed data. You can use
 
 ### xmind.transformXmind(content)
 
+> V0.6.6+version changes the method to asynchronous and returns a Promise instance
+
 Convert `xmind` data. The `.xmind` file is essentially a `zip` file that can be
 decompressed by changing the suffix to zip. Inside, there is a `content.json`
 file. If you have parsed this file yourself, you can pass the contents of this
@@ -48,4 +50,14 @@ For data parsing of the `xmind8` version, because the `.xmind` file in this
 version does not have a `content.json`, it corresponds to `content.xml`.
 
 `content`: the contents of the `content.xml` file within the `.xmind` zip
-package
+package
+
+### transformToXmind(data, name)
+
+> v0.6.6+
+
+- `data`: `simple-mind-map` data, you can get it by `mindMap.getData()` method.
+
+- `name`: The file name to export.
+
+Convert the `simple mind map` data to an `xmind` file. This method is asynchronous and returns an instance of `Promise`. The returned data is a `blob` type `zip` compressed package data, which you can download as a file yourself.

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

@@ -4,7 +4,7 @@
 <blockquote>
 <p>v0.2.7+</p>
 </blockquote>
-<p>Provides methods for importing <code>XMind</code> files.</p>
+<p>Provides methods for importing and export <code>XMind</code> files.</p>
 <h2>Import</h2>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> xmind <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/parse/xmind.js&#x27;</span>
 </code></pre>
@@ -19,6 +19,9 @@
 <code>mindMap.setData(data)</code> to render the returned data to the canvas.</p>
 <p><code>file</code>: <code>File</code> object</p>
 <h3>xmind.transformXmind(content)</h3>
+<blockquote>
+<p>V0.6.6+version changes the method to asynchronous and returns a Promise instance</p>
+</blockquote>
 <p>Convert <code>xmind</code> data. The <code>.xmind</code> file is essentially a <code>zip</code> file that can be
 decompressed by changing the suffix to zip. Inside, there is a <code>content.json</code>
 file. If you have parsed this file yourself, you can pass the contents of this
@@ -34,6 +37,19 @@ package</p>
 version does not have a <code>content.json</code>, it corresponds to <code>content.xml</code>.</p>
 <p><code>content</code>: the contents of the <code>content.xml</code> file within the <code>.xmind</code> zip
 package</p>
+<h3>transformToXmind(data, name)</h3>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>data</code>: <code>simple-mind-map</code> data, you can get it by <code>mindMap.getData()</code> method.</p>
+</li>
+<li>
+<p><code>name</code>: The file name to export.</p>
+</li>
+</ul>
+<p>Convert the <code>simple mind map</code> data to an <code>xmind</code> file. This method is asynchronous and returns an instance of <code>Promise</code>. The returned data is a <code>blob</code> type <code>zip</code> compressed package data, which you can download as a file yourself.</p>
 
   </div>
 </template>

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

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.6.6
+
+新增：1.支持导出为Xmind新版文件。2.导入Xmind新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。
+
+修复：1.TouchEvent插件不再派发click事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。
+
+优化：1.优化触控板缩放画布时幅度过大的问题。2.刚创建的节点默认全选方便删除默认文本。
+
 ## 0.6.5-fix.1
 
 修复：1.修复在缩放情况下调整图片大小不正确的问题。

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

@@ -1,6 +1,10 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.6.6</h2>
+<p>新增：1.支持导出为Xmind新版文件。2.导入Xmind新版文件支持导入节点中的图片。 3.新增竖向时间轴结构。</p>
+<p>修复：1.TouchEvent插件不再派发click事件，解决移动端点击超链接会打开两个窗口的问题。 2.修复拖拽移动一个节点成为另一个节点的子节点时该节点的父节点指向未更新的问题。 3.修复二级节点拖拽成三级节点时节点边框样式未更新的问题。 4.修复向右生长的结构外其他结构鼠标移入展开收起按钮位置时不会触发按钮显示的问题。</p>
+<p>优化：1.优化触控板缩放画布时幅度过大的问题。2.刚创建的节点默认全选方便删除默认文本。</p>
 <h2>0.6.5-fix.1</h2>
 <p>修复：1.修复在缩放情况下调整图片大小不正确的问题。</p>
 <h2>0.6.5</h2>

web/src/pages/Doc/zh/course11/index.md

@@ -1,6 +1,6 @@
 # 结构
 
-`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）。
+`simple-mind-map`目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。
 
 可以在实例化`simple-mind-map`时通过选项指定使用的结构：
 

web/src/pages/Doc/zh/course11/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <h1>结构</h1>
-<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）。</p>
+<p><code>simple-mind-map</code>目前支持四种结构：logicalStructure（逻辑结构图）、mindMap（思维导图）、organizationStructure（组织结构图）、catalogOrganization（目录组织图）、timeline（时间轴）、timeline2（时间轴2）、fishbone（鱼骨图）、verticalTimeline（v0.6.6+竖向时间轴）。</p>
 <p>可以在实例化<code>simple-mind-map</code>时通过选项指定使用的结构：</p>
 <pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
     <span class="hljs-comment">// ...</span>

web/src/pages/Doc/zh/course17/index.md

@@ -4,7 +4,7 @@
 
 > 要使用导出功能需要使用导出插件。
 
-目前支持导出为`.smm`、`.json`、`.svg`、`.png`、`.pdf`、`.md`文件。
+目前支持导出为`.smm`、`.json`、`.svg`、`.png`、`.pdf`、`.md`、`.xmind`文件。
 
 `.smm`是`simple-mind-map`自己定义的一种文件，其实就是`json`文件，换了一个扩展名而已。
 
@@ -94,6 +94,18 @@ mindMap.export(
 mindMap.export('md', true, '文件名')
 ```
 
+### 导出为xmind
+
+> v0.6.6+
+
+> 需要注册`ExportXMind`插件
+
+导出为`Xmind`新版文件。
+
+```js
+mindMap.export('xmind', '文件名')
+```
+
 ## 导入
 
 目前支持从`.smm`、`.json`、`.xmind`、`.xlsx`、`.md`格式的文件导入。

web/src/pages/Doc/zh/course17/index.vue

@@ -5,7 +5,7 @@
 <blockquote>
 <p>要使用导出功能需要使用导出插件。</p>
 </blockquote>
-<p>目前支持导出为<code>.smm</code>、<code>.json</code>、<code>.svg</code>、<code>.png</code>、<code>.pdf</code>、<code>.md</code>文件。</p>
+<p>目前支持导出为<code>.smm</code>、<code>.json</code>、<code>.svg</code>、<code>.png</code>、<code>.pdf</code>、<code>.md</code>、<code>.xmind</code>文件。</p>
 <p><code>.smm</code>是<code>simple-mind-map</code>自己定义的一种文件，其实就是<code>json</code>文件，换了一个扩展名而已。</p>
 <p>导出直接调用<code>export</code>方法即可：</p>
 <pre class="hljs"><code>mindMap.export(type, isDownload, fileName, ...)
@@ -62,6 +62,16 @@ mindMap.export(<span class="hljs-string">&#x27;pdf&#x27;</span>, <span class="hl
 <p>导出为<code>markdown</code>文件只要传递默认的三个参数即可：</p>
 <pre class="hljs"><code>mindMap.export(<span class="hljs-string">&#x27;md&#x27;</span>, <span class="hljs-literal">true</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
 </code></pre>
+<h3>导出为xmind</h3>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<blockquote>
+<p>需要注册<code>ExportXMind</code>插件</p>
+</blockquote>
+<p>导出为<code>Xmind</code>新版文件。</p>
+<pre class="hljs"><code>mindMap.export(<span class="hljs-string">&#x27;xmind&#x27;</span>, <span class="hljs-string">&#x27;文件名&#x27;</span>)
+</code></pre>
 <h2>导入</h2>
 <p>目前支持从<code>.smm</code>、<code>.json</code>、<code>.xmind</code>、<code>.xlsx</code>、<code>.md</code>格式的文件导入。</p>
 <h3>导入smm、json</h3>

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

@@ -108,4 +108,15 @@ MindMap.usePlugin(ExportPDF)
   node// svg节点
   str// svg字符串
 }
-```
+```
+
+### xmind(name)
+
+> v0.6.6+，需要额外注册一个ExportXMind插件
+
+```js
+import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
+MindMap.usePlugin(ExportXMind)
+```
+
+导出为`xmind`文件类型，异步方法，返回一个`Promise`实例，返回的数据为一个`zip`压缩包的`data:url`数据，可以直接下载。

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

@@ -87,6 +87,14 @@ MindMap.usePlugin(ExportPDF)
   str<span class="hljs-comment">// svg字符串</span>
 }
 </code></pre>
+<h3>xmind(name)</h3>
+<blockquote>
+<p>v0.6.6+，需要额外注册一个ExportXMind插件</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>导出为<code>xmind</code>文件类型，异步方法，返回一个<code>Promise</code>实例，返回的数据为一个<code>zip</code>压缩包的<code>data:url</code>数据，可以直接下载。</p>
 
   </div>
 </template>

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

@@ -148,6 +148,34 @@ copyNodeTree({}, node)
 
 将`blob`数据转成`data:url`数据。
 
+#### parseDataUrl(data)
+
+> v0.6.6+
+
+解析`data:url`数据，返回：
+
+```js
+{
+  type,// 数据的文件类型
+  base64// base64数据
+}
+```
+
+#### getImageSize(src)
+
+> v0.6.6+
+
+- `src`：图片的url
+
+获取图片的大小。返回：
+
+```js
+{
+  width,
+  height
+}
+```
+
 ## 在canvas中模拟css的背景属性
 
 引入：

web/src/pages/Doc/zh/utils/index.vue

@@ -93,6 +93,29 @@
 <p>v0.5.9+</p>
 </blockquote>
 <p>将<code>blob</code>数据转成<code>data:url</code>数据。</p>
+<h4>parseDataUrl(data)</h4>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<p>解析<code>data:url</code>数据，返回：</p>
+<pre class="hljs"><code>{
+  type,<span class="hljs-comment">// 数据的文件类型</span>
+  base64<span class="hljs-comment">// base64数据</span>
+}
+</code></pre>
+<h4>getImageSize(src)</h4>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<ul>
+<li><code>src</code>：图片的url</li>
+</ul>
+<p>获取图片的大小。返回：</p>
+<pre class="hljs"><code>{
+  width,
+  height
+}
+</code></pre>
 <h2>在canvas中模拟css的背景属性</h2>
 <p>引入：</p>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

web/src/pages/Doc/zh/xmind/index.md

@@ -2,7 +2,7 @@
 
 > v0.2.7+
 
-提供导入`XMind`文件的方法。
+提供导入和导出`XMind`文件的方法。
 
 ## 引入
 
@@ -30,6 +30,8 @@ simpleMindMap.xmind
 
 ### xmind.transformXmind(content)
 
+> v0.6.6+版本该方法改为异步方法，返回一个Promise实例
+
 转换`xmind`数据，`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，可以使用`mindMap.setData(data)`来将返回的数据渲染到画布上
 
 `content`：`.xmind`压缩包内的`content.json`文件内容
@@ -40,4 +42,14 @@ simpleMindMap.xmind
 
 针对`xmind8`版本的数据解析，因为该版本的`.xmind`文件内没有`content.json`，对应的是`content.xml`。
 
-`content`：`.xmind`压缩包内的`content.xml`文件内容
+`content`：`.xmind`压缩包内的`content.xml`文件内容
+
+### transformToXmind(data, name)
+
+> v0.6.6+
+
+- `data`：`simple-mind-map`思维导图数据，可以通过`mindMap.getData()`方法获取。
+
+- `name`：要导出的文件名。
+
+将`simple-mind-map`数据转为`xmind`文件。该方法为异步方法，返回一个`Promise`实例，返回的数据是一个`blob`类型的`zip`压缩包数据，你可以自行下载为文件。

web/src/pages/Doc/zh/xmind/index.vue

@@ -4,7 +4,7 @@
 <blockquote>
 <p>v0.2.7+</p>
 </blockquote>
-<p>提供导入<code>XMind</code>文件的方法。</p>
+<p>提供导入和导出<code>XMind</code>文件的方法。</p>
 <h2>引入</h2>
 <pre class="hljs"><code><span class="hljs-keyword">import</span> xmind <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/parse/xmind.js&#x27;</span>
 </code></pre>
@@ -18,6 +18,9 @@
 <p>解析<code>.xmind</code>文件，返回解析后的数据，可以使用<code>mindMap.setData(data)</code>来将返回的数据渲染到画布上</p>
 <p><code>file</code>：<code>File</code>对象</p>
 <h3>xmind.transformXmind(content)</h3>
+<blockquote>
+<p>v0.6.6+版本该方法改为异步方法，返回一个Promise实例</p>
+</blockquote>
 <p>转换<code>xmind</code>数据，<code>.xmind</code>文件本质上是一个压缩包，改成<code>zip</code>后缀可以解压缩，里面存在一个<code>content.json</code>文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，可以使用<code>mindMap.setData(data)</code>来将返回的数据渲染到画布上</p>
 <p><code>content</code>：<code>.xmind</code>压缩包内的<code>content.json</code>文件内容</p>
 <h3>xmind.transformOldXmind(content)</h3>
@@ -26,6 +29,19 @@
 </blockquote>
 <p>针对<code>xmind8</code>版本的数据解析，因为该版本的<code>.xmind</code>文件内没有<code>content.json</code>，对应的是<code>content.xml</code>。</p>
 <p><code>content</code>：<code>.xmind</code>压缩包内的<code>content.xml</code>文件内容</p>
+<h3>transformToXmind(data, name)</h3>
+<blockquote>
+<p>v0.6.6+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>data</code>：<code>simple-mind-map</code>思维导图数据，可以通过<code>mindMap.getData()</code>方法获取。</p>
+</li>
+<li>
+<p><code>name</code>：要导出的文件名。</p>
+</li>
+</ul>
+<p>将<code>simple-mind-map</code>数据转为<code>xmind</code>文件。该方法为异步方法，返回一个<code>Promise</code>实例，返回的数据是一个<code>blob</code>类型的<code>zip</code>压缩包数据，你可以自行下载为文件。</p>
 
   </div>
 </template>

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

@@ -27,6 +27,7 @@ import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
 import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
 import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
 import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
+import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
 import Export from 'simple-mind-map/src/plugins/Export.js'
 import Drag from 'simple-mind-map/src/plugins/Drag.js'
 import Select from 'simple-mind-map/src/plugins/Select.js'
@@ -66,6 +67,7 @@ MindMap
   .usePlugin(Drag)
   .usePlugin(KeyboardNavigation)
   .usePlugin(ExportPDF)
+  .usePlugin(ExportXMind)
   .usePlugin(Export)
   .usePlugin(Select)
   .usePlugin(AssociativeLine)

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

@@ -150,7 +150,6 @@ export default {
     async handleXmind(file) {
       try {
         let data = await xmind.parseXmindFile(file.raw)
-        console.log(data);
         this.$bus.$emit('setData', data)
         this.$message.success('导入成功')
       } catch (error) {