From: Jason Woofenden <jason@jasonwoof.com>
Date: Mon, 25 May 2015 13:02:45 +0000 (-0400)
Subject: clean up tool helper buttons
X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=commitdiff_plain;h=81ebf177e50d343cf0a7236278c618a39a9253ae;ds=sidebyside

clean up tool helper buttons
---

diff --git a/auto.coffee b/auto.coffee
index 480fbbe..9fc709f 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -12,17 +12,22 @@ cur_tool = null
 mouse = x: 0, y: 0, buttons: [0,0,0]
 
 class Tool
-	constructor: (name) ->
-		@name = name
+	constructor: (args) ->
+		@button = args.button
+		if @button?
+			@button.addClass 'disabled'
+		@tool_options = args.tool_options
 	click: (x, y) ->
-	button_click: (button) ->
 	mousemove: (x, y) ->
 	keydown: (keycode) ->
 	disable: ->
+		if @button?
+			@button.removeClass 'disabled'
+		@tool_options.empty()
 
 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']],
@@ -45,24 +50,26 @@ class TutorialTool extends Tool
 			svg.appendChild path.element
 			@paths.push path
 		@tip = $ "<span>&nbsp;</span>"
-		toolbar.append @tip
+		@tool_options.append @tip
 	disable: ->
-		@tip.remove()
+		super()
 		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>'
-		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 @
+		@update_helper_buttons()
 	click: (x, y) ->
 		if selection? and not selection.drawing?
 			selection = null
@@ -72,23 +79,41 @@ class DrawTool extends Tool
 			svg.appendChild path
 		selection.data.push [x, y]
 		update_path selection
-	button_click: (button) ->
-		if @[button]
-			return @[button]()
+		@update_helper_buttons()
+	update_helper_buttons: ->
+		if selection?.drawing? and selection?.data.length > 0
+			@cancel_button.removeClass 'disabled'
+		else
+			@cancel_button.addClass 'disabled'
+		if selection?.drawing? and selection?.data.length > 1
+			@stop_button.removeClass 'disabled'
+		else
+			@stop_button.addClass 'disabled'
+		if selection?.drawing? and selection?.data.length > 2
+			@stop_close_button.removeClass 'disabled'
+		else
+			@stop_close_button.addClass 'disabled'
 	cancel_drawing: ->
 		if selection?.drawing?
 			svg.removeChild selection.element
 		selection = null
+		@update_helper_buttons()
 		return false
 	stop_drawing: ->
 		if selection?.drawing?
+			if selection?.data.length < 2
+				return @cancel_drawing()
 			update_path selection
 		selection = null
+		@update_helper_buttons()
 		return false
 	stop_close_drawing: ->
 		if selection?.drawing?
+			if selection?.data.length < 3
+				return @stop_drawing()
 			update_path selection, close: true
 		selection = null
+		@update_helper_buttons()
 		return false
 	mousemove: (x, y) ->
 		mouse.x = x
@@ -104,19 +129,20 @@ class DrawTool extends Tool
 			when 27
 				return @cancel_drawing()
 	disable: ->
+		super()
 		@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>"
+	constructor: (args) ->
+		super args
+		toolbar.append $ "<span>Oops, the edit 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>"
+	constructor: (args) ->
+		super args
+		toolbar.append $ "<span>Oops, the delete isn't implemented yet</span>"
 
 update_path = (path, flags) ->
 	d = ''
@@ -139,7 +165,7 @@ init = ->
 		edit: button_text: 'edit', factory: EditTool
 		delete: button_text: 'delete', factory: DeleteTool
 	$container = $ '.crayon_mockup'
-	$toolbar = $ '<div class="toolbar">Tools: </div>'
+	$toolbar = $ '<div class="toolbar"><span>Tools:</span></div>'
 	for k, t of tool_buttons
 		t.element = $ "<span class=\"button\"></span>"
 		t.element.text t.button_text
@@ -150,8 +176,7 @@ init = ->
 					cur_tool.disable()
 					($toolbar.find '.button').removeClass 'disabled'
 				$tool_options.empty()
-				cur_tool = new t.factory $tool_options
-				t.element.addClass 'disabled'
+				cur_tool = new t.factory button: t.element, tool_options: $tool_options
 	$tool_options = $ '<div class="tool_options"></div>'
 	$container.append $toolbar
 	$container.append $tool_options
@@ -161,7 +186,7 @@ init = ->
 	svg.setAttribute 'viewBox', "0 0 #{width} #{height}"
 	$svg = $ svg
 	$container.append $svg
-	cur_tool = new TutorialTool $tool_options
+	cur_tool = new TutorialTool tool_options: $tool_options
 	$svg.mousedown (e) ->
 		offset = $svg.offset()
 		if cur_tool?
diff --git a/styl.styl b/styl.styl
index b83e8d5..1f6fd72 100644
--- a/styl.styl
+++ b/styl.styl
@@ -19,12 +19,12 @@
 		cursor: pointer
 		&:hover
 			background-color: #f9f9f9
+		margin: 0 4px
+		* + &
+			margin-left: 8px
 	.button.disabled
 		color: #777
 		background-color: #f3f3f3
 		cursor: default
-	.button + .button
-		margin-left: 14px
-
 	.toolbar, .tool_options
 		padding-bottom: 5px