mxGraph 如何实现自定义工具箱

概述

本篇的内容是围绕如何使用 vue 和 mxGraph 实现一个自定义的工具箱。

主要完成以下功能：

自定义工具箱的内容。
从工具箱中拖拽一个工具项到绘画区并生成对应的cell。
双击生成的cell可以查看cell的数据。

本例可以在 github 上看到源码。

基本布局

我们设想的基本布局如上图所示，整个界面分为左右两部分，左侧为工具箱，右侧为我们的绘图区。

由于样式不是我们此次的重点，所以我们将以列表的形式展示工具项，当然你也可以使用一些第三方组件库如 element-ui、ant design vue、vuetify 等来实现一些很酷炫的展示效果。

定义模型

首先我们需要定义工具箱的数据结构：

[
    {
        icon: String || Object, // 工具项图标的路径或对象
        title: String, // 工具项的名称
        width: Number, // 工具项的默认宽度
        height: Number, // 工具项的默认高度
        style: {
            ... // 工具项生成的 cell 样式
        }
    }
]

可以看出来工具箱是一个数组，其中存放了多个工具项对象，每个工具项中包含了多个属性。

需要注意的是 style 这个属性，这个属性里包含的信息是用于描述此工具项在拖拽后生成的 cell 的样式，取值范围请参考官方api。

了解了数据结构后，我们开始定义具体的数据：

const outputIcon = './icon/output.png'
const inputIcon = './icon/input.png'

export const toolbarItems = [
  {
    icon: outputIcon,
    title: '输出',
    width: 50,
    height: 50,
    style: {
      fillColor: 'transparent',
      strokeColor: '#000000',
      strokeWidth: '1',
      shape: MxConstants.SHAPE_LABEL,
      align: MxConstants.ALIGN_CENTER,
      verticalAlign: MxConstants.ALIGN_BOTTOM,
      imageAlign: MxConstants.ALIGN_CENTER,
      imageVerticalAlign: MxConstants.ALIGN_TOP,
      image: outputIcon
    }
  },
  {
    icon: inputIcon,
    title: '输入',
    width: 50,
    height: 50,
    style: {
      fillColor: 'transparent', // 填充色
      strokeColor: '#000000', // 线条颜色
      strokeWidth: '1', // 线条粗细
      shape: MxConstants.SHAPE_LABEL, // 形状
      align: MxConstants.ALIGN_CENTER, // 水平方向对齐方式
      verticalAlign: MxConstants.ALIGN_BOTTOM, // 垂直方向对齐方式
      imageAlign: MxConstants.ALIGN_CENTER, // 图形水平方向对齐方式
      imageVerticalAlign: MxConstants.ALIGN_TOP, // 图形垂直方向对齐方式
      image: inputIcon // 图形
    }
  }
]

(本例中所有的图片都放在 public 目录下)

为了方便维护我们把以上内容放到 toolbar.js 文件中。然后在 vue 组件中导入，并保存为一个名为 toolbarItems 的计算属性。

import {toolbarItems} from './customToolbar/toolbar'

export default {
  computed: {
    toolbarItems: () => toolbarItems
  }
}

编写模板

定义好数据后，我们开始编写模板代码。

首先我们需要一个大的容器，用于存放工具箱和画布。

<div class="customToolbarContainer">
</div>

接着我们加上工具箱代码：

<div class="customToolbarContainer">
    <div class="toolbarContainer">
        <ul>
            <li v-for="item in toolbarItems" :key="item['title']" ref="toolItem">
                <img :src="item['icon']" :alt="item['title']">
                <span>{{item['title']}}</span>
            </li>
        </ul>
    </div>
</div>

然后我们加上工具箱的代码：

<div class="customToolbarContainer">
    <div class="toolbarContainer">
        <ul>
            <li v-for="item in toolbarItems" :key="item['title']" ref="toolItem">
                <img :src="item['icon']" :alt="item['title']">
                <span>{{item['title']}}</span>
            </li>
        </ul>
    </div>
    <div class="graphContainer" ref="container"></div>
</div>

最后我们还需要一点 css（我使用了scss）：

.customToolbarContainer {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .toolbarContainer {
    flex: 1;
    font-size: 20px;
    background: #efefef;
    text-align: center;
    padding-top: 20px;

    ul {
      padding: 0;
      margin: 0;

      li {
        list-style: none;
        margin-bottom: 10px;
        cursor: pointer;

        img {
          width: 15px;
          height: 15px;
        }

        span {
          margin-left: 15px;
        }
      }
    }
  }

  .graphContainer {
    position: relative;
    flex: 7;
  }
}

