AlgorithmVisualizer/src/Graph/vertex.jsx at master · iMPactCoder/AlgorithmVisualizer · GitHub

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
import React, {Component} from 'react';

class Vertex extends Component {

    constructor() {
        super();

    }
    componentDidMount() {
        if( this.props.id === 0 ) return;
        // document.getElementById('ranim'+this.props.id).beginElement();
        document.getElementById('cxanim'+this.props.id).beginElement();
        document.getElementById('cyanim'+this.props.id).beginElement();
        document.getElementById('tanim'+this.props.id).beginElement();
    }
    render() {

        return (
            <g>
                <circle
                    cx={this.props.pos.x}
                    cy={this.props.pos.y}
                    r={6}
                    // ry={3}
                    stroke="black" stroke-width="0.5" fill={this.props.current?'cyan':'white'}
                >
                    <animate
                        id={'cxanim'+this.props.id}
                        attributeName='cx'
                        values={this.props.pos.px+";"+this.props.pos.x}
                        dur='0.5s'
                        repeatCount="1"
                    />
                    <animate
                        id={'cyanim'+this.props.id}
                        attributeName='cy'
                        values={this.props.pos.py+";"+this.props.pos.y}
                        dur='0.5s'
                        repeatCount="1"
                    />
                    {/*<animate*/}
                    {/*    id={'ranim'+this.props.id}*/}
                    {/*    attributeName='rx'*/}
                    {/*    values='0;3'*/}
                    {/*    dur='0.5s'*/}
                    {/*    repeatCount="1"*/}
                    {/*/>*/}
                    {/*<animate*/}
                    {/*    id={'vbanim'}*/}
                    {/*    attributeName='cx'*/}
                    {/*    values={(this.state.poss.x-50)+';'+this.state.poss.x}*/}
                    {/*    dur='2s'*/}
                    {/*    repeatCount="1"*/}
                    {/*/>*/}
                </circle>
                <text
                    style={{font:'3px sans-serif'}}
                    x={this.props.pos.x}
                    y={this.props.pos.y-4}
                    textAnchor={'middle'}
                    // alignmentBaseline={'top'}
                >
                    <animate
                        id={'tanim'+this.props.id}
                        attributeName='opacity'
                        values='0;0;1'
                        dur='1s'
                        repeatCount="1"
                    />
                    <tspan x={this.props.pos.x} dy='1.2em' >N:{this.props.label}</tspan>
                    <tspan  x={this.props.pos.x} dy='1.2em'>R:{this.props.ret}</tspan>
                </text>

            </g>
        );
    }
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

export default Vertex;