Search code examples
javascriptcursorace-editor

How to center the selection in Ace Editor


I am trying to make it so that when the cursor or the selection (either or both) is moved either left of right in an ace-editor session, the scroll bar scrolls to keep the cursor or selected region in the center of the textarea.

There is a function called centerSelection()

this.centerSelection = function() {
    var range = this.getSelectionRange();
    var pos = {
        row: Math.floor(range.start.row + (range.end.row - range.start.row) / 2),
        column: Math.floor(range.start.column + (range.end.column - range.start.column) / 2)
    }
    this.renderer.alignCursor(pos, 0.5); };

which "Attempts to center the current selection on the screen."

which sounds like what i want but it doesn't seem to be doing anything.

there is also a keybinding for a command called "centerselection"

{
name: "centerselection",
bindKey: bindKey(null, "Ctrl-L"),
exec: function(editor) { editor.centerSelection(); },
readOnly: true}

but it has no Key input for windows, just says null. I don't have a mac so I can't try out Ctrl-L and I'm curious as to why it doesn't have a key input for windows aswell.

after playing with it some more i realise it is working it is just centering the selection row and not the selection column. So is there a way to get the selection to be in the center column as well as the center row? I think it is because the alignCursor function only aligns the cursor row and not column

this.alignCursor = function(cursor, alignment) {
    if (typeof cursor == "number")
        cursor = {row: cursor, column: 0};

    var pos = this.$cursorLayer.getPixelPosition(cursor);
    var h = this.$size.scrollerHeight - this.lineHeight;
    var offset = pos.top - h * (alignment || 0);

    this.session.setScrollTop(offset);
    return offset;
};

Solution

  • Well I think I figured it out, this code below works fine. :)

    var cursorLeft = editor.renderer.$cursorLayer.getPixelPosition(0).left;
    //gets distance between cursor and left side of textarea in pixels
    var scrollerWidth = editor.renderer.$size.scrollerWidth;
    //gets the width of the text area (that can be seen)
    editor.renderer.scrollToX(cursorLeft - scrollerWidth/2);
    //moves the scroller so that the left side i at the same point as the cursor minus half the width of the area that can be seen