gf-mxgraph-editor v1.6.1

mxgraph-editor-wlq

基于mxgraph的mxgraph-editor进行的二次开发,开箱即用.

实现功能

• json的导入导出
• xml文件的导入导出
• 无需后端配合，纯前端，支持vue,react和普通html文件使用
• 分为为编辑器模块和展示模块

编辑器

vue

<template>
  <div class="geEditor" style="width: 100%; height: 100%;"></div>
</template>

<script>
import mxgraphEditor from 'gf-mxgraph-editor'
import 'gf-mxgraph-editor/styles/grapheditor.css'
import 'mxgraph/javascript/src/css/common.css'
export default {
  name: 'mxgraph',
  mounted() {
    var dom = document.getElementsByClassName('geEditor')[0]
	  var editor = mxgraphEditor.mxgraphEditor(dom)
  }
}
</script>

html

可以参考源代码中的test.html

展示

vue

<template>
  <div class="geEditor" style="width: 100%; height: 100%;"></div>
</template>

<script>
import mxgraphEditor from 'gf-mxgraph-editor'
import 'gf-mxgraph-editor/styles/grapheditor.css'
import 'mxgraph/javascript/src/css/common.css'
export default {
  name: 'mxgraph',
  mounted() {
    var dom = document.getElementsByClassName('geEditor')[0]
    var json = '{"mxGraphModel":{"root":{"mxCell":[{"_id":"0"},{"_id":"1","_parent":"0"},{"mxGeometry":{"mxPoint":{"_x":"210","_y":"460","_as":"targetPoint"},"_relative":"1","_as":"geometry"},"_id":"5","_style":"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=1;exitDx=0;exitDy=0;","_edge":"1","_parent":"1","_source":"2"},{"mxGeometry":{"_relative":"1","_as":"geometry"},"_id":"6","_style":"edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.75;exitY=1;exitDx=0;exitDy=0;entryX=0.433;entryY=-0.025;entryDx=0;entryDy=0;entryPerimeter=0;","_edge":"1","_parent":"1","_source":"2","_target":"3"},{"mxGeometry":{"_x":"270","_y":"220","_width":"120","_height":"60","_as":"geometry"},"_id":"2","_value":"","_style":"rounded=1;whiteSpace=wrap;html=1;","_vertex":"1","_parent":"1"},{"mxGeometry":{"_x":"410","_y":"430","_width":"60","_height":"80","_as":"geometry"},"_id":"3","_value":"","_style":"shape=xor;whiteSpace=wrap;html=1;","_vertex":"1","_parent":"1"},{"mxGeometry":{"mxPoint":[{"_x":"180","_y":"500","_as":"sourcePoint"},{"_x":"230","_y":"450","_as":"targetPoint"}],"_width":"50","_height":"50","_relative":"1","_as":"geometry"},"_id":"4","_value":"","_style":"shape=flexArrow;endArrow=classic;html=1;","_edge":"1","_parent":"1"}]}}}'
    var myGraph = new mxgraphEditor.myGraph(dom, null, null, null, {})
    myGraph.importJSON(json)
  }
}
</script>