support css scaling

Author: caizoryan

src/block-cursor.ts

@@ -60,15 +60,19 @@ export class BlockCursorPlugin {
   measureReq: {read: () => Measure, write: (value: Measure) => void}
   cursorLayer: HTMLElement
   cm: CodeMirror
+  scaleX = 1
+  scaleY = 1
 
   constructor(readonly view: EditorView, cm: CodeMirror) {
     this.cm = cm;
     this.measureReq = {read: this.readPos.bind(this), write: this.drawSel.bind(this)}
     this.cursorLayer = view.scrollDOM.appendChild(document.createElement("div"))
     this.cursorLayer.className = "cm-cursorLayer cm-vimCursorLayer"
     this.cursorLayer.setAttribute("aria-hidden", "true")
+    this.cursorLayer.style.position = "absolute"
+    this.scale()
     view.requestMeasure(this.measureReq)
-    this.setBlinkRate() 
+    this.setBlinkRate()
   }
 
   setBlinkRate() {
@@ -78,11 +82,20 @@ export class BlockCursorPlugin {
   }
 
   update(update: ViewUpdate) {
-     if (update.selectionSet || update.geometryChanged || update.viewportChanged) {
+    if (update.selectionSet || update.geometryChanged || update.viewportChanged) {
+      this.scale()
       this.view.requestMeasure(this.measureReq)
       this.cursorLayer.style.animationName = this.cursorLayer.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink"
-     }
-     if (configChanged(update)) this.setBlinkRate();
+    } 
+    if (configChanged(update)) this.setBlinkRate();
+  }
+
+  scale() {
+    let { scaleX, scaleY } = this.view
+    if (scaleX != this.scaleX || scaleY != this.scaleY) {
+      this.scaleX = scaleX; this.scaleY = scaleY
+      this.cursorLayer.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`
+    }
   }
 
   scheduleRedraw() {
@@ -146,7 +159,7 @@ export const hideNativeSelection = Prec.highest(EditorView.theme(themeSpec))
 function getBase(view: EditorView) {
   let rect = view.scrollDOM.getBoundingClientRect()
   let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth
-  return {left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop}
+  return {left: left - view.scrollDOM.scrollLeft * view.scaleX, top: rect.top - view.scrollDOM.scrollTop * view.scaleY}
 }
 
 function measureCursor(cm: CodeMirror, view: EditorView, cursor: SelectionRange, primary: boolean): Piece | null {
@@ -207,10 +220,7 @@ function measureCursor(cm: CodeMirror, view: EditorView, cursor: SelectionRange,
       letter += view.state.sliceDoc(head + 1, head + 2);
     }
     let h = (pos.bottom - pos.top);
-    return new Piece(left - base.left, pos.top - base.top + h * (1 - hCoeff), h * hCoeff,
-                     style.fontFamily, style.fontSize, style.fontWeight, style.color,
-                     primary ? "cm-fat-cursor cm-cursor-primary" : "cm-fat-cursor cm-cursor-secondary",
-                     letter, hCoeff != 1)
+    return new Piece(left - base.left, pos.top - base.top + h * (1 - hCoeff), h * hCoeff, style.fontFamily, parseFloat(style.fontSize) * view.scaleX + "px", style.fontWeight, style.color, primary ? "cm-fat-cursor cm-cursor-primary" : "cm-fat-cursor cm-cursor-secondary", letter, hCoeff != 1)
   } else {
     return null;
   }