denchiklut / graph-constructor Goto Github PK

import React, { Component } from 'react';
import GraphConstructor from 'graph-constructor';

const svgStyle = {
    nodes: {
        node: {
            circle: {
                fill: "#a94690",
                stroke: '#837086',
                strokeWidth: 1
            }
        },
        leafNode: {
            circle: {
                fill: "#a94690",
                stroke: '#837086',
                strokeWidth: 1
            }
        }
    }
};

const rect = {
    shape: 'rect',
    shapeProps: {
        width: 40,
        height: 40,
        y: -20,
        x: -20,
    }
}

class App extends Component {
    graphConstructor = React.createRef();

    state = {
        data: [
            {
                unique:'0',
                name: 'Start',
                children: [],
            }
        ]
    };

    add = () => {
        const name = prompt('Enter name', '');
        const data = { name };
        this.graphConstructor.current.addNode(data);
    };

    insert = () => {
        const name = prompt('Enter name', '');
        const data = { name };
        this.graphConstructor.current.insertNode(data);
    };

    update = ({ type, temp, data }) => {
        // Here you can update date from the backend
        // console.log('Type of action', temp)
        // console.log('Data that was added or removed ', temp)
        // console.log('Result data', data)
        this.setState({ data })
    }

    render() {
        const { data } = this.state;

        return (
            <div>
                <GraphConstructor
                    data={ data }
                    styles={ svgStyle }
                    onChange={ this.update }
                    nodeSvgShape={ rect }
                    ref={ this.graphConstructor }
                    onNodeCLick={ node => console.log(node) }
                />

                <button onClick={ this.add }>add</button>
                <button onClick={ this.insert }>insert</button>
                <button onClick={ () => this.graphConstructor.current.removeNode() }>remove</button>
                <button onClick={ () => this.graphConstructor.current.cutNode() }>cut</button>
                <button onClick={ () => this.graphConstructor.current.copyBranch() }>Copy branch</button>
                <button onClick={ () => this.graphConstructor.current.pasteBranch() }>Paste branch</button>
            </div>
        );
    }
};

export default App;