@@ -5,30 +5,30 @@ var event = require("../lib/event");
55var useragent = require ( "../lib/useragent" ) ;
66var EventEmitter = require ( "../lib/event_emitter" ) . EventEmitter ;
77
8- var CHAR_COUNT = 256 ;
8+ var DEFAULT_CHAR_COUNT = 250 ;
99var USE_OBSERVER = typeof ResizeObserver == "function" ;
1010var L = 200 ;
1111
12- var FontMetrics = exports . FontMetrics = function ( parentEl ) {
12+ var FontMetrics = exports . FontMetrics = function ( parentEl , charCount ) {
13+ this . charCount = charCount || DEFAULT_CHAR_COUNT ;
14+
1315 this . el = dom . createElement ( "div" ) ;
1416 this . $setMeasureNodeStyles ( this . el . style , true ) ;
15-
17+
1618 this . $main = dom . createElement ( "div" ) ;
1719 this . $setMeasureNodeStyles ( this . $main . style ) ;
18-
20+
1921 this . $measureNode = dom . createElement ( "div" ) ;
2022 this . $setMeasureNodeStyles ( this . $measureNode . style ) ;
21-
22-
23+
2324 this . el . appendChild ( this . $main ) ;
2425 this . el . appendChild ( this . $measureNode ) ;
2526 parentEl . appendChild ( this . el ) ;
26-
27- this . $measureNode . textContent = lang . stringRepeat ( "X" , CHAR_COUNT ) ;
28-
27+
28+ this . $measureNode . textContent = lang . stringRepeat ( "X" , this . charCount ) ;
29+
2930 this . $characterSize = { width : 0 , height : 0 } ;
30-
31-
31+
3232 if ( USE_OBSERVER )
3333 this . $addObserver ( ) ;
3434 else
@@ -38,9 +38,9 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
3838( function ( ) {
3939
4040 oop . implement ( this , EventEmitter ) ;
41-
41+
4242 this . $characterSize = { width : 0 , height : 0 } ;
43-
43+
4444 this . $setMeasureNodeStyles = function ( style , isRoot ) {
4545 style . width = style . height = "auto" ;
4646 style . left = style . top = "0px" ;
@@ -69,7 +69,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
6969 this . _emit ( "changeCharacterSize" , { data : size } ) ;
7070 }
7171 } ;
72-
72+
7373 this . $addObserver = function ( ) {
7474 var self = this ;
7575 this . $observer = new window . ResizeObserver ( function ( e ) {
@@ -83,13 +83,13 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
8383 if ( this . $pollSizeChangesTimer || this . $observer )
8484 return this . $pollSizeChangesTimer ;
8585 var self = this ;
86-
86+
8787 return this . $pollSizeChangesTimer = event . onIdle ( function cb ( ) {
8888 self . checkForSizeChanges ( ) ;
8989 event . onIdle ( cb , 500 ) ;
9090 } , 500 ) ;
9191 } ;
92-
92+
9393 this . setPolling = function ( val ) {
9494 if ( val ) {
9595 this . $pollSizeChanges ( ) ;
@@ -100,24 +100,32 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
100100 } ;
101101
102102 this . $measureSizes = function ( node ) {
103- var size = {
104- height : ( node || this . $measureNode ) . clientHeight ,
105- width : ( node || this . $measureNode ) . clientWidth / CHAR_COUNT
103+ node = node || this . $measureNode ;
104+
105+ // Avoid `Element.clientWidth` since it is rounded to an integer (see
106+ // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth).
107+ // Using it here can result in a noticeable cursor offset for long lines.
108+ const rect = node . getBoundingClientRect ( ) ;
109+ const charSize = {
110+ height : rect . height ,
111+ width : rect . width / this . charCount
106112 } ;
107-
113+
108114 // Size and width can be null if the editor is not visible or
109115 // detached from the document
110- if ( size . width === 0 || size . height === 0 )
116+ if ( charSize . width === 0 || charSize . height === 0 )
111117 return null ;
112- return size ;
118+ return charSize ;
113119 } ;
114120
115121 this . $measureCharWidth = function ( ch ) {
116- this . $main . textContent = lang . stringRepeat ( ch , CHAR_COUNT ) ;
122+ this . $main . textContent = lang . stringRepeat ( ch , this . charCount ) ;
123+ // Avoid `Element.clientWidth` since it is rounded to an integer (see
124+ // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth).
117125 var rect = this . $main . getBoundingClientRect ( ) ;
118- return rect . width / CHAR_COUNT ;
126+ return rect . width / this . charCount ;
119127 } ;
120-
128+
121129 this . getCharacterWidth = function ( ch ) {
122130 var w = this . charSizes [ ch ] ;
123131 if ( w === undefined ) {
@@ -134,7 +142,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
134142 this . el . parentNode . removeChild ( this . el ) ;
135143 } ;
136144
137-
145+
138146 this . $getZoom = function getZoom ( element ) {
139147 if ( ! element || ! element . parentElement ) return 1 ;
140148 return ( window . getComputedStyle ( element ) . zoom || 1 ) * getZoom ( element . parentElement ) ;
@@ -171,7 +179,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
171179
172180 if ( ! this . els )
173181 this . $initTransformMeasureNodes ( ) ;
174-
182+
175183 function p ( el ) {
176184 var r = el . getBoundingClientRect ( ) ;
177185 return [ r . left , r . top ] ;
@@ -186,7 +194,7 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
186194
187195 var m1 = mul ( 1 + h [ 0 ] , sub ( b , a ) ) ;
188196 var m2 = mul ( 1 + h [ 1 ] , sub ( c , a ) ) ;
189-
197+
190198 if ( elPos ) {
191199 var x = elPos ;
192200 var k = h [ 0 ] * x [ 0 ] / L + h [ 1 ] * x [ 1 ] / L + 1 ;
@@ -197,5 +205,5 @@ var FontMetrics = exports.FontMetrics = function(parentEl) {
197205 var f = solve ( sub ( m1 , mul ( h [ 0 ] , u ) ) , sub ( m2 , mul ( h [ 1 ] , u ) ) , u ) ;
198206 return mul ( L , f ) ;
199207 } ;
200-
208+
201209} ) . call ( FontMetrics . prototype ) ;
0 commit comments