X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=b4b8d983ecdef9da2aecd641efc85cfee19faa7b;hp=7a55b2acd8975fb03fdd541bf869eaaeced48842;hb=6f50cb6a6672de9240ec432fe0d27dfd0bd18b80;hpb=c8077c7a5c9ce3610d8f926b7fdf8969974728c8 diff --git a/auto.coffee b/auto.coffee index 7a55b2a..b4b8d98 100644 --- a/auto.coffee +++ b/auto.coffee @@ -1,36 +1,115 @@ +# 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' +cur_tool = null +mouse = x: 0, y: 0, buttons: [0,0,0] + +class Tool + constructor: (name) -> + @name = name + click: (x, y) -> + button_click: (button) -> + mousemove: (x, y) -> + keydown: (keycode) -> + disable: -> -stop_drawing = -> - selected = null -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 +class DrawTool extends Tool + constructor: (toolbar) -> + super 'draw' + @stop_button = $ 'stop line' + @stop_close_button = $ 'stop line, close loop' + @cancel_button = $ 'cancel line' + toolbar.append @stop_button + toolbar.append @stop_close_button + toolbar.append @cancel_button + @stop_button.click @stop_drawing.bind @ + @stop_close_button.click @stop_close_drawing.bind @ + @cancel_button.click @cancel_drawing.bind @ + click: (x, y) -> + if selection? and not selection.drawing? + selection = null + unless selection? + path = document.createElementNS svg_ns, "path" + selection = data: [], element: path, drawing: true + svg.appendChild path + selection.data.push [x, y] + update_path selection + button_click: (button) -> + if @[button] + return @[button]() + cancel_drawing: -> + if selection? + console.log selection.element + svg.removeChild selection.element + selection = null + return false + stop_drawing: -> + if selection? + update_path selection + selection = null + return false + stop_close_drawing: -> + if selection? + update_path selection, close: true + selection = null + return false + mousemove: (x, y) -> + mouse.x = x + mouse.y = y + if selection? + update_path selection, to_mouse: true + keydown: (keycode) -> + switch keycode + when ('O'.charCodeAt 0), ('0'.charCodeAt 0) + return @stop_close_drawing() + when (' '.charCodeAt 0), 13, 10 + return @stop_drawing() + when 27 + return @cancel_drawing() + disable: -> + if selection?.drawing? + delete selection.drawing + +update_path = (path, flags) -> + d = '' + sep = 'M' + for loc, i in path.data + d += "#{sep} #{loc[0]} #{loc[1]}" + sep = ' L' + if flags?.to_mouse? + d += "#{sep} #{mouse.x} #{mouse.y}" + if flags?.close? + d += " z" + path.element.setAttribute "d", d # called automatically on domcontentloaded init = -> $container = $ '.crayon_mockup' - $stop_button = $ '
[end current polyline]
' $tools = $ '
' - $tools.append $stop_button - $stop_button.click stop_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' + cur_tool = new DrawTool $tools $svg.mousedown (e) -> - console.log 'hi' offset = $svg.offset() - click e.pageX - offset.left, e.pageY - offset.top + if cur_tool? + return cur_tool.click e.pageX - offset.left, e.pageY - offset.top + $svg.mousemove (e) -> + offset = $svg.offset() + if cur_tool? + return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top + ($ document).keydown (e) -> + if cur_tool? + return cur_tool.keydown e.keyCode $ init