测试mxgraph

src/views/kettle/mx.js

+import mx from 'mxgraph';
+const mxgraph = mx({
+  mximagebasepath: './src/images',
+  mxbasepath: './src'
+});
+// decode bug https://github.com/jgraph/mxgraph/issues/49
+/*window.mxGraph = mxgraph.mxgraph;
+window.mxUtils = mxgraph.mxUtils;
+window.mxCodec = mxgraph.mxCodec;
+window.mxKeyHandler = mxgraph.mxKeyHandler;
+window.mxConstants = mxgraph.mxConstants;
+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.mxEvent = mxgraph.mxEvent;
+window.mxStencilRegistry = mxgraph.mxStencilRegistry;
+window.mxStencil=mxgraph.mxStencil;
+window.mxGeometry=mxgraph.mxGeometry;
+window.mxRubberBand = mxgraph.mxRubberband;*/
+
+
+
+
+
+
+export default mxgraph;

src/views/kettle/testmxgraph.vue

+<template>
+  <div class="customToolbarContainer">
+    <div class="toolbarContainer">
+      <ul>
+        <li v-for="item in toolbarItems" :key="item['text']" ref="toolItem">
+          <img :src="item['icon']" :alt="item['text']">
+          <span>{{item['text']}}</span>
+        </li>
+      </ul>
+
+    </div>
+    <div class="graphContainer" ref="container"></div>
+  </div>
+</template>
+
+<script>
+import {toolbarItems} from './toolbar'
+import mxgraph from './mx.js'
+
+const  MxEvent=mxgraph.mxEvent;
+const  MxGraph=mxgraph.mxGraph;;
+const  MxUtils=mxgraph.mxUtils;;
+const  mxCodec=mxgraph.mxCodec;
+
+
+
+export default {
+  name: 'index2',
+  computed: {
+    toolbarItems: () => toolbarItems
+  },
+  data() {
+    return {
+      data() {
+        return {
+          graph: null,
+          defaultProps: {
+            label: "text",
+            children: "children",
+          },
+        }
+      }
+    }
+  },
+  methods: {
+    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) => { // 从value中获取显示的内容
+        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
+        var s = encodeURIComponent(this.toXml())
+        console.log("s=this.toXml()=====")
+        console.log(this.toXml())
+        console.log("编码xml--------")
+        console.log(s)
+
+
+      })
+    },
+
+    toXml() {
+      var enc = new mxCodec(MxUtils.createXmlDocument());
+      var node = enc.encode(this.graph.getModel());
+      return MxUtils.getPrettyXml(node);
+    },
+
+    addCell(toolItem, x, y) {
+      console.log("toolItem")
+      console.log(toolItem)
+      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
+console.log("domArray==")
+      console.log(domArray)
+      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)
+      })
+    }
+
+  },
+  mounted() {
+    this.createGraph()
+    this.initGraph()
+    this.initToolbar()
+    this.$refs.container.style.background = 'url("./grid.gif")'
+  }
+}
+</script>
+
+<style lang="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;
+  }
+}
+</style>

src/views/kettle/toolbar.js

+import mxgraph from './mx.js'
+import { steps } from '@/api/kettle/link'
+
+const MxConstants = mxgraph.mxConstants
+const prefix = '192.168.0.2:9700/etlweb/'
+
+const bar = []
+const pamer = new FormData() // 创建form对象
+
+pamer.append('node', 'xnode-12')
+
+steps(pamer).then((res) => {
+  var data = res[0].children
+  for (let i = 0; i < data.length; i++) {
+    var icon = data[i].icon
+    data[i].icon = prefix + icon
+    data[i].height = 50
+    data[i].width = 50
+    data[i].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: prefix + icon
+    }
+    bar.push(data[i])
+  }
+
+})
+export const toolbarItems = bar