experiment with matting (break clicking)

diff --git a/editor.coffee b/editor.coffee
index e1937a0..2462650 100644 (file)
--- a/editor.coffee
+++ b/editor.coffee
@@ -636,6 +636,7 @@ class PeachHTML5Editor
                @options = options ? {}
                @in_el = in_el
                @tree = []
+               @matting = []
                @inited = false # when iframes have loaded
                @outer_iframe # iframe to hold editor
                @outer_idoc # "document" object for @outer_iframe
@@ -824,6 +825,7 @@ class PeachHTML5Editor
                        @cursor_el.parentNode.removeChild @cursor_el
                        @cursor_visible = false
                @cursor = null
+               @matt null
        move_cursor: (cursor) ->
                loc = cursor_to_xyh cursor[0], cursor[1]
                unless loc?
@@ -838,6 +840,31 @@ class PeachHTML5Editor
                @cursor_visible = true
                @cursor_el.style.left = "#{loc.x + overlay_padding - 1}px"
                @cursor_el.style.top = "#{loc.y + overlay_padding}px"
+               @matt cursor[0]
+       matt: (n) ->
+               while @matting.length > 0
+                       @overlay.removeChild @matting[0]
+                       @matting.shift()
+               return unless n?
+               prev_bounds = x: 0, y: 0, w: 0, h: 0
+               alpha = 0.1
+               while n?.el?
+                       if n.type is TYPE_TEXT
+                               n = n.parent
+                               continue
+                       bounds = get_el_bounds n.el
+                       return unless bounds?
+                       if bounds.x is prev_bounds.x and bounds.y is prev_bounds.y and bounds.w is prev_bounds.w and bounds.h is prev_bounds.h
+                               n = n.parent
+                               continue
+                       matt = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x + overlay_padding}px; top: #{bounds.y + overlay_padding}px; width: #{bounds.w}px; height: #{bounds.h}px; outline: 1000px solid rgba(0,153,255,#{alpha}); border: 1px solid rgba(0,0,0,.3)"
+                       @overlay.appendChild matt
+                       @matting.push matt
+                       ann = domify @outer_idoc, div: style: "position: absolute; left: #{bounds.x - 2 + overlay_padding}px; top: #{bounds.y - 6 + overlay_padding}px; font-size: 8px", children: [domify @outer_idoc, text: "<#{n.name}>"]
+                       @overlay.appendChild ann
+                       @matting.push ann
+                       n = n.parent
+                       alpha *= 1.5
 
 window.peach_html5_editor = (args...) ->
        return new PeachHTML5Editor args...