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

import { Graph,Shape } from '@antv/x6';
import { bindKey,myEvents } from './events';
import { configOpt } from './toolConfig';

const { line } = configOpt;

export function myGraph (wrapper,mindmapData) {
	console.log(wrapper,'wrapperwrapper');
	const graph = new Graph({
		container: document.getElementById(wrapper),
		// width: $(window).width(),
		// height: $(window).height(),
		history:true,
		autoResize: true, 
		background: {
			color: '#fff',
		},
		scroller: {
			enabled: true,
			pannable: true,
			minVisibleWidth: 50,
			minVisibleHeight: 50,
		},
		selecting: {
			enabled: true,
			showNodeSelectionBox: false,
			multiple: true
		},
		snapline: true, //对齐线
		// panning: { //画布拖动
		// 	enabled: true,
		// 	eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
		// },
		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",
							},
					},
			},
		},
		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: line.color,
							strokeWidth: line.width,
							strokeDasharray: "",//虚线间隔
							sourceMarker: false,//起始箭头 
							targetMarker: 'classic',//终止箭头
						},
					},
					zIndex: 0,
				})
			},
		},//连线
		resizing: {
			enabled: true,
			orthogonal: false,
		},
		scaling: {
			min: 0.5,
			max: 2
		},
        //小地图
        minimap: {
            enabled: true,
            container: document.getElementById("minimap"),
        }
	})

	/* 节点操作事件 */
	myEvents(graph,mindmapData);

	/* 键盘事件 */
	bindKey(graph);

	return graph;
}