现在我们开打网页，应该可以看到如下的效果了：

编写业务代码

现在万事俱备，我们开始编写具体的代码。

首先我们需要在 vue 的 data 中声明一个 graph 对象，用于保存 mxGraph 实例。

data(){
    return {
        graph: null
    }
}

首先定义一个 createGraph 方法用于生成mxGraph对象：

createGraph() {
  this.graph = new MxGraph(this.$refs.container)
}

接着我们定义一个 initGraph 方法用于初始化一些属性和事件：

initGraph() {
  if (this.R.isNil(this.graph)) {
    return
  }
  this.graph.setConnectable(true) // 允许连线
  this.graph.setCellsEditable(false) // 不可修改
  this.graph.convertValueToString = (cell) => { // 根据cell生成显示的标签
    return this.R.prop('title', cell)
  }
  this.graph.addListener(MxEvent.DOUBLE_CLICK, (graph, evt) => { // 监听双击事件
    const cell = this.R.pathOr([], ['properties', 'cell'], evt)

    console.info(cell) // 在控制台输出双击的cell
  })
}

上面的代码中，用到了几个 graph 实例的方法，下面一一介绍一下：

setConnectable 设置是否允许新建连线。
setCellsEditable 设置是否允许直接双击修改 cell 的标签。
convertValueToString 这是一个函数，接收一个 cell，并返回该 cell 用于显示的 label，这里是复写了默认的方法。
addListener 为 graph 添加一个双击的监听事件。

然后我们定义一个方法 addCell 用于向画布中添加 cell：

addCell(toolItem, x, y) {
  const {width, height} = toolItem
  const styleObj = toolItem['style']
  const style = Object.keys(styleObj).map((attr) => `${attr}=${styleObj[attr]}`).join(';')
  const parent = this.graph.getDefaultParent()

  this.graph.getModel().beginUpdate()
  try {
    let vertex = this.graph.insertVertex(parent, null, null, x, y, width, height, style)

    vertex.title = toolItem['title']
  } finally {
    this.graph.getModel().endUpdate()
  }
}

addCell 接收三个参数，分别为：工具项对象，X轴坐标，y轴坐标。

方法中分别执行了如下的步骤：

获取了cell默认的宽高信息。
把style拼接为“xxx=xxx;xxx=xxx;”的形式。
调用 model 的 beginUpdate 方法开始一个事务。
调用 insertVertex 方法，添加一个 cell。
调用 model 的 endUpdate 方法结束一个事务。

接着就是实现工具箱的核心代码，我们新建一个叫 initToolbar 的方法：

initToolbar() {
  const domArray = this.$refs.toolItem

  if (!(domArray instanceof Array) || domArray.length <= 0) {
    return
  }
  domArray.forEach((dom, domIndex) => {
    const toolItem = this.toolbarItems[domIndex]
    const {width, height} = toolItem

    const dropHandler = (graph, evt, cell, x, y) => {
      this.addCell(toolItem, x, y)
    }
    const createDragPreview = () => {
      const elt = document.createElement('div')

      elt.style.border = '2px dotted black'
      elt.style.width = `${width}px`
      elt.style.height = `${height}px`
      return elt
    }

    MxUtils.makeDraggable(dom, this.graph, dropHandler, createDragPreview(), 0, 0, false, true)
  })
}

方法的目的是让工具项可以被拖拽，且在放手时会触发自定义的回调事件。方法中分别执行了如下的步骤：

获取所有的工具项 dom。
遍历所有的 dom。
1. 获取 dom 对应的工具项对象。
2. 获取工具项的默认宽高。
3. 定义 drop 的回调函数，在函数中执行 addCell 方法。
4. 定义生成预览的方法，该方法返回一个 div，作为预览的图形。
5. 调用makeDraggable方法。

需要注意的是 makeDraggable 方法，makeDraggable 接收多个参数，我们现在需要在意的是前四个：

dom 需要允许被拖拽的 dom 元素。
graph 绑定的 graph 对象。
dropHandler drop 时的回调函数。
preview 拖拽时的预览图形。

最后让我们在 mounted 生命周期函数中添加如下代码：

mounted() {
  this.createGraph()
  this.initGraph()
  this.initToolbar()
  this.$refs.container.style.background = 'url("./mxgraph/images/grid.gif")'
}

我们打开网页可以看到如下的效果：

双击cell时，可以在控制台看到输出的信息：