X-Git-Url: https://jasonwoof.com/gitweb/?p=crayon_mockup.git;a=blobdiff_plain;f=auto.coffee;h=480fbbe537424daeadba3dc95976d7cbff58b623;hp=b4b8d983ecdef9da2aecd641efc85cfee19faa7b;hb=804571d5567f5c6b9ec21c4e1db9fcc40aaf6823;hpb=6f50cb6a6672de9240ec432fe0d27dfd0bd18b80

diff --git a/auto.coffee b/auto.coffee
index b4b8d98..480fbbe 100644
--- a/auto.coffee
+++ b/auto.coffee
@@ -5,6 +5,7 @@ height = 500
 # 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
@@ -19,11 +20,42 @@ class Tool
 	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>&nbsp;</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">stop line</span>'
-		@stop_close_button = $ '<span class="button" title="keyboard shortcut: O">stop line, close loop</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
@@ -44,25 +76,24 @@ class DrawTool extends Tool
 		if @[button]
 			return @[button]()
 	cancel_drawing: ->
-		if selection?
-			console.log selection.element
+		if selection?.drawing?
 			svg.removeChild selection.element
 		selection = null
 		return false
 	stop_drawing: ->
-		if selection?
+		if selection?.drawing?
 			update_path selection
 		selection = null
 		return false
 	stop_close_drawing: ->
-		if selection?
+		if selection?.drawing?
 			update_path selection, close: true
 		selection = null
 		return false
 	mousemove: (x, y) ->
 		mouse.x = x
 		mouse.y = y
-		if selection?
+		if selection?.drawing?
 			update_path selection, to_mouse: true
 	keydown: (keycode) ->
 		switch keycode
@@ -73,9 +104,20 @@ class DrawTool extends Tool
 			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'
@@ -84,22 +126,42 @@ update_path = (path, flags) ->
 		sep = ' L'
 	if flags?.to_mouse?
 		d += "#{sep} #{mouse.x} #{mouse.y}"
-	if flags?.close?
+	if flags?.close
 		d += " z"
 	path.element.setAttribute "d", d
 
+switch_to_tool = (tool_class) ->
+
 # 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
 	$container = $ '.crayon_mockup'
-	$tools = $ '<div class="toolbar"></div>'
-	$container.append $tools
+	$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 = $ svg
 	$container.append $svg
-	cur_tool = new DrawTool $tools
+	cur_tool = new TutorialTool $tool_options
 	$svg.mousedown (e) ->
 		offset = $svg.offset()
 		if cur_tool?