# drawGraph

**Repository Path**: raocy/draw-graph

## Basic Information

- **Project Name**: drawGraph
- **Description**: graph 是一个结合drawio编辑导出xml，底层采用mxgraph显示的图形组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2022-04-02
- **Last Updated**: 2025-05-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GraphView 渲染容器

### 介绍

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


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

### 引入

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

```

## 代码演示

### 基础用法

```html
<graph-view />
```
<demo-code transform>./demo/index.vue</demo-code>
## 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库
```