From: Jason Woofenden <jason@jasonwoof.com>
Date: Sun, 24 May 2015 20:15:29 +0000 (-0400)
Subject: wrap draw tool in an object
X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=commitdiff_plain;h=6f50cb6a6672de9240ec432fe0d27dfd0bd18b80

wrap draw tool in an object
---

diff --git a/auto.coffee b/auto.coffee
index e705421..b4b8d98 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -7,72 +7,91 @@ $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]
+cur_tool = null
+mouse = x: 0, y: 0, buttons: [0,0,0]
 
-update_path = (path, data, flags) ->
+class Tool
+	constructor: (name) ->
+		@name = name
+	click: (x, y) ->
+	button_click: (button) ->
+	mousemove: (x, y) ->
+	keydown: (keycode) ->
+	disable: ->
+
+class DrawTool extends Tool
+	constructor: (toolbar) ->
+		super 'draw'
+		@stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
+		@stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, 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?
+			console.log selection.element
+			svg.removeChild selection.element
+		selection = null
+		return false
+	stop_drawing: ->
+		if selection?
+			update_path selection
+		selection = null
+		return false
+	stop_close_drawing: ->
+		if selection?
+			update_path selection, close: true
+		selection = null
+		return false
+	mousemove: (x, y) ->
+		mouse.x = x
+		mouse.y = y
+		if selection?
+			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: ->
+		if selection?.drawing?
+			delete selection.drawing
+
+update_path = (path, flags) ->
 	d = ''
-	for loc, i in data
-		if i is 0
-			d += 'M '
-		else
-			d += ' L '
-		d += "#{loc[0]} #{loc[1]}"
+	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]}"
+		d += "#{sep} #{mouse.x} #{mouse.y}"
 	if flags?.close?
 		d += " z"
-	path.setAttribute "d", d
-
-cancel_drawing = ->
-	if selection?
-		svg.removeChild selection.element
-	selection = null
-	return false
-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
-
-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()
+	path.element.setAttribute "d", d
 
 # called automatically on domcontentloaded
 init = ->
 	$container = $ '.crayon_mockup'
-	$stop_button = $ '<span class="button" title="keyboard shortcut: space">stop line</span>'
-	$stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</span>'
-	$cancel_button = $ '<span class="button" title="keyboard shortcut: Esc">cancel line</span>'
 	$tools = $ '<div class="toolbar"></div>'
-	$tools.append $stop_button
-	$tools.append $stop_close_button
-	$tools.append $cancel_button
-	$stop_button.click stop_drawing
-	$stop_close_button.click stop_close_drawing
-	$cancel_button.click cancel_drawing
 	$container.append $tools
 	svg = document.createElementNS svg_ns, 'svg'
 	svg.setAttribute 'width', width
@@ -80,14 +99,17 @@ init = ->
 	svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
 	$svg = $ svg
 	$container.append $svg
+	cur_tool = new DrawTool $tools
 	$svg.mousedown (e) ->
 		offset = $svg.offset()
-		click e.pageX - offset.left, e.pageY - offset.top
-		return false
+		if cur_tool?
+			return cur_tool.click e.pageX - offset.left, e.pageY - offset.top
 	$svg.mousemove (e) ->
 		offset = $svg.offset()
-		mousemove e.pageX - offset.left, e.pageY - offset.top
+		if cur_tool?
+			return cur_tool.mousemove e.pageX - offset.left, e.pageY - offset.top
 	($ document).keydown (e) ->
-		return keydown e.keyCode
+		if cur_tool?
+			return cur_tool.keydown e.keyCode
 
 $ init
diff --git a/index.html b/index.html
index 3da2eda..4cce9fe 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
 		.crayon_mockup .button {
 			display: inline-block;
 			border-radius: 4px;
+			background: white;
 			box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
 		}
 		.crayon_mockup .button + .button {