Skip to content

Commit ddf09c3

Browse files
aboseabose
committed
feat: scroll sensitivity in theme settings
1 parent 8be5b09 commit ddf09c3

7 files changed

Lines changed: 91 additions & 10 deletions

File tree

‎src/editor/Editor.js‎

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,8 @@ define(function (require, exports, module) {
135135

136136
const LINE_NUMBER_GUTTER = EditorPreferences.LINE_NUMBER_GUTTER,
137137
LINE_NUMBER_GUTTER_PRIORITY = EditorPreferences.LINE_NUMBER_GUTTER_PRIORITY,
138-
CODE_FOLDING_GUTTER_PRIORITY = EditorPreferences.CODE_FOLDING_GUTTER_PRIORITY;
138+
CODE_FOLDING_GUTTER_PRIORITY = EditorPreferences.CODE_FOLDING_GUTTER_PRIORITY,
139+
MOUSE_WHEEL_SCROLL_SENSITIVITY = EditorPreferences.MOUSE_WHEEL_SCROLL_SENSITIVITY;
139140

140141
let editorOptions = [...Object.keys(cmOptions), AUTO_TAB_SPACES];
141142

@@ -148,6 +149,13 @@ define(function (require, exports, module) {
148149
*/
149150
var _duringFocus = false;
150151

152+
/**
153+
* Cached mouse wheel scroll sensitivity value from preferences
154+
* @private
155+
* @type {number}
156+
*/
157+
let _mouseWheelScrollSensitivity = 1;
158+
151159
/**
152160
* Constant: Normal boundary check when centering text.
153161
* @type {number}
@@ -464,11 +472,11 @@ define(function (require, exports, module) {
464472
const $cmElement = this.$el;
465473
$cmElement[0].addEventListener("wheel", (event) => {
466474
const $editor = $cmElement.find(".CodeMirror-scroll");
467-
// we need to slow down the scroll by the factor of line height. else the scrolling is too fast.
468-
// this became a problem after we added the custom line height feature causing jumping scrolls esp in safari
469-
// and mac if we dont do this scroll scaling.
475+
// We need to scale the scroll by the factor of line height. This became a problem after we added
476+
// the custom line height feature causing jumping scrolls esp in safari and mac if we dont do
477+
// this scroll scaling.
470478
const lineHeight = parseFloat(getComputedStyle($editor[0]).lineHeight);
471-
const defaultHeight = 14, scrollScaleFactor = lineHeight/defaultHeight;
479+
const defaultHeight = 14, scrollScaleFactor = lineHeight / defaultHeight;
472480

473481
// when user is pressing the 'Shift' key, we need to convert the vertical scroll to horizontal scroll
474482
if (event.shiftKey) {
@@ -493,8 +501,19 @@ define(function (require, exports, module) {
493501

494502
// apply the vertical scrolling normally
495503
if (event.deltaY !== 0) {
496-
const scrollDelta = event.deltaY;
497-
$editor[0].scrollTop += (scrollDelta/scrollScaleFactor);
504+
let scrollAmount;
505+
if (event.deltaMode === 0) {
506+
// Pixel mode - browser reports delta in pixels, system scroll settings already applied.
507+
// Scale by line height factor to normalize for custom line heights.
508+
scrollAmount = event.deltaY / scrollScaleFactor;
509+
} else if (event.deltaMode === 1) {
510+
// Line mode - delta is in lines, convert to pixels using actual line height
511+
scrollAmount = event.deltaY * defaultHeight;
512+
} else {
513+
// Page mode - delta is in pages, convert to viewport height
514+
scrollAmount = event.deltaY * $editor[0].clientHeight;
515+
}
516+
$editor[0].scrollTop += scrollAmount * _mouseWheelScrollSensitivity;
498517
event.preventDefault();
499518
}
500519
});
@@ -3171,6 +3190,12 @@ define(function (require, exports, module) {
31713190
});
31723191
});
31733192

3193+
// Set up listener for mouse wheel scroll sensitivity preference
3194+
PreferencesManager.on("change", MOUSE_WHEEL_SCROLL_SENSITIVITY, function () {
3195+
_mouseWheelScrollSensitivity = PreferencesManager.get(MOUSE_WHEEL_SCROLL_SENSITIVITY);
3196+
});
3197+
_mouseWheelScrollSensitivity = PreferencesManager.get(MOUSE_WHEEL_SCROLL_SENSITIVITY);
3198+
31743199
// Define public API
31753200
exports.Editor = Editor;
31763201
exports.BOUNDARY_CHECK_NORMAL = BOUNDARY_CHECK_NORMAL;

‎src/editor/EditorHelper/EditorPreferences.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@ define(function (require, exports, module) {
4949
WORD_WRAP = "wordWrap",
5050
AUTO_HIDE_SEARCH = "autoHideSearch",
5151
INDENT_LINE_COMMENT = "indentLineComment",
52-
INPUT_STYLE = "inputStyle";
52+
INPUT_STYLE = "inputStyle",
53+
MOUSE_WHEEL_SCROLL_SENSITIVITY = "mouseWheelScrollSensitivity";
5354

5455
/**
5556
* Constants
@@ -167,6 +168,10 @@ define(function (require, exports, module) {
167168
PreferencesManager.definePreference(INPUT_STYLE, "string", "textarea", {
168169
description: Strings.DESCRIPTION_INPUT_STYLE
169170
});
171+
PreferencesManager.definePreference(MOUSE_WHEEL_SCROLL_SENSITIVITY, "number", 1, {
172+
validator: _.partialRight(ValidationUtils.isWithinRange, 0.1, 10),
173+
description: Strings.DESCRIPTION_MOUSE_WHEEL_SCROLL_SENSITIVITY
174+
});
170175

171176
function isValidTabSize (size) {
172177
return ValidationUtils.isIntegerInRange(size, MIN_TAB_SIZE, MAX_TAB_SIZE);
@@ -215,6 +220,7 @@ define(function (require, exports, module) {
215220
exports.AUTO_HIDE_SEARCH = AUTO_HIDE_SEARCH;
216221
exports.INDENT_LINE_COMMENT = INDENT_LINE_COMMENT;
217222
exports.INPUT_STYLE = INPUT_STYLE;
223+
exports.MOUSE_WHEEL_SCROLL_SENSITIVITY = MOUSE_WHEEL_SCROLL_SENSITIVITY;
218224

219225
exports.MIN_SPACE_UNITS = MIN_SPACE_UNITS;
220226
exports.MIN_TAB_SIZE = MIN_TAB_SIZE;

‎src/htmlContent/themes-settings.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,21 @@ <h1 class="dialog-title">{{Strings.THEMES_SETTINGS}}</h1>
5656
<span class="fontLineHeightValue">{{settings.editorLineHeight}}</span>
5757
</div>
5858
</div>
59+
60+
<div class="control-group">
61+
<label class="control-label">{{Strings.SCROLL_SENSITIVITY}}:</label>
62+
<div class="controls line-height-slider">
63+
<input
64+
type="range"
65+
min="0.1"
66+
max="10"
67+
step="0.1"
68+
value="{{settings.scrollSensitivity}}"
69+
class="form-range scrollSensitivitySlider"
70+
data-target="scrollSensitivity">
71+
<span class="scrollSensitivityValue">{{settings.scrollSensitivity}}</span>
72+
</div>
73+
</div>
5974
</form>
6075
</div>
6176
<div class="modal-footer">

‎src/nls/root/strings.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -776,6 +776,7 @@ define({
776776
"FONT_SIZE": "Font Size",
777777
"FONT_FAMILY": "Font Family",
778778
"FONT_LINE_HEIGHT": "Line Height",
779+
"SCROLL_SENSITIVITY": "Scroll Sensitivity",
779780
"THEMES_SETTINGS": "Themes Settings",
780781
"THEMES_ERROR": "Themes Error",
781782
"THEMES_ERROR_CANNOT_APPLY": "Could not apply theme due to an error.",
@@ -1117,6 +1118,7 @@ define({
11171118
"DESCRIPTION_PATH": "Path specific settings",
11181119
"DESCRIPTION_PROXY": "The URL of the proxy server used for extension installation",
11191120
"DESCRIPTION_SCROLL_PAST_END": "true to enable scrolling beyond the end of the document",
1121+
"DESCRIPTION_MOUSE_WHEEL_SCROLL_SENSITIVITY": "Multiplier for mouse wheel scroll speed (0.1 to 10, default 1). Adjust if scrolling feels too slow or fast.",
11201122
"DESCRIPTION_SHOW_CODE_HINTS": "false to disable all code hints",
11211123
"DESCRIPTION_SHOW_CURSOR_WHEN_SELECTING": "Keeps the blinking cursor visible when you have a text selection",
11221124
"DESCRIPTION_SHOW_LINE_NUMBERS": "true to show line numbers in a “gutter” to the left of the code",

‎src/styles/brackets.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3189,10 +3189,10 @@ label input {
31893189
.line-height-slider {
31903190
padding-top: 5px;
31913191
}
3192-
.fontLineHeightSlider {
3192+
.fontLineHeightSlider, .scrollSensitivitySlider {
31933193
width: 220px;
31943194
}
3195-
.fontLineHeightValue {
3195+
.fontLineHeightValue, .scrollSensitivityValue {
31963196
margin-left: 3px;
31973197
padding-top: 5px;
31983198
}

‎src/utils/ValidationUtils.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,31 @@ define(function (require, exports, module) {
7272
return ((!hasLowerLimt || value >= lowerLimit) && (!hasUpperLimt || value <= upperLimit));
7373
}
7474

75+
/**
76+
* Used to validate whether type of unknown value is a number (including decimals),
77+
* and, if so, is it within the optional lower and upper limits.
78+
*
79+
* @param {*} value Value for which to validate its type
80+
* @param {number=} lowerLimit Optional lower limit (inclusive)
81+
* @param {number=} upperLimit Optional upper limit (inclusive)
82+
* @return {boolean} true if value is a finite number, and optionally in specified range.
83+
*/
84+
function isWithinRange(value, lowerLimit, upperLimit) {
85+
// Validate value is a number
86+
if (typeof (value) !== "number" || !isFinite(value)) {
87+
return false;
88+
}
89+
90+
// Validate number is in range
91+
var hasLowerLimit = (typeof (lowerLimit) === "number"),
92+
hasUpperLimit = (typeof (upperLimit) === "number");
93+
94+
return ((!hasLowerLimit || value >= lowerLimit) && (!hasUpperLimit || value <= upperLimit));
95+
}
96+
7597

7698
// Define public API
7799
exports.isInteger = isInteger;
78100
exports.isIntegerInRange = isIntegerInRange;
101+
exports.isWithinRange = isWithinRange;
79102
});

‎src/view/ThemeSettings.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ define(function (require, exports, module) {
3535
Commands = require("command/Commands"),
3636
prefs = PreferencesManager.getExtensionPrefs("themes");
3737

38+
const MOUSE_WHEEL_SCROLL_SENSITIVITY = "mouseWheelScrollSensitivity";
39+
3840
/**
3941
* @type {Object}
4042
* Currently loaded themes that are available to choose from.
@@ -76,6 +78,7 @@ define(function (require, exports, module) {
7678
result.fontFamily = ViewCommandHandlers.getFontFamily();
7779
result.fontSize = ViewCommandHandlers.getFontSize();
7880
result.validFontSizeRegExp = ViewCommandHandlers.validFontSizeRegExp;
81+
result.scrollSensitivity = PreferencesManager.get(MOUSE_WHEEL_SCROLL_SENSITIVITY);
7982
return result;
8083
}
8184

@@ -140,6 +143,12 @@ define(function (require, exports, module) {
140143
newSettings["editorLineHeight"] = targetValue;
141144
prefs.set("editorLineHeight", targetValue + "");
142145
})
146+
.on("input", ".scrollSensitivitySlider", function () {
147+
const targetValue = parseFloat($(this).val());
148+
$template.find(".scrollSensitivityValue").text(targetValue);
149+
newSettings["scrollSensitivity"] = targetValue;
150+
PreferencesManager.set(MOUSE_WHEEL_SCROLL_SENSITIVITY, targetValue);
151+
})
143152
.on("change", "select", function () {
144153
var $target = $(":selected", this);
145154
var attr = $target.attr("data-target");
@@ -171,6 +180,7 @@ define(function (require, exports, module) {
171180
// Make sure we revert any changes to theme selection
172181
prefs.set("theme", currentSettings.theme);
173182
prefs.set("editorLineHeight", currentSettings.editorLineHeight);
183+
PreferencesManager.set(MOUSE_WHEEL_SCROLL_SENSITIVITY, currentSettings.scrollSensitivity);
174184
}
175185
});
176186
$template

0 commit comments

Comments
 (0)