# settings
-width = 500
-height = 500
+width = 800
+height = 600
+supply_height = 96
-# globals
-$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]
+# 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 'http://www.w3.org/2000/svg', 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
-class Tool
- constructor: (name) ->
- @name = name
- click: (x, y) ->
- button_click: (button) ->
- mousemove: (x, y) ->
- keydown: (keycode) ->
- disable: ->
-
-class TutorialTool extends Tool
- constructor: (toolbar) ->
- super 'tutorial'
- @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 = $ "<span> </span>"
- toolbar.append @tip
- disable: ->
- @tip.remove()
- for p in @paths
- svg.removeChild p.element
-
-class DrawTool extends Tool
- constructor: (toolbar) ->
- super 'draw'
- @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
- @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?.drawing?
- svg.removeChild selection.element
- selection = null
- return false
- stop_drawing: ->
- if selection?.drawing?
- update_path selection
- selection = null
- return false
- stop_close_drawing: ->
- if selection?.drawing?
- update_path selection, close: true
- selection = null
- 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: ->
- @stop_drawing()
- if selection?.drawing?
- delete selection.drawing
-
-class EditTool extends Tool
- constructor: (toolbar) ->
- super 'draw'
- toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
-
-class DeleteTool extends Tool
- constructor: (toolbar) ->
- super 'draw'
- toolbar.append $ "<span>Oops, this tool isn't implemented yet</span>"
-
-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) ->
+# public vars: x, y, width, height, el
+class Widget
+ constructor: (args) ->
+ @x = args?.x ? 1
+ @y = args?.y ? 1
+ @width = args?.width ? 50
+ @height = args?.height ? 34
+ move: (args) ->
+ @x = args.x
+ @y = args.y
+class RectWidget extends Widget
+ constructor: (args) ->
+ super args
+ @el = json_to_svg rect:
+ x: @x + 1
+ y: @x + 1
+ width: @width - 2
+ height: @height - 2
+ class: 'box'
+ move: (args) ->
+ super args
+ @el.setAttribute 'x', @x + 1
+ @el.setAttribute 'y', @y + 1
+ clone: ->
+ return new RectWidget @
# 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
+ offset = null
+ selected = []
+ on_canvas = []
+ dragging = false
$container = $ '.crayon_mockup'
- $toolbar = $ '<div class="toolbar">Tools: </div>'
- 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 cur_tool?
- cur_tool.disable()
- ($toolbar.find '.button').removeClass 'disabled'
- $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 = json_to_svg svg: width: width, height: height, viewBox: "0 0 #{width} #{height}"
$svg = $ svg
$container.append $svg
- cur_tool = new TutorialTool $tool_options
+ 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' }
+ ]
+
+ # create canvas border
+ svg.appendChild json_to_svg rect:
+ x: 1
+ y: supply_height + 1
+ width: width - 2
+ height: height - 2 - supply_height
+ class: 'canvas_border'
+
+ supply = [
+ new RectWidget()
+ new RectWidget width: 12, height: 50
+ new RectWidget width: 70, height: 12
+ ]
+ for widget, i in supply
+ widget.move {
+ x: 30 + i * 90 + (70 - widget.width) / 2
+ y: (supply_height - widget.height) / 2
+ }
+ svg.appendChild widget.el
+
+ # todo ask widgets
+ closest_widget = (widgets, xy) ->
+ closest = [10000, null]
+ for w in widgets
+ x = w.x + w.width / 2 - xy.x
+ y = w.y + w.height / 2 - xy.y
+ dist2 = x * x + y * y
+ if dist2 < closest[0]
+ closest = [dist2, w]
+ if closest[1]?
+ return closest
+ return null
+ svg_event_to_xy = (e) ->
+ unless offset?
+ offset = $svg.offset()
+ return {
+ x: Math.round(e.pageX - offset.left)
+ y: Math.round(e.pageY - offset.top)
+ }
$svg.mousedown (e) ->
- offset = $svg.offset()
- 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
+ xy = svg_event_to_xy e
+ if xy.y < supply_height
+ closest = closest_widget supply, xy
+ console.log closest
+ if closest?
+ closest[1] = closest[1].clone()
+ svg.appendChild closest[1].el
+ else
+ closest = closest_widget on_canvas, xy
+ if closest?
+ selected = [closest[1]]
+ dragging = true
+ mousemove e
+ return false
+ $svg.mouseup (e) ->
+ mousemove e
+ dragging = false
+ if selected[0]?
+ if selected[0].y > supply_height
+ on_canvas.push selected[0]
+ else
+ svg.removeChild selected[0].el
+ selected = []
+ return false
+ mousemove = (e) ->
+ if dragging
+ xy = svg_event_to_xy e
+ xy.x -= selected[0].width / 2
+ xy.y -= selected[0].height / 2
+ selected[0].move xy
+ return false
+ $svg.mousemove mousemove
+ #($ document).keydown (e) ->
$ init
Got questions, comments, patches, etc.? Contact Jason Woofenden