Initial getBounds implementation and tests

khoama · Nov 21, 2014 · 1ec7b46 · 1ec7b46
1 parent f446af1
commit 1ec7b46
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 0 deletions.
diff --git a/src/core/editor.coffee b/src/core/editor.coffee
@@ -75,6 +75,36 @@ class Editor
     else
       @root.focus()
 
+  getBounds: (index) ->
+    this.checkUpdate()
+    [leaf, offset] = @doc.findLeafAt(index, true)
+    throw new Error('Invalid position') unless leaf?
+    containerBounds = @root.parentNode.getBoundingClientRect()
+    if offset == 0
+      bounds = leaf.node.parentNode.getBoundingClientRect()
+      return {
+        height: bounds.height
+        left: bounds.left - containerBounds.left,
+        top: bounds.top - containerBounds.top
+      }
+    else if offset == leaf.length
+      bounds = leaf.node.parentNode.getBoundingClientRect()
+      return {
+        height: bounds.height
+        left: bounds.right - containerBounds.left,
+        top: bounds.top - containerBounds.top
+      }
+    else
+      range = document.createRange()
+      range.setStart(leaf.node, offset)
+      range.setEnd(leaf.node, offset + 1)
+      bounds = range.getBoundingClientRect()
+      return {
+        height: bounds.height
+        left: bounds.left - containerBounds.left,
+        top: bounds.top - containerBounds.top
+      }
+
   getDelta: ->
     return @delta
 

diff --git a/src/quill.coffee b/src/quill.coffee
@@ -133,6 +133,9 @@ class Quill extends EventEmitter2
     delta = new Delta().retain(start).retain(end - start, formats)
     @editor.applyDelta(delta, source)
 
+  getBounds: (index) ->
+    return @editor.getBounds(index)
+
   getContents: (start = 0, end = null) ->
     if _.isObject(start)
       end = start.end

diff --git a/test/unit/core/editor.coffee b/test/unit/core/editor.coffee
@@ -270,4 +270,81 @@ describe('Editor', ->
       expect(@editor.checkUpdate).not.toHaveBeenCalled()
     )
   )
+
+  describe('getBounds()', ->
+    reference = null
+
+    beforeEach( ->
+      @editor.root.style.fontFamily = 'monospace'
+      unless reference?
+        @editor.root.innerHTML = '<div><span>0</span></div>'
+        reference =
+          normal:
+            height: @editor.root.firstChild.firstChild.offsetHeight
+            width: @editor.root.firstChild.firstChild.offsetWidth
+        @editor.root.innerHTML = '<div><span style="font-size: 32px;">0</span></div>'
+        reference.large =
+          height: @editor.root.firstChild.firstChild.offsetHeight
+          width: @editor.root.firstChild.firstChild.offsetWidth
+      @editor.root.innerHTML = '<div>01<span style="font-size: 32px;">23</span>45</div>'
+    )
+
+    it('empty line', ->
+      @editor.root.innerHTML = "<div><br></div>"
+      bounds = @editor.getBounds(0)
+      expect(bounds.height).toBeApproximately(reference.normal.height, 1)
+      expect(bounds.left).toBeApproximately(0, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('start of line', ->
+      bounds = @editor.getBounds(0)
+      expect(bounds.height).toBeApproximately(reference.normal.height, 1)
+      expect(bounds.left).toBeApproximately(0, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('end of line', ->
+      bounds = @editor.getBounds(6)
+      expect(bounds.height).toBeApproximately(reference.normal.height, 1)
+      expect(bounds.left).toBeApproximately(4*reference.normal.width + 2*reference.large.width, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('middle of plain text', ->
+      bounds = @editor.getBounds(1)
+      expect(bounds.height).toBeApproximately(reference.normal.height, 1)
+      expect(bounds.left).toBeApproximately(reference.normal.width, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('middle of formatted text', ->
+      bounds = @editor.getBounds(3)
+      expect(bounds.height).toBeApproximately(reference.large.height, 1)
+      expect(bounds.left).toBeApproximately(2*reference.normal.width + reference.large.width, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('end of plain text start of formatted text', ->
+      bounds = @editor.getBounds(2)
+      expect(bounds.height).toBeApproximately(reference.normal.height, 1)
+      expect(bounds.left).toBeApproximately(2*reference.normal.width, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('end of formatted text start of plain text', ->
+      bounds = @editor.getBounds(4)
+      expect(bounds.height).toBeApproximately(reference.large.height, 1)
+      expect(bounds.left).toBeApproximately(2*reference.normal.width + 2*reference.large.width, 1)
+      expect(bounds.top).toBeApproximately(0, 1)
+    )
+
+    it('second line', ->
+      @editor.root.innerHTML = "<div><br></div><div>0</div>"
+      bounds = @editor.getBounds(2)
+      expect(bounds.height).toBeApproximately(reference.normal.height, 1)
+      expect(bounds.left).toBeApproximately(0, 1)
+      expect(bounds.top).toBeApproximately(reference.normal.height, 1)
+    )
+  )
 )