Diff editor sync marker by column

src/ext/diff/base_diff_view.js

@@ -1,6 +1,6 @@
 "use strict";
 
 var oop = require("../../lib/oop");
 var Range = require("../../range").Range;
 var dom = require("../../lib/dom");
 var config = require("../../config");
@@ -61,8 +61,8 @@
         this.$syncSelections = false;
         this.$foldUnchangedOnInput = false;
 
-        this.markerB = new DiffHighlight(this, 1);
         this.markerA = new DiffHighlight(this, -1);
+        this.markerB = new DiffHighlight(this, 1);
     }
 
     /**
@@ -466,34 +466,21 @@
     }
 
     syncSelect(selection) {
-        if (this.$updatingSelection) return;
-        var isOld = selection.session === this.sessionA;
+        var isSessionA = selection.session === this.diffSession.sessionA;
         var selectionRange = selection.getRange();
 
-        var currSelectionRange = isOld ? this.selectionRangeA : this.selectionRangeB;
-        if (currSelectionRange && selectionRange.isEqual(currSelectionRange))
+        var currSelectionRange = isSessionA ? this.selectionRangeA : this.selectionRangeB;
+        if (currSelectionRange && selectionRange.isEqual(currSelectionRange)) {
             return;
-
-        if (isOld) {
-            this.selectionRangeA = selectionRange;
-        } else {
-            this.selectionRangeB = selectionRange;
         }
 
-        this.$updatingSelection = true;
-        var newRange = this.transformRange(selectionRange, isOld);
+        var newRange = this.transformRange(selectionRange, isSessionA);
+        [this.selectionRangeA, this.selectionRangeB] = isSessionA
+            ? [selectionRange, newRange]
+            : [newRange, selectionRange];
 
         if (this.$syncSelections) {
-            (isOld ? this.editorB : this.editorA).session.selection.setSelectionRange(newRange);
-        }
-        this.$updatingSelection = false;
-
-        if (isOld) {
-            this.selectionRangeA = selectionRange;
-            this.selectionRangeB = newRange;
-        } else {
-            this.selectionRangeA = newRange;
-            this.selectionRangeB = selectionRange;
+            (isSessionA ? this.editorB : this.editorA).session.selection.setSelectionRange(newRange);
         }
 
         this.updateSelectionMarker(this.syncSelectionMarkerA, this.sessionA, this.selectionRangeA);

src/ext/diff/diff_test.js

@@ -429,6 +429,33 @@ module.exports = {
             done();
         }, 0);
     },
+    "test: column selection": function() {
+        var diffProvider = new DiffProvider();
+
+        editorA.session.setValue(getValueA(simpleDiff));
+        editorB.session.setValue(getValueB(simpleDiff));
+
+        diffView = new SplitDiffView({
+            editorA, editorB,
+            diffProvider,
+        });
+
+        function getColumnSyncSelectionMarker(editor) {
+            return Object.values(editor.session.$frontMarkers).filter(function(i) {
+                return i.clazz === "ace_diff double-triangle";
+            })[0];
+        }
+
+        var syncSelectionMarkerB = getColumnSyncSelectionMarker(editorB);
+
+        editorA.execCommand("selectdown");
+        editorA.execCommand("selectright");
+        editorA.renderer.$loop._flush();
+        editorB.renderer.$loop._flush();
+
+        assert.jsonEquals(syncSelectionMarkerB.range.start, {row: 0, column: 0});
+        assert.jsonEquals(syncSelectionMarkerB.range.end, {row: 1, column: 2});
+    },
     "test: second editor destroyed on detach in inline diff view": function() {
         diffView = new InlineDiffView({ editorA, inline: "a" });
         assert.ok(Array.isArray(diffView.otherEditor.$toDestroy));

src/ext/diff/split_diff_view.js

@@ -2,6 +2,7 @@
 
 var BaseDiffView = require("./base_diff_view").BaseDiffView;
 var config = require("../../config");
+var Range = require("../../range").Range;
 
 class SplitDiffView extends BaseDiffView {
     /**
@@ -143,6 +144,38 @@
         }
     }
 
+    initSelectionMarkers() {
+        super.initSelectionMarkers();
+
+        this.syncSelectionColumnMarkerA = new SyncSelectionColumnMarker();
+        this.syncSelectionColumnMarkerB = new SyncSelectionColumnMarker();
+        this.sessionA.addDynamicMarker(this.syncSelectionColumnMarkerA, true);
+        this.sessionB.addDynamicMarker(this.syncSelectionColumnMarkerB, true);
+    }
+    clearSelectionMarkers() {
+        super.clearSelectionMarkers();
+
+        this.sessionA.removeMarker(this.syncSelectionColumnMarkerA.id);
+        this.sessionB.removeMarker(this.syncSelectionColumnMarkerB.id);
+    }
+
+    syncSelect(selection) {
+        super.syncSelect(selection);
+
+        let isSessionA = selection.session === this.diffSession.sessionA;
+
+        let columnSelectionRangeA, columnSelectionRangeB;
+
+        if (!this.$syncSelections) {
+            isSessionA
+                ? columnSelectionRangeB = this.selectionRangeB
+                : columnSelectionRangeA = this.selectionRangeA;
+        }
+
+        this.updateSelectionMarker(this.syncSelectionColumnMarkerA, this.diffSession.sessionA, columnSelectionRangeA);
+        this.updateSelectionMarker(this.syncSelectionColumnMarkerB, this.diffSession.sessionB, columnSelectionRangeB);
+    }
+
     $attachSessionsEventHandlers() {
         this.$attachSessionEventHandlers(this.editorA, this.markerA);
         this.$attachSessionEventHandlers(this.editorB, this.markerB);
@@ -211,5 +244,30 @@
     }
 }
 
+class SyncSelectionColumnMarker {
+    constructor() {
+        /**@type{number}*/this.id;
+        this.type = "";
+        this.clazz = "ace_diff double-triangle";
+    }
+
+    update(html, markerLayer, session, config) {
+    }
+
+    /**
+     * @param {Range} range
+     */
+    setRange(range) {//TODO
+        if (!range) {
+            this.range = null;
+            return;
+        }
+        let newRange = range.clone();
+        newRange.end.column++;
+
+        this.range = newRange;
+    }
+}
+
 
 exports.SplitDiffView = SplitDiffView;

