From 1c5404bc8e5d58a9f50f988a79d4408b3949e549 Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Sat, 21 Mar 2026 08:52:47 +0100
Subject: [PATCH] fix: restore settings gear icon, implement full scale/mode
 controls, and enable mobile pinch zoom

---
 js/ui/chart.js | 52 ++++++++++++++++++++++++++++++++++----------------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/js/ui/chart.js b/js/ui/chart.js
index 3111156..3618114 100644
--- a/js/ui/chart.js
+++ b/js/ui/chart.js
@@ -321,6 +321,12 @@ constructor() {
             rightPriceScale: {
                 borderColor: COLORS.tvBorder,
                 autoScale: true,
+                mode: 0,
+                // Explicitly enable pinch/scale behavior on the price scale
+                scaleMargins: {
+                    top: 0.1,
+                    bottom: 0.1,
+                },
             },
             timeScale: {
                 borderColor: COLORS.tvBorder,
@@ -338,7 +344,15 @@ constructor() {
                },
            },
            handleScroll: {
-                vertTouchDrag: false,
+                mouseWheel: true,
+                pressedMouseMove: true,
+                horzTouchDrag: true,
+                vertTouchDrag: true, // Enabled to allow chart-internal vertical scrolling
+            },
+           handleScale: {
+                axisPressedMouseMove: true,
+                mouseWheel: true,
+                pinch: true, // This enables pinch-to-zoom on touch devices
             },
            });         
          // Setup price format selector change handler
@@ -485,10 +499,10 @@ constructor() {
     }
     
     initPriceScaleControls() {
-        // Gear Button Toggle
         const btnSettings = document.getElementById('btnSettings');
         const settingsPopup = document.getElementById('settingsPopup');
         
+        // Settings Popup Toggle and Outside Click
         if (btnSettings && settingsPopup) {
             btnSettings.addEventListener('click', (e) => {
                 e.stopPropagation();
@@ -522,35 +536,41 @@ constructor() {
             updateCheckmark('modeLogCheck', this.scaleState.scaleMode === 1);
             updateCheckmark('modePercentCheck', this.scaleState.scaleMode === 2);
             updateCheckmark('modeIndexedCheck', this.scaleState.scaleMode === 3);
+            
+            // Apply state to chart
+            this.candleSeries.priceScale().applyOptions({
+                autoScale: this.scaleState.autoScale,
+                invertScale: this.scaleState.invertScale,
+                mode: this.scaleState.scaleMode
+            });
         };
 
-        // Apply initial state
-        this.candleSeries.priceScale().applyOptions({
-            autoScale: this.scaleState.autoScale,
-            invertScale: this.scaleState.invertScale,
-            mode: this.scaleState.scaleMode
-        });
         updateUI();
 
         window.toggleScaleOption = (option) => {
             this.scaleState[option] = !this.scaleState[option];
             localStorage.setItem(`winterfail_scale_${option}`, this.scaleState[option]);
-            
-            this.candleSeries.priceScale().applyOptions({
-                [option]: this.scaleState[option]
-            });
             updateUI();
         };
 
         window.setScaleMode = (mode) => {
             this.scaleState.scaleMode = mode;
             localStorage.setItem('winterfail_scale_mode', mode);
-            
-            this.candleSeries.priceScale().applyOptions({
-                mode: mode
-            });
             updateUI();
         };
+
+        // Add keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+            
+            if (e.key.toLowerCase() === 'a') {
+                window.toggleScaleOption('autoScale');
+            } else if (e.key.toLowerCase() === 'l') {
+                // Toggle between Normal (0) and Log (1)
+                const newMode = this.scaleState.scaleMode === 1 ? 0 : 1;
+                window.setScaleMode(newMode);
+            }
+        });
     }
     
     initNavigationControls() {