vue实现思维导图

介绍

前景： 仿幕布实现思维导图效果
技术实现：jsmind
完整代码：vue-jsmind
参考文章： 在vue中使用jsmind组织架构或思维导图
实现效果：

功能描述：

• 编辑、删除、插入、拖拽、展开/收起节点
• 分布结构切换（向左、向右和两边分布）
• 节点类型筛选
• 导出图片
• 鼠标左键拖拽
• 缩放（按钮或鼠标滚轮）

引入

方式一：（推荐，方便拓展）
在index.html引入相关文件：

<link type="text/css" rel="stylesheet" href="./jsmind/style/jsmind.css" />
<script type="text/javascript" src="./jsmind/js/jsmind.js"></script>
<script type="text/javascript" src="./jsmind/js/jsmind.draggable.js"></script>
<script type="text/javascript" src="./jsmind/js/jsmind.screenshot.js"></script>

方式二：
通过npm install jsmind --save安装插件
在vue文件中引入相关文件：

import 'jsmind/style/jsmind.css'
import jsMind from 'jsmind/js/jsmind.js'
require('jsmind/js/jsmind.draggable.js')
require('jsmind/js/jsmind.screenshot.js')

基本使用

<template>
  <div id="jsmind_container"></div>
</template>
<script>
export default {
  data () {
    return {
      mind: {
        /* 元数据，定义思维导图的名称、作者、版本等信息 */
        meta: {
          name: '思维导图',
          author: 'hizzgdev@163.com',
          version: '0.2'
        },
        /* 数据格式声明 */
        format: 'node_tree',
        /* 数据内容 */
        data: {
          id: 'root',
          topic: 'jsMind',
          children: [
            {
              id: 'easy', // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
              topic: 'Easy', // [必选] 节点上显示的内容
              direction: 'right', // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
              expanded: true, // [可选] 该节点是否是展开状态，默认为 true
              children: [
                { id: 'easy1', topic: 'Easy to show' },
                { id: 'easy2', topic: 'Easy to edit' },
                { id: 'easy3', topic: 'Easy to store' },
                { id: 'easy4', topic: 'Easy to embed' }
              ]
            },
            {
              id: 'open',
              topic: 'Open Source',
              direction: 'right',
              expanded: true,
              children: [
                { id: 'open1', topic: 'on GitHub' },
                { id: 'open2', topic: 'BSD License' }
              ]
            },
            {
              id: 'powerful',
              topic: 'Powerful',
              direction: 'right',
              children: [
                { id: 'powerful1', topic: 'Base on Javascript' },
                { id: 'powerful2', topic: 'Base on HTML5' },
                { id: 'powerful3', topic: 'Depends on you' }
              ]
            },
            {
              id: 'other',
              topic: 'test node',
              direction: 'right',
              children: [
                { id: 'other1', topic: "I'm from local variable" },
                { id: 'other2', topic: 'I can do everything' }
              ]
            }
          ]
        }
      },
      options: {
        container: 'jsmind_container', // [必选] 容器的ID
        editable: true, // [可选] 是否启用编辑
        theme: '', // [可选] 主题
        view: {
          engine: 'canvas', // 思维导图各节点之间线条的绘制引擎
          hmargin: 120, // 思维导图距容器外框的最小水平距离
          vmargin: 50, // 思维导图距容器外框的最小垂直距离
          line_width: 2, // 思维导图线条的粗细
          line_color: '#ddd' // 思维导图线条的颜色
        },
        layout: {
          hspace: 100, // 节点之间的水平间距
          vspace: 20, // 节点之间的垂直间距
          pspace: 20 // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
        },
        shortcut: {
          enable: false // 是否启用快捷键 默认为true
        }
      }
    }
  },
  mounted () {
    // 初始化
    this.jm = jsMind.show(this.options, this.mind)
  }
}
</script>
<style lang="less" scoped>
#jsmind_container {
  width: 100%;
  height: 100vh;
}
</style>

踩坑之旅

难点一：增加节点类型筛选功能
思路：由于不同类型的节点对应的背景颜色不一样，可以通过改变背景颜色透明度来设置节点是否高亮显示
效果：

实现：
1.针对不同类型的节点添加一个背景颜色映射表，例：

bgMap: {
  1: {
    original: 'rgb(212, 42, 42)',
    transparent: 'rgb(212, 42, 42, 0.2)'
  },
  2: {
    original: 'rgb(100, 201, 53)',
    transparent: 'rgb(100, 201, 53, 0.2)'
  },
  3: {
    original: 'rgb(67, 50, 173)',
    transparent: 'rgb(67, 50, 173, 0.2)'
  },
  4: {
    original: 'rgb(25, 144, 255)',
    transparent: 'rgb(25, 144, 255, 0.2)'
  }
}

2.监听筛选类型变化，设置节点背景颜色：

