BasicConnection.jsx 2.53 KB
Newer Older
Tamas Kecskes's avatar
Tamas Kecskes committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ZLEVELS from '../../utils/zLevels';


export default class BasicConnection extends Component {
    static propTypes = {
        path: PropTypes.arrayOf(PropTypes.object).isRequired,
        onClick: PropTypes.func,
        hasWrapper: PropTypes.bool.isRequired,
        dashed: PropTypes.bool.isRequired,
        color: PropTypes.string,
    };

    static defaultProps = {
        onClick: null,
        color: 'black',
    };

    onClick = (event) => {
        const {onClick} = this.props;
        if (onClick) {
            onClick(event);
        }
    };

    getBoundingBox = () => {
        const {path} = this.props;
        let minX;
        let maxX;
        let minY;
        let maxY;

        if (path.length === 0) {
            return null;
        }
        minX = path[0].x;
        maxX = path[0].x;
        minY = path[0].y;
        maxY = path[0].y;

        path.forEach((point) => {
            if (point.x < minX) {
                minX = point.x;
            }

            if (point.x > maxX) {
                maxX = point.x;
            }

            if (point.y < minY) {
                minY = point.y;
            }

            if (point.y > maxY) {
                maxY = point.y;
            }
        });

        return {
            x: minX,
            y: minY,
            width: Math.max(maxX - minX, 2),
            height: Math.max(maxY - minY, 2),
        };
    };

    render() {
        const {path, hasWrapper, dashed, color} = this.props;
        const box = this.getBoundingBox();
        const sections = [];
        let i;
        const style = hasWrapper ? {} : {
            position: 'absolute',
            top: box.y,
            left: box.x,
            zIndex: ZLEVELS.connection,
        };

        if (box === null) {
            return null;
        }

        for (i = 0; i < path.length - 1; i += 1) {
            sections.push(<path
                key={i}
                d={`M${
                    path[i].x} ${
                    path[i].y} L${
                    path[i + 1].x} ${
                    path[i + 1].y}`}
                strokeWidth={1.6}
                strokeDasharray={dashed ? 5 : 0}
                stroke={color}
            />);
        }

        return (
            <svg
                width={box.width}
                height={box.height}
                style={style}
                viewBox={`${box.x} ${box.y} ${box.width} ${box.height}`}
            >
                {sections}
            </svg>);
    }
}