<commit_before>import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Transformer extends Component {

    constructor(props) {
        super(props);

        this.state = {
            position: this.props.defaultPosition,
            rotation: this.props.defaultRotation,
            isRotating: false,
            dragStartPosition: {
                x: 0,
                y: 0
            }
        };
    }

    onDragStart = (e) => {
        e.preventDefault();
    };

    onMouseDown = (e) => {
        if (e.button !== 0) return;
        this.props.onMouseDown(e);

        const ref = ReactDOM.findDOMNode(this);
        const body = document.body;
        const box = ref.getBoundingClientRect();

        const cos = Math.cos(this.props.rotation);
        const sin = Math.sin(this.props.rotation);
        const xPos = e.pageX - box.left + body.scrollLeft - body.clientLeft;
        const yPos = e.pageY - box.top + body.scrollTop - body.clientTop;

        this.setState({
            dragStartPosition: {
                x: xPos * cos - yPos * sin,
                y: xPos * sin + yPos * cos
            }
          });
        document.addEventListener('mousemove', this.onMouseMove);
        document.addEventListener('mouseup', this.onMouseUp);
        e.preventDefault();
    };

    onMouseMove = (e) => {
        this.setState({
            position: {
                x: e.pageX - this.state.dragStartPosition.x,
                y: e.pageY - this.state.dragStartPosition.y
            }
        });
    };

    onMouseUp = (e) => {
        if (this.state.position.x !== this.props.defaultPosition.x ||
            this.state.position.y !== this.props.defaultPosition.y) {
                this.props.onMouseUp(this.state.position);
        }

        document.removeEventListener('mousemove', this.onMouseMove);
        document.removeEventListener('mouseup', this.onMouseUp);
        e.preventDefault();
    };

    render() {

        const dragRotateStyle = {
            transform: `translate3d(${this.state.position.x}px, ${this.state.position.y}px, 0) rotateZ(${this.state.rotation}rad)`
        };

        return React.cloneElement(React.Children.only(this.props.children), {
            style: dragRotateStyle,
            onDragStart: this.onDragStart,
            onMouseDown: this.onMouseDown,
            onMouseUp: this.onMouseUp
        });
    }
}

Transformer.defaultProps = {
    position: {x: 0, y: 0},
    rotation: 0,
    onMouseDown: () => {},
    onMouseUp: () => {}
};

export default Transformer;<commit_msg>Small image urls are fetched; dragging of rotated elements improved<commit_after>import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Transformer extends Component {

    constructor(props) {
        super(props);

        this.state = {
            position: this.props.defaultPosition,
            rotation: this.props.defaultRotation,
            isRotating: false,
            dragStartPosition: {
                x: 0,
                y: 0
            }
        };
    }

    onDragStart = (e) => {
        e.preventDefault();
    };

    onMouseDown = (e) => {
        if (e.button !== 0) return;
        this.props.onMouseDown(e);

        const ref = ReactDOM.findDOMNode(this);
        const body = document.body;
        const box = ref.getBoundingClientRect();

        const cos = Math.cos(this.props.rotation);
        const sin = Math.sin(this.props.rotation);

        const boxCenter = {
            x: box.width / 2,
            y: box.height / 2
        };

        const rotationDiff = {
            x: box.left * cos + box.top * sin,
            y: -box.left * sin + box.top * cos
        };

        const relPosition = {
            x: e.pageX - rotationDiff.x - body.scrollLeft - body.clientLeft,
            y: e.pageY - rotationDiff.y - body.scrollTop - body.clientTop
        };


        this.setState({
            dragStartPosition: relPosition
        });

        document.addEventListener('mousemove', this.onMouseMove);
        document.addEventListener('mouseup', this.onMouseUp);
        e.preventDefault();
    };

    onMouseMove = (e) => {
        this.setState({
            position: {
                x: e.pageX - this.state.dragStartPosition.x,
                y: e.pageY - this.state.dragStartPosition.y
            }
        });
    };

    onMouseUp = (e) => {
        if (this.state.position.x !== this.props.defaultPosition.x ||
            this.state.position.y !== this.props.defaultPosition.y) {
                this.props.onMouseUp(this.state.position);
        }

        document.removeEventListener('mousemove', this.onMouseMove);
        document.removeEventListener('mouseup', this.onMouseUp);
        e.preventDefault();
    };

    render() {

        const dragRotateStyle = {
            transform: `translate3d(${this.state.position.x}px, ${this.state.position.y}px, 0) rotateZ(${this.state.rotation}rad)`
        };

        return React.cloneElement(React.Children.only(this.props.children), {
            style: dragRotateStyle,
            onDragStart: this.onDragStart,
            onMouseDown: this.onMouseDown,
            onMouseUp: this.onMouseUp
        });
    }
}

Transformer.defaultProps = {
    position: {x: 0, y: 0},
    rotation: 0,
    onMouseDown: () => {},
    onMouseUp: () => {}
};

export default Transformer;
{'fraction_non_alphanumeric': 0.12763596004439512, 'fraction_numerical': 0.003329633740288568, 'mean_word_length': 1.8353434714210803, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5260773', 'n_tokens_mistral': 1605, 'n_tokens_neox': 1552, 'n_words': 289}