X-Git-Url: https://jasonwoof.com/gitweb/?a=blobdiff_plain;f=editor.coffee;h=df8ad8accb7ec9036e1303a03f6ca3bcab6c8ed2;hb=ae38e0db8cb6eba45ffb6c1a3e76c1b20efba696;hp=81ee87e724b9d0358828f0116af9658de1019b83;hpb=ab86f7652885536b9760774d0deee176e94dab7d;p=peach-html5-editor.git diff --git a/editor.coffee b/editor.coffee index 81ee87e..df8ad8a 100644 --- a/editor.coffee +++ b/editor.coffee @@ -44,13 +44,12 @@ get_el_bounds = (el) -> h: rect.height ? (rect.top - rect.bottom) } -# figure out the top/left coordinates of where the cursor should be if it's at +# 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 -cursor_to_loc = (n, i) -> - span = domify span: style: "height: 1em; border-left: 1px solid black; margin-left: -1px" +window.cursor_to_xyh = cursor_to_xyh = (n, i) -> parent = n.el.parentNode els = [] txts = [] @@ -87,15 +86,15 @@ cursor_to_loc = (n, i) -> parent.insertBefore n.el, els[0] for el in els parent.removeChild el - ret = top: bounds.y, left: bounds.x + ret = x: bounds.x, y: bounds.y, h: bounds.h if plus_width - ret.left += bounds.w + ret.x += bounds.w # fudge case where bounds are BS because we're on non-significant whitespace if i > 0 - first = cursor_to_loc n, 0 - if ret.left <= first.left + 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_loc n, i - 1 + ret = cursor_to_xyh n, i - 1 return ret # encode text so it can be safely placed inside an html attribute @@ -175,17 +174,15 @@ css += 'height: 1em;' css += 'width: 2px;' css += 'margin-left: -1px;' css += 'margin-right: -1px;' -css += 'background: #000;' -css += '-webkit-animation: 1s blink step-end infinite;' -css += 'animation: 1s blink step-end infinite;' +css += 'background: #444;' +css += '-webkit-animation: blink 1s steps(2, start) infinite;' +css += 'animation: blink 1s steps(2, start) infinite;' css += '}' -css += '@-webkit-keyframes "blink" {' -css += 'from, to { background: #000; }' -css += '50% { background: transparent; }' +css += '@-webkit-keyframes blink {' +css += 'to { visibility: hidden; }' css += '}' -css += '@keyframes "blink" {' -css += 'from, to { background: #000; }' -css += '50% { background: transparent; }' +css += '@keyframes blink {' +css += 'to { visibility: hidden; }' css += '}' # key codes: @@ -228,7 +225,7 @@ traverse_tree = (tree, state, cb) -> traverse_tree c.children, state, cb break if state.done? return state -# find the next element in top (and decendants) that is after n and can contain text +# find the next element in tree (and decendants) that is after n and can contain text # TODO make it so cursor can go places that don't have text but could find_next_cursor_position = (tree, n, i) -> if n? and n.type is TYPE_TEXT and n.text.length > i @@ -263,36 +260,47 @@ find_prev_cursor_position = (tree, n, i) -> return null find_loc_cursor_position = (tree, loc) -> - console.log tree, loc for c in tree if c.type is TYPE_TAG or c.type is TYPE_TEXT bounds = get_el_bounds c.el - console.log bounds - continue if loc.left < bounds.x - continue if loc.left > bounds.x + bounds.w - continue if loc.top < bounds.y - continue if loc.top > bounds.y + bounds.h - if c.type is TYPE_TEXT - # click is within bounding box that contains all text. - return [c, 0] if c.text.length is 0 - #if c.text.length is 1 - # definitely no linebreak in it - #if loc - # - # for inline elements, this can include text in other tags on - # the first or last lines. - # - # they clicked on text. now determine where in the text - tries = {} - cur = Math.floor(c.text.length / 2) - #loop - # xy = tries[cur] = cursor_to_loc c, cur - return [c, cur] + continue if loc.x < bounds.x + continue if loc.x > bounds.x + bounds.w + continue if loc.y < bounds.y + continue if loc.y > bounds.y + bounds.h if c.children.length - console.log "in" ret = find_loc_cursor_position c.children, loc - console.log 'found', ret if ret? return ret if ret? + if c.type is TYPE_TEXT + # click is within bounding box that contains all text. + return [c, 0] if c.text.length is 0 + before_i = 0 + before = cursor_to_xyh c, before_i + 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 + if loc.y > after.y and loc.x > after.x + continue # after last char on last line + if loc.y < before.y + console.log "Warning: click in bounding box but above first line" + continue # above first line (runaround?) + if loc.y > after.y + after.h + console.log "Warning: click in bounding box but below last line", loc.y, after.y, after.h + continue # below last line (shouldn't happen?) + while after_i - before_i > 1 + cur_i = Math.round((before_i + after_i) / 2) + cur = cursor_to_xyh c, cur_i + if loc.y < cur.y or (loc.y <= cur.y + cur.h and loc.x < cur.x) + after_i = cur_i + after = cur + else + before_i = cur_i + before = cur + # which one is closest? + if Math.abs(before.x - loc.x) < Math.abs(after.x - loc.x) + return [c, before_i] + else + return [c, after_i] return null class PeachHTML5Editor @@ -336,7 +344,7 @@ class PeachHTML5Editor @idoc.body.onclick = (e) => # idoc.body.offset().left/top - new_cursor = find_loc_cursor_position @tree, left: e.pageX, top: e.pageY + new_cursor = find_loc_cursor_position @tree, x: e.pageX, y: e.pageY if new_cursor? @move_cursor new_cursor @idoc.body.onkeyup = (e) => @@ -446,10 +454,10 @@ class PeachHTML5Editor @cursor_el = domify div: id: 'peach_html5_editor_cursor' @idoc.body.appendChild @cursor_el @cursor_visible = true - # TODO figure out top/left coords for cursor - loc = cursor_to_loc cursor[0], cursor[1] - @cursor_el.style.top = "#{loc.top}px" - @cursor_el.style.left = "#{loc.left}px" + # 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" window.peach_html5_editor = (args...) -> return new PeachHTML5Editor args...