I am trying to create a selection system for a tilemap image. The image is added and whenever a user selects a tile and moves the mouse to select multiple tiles the selection container increases in size with increments of the tilesize.

Somehow this is creating a flickering effect when holding down the mouse button and moving it arround. What causes this issue?

var tilesetImageContainer = document.getElementById("tileMapContainer");
var tileSize = 32;
let startSelection = [];
var selectionWidth = 32;
var selectionHeight = 32;
let endSelection = [];

function getCoordinates(e) {
  const { x, y } = e.target.getBoundingClientRect();
  const mouseX = e.clientX - x;
  const mouseY = e.clientY - y;
  return [Math.floor(mouseX / tileSize), Math.floor(mouseY / tileSize)];
}

const mouseDownHandler = function (e) {

if (e.which === 1) {
  e.preventDefault();
  selectedTileMapPositions = [];
  tileMapSelector.style.width = tileSize   "px";
  tileMapSelector.style.height = tileSize   "px";
  tilesetImageContainer.style.cursor = 'crosshair';
  tilesetImageContainer.style.userSelect = 'none';

  startSelection = getCoordinates(e);
  tileMapSelector.style.left = startSelection[0] * tileSize   "px";
  tileMapSelector.style.top = startSelection[1] * tileSize   "px";

  tilesetImageContainer.addEventListener('mousemove', mouseMoveSelectionHandler);
  tilesetImageContainer.addEventListener('mouseup', mouseUpSelectionHandler);
}

};

const mouseMoveSelectionHandler = function (e) {

currentPositionCoordinates = getCoordinates(e);
endSelection = getCoordinates(e);

if (currentPositionCoordinates[0] > startSelection[0] || currentPositionCoordinates[1] < startSelection[1]) {
  // selected more then 1 tile

  selectionWidth = ((currentPositionCoordinates[0] - startSelection[0]) * tileSize);
  selectionHeight = ((currentPositionCoordinates[1] - startSelection[1]) * tileSize);
}


tileMapSelector.style.width = selectionWidth   tileSize   "px";
tileMapSelector.style.height = selectionHeight   tileSize   "px";

console.log("start: "   startSelection);
console.log("current: "   currentPositionCoordinates);
};

const mouseUpSelectionHandler = function (e) {

for (var x = startSelection[0]; x <= endSelection[0]; x  ) {
  for (var y = startSelection[1]; y <= endSelection[1]; y  ) {
    selectedTileMapPositions.push([x,y]);
  }
}


console.log(selectedTileMapPositions);

tilesetImageContainer.removeEventListener('mousemove', mouseMoveSelectionHandler);
tilesetImageContainer.removeEventListener('mouseup', mouseUpSelectionHandler);

tilesetImageContainer.style.cursor = 'default';
tilesetImageContainer.style.removeProperty('user-select');

startSelection = [];
endSelection = [];
};

tilesetImageContainer.addEventListener('mousedown', mouseDownHandler);

Here is a JsFiddle: https://jsfiddle.net/6kv3pj1n/19/

CodePudding user response：

Don't reassign variables if not necessary. Declare currentPositionCoordinates on top fix getCoordinates function dont use x and y

let currentPositionCoordinates

function getCoordinates(e) {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  return [Math.floor(mouseX / tileSize), Math.floor(mouseY / tileSize)];
}

if (currentPositionCoordinates) {
  if (currentPositionCoordinates[0] === getCoordinates(e)[0] && currentPositionCoordinates[1] === getCoordinates(e)[1]) {
  return
  }
}

if (selectionWidth   tileSize   "px" !== tileMapSelector.style.width) {
    tileMapSelector.style.width = selectionWidth   tileSize   "px"
}
if (selectionHeight   tileSize   "px" !== tileMapSelector.style.height) {
    tileMapSelector.style.height = selectionHeight   tileSize   "px"
}

https://jsfiddle.net/2Lx740vg/2/

Latest edit should fully work as you intended