Started conversion of stroke attribute select list to icon list

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1503 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/images/svg_edit_icons.svg

@@ -684,6 +684,60 @@
 </svg>
 </g>
 
+<g id="linecap_butt">
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
+   <stop offset="0" stop-color="#000000" stop-opacity="1"/>
+   <stop offset="1" stop-color="#000000" stop-opacity="0"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <rect fill="url(#svg_8)" stroke="#a0a0a0" stroke-width="2" x="-15.20196" y="43.5974" width="94.8373" height="50.3728" id="svg_3" transform="rotate(-45, 32.2148, 68.7832)"/>
+  <path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#00ffff" fill="none"/>
+  <path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke-width="0" stroke="#000000" fill="#00ffff"/>
+  <title>Layer 1</title>
+ </g>
+</svg>
+</g>
+
+<g id="linecap_square">
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient id="svg_8" x1="0.8" y1="1" x2="0.2" y2="1">
+   <stop offset="0" stop-color="#000000" stop-opacity="1"/>
+   <stop offset="1" stop-color="#000000" stop-opacity="0"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <rect fill="url(#svg_8)" stroke="#000000" stroke-width="0" x="-18.51568" y="35.5974" width="117.46469" height="50.3728" id="svg_3" transform="rotate(-45, 40.2168, 60.7832)"/>
+  <path id="svg_1" d="m6.63133,95.07755l59.17514,-59.17514" stroke-width="3" stroke="#00ffff" fill="none"/>
+  <path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke-width="0" stroke="#000000" fill="#00ffff"/>
+  <title>Layer 1</title>
+ </g>
+</svg>
+</g>
+
+<g id="linecap_round">
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:se="http://svg-edit.googlecode.com">
+ <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+ <defs>
+  <linearGradient y2="1" x2="0.2" y1="1" x1="0.8" id="svg_8">
+   <stop stop-opacity="1" stop-color="#000000" offset="0"/>
+   <stop stop-opacity="0" stop-color="#000000" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <path transform="rotate(-45, 41.5117, 59.4648)" id="svg_3" d="m-19.0679,34.2946l94.8359,0c36.499,-1.4142 33.67101,48.9569 0,50.3711l-94.8359,0l0,-50.3711z" stroke-width="2" stroke="#a0a0a0" fill="url(#svg_8)"/>
+  <path id="svg_1" d="m6.63133,95.07755l59.17515,-59.17515" stroke-width="3" stroke="#00ffff" fill="none"/>
+  <path id="svg_2" d="m51.62893,36.10742l13.05662,-13.05662l13.05661,13.05662l-13.05661,13.05662l-13.05662,-13.05662z" stroke-width="0" stroke="#000000" fill="#00ffff"/>
+  <title>Layer 1</title>
+ </g>
+</svg>
+</g>
+
 <g id="eye">
 <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
  <defs>

editor/svg-editor.css

@@ -54,6 +54,8 @@
 	border-top: none;
 	margin-top: 2px;
 	margin-left: 4px;
+	position: relative;
+	z-index: 2;
 }
 
 #svg_editor #stroke_bg, 
@@ -713,6 +715,59 @@ span.zoom_tool {
 	white-space: nowrap;
 }
 
+#svg_editor .stroke_tool button {
+	margin-top: 3px;
+	background: #F0F0F0;
+}
+
+#svg_editor #cur_linecap {
+	-moz-user-select: none;
+	width: 20px;
+	height: 20px;
+	margin: 1px 0;
+	padding: 1px;
+	border: 1px solid #DDD;
+}
+
+#svg_editor #cur_linecap:hover {
+	background-color: #FFC;
+}
+
+#svg_editor .stroke_tool.down #cur_linecap,
+#svg_editor .stroke_tool.down button {
+	border: 1px inset gray;
+	background: #F4E284;
+}
+
+#stroke_linecap > div {
+	width: 42px;
+}
+
+#stroke_linecap > div > * {
+	float: left;
+}
+
+ul#linecap_opts {
+	display: none;
+	position: absolute;
+	height: 90px;
+	z-index: 3;
+	margin: 0;
+	list-style: none;
+	padding-left: 0;
+}
+
+#svg_editor ul li.current {
+	background-color: #F4E284;
+}
+
+#svg_editor ul#linecap_opts li {
+	margin: 0;
+	border-radius: 0;
+	-moz-border-radius: 0;
+	-webkit-border-radius: 0;
+}
+
 .color_tool > *:first-child {
 	-moz-border-radius-topleft: 4px;
 	-moz-border-radius-bottomleft: 4px;
@@ -749,12 +804,6 @@ span.zoom_tool {
 	width: 140px;
 }
 
-
-#svg_editor #tools_bottom_3 {
-//	position: relative;
-	z-index: 2;
-}
-
 #svg_editor #copyright {
 	text-align: right;
 	padding-right: .3em;

editor/svg-editor.html

@@ -451,6 +451,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 					</select>
 				</label>
 				
