From fd1407032bbc67ab57f8bd9f23be25b063574d4a Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Fri, 27 Feb 2026 03:22:40 +0530
Subject: [PATCH 1/7] feat: add zoom slider and trackpad panning

---
 .../Navbar/QuickButton/QuickButton.vue        | 180 ++++++---
 .../Navbar/QuickButton/QuickButtonMobile.vue  | 192 +++++++++-
 src/simulator/src/embedListeners.js           |   9 +-
 src/simulator/src/engine.js                   |   2 +-
 src/simulator/src/listeners.js                | 353 ++++++++++--------
 5 files changed, 503 insertions(+), 233 deletions(-)

diff --git a/src/components/Navbar/QuickButton/QuickButton.vue b/src/components/Navbar/QuickButton/QuickButton.vue
index 51e176f5a..972ac73d7 100644
--- a/src/components/Navbar/QuickButton/QuickButton.vue
+++ b/src/components/Navbar/QuickButton/QuickButton.vue
@@ -70,25 +70,89 @@
                 <i style="color: #ddd" class="fas fa-expand-arrows-alt"></i>
             </button>
         </div>
-        <div class="zoom-slider">
-            <button class="zoom-slider-decrement" @click="decrement">-</button>
-            <input
-                id="customRange1"
-                type="range"
-                class="custom-range"
-                min="0"
-                max="45"
-                step="1"
+        <!-- Zoom slider: 1-100% mapped to internal zoom scale via setZoomFromSlider API -->
+        <div class="zoom-controls">
+            <button class="zoom-button-decrement" @click="decrementZoom" title="Zoom Out">−</button>
+            <input 
+              type="range" 
+              v-model.number="displayZoomPercent"
+              @input="onZoomSliderInput"
+              min="1" 
+              max="100" 
+              step="1"
+              class="zoom-slider"
+              title="Zoom Level"
             />
-            <span id="slider_value"></span>
-            <button class="zoom-slider-increment" @click="increment">+</button>
+            <button class="zoom-button-increment" @click="incrementZoom" title="Zoom In">+</button>
+            <span class="zoom-label">{{ displayZoomPercent }}%</span>
         </div>
     </div>
     <div id="exitView"></div>
 </template>
 
 <script lang="ts" setup>
