<commit_before>var resize = {};

resize.init = function(derivative_url, media_url, operations) {
    var image = new Image();
    image.addEventListener(
        'load',
        function(event) {
            var canvas = document.querySelector('#canvas');
            canvas.setAttribute('width', event.target.naturalWidth);
            canvas.setAttribute('height', event.target.naturalHeight);
            canvas.setAttribute('data-derivative', derivative_url);

            operations.forEach(function(operation) {
                if(operation[0] === 'crop') {
                    resize.setSelection({
                        left: operation[1][0], top: operation[1][1],
                        width: operation[1][2], height: operation[1][3]});
                }
            });
        });
    image.src = media_url;

    document.querySelector('#selection').drag = {
        action: null, position: null, corner: null };
    document.querySelector('#selection>rect').addEventListener(
        'mousedown', resize.onMoveStart);

    [].forEach.call(
        document.querySelectorAll('#selection>circle'),
        function(x) { x.addEventListener('mousedown', resize.onResizeStart); }
    );

    document.querySelector('#selection_ratio #free').addEventListener(
        'click', resize.setRatioType.bind(undefined, 'free'));
    document.querySelector('#selection_ratio #fixed').addEventListener(
        'click', resize.setRatioType.bind(undefined, 'fixed'));
}

resize.getSelection = function() {
    var matrix =
        /matrix\((.*)\)/.exec(
            selection.getAttribute('transform'))[1].split(' ').map(parseFloat);
    var left = matrix[4];
    var top = matrix[5];

    var rect = selection.querySelector('rect');
    var width = parseFloat(rect.getAttribute('width'));
    var height = parseFloat(rect.getAttribute('height'));

    return {left: left, top: top, width: width, height: height};
}

resize.setSelection = function(area) {
    var canvas = document.querySelector('#canvas');
    area.left = Math.max(
        0, Math.min(
            area.left, parseInt(canvas.getAttribute('width'))-area.width));
    area.top = Math.max(
        0, Math.min(
            area.top, parseInt(canvas.getAttribute('height'))-area.height));

    area.width = Math.max(0, area.width);
    area.height = Math.max(0, area.height);

    var selection = document.querySelector('#selection');
    selection.setAttribute(
        'transform', 'matrix(1 0 0 1 '+area.left+' '+area.top+')');

    var rect = selection.querySelector('rect');
    rect.setAttribute('width', area.width);
    rect.setAttribute('height', area.height);

    var se_handle = selection.querySelector('#se');
    se_handle.setAttribute('cx', area.width);
    se_handle.setAttribute('cy', area.height);
}

resize.getRatioType = function() {
    var radio_free = document.querySelector(
        '#selection_ratio input[value="free"]');
    var radio_fixed = document.querySelector(
        '#selection_ratio input[value="fixed"]');

    if(radio_free.checked) {
        return 'free';
    }
    else if(radio_fixed.checked) {
        return 'fixed';
    }
    else {
        throw new Error('Invalid ratio type');
    }
}

resize.setRatioType = function(type) {
    var radio_free = document.querySelector('#selection_ratio #free');
    var radio_fixed = document.querySelector('#selection_ratio #fixed');
    var width_control = document.querySelector('#selection_ratio #width');
    var height_control = document.querySelector('#selection_ratio #height');
    if(type === 'free') {
        radio_free.checked = true;<commit_msg>Restrict resize selection to ratio<commit_after>var resize = {};

resize.init = function(derivative_url, media_url, operations) {
    var image = new Image();
    image.addEventListener(
        'load',
        function(event) {
            var canvas = document.querySelector('#canvas');
            canvas.setAttribute('width', event.target.naturalWidth);
            canvas.setAttribute('height', event.target.naturalHeight);
            canvas.setAttribute('data-derivative', derivative_url);

            operations.forEach(function(operation) {
                if(operation[0] === 'crop') {
                    resize.setSelection({
                        left: operation[1][0], top: operation[1][1],
                        width: operation[1][2], height: operation[1][3]});
                }
            });
        });
    image.src = media_url;

    document.querySelector('#selection').drag = {
        action: null, position: null, corner: null };
    document.querySelector('#selection>rect').addEventListener(
        'mousedown', resize.onMoveStart);

    [].forEach.call(
        document.querySelectorAll('#selection>circle'),
        function(x) { x.addEventListener('mousedown', resize.onResizeStart); }
    );

    document.querySelector('#selection_ratio #free').addEventListener(
        'click', resize.setRatioType.bind(undefined, 'free'));
    document.querySelector('#selection_ratio #fixed').addEventListener(
        'click', resize.setRatioType.bind(undefined, 'fixed'));
}

resize.getSelection = function() {
    var matrix =
        /matrix\((.*)\)/.exec(
            selection.getAttribute('transform'))[1].split(' ').map(parseFloat);
    var left = matrix[4];
    var top = matrix[5];

    var rect = selection.querySelector('rect');
    var width = parseFloat(rect.getAttribute('width'));
    var height = parseFloat(rect.getAttribute('height'));

    return {left: left, top: top, width: width, height: height};
}

resize.setSelection = function(area) {
    var canvas = document.querySelector('#canvas');
    area.left = Math.max(
        0, Math.min(
            area.left, parseInt(canvas.getAttribute('width'))-area.width));
    area.top = Math.max(
        0, Math.min(
            area.top, parseInt(canvas.getAttribute('height'))-area.height));

    area.width = Math.max(0, area.width);
    area.height = Math.max(0, area.height);
    if(resize.getRatioType() === 'fixed') {
        var ratio =
            parseFloat(document.querySelector('#selection_ratio #width').value) /
            parseFloat(document.querySelector('#selection_ratio #height').value);
        area.height = area.width / ratio;
    }

    var selection = document.querySelector('#selection');
    selection.setAttribute(
        'transform', 'matrix(1 0 0 1 '+area.left+' '+area.top+')');

    var rect = selection.querySelector('rect');
    rect.setAttribute('width', area.width);
    rect.setAttribute('height', area.height);

    var se_handle = selection.querySelector('#se');
    se_handle.setAttribute('cx', area.width);
    se_handle.setAttribute('cy', area.height);
}

resize.getRatioType = function() {
    var radio_free = document.querySelector('#selection_ratio #free');
    var radio_fixed = document.querySelector('#selection_ratio #fixed');

    if(radio_free.checked) {
        return 'free';
    }
    else if(radio_fixed.checked) {
        return 'fixed';
    }
    else {
        throw new Error('Invalid ratio type');
    }
}

resize.setRatioType = function(type) {
    var radio_free = document.querySelector('#selection_ratio #free');
    var radio_fixed = document.querySelector('#selection_ratio #fixed');
    var width_control = document.querySelector('#selection_ratio #width');
    var height_control = document.querySelector('#selection_ratio #height');
    if(type === 'free') {
        radio_free.checked = true;
{'fraction_non_alphanumeric': 0.1513325297977769, 'fraction_numerical': 0.005356903709655819, 'mean_word_length': 3.085339168490153, 'pattern_counts': {'":': 0, '<': 3, '<?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': '7031498', 'n_tokens_mistral': 2039, 'n_tokens_neox': 2044, 'n_words': 386}