PartBrowserDragPreview.jsx 2.35 KB
Newer Older
1
2
3
4
5
6
7
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {DragLayer} from 'react-dnd';

// noinspection JSUnresolvedVariable
import {Samy} from 'react-samy-svg';
import DRAG_TYPES from '../../utils/dragTypes';
8
import getSVGData from '../../utils/getSVGData';
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

// DragLayer
function collect(monitor) {
    return {
        item: monitor.getItem(),
        itemType: monitor.getItemType(),
        currentOffset: monitor.getClientOffset(),
        initialOffset: monitor.getInitialClientOffset(),
        isDragging: monitor.isDragging(),
    };
}

class PartBrowserDragPreview extends Component {
    static propTypes = {
        item: PropTypes.object,
        itemType: PropTypes.string,
        currentOffset: PropTypes.shape({
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired,
        }),
        initialOffset: PropTypes.shape({
            x: PropTypes.number.isRequired,
            y: PropTypes.number.isRequired,
        }),
        isDragging: PropTypes.bool.isRequired,
        scale: PropTypes.number.isRequired,
    };

    static defaultProps = {
        item: null,
        itemType: null,
        currentOffset: null,
        initialOffset: null,
    };

    render() {
        const {
            item, itemType, isDragging, currentOffset, initialOffset, scale,
        } = this.props;

        if (!isDragging || !item || itemType !== DRAG_TYPES.GME_NODE
            || !item.nodeData || !currentOffset || !initialOffset) {
            return null;
        }

        const {x, y} = {x: currentOffset.x - initialOffset.x, y: currentOffset.y - initialOffset.y};
        const transform = `translate(${x}px, ${y}px)`;
56
        const {base, bbox} = item.nodeData.svg;
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

        return (
            <Samy
                svgXML={base}
                style={{
                    position: 'absolute',
                    top: initialOffset.y - item.offset.y,
                    left: initialOffset.x - item.offset.x,
                    zIndex: 1300,
                    height: bbox.height * scale,
                    width: bbox.width * scale,
                    pointerEvents: 'none',
                    // verticalAlign: 'middle',
                    transform,
                    WebkitTransform: transform,
                }}
            />
        );
    }
}

export default DragLayer(collect)((PartBrowserDragPreview));