<commit_before>$.fn.respondosketch = function(props) {

    var canvas = this;
    var ctx = $(this)[0].getContext('2d');

    var backgroundColor = props.backgroundColor;
    var aspectRatio = props.aspectRatio;

    var sketch = false;
    var drawing = new Array();

    var width = canvas.width();
    var height = canvas.height();

    var lineColor = 'black';
    var lineSize = 5;

    $(window).resize(function(e) {
        var newWidth = canvas.parent().width();
        var newHeight = newWidth / aspectRatio;

        var xScale = newWidth/width;
        var yScale = newHeight/height;

        for (var i = 0; i < drawing.length; i++) {
            drawing[i].x *= xScale;
            drawing[i].y *= yScale;
        }

        setSize(newWidth, newHeight);

        redraw();
    });

    var startEvent = 'mousedown touchstart';
    canvas.on(startEvent, function(e) {
        if (e.type == 'touchstart') {
            e.preventDefault();
        }

        sketch = true;

        var mouse = getMouseLocation(this, e);

        drawing.push({
            x: mouse.x,
            y: mouse.y,
            type: e.type,
            color: lineColor,
            size: lineSize
        });

        redraw();
    });

    var moveEvent = 'mousemove touchmove';
    canvas.on(moveEvent, function(e) {
        var mouse = getMouseLocation(this, e);

        if (sketch) {
            drawing.push({
                x: mouse.x,
                y: mouse.y,
                type: e.type,
                color: lineColor,
                size: lineSize
            });
            redraw();
        }
    });

    var endEvent = 'mouseup mouseleave touchend';
    canvas.on(endEvent, function(e) {
        sketch = false;
    });

    function init() {
        var width = canvas.parent().width();
        var height = width / aspectRatio;

        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';

        canvas.css('background-color', backgroundColor);

        setSize(width, height);
    }

    function getMouseLocation(element, event) {
        if (event.type.indexOf('touch') !== -1) {
            return {
                x: event.originalEvent.touches[0].pageX - element.offsetLeft,
                y: event.originalEvent.touches[0].pageY - element.offsetTop
            }
        } else {
            return {
                x: event.pageX - element.offsetLeft,
                y: event.pageY - element.offsetTop
            };
        }
    }

    function setSize(w, h) {
        width = w;
        height = h;

        canvas.width(width);
        canvas.height(height);

        canvas[0].setAttribute('width', width);
        canvas[0].setAttribute('height', height);
    }

    function redraw() {
        ctx.beginPath();
        for (var i = 1; i < drawing.length; i++) {

            if (drawing[i].type == 'mousemove' || drawing[i].type == 'touchmove') {
                ctx.moveTo(drawing[i - 1].x, drawing[i - 1].y);
            } else {
                ctx.moveTo(drawing[i].x, drawing[i].y);
            }


            ctx.lineTo(drawing[i].x, drawing[i].y);
            ctx.strokeStyle = drawing[i].color;
            ctx.lineWidth = lineSize
            ctx.stroke()
        }
        ctx.closePath();
    }

    function toJson() {
        return JSON.stringify(drawing);
    }

    this.changeLineColor = function(color) {
        lineColor = color;
    };

    this.changeLineSize = function(size) {
        lineSize = size;
    };

    init();

    return this;
};<commit_msg>Store locations as percentage of canvas for easier scaling<commit_after>$.fn.respondosketch = function(props) {

    var canvas = this;
    var ctx = $(this)[0].getContext('2d');

    var aspectRatio = props.aspectRatio;
    var sketch = false;
    var drawing = new Array();
    var width = canvas.width();
    var height = canvas.height();
    var lineColor = 'black';
    var lineSize = 5;

    // Setup Context
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';

    //
    $(window).resize(function(e) {
        var newWidth = canvas.parent().width();
        var newHeight = newWidth / aspectRatio;

        setSize(newWidth, newHeight);

        redraw();
    });

    var startEvent = 'mousedown touchstart ';
    canvas.on(startEvent, function(e) {
        if (e.type == 'touchstart') {
            e.preventDefault();
        } else {
            e.originalEvent.preventDefault();
        }

        sketch = true;

        var canvas = getCanvasLocation(this, e);

        drawing.push({
            x: canvas.x,
            y: canvas.y,
            type: e.type,
            color: lineColor,
            size: lineSize
        });

        redraw();
    });

    var moveEvent = 'mousemove touchmove ';
    canvas.on(moveEvent, function(e) {
        var canvas = getCanvasLocation(this, e);

        if (sketch) {
            drawing.push({
                x: canvas.x,
                y: canvas.y,
                type: e.type,
                color: lineColor,
                size: lineSize
            });

            redraw();
        }
    });

    var endEvent = 'mouseup mouseleave touchend ';
    canvas.on(endEvent, function(e) {
        sketch = false;
    });

    function init() {

        var color = props.backgroundColor;
        var locked = props.locked;

        if (props.json) {
            drawing = props.json.lines;
            aspectRatio = props.json.aspectRatio;
        }

        if (props.locked) {
            canvas.unbind(startEvent + moveEvent + endEvent);
        } else {
            canvas.css('cursor', 'crosshair');
        }

        var width = canvas.parent().width();
        var height = width / aspectRatio;

        canvas.css('background-color', color);

        setSize(width, height);

        redraw();

    }

    function getCanvasLocation(element, event) {
        if (event.type.indexOf('touch') !== -1) {
            return {
                x: (event.originalEvent.touches[0].pageX - element.offsetLeft) / width,
                y: (event.originalEvent.touches[0].pageY - element.offsetTop) / height
            }
        } else {
            return {
                x: (event.pageX - element.offsetLeft) / width,
                y: (event.pageY - element.offsetTop) / height
            };
        }
    }

    function setSize(w, h) {
        width = w;
        height = h;

        canvas.width(width);
        canvas.height(height);

        canvas[0].setAttribute('width', width);
        canvas[0].setAttribute('height', height);
    }

    function redraw() {
        ctx.beginPath();
        for (var i = 1; i < drawing.length; i++) {

            if (drawing[i].type == 'mousemove' || drawing[i].type == 'touchmove') {
                ctx.moveTo(drawing[i - 1].x * width, drawing[i - 1].y * height);
            } else {
                ctx.moveTo(drawing[i].x * width, drawing[i].y * height);
            }

            ctx.lineTo(drawing[i].x * width, drawing[i].y * height);
            ctx.strokeStyle = drawing[i].color;
            ctx.lineWidth = lineSize
            ctx.stroke()
        }
        ctx.closePath();
    }

    this.json = function() {
        return JSON.stringify({
            aspectRatio: aspectRatio,
            lines: drawing
        });
    };

    this.img = function() {
        var img = canvas[0].toDataURL("image/png");
        return img;
    };

    this.changeLineColor = function(color) {
        lineColor = color;
    };

    this.changeLineSize = function(size) {
        lineSize = size;
    };

    init();

    return this;
};
{'fraction_non_alphanumeric': 0.13260324581079297, 'fraction_numerical': 0.0031666446760786385, 'mean_word_length': 1.6074991400068799, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 3, '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': '5350015', 'n_tokens_mistral': 2271, 'n_tokens_neox': 2183, 'n_words': 470}