error with arrays in javascript

Question

To fully understand this note this; `when the page loads it gets the area of the image (width * height) and creates all the x,y positions for all the positions in the area.

This works fine.

When I have another area from pos x,y and with also an area (width * height) should pop the positions from the first list so it can separate the two areas.

Little bug I noticed is I get little lines that are horizontal to the selected area and they don't extend far from that. I believe the reason is instead of making a clean square inside the image every line is offseted by a pixel or two.

Here's a video of the behaviour https://youtu.be/v1b6dEmfxQw

so since there's already an all positions list this code created a clone of the array and removes the positions.

var drop_boxes = $('.drop-box');
var area_grid = [];
var image_width = $('.img-class')[0].naturalWidth;
var image_height = $('.img-class')[0].naturalHeight;

drop_boxes.each(function() {
var position = $(this).position();
var width =  $(this).width();
var height = $(this).height();
var positions_clone = positions.slice(0);
//console.log(positions_clone.length);

var top_offset = parseInt((position['top'] * image_width)/img_width);
var left_offset = parseInt((position['left'] * image_height)/img_height);

position['top'] = top_offset;
position['left'] = left_offset;

var width_offset = parseInt((width * image_width)/img_width);
var height_offset = parseInt((height * image_height)/img_height);

var width_counter = 0;
var height_counter = 0;

var area = width_offset * height_offset;
console.log(position);
console.log(width_offset);
console.log(height_offset);           

if (position['top'] < image_height-1 && position['left'] < image_width) {
    for (counter = 0; counter < area; counter++) {       
        var pos = [parseInt(position['left']+width_counter), parseInt(position['top']+height_counter)];

        var index = positions.findIndex(function(item) {
          // return result of comparing `data` with `item`

          // This simple implementation assumes that all `item`s will be Arrays.
          return pos.length === item.length && item.every(function(n, i) { return n === pos[i] });
        });

        //console.log(pos);

        if (index > -1) {
            positions_clone.splice(index, 1);
        }

        //area_grid.push(pos);

        if (width_counter == width_offset) {
            width_counter = 0;
            height_counter += 1;
        }

        if (counter%100 == 0) {
            var percentage = Math.round((counter/area)*100, 2);
            console.log("Percentage: "+percentage+"%" + "  "+counter);
        }

        width_counter += 1;
    }
    console.log(positions_clone.length);
    console.log(area_grid.length);

    areas[area_counter] = {'area': area_grid, 'positions': positions_clone};
    parent.find('.area').text(area_counter);
    area_counter += 1;
}             

any clues in fixing it will be appreciated. I've showed how it behaves after commenting out certain parts of the code in the video.

Answer 1

Change

var index = positions.findIndex(function(item) {

to

var index = positions_clone.findIndex(function(item) {

Because after each splice, the indices of the original positions doesn't change but you are still using those indices to splice the clone.