src/ext/diff/styles-css.js

@@ -55,6 +55,39 @@ exports.cssText = `
     border-color: #9191ac;
 }
 
+.ace_diff.double-triangle::before,
+.ace_diff.double-triangle::after {
+    content: "";
+    position: absolute;
+}
+
+.ace_diff.double-triangle.ace_start::before {
+    left: 0;
+    border: solid black 3px;
+    border-bottom-color: transparent;
+    border-right-color: transparent;
+}
+
+.ace_diff.double-triangle.ace_end::after {
+    right: 0;
+    bottom: 0;
+    border: solid black 3px;
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+
+
+/*
+ * Dark Colors 
+ */
+
+.ace_dark .ace_diff.insert.inline {
+    background-color: rgba(0, 130, 58, 0.45);
+}
+.ace_dark .ace_diff.delete.inline {
+    background-color: rgba(169, 46, 33, 0.55);
+}
+
 .ace_dark .ace_diff-active-line {
     background: transparent;
     border-color: #75777a;

src/layer/marker.js

@@ -92,7 +92,7 @@ class Marker {
                 else
                     this.drawMultiLineMarker(html, range, marker.clazz, config);
             } else {
-                this.drawSingleLineMarker(html, range, marker.clazz + " ace_start" + " ace_br15", config);
+                this.drawSingleLineMarker(html, range, marker.clazz + " ace_start ace_end" + " ace_br15", config);
             }
         }
         if (this.i !=-1) {
@@ -135,7 +135,7 @@ class Marker {
             curr = next;
             next = row + 1 < end ? session.getScreenLastRowColumn(row + 1) : row == end ? 0 : range.end.column;
             this.drawSingleLineMarker(stringBuilder, lineRange, 
-                clazz + (row == start  ? " ace_start" : "") + " ace_br"
+                clazz + (row == start  ? " ace_start" : row == end ? " ace_end" : "") + " ace_br"
                     + getBorderClass(row == start || row == start + 1 && range.start.column, prev < curr, curr > next, row == end),
                 layerConfig, row == end ? 0 : 1, extraStyle);
         }
@@ -179,7 +179,7 @@ class Marker {
             var width = range.end.column * config.characterWidth;
 
             this.elt(
-                clazz + " ace_br12",
+                clazz + " ace_br12 ace_end",
                 "height:"+ height+ "px;"+
                 "width:"+ width+ "px;"+
                 "top:"+ top+ "px;"+

types/ace-ext.d.ts

@@ -228,7 +228,7 @@ declare module "ace-code/src/ext/diff/scroll_diff_decorator" {
     import { Decorator } from "ace-code/src/layer/decorators";
 }
 declare module "ace-code/src/ext/diff/styles-css" {
-    export const cssText: "\n/*\n * Line Markers\n */\n.ace_diff {\n    position: absolute;\n    z-index: 0;\n}\n.ace_diff.inline {\n    z-index: 20;\n}\n/*\n * Light Colors \n */\n.ace_diff.insert {\n    background-color: #EFFFF1;\n}\n.ace_diff.delete {\n    background-color: #FFF1F1;\n}\n.ace_diff.aligned_diff {\n    background: rgba(206, 194, 191, 0.26);\n    background: repeating-linear-gradient(\n                45deg,\n              rgba(122, 111, 108, 0.26),\n              rgba(122, 111, 108, 0.26) 5px,\n              rgba(0, 0, 0, 0) 5px,\n              rgba(0, 0, 0, 0) 10px \n    );\n}\n\n.ace_diff.insert.inline {\n    background-color:  rgb(74 251 74 / 18%); \n}\n.ace_diff.delete.inline {\n    background-color: rgb(251 74 74 / 15%);\n}\n\n.ace_diff.delete.inline.empty {\n    background-color: rgba(255, 128, 79, 0.7);\n    width: 2px !important;\n}\n\n.ace_diff.insert.inline.empty {\n    background-color: rgba(49, 230, 96, 0.7);\n    width: 2px !important;\n}\n\n.ace_diff-active-line {\n    border-bottom: 1px solid;\n    border-top: 1px solid;\n    background: transparent;\n    position: absolute;\n    box-sizing: border-box;\n    border-color: #9191ac;\n}\n\n.ace_dark .ace_diff-active-line {\n    background: transparent;\n    border-color: #75777a;\n}\n \n\n/* gutter changes */\n.ace_mini-diff_gutter-enabled > .ace_gutter-cell,\n.ace_mini-diff_gutter-enabled > .ace_gutter-cell_svg-icons {\n    padding-right: 13px;\n}\n\n.ace_mini-diff_gutter_other > .ace_gutter-cell,\n.ace_mini-diff_gutter_other > .ace_gutter-cell_svg-icons  {\n    display: none;\n}\n\n.ace_mini-diff_gutter_other {\n    pointer-events: none;\n}\n\n\n.ace_mini-diff_gutter-enabled > .mini-diff-added {\n    background-color: #EFFFF1;\n    border-left: 3px solid #2BB534;\n    padding-left: 16px;\n    display: block;\n}\n\n.ace_mini-diff_gutter-enabled > .mini-diff-deleted {\n    background-color: #FFF1F1;\n    border-left: 3px solid #EA7158;\n    padding-left: 16px;\n    display: block;\n}\n\n\n.ace_mini-diff_gutter-enabled > .mini-diff-added:after {\n    position: absolute;\n    right: 2px;\n    content: \"+\";\n    color: darkgray;\n    background-color: inherit;\n}\n\n.ace_mini-diff_gutter-enabled > .mini-diff-deleted:after {\n    position: absolute;\n    right: 2px;\n    content: \"-\";\n    color: darkgray;\n    background-color: inherit;\n}\n.ace_fade-fold-widgets:hover > .ace_folding-enabled > .mini-diff-added:after,\n.ace_fade-fold-widgets:hover > .ace_folding-enabled > .mini-diff-deleted:after {\n    display: none;\n}\n\n.ace_diff_other .ace_selection {\n    filter: drop-shadow(1px 2px 3px darkgray);\n}\n\n.ace_hidden_marker-layer .ace_bracket {\n    display: none;\n}\n\n\n\n/*\n * Dark Colors \n */\n\n.ace_dark .ace_diff.insert {\n    background-color: #212E25;\n}\n.ace_dark .ace_diff.delete {\n    background-color: #3F2222;\n}\n\n.ace_dark .ace_mini-diff_gutter-enabled > .mini-diff-added {\n    background-color: #212E25;\n    border-left-color:#00802F;\n}\n\n.ace_dark .ace_mini-diff_gutter-enabled > .mini-diff-deleted {\n    background-color: #3F2222;\n    border-left-color: #9C3838;\n}\n\n";
+    export const cssText: "\n/*\n * Line Markers\n */\n.ace_diff {\n    position: absolute;\n    z-index: 0;\n}\n.ace_diff.inline {\n    z-index: 20;\n}\n/*\n * Light Colors \n */\n.ace_diff.insert {\n    background-color: #EFFFF1;\n}\n.ace_diff.delete {\n    background-color: #FFF1F1;\n}\n.ace_diff.aligned_diff {\n    background: rgba(206, 194, 191, 0.26);\n    background: repeating-linear-gradient(\n                45deg,\n              rgba(122, 111, 108, 0.26),\n              rgba(122, 111, 108, 0.26) 5px,\n              rgba(0, 0, 0, 0) 5px,\n              rgba(0, 0, 0, 0) 10px \n    );\n}\n\n.ace_diff.insert.inline {\n    background-color:  rgb(74 251 74 / 18%); \n}\n.ace_diff.delete.inline {\n    background-color: rgb(251 74 74 / 15%);\n}\n\n.ace_diff.delete.inline.empty {\n    background-color: rgba(255, 128, 79, 0.7);\n    width: 2px !important;\n}\n\n.ace_diff.insert.inline.empty {\n    background-color: rgba(49, 230, 96, 0.7);\n    width: 2px !important;\n}\n\n.ace_diff-active-line {\n    border-bottom: 1px solid;\n    border-top: 1px solid;\n    background: transparent;\n    position: absolute;\n    box-sizing: border-box;\n    border-color: #9191ac;\n}\n\n.ace_diff.double-triangle::before,\n.ace_diff.double-triangle::after {\n    content: \"\";\n    position: absolute;\n}\n\n.ace_diff.double-triangle.ace_start::before {\n    left: 0;\n    border: solid black 3px;\n    border-bottom-color: transparent;\n    border-right-color: transparent;\n}\n\n.ace_diff.double-triangle.ace_end::after {\n    right: 0;\n    bottom: 0;\n    border: solid black 3px;\n    border-top-color: transparent;\n    border-left-color: transparent;\n}\n\n\n/*\n * Dark Colors \n */\n\n.ace_dark .ace_diff.insert.inline {\n    background-color: rgba(0, 130, 58, 0.45);\n}\n.ace_dark .ace_diff.delete.inline {\n    background-color: rgba(169, 46, 33, 0.55);\n}\n\n.ace_dark .ace_diff-active-line {\n    background: transparent;\n    border-color: #75777a;\n}\n \n\n/* gutter changes */\n.ace_mini-diff_gutter-enabled > .ace_gutter-cell,\n.ace_mini-diff_gutter-enabled > .ace_gutter-cell_svg-icons {\n    padding-right: 13px;\n}\n\n.ace_mini-diff_gutter_other > .ace_gutter-cell,\n.ace_mini-diff_gutter_other > .ace_gutter-cell_svg-icons  {\n    display: none;\n}\n\n.ace_mini-diff_gutter_other {\n    pointer-events: none;\n}\n\n\n.ace_mini-diff_gutter-enabled > .mini-diff-added {\n    background-color: #EFFFF1;\n    border-left: 3px solid #2BB534;\n    padding-left: 16px;\n    display: block;\n}\n\n.ace_mini-diff_gutter-enabled > .mini-diff-deleted {\n    background-color: #FFF1F1;\n    border-left: 3px solid #EA7158;\n    padding-left: 16px;\n    display: block;\n}\n\n\n.ace_mini-diff_gutter-enabled > .mini-diff-added:after {\n    position: absolute;\n    right: 2px;\n    content: \"+\";\n    color: darkgray;\n    background-color: inherit;\n}\n\n.ace_mini-diff_gutter-enabled > .mini-diff-deleted:after {\n    position: absolute;\n    right: 2px;\n    content: \"-\";\n    color: darkgray;\n    background-color: inherit;\n}\n.ace_fade-fold-widgets:hover > .ace_folding-enabled > .mini-diff-added:after,\n.ace_fade-fold-widgets:hover > .ace_folding-enabled > .mini-diff-deleted:after {\n    display: none;\n}\n\n.ace_diff_other .ace_selection {\n    filter: drop-shadow(1px 2px 3px darkgray);\n}\n\n.ace_hidden_marker-layer .ace_bracket {\n    display: none;\n}\n\n\n\n/*\n * Dark Colors \n */\n\n.ace_dark .ace_diff.insert {\n    background-color: #212E25;\n}\n.ace_dark .ace_diff.delete {\n    background-color: #3F2222;\n}\n\n.ace_dark .ace_mini-diff_gutter-enabled > .mini-diff-added {\n    background-color: #212E25;\n    border-left-color:#00802F;\n}\n\n.ace_dark .ace_mini-diff_gutter-enabled > .mini-diff-deleted {\n    background-color: #3F2222;\n    border-left-color: #9C3838;\n}\n\n";
 }
 declare module "ace-code/src/ext/diff/gutter_decorator" {
     export class MinimalGutterDiffDecorator {
@@ -291,8 +291,19 @@ declare module "ace-code/src/ext/diff/split_diff_view" {
         scrollB: any;
         scrollSetBy: any;
         scrollSetAt: number;
+        syncSelectionColumnMarkerA: SyncSelectionColumnMarker;
+        syncSelectionColumnMarkerB: SyncSelectionColumnMarker;
     }
     import { BaseDiffView } from "ace-code/src/ext/diff/base_diff_view";
+    class SyncSelectionColumnMarker {
+        id: number;
+        type: string;
+        clazz: string;
+        update(html: any, markerLayer: any, session: any, config: any): void;
+        setRange(range: Range): void;
+        range: Range;
+    }
+    import { Range } from "ace-code/src/range";
 }
 declare module "ace-code/src/ext/diff/providers/default" {
     export function computeDiff(originalLines: any, modifiedLines: any, options: any): any;
@@ -439,8 +450,8 @@ declare module "ace-code/src/ext/diff/base_diff_view" {
             compute: (val1: any, val2: any, options: any) => any[];
         };
         container: HTMLElement;
-        markerB: DiffHighlight;
         markerA: DiffHighlight;
+        markerB: DiffHighlight;
         showSideA: boolean;
         savedOptionsA: Partial<import("ace-code").Ace.EditorOptions>;
         savedOptionsB: Partial<import("ace-code").Ace.EditorOptions>;