Zoom and Pan: move helpers into its namespace to avoid littering global scope

extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js

@@ -1,6 +1,7 @@
-// Helper functions
-// Get active tab
-function getActiveTab(elements, all = false) {
+onUiLoaded(async() => {
+    // Helper functions
+    // Get active tab
+    function getActiveTab(elements, all = false) {
         const tabs = elements.img2imgTabs.querySelectorAll("button");
 
         if (all) return tabs;
@@ -10,10 +11,10 @@ function getActiveTab(elements, all = false) {
                 return tab;
             }
         }
-}
+    }
 
-// Get tab ID
-function getTabId(elements, elementIDs) {
+    // Get tab ID
+    function getTabId(elements, elementIDs) {
         const activeTab = getActiveTab(elements);
         const tabIdLookup = {
             "Sketch": elementIDs.sketch,
@@ -21,10 +22,10 @@ function getTabId(elements, elementIDs) {
             "Inpaint": elementIDs.inpaint
         };
         return tabIdLookup[activeTab.innerText];
-}
+    }
 
-// Wait until opts loaded
-async function waitForOpts() {
+    // Wait until opts loaded
+    async function waitForOpts() {
         return new Promise(resolve => {
             const checkInterval = setInterval(() => {
                 if (window.opts && Object.keys(window.opts).length !== 0) {
@@ -33,17 +34,17 @@ async function waitForOpts() {
                 }
             }, 100);
         });
-}
+    }
 
-// Check is hotkey valid
-function isSingleLetter(value) {
+    // Check is hotkey valid
+    function isSingleLetter(value) {
         return (
             typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)
         );
-}
+    }
 
-// Create hotkeyConfig from opts
-function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
+    // Create hotkeyConfig from opts
+    function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
         const result = {};
         const usedKeys = new Set();
 
@@ -70,17 +71,16 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
         }
 
         return result;
-}
+    }
 
-/**
+    /**
      * The restoreImgRedMask function displays a red mask around an image to indicate the aspect ratio.
      * If the image display property is set to 'none', the mask breaks. To fix this, the function
      * temporarily sets the display property to 'block' and then hides the mask again after 300 milliseconds
      * to avoid breaking the canvas. Additionally, the function adjusts the mask to work correctly on
      * very long images.
      */
-
-function restoreImgRedMask(elements, elementIDs) {
+    function restoreImgRedMask(elements, elementIDs) {
         const mainTabId = getTabId(elements, elementIDs);
 
         if (!mainTabId) return;
@@ -112,10 +112,8 @@ function restoreImgRedMask(elements, elementIDs) {
         setTimeout(() => {
             img.style.display = "none";
         }, 400);
-}
+    }
 
-// Main
-onUiLoaded(async() => {
     const hotkeysConfigOpts = await waitForOpts();
 
     // Default config