<commit_before>var React = require('react');
var ReactDOM = require('react-dom');

var isTouchDevice =
    !!(typeof window !== 'undefined' &&
       typeof navigator !== 'undefined' &&
       ('ontouchstart' in window || navigator.msMaxTouchPoints > 0)
      );
var draggableEvents = {
    touch: {
        react: {
            down: 'onTouchStart',
            mouseDown: 'onMouseDown',
            drag: 'onTouchMove',
            drop: 'onTouchEnd',
            move: 'onTouchMove',
            mouseMove: 'onMouseMove',
            up: 'onTouchEnd',
            mouseUp: 'onMouseUp'
        },
        native: {
            down: 'touchstart',
            mouseDown: 'mousedown',
            drag: 'touchmove',
            drop: 'touchend',
            move: 'touchmove',
            mouseMove: 'mousemove',
            up: 'touchend',
            mouseUp: 'mouseup'
        }
    },
    desktop: {
        react: {
            down: 'onMouseDown',
            drag: 'onDragOver',
            drop: 'onDrop',
            move: 'onMouseMove',
            up: 'onMouseUp'
        },
        native: {
            down: 'mousedown',
            drag: 'dragStart',
            drop: 'drop',
            move: 'mousemove',
            up: 'mouseup'
        }
    }
};
var deviceEvents = isTouchDevice ? draggableEvents.touch : draggableEvents.desktop;

// Draws a rounded rectangle on a 2D context.
var drawRoundedRect = function(context, x, y, width, height, borderRadius) {
    if (borderRadius === 0) {
        context.rect(x, y, width, height);
    } else {
        var widthMinusRad = width - borderRadius;
        var heightMinusRad = height - borderRadius;
        context.translate(x, y);
        context.arc(borderRadius, borderRadius, borderRadius, Math.PI, Math.PI*1.5);
        context.lineTo(widthMinusRad, 0);
        context.arc(widthMinusRad, borderRadius, borderRadius, Math.PI*1.5, Math.PI*2);
        context.lineTo(width, heightMinusRad);
        context.arc(widthMinusRad, heightMinusRad, borderRadius, Math.PI*2, Math.PI*0.5);
        context.lineTo(borderRadius, height);
        context.arc(borderRadius, heightMinusRad, borderRadius, Math.PI*0.5, Math.PI);
        context.translate(-x, -y);
    }
}

