<commit_before>/** @jsx React.DOM */
var React = require('react');

var AvatarEditor = React.createClass({
    propTypes: {
        scale: React.PropTypes.number,
        image: React.PropTypes.string,
        border: React.PropTypes.number,
        width: React.PropTypes.number,
        height: React.PropTypes.number
    },
    getDefaultProps: function() {
        return {
            scale: 1,
            border: 25,
            width: 250,
            height: 250
        }
    },
    getInitialState: function() {
        return {
            drag: false,
            my: null,
            mx: null,
            y: 0,
            x: 0,
            image: null,
            initialWidth: null,
            initialHeight: null,
            height: null,
            width: null
        };
    },

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

    getImage: function() {
        var dom = document.createElement('canvas');
        dom.width  = this.props.width-(this.props.border*2);
        dom.height = this.props.height-(this.props.border*2);

        var context = dom.getContext('2d');
        context.globalCompositeOperation='destination-over';
        context.drawImage(this.state.image, this.state.x-this.props.border, this.state.y-this.props.border, this.state.width, this.state.height);

        return dom.toDataURL();
    },

    componentDidMount: function() {
        var context = this.getDOMNode().getContext('2d');
        if (this.props.image) {
            var imageObj = new Image();
            imageObj.onload = this.handleImageReady;
            imageObj.src = this.props.image;
            this.setState({image: imageObj});
        }
        this.paint(context);
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
    },

    componentWillUnmount: function() {
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
    },

    componentDidUpdate: function() {
        var context = this.getDOMNode().getContext('2d');
        context.clearRect(0, 0, this.props.width, this.props.height);
        this.paint(context);
        this.drawImage(context);
    },

    handleImageReady: function() {
        this.setState(this.getInitialSizeAndPosition(this.state.image.width, this.state.image.height));
    },

    getInitialSizeAndPosition: function(width, height) {
        var newHeight, newWidth;

        if (width > height) {
            newHeight = (this.props.height-(this.props.border*2));
            newWidth = (width*(newHeight / height));
        } else {
            newWidth = (this.props.width-(this.props.border*2));
            newHeight = (height*(newWidth / width));
        }

        var position = this.calculatePosition(newWidth, newHeight);

        return {
            height: newHeight,
            width: newWidth,
            x: position.x,
            y: position.y
        };
    },

    calculatePosition: function(width, height) {

        var borderX = (this.props.height-this.props.border);
        var borderY = (this.props.width-this.props.border);

        var x = Math.round((width+this.state.x <= borderX) ? this.state.x+(borderX-(width+this.state.x)) : this.state.x);
        var y = Math.round((height+this.state.y <= borderY) ? this.state.y+(borderY-(height+this.state.y)) : this.state.y);

        return { x: x, y: y }
    },

    componentWillReceiveProps: function(props) {
        var image = this.state.image;
        var width = (this.state.width/this.props.scale)*props.scale;
        var height = (this.state.width/this.props.scale)*props.scale;

        var minHeight = (this.props.height-(this.props.border*2));
        var minWidth = (this.props.width-(this.props.border*2));

        var horizontal = width > height;
        // size
        if (horizontal) {
            height = height <= minHeight ? minHeight : height;
            width = (image.width*(height / image.height));
        } else {
            width  = width <= minWidth ? minWidth : width;
            height = (image.height*(width / image.width));
        }

        var position = this.calculatePosition(width, height);

        this.setState({height: height, width: width, x: position.x, y: position.y});
    },

    drawImage: function(context) {
        context.save();
        context.globalCompositeOperation='destination-over';
        context.drawImage(this.state.image, this.state.x, this.state.y, this.state.width, this.state.height);
        context.restore();<commit_msg>Update image in editor when image in props changes<commit_after>/** @jsx React.DOM */
var React = require('react');

var AvatarEditor = React.createClass({
    propTypes: {
        scale: React.PropTypes.number,
        image: React.PropTypes.string,
        border: React.PropTypes.number,
        width: React.PropTypes.number,
        height: React.PropTypes.number
    },
    getDefaultProps: function() {
        return {
            scale: 1,
            border: 25,
            width: 250,
            height: 250
        }
    },
    getInitialState: function() {
        return {
            drag: false,
            my: null,
            mx: null,
            y: 0,
            x: 0,
            image: null,
            initialWidth: null,
            initialHeight: null,
            height: null,
            width: null
        };
    },

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

    getImage: function() {
        var dom = document.createElement('canvas');
        dom.width  = this.props.width-(this.props.border*2);
        dom.height = this.props.height-(this.props.border*2);

        var context = dom.getContext('2d');
        context.globalCompositeOperation='destination-over';
        context.drawImage(this.state.image, this.state.x-this.props.border, this.state.y-this.props.border, this.state.width, this.state.height);

        return dom.toDataURL();
    },

    componentDidMount: function() {
        var context = this.getDOMNode().getContext('2d');
        if (this.props.image) {
            var imageObj = new Image();
            imageObj.onload = this.handleImageReady;
            imageObj.src = this.props.image;
            this.setState({image: imageObj});
        }
        this.paint(context);
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
    },

    componentWillUnmount: function() {
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
    },

    componentDidUpdate: function() {
        var context = this.getDOMNode().getContext('2d');
        context.clearRect(0, 0, this.props.width, this.props.height);
        this.paint(context);
        this.drawImage(context);
    },

    handleImageReady: function() {
        this.setState(this.getInitialSizeAndPosition(this.state.image.width, this.state.image.height));
    },

    getInitialSizeAndPosition: function(width, height) {
        var newHeight, newWidth;

        if (width > height) {
            newHeight = (this.props.height-(this.props.border*2));
            newWidth = (width*(newHeight / height));
        } else {
            newWidth = (this.props.width-(this.props.border*2));
            newHeight = (height*(newWidth / width));
        }

        var position = this.calculatePosition(newWidth, newHeight);

        return {
            height: newHeight,
            width: newWidth,
            x: position.x,
            y: position.y
        };
    },

    calculatePosition: function(width, height) {

        var borderX = (this.props.height-this.props.border);
        var borderY = (this.props.width-this.props.border);

        var x = Math.round((width+this.state.x <= borderX) ? this.state.x+(borderX-(width+this.state.x)) : this.state.x);
        var y = Math.round((height+this.state.y <= borderY) ? this.state.y+(borderY-(height+this.state.y)) : this.state.y);

        return { x: x, y: y }
    },

    componentWillReceiveProps: function(props) {
        if (this.props.image != props.image) {
            var imageObj = new Image();
            imageObj.onload = this.handleImageReady;
            imageObj.src = props.image;
            this.setState({image: imageObj});
        }
        var image = this.state.image;
        var width = (this.state.width/this.props.scale)*props.scale;
        var height = (this.state.width/this.props.scale)*props.scale;

        var minHeight = (this.props.height-(this.props.border*2));
        var minWidth = (this.props.width-(this.props.border*2));

        var horizontal = width > height;
        // size
        if (horizontal) {
            height = height <= minHeight ? minHeight : height;
            width = (image.width*(height / image.height));
        } else {
            width  = width <= minWidth ? minWidth : width;
            height = (image.height*(width / image.width));
        }

        var position = this.calculatePosition(width, height);

        this.setState({height: height, width: width, x: position.x, y: position.y});
    },

    drawImage: function(context) {
        context.save();
        context.globalCompositeOperation='destination-over';
        context.drawImage(this.state.image, this.state.x, this.state.y, this.state.width, this.state.height);
        context.restore();
{'fraction_non_alphanumeric': 0.13312171411566312, 'fraction_numerical': 0.004761432397579605, 'mean_word_length': 2.0681679853925745, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 7, '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': '5403993', 'n_tokens_mistral': 2896, 'n_tokens_neox': 2836, 'n_words': 526}