ContextMenu.jsx 2.78 KB
Newer Older
Patrik Meijer's avatar
Patrik Meijer committed
1
2
/* globals document */
/**
3
 * TODO: Consider moving this outside of the GraphEditor and let it be passed as child instead.
Patrik Meijer's avatar
Patrik Meijer committed
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 * @author pmeijer / https://github.com/pmeijer
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';

import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default class ContextMenu extends Component {
    static propTypes = {
        gmeClient: PropTypes.object.isRequired,
        nodeId: PropTypes.string.isRequired, // FIXME: should be nodeIds
        eventX: PropTypes.number.isRequired,
        eventY: PropTypes.number.isRequired,
        onClose: PropTypes.func.isRequired,
        setActiveNode: PropTypes.func.isRequired,
20
        createPointer: PropTypes.func.isRequired,
Patrik Meijer's avatar
Patrik Meijer committed
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

        readOnly: PropTypes.bool,
    };

    static defaultProps = {
        readOnly: false,
    }

    setActiveNode = () => {
        const {nodeId, onClose, setActiveNode} = this.props;

        setActiveNode(nodeId);
        onClose();
    }

    deleteNode = () => {
        const {gmeClient, nodeId, onClose} = this.props;

        gmeClient.deleteNode(nodeId);

        onClose();
    }

44
45
46
47
48
49
50
    getCreatePointerFunc = (ptrName) => {
        const {createPointer, nodeId} = this.props;
        return () => {
            createPointer(nodeId, ptrName);
        };
    }

Patrik Meijer's avatar
Patrik Meijer committed
51
52
53
54
55
56
57
    render() {
        const {
            gmeClient,
            nodeId,
            eventX,
            eventY,
            readOnly,
58
            onClose,
Patrik Meijer's avatar
Patrik Meijer committed
59
60
61
62
63
        } = this.props;

        // console.log(data);
        const menuItems = [];
        const nodeObj = gmeClient.getNode(nodeId);
64
        const metaNodeObj = gmeClient.getNode(nodeObj.getMetaTypeId());
Patrik Meijer's avatar
Patrik Meijer committed
65

66
        const pointerNames = metaNodeObj.getValidPointerNames();
Patrik Meijer's avatar
Patrik Meijer committed
67

68
69
70
71
72
73
74
75
76
77
78
        menuItems.push((
            <MenuItem key="meta-type" onClick={onClose} disabled={readOnly}>
                {`<<${metaNodeObj.getAttribute('name')}>>`}
            </MenuItem>));

        menuItems.push((
            <MenuItem key="open-sub-system" onClick={this.setActiveNode} >
                Open Subsystem ...
            </MenuItem>));

        pointerNames.forEach((ptr) => {
Patrik Meijer's avatar
Patrik Meijer committed
79
            menuItems.push((
80
81
                <MenuItem key={`create-pointer-${ptr}`} onClick={this.getCreatePointerFunc(ptr)} >
                    {`Create pointer ${ptr} from here ...`}
Patrik Meijer's avatar
Patrik Meijer committed
82
                </MenuItem>));
83
        });
Patrik Meijer's avatar
Patrik Meijer committed
84
85
86
87
88
89
90
91
92
93
94

        return (
            <Menu
                id="simple-menu"
                anchorEl={document.body}
                style={{
                    position: 'absolute',
                    top: eventY - (document.body.clientHeight / 2),
                    left: eventX,
                }}
                open
95
                onClose={onClose}
Patrik Meijer's avatar
Patrik Meijer committed
96
97
98
99
100
101
            >
                {menuItems}
            </Menu>
        );
    }
}