store markers in the session and not in the renderer

lib/ace/edit_session.js

@@ -50,6 +50,9 @@ var NO_CHANGE_DELTAS = {};
 var EditSession = function(text, mode) {
     this.$modified = true;
     this.$breakpoints = [];
+    this.$frontMarkers = {};
+    this.$backMarkers = {};
+    this.$markerId = 1;
     this.$wrapData = [];
     this.listeners = [];
 
@@ -204,6 +207,44 @@ var EditSession = function(text, mode) {
         return this.$breakpoints;
     };
 
+    this.addMarker = function(range, clazz, type, inFront) {
+        var id = this.$markerId++;
+        
+        var marker = {
+            range : range,
+            type : type || "line",
+            renderer: typeof type == "function" ? type : null,
+            clazz : clazz,
+            inFront: !!inFront
+        }
+        
+        if (inFront) {
+            this.$frontMarkers[id] = marker;
+            this._dispatchEvent("changeFrontMarker")
+        } else {
+            this.$backMarkers[id] = marker;
+            this._dispatchEvent("changeBackMarker")
+        }
+        
+        return id;
+    };
+    
+    this.removeMarker = function(markerId) {
+        var marker = this.$frontMarkers[markerId] || this.$backMarkers[markerId];
+        if (!marker)
+            return;
+            
+        var markers = marker.inFront ? this.$frontMarkers : this.$backMarkers;
+        if (marker) {
+            delete (markers[markerId]);
+            this._dispatchEvent(marker.inFront ? "changeFrontMarker" : "changeBackMarker");
+        }
+    };
+    
+    this.getMarkers = function(inFront) {
+        return inFront ? this.$frontMarkers : this.$backMarkers;
+    };
+    
     /**
      * Error:
      *  {

lib/ace/editor.js

@@ -128,6 +128,8 @@ var Editor =function(renderer, session) {
             this.session.removeEventListener("changeTabSize", this.$onDocumentChangeTabSize);
             this.session.removeEventListener("changeWrapLimit", this.$onDocumentChangeWrapLimit);
             this.session.removeEventListener("changeWrapMode", this.$onDocumentChangeWrapMode);
+            this.session.removeEventListener("changeFrontMarker", this.$onChangeFrontMarker);
+            this.session.removeEventListener("changeBackMarker", this.$onChangeBackMarker);
             this.session.removeEventListener("changeBreakpoint", this.$onDocumentChangeBreakpoint);
             this.session.removeEventListener("changeAnnotation", this.$onDocumentChangeAnnotation);
 
@@ -156,6 +158,12 @@ var Editor =function(renderer, session) {
         this.$onDocumentChangeWrapMode = this.onDocumentChangeWrapMode.bind(this);
         session.addEventListener("changeWrapMode", this.$onDocumentChangeWrapMode);
 
+        this.$onChangeFrontMarker = this.onChangeFrontMarker.bind(this);
+        this.session.addEventListener("changeFrontMarker", this.$onChangeFrontMarker);
+        
+        this.$onChangeBackMarker = this.onChangeBackMarker.bind(this);
+        this.session.addEventListener("changeBackMarker", this.$onChangeBackMarker);
+        
         this.$onDocumentChangeBreakpoint = this.onDocumentChangeBreakpoint.bind(this);
         this.session.addEventListener("changeBreakpoint", this.$onDocumentChangeBreakpoint);
 
@@ -176,6 +184,8 @@ var Editor =function(renderer, session) {
 
         this.onCursorChange();
         this.onSelectionChange();
+        this.onChangeFrontMarker();
+        this.onChangeBackMarker();
         this.onDocumentChangeBreakpoint();
         this.onDocumentChangeAnnotation();
         this.renderer.scrollToRow(session.getScrollTopRow());
@@ -213,7 +223,7 @@ var Editor =function(renderer, session) {
 
     this.$highlightBrackets = function() {
         if (this.$bracketHighlight) {
-            this.renderer.removeMarker(this.$bracketHighlight);
+            this.session.removeMarker(this.$bracketHighlight);
             this.$bracketHighlight = null;
         }
 
@@ -230,7 +240,7 @@ var Editor =function(renderer, session) {
             var pos = self.session.findMatchingBracket(self.getCursorPosition());
             if (pos) {
                 var range = new Range(pos.row, pos.column, pos.row, pos.column+1);
-                self.$bracketHighlight = self.renderer.addMarker(range, "ace_bracket");
+                self.$bracketHighlight = self.session.addMarker(range, "ace_bracket");
             }
         }, 10);
     };
@@ -299,32 +309,40 @@ var Editor =function(renderer, session) {
 
     this.$updateHighlightActiveLine = function() {
         if (this.$highlightLineMarker) {
-            this.renderer.removeMarker(this.$highlightLineMarker);
+            this.session.removeMarker(this.$highlightLineMarker);
         }
         this.$highlightLineMarker = null;
 
         if (this.getHighlightActiveLine() && (this.getSelectionStyle() != "line" || !this.selection.isMultiLine())) {
             var cursor = this.getCursorPosition();
             var range = new Range(cursor.row, 0, cursor.row+1, 0);
-            this.$highlightLineMarker = this.renderer.addMarker(range, "ace_active_line", "line");
+            this.$highlightLineMarker = this.session.addMarker(range, "ace_active_line", "line");
         }
     };
 
     this.onSelectionChange = function(e) {
         if (this.$selectionMarker) {
-            this.renderer.removeMarker(this.$selectionMarker);
+            this.session.removeMarker(this.$selectionMarker);
         }
         this.$selectionMarker = null;
 
         if (!this.selection.isEmpty()) {
             var range = this.selection.getRange();
             var style = this.getSelectionStyle();
-            this.$selectionMarker = this.renderer.addMarker(range, "ace_selection", style);
+            this.$selectionMarker = this.session.addMarker(range, "ace_selection", style);
         }
 
         this.onCursorChange(e);
     };
 
+    this.onChangeFrontMarker = function() {
+        this.renderer.updateFrontMarkers();
+    };
+    
+    this.onChangeBackMarker = function() {
+        this.renderer.updateBackMarkers();
+    };
+    
     this.onDocumentChangeBreakpoint = function() {
         this.renderer.setBreakpoints(this.session.getBreakpoints());
     };

lib/ace/layer/marker.js

@@ -45,9 +45,6 @@ var Marker = function(parentEl) {
     this.element = document.createElement("div");
     this.element.className = "ace_layer ace_marker-layer";
     parentEl.appendChild(this.element);
-
-    this.markers = {};
-    this.$markerId = 1;
 };
 
 (function() {
@@ -56,23 +53,8 @@ var Marker = function(parentEl) {
         this.session = session;
     };
     
-    this.addMarker = function(range, clazz, type) {
+    this.setMarkers = function(markers) {
-        var id = this.$markerId++;
+        this.markers = markers;
-        this.markers[id] = {
-            range : range,
-            type : type || "line",
-            renderer: typeof type == "function" ? type : null,
-            clazz : clazz
-        };
-
-        return id;
-    };
-
-    this.removeMarker = function(markerId) {
-        var marker = this.markers[markerId];
-        if (marker) {
-            delete (this.markers[markerId]);
-        }
     };
 
     this.update = function(config) {

lib/ace/test/mockrenderer.js

@@ -123,7 +123,10 @@ MockRenderer.prototype.draw = function() {
 MockRenderer.prototype.updateLines = function(startRow, endRow) {
 };
 
-MockRenderer.prototype.addMarker = function() {
+MockRenderer.prototype.updateBackMarkers = function() {
+};
+
+MockRenderer.prototype.updateFrontMarkers = function() {
 };
 
 MockRenderer.prototype.setBreakpoints = function() {

lib/ace/virtual_renderer.js

@@ -514,28 +514,14 @@ var VirtualRenderer = function(container, theme) {
         return Math.max(this.$size.scrollerWidth - this.$padding * 2, Math.round(charCount * this.characterWidth));
     };
 
-    this.addMarker = function(range, clazz, type, inFront) {
+    this.updateFrontMarkers = function() {
-        if (inFront) {
+        this.$markerFront.setMarkers(this.session.getMarkers(true));
-            var id = this.$markerFront.addMarker(range, clazz, type);
+        this.$loop.schedule(this.CHANGE_MARKER_FRONT);
-            this.$loop.schedule(this.CHANGE_MARKER_FRONT);
-        }
-        else {
-            var id = this.$markerBack.addMarker(range, clazz, type);
-            this.$loop.schedule(this.CHANGE_MARKER_BACK);
-        }
-        
-        return [id, !!inFront];
     };
 
-    this.removeMarker = function(markerId) {
+    this.updateBackMarkers = function() {
-        if (markerId[1]) {
+        this.$markerBack.setMarkers(this.session.getMarkers());
-            this.$markerFront.removeMarker(markerId[0]);
+        this.$loop.schedule(this.CHANGE_MARKER_BACK);
-            this.$loop.schedule(this.CHANGE_MARKER_FRONT);
-        }
-        else {
-            this.$markerBack.removeMarker(markerId[0]);
-            this.$loop.schedule(this.CHANGE_MARKER_BACK);
-        }
     };
 
     this.addGutterDecoration = function(row, className){