6 $svg = null # jquery object for svg element
7 svg = null # dom object for svg element
9 svg_ns = 'http://www.w3.org/2000/svg'
12 update_path = (path, data, flags) ->
19 d += "#{loc[0]} #{loc[1]}"
21 d += "L #{mouse[0]} #{mouse[1]}"
24 path.setAttribute "d", d
28 update_path selection.element, selection.data
31 stop_close_drawing = ->
33 update_path selection.element, selection.data, close: true
38 path = document.createElementNS svg_ns, "path"
39 selection = data: [], element: path
41 selection.data.push [x, y]
42 update_path selection.element, selection.data
47 update_path selection.element, selection.data, to_mouse: true
49 # called automatically on domcontentloaded
51 $container = $ '.crayon_mockup'
52 $stop_button = $ '<span class="button">stop drawing</span>'
53 $stop_close_button = $ '<span class="button">stop drawing, close loop</span>'
54 $tools = $ '<div class="toolbar"></div>'
55 $tools.append $stop_button
56 $tools.append $stop_close_button
57 $stop_button.click stop_drawing
58 $stop_close_button.click stop_close_drawing
59 $container.append $tools
60 svg = document.createElementNS svg_ns, 'svg'
61 svg.setAttribute 'width', width
62 svg.setAttribute 'height', height
63 svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
65 $container.append $svg
67 offset = $svg.offset()
68 click e.pageX - offset.left, e.pageY - offset.top
71 offset = $svg.offset()
72 mousemove e.pageX - offset.left, e.pageY - offset.top