From e445baeadd3d9b40241683cd8ca1c62a18300489 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Thu, 1 Apr 2010 19:02:36 +0000
Subject: [PATCH] Added stroke-linejoin support together with experimental UI
 for stroke styles

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1496 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 14 +++++++++++
 editor/svg-editor.html | 19 ++++++++++++++-
 editor/svg-editor.js   | 17 +++++++++++++-
 editor/svgcanvas.js    | 53 ++++++++++++++++++++++++------------------
 4 files changed, 79 insertions(+), 24 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 63523b8d..1caaef9d 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -698,6 +698,20 @@ span.zoom_tool {
 	height: 26px;
 }
 
+#toggle_stroke_tools {
+	letter-spacing: -.2em;
+	padding-right: 8px;
+}
+
+#toggle_stroke_tools:hover {
+	cursor: pointer;
+	background: #FFC;
+}
+
+.stroke_tool {
+	display: none;
+}
+
 .color_tool > *:first-child {
 	-moz-border-radius-topleft: 4px;
 	-moz-border-radius-bottomleft: 4px;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 38c6d276..7f877458 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -340,6 +340,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<label id="tool_node_y">y:
 			<input id="path_node_y" class="attr_changer" title="Change node's y coordinate" size="3" data-attr="y"/>
 		</label>
+		
 		<select id="seg_type" title="Change Segment type">
 			<option id="straight_segments" selected="selected" value="4">Straight</option>
 			<option id="curve_segments" value="6">Curve</option>
@@ -429,7 +430,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 					<input id="stroke_width" title="Change stroke width by 1, shift-click to change by 0.1" size="2" value="5" type="text" data-attr="Stroke Width"/>
 				</label>
 				
-				<label>
+				<label class="stroke_tool">
 					<select id="stroke_style" title="Change stroke dash style">
 						<option selected="selected" value="none">&mdash;</option>
 						<option value="2,2">...</option>
@@ -437,7 +438,23 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 						<option value="5,2,2,2">- .</option>
 						<option value="5,2,2,2,2,2">- ..</option>
 					</select>
+				</label>	
+				
+				<label class="stroke_tool">
+					<select id="stroke_linejoin" title="Change Linejoin type">
+						<option id="linejoin_miter" selected="selected" value="miter">Miter</option>
+						<option id="linejoin_round" value="round">Round</option>
+						<option id="linejoin_bevel" value="bevel">Bevel</option>
+					</select>
 				</label>
+			
+				<div id="toggle_stroke_tools" title="Show/hide more stroke tools">
+					&gt;&gt;
+				</div>
+				
+
+				
+
 			</div>
 		</div>
 	
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 3ddad0c3..0f695ffe 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1015,6 +1015,7 @@
 					
 					$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
 					$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
+					$('#stroke_linejoin').val(selectedElement.getAttribute("stroke-linejoin")||"miter");
 				}
 				
 				// All elements including image and group have opacity
@@ -1286,9 +1287,15 @@
 			}
 		
 			$('#stroke_style').change(function(){
-				svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
+				svgCanvas.setStrokeAttr('stroke-dasharray', $(this).val());
 				operaRepaint();
 			});
+
+			$('#stroke_linejoin').change(function(){
+				svgCanvas.setStrokeAttr('stroke-linejoin', $(this).val());
+				operaRepaint();
+			});
+
 		
 			// Lose focus for select elements when changed (Allows keyboard shortcuts to work better)
 			$('select').change(function(){$(this).blur();});
@@ -1399,6 +1406,14 @@
 				updateToolButtonState();
 			});
 		
+			$("#toggle_stroke_tools").toggle(function() {
+				$(".stroke_tool").css('display','table-cell');
+				$(this).text('<<');
+			}, function() {
+				$(".stroke_tool").css('display','none');
+				$(this).text('>>');
+			});
+		
 			// This is a common function used when a tool has been clicked (chosen)
 			// It does several common things:
 			// - removes the tool_button_current class from whatever tool currently has it
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index e4d6a190..cf1d376d 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -1143,6 +1143,7 @@ function BatchCommand(text) {
 			'opacity':1,
 			'stroke':'none',
 			'stroke-dasharray':'none',
+			'stroke-linejoin':'miter',
 			'stroke-opacity':1,
 			'stroke-width':1,
 			'rx':0,
@@ -1211,7 +1212,8 @@ function BatchCommand(text) {
 				stroke_paint: null,
 				stroke_opacity: curConfig.initStroke.opacity,
 				stroke_width: curConfig.initStroke.width,
-				stroke_style: 'none',
+				stroke_dasharray: 'none',
+				stroke_linejoin: 'none',
 				opacity: curConfig.initOpacity
 			}
 		};
@@ -3013,10 +3015,10 @@ function BatchCommand(text) {
 							"fill": "none",
 							"stroke": cur_shape.stroke,
 							"stroke-width": stroke_w,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"opacity": cur_shape.opacity / 2,
 							"style": "pointer-events:none"
 						}
