factor out svg element creation

[crayon_mockup.git] / auto.coffee

diff --git a/auto.coffee b/auto.coffee
index 480fbbe..b8b2256 100644 (file)
--- a/auto.coffee
+++ b/auto.coffee
@@ -6,23 +6,73 @@ 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
 $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
 svg_ns = 'http://www.w3.org/2000/svg'
 cur_tool = null

+cur_tool_name = null

 mouse = x: 0, y: 0, buttons: [0,0,0]
 
 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
 class Tool

-       constructor: (name) ->
-               @name = name
+       constructor: (args) ->
+               @button = args.button
+               if @button?
+                       @button.addClass 'disabled'
+               @tool_options = args.tool_options

        click: (x, y) ->
        click: (x, y) ->

-       button_click: (button) ->

        mousemove: (x, y) ->
        keydown: (keycode) ->
        disable: ->
        mousemove: (x, y) ->
        keydown: (keycode) ->
        disable: ->

+               if @button?
+                       @button.removeClass 'disabled'
+               @tool_options.empty()

 
 class TutorialTool extends Tool
 
 class TutorialTool extends Tool

-       constructor: (toolbar) ->
-               super 'tutorial'
+       constructor: (args) ->
+               super args

                @paths = []
                choose = [
                        [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],
                @paths = []
                choose = [
                        [[219,34],[53,141],[96,143],[92,255],[365,257],[362,145],[407,144,'z']],

@@ -45,56 +95,76 @@ class TutorialTool extends Tool
                        svg.appendChild path.element
                        @paths.push path
                @tip = $ "<span>&nbsp;</span>"
                        svg.appendChild path.element
                        @paths.push path
                @tip = $ "<span>&nbsp;</span>"

-               toolbar.append @tip
+               @tool_options.append @tip

        disable: ->
        disable: ->

-               @tip.remove()
+               super()

                for p in @paths
                        svg.removeChild p.element
 
 class DrawTool extends Tool
                for p in @paths
                        svg.removeChild p.element
 
 class DrawTool extends Tool

-       constructor: (toolbar) ->
-               super 'draw'
+       constructor: (args) ->
+               super args
+               @tool_options.append $ "<span>Draw tool helpers:</span>"

                @stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
                @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
                @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
                @stop_button = $ '<span class="button" title="keyboard shortcut: space">finish line</span>'
                @stop_close_button = $ '<span class="button" title="keyboard shortcut: O">close (loop)</span>'
                @cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'

-               toolbar.append @stop_button
-               toolbar.append @stop_close_button
-               toolbar.append @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 @
                @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) ->
        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]()
+               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
+                       @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: ->
        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: ->
                return false
        stop_drawing: ->

-               if selection?.drawing?
-                       update_path selection
-               selection = null
+               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: ->
                return false
        stop_close_drawing: ->

-               if selection?.drawing?
-                       update_path selection, close: true
-               selection = null
+               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
                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)
        keydown: (keycode) ->
                switch keycode
                        when ('O'.charCodeAt 0), ('0'.charCodeAt 0)

@@ -104,19 +174,21 @@ class DrawTool extends Tool
                        when 27
                                return @cancel_drawing()
        disable: ->
                        when 27
                                return @cancel_drawing()
        disable: ->

+               super()

                @stop_drawing()
                @stop_drawing()

-               if selection?.drawing?
-                       delete selection.drawing

 
 class EditTool extends Tool
 
 class EditTool extends Tool

-       constructor: (toolbar) ->
-               super 'draw'
-               toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
+       constructor: (args) ->
+               super args
+               args.tool_options.append $ "<span>Oops, the edit tool isn't implemented yet</span>"

 
 class DeleteTool extends Tool
 
 class DeleteTool extends Tool

-       constructor: (toolbar) ->
-               super 'draw'
-               toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
+       constructor: (args) ->
+               super args
+               args.tool_options.append $ "<span>To delete: click on a line below</span>"
+       click: (x, y) ->
+               $svg.find('path:hover').remove()
+               return false

 
 update_path = (path, flags) ->
        d = ''
 
 update_path = (path, flags) ->
        d = ''

@@ -132,44 +204,73 @@ update_path = (path, flags) ->
 
 switch_to_tool = (tool_class) ->
 
 
 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 = ->
 # called automatically on domcontentloaded
 init = ->

+       $container = $ '.crayon_mockup'
+       $toolbar = $ '<div class="toolbar"><span>Tools:</span></div>'
+       $tool_options = $ '<div class="tool_options"></div>'
+       $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 =
        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
                draw: button_text: 'draw', factory: DrawTool
                edit: button_text: 'edit', factory: EditTool
                delete: button_text: 'delete', factory: DeleteTool

-       $container = $ '.crayon_mockup'
-       $toolbar = $ '<div class="toolbar">Tools: </div>'

        for k, t of tool_buttons
        for k, t of tool_buttons

-               t.element = $ "<span class=\"button\"></span>"
-               t.element.text t.button_text
-               $toolbar.append t.element
-               do (t) ->
-                       t.element.click ->
+               if t.button_text?
+                       t.button = $ "<span class=\"button\"></span>"
+                       t.button.text t.button_text
+                       $toolbar.append t.button
+               do (k, t) ->
+                       activate = ->

                                if cur_tool?
                                        cur_tool.disable()
                                if cur_tool?
                                        cur_tool.disable()

+                                       $container.removeClass "#{cur_tool_name}_tool"

                                        ($toolbar.find '.button').removeClass 'disabled'
                                        ($toolbar.find '.button').removeClass 'disabled'

+                               cur_tool_name = k
+                               $container.addClass "#{cur_tool_name}_tool"

                                $tool_options.empty()
                                $tool_options.empty()

-                               cur_tool = new t.factory $tool_options
-                               t.element.addClass 'disabled'
-       $tool_options = $ '<div class="tool_options"></div>'
-       $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
+                               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?
        $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?
        $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
        ($ document).keydown (e) ->
                if cur_tool?
                        return cur_tool.keydown e.keyCode