import { Button, message } from 'antd';
import classNames from 'classnames';
import html2canvas from 'html2canvas';
import React, { useEffect, useRef, useState } from 'react';
import styles from './index.less';
const Diagram = (props) => {
const graphRef = useRef(null); //canvas
const containerRef = useRef(null); ////包裹div和canvas 方便打印
const [DIVList, setDIVList] = useState([]); //矩形框用div代替
let mycanvas = { width: 2000, height: 2000 };
let xspace = 30,
yspace = 40; //间距
let elemList = []; //矩形框用div代替
let rectWidth = 70,
rectHeight = 170; //矩形宽高 去掉圆是60
let defaultLocation = [mycanvas.width / 2, 20]; //默认位置
let grathdata = [
{
id: 'node1',
label: '节点1',
direction: 'BT',
level: 0,
xspacing: 30,
child: [
{
id: 'node21',
parentId: 'node1',
parentIdArr: ['node1', 'node2', 'node3'],
label: '节点2-1',
direction: 'LR',
level: 1,
xspacing: 100,
autoUp: true,
child: [
{
id: 'node210',
parentId: 'node21',
label: '节点2-1-0',
direction: 'BT',
level: 2,
xspacing: 20,
},
{
id: 'node211',
parentId: 'node21',
label: '节点2-1-1',
direction: 'BT',
level: 2,
xspacing: 20,
child: [
{
id: 'node2111',
parentId: 'node211',
label: '节点2-1-1-1',
direction: 'BT',
level: 3,
xspacing: 20,
},
{
id: 'node2112',
parentId: 'node211',
label: '节点2-1-1-2',
direction: 'BT',
level: 3,
xspacing: 20,
},
{
id: 'node2113',
parentId: 'node211',
label: '节点2-1-1-3',
direction: 'BT',
level: 3,
xspacing: 20,
},
],
},
{
id: 'node212',
parentId: 'node21',
label: '节点2-1-2',
direction: 'BT',
level: 2,
xspacing: 20,
connectNode: 'node211',
// child: [{
// id: 'node2121',
// parentId:'node212',
// label: '节点2-1-2-1',
// direction: 'BT',
// level: 3,
// xspacing: 20,
// },
// {
// id: 'node2122',
// parentId:'node212',
// label: '节点2-1-2-2',
// direction: 'BT',
// level: 3,
// xspacing: 20,
// },
// {
// id: 'node2123',
// parentId:'node212',
// label: '节点2-1-2-3',
// direction: 'BT',
// level: 3,
// xspacing: 20,
// }]
},
{
id: 'node213',
parentId: 'node21',
label: '节点2-1-3',
direction: 'BT',
level: 2,
xspacing: 20,
// connectNode:'node211',
child: [
{
id: 'node2131',
parentId: 'node213',
label: '节点2-1-2-1',
direction: 'BT',
level: 3,
xspacing: 20,
},
{
id: 'node2132',
parentId: 'node213',
label: '节点2-1-2-2',
direction: 'BT',
level: 3,
xspacing: 20,
},
{
id: 'node2133',
parentId: 'node213',
label: '节点2-1-2-3',
direction: 'BT',
level: 3,
xspacing: 20,
},
],
},
{
id: 'node214',
parentId: 'node21',
label: '节点2-1-4',
direction: 'BT',
level: 2,
xspacing: 20,
// child: [{
// id: 'node2131',
// parentId:'node213',
// label: '节点2-1-2-1',
// direction: 'BT',
// level: 3,
// xspacing: 20,
// },
// {
// id: 'node2132',
// parentId:'node213',
// label: '节点2-1-2-2',
// direction: 'BT',
// level: 3,
// xspacing: 20,
// },
// {
// id: 'node2133',
// parentId:'node213',
// label: '节点2-1-2-3',
// direction: 'BT',
// level: 3,
// xspacing: 20,
// }]
},
],
},
{
id: 'node22',
parentId: 'node1',
parentIdArr: ['node1', 'node2', 'node3'],
label: '节点2-2',
direction: 'LR',
level: 1,
xspacing: 100,
connectNode: 'node21',
},
{
id: 'node23',
parentId: 'node1',
parentIdArr: ['node1', 'node2', 'node3'],
label: '节点2-3',
direction: 'BT',
level: 1,
xspacing: 100,
},
{
id: 'node24',
parentId: 'node1',
parentIdArr: ['node1', 'node2', 'node3'],
label: '节点2-4',
direction: 'BT',
level: 1,
xspacing: 100,
// child: [{
// id: 'node241',
// parentId:'node24',
// label: '节点2-4-1',
// direction: 'BT',
// level: 2,
// xspacing: 20,
// },
// {
// id: 'node242',
// parentId:'node24',
// label: '节点2-4-2',
// direction: 'BT',
// level: 2,
// xspacing: 20,
// },
// {
// id: 'node243',
// parentId:'node24',
// label: '节点2-4-3',
// direction: 'BT',
// level: 2,
// xspacing: 20,
// },
// ]
},
{
id: 'node25',
parentId: 'node1',
parentIdArr: ['node1', 'node2', 'node3'],
label: '节点2-5',
direction: 'LR',
level: 1,
xspacing: 100,
child: [
{
id: 'node251',
parentId: 'node25',
label: '节点2-5-1',
direction: 'BT',
level: 2,
xspacing: 20,
child: [
{
id: 'node2511',
parentId: 'node251',
label: '节点2-5-1-1',
direction: 'BT',
level: 3,
xspacing: 20,
},
{
id: 'node2512',
parentId: 'node251',
label: '节点2-1-1-2',
direction: 'BT',
level: 3,
xspacing: 20,
},
{
id: 'node2513',
parentId: 'node251',
label: '节点2-1-1-3',
direction: 'BT',
level: 3,
xspacing: 20,
},
