determine text/character position with range api

diff --git a/editor.coffee b/editor.coffee
index 0d6e761..956ade0 100644 (file)
--- a/editor.coffee
+++ b/editor.coffee
@@ -19,6 +19,12 @@ TYPE_TEXT = peach_parser.TYPE_TEXT
 TYPE_COMMENT = peach_parser.TYPE_COMMENT
 TYPE_DOCTYPE = peach_parser.TYPE_DOCTYPE
 
+debug_dot_at = (doc, x, y) ->
+       el = doc.createElement 'div'
+       el.setAttribute 'style', "position: absolute; left: #{x}px; top: #{y}px; width: 1px; height: 3px; background-color: red"
+       doc.body.appendChild el
+       #console.log(new Error().stack)
+
 # text nodes don't have getBoundingClientRect(), so use selection api to find
 # it.
 get_text_bounding_rect = (el) ->
@@ -27,7 +33,7 @@ get_el_bounds = (el) ->
                rect = el.getBoundingClientRect()
        else
                # text nodes don't have getBoundingClientRect(), so use range api
-               range = document.createRange()
+               range = el.ownerDocument.createRange()
                range.selectNodeContents el
                rect = range.getBoundingClientRect()
        doc = el.ownerDocument.documentElement
@@ -43,55 +49,39 @@ get_el_bounds = (el) ->
 
 # figure out the x/y coordinates of where the cursor should be if it's at
 # position ``i`` within text node ``n``
-#
-# implementation: insert a span tag where we want the cursor, and ask the
-# browser where it put that span
 window.cursor_to_xyh = cursor_to_xyh = (n, i) ->
-       parent = n.el.parentNode
-       els = []
-       txts = []
+       range = document.createRange()
        plus_width = false
-       if n.text.length < 2
-               bounds = get_el_offset n.el
-               if i is 1
-                       plus_width = true
+       if n.text.length is 0
+               range.setStart n.el, i
+               range.setEnd n.el, i
+       if i is n.text.length
+               range.setStart n.el, i - 1
+               range.setEnd n.el, i
+               plus_width = true
        else
-               if i is 0 # cursor at start of text
-                       check_i = 0
-                       txts.push n.text.substr 0, 1
-                       txts.push n.text.substr 1
-               else if i is n.text.length # cursor at end of text
-                       check_i = 1
-                       plus_width = true
-                       txts.push n.text.substr 0, n.text.length - 1
-                       txts.push n.text.substr n.text.length - 1
+               range.setStart n.el, i
+               range.setEnd n.el, i + 1
+       # chromium returns bogus results with getBoundingClientRect() when zero width and/or height
+       rect = range.getClientRects()
+       if rect.length > 0
+               if plus_width
+                       # chromium returns multiple rects for the space that is broken
+                       # across lines by word-wrap (firefox doesn't)
+                       rect = rect[rect.length - 1]
                else
-                       check_i = 1
-                       txts.push n.text.substr 0, i
-                       txts.push n.text.substr i, 1
-                       txts.push n.text.substr i + 1
-               for txt, txt_i in txts
-                       el = n.el.ownerDocument.createTextNode txt
-                       if txt_i is check_i
-                               span = n.el.ownerDocument.createElement 'span'
-                               span.appendChild el
-                               el = span
-                       els.push el
-                       parent.insertBefore el, n.el
-               parent.removeChild n.el
-               bounds = get_el_bounds els[check_i]
-               parent.insertBefore n.el, els[0]
-               for el in els
-                       parent.removeChild el
-       ret = x: bounds.x, y: bounds.y, h: bounds.h
+                       rect = rect[0]
+       else
+               return x: 0, y: 0, w: 0, h: 0 # TODO return null, fix callers
+       ret = {
+               x: rect.left
+               y: rect.top
+               w: rect.width ? (rect.right - rect.left)
+               h: rect.height ? (rect.top - rect.bottom)
+       }
        if plus_width
-               ret.x += bounds.w
-       # fudge case where bounds are BS because we're on non-significant whitespace
-       if i > 0
-               first = cursor_to_xyh n, 0
-               if ret.x <= first.x and ret.y is first.y
-                       # no need for a loop here, because recursion
-                       ret = cursor_to_xyh n, i - 1
+               ret.x += ret.w
+       debug_dot_at n.el.ownerDocument, ret.x, ret.y
        return ret
 
 # encode text so it can be safely placed inside an html attribute
@@ -284,9 +274,11 @@ find_loc_cursor_position = (tree, loc) ->
                                after_i = c.text.length
                                after = cursor_to_xyh c, after_i
                                if loc.y < before.y + before.h and loc.x < before.x
-                                       continue # before first char on first line
+                                       # console.log 'before first char on first line'
+                                       continue
                                if loc.y > after.y and loc.x > after.x
-                                       continue # after last char on last line
+                                       # console.log 'after last char on last line'
+                                       continue
                                if loc.y < before.y
                                        console.log "Warning: click in bounding box but above first line"
                                        continue # above first line (runaround?)
@@ -462,6 +454,8 @@ class PeachHTML5Editor
                @clear_dom()
                instantiate_tree @tree, @idoc.body
        move_cursor: (cursor) ->
+               loc = cursor_to_xyh cursor[0], cursor[1]
+               return if loc is null
                @cursor = cursor
                # replace cursor, to reset blink animation
                if @cursor_visible
@@ -470,7 +464,6 @@ class PeachHTML5Editor
                @idoc.body.appendChild @cursor_el
                @cursor_visible = true
                # TODO figure out x,y coords for cursor
-               loc = cursor_to_xyh cursor[0], cursor[1]
                @cursor_el.style.left = "#{loc.x}px"
                @cursor_el.style.top = "#{loc.y}px"