@@ -3063,7 +3065,8 @@ function BatchCommand(text) {
 							"fill": cur_shape.fill,
 							"stroke": cur_shape.stroke,
 							"stroke-width": cur_shape.stroke_width,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
 							"opacity": cur_shape.opacity / 2,
@@ -3084,7 +3087,8 @@ function BatchCommand(text) {
 							"id": getNextId(),
 							"stroke": cur_shape.stroke,
 							"stroke-width": stroke_w,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill": "none",
 							"opacity": cur_shape.opacity / 2,
@@ -3104,7 +3108,8 @@ function BatchCommand(text) {
 							"fill": cur_shape.fill,
 							"stroke": cur_shape.stroke,
 							"stroke-width": cur_shape.stroke_width,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
 							"opacity": cur_shape.opacity / 2,
@@ -3125,7 +3130,8 @@ function BatchCommand(text) {
 							"fill": cur_shape.fill,
 							"stroke": cur_shape.stroke,
 							"stroke-width": cur_shape.stroke_width,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
 							"opacity": cur_shape.opacity / 2,
@@ -3144,7 +3150,8 @@ function BatchCommand(text) {
 							"fill": cur_text.fill,
 							"stroke": cur_shape.stroke,
 							"stroke-width": cur_text.stroke_width,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
 							// fix for bug where text elements were always 50% opacity
@@ -3531,7 +3538,8 @@ function BatchCommand(text) {
 								cur_properties.stroke = selected.getAttribute("stroke");
 								cur_properties.stroke_opacity = selected.getAttribute("stroke-opacity");
 								cur_properties.stroke_width = selected.getAttribute("stroke-width");
-								cur_properties.stroke_style = selected.getAttribute("stroke-dasharray");
+								cur_properties.stroke_dasharray = selected.getAttribute("stroke-dasharray");
+								cur_properties.stroke_linejoin = selected.getAttribute("stroke-linejoin");
 							}
 							if (selected.tagName == "text") {
 								cur_text.font_size = selected.getAttribute("font-size");
@@ -3631,7 +3639,8 @@ function BatchCommand(text) {
 								"fill": cur_shape.fill,
 								"stroke": cur_shape.stroke,
 								"stroke-width": cur_shape.stroke_width,
-								"stroke-dasharray": cur_shape.stroke_style,
+								"stroke-dasharray": cur_shape.stroke_dasharray,
+								"stroke-linejoin": cur_shape.stroke_linejoin,
 								"opacity": cur_shape.opacity,
 								"stroke-opacity": cur_shape.stroke_opacity,
 								"fill-opacity": cur_shape.fill_opacity,
@@ -3656,7 +3665,8 @@ function BatchCommand(text) {
 								"fill": cur_shape.fill,
 								"stroke": cur_shape.stroke,
 								"stroke-width": cur_shape.stroke_width,
-								"stroke-dasharray": cur_shape.stroke_style,
+								"stroke-dasharray": cur_shape.stroke_dasharray,
+								"stroke-linejoin": cur_shape.stroke_linejoin,
 								"opacity": cur_shape.opacity,
 								"stroke-opacity": cur_shape.stroke_opacity,
 								"fill-opacity": cur_shape.fill_opacity,
@@ -4640,7 +4650,8 @@ function BatchCommand(text) {
 							"fill": "none",
 							"stroke": cur_shape.stroke,
 							"stroke-width": cur_shape.stroke_width,
-							"stroke-dasharray": cur_shape.stroke_style,
+							"stroke-dasharray": cur_shape.stroke_dasharray,
+							"stroke-linejoin": cur_shape.stroke_linejoin,
 							"opacity": cur_shape.opacity,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
@@ -4908,7 +4919,8 @@ function BatchCommand(text) {
 								"fill-opacity": cur_shape.fill_opacity,
 								"stroke": cur_shape.stroke,
 								"stroke-width": cur_shape.stroke_width,
-								"stroke-dasharray": cur_shape.stroke_style,
+								"stroke-dasharray": cur_shape.stroke_dasharray,
+								"stroke-linejoin": cur_shape.stroke_linejoin,
 								"stroke-opacity": cur_shape.stroke_opacity,
 								"opacity": cur_shape.opacity / 2,
 								"style": "pointer-events:inherit"
@@ -5627,7 +5639,8 @@ function BatchCommand(text) {
 			"fill-opacity": cur_shape.fill_opacity,
 			"stroke": cur_shape.stroke,
 			"stroke-width": cur_shape.stroke_width,
-			"stroke-dasharray": cur_shape.stroke_style,
+			"stroke-dasharray": cur_shape.stroke_dasharray,
+			"stroke-linejoin": cur_shape.stroke_linejoin,
 			"stroke-opacity": cur_shape.stroke_opacity,
 			"opacity": cur_shape.opacity,
 			"visibility":"hidden"
@@ -7077,12 +7090,8 @@ function BatchCommand(text) {
 		}
 	};
 
-	this.getStrokeStyle = function() {
-		return cur_shape.stroke_style;
-	};
-
-	this.setStrokeStyle = function(val) {
-		cur_shape.stroke_style = val;
+	this.setStrokeAttr = function(attr, val) {
+		cur_shape[attr.replace('-','_')] = val;
 		var elems = [];
 		var i = selectedElements.length;
 		while (i--) {
@@ -7095,10 +7104,10 @@ function BatchCommand(text) {
 			}
 		}		
 		if (elems.length > 0) {
-			this.changeSelectedAttribute("stroke-dasharray", val, elems);
+			this.changeSelectedAttribute(attr, val, elems);
 		}
 	};
-
+	
 	this.getOpacity = function() {
 		return cur_shape.opacity;
 	};