eta_front/src/views/sandbox_manage/common/gragh.js

import { Graph,Shape } from '@antv/x6';
import { bindKey,myEvents } from './events';
import { configOpt } from './toolConfig';
import store from '@/vuex/index'
const styleConfig=store.state.sand.styleConfig

const { line } = configOpt;
// wrapper DOM的Id mindmapDataUseFun 返回思维导图数组函数，传递给事件 type 模式，编辑和查看
export function myGraph (wrapper,mindmapDataUseFun,type='edit') {
	const graph = new Graph({
		container: document.getElementById(wrapper),
		history:{
			enabled:true,
			beforeAddCommand(event, args){
				if(args.key=='tools'){
					// 工具的改变不加入撤销和重做的队列
					return false
				}
			}
		},
		autoResize: false, 
		background: {
			color: '#fff',
		},
		scroller: {
			enabled: true,
			pannable: true,
			minVisibleWidth: 50,
			minVisibleHeight: 50,
		},
		selecting: {
			enabled: true,
			showNodeSelectionBox: false,
			multiple: true,
			multipleSelectionModifiers:['shift'],
			rubberband:true,
			// rubberNode:true,
			rubberEdge:true,//加上这个才能框选边 官方配置也不写……
			modifiers:['ctrl']
		},
		snapline: true, //对齐线
		clipboard: true,
		keyboard: {
			enabled: true,
			global: true,
		},//cv
		mousewheel:{
			enabled: true,
			modifiers:['ctrl','meta']
		}, //滚轮缩放
		grid: {
			size: 10,      // 网格大小
			visible: false,
		},
		highlighting: {
			// 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的天蓝色矩形框
			magnetAvailable: {
					name: "stroke",
					args: {
							padding: 0.8,
							attrs: {
									"stroke-width": 2,
									stroke: "skyblue",
							},
					},
			},
			// 连线过程中，自动吸附到链接桩时被使用
			magnetAdsorbed: {
					name: "stroke",
					args: {
							padding: 0.8,
							attrs: {
									"stroke-width": 4,
									stroke: "skyblue",
							},
					},
			},
		},
		interacting:type=='view'?{
			nodeMovable:false,
			magnetConnectable:false,
			edgeMovable:false,
			edgeLabelMovable:false,
			arrowheadMovable:false,
			vertexMovable:false,
			vertexMovable:false,
			vertexDeletable:false
		}:{},
		connecting: {
			snap: true,
			// 允许连接到空白位置
			allowBlank: true,
			// 不允许创建循环连线
			allowLoop: false,
			// 不允许在相同节点创建多条边
			// allowMulti: false,
			//不允许直接连接到节点
			allowNode: false,
			// 高亮
			highlight: true,
			connector: {
				name: 'normal',
				args: {
					padding:1
				}
			},
			connectionPoint: 'anchor',
			router: "manhattan",
			// 定义边样式
			createEdge() {
				return new Shape.Edge({
					attrs: {
						line: {
							stroke: styleConfig.lineColor,
							strokeWidth: line.width,
							strokeDasharray: "",//虚线间隔
							sourceMarker: false,//起始箭头 
							targetMarker: 'classic',//终止箭头
						},
					},
					zIndex: 0,
				})
			},
		},//连线
		resizing: {
			enabled: type=='view'?false:true,
			orthogonal: false,
		},
		scaling: {
			min: 0.5,
			max: 2
		},
		//小地图
		minimap: {
				enabled: true,
				container: document.getElementById("minimap"),
		}
	})

	/* 节点操作事件 */
	if(type!='view') myEvents(graph,mindmapDataUseFun);
	

	/* 键盘事件 */
	if(type!='view') bindKey(graph,mindmapDataUseFun);

	return graph;
}