<commit_before>var canvas = document.getElementById('main');
var ctx = canvas.getContext("2d");

var rectangle = {
  color: "#000",
  points: [{x:10,y:10},{x:50,y:10},{x:60,y:100},{x:10,y:100}]
};
var point,x,y,down;
rectangle.color = '#700';
outline(ctx,rectangle);
var shapes = [rectangle];
rectangle = {
  color: "#333",
  points: [{x:10,y:100},{x:50,y:100},{x:60,y:200},{x:10,y:200}]
};
shapes.push(rectangle);
draw();


function clear(ctx){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//draws a solid polygon
function fill(ctx, poly){
  ctx.fillStyle = poly.color;
  ctx.beginPath();
  ctx.moveTo(poly.points[0].x,poly.points[0].y);
  for(var i = 1; i < poly.points.length;i++){
    ctx.lineTo(poly.points[i].x,poly.points[i].y);
  }
  ctx.closePath();
  ctx.fill();
}

//outlines a polygon
function outline(ctx, poly){
  ctx.strokeStyle = "#FF0";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(poly.points[0].x,poly.points[0].y);
  for(var i = 1; i < poly.points.length;i++){
    ctx.lineTo(poly.points[i].x,poly.points[i].y);
  }
  ctx.closePath();
  ctx.stroke();
}

function draw(){
  clear(ctx);
  for(var i = 0;i < shapes.length;i++){
    fill(ctx,shapes[i]);
    if(shapes.selected === i){
      transform(shapes[i],x-point.x,y-point.y);
      outline(ctx,shapes[i]);
    }
  }
}
canvas.onmousedown = function(e){
  down = true;
  point = {y:e.y,x:e.x};
  x = e.x; y = e.y;
  for(var i = 0;i < shapes.length;i++){
    if(pointInside(point,shapes[i].points)){
      shapes.selected = i;
    }
  }
  draw();
};
canvas.onmousemove = function(e){
  if(down){
    x = e.x;
    y = e.y;
    draw();
    point.x = x;
    point.y = y;
  }
};

canvas.onmouseup = function(e){
  down = false;
};

function transform(shape,dx,dy){
  for(var i = 0; i < shape.points.length;i++){
    shape.points[i].x += dx;
    shape.points[i].y += dy;
  }
}
function pointInside(point,shape){
  var intersections = 0,a={m:0,b:point.y},b,tmp;
  shape.push(shape[0]); // make it loop<commit_msg>added a grid (with snap!)<commit_after>var canvas = document.getElementById('main');
var ctx = canvas.getContext("2d");

var rectangle = {
  color: "#000",
  points: [{x:10,y:10},{x:50,y:10},{x:60,y:100},{x:10,y:100}]
};
var point,x,y,down;
var size = 20;
rectangle.color = '#700';
outline(ctx,rectangle);
var shapes = [rectangle];
rectangle = {
  color: "#333",
  points: [{x:10,y:100},{x:50,y:100},{x:60,y:200},{x:10,y:200}]
};
shapes.push(rectangle);
draw();


function clear(ctx){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//draws a solid polygon
function fill(ctx, poly){
  ctx.fillStyle = poly.color;
  ctx.beginPath();
  ctx.moveTo(poly.points[0].x,poly.points[0].y);
  for(var i = 1; i < poly.points.length;i++){
    ctx.lineTo(poly.points[i].x,poly.points[i].y);
  }
  ctx.closePath();
  ctx.fill();
}

//outlines a polygon
function outline(ctx, poly){
  ctx.strokeStyle = "#FF0";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(poly.points[0].x,poly.points[0].y);
  for(var i = 1; i < poly.points.length;i++){
    ctx.lineTo(poly.points[i].x,poly.points[i].y);
  }
  ctx.closePath();
  ctx.stroke();
}

function drawGrid(ctx){
  var horizontal = canvas.height/size, vertical = canvas.width/size;
  ctx.strokeStyle = "#888";
  ctx.lineWidth = 1;
  ctx.beginPath();
  for(var i = 0; i <= horizontal;i++){
    ctx.moveTo(0,i*size);
    ctx.lineTo(canvas.width,i*size);
  }
  for(i = 0; i <= vertical;i++){
    ctx.moveTo(i*size,0);
    ctx.lineTo(i*size,canvas.height);
  }
  ctx.closePath();
  ctx.stroke();
}
function draw(){
  clear(ctx);
  drawGrid(ctx);
  for(var i = 0;i < shapes.length;i++){
    
    if(shapes.selected === i){
      transform(shapes[i],x-point.x,y-point.y);
      fill(ctx,shapes[i]);
      outline(ctx,shapes[i]);
    }else{
      fill(ctx,shapes[i]);
    }
  }
}
canvas.onmousedown = function(e){
  down = true;
  point = {y:e.y,x:e.x};
  x = e.x; y = e.y;
  shapes.selected = -1;
  for(var i = 0;i < shapes.length;i++){
    if(pointInside(point,shapes[i].points)){
      shapes.selected = i;
    }
  }
  draw();
};
canvas.onmousemove = function(e){
  if(down){
    x = e.x;
    y = e.y;
    draw();
    point.x = x;
    point.y = y;
  }
};

canvas.onmouseup = function(e){
  down = false;
  if(shapes.selected !== -1){
    snap(shapes[shapes.selected]);
    draw();
  }
};

function snap(shape){
  var tmp = shape.points[0];
  transform(shape,-(tmp.x+size/2)%size+size/2,-(tmp.y+size/2)%size+size/2);
}
function transform(shape,dx,dy){
  for(var i = 0; i < shape.points.length;i++){
    shape.points[i].x += dx;
    shape.points[i].y += dy;
  }
}
function pointInside(point,shape){
  var intersections = 0,a={m:0,b:point.y},b,tmp;
  shape.push(shape[0]); // make it loop
{'fraction_non_alphanumeric': 0.2198897370653096, 'fraction_numerical': 0.030746395250212045, 'mean_word_length': 3.656465942744324, 'pattern_counts': {'":': 0, '<': 15, '<?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': '2777408', 'n_tokens_mistral': 2032, 'n_tokens_neox': 1945, 'n_words': 324}