Character Measurements (iframe)

spec/lines-yardstick-spec.coffee

@@ -0,0 +1,101 @@
+LinesYardstick = require '../src/lines-yardstick'
+{Point} = require 'text-buffer'
+
+describe "LinesYardstick", ->
+  [linesYardstick, editor, styleNodesToRemove] = []
+
+  styleSheetWithSelectorAndFont = (selector, font) ->
+    styleNode = document.createElement("style")
+    styleNode.innerHTML = """
+    #{selector} {
+      font: #{font};
+    }
+    """
+    document.body.appendChild(styleNode)
+    styleNodesToRemove ?= []
+    styleNodesToRemove.push(styleNode)
+    styleNode
+
+  cleanupStyleSheets = ->
+    styleNode.remove() while styleNode = styleNodesToRemove?.pop()
+
+  beforeEach ->
+    waitsForPromise ->
+      atom.packages.activatePackage('language-javascript')
+
+    waitsForPromise ->
+      atom.project.open('sample.js').then (o) -> editor = o
+
+    runs ->
+      linesYardstick = new LinesYardstick(editor)
+      document.body.appendChild(linesYardstick.getDomNode())
+
+    waitsFor ->
+      linesYardstick.canMeasure()
+
+  afterEach ->
+    linesYardstick.getDomNode().remove()
+    cleanupStyleSheets()
+
+  describe "::buildDomNodesForScreenRows(screenRows)", ->
+    it "asks for a line HTML only once", ->
+      requestedLinesByScreenRow = {}
+      linesYardstick.setLineHtmlProvider (screenRow, line) ->
+        requestedLinesByScreenRow[screenRow] ?= 0
+        requestedLinesByScreenRow[screenRow]++
+
+        "<div></div>"
+
+      linesYardstick.buildDomNodesForScreenRows([0, 1, 2])
+      linesYardstick.buildDomNodesForScreenRows([1, 2, 3])
+      linesYardstick.buildDomNodesForScreenRows([3, 4, 5])
+
+      expect(Object.keys(requestedLinesByScreenRow).length).not.toBe(0)
+      for screenRow, requestsCount of requestedLinesByScreenRow
+        expect(requestsCount).toBe(1)
+
+  describe "::leftPixelPositionForScreenPosition(point)", ->
+    it "measure positions based on stylesheets and default font", ->
+      editor.setText("hello\nworld\n")
+      linesYardstick.setDefaultFont("monospace", "14px")
+      linesYardstick.setLineHtmlProvider (screenRow, line) ->
+        if screenRow is 0
+          "<div>he<span class='bigger'>l</span>lo</div>"
+        else if screenRow is 1
+          "<div>world</div>"
+        else
+          throw new Error("This screen row shouldn't have been requested.")
+
+      linesYardstick.buildDomNodesForScreenRows([0, 1])
+
+      conversionTable = [
+        [new Point(0, 0), {left: 0, top: editor.getLineHeightInPixels() * 0}]
+        [new Point(0, 1), {left: 8, top: editor.getLineHeightInPixels() * 0}]
+        [new Point(0, 3), {left: 24, top: editor.getLineHeightInPixels() * 0}]
+        [new Point(1, 0), {left: 0, top: editor.getLineHeightInPixels() * 1}]
+        [new Point(1, 1), {left: 8, top: editor.getLineHeightInPixels() * 1}]
+        [new Point(1, 4), {left: 32, top: editor.getLineHeightInPixels() * 1}]
+      ]
+
+      for [point, position] in conversionTable
+        expect(
+          linesYardstick.pixelPositionForScreenPosition(point)
+        ).toEqual(position)
+
+      linesYardstick.resetStyleSheets([
+        styleSheetWithSelectorAndFont(".bigger", "16px monospace")
+      ])
+
+      conversionTable = [
+        [new Point(0, 0), {left: 0, top: 0 * editor.getLineHeightInPixels()}]
+        [new Point(0, 1), {left: 8, top: 0 * editor.getLineHeightInPixels()}]
+        [new Point(0, 3), {left: 26, top: 0 * editor.getLineHeightInPixels()}]
+        [new Point(1, 0), {left: 0, top: 1 * editor.getLineHeightInPixels()}]
+        [new Point(1, 1), {left: 8, top: 1 * editor.getLineHeightInPixels()}]
+        [new Point(1, 4), {left: 32, top: 1 * editor.getLineHeightInPixels()}]
+      ]
+
+      for [point, position] in conversionTable
+        expect(
+          linesYardstick.pixelPositionForScreenPosition(point)
+        ).toEqual(position)

