testto2

Question

import React from 'react';
import { Table, Popconfirm, Button } from 'antd';
import G6 from '@antv/g6';
require('@antv/g6/plugins/edge.polyline');
var data = {

nodes: [
    {
        id: 'top',
        x: 500,
        y: 100,
    },
    {
        id: 'contenCnter',
        x: 500,
        y: 200,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap4"
    },
    {
        id: 'contenCnter1',
        x: 500,
        y: 300,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap4"
    },
    {
        id: 'contenCnter2',
        x: 500,
        y: 400,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap4"
    },
    {
        id: 'bigContainer',
        x: 500,
        y: 500,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer1',
        x: 500,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer2',
        x: 400,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer3',
        x: 600,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer4',
        x: 700,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer5',
        x: 300,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer6',
        x: 200,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer7',
        x: 800,
        y: 600,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer8',
        x: 500,
        y: 700,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap5"
    },
    {
        id: 'bigContainer9',
        x: 500,
        y: 800,
        style: {
            width: 30,
            height: 20,
        },
        parent: "grap4"
    },
],
edges: [
    {
        source: 'top',
        target: 'grap4',
    },
    {
        source: 'grap4',
        target: 'top',
    },
    {
        source: 'contenCnter',
        target: 'contenCnter1',
    },
    {
        source: 'contenCnter1',
        target: 'contenCnter2',
    },
    {
        source: 'contenCnter2',
        target: 'grap5',
    },
    {
        source: 'bigContainer',
        target: 'bigContainer1',
    },
    {
        source: 'bigContainer',
        target: 'bigContainer2',
    },
    {
        source: 'bigContainer',
        target: 'bigContainer3',
        // sourceAnchor: 0, // 锚点索引
        // targetAnchor: 2, // 锚点索引
    },
    {
        source: 'bigContainer',
        target: 'bigContainer4',
        sourceAnchor: 1,
        targetAnchor: 2
    },
    {
        source: 'bigContainer',
        target: 'bigContainer5',
        sourceAnchor: 0,
        targetAnchor: 2
    },
    {
        source: 'bigContainer',
        target: 'bigContainer6',
        sourceAnchor: 0,
        targetAnchor: 2
    },
    {
        source: 'bigContainer',
        target: 'bigContainer7',
        sourceAnchor: 1,
        targetAnchor: 2
    },



    {
        source: 'bigContainer1',
        target: 'bigContainer8',
        
    },
    {
        source: 'bigContainer2',
        target: 'bigContainer8',
        sourceAnchor: 3,
        targetAnchor: 0
    },
    {
        source: 'bigContainer3',
        target: 'bigContainer8',
        sourceAnchor: 3,
        targetAnchor: 1
    },
    {
        source: 'bigContainer4',
        target: 'bigContainer8',
        sourceAnchor: 3,
        targetAnchor: 1
    },
    {
        source: 'bigContainer5',
        target: 'bigContainer8',
        sourceAnchor: 3,
        targetAnchor: 0
    },
    {
        source: 'bigContainer6',
        target: 'bigContainer8',
        sourceAnchor: 3,
        targetAnchor: 0
    },
    {
        source: 'bigContainer7',
        target: 'bigContainer8',
        sourceAnchor: 3,
        targetAnchor: 1
    },
    {
        source: 'grap5',
        target: 'bigContainer9',
    }

],
groups: [
    {
        id: "grap4"
    },
    {
        id: "grap5",
        parent: "grap4"
    }
]

};
//const dagre = new G6.Layouts.Dagre();
class ProductList extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        count: 1,
        graph: null
    }

}
componentDidMount() {
    this.paint(data)
    this.setState((state) => {
        return {
            ...state,
            //graph
        }
    })
}

paint = (data) => {
    let MIN_ARROW_SIZE = 5;
    G6.registerEdge("name", {
        // 绘制
        draw(item) {
            //return keyShape
        },
        // 获取路径
        getPath(item) {
            console.log(item);
            //return path; // svg 规范 path 路径 
        },
        // 起始箭头
        startArrow: {
            // 路径
            path(item) { },
            // 线缩短偏移
            shorten(item) { },
            // 样式
            style(item) { }
        },
        // 结束箭头
        endArrow: {
            // 路径
            path(item) { },
            // 线缩短偏移
            shorten(item) { },
            // 样式
            style(item) { }
        }
    });
    G6.registerNode('code', {
        draw(item) {
            const group = item.getGraphicGroup();
            return group.addShape('rect', {
                attrs: {
                    x: 0,
                    y: 0,
                    width: 50,
                    height: 40,
                    stroke: 'red',
                    fill: "red"
                },
            });
        },
        anchor(node) {
            return [
                [0, 0.5],
                [1, 0.5],
                [0.5, 0],
                [0.5, 1]
            ]
        }
    });

    G6.registerGroup('custom', {
        draw(item) {
            const group = item.getGraphicGroup();
            const childrenBox = item.getChildrenBBox();
            return group.addShape('rect', {
                attrs: {
                    ...childrenBox,
                    minX: childrenBox.minX - 20,
                    minY: childrenBox.minY - 20,
                    maxX: childrenBox.maxX + 20,
                    maxY: childrenBox.maxY + 20,
                    x: childrenBox.minX - 20,
                    y: childrenBox.minY - 20,
                    width: childrenBox.width + 40,
                    height: childrenBox.height + 40,
                    stroke: 'red',
                    fill: '#ccc',
                }
            });
        },
        anchor(node) {
            return [
                [0, 0.5],
                [1, 0.5],
                [0.5, 0],
                [0.5, 1]
            ]
        }
    });

    var graph = new G6.Graph({
        container: 'mountNode',
        fitView: 'cc',
        height: window.innerHeight, // 画布高
        width: window.innerWidth
    });

    graph.node({
        shape: 'code',
    });
    graph.group({
        shape: 'custom'
    });
    //debugger
    graph.edge({
        shape: 'polyline-round',
        style: {
            endArrow: true
        },
    });
    graph.on("group:click", (e) => {
        console.log(e)
    })

    graph.on("node:click", (e) => {
        console.log(e)
        Object.keys(e).map((key) => {
            console.log(key)
            console.log(e[key])
            return [];
        })
    })
    graph.read(data);

}
render() {
    return (
        <div>
            <p>{this.state.count}</p>
            <Button onClick={this.add}> 增加 </Button>
            <div id="mountNode">

            </div>
        </div>
    )
}
add = () => {
    this.setState((state) => {
        console.log(state.graph)
        return {
            count: state.count + 1
        }
    })
}

}

export default ProductList;