-import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view, decrement, increment } from './QuickButton';
+import { ref, onMounted } from 'vue'
+import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view } from './QuickButton'
+// @ts-ignore - simulator functions are not typed
+import { setZoomFromSlider, getZoomSliderValue } from '../../../simulator/src/listeners'
+
+const DISPLAY_ZOOM_MIN = 1
+const DISPLAY_ZOOM_MAX = 100
+const DISPLAY_ZOOM_DEFAULT = 50
+const DISPLAY_ZOOM_STEP = 5
+
+const INTERNAL_ZOOM_MIN = 0
+const INTERNAL_ZOOM_MAX = 200
+
+const displayZoomPercent = ref(100)
+
+const clampZoomPercent = (value: number): number => {
+    return Math.max(DISPLAY_ZOOM_MIN, Math.min(DISPLAY_ZOOM_MAX, value))
+}
+
+const convertInternalToDisplayZoom = (internalValue: number): number => {
+    return Math.round((internalValue / INTERNAL_ZOOM_MAX) * 100)
+}
+
+const convertDisplayToInternalZoom = (displayPercent: number): number => {
+    return (displayPercent / 100) * INTERNAL_ZOOM_MAX
+}
+
+const initializeZoomSlider = () => {
+    try {
+        const currentInternalZoom = getZoomSliderValue(INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
+        const currentDisplayZoom = convertInternalToDisplayZoom(currentInternalZoom)
+        displayZoomPercent.value = clampZoomPercent(currentDisplayZoom)
+    } catch (error) {
+        console.warn('Could not initialize zoom slider:', error)
+        displayZoomPercent.value = DISPLAY_ZOOM_DEFAULT
+    }
+}
+
+const updateSimulatorZoom = () => {
+    try {
+        const internalZoomValue = convertDisplayToInternalZoom(displayZoomPercent.value)
+        setZoomFromSlider(internalZoomValue, INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
+    } catch (error) {
+        console.warn('Could not apply zoom:', error)
+    }
+}
+
+const incrementZoom = () => {
+    displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value + DISPLAY_ZOOM_STEP)
+    updateSimulatorZoom()
+}
+
+const decrementZoom = () => {
+    displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value - DISPLAY_ZOOM_STEP)
+    updateSimulatorZoom()
+}
+
+const onZoomSliderInput = () => {
+    updateSimulatorZoom()
+}
+
+onMounted(initializeZoomSlider)
 
 function dragover(): void {
     const quickBtn: HTMLElement | null = document.querySelector('.quick-btn')
@@ -203,58 +267,82 @@ function dragover(): void {
     color: white
 }
 
-.zoom-slider {
+/* Zoom controls with slider (1-100% display) */
+.zoom-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.zoom-button-decrement,
+.zoom-button-increment {
+    background: transparent;
     color: white;
+    border: none;
+    cursor: pointer;
     font-size: 20px;
-    padding-top: 0.2rem;
+    font-weight: bold;
+    padding: 0 6px;
+    line-height: 1;
+    min-width: 24px;
 }
 
-.zoom-slider-decrement {
-    position: relative;
-    padding-right: 4px;
-    bottom: 0.3rem;
+.zoom-button-decrement:hover,
+.zoom-button-increment:hover {
+    opacity: 0.7;
 }
-.zoom-slider-increment {
-    position: relative;
-    padding-left: 4px;
-    bottom: 0.3rem;
+
+.zoom-slider {
+    width: 100px;
+    height: 5px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
 }
 
-.custom-range {
-    width: 80px !important;
+.zoom-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: white;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 0.15s ease-in-out;
 }
-.custom-range::-moz-range-track {
-    height: 1px;
+
+.zoom-slider::-webkit-slider-thumb:hover {
+    background: #ddd;
 }
 
-.custom-range::-moz-range-thumb {
-    width: 10px;
-    height: 10px;
-    background-color: white;
-    border: 0;
+.zoom-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: white;
+    border: none;
     border-radius: 50%;
     cursor: pointer;
-}
-.custom-range:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(75, 86, 99, 0.25);
+    transition: background 0.15s ease-in-out;
 }
 
-input[type='range'] {
-    -webkit-appearance: none;
+.zoom-slider::-moz-range-thumb:hover {
+    background: #ddd;
 }
 
-input[type='range']::-webkit-slider-runnable-track {
-    height: 1px;
+.zoom-label {
+    color: white;
+    font-size: 12px;
+    font-weight: 500;
+    min-width: 40px;
+    text-align: right;
 }
 
-input[type='range']::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 10px;
-    height: 10px;
-    background-color: white;
-    border: 0;
-    border-radius: 50%;
-    cursor: pointer;
+.zoom-button-decrement:hover,
+.zoom-button-increment:hover {
+    opacity: 0.7;
 }
 
 @media (max-width: 991px) {
diff --git a/src/components/Navbar/QuickButton/QuickButtonMobile.vue b/src/components/Navbar/QuickButton/QuickButtonMobile.vue
index 6d9791b18..2c2fa16ef 100644
--- a/src/components/Navbar/QuickButton/QuickButtonMobile.vue
+++ b/src/components/Navbar/QuickButton/QuickButtonMobile.vue
@@ -80,19 +80,22 @@
       <Hamburger2 v-if="simulatorMobileStore.showMobileView" :navbar-data="navbarData" />
     </nav>
     </div>
+    <!-- Zoom slider: 1-100% mapped to internal zoom scale via setZoomFromSlider API -->
     <div class="slider-container">
-      <div class="zoom-slider">
-          <button class="zoom-slider-decrement" @click="decrement">-</button>
-          <input
-              id="customRange1"
-              type="range"
-              class="custom-range"
-              min="0"
-              max="45"
-              step="1"
+      <div class="zoom-controls">
+          <button class="zoom-button-decrement" @click="decrementZoom" title="Zoom Out">−</button>
+          <input 
+            type="range" 
+            v-model.number="displayZoomPercent"
+            @input="onZoomSliderInput"
+            min="1" 
+            max="100" 
+            step="1"
+            class="zoom-slider"
+            title="Zoom Level"
           />
-          <span id="slider_value"></span>
-          <button class="zoom-slider-increment" @click="increment">+</button>
+          <button class="zoom-button-increment" @click="incrementZoom" title="Zoom In">+</button>
+          <span class="zoom-label">{{ displayZoomPercent }}%</span>
       </div>
   </div>
   </div>
@@ -100,12 +103,100 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted } from 'vue'
 import Hamburger2 from '../Hamburger/Hamburger2.vue'
-import navbarData from '#/assets/constants/Navbar/NAVBAR_DATA.json'
-import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
-import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view, decrement, increment } from './QuickButton';
+import navbarData from '../../../assets/constants/Navbar/NAVBAR_DATA.json'
+import { useSimulatorMobileStore } from '../../../store/simulatorMobileStore'
+import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view } from './QuickButton'
+// @ts-ignore - simulator functions are not typed
+import { setZoomFromSlider, getZoomSliderValue } from '../../../simulator/src/listeners'
 
 const simulatorMobileStore = useSimulatorMobileStore()
+
+// Display zoom constants (user-facing percentage values)
+const DISPLAY_ZOOM_MIN = 1
+const DISPLAY_ZOOM_MAX = 100
+const DISPLAY_ZOOM_DEFAULT = 50
+const DISPLAY_ZOOM_STEP = 5
+
+// Internal zoom constants (simulator scale range)
+const INTERNAL_ZOOM_MIN = 0
+const INTERNAL_ZOOM_MAX = 200
+
+// Current zoom level displayed to user (1-100%)
+const displayZoomPercent = ref(DISPLAY_ZOOM_DEFAULT)
+
+/**
+ * Clamp zoom percentage to valid display range
+ */
+const clampZoomPercent = (value: number): number => {
+  return Math.max(DISPLAY_ZOOM_MIN, Math.min(DISPLAY_ZOOM_MAX, value))
+}
+
+/**
+ * Convert internal zoom value (0-200) to display percentage (1-100%)
+ */
+const convertInternalToDisplayZoom = (internalValue: number): number => {
+  return Math.round((internalValue / INTERNAL_ZOOM_MAX) * 100)
+}
+
+/**
+ * Convert display percentage (1-100%) to internal zoom value (0-200)
+ */
+const convertDisplayToInternalZoom = (displayPercent: number): number => {
+  return (displayPercent / 100) * INTERNAL_ZOOM_MAX
+}
+
+/**
+ * Initialize zoom slider with current simulator zoom level
+ */
+const initializeZoomSlider = () => {
+  try {
+    const currentInternalZoom = getZoomSliderValue(INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
+    const currentDisplayZoom = convertInternalToDisplayZoom(currentInternalZoom)
+    displayZoomPercent.value = clampZoomPercent(currentDisplayZoom)
+  } catch (error) {
+    console.warn('Could not initialize zoom slider:', error)
+    displayZoomPercent.value = DISPLAY_ZOOM_DEFAULT
+  }
+}
+
+/**
+ * Update simulator zoom based on current display percentage
+ */
+const updateSimulatorZoom = () => {
+  try {
+    const internalZoomValue = convertDisplayToInternalZoom(displayZoomPercent.value)
+    setZoomFromSlider(internalZoomValue, INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
+  } catch (error) {
+    console.warn('Could not apply zoom:', error)
+  }
+}
+
+/**
+ * Increase zoom level by one step
+ */
+const incrementZoom = () => {
+  displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value + DISPLAY_ZOOM_STEP)
+  updateSimulatorZoom()
+}
+
+/**
+ * Decrease zoom level by one step
+ */
+const decrementZoom = () => {
+  displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value - DISPLAY_ZOOM_STEP)
+  updateSimulatorZoom()
+}
+
+/**
+ * Handle slider input event - updates zoom in real-time as user drags
+ */
+const onZoomSliderInput = () => {
+  updateSimulatorZoom()
+}
+
+onMounted(initializeZoomSlider)
 </script>
 
 <style scoped>
@@ -154,14 +245,79 @@ const simulatorMobileStore = useSimulatorMobileStore()
   color: white;
 }
 
-.zoom-slider {
+/* Zoom controls with slider (1-100% display) */
+.zoom-controls {
   display: flex;
   gap: 1rem;
-  width: 90%;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.zoom-button-decrement,
+.zoom-button-increment {
+  background: transparent;
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-size: 24px;
+  font-weight: bold;
+  padding: 0 8px;
+  line-height: 1;
+  min-width: 32px;
+}
+
+.zoom-button-decrement:hover,
+.zoom-button-increment:hover {
+  opacity: 0.7;
+}
+
+.zoom-slider {
+  width: 120px;
+  height: 6px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+}
+
+.zoom-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: white;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
 }
 
-.custom-range {
-  width: 90% !important;
+.zoom-slider::-webkit-slider-thumb:hover {
+  background: #ddd;
+}
+
+.zoom-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
+}
+
+.zoom-slider::-moz-range-thumb:hover {
+  background: #ddd;
+}
+
+.zoom-label {
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  min-width: 45px;
+  text-align: right;
 }
 
 @media (max-width: 768px) {
diff --git a/src/simulator/src/embedListeners.js b/src/simulator/src/embedListeners.js
index 6f7aceced..b1f958848 100644
--- a/src/simulator/src/embedListeners.js
+++ b/src/simulator/src/embedListeners.js
@@ -174,16 +174,17 @@ export default function startListeners() {
         updateSimulationSet(true);
         updatePositionSet(true);
 
-        // zoom in (+)
+        // Zoom is now on Cmd/Ctrl +/- (primary zoom method)
         if (e.key == 'Meta' || e.key == 'Control') {
             simulationArea.controlDown = true;
         }
-        if (simulationArea.controlDown && (e.keyCode == 187 || e.KeyCode == 171)) {
+        // zoom in: Cmd/Ctrl + '+' or '='
+        if (simulationArea.controlDown && (e.keyCode == 187 || e.KeyCode == 171 || e.key == '+' || e.key == '=')) {
             e.preventDefault();
             ZoomIn();
         }
-        // zoom out (-)
-        if (simulationArea.controlDown && (e.keyCode == 189 || e.Keycode == 173)) {
+        // zoom out: Cmd/Ctrl + '-'
+        if (simulationArea.controlDown && (e.keyCode == 189 || e.Keycode == 173 || e.key == '-' || e.key == '_')) {
             e.preventDefault();
             ZoomOut();
         }
diff --git a/src/simulator/src/engine.js b/src/simulator/src/engine.js
index 5227eb764..b200299ec 100644
--- a/src/simulator/src/engine.js
+++ b/src/simulator/src/engine.js
@@ -322,7 +322,7 @@ export function updateSelectionsAndPane(scope = globalScope) {
         simulationArea.lastSelected === scope.root &&
         simulationArea.mouseDown
     ) {
-        // pane canvas to give an idea of grid moving
+        // Original behavior: pan canvas when dragging on empty space (not selecting objects)
         if (!objectSelection) {
             globalScope.ox =
                 simulationArea.mouseRawX -
diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index 2727668a1..abbf30370 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -28,7 +28,7 @@ import { changeScale, findDimensions } from './canvasApi'
 import { scheduleBackup } from './data/backupCircuit'
 import { hideProperties, deleteSelected, uxvar, exitFullView } from './ux';
 import { updateRestrictedElementsList, updateRestrictedElementsInScope, hideRestricted, showRestricted } from './restrictedElementDiv';
-import { removeMiniMap, updatelastMinimapShown } from './minimap'
+import miniMapArea, { removeMiniMap, updatelastMinimapShown } from './minimap'
 import undo from './data/undo'
 import redo from './data/redo'
 import { copy, paste, selectAll } from './events'
@@ -419,19 +419,20 @@ export default function startListeners() {
                     simulationArea.controlDown = true
                 }
 
-                // zoom in (+)
+                // Keyboard zoom shortcuts (in addition to existing scroll/trackpad zoom)
+                // zoom in: Cmd/Ctrl + '+' or '=' (calls existing ZoomIn function)
                 if (
                     (simulationArea.controlDown &&
-                        (e.keyCode == 187 || e.keyCode == 171)) ||
+                        (e.keyCode == 187 || e.keyCode == 171 || e.key == '+' || e.key == '=')) ||
                     e.keyCode == 107
                 ) {
                     e.preventDefault()
                     ZoomIn()
                 }
-                // zoom out (-)
+                // zoom out: Cmd/Ctrl + '-' or '_' (calls existing ZoomOut function)
                 if (
                     (simulationArea.controlDown &&
-                        (e.keyCode == 189 || e.keyCode == 173)) ||
+                        (e.keyCode == 189 || e.keyCode == 173 || e.key == '-' || e.key == '_')) ||
                     e.keyCode == 109
                 ) {
                     e.preventDefault()
@@ -570,27 +571,98 @@ export default function startListeners() {
         onDoubleClickorTap(e);
     });
 
-    function MouseScroll(event) {
-        updateCanvasSet(true)
-        event.preventDefault()
-        var deltaY = event.wheelDelta ? event.wheelDelta : -event.detail
+    /**
+     * Handle mouse wheel / trackpad scroll events
+     * CHANGED: Now pans the canvas instead of zooming
+     * Zoom is controlled ONLY by:
+     *   - UI buttons/sliders (QuickButton components)
+     *   - Keyboard shortcuts (Cmd/Ctrl +/-)
+     * 
+     * This prevents accidental zoom when scrolling/swiping on trackpad
+     */
+    function handleCanvasPan(event) {
         event.preventDefault()
-        var deltaY = event.wheelDelta ? event.wheelDelta : -event.detail
-        const direction = deltaY > 0 ? 1 : -1
-        handleZoom(direction)
-        updateCanvasSet(true)
+        
+        // Extract scroll delta from various browser event formats
+        const scrollDelta = extractScrollDelta(event)
+        
+        // Apply panning by adjusting viewport origin
+        applyCanvasPan(scrollDelta.x, scrollDelta.y)
+        
+        // Update display and minimap
+        updateAfterPan()
+    }
+    
+    /**
+     * Extract scroll delta from browser wheel event
+     * Handles multiple browser API formats
+     */
+    function extractScrollDelta(event) {
+        let deltaX = 0
+        let deltaY = 0
+        
+        if (event.deltaX !== undefined && event.deltaY !== undefined) {
+            // Modern browsers: event.deltaX, event.deltaY
+            deltaX = event.deltaX
+            deltaY = event.deltaY
+        } else if (event.wheelDeltaX !== undefined && event.wheelDeltaY !== undefined) {
+            // Webkit browsers: wheelDeltaX, wheelDeltaY (inverted sign)
+            deltaX = -event.wheelDeltaX
+            deltaY = -event.wheelDeltaY
+        } else if (event.wheelDelta !== undefined) {
+            // Legacy browsers: wheelDelta (vertical only, inverted sign)
+            deltaY = -event.wheelDelta
+        } else if (event.detail !== undefined) {
+            // Firefox legacy API: detail (vertical only)
+            deltaY = event.detail * 40 // Scale to approximate pixels
+        }
+        
+        return { x: deltaX, y: deltaY }
+    }
+    
+    /**
+     * Apply panning to the canvas viewport
+     * @param {number} deltaX - Horizontal pan delta
+     * @param {number} deltaY - Vertical pan delta
+     */
+    function applyCanvasPan(deltaX, deltaY) {
+        // Pan the canvas by adjusting origin
+        // Invert delta: positive scroll should move content down/right
+        globalScope.ox -= deltaX
+        globalScope.oy -= deltaY
+        
+        // Round to avoid subpixel rendering issues
+        globalScope.ox = Math.round(globalScope.ox)
+        globalScope.oy = Math.round(globalScope.oy)
+    }
+    
+    /**
+     * Update canvas and minimap after panning
+     */
+    function updateAfterPan() {
         gridUpdateSet(true)
-
-        if (layoutModeGet()) layoutUpdate()
-        else update() // Schedule update not working, this is INEFFICIENT
+        updateCanvasSet(true)
+        scheduleUpdate()
+        
+        // Show minimap temporarily (if enabled)
+        if (!embed && !lightMode) {
+            miniMapArea.setup()
+            const miniMapElement = document.querySelector('#miniMap')
+            if (miniMapElement) {
+                miniMapElement.style.display = 'block'
+                updatelastMinimapShown()
+                setTimeout(removeMiniMap, 2000)
+            }
+        }
     }
 
+    // Register wheel/trackpad event listeners for canvas panning
     document
         .getElementById('simulationArea')
-        .addEventListener('mousewheel', MouseScroll)
+        .addEventListener('mousewheel', handleCanvasPan)
     document
         .getElementById('simulationArea')
-        .addEventListener('DOMMouseScroll', MouseScroll)
+        .addEventListener('DOMMouseScroll', handleCanvasPan)
 
     document.addEventListener('cut', (e) => {
         if (verilogModeGet()) return
@@ -706,7 +778,8 @@ export default function startListeners() {
         })
     })
 
-    zoomSliderListeners()
+    // zoomSliderListeners() disabled - slider removed to prevent accidental zoom from swipes/scroll
+    // Zoom is now controlled by +/- buttons only (which call ZoomIn/ZoomOut directly)
     if (!embed) {
         setupTimingListeners()
     }
@@ -724,156 +797,108 @@ function resizeTabs() {
 window.addEventListener('resize', resizeTabs)
 resizeTabs()
 
-// direction is only 1 or -1
-function handleZoom(direction) {
-    if (globalScope.scale > 0.5 * DPR) {
-        changeScale(direction * 0.1 * DPR);
-    } else if (globalScope.scale < 4 * DPR) {
-        changeScale(direction * 0.1 * DPR);
+/**
+ * Apply zoom change in the specified direction
+ * @param {number} direction - Direction and magnitude of zoom change (1 = zoom in, -1 = zoom out)
+ */
+function applyZoomChange(direction) {
+    const zoomDelta = direction * 0.1 * DPR
+    const newScale = globalScope.scale + zoomDelta
+    
+    // Ensure scale stays within valid bounds
+    if (newScale >= 0.5 * DPR && newScale <= 4 * DPR) {
+        changeScale(zoomDelta)
+        gridUpdateSet(true)
+        scheduleUpdate()
     }
-    gridUpdateSet(true);
-    scheduleUpdate();
 }
+
+/**
+ * Zoom in - increases the canvas scale
+ * Can be called from keyboard shortcuts or UI buttons
+ */
 export function ZoomIn() {
-    handleZoom(1);
+    applyZoomChange(1)
 }
+
+/**
+ * Zoom out - decreases the canvas scale
+ * Can be called from keyboard shortcuts or UI buttons
+ */
 export function ZoomOut() {
-    handleZoom(-1);
-}
-function zoomSliderListeners() {
-    document.getElementById("customRange1").value = 5;
-    document.getElementById('simulationArea').addEventListener('DOMMouseScroll', zoomSliderScroll);
-    document.getElementById('simulationArea').addEventListener('mousewheel', zoomSliderScroll);
-    let curLevel = document.getElementById("customRange1").value;
-    $(document).on('input change', '#customRange1', function (e) {
-        const newValue = $(this).val();
-        const changeInScale = newValue - curLevel;
-        updateCanvasSet(true);
-        changeScale(changeInScale * 0.1, 'zoomButton', 'zoomButton', 3)
-        gridUpdateSet(true);
-        curLevel = newValue;
-    });
-    function zoomSliderScroll(e) {
-        let zoomLevel = document.getElementById("customRange1").value;
-        const deltaY = e.wheelDelta ? e.wheelDelta : -e.detail;
-        const directionY = deltaY > 0 ? 1 : -1;
-        if (directionY > 0) zoomLevel++
-        else zoomLevel--
-        if (zoomLevel >= 45) {
-            zoomLevel = 45;
-            document.getElementById("customRange1").value = 45;
-        } else if (zoomLevel <= 0) {
-            zoomLevel = 0;
-            document.getElementById("customRange1").value = 0;
-        } else {
-            document.getElementById("customRange1").value = zoomLevel;
-            curLevel = zoomLevel;
-        }
-    }
-    function sliderZoomButton(direction) {
-        const zoomSlider = $('#customRange1');
-        let currentSliderValue = parseInt(zoomSlider.val(), 10);
-        if (direction === -1) {
-            currentSliderValue--;
-        } else {
-            currentSliderValue++;
-        }
-        zoomSlider.val(currentSliderValue).change();
-    }
-    $('#decrement').click(() => {
-        sliderZoomButton(-1);
-    });
-    $('#increment').click(() => {
-        sliderZoomButton(1);
-    });
+    applyZoomChange(-1)
 }
 
-// Desktop App Listeners
-
-listen('new-project', () => {
-    logixFunction.newProject();
-});
-
-listen('save-online', () => {
-    logixFunction.save();
-});
-
-listen('save-offline', () => {
-    logixFunction.saveOffline();
-});
-
-listen('open-offline', () => {
-    logixFunction.createOpenLocalPrompt();
-});
-
-listen('export', () => {
-    logixFunction.ExportProject();
-});
-
-listen('import', () => {
-    logixFunction.ImportProject();
-});
-
-listen('recover', () => {
-    logixFunction.recoverProject();
-});
-
-listen('clear', () => {
-    logixFunction.clearProject();
-});
-
-listen('preview-circuit', () => {
-    logixFunction.fullViewOption();
-});
-
-listen('new-circuit', () => {
-    logixFunction.createNewCircuitScope();
-});
-
-listen('new-verilog-module', () => {
-    logixFunction.newVerilogModule();
-});
-
-listen('insert-sub-circuit', () => {
-    logixFunction.createSubCircuitPrompt();
-});
-
-listen('combinational-analysis', () => {
-    logixFunction.createCombinationalAnalysisPrompt();
-});
-
-listen('hex-bin-dec', () => {
-    logixFunction.bitconverter();
-});
-
-listen('download-image', () => {
-    logixFunction.createSaveAsImgPrompt();
-});
-
-listen('themes', () => {
-    logixFunction.colorThemes();
-});
-
-listen('custom-shortcut', () => {
-    logixFunction.customShortcut();
-});
-
-listen('export-verilog', () => {
-    logixFunction.generateVerilog();
-});
-
-listen('tutorial', () => {
-    logixFunction.showTourGuide();
-});
-
-listen('user-manual', () => {
-    logixFunction.showUserManual();
-});
-
-listen('learn-digital-circuit', () => {
-    logixFunction.showDigitalCircuit();
-});
+/**
+ * Set zoom level from a slider value
+ * Converts a slider value (typically 0-200) to the internal zoom scale (0.5-4.0 * DPR)
+ * and applies it centered on the viewport.
+ * 
+ * @param {number} sliderValue - The value from a zoom slider
+ * @param {number} minSliderValue - Minimum slider value (default: 0)
+ * @param {number} maxSliderValue - Maximum slider value (default: 10)
+ * @param {number} minZoom - Minimum zoom scale (default: 0.5 * DPR)
+ * @param {number} maxZoom - Maximum zoom scale (default: 4 * DPR)
+ * 
+ * Example: setZoomFromSlider(100, 0, 200) // Sets zoom to middle of range
+ */
+export function setZoomFromSlider(
+    sliderValue,
+    minSliderValue = 0,
+    maxSliderValue = 10,
+    minZoom = 0.5 * DPR,
+    maxZoom = 4 * DPR
+) {
+    // Normalize slider value to 0-1 range
+    const normalizedValue = (sliderValue - minSliderValue) / (maxSliderValue - minSliderValue)
+    
+    // Map to zoom scale range
+    const targetScale = minZoom + normalizedValue * (maxZoom - minZoom)
+    
+    // Clamp to valid zoom range
+    const clampedScale = Math.max(minZoom, Math.min(maxZoom, targetScale))
+    
+    // Calculate delta from current scale
+    const scaleDelta = clampedScale - globalScope.scale
+    
+    // Apply zoom centered on viewport (method = 3)
+    changeScale(scaleDelta, 'zoomButton', 'zoomButton', 3)
+    
+    // Update display
+    gridUpdateSet(true)
+    updateCanvasSet(true)
+    scheduleUpdate()
+}
 
-listen('discussion-forum', () => {
-    logixFunction.showDiscussionForum();
-});
+/**
+ * Get the current zoom level as a slider value
+ * Inverse of setZoomFromSlider - converts internal scale to slider value
+ * Useful for initializing or syncing a zoom slider UI
+ * 
+ * @param {number} minSliderValue - Minimum slider value (default: 0)
+ * @param {number} maxSliderValue - Maximum slider value (default: 10)
+ * @param {number} minZoom - Minimum zoom scale (default: 0.5 * DPR)
+ * @param {number} maxZoom - Maximum zoom scale (default: 4 * DPR)
+ * @returns {number} The slider value corresponding to current zoom level
+ * 
+ * Example: const sliderValue = getZoomSliderValue(0, 200) // Returns 0-200
+ */
+export function getZoomSliderValue(
+    minSliderValue = 0,
+    maxSliderValue = 10,
+    minZoom = 0.5 * DPR,
+    maxZoom = 4 * DPR
+) {
+    const currentScale = globalScope.scale
+    
+    // Clamp current scale to valid range
+    const clampedScale = Math.max(minZoom, Math.min(maxZoom, currentScale))
+    
+    // Normalize scale to 0-1 range
+    const normalizedScale = (clampedScale - minZoom) / (maxZoom - minZoom)
+    
+    // Map to slider value range
+    const sliderValue = minSliderValue + normalizedScale * (maxSliderValue - minSliderValue)
+    
+    return sliderValue
+}

From 65229407b1a5bd9a8aaef751df1ba1b954e96fd9 Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Sun, 1 Mar 2026 16:41:07 +0530
Subject: [PATCH 2/7] refactor: replace zoom slider with +/- buttons in
 QuickButton components

---
 .../Navbar/QuickButton/QuickButton.vue        |  85 +-------------
 .../Navbar/QuickButton/QuickButtonMobile.vue  | 107 +-----------------
 src/simulator/src/embedListeners.js           |  10 +-
 src/simulator/src/listeners.js                |  16 ++-
 4 files changed, 24 insertions(+), 194 deletions(-)

diff --git a/src/components/Navbar/QuickButton/QuickButton.vue b/src/components/Navbar/QuickButton/QuickButton.vue
index 972ac73d7..a7e62ff40 100644
--- a/src/components/Navbar/QuickButton/QuickButton.vue
+++ b/src/components/Navbar/QuickButton/QuickButton.vue
@@ -70,89 +70,17 @@
                 <i style="color: #ddd" class="fas fa-expand-arrows-alt"></i>
             </button>
         </div>
-        <!-- Zoom slider: 1-100% mapped to internal zoom scale via setZoomFromSlider API -->
+        <!-- Zoom controls: +/- buttons -->
         <div class="zoom-controls">
-            <button class="zoom-button-decrement" @click="decrementZoom" title="Zoom Out">−</button>
-            <input 
-              type="range" 
-              v-model.number="displayZoomPercent"
-              @input="onZoomSliderInput"
-              min="1" 
-              max="100" 
-              step="1"
-              class="zoom-slider"
-              title="Zoom Level"
-            />
-            <button class="zoom-button-increment" @click="incrementZoom" title="Zoom In">+</button>
-            <span class="zoom-label">{{ displayZoomPercent }}%</span>
+            <button class="zoom-button-decrement" @click="decrement" title="Zoom Out">−</button>
+            <button class="zoom-button-increment" @click="increment" title="Zoom In">+</button>
         </div>
     </div>
     <div id="exitView"></div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
-import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view } from './QuickButton'
-// @ts-ignore - simulator functions are not typed
-import { setZoomFromSlider, getZoomSliderValue } from '../../../simulator/src/listeners'
-
-const DISPLAY_ZOOM_MIN = 1
-const DISPLAY_ZOOM_MAX = 100
-const DISPLAY_ZOOM_DEFAULT = 50
-const DISPLAY_ZOOM_STEP = 5
-
-const INTERNAL_ZOOM_MIN = 0
-const INTERNAL_ZOOM_MAX = 200
-
-const displayZoomPercent = ref(100)
-
-const clampZoomPercent = (value: number): number => {
-    return Math.max(DISPLAY_ZOOM_MIN, Math.min(DISPLAY_ZOOM_MAX, value))
-}
-
-const convertInternalToDisplayZoom = (internalValue: number): number => {
-    return Math.round((internalValue / INTERNAL_ZOOM_MAX) * 100)
-}
-
-const convertDisplayToInternalZoom = (displayPercent: number): number => {
-    return (displayPercent / 100) * INTERNAL_ZOOM_MAX
-}
-
-const initializeZoomSlider = () => {
-    try {
-        const currentInternalZoom = getZoomSliderValue(INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
-        const currentDisplayZoom = convertInternalToDisplayZoom(currentInternalZoom)
-        displayZoomPercent.value = clampZoomPercent(currentDisplayZoom)
-    } catch (error) {
-        console.warn('Could not initialize zoom slider:', error)
-        displayZoomPercent.value = DISPLAY_ZOOM_DEFAULT
-    }
-}
-
-const updateSimulatorZoom = () => {
-    try {
-        const internalZoomValue = convertDisplayToInternalZoom(displayZoomPercent.value)
-        setZoomFromSlider(internalZoomValue, INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
-    } catch (error) {
-        console.warn('Could not apply zoom:', error)
-    }
-}
-
-const incrementZoom = () => {
-    displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value + DISPLAY_ZOOM_STEP)
-    updateSimulatorZoom()
-}
-
-const decrementZoom = () => {
-    displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value - DISPLAY_ZOOM_STEP)
-    updateSimulatorZoom()
-}
-
-const onZoomSliderInput = () => {
-    updateSimulatorZoom()
-}
-
-onMounted(initializeZoomSlider)
+import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view, increment, decrement } from './QuickButton'
 
 function dragover(): void {
     const quickBtn: HTMLElement | null = document.querySelector('.quick-btn')
@@ -340,11 +268,6 @@ function dragover(): void {
     text-align: right;
 }
 
-.zoom-button-decrement:hover,
-.zoom-button-increment:hover {
-    opacity: 0.7;
-}
-
 @media (max-width: 991px) {
     .quick-btn-save-online {
         background: url(../../../styles/css/assets/shorcuts/save-online.svg) center/cover;
diff --git a/src/components/Navbar/QuickButton/QuickButtonMobile.vue b/src/components/Navbar/QuickButton/QuickButtonMobile.vue
index 2c2fa16ef..537d64472 100644
--- a/src/components/Navbar/QuickButton/QuickButtonMobile.vue
+++ b/src/components/Navbar/QuickButton/QuickButtonMobile.vue
@@ -80,22 +80,11 @@
       <Hamburger2 v-if="simulatorMobileStore.showMobileView" :navbar-data="navbarData" />
     </nav>
     </div>
-    <!-- Zoom slider: 1-100% mapped to internal zoom scale via setZoomFromSlider API -->
+    <!-- Zoom controls: +/- buttons -->
     <div class="slider-container">
       <div class="zoom-controls">
-          <button class="zoom-button-decrement" @click="decrementZoom" title="Zoom Out">−</button>
-          <input 
-            type="range" 
-            v-model.number="displayZoomPercent"
-            @input="onZoomSliderInput"
-            min="1" 
-            max="100" 
-            step="1"
-            class="zoom-slider"
-            title="Zoom Level"
-          />
-          <button class="zoom-button-increment" @click="incrementZoom" title="Zoom In">+</button>
-          <span class="zoom-label">{{ displayZoomPercent }}%</span>
+          <button class="zoom-button-decrement" @click="decrement" title="Zoom Out">−</button>
+          <button class="zoom-button-increment" @click="increment" title="Zoom In">+</button>
       </div>
   </div>
   </div>
@@ -103,100 +92,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
 import Hamburger2 from '../Hamburger/Hamburger2.vue'
 import navbarData from '../../../assets/constants/Navbar/NAVBAR_DATA.json'
 import { useSimulatorMobileStore } from '../../../store/simulatorMobileStore'
-import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view } from './QuickButton'
-// @ts-ignore - simulator functions are not typed
-import { setZoomFromSlider, getZoomSliderValue } from '../../../simulator/src/listeners'
+import { saveOnline, saveOffline, deleteSelectedItem, createSaveAsImgPrompt, zoomToFit, undoit, redoit, view, increment, decrement } from './QuickButton'
 
 const simulatorMobileStore = useSimulatorMobileStore()
-
-// Display zoom constants (user-facing percentage values)
-const DISPLAY_ZOOM_MIN = 1
-const DISPLAY_ZOOM_MAX = 100
-const DISPLAY_ZOOM_DEFAULT = 50
-const DISPLAY_ZOOM_STEP = 5
-
-// Internal zoom constants (simulator scale range)
-const INTERNAL_ZOOM_MIN = 0
-const INTERNAL_ZOOM_MAX = 200
-
-// Current zoom level displayed to user (1-100%)
-const displayZoomPercent = ref(DISPLAY_ZOOM_DEFAULT)
-
-/**
- * Clamp zoom percentage to valid display range
- */
-const clampZoomPercent = (value: number): number => {
-  return Math.max(DISPLAY_ZOOM_MIN, Math.min(DISPLAY_ZOOM_MAX, value))
-}
-
-/**
- * Convert internal zoom value (0-200) to display percentage (1-100%)
- */
-const convertInternalToDisplayZoom = (internalValue: number): number => {
-  return Math.round((internalValue / INTERNAL_ZOOM_MAX) * 100)
-}
-
-/**
- * Convert display percentage (1-100%) to internal zoom value (0-200)
- */
-const convertDisplayToInternalZoom = (displayPercent: number): number => {
-  return (displayPercent / 100) * INTERNAL_ZOOM_MAX
-}
-
-/**
- * Initialize zoom slider with current simulator zoom level
- */
-const initializeZoomSlider = () => {
-  try {
-    const currentInternalZoom = getZoomSliderValue(INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
-    const currentDisplayZoom = convertInternalToDisplayZoom(currentInternalZoom)
-    displayZoomPercent.value = clampZoomPercent(currentDisplayZoom)
-  } catch (error) {
-    console.warn('Could not initialize zoom slider:', error)
-    displayZoomPercent.value = DISPLAY_ZOOM_DEFAULT
-  }
-}
-
-/**
- * Update simulator zoom based on current display percentage
- */
-const updateSimulatorZoom = () => {
-  try {
-    const internalZoomValue = convertDisplayToInternalZoom(displayZoomPercent.value)
-    setZoomFromSlider(internalZoomValue, INTERNAL_ZOOM_MIN, INTERNAL_ZOOM_MAX)
-  } catch (error) {
-    console.warn('Could not apply zoom:', error)
-  }
-}
-
-/**
- * Increase zoom level by one step
- */
-const incrementZoom = () => {
-  displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value + DISPLAY_ZOOM_STEP)
-  updateSimulatorZoom()
-}
-
-/**
- * Decrease zoom level by one step
- */
-const decrementZoom = () => {
-  displayZoomPercent.value = clampZoomPercent(displayZoomPercent.value - DISPLAY_ZOOM_STEP)
-  updateSimulatorZoom()
-}
-
-/**
- * Handle slider input event - updates zoom in real-time as user drags
- */
-const onZoomSliderInput = () => {
-  updateSimulatorZoom()
-}
-
-onMounted(initializeZoomSlider)
 </script>
 
 <style scoped>
diff --git a/src/simulator/src/embedListeners.js b/src/simulator/src/embedListeners.js
index b1f958848..aee6ac008 100644
--- a/src/simulator/src/embedListeners.js
+++ b/src/simulator/src/embedListeners.js
@@ -178,13 +178,15 @@ export default function startListeners() {
         if (e.key == 'Meta' || e.key == 'Control') {
             simulationArea.controlDown = true;
         }
-        // zoom in: Cmd/Ctrl + '+' or '='
-        if (simulationArea.controlDown && (e.keyCode == 187 || e.KeyCode == 171 || e.key == '+' || e.key == '=')) {
+        // Zoom in: Cmd/Ctrl + '+' or Cmd/Ctrl + '='
+        // (On US keyboards, '+' is Shift+'=', so we accept both to handle with/without Shift)
+        if (simulationArea.controlDown && (e.keyCode == 187 || e.keyCode == 171 || e.key == '+' || e.key == '=')) {
             e.preventDefault();
             ZoomIn();
         }
-        // zoom out: Cmd/Ctrl + '-'
-        if (simulationArea.controlDown && (e.keyCode == 189 || e.Keycode == 173 || e.key == '-' || e.key == '_')) {
+        // Zoom out: Cmd/Ctrl + '-'
+        // (Only '-', not '_', since '_' requires Shift and could cause confusion)
+        if (simulationArea.controlDown && (e.keyCode == 189 || e.keyCode == 173 || e.key == '-')) {
             e.preventDefault();
             ZoomOut();
         }
diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index abbf30370..f4fb037f3 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -419,8 +419,10 @@ export default function startListeners() {
                     simulationArea.controlDown = true
                 }
 
-                // Keyboard zoom shortcuts (in addition to existing scroll/trackpad zoom)
-                // zoom in: Cmd/Ctrl + '+' or '=' (calls existing ZoomIn function)
+                // Keyboard zoom shortcuts
+                // Zoom in: Cmd/Ctrl + '+' or Cmd/Ctrl + '='
+                // (On US keyboards, '+' is Shift+'=', so we accept both to handle with/without Shift)
+                // Also accepts keyCode 107 for numpad '+'
                 if (
                     (simulationArea.controlDown &&
                         (e.keyCode == 187 || e.keyCode == 171 || e.key == '+' || e.key == '=')) ||
@@ -429,10 +431,12 @@ export default function startListeners() {
                     e.preventDefault()
                     ZoomIn()
                 }
-                // zoom out: Cmd/Ctrl + '-' or '_' (calls existing ZoomOut function)
+                // Zoom out: Cmd/Ctrl + '-'
+                // (Only '-', not '_', since '_' requires Shift and could cause confusion)
+                // Also accepts keyCode 109 for numpad '-'
                 if (
                     (simulationArea.controlDown &&
-                        (e.keyCode == 189 || e.keyCode == 173 || e.key == '-' || e.key == '_')) ||
+                        (e.keyCode == 189 || e.keyCode == 173 || e.key == '-')) ||
                     e.keyCode == 109
                 ) {
                     e.preventDefault()
@@ -778,8 +782,8 @@ export default function startListeners() {
         })
     })
 
-    // zoomSliderListeners() disabled - slider removed to prevent accidental zoom from swipes/scroll
-    // Zoom is now controlled by +/- buttons only (which call ZoomIn/ZoomOut directly)
+    // zoomSliderListeners() (jQuery-based) disabled here - zoom slider handling has moved to Vue
+    // Vue components (QuickButton.vue / QuickButtonMobile.vue) now manage the zoom slider and +/- buttons
     if (!embed) {
         setupTimingListeners()
     }

From 4ef87f01497d2550212cd72c98fa7ba0a398f173 Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Sun, 1 Mar 2026 17:29:47 +0530
Subject: [PATCH 3/7] fix: improve canvas pan/zoom robustness and event
 handling

---
 src/simulator/src/listeners.js | 46 ++++++++++++++++++----------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index f4fb037f3..a3efd2db1 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -420,20 +420,18 @@ export default function startListeners() {
                 }
 
                 // Keyboard zoom shortcuts
-                // Zoom in: Cmd/Ctrl + '+' or Cmd/Ctrl + '='
-                // (On US keyboards, '+' is Shift+'=', so we accept both to handle with/without Shift)
-                // Also accepts keyCode 107 for numpad '+'
+                // Zoom in: Cmd/Ctrl + '+' or numpad '+'
+                // (On US keyboards, '+' is Shift+'='; we only check for '+' to avoid
+                //  triggering on plain '=' which would require Cmd/Ctrl+Shift+= instead)
                 if (
                     (simulationArea.controlDown &&
-                        (e.keyCode == 187 || e.keyCode == 171 || e.key == '+' || e.key == '=')) ||
+                        (e.keyCode == 187 || e.keyCode == 171 || e.key == '+')) ||
                     e.keyCode == 107
                 ) {
                     e.preventDefault()
                     ZoomIn()
                 }
-                // Zoom out: Cmd/Ctrl + '-'
-                // (Only '-', not '_', since '_' requires Shift and could cause confusion)
-                // Also accepts keyCode 109 for numpad '-'
+                // Zoom out: Cmd/Ctrl + '-' or numpad '-'
                 if (
                     (simulationArea.controlDown &&
                         (e.keyCode == 189 || e.keyCode == 173 || e.key == '-')) ||
@@ -631,9 +629,9 @@ export default function startListeners() {
      */
     function applyCanvasPan(deltaX, deltaY) {
         // Pan the canvas by adjusting origin
-        // Invert delta: positive scroll should move content down/right
-        globalScope.ox -= deltaX
-        globalScope.oy -= deltaY
+        // Positive scroll moves content down/right
+        globalScope.ox += deltaX
+        globalScope.oy += deltaY
         
         // Round to avoid subpixel rendering issues
         globalScope.ox = Math.round(globalScope.ox)
@@ -661,12 +659,10 @@ export default function startListeners() {
     }
 
     // Register wheel/trackpad event listeners for canvas panning
-    document
-        .getElementById('simulationArea')
-        .addEventListener('mousewheel', handleCanvasPan)
-    document
-        .getElementById('simulationArea')
-        .addEventListener('DOMMouseScroll', handleCanvasPan)
+    const simulationAreaElement = document.getElementById('simulationArea')
+    simulationAreaElement.addEventListener('wheel', handleCanvasPan, { passive: false })
+    simulationAreaElement.addEventListener('mousewheel', handleCanvasPan, { passive: false })
+    simulationAreaElement.addEventListener('DOMMouseScroll', handleCanvasPan, { passive: false })
 
     document.addEventListener('cut', (e) => {
         if (verilogModeGet()) return
@@ -807,11 +803,13 @@ resizeTabs()
  */
 function applyZoomChange(direction) {
     const zoomDelta = direction * 0.1 * DPR
-    const newScale = globalScope.scale + zoomDelta
-    
-    // Ensure scale stays within valid bounds
-    if (newScale >= 0.5 * DPR && newScale <= 4 * DPR) {
-        changeScale(zoomDelta)
+    const targetScale = Math.max(
+        0.5 * DPR,
+        Math.min(4 * DPR, globalScope.scale + zoomDelta)
+    )
+
+    if (targetScale !== globalScope.scale) {
+        changeScale(targetScale - globalScope.scale)
         gridUpdateSet(true)
         scheduleUpdate()
     }
@@ -853,6 +851,8 @@ export function setZoomFromSlider(
     minZoom = 0.5 * DPR,
     maxZoom = 4 * DPR
 ) {
+    if (maxSliderValue === minSliderValue || maxZoom === minZoom) return
+
     // Normalize slider value to 0-1 range
     const normalizedValue = (sliderValue - minSliderValue) / (maxSliderValue - minSliderValue)
     
@@ -893,6 +893,10 @@ export function getZoomSliderValue(
     minZoom = 0.5 * DPR,
     maxZoom = 4 * DPR
 ) {
+    if (maxSliderValue === minSliderValue || maxZoom === minZoom) {
+        return minSliderValue
+    }
+
     const currentScale = globalScope.scale
     
     // Clamp current scale to valid range

From 548784d2471a129806d2963c26aec21df4efc6b2 Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Sun, 1 Mar 2026 23:05:46 +0530
Subject: [PATCH 4/7] fix: normalize zoom delta calculations, validate slider
 inputs, and improve pan/zoom robustness

---
 src/simulator/src/listeners.js | 70 +++++++++++++++++++++++++---------
 1 file changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index a3efd2db1..b5a118bdc 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -605,8 +605,19 @@ export default function startListeners() {
         
         if (event.deltaX !== undefined && event.deltaY !== undefined) {
             // Modern browsers: event.deltaX, event.deltaY
-            deltaX = event.deltaX
-            deltaY = event.deltaY
+            // Normalize by deltaMode: 0 = pixel, 1 = line, 2 = page
+            let modeScale = 1
+
+            if (event.deltaMode === 1) {
+                // Lines → approximate pixels
+                modeScale = 16
+            } else if (event.deltaMode === 2) {
+                // Pages → approximate one viewport height
+                modeScale = window.innerHeight
+            }
+        
+            deltaX = event.deltaX * modeScale
+            deltaY = event.deltaY * modeScale
         } else if (event.wheelDeltaX !== undefined && event.wheelDeltaY !== undefined) {
             // Webkit browsers: wheelDeltaX, wheelDeltaY (inverted sign)
             deltaX = -event.wheelDeltaX
@@ -851,29 +862,42 @@ export function setZoomFromSlider(
     minZoom = 0.5 * DPR,
     maxZoom = 4 * DPR
 ) {
-    if (maxSliderValue === minSliderValue || maxZoom === minZoom) return
+    // Guard against invalid inputs and degenerate ranges
+    const inputs = [sliderValue, minSliderValue, maxSliderValue, minZoom, maxZoom]
+    if (
+        !inputs.every(Number.isFinite) ||
+        maxSliderValue === minSliderValue ||
+        maxZoom === minZoom
+    ) {
+        return
+    }
 
     // Normalize slider value to 0-1 range
-    const normalizedValue = (sliderValue - minSliderValue) / (maxSliderValue - minSliderValue)
-    
+    const normalizedValue =
+        (sliderValue - minSliderValue) / (maxSliderValue - minSliderValue)
+
     // Map to zoom scale range
     const targetScale = minZoom + normalizedValue * (maxZoom - minZoom)
-    
+
     // Clamp to valid zoom range
     const clampedScale = Math.max(minZoom, Math.min(maxZoom, targetScale))
-    
+
     // Calculate delta from current scale
     const scaleDelta = clampedScale - globalScope.scale
-    
+
+    // Avoid applying invalid or zero delta
+    if (!Number.isFinite(scaleDelta) || scaleDelta === 0) return
+
     // Apply zoom centered on viewport (method = 3)
     changeScale(scaleDelta, 'zoomButton', 'zoomButton', 3)
-    
+
     // Update display
     gridUpdateSet(true)
     updateCanvasSet(true)
     scheduleUpdate()
 }
 
+
 /**
  * Get the current zoom level as a slider value
  * Inverse of setZoomFromSlider - converts internal scale to slider value
@@ -893,20 +917,32 @@ export function getZoomSliderValue(
     minZoom = 0.5 * DPR,
     maxZoom = 4 * DPR
 ) {
-    if (maxSliderValue === minSliderValue || maxZoom === minZoom) {
-        return minSliderValue
-    }
+    const inputs = [minSliderValue, maxSliderValue, minZoom, maxZoom, globalScope.scale]  
+    if (                                                                                  
+        !inputs.every(Number.isFinite) ||                                                 
+        maxSliderValue === minSliderValue ||                                              
+        maxZoom === minZoom                                                               
+    ) {                                                                                   
+        return minSliderValue                                                             
+    }                                                                                     
 
     const currentScale = globalScope.scale
-    
+
     // Clamp current scale to valid range
     const clampedScale = Math.max(minZoom, Math.min(maxZoom, currentScale))
-    
+
     // Normalize scale to 0-1 range
     const normalizedScale = (clampedScale - minZoom) / (maxZoom - minZoom)
-    
+
     // Map to slider value range
-    const sliderValue = minSliderValue + normalizedScale * (maxSliderValue - minSliderValue)
-    
+    const sliderValue =
+        minSliderValue + normalizedScale * (maxSliderValue - minSliderValue)
+
+    if (!Number.isFinite(sliderValue)) {        
+        return minSliderValue                   
+    }                                           
+
     return sliderValue
 }
+
+

From 89191a1dbbf70bee35e1bf4ae5d852fb1450c01b Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Sun, 1 Mar 2026 23:14:26 +0530
Subject: [PATCH 5/7] fix: adjust applyCanvasPan to correct horizontal/vertical
 panning direction and add inline documentation for wheel/trackpad handling

---
 src/simulator/src/listeners.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index b5a118bdc..f5c0e5c8a 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -635,15 +635,21 @@ export default function startListeners() {
     
     /**
      * Apply panning to the canvas viewport
-     * @param {number} deltaX - Horizontal pan delta
-     * @param {number} deltaY - Vertical pan delta
+     * @param {number} deltaX - Horizontal pan delta (from scroll event)
+     * @param {number} deltaY - Vertical pan delta (from scroll event)
+     *
+     * The canvas origin (ox, oy) is the pixel offset of the canvas content.
+     * To make content follow the finger/wheel naturally (natural scroll):
+     *   - Swipe right  → deltaX > 0 → content moves right → ox decreases
+     *   - Swipe left   → deltaX < 0 → content moves left  → ox increases
+     *   - Swipe down   → deltaY > 0 → content moves down  → oy decreases
+     *   - Swipe up     → deltaY < 0 → content moves up    → oy increases
+     * So we subtract the delta from the origin.
      */
     function applyCanvasPan(deltaX, deltaY) {
-        // Pan the canvas by adjusting origin
-        // Positive scroll moves content down/right
-        globalScope.ox += deltaX
-        globalScope.oy += deltaY
-        
+        globalScope.ox -= deltaX
+        globalScope.oy -= deltaY
+
         // Round to avoid subpixel rendering issues
         globalScope.ox = Math.round(globalScope.ox)
         globalScope.oy = Math.round(globalScope.oy)

From 0bcd1a868eac8b32d7f55a3afc06a227546fbfd7 Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Sun, 1 Mar 2026 23:30:26 +0530
Subject: [PATCH 6/7] fix: add findDimensions call for minimap setup and
 refactor zoom scale constants in applyZoomChange function

---
 src/simulator/src/listeners.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index f5c0e5c8a..84130d88f 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -665,6 +665,7 @@ export default function startListeners() {
         
         // Show minimap temporarily (if enabled)
         if (!embed && !lightMode) {
+            findDimensions(globalScope)   
             miniMapArea.setup()
             const miniMapElement = document.querySelector('#miniMap')
             if (miniMapElement) {
@@ -818,11 +819,14 @@ resizeTabs()
  * Apply zoom change in the specified direction
  * @param {number} direction - Direction and magnitude of zoom change (1 = zoom in, -1 = zoom out)
  */
+const MIN_ZOOM_SCALE = 0.5
+const MAX_ZOOM_SCALE = 4 * DPR
+
 function applyZoomChange(direction) {
     const zoomDelta = direction * 0.1 * DPR
     const targetScale = Math.max(
-        0.5 * DPR,
-        Math.min(4 * DPR, globalScope.scale + zoomDelta)
+        MIN_ZOOM_SCALE,
+        Math.min(MAX_ZOOM_SCALE, globalScope.scale + zoomDelta)
     )
 
     if (targetScale !== globalScope.scale) {
@@ -832,6 +836,7 @@ function applyZoomChange(direction) {
     }
 }
 
+
 /**
  * Zoom in - increases the canvas scale
  * Can be called from keyboard shortcuts or UI buttons

From 4459d8995b8eaf6c555ba240374eae0ec48e2cda Mon Sep 17 00:00:00 2001
From: AKSHIT KUMAR SINGH <f20250845@goa.bits-pilani.ac.in>
Date: Sun, 1 Mar 2026 23:52:23 +0530
Subject: [PATCH 7/7] fix: add devicePixelRatio constant for consistent scaling
 across devices

---
 src/simulator/src/listeners.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index 84130d88f..420c7a297 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -7,6 +7,7 @@
 /* eslint-disable prefer-template */
 /* eslint-disable no-param-reassign */
 // Most Listeners are stored here
+const DPR = window.devicePixelRatio || 1
 import {
     layoutModeGet,
     tempBuffer,