watch: {
  selectTypes (v) {
    // 遍历节点
    this.loopTreeData(this.mind.data.children, (item) => {
      if (v.length) {
        if (v.includes(item.type)) {
          this.jm.set_node_color(item.id, this.bgMap[item.type].original, '#fff')
        } else {
          this.jm.set_node_color(item.id, this.bgMap[item.type].transparent, '#fff')
        }
      } else {
        this.jm.set_node_color(item.id, this.bgMap[item.type].transparent, '#fff')
      }
    })
  }
},

// 循环树结构
loopTreeData (list, callback) {
  (function doOneFloor (list) {
    if (Array.isArray(list)) {
      for (let i = 0; i < list.length; i++) {
        const item = list[i]
        callback(item, i)
        if (item.children && item.children.length > 0) {
          doOneFloor(item.children)
        }
      }
    }
  })(list)
},

难点二：选中节点不改变背景颜色
思路：由于插件机制问题，选中节点会有默认的背景颜色，由于不同节点类型对应的颜色不尽相同，于是添加点击事件，在选中节点时动态设置对应节点背景
实现：
1.动态设置节点背景

<div
  id="jsmind_container"
  ref="container"
  @click="nodeClick"
  @contextmenu.prevent.stop="nodeClick"
></div>

nodeClick () {
  const selectedId = this.get_selected_nodeid()
  if (!selectedId) return
  const nodeObj = this.jm.get_node(selectedId)
  this.jm.set_node_color(selectedId, nodeObj.data['background-color'], '#fff')
},
// 获取选中标签的 ID
get_selected_nodeid () {
  const selectedNode = this.jm.get_selected_node()
  if (selectedNode) {
    return selectedNode.id
  } else {
    return null
  }
}

2.加个过渡效果，以避免出现闪烁

副作用：
由于给选中节点加了过渡效果，在拖拽节点时也会有该效果存在，但问题不大。

难点三：分布结构切换
思路：数据格式有个direction字段用来表示节点方向，如下：

{
  "id":"open",           // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
  "topic":"Open Source", // [必选] 节点上显示的内容
  "direction":"right",   // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
  "expanded":true,       // [可选] 该节点是否是展开状态，默认为 true
}

在切换不同结构时，动态改变即可
效果：

实现：

// 切换思维导图结构
toggleStucture (type) {
  if (this.structure.active === type) return
  this.structure.active = type
  switch (type) {
    case 'side':
      // 两边分布
      this.loopTreeData(this.mind.data.children, (item, i) => { item.direction = i % 2 ? 'left' : 'right' })
      break
    case 'left':
      // 向左分布
      this.loopTreeData(this.mind.data.children, (item) => { item.direction = 'left' })
      break
    case 'right':
      // 向右分布
      this.loopTreeData(this.mind.data.children, (item) => { item.direction = 'right' })
      break
    default:
      break
  }
  this.jm.show(this.mind)
},

难点四：添加自定义菜单
思路：固定定位自定义菜单项，根据鼠标右键点击位置，动态计算节点的left,top, right, bottom值，需要格外注意越界问题，避免菜单显示不全
效果：

实现：

<el-menu
  class="context-menu"
  v-show="showMenu"
  :style="{
    left: menuStyle.left,
    top: menuStyle.top,
    bottom: menuStyle.bottom,
    right: menuStyle.right
  }"
  ref="context"
>
  <slot>
    <el-menu-item @click="addBrother">插入平级</el-menu-item>
    <el-menu-item @click="addChild">插入子级</el-menu-item>
    <el-menu-item @click="delCard">删除卡片</el-menu-item>
  </slot>
</el-menu>

this.editor = this.jm.view.e_editor

// jsmind 添加自定义菜单事件
this.jm.view.add_event(this.editor, 'contextmenu', (e) => {
    const selectedNode = this.jm.get_selected_node()
    if (selectedNode && selectedNode.data.type) {
      e.preventDefault()
      const el = document.querySelector('.context-menu .el-menu-item')
      const width = parseFloat(window.getComputedStyle(el).width)
      const height = parseFloat(window.getComputedStyle(el).height) * 3 + 12
      const windowHeight = window.innerHeight
      const windowWidth = window.innerWidth
      // 极限位置 避免越界
      if (e.clientY + height > windowHeight) {
        this.menuStyle.left = e.clientX + 'px'
        this.menuStyle.top = 'unset'
        this.menuStyle.bottom = 0
      } else if (e.clientX + width > windowWidth) {
        this.menuStyle.top = e.clientY + 'px'
        this.menuStyle.left = 'unset'
        this.menuStyle.right = 0
      } else {
        this.menuStyle.left = e.clientX + 'px'
        this.menuStyle.top = e.clientY + 'px'
        this.menuStyle.bottom = 'unset'
      }
      this.showMenu = true
    } else {
      this.showMenu = false
    }
})

难点五：放大层级后显示不全
效果：

思路：通过查看插件源码发现内部使用transform scale()来实现缩放的，这种方式并不会改变文档流的，也就是说页面元素的宽高布局不会改变，只会在渲染时显示缩放的大小。而zoom缩放可以改变文档流大小