spec/text-editor-component-spec.coffee

@@ -5,7 +5,7 @@ TextEditorView = require '../src/text-editor-view'
 TextEditorComponent = require '../src/text-editor-component'
 nbsp = String.fromCharCode(160)
 
-describe "TextEditorComponent", ->
+fdescribe "TextEditorComponent", ->
   [contentNode, editor, wrapperView, wrapperNode, component, componentNode, verticalScrollbarNode, horizontalScrollbarNode] = []
   [lineHeightInPixels, charWidth, nextAnimationFrame, noAnimationFrame, tileSize, tileHeightInPixels] = []
 
@@ -40,6 +40,11 @@ describe "TextEditorComponent", ->
       wrapperNode.setUpdatedSynchronously(false)
 
       {component} = wrapperView
+
+    waitsFor ->
+      component.linesYardstick.canMeasure()
+
+    runs ->
       component.setFontFamily('monospace')
       component.setLineHeight(1.3)
       component.setFontSize(20)
@@ -77,6 +82,37 @@ describe "TextEditorComponent", ->
 
       expect(component.lineNodeForScreenRow(0).textContent).not.toBe("You shouldn't see this update.")
 
+  describe "measurements", ->
+    it "is equivalent to TextEditorPresenter::pixelPositionForScreenPosition", ->
+      screenRows = new Set([0...editor.getScreenLineCount()])
+      component.prepareScreenRowsForMeasurement(screenRows)
+
+      screenRows.forEach (screenRow) ->
+        length = editor.tokenizedLineForScreenRow(screenRow).getMaxScreenColumn()
+
+        for screenColumn in [0..length] by 1
+          point = [screenRow, screenColumn]
+          actual = component.pixelPositionForScreenPosition(point)
+          expected = component.presenter.pixelPositionForScreenPosition(point)
+
+          expect(expected).toEqual(actual)
+
+      component.setFontSize(14)
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      component.prepareScreenRowsForMeasurement(screenRows)
+
+      screenRows.forEach (screenRow) ->
+        length = editor.tokenizedLineForScreenRow(screenRow).getMaxScreenColumn()
+
+        for screenColumn in [0..length] by 1
+          point = [screenRow, screenColumn]
+          actual = component.pixelPositionForScreenPosition(point)
+          expected = component.presenter.pixelPositionForScreenPosition(point)
+
+          expect(expected).toEqual(actual)
+
   describe "line rendering", ->
     expectTileContainsRow = (tileNode, screenRow, {top}) ->
       lineNode = tileNode.querySelector("[data-screen-row='#{screenRow}']")

spec/text-editor-presenter-spec.coffee

@@ -4,12 +4,13 @@ TextBuffer = require 'text-buffer'
 {Point, Range} = TextBuffer
 TextEditor = require '../src/text-editor'
 TextEditorPresenter = require '../src/text-editor-presenter'
+LinesYardstick = require '../src/lines-yardstick'
 
 describe "TextEditorPresenter", ->
   # These `describe` and `it` blocks mirror the structure of the ::state object.
   # Please maintain this structure when adding specs for new state fields.
   describe "::getState()", ->
-    [buffer, editor] = []
+    [buffer, editor, linesYardstick] = []
 
     beforeEach ->
       # These *should* be mocked in the spec helper, but changing that now would break packages :-(
@@ -18,11 +19,20 @@ describe "TextEditorPresenter", ->
 
       buffer = new TextBuffer(filePath: require.resolve('./fixtures/sample.js'))
       editor = new TextEditor({buffer})
+      linesYardstick = new LinesYardstick(editor)
+      linesYardstick.setDefaultFont("monospace", "16px")
+      linesYardstick.setLineHtmlProvider (screenRow, line) ->
+        "<div>#{line.text}</div>"
+      document.body.appendChild(linesYardstick.getDomNode())
+
       waitsForPromise -> buffer.load()
 
+      waitsFor -> linesYardstick.canMeasure()
+
     afterEach ->
       editor.destroy()
       buffer.destroy()
+      linesYardstick.getDomNode().remove()
 
     buildPresenter = (params={}) ->
       _.defaults params,
@@ -39,6 +49,7 @@ describe "TextEditorPresenter", ->
         verticalScrollbarWidth: 10
         scrollTop: 0
         scrollLeft: 0
+        linesYardstick: linesYardstick
 
       new TextEditorPresenter(params)
 
