use initinite canvas for painting

ajaxorg · Mar 28, 2018 · 09ae2c8 · 09ae2c8
1 parent 06276c9
commit 09ae2c8
Show file tree

Hide file tree

Showing 11 changed files with 386 additions and 170 deletions.
diff --git a/lib/ace/css/editor.css b/lib/ace/css/editor.css
@@ -24,6 +24,11 @@
     position: absolute;
     box-sizing: border-box;
     min-width: 100%;
+    will-change: transform;
+    backface-visibility: hidden;
+    contain: strict;
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
 .ace_dragging .ace_scroller:before{
@@ -49,14 +54,15 @@
     overflow : hidden;
     width: auto;
     top: 0;
-    bottom: 0;
     left: 0;
     cursor: default;
     z-index: 4;
     -ms-user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    will-change: transform;
+    backface-visibility: hidden;
 }
 
 .ace_gutter-active-line {
@@ -70,6 +76,10 @@
 }
 
 .ace_gutter-cell {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
     padding-left: 19px;
     padding-right: 6px;
     background-repeat: no-repeat;
@@ -95,6 +105,7 @@
 }
 
 .ace_scrollbar {
+    contain: strict;
     position: absolute;
     right: 0;
     bottom: 0;
@@ -188,10 +199,32 @@
     width: auto;
     text-align: right;
     pointer-events: auto;
+    height: 1000000px;
+    will-change: transform;
+    backface-visibility: hidden;
+    contain: strict;
 }
 
 .ace_text-layer {
     font: inherit !important;
+    position: absolute;
+    height: 1000000px;
+    width: 1000000px;
+    will-change: transform;
+    backface-visibility: hidden;
+    contain: strict;
+}
+
+.ace_text-layer div {
+    contain: strict;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}
+
+.ace_text-layer .ace_line_group .ace_line {
+    position: relative;
 }
 
 .ace_cjk {

diff --git a/lib/ace/edit_session.js b/lib/ace/edit_session.js
@@ -1159,7 +1159,6 @@ EditSession.$uid = 0;
             }
         }
         if (!dontSelect && this.$undoSelect) {
-            // console.log(deltas.selectionBefore + "uuu")
             if (deltas.selectionBefore)
                 this.selection.fromJSON(deltas.selectionBefore);
             else

diff --git a/lib/ace/layer/cursor.js b/lib/ace/layer/cursor.js
@@ -60,14 +60,15 @@ var Cursor = function(parentEl) {
     this.$updateVisibility = function(val) {
         var cursors = this.cursors;
         for (var i = cursors.length; i--; )
-            cursors[i].style.visibility = val ? "" : "hidden";
+            dom.setStyle(cursors[i].style, "visibility", val ? "" : "hidden");
     };
+
     this.$updateOpacity = function(val) {
         var cursors = this.cursors;
         for (var i = cursors.length; i--; )
-            cursors[i].style.opacity = val ? "" : "0";
+            dom.setStyle(cursors[i].style, "opacity", val ? "" : "0");
     };
-    
+
     this.$startCssAnimation = function() {
         var cursors = this.cursors;
         for (var i = cursors.length; i--; )
@@ -148,15 +149,17 @@ var Cursor = function(parentEl) {
         clearInterval(this.intervalId);
         clearTimeout(this.timeoutId);
         this.$stopCssAnimation();
-        
+
         if (this.smoothBlinking) {
             dom.removeCssClass(this.element, "ace_smooth-blinking");
         }
 
         update(true);
 
-        if (!this.isBlinking || !this.blinkInterval || !this.isVisible)
+        if (!this.isBlinking || !this.blinkInterval || !this.isVisible) {
+            this.$stopCssAnimation();
             return;
+        }
 
         if (this.smoothBlinking) {
             setTimeout(function(){
@@ -198,6 +201,10 @@ var Cursor = function(parentEl) {
         return {left : cursorLeft, top : cursorTop};
     };
 
+    this.isCursorInView = function(pixelPos, config) {
+        return pixelPos.top >= 0 && pixelPos.top < config.maxHeight;
+    };
+
     this.update = function(config) {
         this.config = config;
 
@@ -215,13 +222,18 @@ var Cursor = function(parentEl) {
                 continue;
             }
 
-            var style = (this.cursors[cursorIndex++] || this.addCursor()).style;
+            var element = this.cursors[cursorIndex++] || this.addCursor();
+            var style = element.style;
 
             if (!this.drawCursor) {
-                style.left = pixelPos.left + "px";
-                style.top = pixelPos.top + "px";
-                style.width = config.characterWidth + "px";
-                style.height = config.lineHeight + "px";
+                if (!this.isCursorInView(pixelPos, config)) {
+                    dom.setStyle(style, "display", "none");
+                } else {
+                    dom.setStyle(style, "display", "block");
+                    dom.translate(element, pixelPos.left, pixelPos.top);
+                    dom.setStyle(style, "width", Math.round(config.characterWidth) + "px");
+                    dom.setStyle(style, "height", config.lineHeight + "px");
+                }
             } else {
                 this.drawCursor(style, pixelPos, config, selections[i], this.session);
             }