PartBrowserItem.jsx 3.25 KB
Newer Older
1
2
3
4
5
6
7
8
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {DragSource} from 'react-dnd';
import {getEmptyImage} from 'react-dnd-html5-backend';

// noinspection JSUnresolvedVariable
import {Samy, SvgProxy} from 'react-samy-svg';

Patrik Meijer's avatar
Patrik Meijer committed
9
import dragTypes from '../../utils/dragTypes';
10
11
12
13
14
15
16
17
18
19

// / End of DragLayer..
const partBrowserItemSource = {
    beginDrag(props) {
        return {
            gmeId: props.nodeData.id,
            create: true,
            // Specifics
            nodeData: props.nodeData,
            offset: {
Patrik Meijer's avatar
Patrik Meijer committed
20
21
                y: props.nodeData.svg.bbox.height * (props.scale / 2),
                x: props.nodeData.svg.bbox.width * (props.scale / 2),
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
            },
        };
    },
};

function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        connectDragPreview: connect.dragPreview(),
        isDragging: monitor.isDragging(),
    };
}

class PartBrowserItem extends Component {
    static propTypes = {
        nodeData: PropTypes.shape({
            id: PropTypes.string.isRequired,
            name: PropTypes.string,
Patrik Meijer's avatar
Patrik Meijer committed
40
            svg: PropTypes.object.isRequired,
41
42
43
        }).isRequired,
        connectDragSource: PropTypes.func.isRequired,
        connectDragPreview: PropTypes.func.isRequired,
Patrik Meijer's avatar
Patrik Meijer committed
44
        scale: PropTypes.number.isRequired,
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
        listView: PropTypes.bool,
    };

    static defaultProps = {
        listView: false,
    };

    componentDidMount() {
        const {connectDragPreview} = this.props;
        // Use empty image as a drag preview so browsers don't draw it
        // and we can draw whatever we want on the custom drag layer instead.
        connectDragPreview(getEmptyImage(), {
            // IE fallback: specify that we'd rather screenshot the node
            // when it already knows it's being dragged so we can hide it with CSS.
            captureDraggingState: true,
        });
    }

    render() {
        const {nodeData, connectDragSource, listView} = this.props;

        const content = (
            <div
                style={{
                    display: 'inline-flex',
                    width: '100%',
                    opacity: 0.99,
                    paddingTop: listView ? 10 : 0,
                    cursor: 'pointer',
                }}
            >
                <div>
                    <Samy
Patrik Meijer's avatar
Patrik Meijer committed
78
                        svgXML={nodeData.svg.base}
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
                        style={{
                            height: 26,
                            width: 40,
                            verticalAlign: 'middle',
                        }}
                    >
                        <SvgProxy selector="text" display="none"/>
                        <SvgProxy selector="*" stroke-width="0.75mm"/>
                    </Samy>
                </div>

                <div style={{
                    paddingTop: 5,
                    overflowX: 'hidden',
                    textOverflow: 'ellipsis',
                    fontSize: 13,
                    display: listView ? 'none' : undefined,
                }}
                >
                    {nodeData.name}
                </div>
            </div>);

        return connectDragSource(content);
    }
}

Patrik Meijer's avatar
Patrik Meijer committed
106
export default DragSource(dragTypes.GME_NODE, partBrowserItemSource, collect)(PartBrowserItem);