@@ -289,25 +300,16 @@ describe "TextEditorPresenter", ->
           expectStateUpdate presenter, -> presenter.setContentFrameWidth(10 * maxLineLength + 20)
           expect(presenter.getState().horizontalScrollbar.scrollWidth).toBe 10 * maxLineLength + 20
 
-        it "updates when the ::baseCharacterWidth changes", ->
+        it "updates when character widths change", ->
           maxLineLength = editor.getMaxScreenLineLength()
           presenter = buildPresenter(contentFrameWidth: 50, baseCharacterWidth: 10)
 
           expect(presenter.getState().horizontalScrollbar.scrollWidth).toBe 10 * maxLineLength + 1
-          expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(15)
+          expectStateUpdate presenter, ->
+            linesYardstick.setDefaultFont("monospace", "25px")
+            presenter.characterWidthsChanged()
           expect(presenter.getState().horizontalScrollbar.scrollWidth).toBe 15 * maxLineLength + 1
 
-        it "updates when the scoped character widths change", ->
-          waitsForPromise -> atom.packages.activatePackage('language-javascript')
-
-          runs ->
-            maxLineLength = editor.getMaxScreenLineLength()
-            presenter = buildPresenter(contentFrameWidth: 50, baseCharacterWidth: 10)
-
-            expect(presenter.getState().horizontalScrollbar.scrollWidth).toBe 10 * maxLineLength + 1
-            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'support.function.js'], 'p', 20)
-            expect(presenter.getState().horizontalScrollbar.scrollWidth).toBe (10 * (maxLineLength - 2)) + (20 * 2) + 1 # 2 of the characters are 20px wide now instead of 10px wide
-
         it "updates when ::softWrapped changes on the editor", ->
           presenter = buildPresenter(contentFrameWidth: 470, baseCharacterWidth: 10)
           expect(presenter.getState().horizontalScrollbar.scrollWidth).toBe 10 * editor.getMaxScreenLineLength() + 1
@@ -533,12 +535,11 @@ describe "TextEditorPresenter", ->
             presenter = buildPresenter()
             expect(presenter.getState().hiddenInput.width).toBe 10
 
-            expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(15)
+            expectStateUpdate presenter, ->
+              linesYardstick.setDefaultFont("monospace", "25px")
+              presenter.characterWidthsChanged()
             expect(presenter.getState().hiddenInput.width).toBe 15
 
-            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'storage.modifier.js'], 'r', 20)
-            expect(presenter.getState().hiddenInput.width).toBe 20
-
         it "is 2px at the end of lines", ->
           presenter = buildPresenter()
           editor.setCursorBufferPosition([3, Infinity])
@@ -623,25 +624,16 @@ describe "TextEditorPresenter", ->
           expectStateUpdate presenter, -> presenter.setContentFrameWidth(10 * maxLineLength + 20)
           expect(presenter.getState().content.scrollWidth).toBe 10 * maxLineLength + 20
 
-        it "updates when the ::baseCharacterWidth changes", ->
+        it "updates when character widths changes", ->
           maxLineLength = editor.getMaxScreenLineLength()
           presenter = buildPresenter(contentFrameWidth: 50, baseCharacterWidth: 10)
 
           expect(presenter.getState().content.scrollWidth).toBe 10 * maxLineLength + 1
-          expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(15)
+          expectStateUpdate presenter, ->
+            linesYardstick.setDefaultFont("monospace", "25px")
+            presenter.characterWidthsChanged()
           expect(presenter.getState().content.scrollWidth).toBe 15 * maxLineLength + 1
 
-        it "updates when the scoped character widths change", ->
-          waitsForPromise -> atom.packages.activatePackage('language-javascript')
-
-          runs ->
-            maxLineLength = editor.getMaxScreenLineLength()
-            presenter = buildPresenter(contentFrameWidth: 50, baseCharacterWidth: 10)
-
-            expect(presenter.getState().content.scrollWidth).toBe 10 * maxLineLength + 1
-            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'support.function.js'], 'p', 20)
-            expect(presenter.getState().content.scrollWidth).toBe (10 * (maxLineLength - 2)) + (20 * 2) + 1 # 2 of the characters are 20px wide now instead of 10px wide
-
         it "updates when ::softWrapped changes on the editor", ->
           presenter = buildPresenter(contentFrameWidth: 470, baseCharacterWidth: 10)
           expect(presenter.getState().content.scrollWidth).toBe 10 * editor.getMaxScreenLineLength() + 1
