var height = () => /Android/i.test(navigator.userAgent) ? window.screen.availHeight : window.innerHeight;
var draw = SVG().addTo("#draw").size("100%", height());

var rect = draw.rect(100, 100).attr({ fill: "#f06" }).move(5, 5); // TODO: фігура
var rect1 = draw.rect(100, 100).attr({ fill: "#080" }).move(30, 30); // TODO: фігура

//! #002 Початкові параметри SVG
var svgElement = document.querySelector("#draw svg"); // Отримати елемент SVG
var svgWidth = svgElement.clientWidth; // Ширина SVG у пікселях
var svgHeight = svgElement.clientHeight; // Висота SVG у пікселях
draw.style("cursor", "default");

//! #003 Початкові параметри viewbox
// draw.viewbox(0, 0, svgWidth, svgHeight);
draw.viewbox(draw.viewbox().x, draw.viewbox().y, svgWidth, svgHeight);
var viewBoxWidth = draw.viewbox().width,
  viewBoxHeight = draw.viewbox().height,
  viewBoxX = draw.viewbox().x,
  viewBoxY = draw.viewbox().y;

//! #004 Переміщення мишкою простору SVG/ViewBox
draw.mousedown(function (event) {
  draw.viewbox(draw.viewbox().x, draw.viewbox().y, svgWidth, svgHeight);
  if (event.button === 1) {
    draw.style("cursor", "grabbing");
    var startX = event.clientX;
    var startY = event.clientY;

    draw.mousemove(function (event) {
      var deltaX = event.clientX - startX;
      var deltaY = event.clientY - startY;

      var newX = draw.viewbox().x - deltaX * (viewBoxWidth / svgWidth);
      var newY = draw.viewbox().y - deltaY * (viewBoxHeight / svgHeight);

      draw.viewbox(newX, newY, viewBoxWidth, viewBoxHeight);
      startX = event.clientX;
      startY = event.clientY;
    });

    draw.mouseup(function () {
      draw.style("cursor", "default");
      draw.off("mousemove");
      draw.off("mouseup");
    });
  }
});

draw.on("wheel",function (event) {
  if (event.shiftKey) {
    event.preventDefault();
    var delta = event.deltaY > 0 ? 1.1 : 0.9;
    var mouseX = event.clientX - svgElement.getBoundingClientRect().left;
    var mouseY = event.clientY - svgElement.getBoundingClientRect().top;
    var oldViewBox = draw.viewbox();
    var newWidth = oldViewBox.width * delta;
    var newHeight = oldViewBox.height * delta;
    var mouseXRatio = mouseX / svgWidth;
    var mouseYRatio = mouseY / svgHeight;
    var newViewBoxX = oldViewBox.x - (newWidth - oldViewBox.width) * mouseXRatio;
    var newViewBoxY = oldViewBox.y - (newHeight - oldViewBox.height) * mouseYRatio;
    viewBoxX = newViewBoxX;
    viewBoxY = newViewBoxY;
    draw.viewbox(newViewBoxX, newViewBoxY, newWidth, newHeight);
  }
});