CODEWITHSUNDEEP
javascriptcssace-editor
kuaw26
kuaw26

Reputation: 456

How to animate selection / deselection in ace editor?

I'm working on live configuration tool for Apache Ignite. UI organized in two columns. In left column I have various inputs, checkboxes, dropdowns... and in right column I have ace editor where I show preview of generated configuration.

I want to implement selection of changed parts by selecting them in ace edit. And I already do that. But for better user experience I would like to select changed lines with fade-in / fade-out animation.

Could anyone give me some advice how to implement this.

Code for selection: editor.selection.addRange(new Range(start, 0, end, 0));

I guess I need some how tweak CSS?

Or may be I should change selection color in loop and select with different colors several times with short pauses?

Update: after several hours of digging ace I found that animation part of css is ignored by ace. So I go to http://www.perbang.dk/rgbgradient, configure gradient with 10 steps and create 10 styles in my css. And apply them in loop for range. Here my code (I use AngularJS, so, it is a part of my controller):

var animation = {editor: null, stage: 0, start: 0, stop: 0};

function _clearSelection(editor) {
    _.forEach(editor.session.getMarkers(false), function (marker) {
        editor.session.removeMarker(marker.id);
    });
}

function _animate() {
    animation.stage = animation.stage + 1;

    animation.editor.session.addMarker(new Range(animation.start, 0, animation.stop, 0),
        'preview-highlight-' + animation.stage, 'line', false);
}

function _fade(editor, start, stop) {
    var promise = editor.animatePromise;

    if (promise) {
        $interval.cancel(promise);

        _clearSelection(editor);
    }

    animation = {editor: editor, stage: 0, start: start, stop: stop};

    editor.animatePromise = $interval(_animate, 100, 10, false);
}

Upvotes: 1

Views: 442

Answers (1)

kuaw26
kuaw26

Reputation: 456

I've got an answer from one of Ace developers "nightwing":

Using css animations or transitions would be the best solution, but it doesn't work for now since marker layer uses innerHTML which removes all marker nodes restarting animation. As a workaround it is possible to add dom node with animation to editor.container and use code similar to https://github.com/ajaxorg/ace/blob/master/lib/ace/line_widgets.js#L271 to position them inside the editor

Upvotes: 0

Related Questions