+# settings
+width = 500
+height = 500
+
# globals
-$svg = null #jquery object for svg element
-selected = null
+$svg = null # jquery object for svg element
+svg = null # dom object for svg element
+selection = null
+svg_ns = 'http://www.w3.org/2000/svg'
+mouse = [0,0]
+
+update_path = (path, data, flags) ->
+ d = ''
+ for loc, i in data
+ if i is 0
+ d += 'M '
+ else
+ d += ' L '
+ d += "#{loc[0]} #{loc[1]}"
+ if flags?.to_mouse?
+ d += "L #{mouse[0]} #{mouse[1]}"
+ if flags?.close?
+ d += " z"
+ path.setAttribute "d", d
stop_drawing = ->
- selected = null
+ 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 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
+ 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
# called automatically on domcontentloaded
init = ->
$container = $ '.crayon_mockup'
- $stop_button = $ '<div class="button">[end current polyline]</div>'
+ $stop_button = $ '<span class="button">stop drawing</span>'
+ $stop_close_button = $ '<span class="button">stop drawing, close loop</span>'
$tools = $ '<div class="toolbar"></div>'
$tools.append $stop_button
+ $tools.append $stop_close_button
$stop_button.click stop_drawing
+ $stop_close_button.click stop_close_drawing
$container.append $tools
- $svg = $ '<svg height="500" width="500" viewBox="0 0 500 500" style="border: 1px dotted #aaa" xmlns="http://www.w3.org/2000/svg"></svg>'
- #$test_path = $ '<line id="line" x1="5" y1="50" x2="105" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"></line>'
- #$svg.append $test_path
+ 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
- console.log 'hi'
$svg.mousedown (e) ->
- console.log 'hi'
offset = $svg.offset()
click e.pageX - offset.left, e.pageY - offset.top
+ return false
+ $svg.mousemove (e) ->
+ offset = $svg.offset()
+ mousemove e.pageX - offset.left, e.pageY - offset.top
$ init
<script src="/javascript/jquery/jquery.min.js"></script>
<script src="auto.js"></script>
<style>
+ .crayon_mockup svg {
+ border: 1px dotted #aaa;
+ }
.crayon_mockup svg path {
fill: none;
stroke: #8c8c8c;
stroke-opacity: 1;
stroke-dasharray: none;
}
+ .crayon_mockup .button {
+ display: inline-block;
+ border-radius: 4px;
+ box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
+ }
+ .crayon_mockup .button + .button {
+ margin-left: 14px;
+ }
+ .crayon_mockup .toolbar {
+ padding-bottom: 5px;
+ }
</style>
</head>
<body>
<h1>Crayon Mockup (working title)</h1>
- <p>Instructions: click in multiple different places in the box below to draw</p>
- <p>Warning: nothing happens on the first click... don't let this stop you.</p>
+ <p>Instructions: click in multiple different places in the box below to draw.</p>
<div class="crayon_mockup"></div>
</body>
</html>