X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=b8b225624019f05b1d8db5a26657486297ff6a09;hp=9fc709fbe75c07962b04029401fae5e67d69623e;hb=859e7c640bf3ab834df5c65f75b3b439e7167116;hpb=81ebf177e50d343cf0a7236278c618a39a9253ae diff --git a/auto.coffee b/auto.coffee index 9fc709f..b8b2256 100644 --- a/auto.coffee +++ b/auto.coffee @@ -6,11 +6,56 @@ height = 500 $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 +selection = [] svg_ns = 'http://www.w3.org/2000/svg' cur_tool = null +cur_tool_name = null mouse = x: 0, y: 0, buttons: [0,0,0] +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 @@ -71,55 +116,55 @@ class DrawTool extends Tool @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 + 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?.drawing? and selection?.data.length > 0 + if selection[0]?.drawing? and selection[0]?.points.length > 0 @cancel_button.removeClass 'disabled' else @cancel_button.addClass 'disabled' - if selection?.drawing? and selection?.data.length > 1 + if selection[0]?.drawing? and selection[0]?.points.length > 1 @stop_button.removeClass 'disabled' else @stop_button.addClass 'disabled' - if selection?.drawing? and selection?.data.length > 2 + 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?.drawing? - svg.removeChild selection.element - selection = null + if selection[0]?.drawing? + selection[0].destructor() + selection = [] @update_helper_buttons() return false stop_drawing: -> - if selection?.drawing? - if selection?.data.length < 2 + if selection[0]?.drawing? + if selection[0]?.points.length < 2 return @cancel_drawing() - update_path selection - selection = null + if selection[0]? + selection[0].update() + selection = [] @update_helper_buttons() return false stop_close_drawing: -> - if selection?.drawing? - if selection?.data.length < 3 + if selection[0]?.drawing? + if selection[0]?.points.length < 3 return @stop_drawing() - update_path selection, close: true - selection = null + 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?.drawing? - update_path selection, to_mouse: true + 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) @@ -131,18 +176,19 @@ class DrawTool extends Tool 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" + args.tool_options.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" + 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 = '' @@ -158,43 +204,73 @@ update_path = (path, flags) -> switch_to_tool = (tool_class) -> +# json (compiled to javascript and minified) is ~8% smaller than the resulting xml +json_to_svg = (json) -> + for tag, attrs of json + el = document.createElementNS svg_ns, tag + for k, v of attrs + if k is 'children' + for child in v + el.appendChild json_to_svg child + else + el.setAttribute k, v + return el + # called automatically on domcontentloaded init = -> + $container = $ '.crayon_mockup' + $toolbar = $ '
Tools:
' + $tool_options = $ '
' + $container.append $toolbar + $container.append $tool_options + svg = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}" + $svg = $ svg + $container.append $svg + svg.appendChild json_to_svg filter: + id: 'crayon', filterUnits: 'userSpaceOnUse' + x: '-5%', y: '-5%', height: '110%', width: '110%' + children: [ + { feTurbulence: baseFrequency: '.3', numOctaves: '2', type: 'fractalNoise' } + { feDisplacementMap: scale: '6', xChannelSelector: 'R', in: 'SourceGraphic' } + ] + 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 - $container = $ '.crayon_mockup' - $toolbar = $ '
Tools:
' for k, t of tool_buttons - t.element = $ "" - t.element.text t.button_text - $toolbar.append t.element - do (t) -> - t.element.click -> + 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.element, tool_options: $tool_options - $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 - cur_tool = new TutorialTool tool_options: $tool_options + 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() if cur_tool? - return cur_tool.click e.pageX - offset.left, e.pageY - offset.top + 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() if cur_tool? - return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top + 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