TEMPEST_WASM_Frontend/javascript/zoom.js

// Initialize the zoom level and step
let isDragging = false; // Track whether the user is dragging
let startX, startY; // Starting position for dragging
let currentX, currentY;

let zoomLevel = 1;
const zoomStep = 0.1;
const minZoomLevel = 0.1;
const maxZoomLevel = 3;

// Function to update the zoom and apply it to the SVG element
function updateZoom() {
  const svgElement = document.querySelector("#scrollableOutput svg");
  if (svgElement) {
    svgElement.style.transform = `scale(${zoomLevel})`;

    // Center the SVG element within the parent div
    const scrollableDiv = document.getElementById("scrollableOutput");
    if (scrollableDiv) {
      // Adjust the scroll position to center the SVG element
      scrollableDiv.scrollLeft =
        (svgElement.clientWidth - scrollableDiv.clientWidth) / 2;
      scrollableDiv.scrollTop =
        (svgElement.clientHeight - scrollableDiv.clientHeight) / 2;
    }
  }
}

// Event listener for the zoom in button
document.getElementById("zoomInBtn").addEventListener("click", function () {
  zoomLevel += zoomStep;

  if (zoomLevel > maxZoomLevel) {
    zoomLevel = maxZoomLevel;
  }
  updateZoom();
});

// Event listener for the zoom out button
document.getElementById("zoomOutBtn").addEventListener("click", function () {
  zoomLevel -= zoomStep;

  if (zoomLevel < minZoomLevel) {
    zoomLevel = minZoomLevel;
  }
  updateZoom();
});

function startDragging(event) {
  isDragging = true; // Start dragging
  startX = event.clientX;
  startY = event.clientY;
}

// Event listener for mousemove on the document (applies when dragging)
function dragSVG(event) {
  if (isDragging) {
    // Calculate the movement
    const deltaX = (event.clientX - startX) * 2;
    const deltaY = (event.clientY - startY) * 2;

    // Retrieve the SVG element from the #scrollableOutput div
    const svgElement = document.querySelector("#scrollableOutput svg");
    if (svgElement) {
      // Get the current translation values from the transform attribute
      const transform = svgElement.style.transform || "translate(0, 0)";
      const translateMatch = transform.match(
        /translate\((-?\d+)px, (-?\d+)px\)/
      );
      let translateX = translateMatch ? parseInt(translateMatch[1]) : 0;
      let translateY = translateMatch ? parseInt(translateMatch[2]) : 0;

      translateX += deltaX;
      translateY += deltaY;

      // Update the SVG transform with the new translation
      svgElement.style.transform = `${transform.replace(
        /translate\(-?\d+px, -?\d+px\)/,
        ""
      )} translate(${translateX}px, ${translateY}px)`;

      // Update the starting positions for the next drag
      startX = event.clientX;
      startY = event.clientY;
    }
  }
}
// Function to center the SVG element within the #scrollableOutput div
function centerSVG() {
  const scrollableDiv = document.getElementById("scrollableOutput");
  const svgElement = document.querySelector("#scrollableOutput svg");

  if (svgElement) {
    // Calculate the horizontal and vertical offset to center the SVG
    const divWidth = scrollableDiv.clientWidth;
    const divHeight = scrollableDiv.clientHeight;

    const svgWidth = svgElement.getBBox().width;
    const svgHeight = svgElement.getBBox().height;

    // Calculate the scroll positions to center the SVG
    const scrollX = (svgWidth - divWidth) / 2;
    const scrollY = (svgHeight - divHeight) / 2;

    // Set the scroll positions of the div to center the SVG
    scrollableDiv.scrollLeft = scrollX;
    scrollableDiv.scrollTop = scrollY;
  }
}

document.getElementById("centerSvgButton").addEventListener("click", centerSVG);

// Event listener for mouseup on the document (ends dragging)
function stopDragging() {
  isDragging = false;
}

// Event listeners to handle dragging
document.addEventListener("mousedown", (event) => {
  // Only start dragging if the mousedown event occurs on the SVG element
  const svgElement = document.querySelector("#scrollableOutput svg");
  if (svgElement && svgElement.contains(event.target)) {
    startDragging(event);
  }
});

document.addEventListener("mousemove", dragSVG);
document.addEventListener("mouseup", stopDragging);