var AvatarEditor = React.createClass({
    propTypes: {
        scale: React.PropTypes.number,
        image: React.PropTypes.string,
        border: React.PropTypes.number,
        borderRadius: React.PropTypes.number,
        width: React.PropTypes.number,
        height: React.PropTypes.number,
        color: React.PropTypes.arrayOf(React.PropTypes.number),
        style: React.PropTypes.object,

        onDropFile: React.PropTypes.func,
        onLoadFailure: React.PropTypes.func,
        onLoadSuccess: React.PropTypes.func,
        onImageReady: React.PropTypes.func,
        onMouseUp: React.PropTypes.func
    },

    getDefaultProps() {
        return {
            scale: 1,
            border: 25,
            borderRadius: 0,
            width: 200,
            height: 200,
            color: [0, 0, 0, 0.5],
            style: {},
            onDropFile() {},
            onLoadFailure() {},
            onLoadSuccess() {},
            onImageReady() {},
            onMouseUp() {}
        }
    },

    getInitialState() {
        return {
            drag: false,
            my: null,
            mx: null,
            image: {
                x: 0,
                y: 0
            }
        };
    },

    getDimensions() {
        return {
            width: this.props.width,
            height: this.props.height,
            border: this.props.border,
            canvas: {
                width: this.props.width + (this.props.border * 2),
                height: this.props.height + (this.props.border * 2)
            }
        }
    },

    getImage(type, quality) {
        var dom = document.createElement('canvas');
        var context = dom.getContext('2d');
        var dimensions = this.getDimensions();
        var border = 0;

        dom.width = dimensions.width;
        dom.height = dimensions.height;

        context.globalCompositeOperation = 'destination-over';

        this.paintImage(context, this.state.image, border);

        return dom.toDataURL(type, quality);
    },
    
    getCroppingRect() {
        var dim = this.getDimensions();
        var frameRect = {x: dim.border, y: dim.border, width: dim.width, height: dim.height};
        var imageRect = this.calculatePosition(this.state.image, dim.border);
        return {
            x: (frameRect.x - imageRect.x) / imageRect.width,
            y: (frameRect.y - imageRect.y) / imageRect.height,
            width: frameRect.width / imageRect.width,
            height: frameRect.height / imageRect.height,
        };
    },

    isDataURL(str) {
        var regex = /^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;
        return !!str.match(regex);
    },

    loadImage(imageURL) {
        var imageObj = new Image();
        imageObj.onload = this.handleImageReady.bind(this, imageObj);
        imageObj.onerror = this.props.onLoadFailure;
        if (!this.isDataURL(imageURL)) imageObj.crossOrigin = 'anonymous';
        imageObj.src = imageURL;
    },

    componentDidMount() {<commit_msg>getImage() returns image in original resolution<commit_after>var React = require('react');
var ReactDOM = require('react-dom');

var isTouchDevice =
    !!(typeof window !== 'undefined' &&
       typeof navigator !== 'undefined' &&
       ('ontouchstart' in window || navigator.msMaxTouchPoints > 0)
      );
var draggableEvents = {
    touch: {
        react: {
            down: 'onTouchStart',
            mouseDown: 'onMouseDown',
            drag: 'onTouchMove',
            drop: 'onTouchEnd',
            move: 'onTouchMove',
            mouseMove: 'onMouseMove',
            up: 'onTouchEnd',
            mouseUp: 'onMouseUp'
        },
        native: {
            down: 'touchstart',
            mouseDown: 'mousedown',
            drag: 'touchmove',
            drop: 'touchend',
            move: 'touchmove',
            mouseMove: 'mousemove',
            up: 'touchend',
            mouseUp: 'mouseup'
        }
    },
    desktop: {
        react: {
            down: 'onMouseDown',
            drag: 'onDragOver',
            drop: 'onDrop',
            move: 'onMouseMove',
            up: 'onMouseUp'
        },
        native: {
            down: 'mousedown',
            drag: 'dragStart',
            drop: 'drop',
            move: 'mousemove',
            up: 'mouseup'
        }
    }
};
var deviceEvents = isTouchDevice ? draggableEvents.touch : draggableEvents.desktop;

// Draws a rounded rectangle on a 2D context.
var drawRoundedRect = function(context, x, y, width, height, borderRadius) {
    if (borderRadius === 0) {
        context.rect(x, y, width, height);
    } else {
        var widthMinusRad = width - borderRadius;
        var heightMinusRad = height - borderRadius;
        context.translate(x, y);
        context.arc(borderRadius, borderRadius, borderRadius, Math.PI, Math.PI*1.5);
        context.lineTo(widthMinusRad, 0);
        context.arc(widthMinusRad, borderRadius, borderRadius, Math.PI*1.5, Math.PI*2);
        context.lineTo(width, heightMinusRad);
        context.arc(widthMinusRad, heightMinusRad, borderRadius, Math.PI*2, Math.PI*0.5);
        context.lineTo(borderRadius, height);
        context.arc(borderRadius, heightMinusRad, borderRadius, Math.PI*0.5, Math.PI);
        context.translate(-x, -y);
    }
}

var AvatarEditor = React.createClass({
    propTypes: {
        scale: React.PropTypes.number,
        image: React.PropTypes.string,
        border: React.PropTypes.number,
        borderRadius: React.PropTypes.number,
        width: React.PropTypes.number,
        height: React.PropTypes.number,
        color: React.PropTypes.arrayOf(React.PropTypes.number),
        style: React.PropTypes.object,

        onDropFile: React.PropTypes.func,
        onLoadFailure: React.PropTypes.func,
        onLoadSuccess: React.PropTypes.func,
        onImageReady: React.PropTypes.func,
        onMouseUp: React.PropTypes.func
    },

    getDefaultProps() {
        return {
            scale: 1,
            border: 25,
            borderRadius: 0,
            width: 200,
            height: 200,
            color: [0, 0, 0, 0.5],
            style: {},
            onDropFile() {},
            onLoadFailure() {},
            onLoadSuccess() {},
            onImageReady() {},
            onMouseUp() {}
        }
    },

    getInitialState() {
        return {
            drag: false,
            my: null,
            mx: null,
            image: {
                x: 0,
                y: 0
            }
        };
    },

    getDimensions() {
        return {
            width: this.props.width,
            height: this.props.height,
            border: this.props.border,
            canvas: {
                width: this.props.width + (this.props.border * 2),
                height: this.props.height + (this.props.border * 2)
            }
        }
    },
    
    getImage: function getImage(type, quality) {
        // get relative coordinates (0 to 1)
        var cropRect = this.getCroppingRect();
        var image = this.state.image;

        // get actual pixel coordinates
        cropRect.x      *= image.resource.width;
        cropRect.y      *= image.resource.height;
        cropRect.width  *= image.resource.width;
        cropRect.height *= image.resource.height;

        // create a canvas with the correct dimensions
        var canvas = document.createElement('canvas');
        canvas.width  = cropRect.width;
        canvas.height = cropRect.height;

        // draw the full-size image at the correct position,
        // the image gets truncated to the size of the canvas.
        canvas.getContext('2d').drawImage(image.resource, -cropRect.x, -cropRect.y);

        return canvas.toDataURL(type, quality);
    },
    
    getCroppingRect() {
        var dim = this.getDimensions();
        var frameRect = {x: dim.border, y: dim.border, width: dim.width, height: dim.height};
        var imageRect = this.calculatePosition(this.state.image, dim.border);
        return {
            x: (frameRect.x - imageRect.x) / imageRect.width,
            y: (frameRect.y - imageRect.y) / imageRect.height,
            width: frameRect.width / imageRect.width,
            height: frameRect.height / imageRect.height,
        };
    },

    isDataURL(str) {
        var regex = /^\s*data:([a-z]+\/[a-z]+(;[a-z\-]+\=[a-z\-]+)?)?(;base64)?,[a-z0-9\!\$\&\'\,\(\)\*\+\,\;\=\-\.\_\~\:\@\/\?\%\s]*\s*$/i;
        return !!str.match(regex);
    },

    loadImage(imageURL) {
        var imageObj = new Image();
        imageObj.onload = this.handleImageReady.bind(this, imageObj);
        imageObj.onerror = this.props.onLoadFailure;
        if (!this.isDataURL(imageURL)) imageObj.crossOrigin = 'anonymous';
        imageObj.src = imageURL;
    },

    componentDidMount() {
{'fraction_non_alphanumeric': 0.13486901535682022, 'fraction_numerical': 0.007136404697380307, 'mean_word_length': 1.8184826883910388, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '5020106', 'n_tokens_mistral': 3362, 'n_tokens_neox': 3275, 'n_words': 667}