Ability to zoom and move the canvas

// Main

onUiLoaded(async () => {

  const hotkeysConfig = {

    resetZoom: "KeyR",

    fitToScreen: "KeyS",

    moveKey: "KeyF",

    overlap: "KeyO",

  };

  let isMoving = false;

  let mouseX, mouseY;

  const elementIDs = {

    sketch: "#img2img_sketch",

    inpaint: "#img2maskimg",

    inpaintSketch: "#inpaint_sketch",

    img2imgTabs: "#mode_img2img .tab-nav",

  };

  async function getElements() {

    const elements = await Promise.all(

      Object.values(elementIDs).map((id) => document.querySelector(id))

    );

    return Object.fromEntries(

      Object.keys(elementIDs).map((key, index) => [key, elements[index]])

    );

  }

  const elements = await getElements();

  function applyZoomAndPan(targetElement, elemId) {

    targetElement.style.transformOrigin = "0 0";

    let [zoomLevel, panX, panY] = [1, 0, 0];

    let fullScreenMode = false;

    // Reset the zoom level and pan position of the target element to their initial values

    function resetZoom() {

      zoomLevel = 1;

      panX = 0;

      panY = 0;

      targetElement.style.transform = `scale(${zoomLevel}) translate(${panX}px, ${panY}px)`;

      const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);

      toggleOverlap("off");

      fullScreenMode = false;

      targetElement.style.width = "";

      if (canvas) {

        targetElement.style.height = canvas.style.height;

      }

    }

    // Toggle the zIndex of the target element between two values, allowing it to overlap or be overlapped by other elements

    function toggleOverlap(forced = "") {

      const zIndex1 = "0";

      const zIndex2 = "998";

      targetElement.style.zIndex =

        targetElement.style.zIndex !== zIndex2 ? zIndex2 : zIndex1;

      if (forced === "off") {

        targetElement.style.zIndex = zIndex1;

      } else if (forced === "on") {

        targetElement.style.zIndex = zIndex2;

      }

    }

    // Adjust the brush size based on the deltaY value from a mouse wheel event

    function adjustBrushSize(

      elemId,

      deltaY,

      withoutValue = false,

      percentage = 5

    ) {

      const input =

        document.querySelector(`${elemId} input[aria-label='Brush radius']`) ||

        document.querySelector(`${elemId} button[aria-label="Use brush"]`);

      if (input) {

        input.click();

        if (!withoutValue) {

          const maxValue = parseFloat(input.getAttribute("max")) || 100;

          const changeAmount = maxValue * (percentage / 100);

          const newValue =

            parseFloat(input.value) +

            (deltaY > 0 ? -changeAmount : changeAmount);

          input.value = Math.min(Math.max(newValue, 0), maxValue);

          input.dispatchEvent(new Event("change"));

        }

      }

    }

    // Reset zoom when uploading a new image

    fileInput = document.querySelector(

      `${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`

    );

    fileInput.addEventListener("click", resetZoom);

    // Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables

    function updateZoom(newZoomLevel, mouseX, mouseY) {

      newZoomLevel = Math.max(0.5, Math.min(newZoomLevel, 15));

      panX += mouseX - (mouseX * newZoomLevel) / zoomLevel;

      panY += mouseY - (mouseY * newZoomLevel) / zoomLevel;

      targetElement.style.transformOrigin = "0 0";

      targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${newZoomLevel})`;

      toggleOverlap("on");

      return newZoomLevel;

    }

    // Change the zoom level based on user interaction

    function changeZoomLevel(operation, e) {

      if (e.shiftKey) {

        e.preventDefault();

        let zoomPosX, zoomPosY;

        let delta = 0.2;

        if (zoomLevel > 7) {

          delta = 0.9;

        } else if (zoomLevel > 2) {

          delta = 0.6;

        }

        zoomPosX = e.clientX;

        zoomPosY = e.clientY;

        fullScreenMode = false;

        zoomLevel = updateZoom(

          zoomLevel + (operation === "+" ? delta : -delta),

          zoomPosX - targetElement.getBoundingClientRect().left,

          zoomPosY - targetElement.getBoundingClientRect().top

        );

      }

    }

    /**

       * This function fits the target element to the screen by calculating

       * the required scale and offsets. It also updates the global variables

       * zoomLevel, panX, and panY to reflect the new state.

       */

    // Fullscreen mode

    function fitToScreen() {

      const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);

      if (!canvas) return;

      if (fullScreenMode) {

        resetZoom();

        fullScreenMode = false;

        return;

      }

      resetZoom();

      // Get element and screen dimensions

      const elementWidth = targetElement.offsetWidth;

      const elementHeight = targetElement.offsetHeight;

      const screenWidth = window.innerWidth;

      const screenHeight = window.innerHeight;

      // Get element's coordinates relative to the page

      const elementRect = targetElement.getBoundingClientRect();

      const elementY = elementRect.y;

      const elementX = elementRect.x;

      // Calculate scale and offsets

      const scaleX = screenWidth / elementWidth;

      const scaleY = screenHeight / elementHeight;

      const scale = Math.min(scaleX, scaleY);

      // Get the current transformOrigin

      const computedStyle = window.getComputedStyle(targetElement);

      const transformOrigin = computedStyle.transformOrigin;

      const [originX, originY] = transformOrigin.split(" ");

      const originXValue = parseFloat(originX);

      const originYValue = parseFloat(originY);

      // Calculate offsets with respect to the transformOrigin

      const offsetX = (screenWidth - elementWidth * scale) / 2 - elementX - originXValue * (1 - scale);

      const offsetY = (screenHeight - elementHeight * scale) / 2 - elementY - originYValue * (1 - scale);

      // Apply scale and offsets to the element

      targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;

      // Update global variables

      zoomLevel = scale;

      panX = offsetX;

      panY = offsetY;

      toggleOverlap("on");

      fullScreenMode = true;

    }

    // Handle keydown events

    function handleKeyDown(event) {

      const hotkeyActions = {

        [hotkeysConfig.resetZoom]: resetZoom,

        [hotkeysConfig.overlap]: toggleOverlap,

        [hotkeysConfig.fitToScreen]: fitToScreen,

        // [hotkeysConfig.moveKey] : moveCanvas,

      };

      const action = hotkeyActions[event.code];

      if (action) {

        event.preventDefault();

        action(event);

      } 

    }

    // Get Mouse position

    function getMousePosition(e) {

      mouseX = e.offsetX;

      mouseY = e.offsetY;

    }

    targetElement.addEventListener("mousemove", getMousePosition);

    // Handle events only inside the targetElement

    let isKeyDownHandlerAttached = false;

    function handleMouseMove() {

      if (!isKeyDownHandlerAttached) {

        document.addEventListener("keydown", handleKeyDown);

        isKeyDownHandlerAttached = true;

      }

    }

    function handleMouseLeave() {

      if (isKeyDownHandlerAttached) {

        document.removeEventListener("keydown", handleKeyDown);

        isKeyDownHandlerAttached = false;

      }

    }

    // Add mouse event handlers

    targetElement.addEventListener("mousemove", handleMouseMove);

    targetElement.addEventListener("mouseleave", handleMouseLeave);

    // Reset zoom when click on another tab

    elements.img2imgTabs.addEventListener("click", resetZoom);

    targetElement.addEventListener("wheel", (e) => {

      // change zoom level

      const operation = e.deltaY > 0 ? "-" : "+";

      changeZoomLevel(operation, e);

      // Handle brush size adjustment with ctrl key pressed

      if (e.ctrlKey || e.metaKey) {

        e.preventDefault();

        // Increase or decrease brush size based on scroll direction

        adjustBrushSize(elemId, e.deltaY);

      }

    });

    /**

       * Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.

       * @param {MouseEvent} e - The mouse event.

       */

    function handleMoveKeyDown(e) {

      if (e.code === hotkeysConfig.moveKey) {

        if(!e.ctrlKey  && !e.metaKey){

          isMoving = true;

        }

      }

    }

    function handleMoveKeyUp(e) {

      if (e.code === hotkeysConfig.moveKey) {

        isMoving = false;

      }

    }

    document.addEventListener("keydown", handleMoveKeyDown);

    document.addEventListener("keyup", handleMoveKeyUp);

    // Detect zoom level and update the pan speed.

    function updatePanPosition(movementX, movementY) {

      let panSpeed = 1.5;

      if (zoomLevel > 8) {

        panSpeed = 2.5;

      }

      panX = panX + movementX * panSpeed;

      panY = panY + movementY * panSpeed;

      targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomLevel})`;

      toggleOverlap("on");

    }

    function handleMoveByKey(e) {

      if (isMoving) {

        updatePanPosition(e.movementX, e.movementY);

        targetElement.style.pointerEvents = "none";

      } else {

        targetElement.style.pointerEvents = "auto";

      }

    }

    document.addEventListener("mousemove", handleMoveByKey);

  }

  applyZoomAndPan(elements.sketch, elementIDs.sketch);

  applyZoomAndPan(elements.inpaint, elementIDs.inpaint);

  applyZoomAndPan(elements.inpaintSketch, elementIDs.inpaintSketch);

});