fix: restrict annotation mark max height and optimise marks coords on…

… canvas
ajaxorg · Aug 23, 2022 · a6e2259 · a6e2259
1 parent 392b224
commit a6e2259
Showing 1 changed file with 15 additions and 21 deletions.
diff --git a/src/layer/decorators.js b/src/layer/decorators.js
@@ -29,9 +29,9 @@ var Decorator = function (parent, renderer) {
     };
 
     this.colors.light = {
-        "error": "rgba(255, 18, 18, 0.7)",
-        "warning": "rgba(18, 136, 18, 0.7)",
-        "info": "rgba(18, 18, 136, 0.7)"
+        "error": "rgb(255,51,51)",
+        "warning": "rgb(32,133,72)",
+        "info": "rgb(35,68,138)"
     };
 
     parent.element.appendChild(this.canvas);
@@ -46,7 +46,13 @@ var Decorator = function (parent, renderer) {
         if (config) {
             this.maxHeight = config.maxHeight;
             this.lineHeight = config.lineHeight;
-            this.heightRatio = this.canvasHeight / this.maxHeight;
+            this.canvasHeight = config.height;
+            var allLineHeight = (config.lastRow + 1) * this.lineHeight;
+            if (allLineHeight < this.canvasHeight) {
+                this.heightRatio = 1;
+            } else {
+                this.heightRatio = this.canvasHeight / this.maxHeight;
+            }
         }
         var ctx = this.canvas.getContext("2d");
 
@@ -75,14 +81,12 @@ var Decorator = function (parent, renderer) {
             annotations = annotations.sort(compare);
             var foldData = this.renderer.session.$foldData;
 
-            let prevY1 = 0;
-            let prevY2 = 0;
             for (let i = 0; i < annotations.length; i++) {
                 let currentRow = annotations[i].row;
                 let compensateFold = this.compensateFoldRows(currentRow, foldData);
                 let currentY = Math.round((currentRow - compensateFold) * this.lineHeight * this.heightRatio);
-                let y1 = ((currentRow - compensateFold) * this.lineHeight * this.heightRatio) | 0;
-                let y2 = (((currentRow - compensateFold) * this.lineHeight + this.lineHeight) * this.heightRatio) | 0;
+                let y1 = Math.round(((currentRow - compensateFold) * this.lineHeight * this.heightRatio));
+                let y2 = Math.round((((currentRow - compensateFold) * this.lineHeight + this.lineHeight) * this.heightRatio));
                 const height = y2 - y1;
                 if (height < this.minDecorationHeight) {
                     let yCenter = ((y1 + y2) / 2) | 0;
@@ -92,18 +96,8 @@ var Decorator = function (parent, renderer) {
                     else if (yCenter + this.halfMinDecorationHeight > this.canvasHeight) {
                         yCenter = this.canvasHeight - this.halfMinDecorationHeight;
                     }
-                    y1 = yCenter - this.halfMinDecorationHeight;
-                    y2 = yCenter + this.halfMinDecorationHeight;
-                }
-
-                if (y1 > prevY2 + 1) {
-                    prevY1 = y1;
-                    prevY2 = y2;
-                }
-                else {
-                    if (y2 > prevY2) {
-                        prevY2 = y2;
-                    }
+                    y1 = Math.round(yCenter - this.halfMinDecorationHeight);
+                    y2 = Math.round(yCenter + this.halfMinDecorationHeight);
                 }
 
                 switch (annotations[i].type) {
@@ -117,7 +111,7 @@ var Decorator = function (parent, renderer) {
                         ctx.fillStyle = colors.error;
                         break;
                 }
-                ctx.fillRect(0, currentY, this.canvasWidth, prevY2 - prevY1);
+                ctx.fillRect(0, currentY, this.canvasWidth, y2 - y1);
             }
         }
         var cursor = this.renderer.session.selection.getCursor();