X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=9fc709fbe75c07962b04029401fae5e67d69623e;hp=7a55b2acd8975fb03fdd541bf869eaaeced48842;hb=81ebf177e50d343cf0a7236278c618a39a9253ae;hpb=c8077c7a5c9ce3610d8f926b7fdf8969974728c8 diff --git a/auto.coffee b/auto.coffee index 7a55b2a..9fc709f 100644 --- a/auto.coffee +++ b/auto.coffee @@ -1,36 +1,202 @@ +# settings +width = 500 +height = 500 + # globals -$svg = null #jquery object for svg element -selected = null - -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 +$svg = null # jquery object for svg element +svg = null # dom object for svg element +$tool_options = null # jquery object for tool options line +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: (args) -> + @button = args.button + if @button? + @button.addClass 'disabled' + @tool_options = args.tool_options + click: (x, y) -> + mousemove: (x, y) -> + keydown: (keycode) -> + disable: -> + if @button? + @button.removeClass 'disabled' + @tool_options.empty() + +class TutorialTool extends Tool + constructor: (args) -> + super args + @paths = [] + choose = [ + [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']], + [[161,118],[144,106],[130,115],[128,152],[140,160],[156,150]], + [[173,107],[169,159],[180,137],[189,133],[193,160]], + [[218,135],[205,144],[205,158],[215,164],[225,156],[225,144,'z']], + [[242,135],[233,145],[233,157],[244,168],[256,158],[254,144,'z']], + [[278,141],[269,135],[261,142],[264,151],[278,153],[281,162],[271,170],[264,163]], + [[291,151],[305,151],[312,143],[299,135],[288,140],[293,160],[302,167],[313,158]], + [[136,208],[121,206],[116,226],[128,233],[136,229],[137,209],[140,233]], + [[160,207],[191,205]], + [[176,184],[174,228],[180,238]], + [[198,216],[187,223],[189,236],[200,242],[210,235],[209,224,'z']], + [[227,216],[216,222],[216,236],[224,244],[237,240],[237,226,'z']], + [[247,187],[249,241],[254,243]] + ] + for c in choose + path = data: c, element: document.createElementNS svg_ns, "path" + update_path path, close: c[c.length - 1][2] is 'z' + svg.appendChild path.element + @paths.push path + @tip = $ " " + @tool_options.append @tip + disable: -> + super() + for p in @paths + svg.removeChild p.element + +class DrawTool extends Tool + constructor: (args) -> + super args + @tool_options.append $ "Draw tool helpers:" + @stop_button = $ ' ' + @stop_close_button = $ ' ' + @cancel_button = $ ' ' + @tool_options.append @stop_button + @tool_options.append @stop_close_button + @tool_options.append @cancel_button + @stop_button.click @stop_drawing.bind @ + @stop_close_button.click @stop_close_drawing.bind @ + @cancel_button.click @cancel_drawing.bind @ + @update_helper_buttons() + 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 + @update_helper_buttons() + update_helper_buttons: -> + if selection?.drawing? and selection?.data.length > 0 + @cancel_button.removeClass 'disabled' + else + @cancel_button.addClass 'disabled' + if selection?.drawing? and selection?.data.length > 1 + @stop_button.removeClass 'disabled' + else + @stop_button.addClass 'disabled' + if selection?.drawing? and selection?.data.length > 2 + @stop_close_button.removeClass 'disabled' + else + @stop_close_button.addClass 'disabled' + cancel_drawing: -> + if selection?.drawing? + svg.removeChild selection.element + selection = null + @update_helper_buttons() + return false + stop_drawing: -> + if selection?.drawing? + if selection?.data.length < 2 + return @cancel_drawing() + update_path selection + selection = null + @update_helper_buttons() + return false + stop_close_drawing: -> + if selection?.drawing? + if selection?.data.length < 3 + return @stop_drawing() + update_path selection, close: true + selection = null + @update_helper_buttons() + return false + mousemove: (x, y) -> + mouse.x = x + mouse.y = y + if selection?.drawing? + 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: -> + super() + @stop_drawing() + if selection?.drawing? + delete selection.drawing + +class EditTool extends Tool + constructor: (args) -> + super args + toolbar.append $ "Oops, the edit tool isn't implemented yet" + +class DeleteTool extends Tool + constructor: (args) -> + super args + toolbar.append $ "Oops, the delete isn't implemented yet" + +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 + +switch_to_tool = (tool_class) -> # called automatically on domcontentloaded init = -> + tool_buttons = + draw: button_text: 'draw', factory: DrawTool + edit: button_text: 'edit', factory: EditTool + delete: button_text: 'delete', factory: DeleteTool $container = $ '.crayon_mockup' - $stop_button = $ '
' - $tools = $ '' - $tools.append $stop_button - $stop_button.click stop_drawing - $container.append $tools - $svg = $ '' - #$test_path = $ '