+<!-- 
 				<label class="stroke_tool">
 					<span>Cap:</span>
 					<select id="stroke_linecap" title="Change Linecap type">
@@ -459,6 +460,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 						<option id="linecap_square" value="square">Square</option>
 					</select>
 				</label>
+ -->
+ 				<div class="stroke_tool dropdown" id="stroke_linecap">
+ 					<div>
+						<div id="cur_linecap" title="Linecap: Butt"></div>
+						<button></button>
+					</div>
+ 				</div>
 			
 				<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
 					&gt;&gt;
@@ -497,6 +505,13 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="copyright">Powered by <a href="http://svg-edit.googlecode.com/" target="_blank">SVG-edit v2.5-preAlpha</a></div>
 </div>
 
+<ul id="linecap_opts">
+	<li class="tool_button current" id="linecap_butt" title="Linecap: Butt"></li>
+	<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
+	<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
+</ul>
+
+
 <!-- hidden divs -->
 <div id="color_picker"></div>
 

editor/svg-editor.js

@@ -310,6 +310,10 @@
 					'#tool_alignmiddle':'align_middle',
 					'#tool_alignbottom':'align_bottom',
 					
+					'#linecap_butt,#cur_linecap':'linecap_butt',
+					'#linecap_round':'linecap_round',
+					'#linecap_square':'linecap_square',
+					
 					'#url_notice':'warning',
 					
 					'#layer_up':'go_up',
@@ -330,7 +334,8 @@
 					'.dropdown button .svg_icon': 7,
 					'#main_button .dropdown .svg_icon': 9,
 					'.palette_item:first .svg_icon, #fill_bg .svg_icon, #stroke_bg .svg_icon': 16,
-					'.toolbar_button button .svg_icon':16
+					'.toolbar_button button .svg_icon':16,
+					'.stroke_tool div div .svg_icon': 20
 				},
 				callback: function(icons) {
 					$('.toolbar_button button > svg, .toolbar_button button > img').each(function() {
@@ -1016,7 +1021,10 @@
 					$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
 					$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
 					$('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter");
-					$('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt");
+// 					$('#stroke_linecap').val(selectedElement.getAttribute("stroke-linecap")||"butt");
+
+					var attr = selectedElement.getAttribute("stroke-linecap") || 'butt';
+					$('#linecap_' + attr).mouseup();
 				}
 				
 				// All elements including image and group have opacity
@@ -1297,10 +1305,10 @@
 				operaRepaint();
 			});
 
-			$('#stroke_linecap').change(function(){
+// 			$('#stroke_linecap').change(function(){
-				svgCanvas.setStrokeAttr('stroke-linecap', $(this).val());
+// 				svgCanvas.setStrokeAttr('stroke-linecap', $(this).val());
-				operaRepaint();
+// 				operaRepaint();
-			});
+// 			});
  
 		
 			// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
@@ -1584,6 +1592,55 @@
 				});
 			}
 			
+			// TODO: Combine this with addDropDown or find other way to optimize
+			var addAltDropDown = function(elem, list, callback, dropUp) {
+				var button = $(elem);
+				var list = $(list);
+				var on_button = false;
+				if(dropUp) {
+					$(elem).addClass('dropup');
+				}
+			
+				list.find('li').bind('mouseup', function() {
+					callback.apply(this, arguments);
+					$(this).addClass('current').siblings().removeClass('current');
+				});
+				
+				$(window).mouseup(function(evt) {
+					if(!on_button) {
+						button.removeClass('down');
+						list.hide();
+						list.css({top:0, left:0});
+					}
+					on_button = false;
+				});
+				
+				var height = list.height();
+				
+				$(elem).bind('mousedown',function() {
+					var off = $(elem).offset();
+					off.top -= list.height();
+					off.left += 8;
+					$(list).offset(off);
+					
+					if (!button.hasClass('down')) {
+						button.addClass('down');
+						list.show();
+						on_button = true;
+						return false;
+					} else {
+						button.removeClass('down');
+						// CSS position must be reset for Webkit
+						list.hide();
+						list.css({top:0, left:0});
+					}
+				}).hover(function() {
+					on_button = true;
+				}).mouseout(function() {
+					on_button = false;
+				});
+			}
+			
 			addDropDown('#font_family_dropdown', function() {
 				var fam = $(this).text();
 				$('#font_family').val($(this).text()).change();
@@ -1619,6 +1676,19 @@
 				}
 			}, true);
 			
+// 			$('#cur_linecap').mousedown(function() {
+// 				$('#linecap_opts').show();
+// 			});
+			
+			addAltDropDown('#stroke_linecap', '#linecap_opts', function() {
+				var val = this.id.split('_')[1];
+				svgCanvas.setStrokeAttr('stroke-linecap', val);
+				operaRepaint();
+				var icon = $.getSvgIcon(this.id).clone();
+				$('#cur_linecap').empty().append(icon);
+				$.resizeSvgIcons({'#cur_linecap .svg_icon': 20});
+			}, true);
+			
 			/*
 			
 			When a flyout icon is selected