Scroll line up/down - Take 3

src/base-config/keyboard.json

@@ -164,6 +164,28 @@
     "view.restoreFontSize":  [
         "Ctrl-0"
     ],
+    "view.scrollLineUp":  [
+        {
+            "key": "Ctrl-Up",
+            "displayKey": "Ctrl-\u2191"
+        },
+        {
+            "key": "Ctrl-Alt-Up",
+            "displayKey": "Ctrl-Alt-\u2191",
+            "platform": "mac"
+        }
+    ],
+    "view.scrollLineDown":  [
+        {
+            "key": "Ctrl-Down",
+            "displayKey": "Ctrl-\u2193"
+        },
+        {
+            "key": "Ctrl-Alt-Down",
+            "displayKey": "Ctrl-Alt-\u2193",
+            "platform": "mac"
+        }
+    ],
     "navigate.quickOpen":  [
         "Ctrl-Shift-O"
     ],

src/command/Commands.js

@@ -78,6 +78,8 @@ define(function (require, exports, module) {
     exports.VIEW_INCREASE_FONT_SIZE     = "view.increaseFontSize";
     exports.VIEW_DECREASE_FONT_SIZE     = "view.decreaseFontSize";
     exports.VIEW_RESTORE_FONT_SIZE      = "view.restoreFontSize";
+    exports.VIEW_SCROLL_LINE_UP         = "view.scrollLineUp";
+    exports.VIEW_SCROLL_LINE_DOWN       = "view.scrollLineDown";
     exports.TOGGLE_JSLINT               = "debug.jslint";
     exports.SORT_WORKINGSET_BY_ADDED    = "view.sortWorkingSetByAdded";
     exports.SORT_WORKINGSET_BY_NAME     = "view.sortWorkingSetByName";

src/editor/Editor.js

@@ -950,7 +950,15 @@ define(function (require, exports, module) {
     Editor.prototype.setScrollPos = function (x, y) {
         this._codeMirror.scrollTo(x, y);
     };
-
+
+    /*
+     * Returns the current text height of the editor.
+     * @returns {number} Height of the text in pixels
+     */
+    Editor.prototype.getTextHeight = function () {
+        return this._codeMirror.defaultTextHeight();
+    };
+
     /**
      * Adds an inline widget below the given line. If any inline widget was already open for that
      * line, it is closed without warning.

src/nls/root/strings.js

@@ -211,6 +211,8 @@ define({
     "CMD_INCREASE_FONT_SIZE"              : "Increase Font Size",
     "CMD_DECREASE_FONT_SIZE"              : "Decrease Font Size",
     "CMD_RESTORE_FONT_SIZE"               : "Restore Font Size",
+    "CMD_SCROLL_LINE_UP"                  : "Scroll Line Up",
+    "CMD_SCROLL_LINE_DOWN"                : "Scroll Line Down",
     "CMD_SORT_WORKINGSET_BY_ADDED"        : "Sort by Added",
     "CMD_SORT_WORKINGSET_BY_NAME"         : "Sort by Name",
     "CMD_SORT_WORKINGSET_BY_TYPE"         : "Sort by Type",

src/view/ViewCommandHandlers.js

@@ -29,6 +29,7 @@ define(function (require, exports, module) {
 
     var Commands                = require("command/Commands"),
         CommandManager          = require("command/CommandManager"),
+        KeyBindingManager       = require("command/KeyBindingManager"),
         Strings                 = require("strings"),
         ProjectManager          = require("project/ProjectManager"),
         EditorManager           = require("editor/EditorManager"),
@@ -84,6 +85,12 @@ define(function (require, exports, module) {
      */
     var _fontSizePrefsLoaded = false;
 
+
+    /**
+     * @private
+     * Removes the styles used to update the font size and updates the editor if refresh is true
+     * @param {boolean} refresh - True to refresh the current full editor
+     */
     function _removeDynamicFontSize(refresh) {
         $("#" + DYNAMIC_FONT_STYLE_ID).remove();
         if (refresh) {
@@ -98,8 +105,6 @@ define(function (require, exports, module) {
      * @return {boolean} true if adjustment occurred, false if it did not occur 
      */
     function _adjustFontSize(adjustment) {
-        var styleId = "codemirror-dynamic-fonts";
-
         var fsStyle = $(".CodeMirror").css("font-size");
         var lhStyle = $(".CodeMirror").css("line-height");
 
@@ -184,6 +189,7 @@ define(function (require, exports, module) {
         _prefs.setValue("fontSizeAdjustment", 0);
     }
 
+
     /**
      * @private
      * Updates the user interface appropriately based on whether or not a document is
@@ -213,10 +219,120 @@ define(function (require, exports, module) {
         }
     }
 
+
+
+    /**
+     * @private
+     * Calculates the first and last visible lines of the focused editor
+     * @param {!number} textHeight
+     * @param {!number} scrollTop
+     * @param {!number} editorHeight
+     * @param {!number} viewportFrom
+     * @return {{first: number, last: number}}
+     */
+    function _getLinesInView(textHeight, scrollTop, editorHeight, viewportFrom) {
+        var scrolledTop    = scrollTop / textHeight,
+            scrolledBottom = (scrollTop + editorHeight) / textHeight;
+
+        // Subtract a line from both for zero-based index. Also adjust last line
+        // to round inward to show a whole lines.
+        var firstLine      = Math.ceil(scrolledTop) - 1,
+            lastLine       = Math.floor(scrolledBottom) - 2;
+
+        return { first: viewportFrom + firstLine, last: viewportFrom + lastLine };
+    }
+
+    /**
+     * @private
+     * Scroll the viewport one line up or down.
+     * @param {number} -1 to scroll one line up; 1 to scroll one line down.
+     */
+    function _scrollLine(direction) {
+        var editor        = EditorManager.getCurrentFullEditor(),
+            textHeight    = editor.getTextHeight(),
+            cursorPos     = editor.getCursorPos(),
+            hasSelecction = editor.hasSelection(),
+            inlineEditors = editor.getInlineWidgets(),
+            scrollInfo    = editor._codeMirror.getScrollInfo(),
+            viewportFrom  = editor._codeMirror.getViewport().from,
+            paddingTop    = editor._getLineSpaceElement().offsetTop,
+            viewportTop   = $(".CodeMirror-lines", editor.getRootElement()).parent().position().top,
+            editorHeight  = scrollInfo.clientHeight;
+
+        // To make it snap better to lines and dont cover the cursor when the scroll is lower than the top padding,
+        // we make it start direclty from the top padding
+        var scrolledTop   = scrollInfo.top < paddingTop && direction > 0 ? paddingTop : scrollInfo.top;
+
+        // CodeMirror has a strange behaviour when it comes to calculate the height of the not rendered lines,
+        // so instead, we calculate the amount of hidden rendered lines at top and add it to the first rendered line.
+        var scrollTop     = scrolledTop - viewportTop,
+            linesInView   = _getLinesInView(textHeight, scrollTop, editorHeight, viewportFrom);
+
+        // Go through all the editors and reduce the scroll top and editor height to recalculate the lines in view 
+        var line, total;
+        inlineEditors.forEach(function (inlineEditor) {
+            line  = editor._getInlineWidgetLineNumber(inlineEditor);
+            total = inlineEditor.info.height / textHeight;
+
+            if (line >= viewportFrom) {
+                if (line < linesInView.first) {
+                    scrollTop   -= inlineEditor.info.height;
+                    linesInView  = _getLinesInView(textHeight, scrollTop, editorHeight, viewportFrom);
+
+                } else if (line + total < linesInView.last) {
+                    editorHeight -= inlineEditor.info.height;
+                    linesInView   = _getLinesInView(textHeight, scrollTop, editorHeight, viewportFrom);
+                }
+            }
+        });
+
+        // If there is no selection move the cursor so that is always visible.
+        if (!hasSelecction) {
+            // Move the cursor to the first visible line.
+            if (cursorPos.line < linesInView.first) {
+                editor.setCursorPos({line: linesInView.first + direction, ch: cursorPos.ch});
+
+            // Move the cursor to the last visible line.
+            } else if (cursorPos.line > linesInView.last) {
+                editor.setCursorPos({line: linesInView.last + direction, ch: cursorPos.ch});
+
+            // Move the cursor up or down using moveV to keep the goal column intact, since setCursorPos deletes it.
+            } else if ((direction > 0 && cursorPos.line === linesInView.first) ||
+                    (direction < 0 && cursorPos.line === linesInView.last)) {
+                editor._codeMirror.moveV(direction, "line");
+            }
+        }
+
+        // If there are inline editors just add/remove 1 line to the scroll top.
+        if (inlineEditors.length) {
+            editor.setScrollPos(scrollInfo.left, scrolledTop + (textHeight * direction));
+
+        // If there arent, we can make it snap to the line.
+        } else {
+            var lines = linesInView.first - viewportFrom + direction + 1;
+            editor.setScrollPos(scrollInfo.left, viewportTop + (textHeight * lines));
+        }
+    }
+
+    function _handleScrollLineUp() {
+        _scrollLine(-1);
+    }
+
+    function _handleScrollLineDown() {
+        _scrollLine(1);
+    }
+
+
     // Register command handlers
     CommandManager.register(Strings.CMD_INCREASE_FONT_SIZE, Commands.VIEW_INCREASE_FONT_SIZE, _handleIncreaseFontSize);
     CommandManager.register(Strings.CMD_DECREASE_FONT_SIZE, Commands.VIEW_DECREASE_FONT_SIZE, _handleDecreaseFontSize);
     CommandManager.register(Strings.CMD_RESTORE_FONT_SIZE,  Commands.VIEW_RESTORE_FONT_SIZE,  _handleRestoreFontSize);
+    CommandManager.register(Strings.CMD_SCROLL_LINE_UP,     Commands.VIEW_SCROLL_LINE_UP,     _handleScrollLineUp);
+    CommandManager.register(Strings.CMD_SCROLL_LINE_DOWN,   Commands.VIEW_SCROLL_LINE_DOWN,   _handleScrollLineDown);
+
+    // There are no menu items, so bind commands directly
+    KeyBindingManager.addBinding(Commands.VIEW_SCROLL_LINE_UP);
+    KeyBindingManager.addBinding(Commands.VIEW_SCROLL_LINE_DOWN);
 
     // Init PreferenceStorage
     _prefs = PreferencesManager.getPreferenceStorage(PREFERENCES_CLIENT_ID, _defaultPrefs);