Merge branch 'master' into nunjucks-folding

Author: mkslanc

ace-internal.d.ts

@@ -32,6 +32,7 @@ export namespace Ace {
     type HoverTooltip = import("ace-code/src/tooltip").HoverTooltip;
     type Tooltip = import("ace-code/src/tooltip").Tooltip;
     type PopupManager = import("ace-code/src/tooltip").PopupManager;
+    type TextInput = import("ace-code/src/keyboard/textinput").TextInput;
 
     type AfterLoadCallback = (err: Error | null, module: unknown) => void;
     type LoaderFunction = (moduleName: string, afterLoad: AfterLoadCallback) => void;
@@ -967,12 +968,6 @@ export namespace Ace {
         new(session: EditSession): Selection;
     }
 
-    interface TextInput {
-        resetSelection(): void;
-
-        setAriaOption(options?: { activeDescendant: string, role: string, setLabel: any }): void;
-    }
-
     type CompleterCallback = (error: any, completions: Completion[]) => void;
 
     interface Completer {
@@ -1292,6 +1287,13 @@ export namespace Ace {
     export interface ScrollbarEvents {
         "scroll": (e: { data: number }) => void;
     }
+
+    export interface TextInputAriaOptions {
+        activeDescendant?: string;
+        role?: string;
+        setLabel?: boolean;
+        inline?: boolean;
+    }
 }
 
 

ace.d.ts

@@ -41,6 +41,7 @@ declare module "ace-code" {
         type HoverTooltip = import("ace-code/src/tooltip").HoverTooltip;
         type Tooltip = import("ace-code/src/tooltip").Tooltip;
         type PopupManager = import("ace-code/src/tooltip").PopupManager;
+        type TextInput = import("ace-code/src/keyboard/textinput").TextInput;
         type AfterLoadCallback = (err: Error | null, module: unknown) => void;
         type LoaderFunction = (moduleName: string, afterLoad: AfterLoadCallback) => void;
         export interface ConfigOptions {
@@ -775,14 +776,6 @@ declare module "ace-code" {
         var Selection: {
             new(session: EditSession): Selection;
         };
-        interface TextInput {
-            resetSelection(): void;
-            setAriaOption(options?: {
-                activeDescendant: string;
-                role: string;
-                setLabel: any;
-            }): void;
-        }
         type CompleterCallback = (error: any, completions: Completion[]) => void;
         interface Completer {
             identifierRegexps?: Array<RegExp>;
@@ -1032,6 +1025,12 @@ declare module "ace-code" {
                 data: number;
             }) => void;
         }
+        export interface TextInputAriaOptions {
+            activeDescendant?: string;
+            role?: string;
+            setLabel?: boolean;
+            inline?: boolean;
+        }
     }
     export const config: typeof import("ace-code/src/config");
     export function edit(el?: string | (HTMLElement & {

src/editor.js

@@ -906,7 +906,7 @@ class Editor {
 
     /**
      *
-     * @param {string | string[]} command
+     * @param {string | string[] | import("../ace-internal").Ace.Command} command
      * @param [args]
      * @return {boolean}
      */

src/ext/diff/base_diff_view.js

@@ -5,13 +5,16 @@ var Range = require("../../range").Range;
 var dom = require("../../lib/dom");
 var config = require("../../config");
 var LineWidgets = require("../../line_widgets").LineWidgets;
+var ScrollDiffDecorator = require("./scroll_diff_decorator").ScrollDiffDecorator;
 
 // @ts-ignore
 var css = require("./styles-css.js").cssText;
 
 var Editor = require("../../editor").Editor;
 var Renderer = require("../../virtual_renderer").VirtualRenderer;
 var UndoManager = require("../../undomanager").UndoManager;
+var Decorator = require("../../layer/decorators").Decorator;
+
 require("../../theme/textmate");
 // enable multiselect
 require("../../multi_select");
@@ -125,6 +128,8 @@ class BaseDiffView {
                 diffModel.valueB || "")),
             chunks: []
         });
+
+        this.setupScrollbars();
     }
 
     addGutterDecorators() { 
@@ -141,7 +146,6 @@ class BaseDiffView {
     $setupModel(session, value) {
         var editor = new Editor(new Renderer(), session);
         editor.session.setUndoManager(new UndoManager());
-        // editor.renderer.setOption("decoratorType", "diff");
         if (value) {
             editor.setValue(value, -1);
         }
@@ -290,13 +294,100 @@ class BaseDiffView {
         this.editorA && this.editorA.renderer.updateBackMarkers();
         this.editorB && this.editorB.renderer.updateBackMarkers();
 
-        //this.updateScrollBarDecorators();
+        setTimeout(() => {
+            this.updateScrollBarDecorators();
+        }, 0);
 
         if (this.$foldUnchangedOnInput) {
             this.foldUnchanged();
         }
     }
 
+    setupScrollbars() {
+        /**
+         * @param {Renderer & {$scrollDecorator: ScrollDiffDecorator}} renderer
+         */
+        const setupScrollBar = (renderer) => {
+            setTimeout(() => {
+                this.$setScrollBarDecorators(renderer);
+                this.updateScrollBarDecorators();
+            }, 0);
+        };
+
+        if (this.inlineDiffEditor) {
+            setupScrollBar(this.activeEditor.renderer);
+        }
+        else {
+            setupScrollBar(this.editorA.renderer);
+            setupScrollBar(this.editorB.renderer);
+        }
+
+    }
+
+    $setScrollBarDecorators(renderer) {
+        if (renderer.$scrollDecorator) {
+            renderer.$scrollDecorator.destroy();
+        }
+        renderer.$scrollDecorator = new ScrollDiffDecorator(renderer.scrollBarV, renderer, this.inlineDiffEditor);
+        renderer.$scrollDecorator.setSessions(this.sessionA, this.sessionB);
+        renderer.scrollBarV.setVisible(true);
+        renderer.scrollBarV.element.style.bottom = renderer.scrollBarH.getHeight() + "px";
+    }
+
+    $resetDecorators(renderer) {
+        if (renderer.$scrollDecorator) {
+            renderer.$scrollDecorator.destroy();
+        }
+        renderer.$scrollDecorator = new Decorator(renderer.scrollBarV, renderer);
+    }
+
+    updateScrollBarDecorators() {
+        if (this.inlineDiffEditor) {
+            if (!this.activeEditor) {
+                return;
+            }
+            this.activeEditor.renderer.$scrollDecorator.zones = [];
+        }
+        else {
+            if (!this.editorA || !this.editorB) {
+                return;
+            }
+            this.editorA.renderer.$scrollDecorator.zones = [];
+            this.editorB.renderer.$scrollDecorator.zones = [];
+        }
+
+        /**
+         * @param {DiffChunk} change
+         */
+        const updateDecorators = (editor, change) => {
+            if (!editor) {
+                return;
+            }
+            if (change.old.start.row != change.old.end.row) {
+                editor.renderer.$scrollDecorator.addZone(change.old.start.row, change.old.end.row - 1, "delete");
+            }
+            if (change.new.start.row != change.new.end.row) {
+                editor.renderer.$scrollDecorator.addZone(change.new.start.row, change.new.end.row - 1, "insert");
+            }
+        };
+
+        if (this.inlineDiffEditor) {
+            this.chunks && this.chunks.forEach((lineChange) => {
+                updateDecorators(this.activeEditor, lineChange);
+            });
+            this.activeEditor.renderer.$scrollDecorator.$updateDecorators(this.activeEditor.renderer.layerConfig);
+        }
+        else {
+            this.chunks && this.chunks.forEach((lineChange) => {
+                updateDecorators(this.editorA, lineChange);
+                updateDecorators(this.editorB, lineChange);
+            });
+
+            this.editorA.renderer.$scrollDecorator.$updateDecorators(this.editorA.renderer.layerConfig);
+            this.editorB.renderer.$scrollDecorator.$updateDecorators(this.editorB.renderer.layerConfig);
+        }
+    }
+
     /**
      *
      * @param {string[]} val1
@@ -366,7 +457,7 @@ class BaseDiffView {
         return row;
     }
 
-    /** 
+    /**
      * scroll locking
      * @abstract
      **/
@@ -468,8 +559,8 @@ class BaseDiffView {
             }
         }
     }
-    
-    scheduleRealign() {        
+
+    scheduleRealign() {
         if (!this.realignPending) {
             this.realignPending = true;
             this.editorA.renderer.on("beforeRender", this.realign);
@@ -500,6 +591,14 @@ class BaseDiffView {
         this.gutterDecoratorB && this.gutterDecoratorB.dispose();
         this.sessionA.selection.clearSelection();
         this.sessionB.selection.clearSelection();
+
+        if (this.savedOptionsA && this.savedOptionsA.customScrollbar) {
+            this.$resetDecorators(this.editorA.renderer);
+        }
+        if (this.savedOptionsB &&this.savedOptionsB.customScrollbar) {
+            this.$resetDecorators(this.editorB.renderer);
+        }
+
         this.editorA = this.editorB = null;
 
     }
@@ -771,7 +870,7 @@ config.defineOptions(BaseDiffView.prototype, "DiffView", {
             return this.editorA.getTheme();
         }
     },
-}); 
+});
 
 var emptyGutterRenderer =  {
     getText: function name(params) {

src/ext/diff/diff_test.js

@@ -10,6 +10,9 @@ var {DiffProvider} = require("./providers/default");
 var ace = require("../../ace");
 var Range = require("../../range").Range;
 var editorA, editorB, diffView;
+const {Decorator} = require("../../layer/decorators");
+const {ScrollDiffDecorator} = require("./scroll_diff_decorator");
+
 
 var DEBUG = false;
 
@@ -28,14 +31,14 @@ function setEditorPosition(editor) {
 
 function getValueA(lines) {
     return lines.map(function(v) {
-        return v[0]; 
+        return v[0];
     }).filter(function(x) {
         return x != null;
     }).join("\n");
 }
 function getValueB(lines) {
     return lines.map(function(v) {
-        return v.length == 2 ? v[1] : v[0]; 
+        return v.length == 2 ? v[1] : v[0];
     }).filter(function(x) {
         return x != null;
     }).join("\n");
@@ -191,7 +194,7 @@ module.exports = {
 
         diffView.setTheme("ace/theme/cloud_editor");
         assert.equal(diffView.editorA.getTheme(), "ace/theme/cloud_editor");
-        assert.equal(diffView.editorB.getTheme(), "ace/theme/cloud_editor"); 
+        assert.equal(diffView.editorB.getTheme(), "ace/theme/cloud_editor");
 
         diffView.editorB.setTheme("ace/theme/textmate");
         assert.equal(diffView.editorA.getTheme(), "ace/theme/textmate");
@@ -212,7 +215,7 @@ module.exports = {
 
         diffView.detach();
         checkEventRegistry();
-        
+
     },
     "test: diff at ends": function() {
         var diffProvider = new DiffProvider();
@@ -353,6 +356,7 @@ module.exports = {
 
         editorA.session.setValue(getValueA(simpleDiff));
         editorB.session.setValue(getValueB(simpleDiff));
+        editorA.setOption("customScrollbar", true);
 
         diffView = new InlineDiffView({
             editorA, editorB,
@@ -378,6 +382,8 @@ module.exports = {
 
         assert.ok(!!diffView.editorB.renderer.$gutterLayer.$renderer);
 
+        assert.ok(editorA.renderer.$scrollDecorator instanceof ScrollDiffDecorator);
+
         diffView.detach();
 
         assert.equal(editorA.getOption("wrap"), "free");
@@ -388,9 +394,75 @@ module.exports = {
         assert.equal(editorB.getOption("fadeFoldWidgets"), false);
         assert.equal(editorB.getOption("showFoldWidgets"), true);
         assert.ok(!editorB.renderer.$gutterLayer.$renderer);
+
+        assert.ok(editorA.renderer.$scrollDecorator instanceof Decorator);
     },
+    "test split diff scroll decorators": function(done) {
+        editorA.session.setValue(["a", "b", "c"].join("\n"));
+        editorB.session.setValue(["a", "c", "X"].join("\n"));
+
+        diffView = new DiffView({ editorA, editorB });
+        diffView.setProvider(new DiffProvider());
+        diffView.onInput();
+
+
+        editorA.renderer.$loop._flush();
+        editorB.renderer.$loop._flush();
+
+        setTimeout(() => {
+            assertDecoratorsPlacement(editorA, false);
+            done();
+        }, 0);
+    },
+    "test inline diff scroll decorators": function(done) {
+        editorA.session.setValue(["a", "b", "c"].join("\n"));
+        editorB.session.setValue(["a", "c", "X"].join("\n"));
+
+        diffView = new InlineDiffView({ editorA, editorB, showSideA: true });
+        diffView.setProvider(new DiffProvider());
+        diffView.onInput();
+
+        editorA.renderer.$loop._flush();
+
+        setTimeout(() => {
+            assertDecoratorsPlacement(editorA, true);
+            done();
+        }, 0);
+    }
 };
 
+function findPointFillStyle(imageData, y) {
+    const data = imageData.slice(4 * y, 4 * (y + 1));
+    const a = Math.round(data[3] / 256 * 100);
+    if (a === 100) return "rgb(" + data.slice(0, 3).join(",") + ")";
+    return "rgba(" + data.slice(0, 3).join(",") + "," + (a / 100) + ")";
+}
+
+function assertDecoratorsPlacement(editor, inlineDiff) {
+    const decoA = editor.renderer.$scrollDecorator;
+    const ctxA = decoA.canvas.getContext("2d");
+    const delRow = 1;
+    const offA = decoA.sessionA.documentToScreenRow(delRow, 0) * decoA.lineHeight;
+    const centerA = offA + decoA.lineHeight / 2;
+    const yA = Math.round(decoA.heightRatio * centerA);
+    let imgA = ctxA.getImageData(decoA.oneZoneWidth, 0, 1, decoA.canvasHeight).data;
+    assert.equal(findPointFillStyle(imgA, yA), decoA.colors.light.delete);
+
+    if (inlineDiff) {
+        //make sure that in inline diff, markers fills the whole line (except error decorators part)
+        imgA = ctxA.getImageData(decoA.canvasWidth - 1, 0, 1, decoA.canvasHeight).data;
+        assert.equal(findPointFillStyle(imgA, yA), decoA.colors.light.delete);
+    }
+
+    const xB = decoA.oneZoneWidth * 2;
+    const imgB = ctxA.getImageData(xB, 0, 1, decoA.canvasHeight).data;
+
+    const insRow = 2;
+    const offB = decoA.sessionB.documentToScreenRow(insRow, 0) * decoA.lineHeight;
+    const centerB = offB + decoA.lineHeight / 2;
+    const yB = Math.round(decoA.heightRatio * centerB);
+    assert.equal(findPointFillStyle(imgB, yB), decoA.colors.light.insert);
+}
 
 if (typeof module !== "undefined" && module === require.main) {
     require("asyncjs").test.testcase(module.exports).exec();