X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=8a9033eab630edf3933961325a46dba6a94896bf;hp=c4cd5b40fa176e605a59bc0f7a69ed2602ecaa7a;hb=27d85b1648f106d26c0d7acd5550e120f276e189;hpb=fc88916974e94f53d7772b0d11951ec7c415888d diff --git a/auto.coffee b/auto.coffee index c4cd5b4..8a9033e 100644 --- a/auto.coffee +++ b/auto.coffee @@ -5,70 +5,276 @@ height = 500 # globals $svg = null # jquery object for svg element svg = null # dom object for svg element -selection = null +$tool_options = null # jquery object for tool options line +selection = [] svg_ns = 'http://www.w3.org/2000/svg' -mouse = [0,0] +cur_tool = null +cur_tool_name = null +mouse = x: 0, y: 0, buttons: [0,0,0] -update_path = (path, data, flags) -> - d = '' - for loc, i in data - if i is 0 - d += 'M ' +class EditableThing + constructor: -> + @el = null + click_proximity: (x, y) -> + return null + clicked: -> + update: -> + destructor: -> + if @el? + svg.removeChild @el + @el = null + +class PolyLine extends EditableThing + constructor: (args) -> + super args + @drawing = args?.drawing ? false + @el = document.createElementNS svg_ns, "path" + svg.appendChild @el + @points = args?.points ? [] + @update() + update: (args) -> + if args?.drawing? + @drawing = args.drawing + d = '' + l = '' + sep = 'M' + for loc, i in @points + d += l = "#{sep} #{loc[0]} #{loc[1]}" + sep = ' L' + if args?.to_mouse? + d += l = "#{sep} #{args.mouse_x} #{args.mouse_y}" + if args?.close # FIXME ?remove + d += l = ' z' + if @points.length > 0 + if l is " L #{@points[0][0]} #{@points[0][1]}" + d = d.substr 0, d.length - l.length + d += ' z' + @el.setAttribute "d", d + add_point: (x, y) -> + @points.push [x, y] + close_loop: -> + if @points.length > 2 + @add_point @points[0][0], @points[0][1] + +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 = $ 'finish line' + @stop_close_button = $ 'close (loop)' + @cancel_button = $ 'cancel line' + @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.length and not selection[0].drawing? + selection = [] + unless selection.length + selection.push new PolyLine drawing: true + selection[0].add_point x, y + selection[0].update() + @update_helper_buttons() + update_helper_buttons: -> + if selection[0]?.drawing? and selection[0]?.points.length > 0 + @cancel_button.removeClass 'disabled' else - d += ' L ' - d += "#{loc[0]} #{loc[1]}" + @cancel_button.addClass 'disabled' + if selection[0]?.drawing? and selection[0]?.points.length > 1 + @stop_button.removeClass 'disabled' + else + @stop_button.addClass 'disabled' + if selection[0]?.drawing? and selection[0]?.points.length > 2 + @stop_close_button.removeClass 'disabled' + else + @stop_close_button.addClass 'disabled' + cancel_drawing: -> + if selection[0]?.drawing? + selection[0].destructor() + selection = [] + @update_helper_buttons() + return false + stop_drawing: -> + if selection[0]?.drawing? + if selection[0]?.points.length < 2 + return @cancel_drawing() + if selection[0]? + selection[0].update() + selection = [] + @update_helper_buttons() + return false + stop_close_drawing: -> + if selection[0]?.drawing? + if selection[0]?.points.length < 3 + return @stop_drawing() + selection[0].close_loop() + selection[0].update drawing: false + selection = [] + @update_helper_buttons() + return false + mousemove: (x, y) -> + mouse.x = x + mouse.y = y + if selection[0]?.drawing? + selection[0].update to_mouse: true, mouse_x: x, mouse_y: y + 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() + +class EditTool extends Tool + constructor: (args) -> + super args + args.tool_options.append $ "Oops, the edit tool isn't implemented yet" + +class DeleteTool extends Tool + constructor: (args) -> + super args + args.tool_options.append $ "To delete: click on a line below" + click: (x, y) -> + $svg.find('path:hover').remove() + return false + +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 += "L #{mouse[0]} #{mouse[1]}" - if flags?.close? + d += "#{sep} #{mouse.x} #{mouse.y}" + if flags?.close d += " z" - path.setAttribute "d", d + path.element.setAttribute "d", d -stop_drawing = -> - 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 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 +switch_to_tool = (tool_class) -> # called automatically on domcontentloaded init = -> $container = $ '.crayon_mockup' - $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 + $toolbar = $ '
Tools:
' + $tool_options = $ '
' + $container.append $toolbar + $container.append $tool_options 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 + filter = document.createElementNS svg_ns, 'filter' + filter.setAttribute 'id', 'crayon' + filter.setAttribute 'filterUnits', 'userSpaceOnUse' + filter.setAttribute 'x', '-5%' + filter.setAttribute 'y', '-5%' + filter.setAttribute 'height', '110%' + filter.setAttribute 'width', '110%' + filter_inner = document.createElementNS svg_ns, 'feTurbulence' + filter_inner.setAttribute 'baseFrequency', '.3' + filter_inner.setAttribute 'numOctaves', '2' + filter_inner.setAttribute 'type', 'fractalNoise' + filter.appendChild filter_inner + filter_inner = document.createElementNS svg_ns, 'feDisplacementMap' + filter_inner.setAttribute 'scale', '6' + filter_inner.setAttribute 'xChannelSelector', 'R' + filter_inner.setAttribute 'in', 'SourceGraphic' + filter.appendChild filter_inner + svg.appendChild filter + + tool_buttons = + tutorial: default: true, factory: TutorialTool + draw: button_text: 'draw', factory: DrawTool + edit: button_text: 'edit', factory: EditTool + delete: button_text: 'delete', factory: DeleteTool + for k, t of tool_buttons + if t.button_text? + t.button = $ "" + t.button.text t.button_text + $toolbar.append t.button + do (k, t) -> + activate = -> + if cur_tool? + cur_tool.disable() + $container.removeClass "#{cur_tool_name}_tool" + ($toolbar.find '.button').removeClass 'disabled' + cur_tool_name = k + $container.addClass "#{cur_tool_name}_tool" + $tool_options.empty() + cur_tool = new t.factory button: t.button, tool_options: $tool_options + if t.button? + t.button.click activate + if t.default + activate() + $svg.mousedown (e) -> offset = $svg.offset() - click e.pageX - offset.left, e.pageY - offset.top - return false + if cur_tool? + mouse_x = Math.round(e.pageX - offset.left) + mouse_y = Math.round(e.pageY - offset.top) + return cur_tool.click mouse_x, mouse_y $svg.mousemove (e) -> offset = $svg.offset() - mousemove e.pageX - offset.left, e.pageY - offset.top + if cur_tool? + mouse_x = Math.round(e.pageX - offset.left) + mouse_y = Math.round(e.pageY - offset.top) + return cur_tool.mousemove mouse_x, mouse_y + ($ document).keydown (e) -> + if cur_tool? + return cur_tool.keydown e.keyCode $ init