GraphView 渲染容器

介绍

drawGraph 是一个结合drawio编辑导出xml，底层采用mxgraph显示的图形组件

- 组件主要用到的是 new Graph对象 (drawio编辑器，所用到的对象，以期望组件渲染的视图与drawio编辑出的图形风格一致)
- drawio所用到的图片资源，svg资源以及xml资源，建议从drawio官方github地址拷贝出来

引入

import Vue from 'vue';
import { GraphView } from 'drawGraph';

代码演示

基础用法

<graph-view />

./demo/index.vue

API

Props

| 参数 | 说明 | 类型 | 默认值 | | ------------- | -------- | -------- | --------- | | xmlData | xml文件数据 | string | '' | | stateData | 状态数据 | array | [] | | warningImg | 告警图片地址(支持图片url或者base64) | string | base64 |

stateData Attributes

| 参数 | 说明 | 类型 | 默认值 |可选值 | | ------------- | -------- | -------- | --------- | --------- | | equipId | 与xmlData数据匹配的equipId | string | - |- | | color | 颜色 | string | - | | isWarning | 是否显示告警图标 | boolean | false |- | | effectType | 告警特效类型，暂时只支持淡入淡出特效,颜色默认为color配置 | string | null | fade |

Events

| 事件名 | 说明 | 回调参数 | | ------ | ---------- | ------------------- | | leftClick | 左键点击时触发 | event | | rightClick | 右键点击时触发 | event | | dblClick | 双击时触发 | event , cell | | loadGetNodes | xml文档加载，视图渲染完成时触发,获取所有节点 | cells |

相关技术栈

• mxgraph http://jgraph.github.io/mxgraph/ ——

• draw.io https://www.diagrams.net/

• drawio-tools https://jgraph.github.io/drawio-tools/tools/convert.html

• pakojs

组件用到的部分mxgraph相关api

初始化mxGraph

	var container = document.getElementById('graphContainer')
	var graph = new mxGraph(container)
	

设置默认themes

	设置风格样式themes 解析的是mxgraph官方编辑器(http://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html)的default.xml文件,以保持风格一致 
	const themsXml = mxUtils
			.load('http://localhost:8080/mxgraph/default.xml')
			.getXml()
	new mxCodec().decode(themsXml.documentElement, graph.getStylesheet())

设置缩放拖动，放大放小

	// 设置一些禁止缩放禁止拖动，放大放小
	// 鼠标框选 
	new mxRubberband(graph);
	// 开启可以拖拽建立关系,可以连线
	graph.setConnectable(true);
	// 开启方块上的文字编辑功能
	graph.setCellsEditable(true);
	// 启用对齐线帮助定位
	mxGraphHandler.prototype.guidesEnabled = true;
	// 选择基本元素开启
	graph.setEnabled(true);
	// 禁用浏览器默认的右键菜单栏
	mxEvent.disableContextMenu(container);
	// 只可预览不可选中拖动连接
	graph.setEnabled(true);
	// 禁止改变元素大小 
	graph.setCellsResizable(false);
	// 容器大小自适应 
	graph.setResizeContainer(false);
	// 可否重复连接 
	graph.setMultigraph(false);
	// 放大
	graph.zoomIn();
	//缩小
	graph.zoomOut();
	//还原
	graph.zoomActual();
	//居中缩放
	graph.centerZoom = true;

高亮效果

	new mxCellTracker(this.graph, "black");

允许左键拖动画布

		this.graph.panningHandler.useLeftButtonForPanning = true;
		this.graph.panningHandler.ignoreCell = true;
		this.graph.container.style.cursor = 'move';
		this.graph.setPanning(true);	

请求

	同步
	mxUtils.load(url)
	异步
	mxUtils.get(url)
	mxUtils.post(url)
	mxUtils.getAll(url)

读取xml，并渲染

	 // 读取xml，并渲染 
	var req = mxUtils.load('http://localhost:8080/mxgraph/xml.xml')
	var xmlDoc = req.getXml()
	var codec = new mxCodec(xmlDoc)
	codec.decode(xmlDoc.documentElement, graph.getModel())

查看视图中图形的xml

	var encoder = new mxCodec();
	var node = encoder.encode(graph.getModel());
	console.log(node)
	

获取视图每个cell

	 graph.getDefaultParent().children
	 

添加事件

	mxEvent下面有很多事件
	graph.addListener(mxEvent.CLICK, function (sender, evt) {
			var cell = evt.getProperty('cell')
			console.log(cell)
	})

添加图标

	// 设置一个overlay图标
	var overlay = new mxCellOverlay(new mxImage('images/add.png', 24, 24), 'Add outgoing');
	overlay.cursor = 'hand';
	// 添加告警图标 默认是一个warning 的gif，实现的闪烁效果
	graph.setCellWarning(cell, 'Tooltip')
	// 添加图标到cell上
	graph.addCellOverlay(cell,overlay)
	// 清楚图标
	graph.removeCellOverlays(cell)

节点操作新增删除

	//删除节点
	graph.removeCells()
	//新增节点
	graph.addCells()

调整布局中心点

		graph.center(true, true, 0.5, 0.5);

draw.io编辑器

	通过draw.io编辑器生成xml，此时xml需要解码
	xml经过转码decode生成mxgraph可解析的文件  在线解码地址https://jgraph.github.io/drawio-tools/tools/convert.html

x2js工具库

	可实现xml json的转换

pakojs

	draw.io导出的图形库需要pakojs转码成mxgraph识别的xml文件
	---drawDecode.js我根据pakojs封装的用于本地解码js库