From: Jason Woofenden Date: Sun, 24 May 2015 17:40:36 +0000 (-0400) Subject: track changes, merge paths, show line to mouse, etc X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=commitdiff_plain;h=fc88916974e94f53d7772b0d11951ec7c415888d track changes, merge paths, show line to mouse, etc --- diff --git a/auto.coffee b/auto.coffee index 7a55b2a..c4cd5b4 100644 --- a/auto.coffee +++ b/auto.coffee @@ -1,36 +1,74 @@ +# settings +width = 500 +height = 500 + # globals -$svg = null #jquery object for svg element -selected = null +$svg = null # jquery object for svg element +svg = null # dom object for svg element +selection = null +svg_ns = 'http://www.w3.org/2000/svg' +mouse = [0,0] + +update_path = (path, data, flags) -> + d = '' + for loc, i in data + if i is 0 + d += 'M ' + else + d += ' L ' + d += "#{loc[0]} #{loc[1]}" + if flags?.to_mouse? + d += "L #{mouse[0]} #{mouse[1]}" + if flags?.close? + d += " z" + path.setAttribute "d", d stop_drawing = -> - selected = null + if selection? + update_path selection.element, selection.data + selection = null + return false +stop_close_drawing = -> + if selection? + update_path selection.element, selection.data, close: true + selection = null + return false click = (x, y) -> - unless selected? - selected = [] - if selected.length > 0 - last = selected[selected.length - 1] - obj = document.createElementNS("http://www.w3.org/2000/svg", "path") - obj.setAttributeNS(null, "d", "M #{last[0]} #{last[1]} L #{x} #{y}") - $svg[0].appendChild(obj) - selected.push [x, y] - console.log selected + unless selection? + path = document.createElementNS svg_ns, "path" + selection = data: [], element: path + svg.appendChild path + selection.data.push [x, y] + update_path selection.element, selection.data +mousemove = (x, y) -> + mouse[0] = x + mouse[1] = y + if selection? + update_path selection.element, selection.data, to_mouse: true # called automatically on domcontentloaded init = -> $container = $ '.crayon_mockup' - $stop_button = $ '

[end current polyline]

' + $stop_button = $ 'stop drawing' + $stop_close_button = $ 'stop drawing, close loop' $tools = $ '' $tools.append $stop_button + $tools.append $stop_close_button $stop_button.click stop_drawing + $stop_close_button.click stop_close_drawing $container.append $tools - $svg = $ '' - #$test_path = $ '' - #$svg.append $test_path + svg = document.createElementNS svg_ns, 'svg' + svg.setAttribute 'width', width + svg.setAttribute 'height', height + svg.setAttribute 'viewBox', "0 0 #{width} #{height}" + $svg = $ svg $container.append $svg - console.log 'hi' $svg.mousedown (e) -> - console.log 'hi' offset = $svg.offset() click e.pageX - offset.left, e.pageY - offset.top + return false + $svg.mousemove (e) -> + offset = $svg.offset() + mousemove e.pageX - offset.left, e.pageY - offset.top $ init diff --git a/index.html b/index.html index f33d6c1..1556263 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,9 @@

Crayon Mockup (working title)

Instructions: click in multiple different places in the box below to draw

Warning: nothing happens on the first click... don't let this stop you.

Instructions: click in multiple different places in the box below to draw.