@@ -1179,27 +1171,15 @@ describe "TextEditorPresenter", ->
           expect(stateForCursor(presenter, 3)).toEqual {top: 5, left: 12 * 10, width: 10, height: 5}
           expect(stateForCursor(presenter, 4)).toEqual {top: 8 * 5 - 20, left: 4 * 10, width: 10, height: 5}
 
-        it "updates when ::baseCharacterWidth changes", ->
+        it "updates when character widths change", ->
           editor.setCursorBufferPosition([2, 4])
           presenter = buildPresenter(explicitHeight: 20, scrollTop: 20)
 
-          expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(20)
+          expectStateUpdate presenter, ->
+            linesYardstick.setDefaultFont("monospace", "33px")
+            presenter.characterWidthsChanged()
           expect(stateForCursor(presenter, 0)).toEqual {top: 0, left: 4 * 20, width: 20, height: 10}
 
-        it "updates when scoped character widths change", ->
-          waitsForPromise ->
-            atom.packages.activatePackage('language-javascript')
-
-          runs ->
-            editor.setCursorBufferPosition([1, 4])
-            presenter = buildPresenter(explicitHeight: 20)
-
-            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'storage.modifier.js'], 'v', 20)
-            expect(stateForCursor(presenter, 0)).toEqual {top: 1 * 10, left: (3 * 10) + 20, width: 10, height: 10}
-
-            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'storage.modifier.js'], 'r', 20)
-            expect(stateForCursor(presenter, 0)).toEqual {top: 1 * 10, left: (3 * 10) + 20, width: 20, height: 10}
-
         it "updates when cursors are added, moved, hidden, shown, or destroyed", ->
           editor.setSelectedBufferRanges([
             [[1, 2], [1, 2]],
@@ -1513,7 +1493,7 @@ describe "TextEditorPresenter", ->
             ]
           }
 
-        it "updates when ::baseCharacterWidth changes", ->
+        it "updates when character widths change", ->
           editor.setSelectedBufferRanges([
             [[2, 2], [2, 4]],
           ])
@@ -1523,30 +1503,13 @@ describe "TextEditorPresenter", ->
           expectValues stateForSelectionInTile(presenter, 0, 2), {
             regions: [{top: 0, left: 2 * 10, width: 2 * 10, height: 10}]
           }
-          expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(20)
+          expectStateUpdate presenter, ->
+            linesYardstick.setDefaultFont("monospace", "33px")
+            presenter.characterWidthsChanged()
           expectValues stateForSelectionInTile(presenter, 0, 2), {
             regions: [{top: 0, left: 2 * 20, width: 2 * 20, height: 10}]
           }
 
-        it "updates when scoped character widths change", ->
-          waitsForPromise ->
-            atom.packages.activatePackage('language-javascript')
-
-          runs ->
-            editor.setSelectedBufferRanges([
-              [[2, 4], [2, 6]],
-            ])
-
-            presenter = buildPresenter(explicitHeight: 20, scrollTop: 0, tileSize: 2)
-
-            expectValues stateForSelectionInTile(presenter, 0, 2), {
-              regions: [{top: 0, left: 4 * 10, width: 2 * 10, height: 10}]
-            }
-            expectStateUpdate presenter, -> presenter.setScopedCharacterWidth(['source.js', 'keyword.control.js'], 'i', 20)
-            expectValues stateForSelectionInTile(presenter, 0, 2), {
-              regions: [{top: 0, left: 4 * 10, width: 20 + 10, height: 10}]
-            }
-
         it "updates when highlight decorations are added, moved, hidden, shown, or destroyed", ->
           editor.setSelectedBufferRanges([
             [[1, 2], [1, 4]],
@@ -1695,7 +1658,7 @@ describe "TextEditorPresenter", ->
             pixelPosition: {top: 3 * 10 - presenter.state.content.scrollTop, left: 13 * 10}
           }
 
-        it "updates when ::baseCharacterWidth changes", ->
+        it "updates when character widths change", ->
           scrollTop = 20
           marker = editor.markBufferPosition([2, 13], invalidate: 'touch')
           decoration = editor.decorateMarker(marker, {type: 'overlay', item})
@@ -1706,7 +1669,9 @@ describe "TextEditorPresenter", ->
             pixelPosition: {top: 3 * 10 - scrollTop, left: 13 * 10}
           }
 
-          expectStateUpdate presenter, -> presenter.setBaseCharacterWidth(5)
+          expectStateUpdate presenter, ->
+            linesYardstick.setDefaultFont("monospace", "8px")
+            presenter.characterWidthsChanged()
 
           expectValues stateForOverlay(presenter, decoration), {
             item: item