p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore settings gear icon, implement full scale/mode controls, and enable mobile pinch zoom

Browse Source
This commit is contained in:
DiTus
2026-03-21 08:52:47 +01:00
parent b79b82368d
commit 1c5404bc8e
1 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
js/ui/chart.js
View File

@ -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() {