Escape from Tarkov grid inventory on canvas

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/7.2.5/konva.min.js"></script>

<div id="container"></div>

<a href="https://jsfiddle.net/vfxloco/zvmt7rky/114/">Escape from tarkov grid inventory</a>

snapToGrid.js

var width = window.innerWidth;
var height = window.innerHeight;
var shadowOffset = 20;
var tween = null;
var blockSnapSize = 30;

var shadowRectangle = new Konva.Rect({
  x: 0,
  y: 0,
  width: blockSnapSize * 6,
  height: blockSnapSize * 3,
  fill: '#00FF00',
  opacity: 0.5
});

function haveIntersection(r1, r2) {
  var condition = (
    (r2.x + 1) > r1.x + r1.width || r2.x + r2.width < (r1.x + 1) ||
    (r2.y + 1) > r1.y + r1.height || r2.y + r2.height < (r1.y + 1)
  );

  return !condition;
}

function newRectangle(x, y, layer, stage) {
  var hasColision = false;
	var lastUpdate = {}
  let rectangle = new Konva.Rect({
    x: x,
    y: y,
    width: blockSnapSize * 6,
    height: blockSnapSize * 3,
    fill: '#fff',
    draggable: true
  });
  rectangle.on('dragstart', (e) => {
  	lastUpdate = {
    	x: rectangle.x(),
      y: rectangle.y()
    }
    shadowRectangle.show();
    shadowRectangle.moveToTop();
    rectangle.moveToTop();
  });
  rectangle.on('dragend', (e) => {
    if (!hasColision) {
      rectangle.position({
        x: shadowRectangle.x(),
        y: shadowRectangle.y()
      });
    } else {
    	rectangle.position({
        x: lastUpdate.x,
        y: lastUpdate.y
      });
    }

    stage.batchDraw();
    shadowRectangle.hide();
  });
  rectangle.on('dragmove', (e) => {
    layer.children.each(function(group) {
      if (group == rectangle || group == shadowRectangle) {
        return;
      }

      if (haveIntersection(group.getClientRect(), shadowRectangle.getClientRect())) {
        shadowRectangle.fill('#FF0000');
        hasColision = true;
      } else {
        shadowRectangle.fill('#00FF00');
        hasColision = false;
      }
    });

    shadowRectangle.position({
      x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
      y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
    });
    stage.batchDraw();
  });
  layer.add(rectangle);
}

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var gridLayer = new Konva.Layer();
var padding = blockSnapSize;

for (var i = 0; i < width / padding; i++) {
  gridLayer.add(new Konva.Line({
    points: [Math.round(i * padding) + 0.5, 0, Math.round(i * padding) + 0.5, height],
    stroke: '#ddd',
    strokeWidth: 1,
  }));
}

gridLayer.add(new Konva.Line({
  points: [0, 0, 10, 10]
}));
for (var j = 0; j < height / padding; j++) {
  gridLayer.add(new Konva.Line({
    points: [0, Math.round(j * padding), width, Math.round(j * padding)],
    stroke: '#ddd',
    strokeWidth: 0.5,
  }));
}

var layer = new Konva.Layer();
shadowRectangle.hide();
layer.add(shadowRectangle);
newRectangle(blockSnapSize * 3, blockSnapSize * 3, layer, stage);
newRectangle(blockSnapSize * 10, blockSnapSize * 3, layer, stage);

stage.add(gridLayer);
stage.add(layer);

withImage.js

let width = window.innerWidth;
let height = window.innerHeight;
let tween = null;
let blockSnapSize = 60;

function haveIntersection(r1, r2) {
  var condition = (
    (r2.x + 1) > r1.x + r1.width || r2.x + r2.width < (r1.x + 1) ||
    (r2.y + 1) > r1.y + r1.height || r2.y + r2.height < (r1.y + 1)
  );

  return !condition;
}

async function newRectangle(x, y, layer, stage, sizeX = 1, sizeY = 1, imgSrc) {
  const imgBlob = await fetch(imgSrc).then(r => r.blob());
  const img = await createImageBitmap(imgBlob);

  let hasColision = false;
  let lastUpdate = {};

  const imgToDraw = new Image();
  imgToDraw.src = imgSrc;
  imgToDraw.onload = () => {
    var rectangle = new Konva.Image({
      image: img,
      x: x,
      y: y,
      width: blockSnapSize * sizeX,
      height: blockSnapSize * sizeY,
      draggable: true
    });

    var shadowRectangle = new Konva.Rect({
      x: 0,
      y: 0,
      width: blockSnapSize * sizeX,
      height: blockSnapSize * sizeY,
      opacity: 0.5
    });
    shadowRectangle.hide();
    layer.add(shadowRectangle);

    rectangle.on('dragstart', (e) => {
      lastUpdate = {
        x: rectangle.x(),
        y: rectangle.y()
      }
      shadowRectangle.show();
      shadowRectangle.moveToTop();
      rectangle.moveToTop();
    });

    rectangle.on('dragend', (e) => {
      if (!hasColision) {
        rectangle.position({
          x: shadowRectangle.x(),
          y: shadowRectangle.y()
        });
      } else {
        rectangle.position({
          x: lastUpdate.x,
          y: lastUpdate.y
        });
      }

      stage.batchDraw();
      shadowRectangle.hide();
    });

    rectangle.on('dragmove', (e) => {
      layer.children.each(function(group) {
        if (group == rectangle || group == shadowRectangle) {
          return;
        }

        if (haveIntersection(group.getClientRect(), shadowRectangle.getClientRect())) {
          shadowRectangle.fill('#FF0000');
          hasColision = true;
        } else {
          shadowRectangle.fill('#00FF00');
          hasColision = false;
        }
      });

      shadowRectangle.position({
        x: Math.round(rectangle.x() / blockSnapSize) * blockSnapSize,
        y: Math.round(rectangle.y() / blockSnapSize) * blockSnapSize
      });
      stage.batchDraw();
    });

    /* if (img) {
      drawImage(rectangle, img)
    } */
    layer.add(rectangle);
  };
}

async function initialize() {
  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height
  });

  var gridLayer = new Konva.Layer();
  var padding = blockSnapSize;

  for (var i = 0; i < width / padding; i++) {
    gridLayer.add(new Konva.Line({
      points: [Math.round(i * padding) + 0.5, 0, Math.round(i * padding) + 0.5, height],
      stroke: '#ddd',
      strokeWidth: 1,
    }));
  }

  gridLayer.add(new Konva.Line({
    points: [0, 0, 10, 10]
  }));
  for (var j = 0; j < height / padding; j++) {
    gridLayer.add(new Konva.Line({
      points: [0, Math.round(j * padding), width, Math.round(j * padding)],
      stroke: '#ddd',
      strokeWidth: 0.5,
    }));
  }

  var layer = new Konva.Layer();
  await newRectangle(blockSnapSize * 1, blockSnapSize * 1, layer, stage, 3, 2, 'https://iili.io/q1bz7t.png');
  await newRectangle(blockSnapSize * 5, blockSnapSize * 1, layer, stage, 3, 2, 'https://iili.io/q1bz7t.png');
  await newRectangle(blockSnapSize * 4, blockSnapSize * 1, layer, stage, 1, 1, 'https://iili.io/q1bIkX.png');
  await newRectangle(blockSnapSize * 1, blockSnapSize * 3, layer, stage, 4, 3, 'https://iili.io/q1bjCx.png');
  stage.add(gridLayer);
  stage.add(layer);
}

initialize();