graph-constructor v1.1.3

GraphConstructor

GraphConstructor is a graph constructor

Usage example

Посмотреть demo

You can select multiple nodes with alt button pressed

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;

props

onChange

onChange is a function that will be call when you will manipulate with graph data

What actions you can do with graph?

1. You can add node
2. You can insert node between to existing
3. You can remove node with all children of deleted node
4. You can cut node! It will add all children from deleted node to parent!
5. You can clone some piece of tree and paste in another place of graph

Whenever one of these actions occurs, the onChange function is called with 3 arguments. 1. type: CLONE_TREE, ADD_NODE, INSERT_NODE, REMOVE_NODE, CUT_NODE, NODE_CLICK 2. temp: data that was added or removed or was cloned depends on action occurred 3. data: this is current graph data

Shapes

By default all nodes in graph are circle. Pass nodeSvgShape prop to GraphConstructor to specify what shapes of nodes do you want

To change shapes in a specific node you should pass an object nodeSvgShape. This is a square example!

{
    unique: '0',
    children: [],
    name: 'some name',
    nodeSvgShape: {
        shape: 'rect',
        shapeProps: {
            fill: '#21cbf3',
            stroke: '#939fe4',
            width: 20,
            height: 20,
            x: -10,
            y: -10,
        }
    }
}

All shapes

circle

{
    shape: 'circle',
    shapeProps: {
        r: 20,
    },
}

rect

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

ellipse

{
    shape: 'ellipse',
    shapeProps: {
        rx: 20,
        ry: 40,
    }
}

none

{
    shape: 'none'
}

pathFunc

pathFunc can be 'diagonal' | 'elbow' | 'straight'