mxgraph案例

toolbar.js

// import mxgraph from './mxgraph'
import mxgraph from '../data-center/console/mxgraph'

const {
  mxConstants
} = mxgraph
const MxConstants = mxConstants

const outputIcon = require('../../assets/images/dba/DB.png')
const inputIcon = require('../../assets/images/dba/DB.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 // 图形
    }
  }
]

index.vue

<template>
  <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>
</template>

<script>
import {toolbarItems} from './toolbar'
import mxgraph from '../data-center/console/mxgraph'
const {
  mxGraph,
  // mxConstants,
  mxUtils,
  mxEvent
} = mxgraph
const MxGraph = mxGraph
// const MxConstants = mxConstants
const MxUtils = mxUtils
const MxEvent = mxEvent

export default {
  data () {
    return {
      graph: null
    }
  },
  computed: {
    toolbarItems: () => toolbarItems
  },
  mounted () {
    this.createGraph()
    this.initGraph()
    this.initToolbar()
    this.$refs.container.style.background = 'url(' + require('../../assets/images/web-design/grid.gif') + ')'
  },
  methods: {
    init () {},
    createGraph () {
      this.graph = new MxGraph(this.$refs.container)
    },
    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
      })
    },
    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()
      }
    },
    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)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.customToolbarContainer {
  width: 100%;
  height: 700px;
  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;
  }
}

</style>

mxgraph.js

import mx from 'mxgraph'
const mxgraph = mx({
  mxImageBasePath: './src/images',
  mxBasePath: './src'
})
window.mxGraph = mxgraph.mxGraph
window.mxGraphModel = mxgraph.mxGraphModel
window.mxEditor = mxgraph.mxEditor
window.mxGeometry = mxgraph.mxGeometry
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu
window.mxStylesheet = mxgraph.mxStylesheet
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar
window.mxToolbar = mxgraph.mxToolbar
window.mxCell = mxgraph.mxCell
window.mxCodec = mxgraph.mxCodec
window.mxEvent = mxgraph.mxEvent
window.mxUtils = mxgraph.mxUtils
window.mxConstants = mxgraph.mxConstants
window.mxRubberband = mxgraph.mxRubberband

export default mxgraph