实现：
方式一：（推荐）
直接在jsmind.js找到setZoom()方法进行修改：

方式二：
直接覆盖setZoom()方法

副作用：
transform: scale的缩放默认是居中缩放的，而zoom的大小缩放是相对于左上角的，如此调整会导致缩放效果在视觉上有所变化，主要目的是解决了显示不全的问题。

难点六：编辑节点失焦后保存，且节点内容不能为空
思路：观察源码发现内部有一个edit_node_end()事件，在vue文件中覆盖这个方法，加上自己的业务逻辑
效果：

实现：

// 重写编辑完成事件
this.jm.view.edit_node_end = () => {
  const node = this.jm.view.get_editing_node()
  const viewData = node._data.view
  const element = viewData.element
  element.style.zIndex = 'auto'
  if (node.topic === this.editor.value) {
    this.jm.update_node(node.id, node.topic)
    return
  }
  node.topic = this.editor.value
  if (!node.topic) {
    this.$message.info('请输入卡片标题')
  }
  this.jm.update_node(node.id, node.topic)
  // TODO 调接口
}

难点七：区分节点拖拽和页面拖拽
思路：在jsmind.draggable.js中有一个拖拽过程中节点移动的方法，可以在此方法之后添加自定义方法，用来获取拖拽的节点信息，然后在vue文件中覆盖该方法，加上自己的业务逻辑。当然也可以在拖拽时判断是否选中节点，根据这个标识来区分
实现：

// 自定义拖拽完成事件
jsMind.draggable.prototype.handleDrag = (srcNode, targetNode, targetDirect) => {
  const nextParentId = srcNode.parent.id
  this.handleDrop(nextParentId, srcNode.id)
}

// 拖拽
handleDrop (draggingNode, dropNode) {
  // 前一个兄弟节点
  const prevNode = this.jm.find_node_before(dropNode)
  // 获取移动后的node
  const dragForm = {
    modelId: '',
    treeNum: !prevNode ? draggingNode : prevNode.id,
    thisTreeNum: dropNode
  }
  console.log('dragForm', dragForm)
  // TODO 调接口
}

难点八：通过鼠标滚轮缩放思维导图
思路：监听滑动滚轮事件，动态设置层级
效果：

实现：

// 鼠标滚轮放大缩小
mouseWheel () {
  if (document.addEventListener) {
    document.addEventListener('domMouseScroll', this.scrollFunc, false)
  }
  this.$refs.container.onmousewheel = this.scrollFunc
},
// 滚轮缩放
scrollFunc (e) {
  e = e || window.event
  if (e.wheelDelta) {
    if (e.wheelDelta > 0) {
      this.zoomIn()
    } else {
      this.zoomOut()
    }
  } else if (e.detail) {
    if (e.detail > 0) {
      this.zoomIn()
    } else {
      this.zoomOut()
    }
  }
  e.preventDefault()
  this.jm.resize()
},

难点九：按住鼠标左键直接拖动页面
思路：监听鼠标指针移动事件，动态设置页面滚动位置
效果：

实现：

// 鼠标拖拽
mouseDrag () {
  // 里层
  const el = document.querySelector('.jsmind-inner')
  // 选中节点
  let selected
  el.onmousedown = (ev) => {
    // 选中节点
    selected = this.jm.get_selected_node()
    // 标识 是否拖拽节点 避免冲突
    this.dragNodeFlag = !!selected
    const disX = ev.clientX
    const disY = ev.clientY
    const originalScrollLeft = el.scrollLeft
    const originalScrollTop = el.scrollTop
    const originalScrollBehavior = el.style['scroll-behavior']
    const originalPointerEvents = el.style['pointer-events']
    // auto: 默认值，表示滚动框立即滚动到指定位置。
    el.style['scroll-behavior'] = 'auto'
    // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
    document.onmousemove = (ev) => {
      if (this.dragNodeFlag) return
      this.drag = false
      ev.preventDefault()
      // 计算拖拽的偏移距离
      const distanceX = ev.clientX - disX
      const distanceY = ev.clientY - disY
      el.scrollTo(originalScrollLeft - distanceX, originalScrollTop - distanceY)
      // 在鼠标拖动的时候将点击事件屏蔽掉
      el.style['pointer-events'] = 'none'
      el.style.cursor = 'grabbing'
    }
    document.onmouseup = () => {
      if (!this.dragNodeFlag) {
        el.style['scroll-behavior'] = originalScrollBehavior
        el.style['pointer-events'] = originalPointerEvents
        el.style.cursor = 'grab'
      }
      document.onmousemove = document.onmouseup = null
    }
  }
}

总结

为实现该需求，插件一开始用的是封装好的vue-jsmind，奈何文档实在少得可怜，完全不能满足现有需求。于是转用如今的jsmind，然而文档也不全，只能一点点研究源码寻找解决思路。一路坎坎坷坷，四处碰壁后终于做得7788了，记录下本次漫长的踩坑之旅。