Sync with SVG-Edit

public/svg-edit/editor/extensions/ext-arrows.js

@@ -0,0 +1,271 @@
+/*
+ * ext-arrows.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+
+ 
+$(function() {
+	svgCanvas.addExtension("Arrows", function(S) {
+		var svgcontent = S.svgcontent,
+			addElem = S.addSvgElementFromJson,
+			selElems;
+			
+		var lang_list = {
+			"en":[
+				{"id": "arrow_none", "textContent": "No arrow" }
+			],
+			"fr":[
+				{"id": "arrow_none", "textContent": "Sans flèche" }
+			]
+		};
+		
+		var pathdata = {
+			fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8, id:"se_arrow_fw"},
+			bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2, id:"se_arrow_bk"}
+		}
+		function getLinked(elem, attr) {
+			var str = elem.getAttribute(attr);
+			if(!str) return null;
+			var m = str.match(/\(\#(.*)\)/);
+			if(!m || m.length !== 2) {
+				return null;
+			}
+			return S.getElem(m[1]);
+		}
+		
+		function showPanel(on) {
+			$('#arrow_panel').toggle(on);
+			
+			if(on) {
+				var el = selElems[0];
+				var end = el.getAttribute("marker-end");
+				var start = el.getAttribute("marker-start");
+				var mid = el.getAttribute("marker-mid");
+				var val;
+				
+				if(end && start) {
+					val = "both";
+				} else if(end) {
+					val = "end";
+				} else if(start) {
+					val = "start";
+				} else if(mid) {
+					val = "mid";
+					if(mid.indexOf("bk") != -1) {
+						val = "mid_bk";
+					}
+				}
+				
+				if(!start && !mid && !end) {
+					val = "none";
+				}
+				
+				$("#arrow_list").val(val);
+			}
+		}
+		
+		function resetMarker() {
+			var el = selElems[0];
+			el.removeAttribute("marker-start");
+			el.removeAttribute("marker-mid");
+			el.removeAttribute("marker-end");
+		}
+		
+		function addMarker(dir, type, id) {
+			// TODO: Make marker (or use?) per arrow type, since refX can be different
+			id = id || 'se_arrow_' + dir;
+			
+			var marker = S.getElem(id);
+
+			var data = pathdata[dir];
+			
+			if(type == "mid") {
+				data.refx = 5;
+			}
+
+			if(!marker) {
+				marker = addElem({
+					"element": "marker",
+					"attr": {
+						"viewBox": "0 0 10 10",
+						"id": id,
+						"refY": 5,
+						"markerUnits": "strokeWidth",
+						"markerWidth": 5,
+						"markerHeight": 5,
+						"orient": "auto",
+						"style": "pointer-events:none" // Currently needed for Opera
+					}
+				});
+				var arrow = addElem({
+					"element": "path",
+					"attr": {
+						"d": data.d,
+						"fill": "#000000"
+					}
+				});
+				marker.appendChild(arrow);
+				S.findDefs().appendChild(marker);
+			} 
+			
+			marker.setAttribute('refX', data.refx);
+			
+			return marker;
+		}
+		
+		function setArrow() {
+			var type = this.value;
+			resetMarker();
+		
+			if(type == "none") {
+				return;
+			}
+		
+			// Set marker on element
+			var dir = "fw";
+			if(type == "mid_bk") {
+				type = "mid";
+				dir = "bk";
+			} else if(type == "both") {
+				addMarker("bk", type);
+				svgCanvas.changeSelectedAttribute("marker-start", "url(#" + pathdata.bk.id + ")");
+				type = "end";
+				dir = "fw";
+			} else if (type == "start") {
+				dir = "bk";
+			}
+			
+			addMarker(dir, type);
+			svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + pathdata[dir].id + ")");
+			S.call("changed", selElems);
+		}
+		
+		function colorChanged(elem) {
+			var color = elem.getAttribute('stroke');
+			
+			var mtypes = ['start','mid','end'];
+			var defs = S.findDefs();
+			
+			$.each(mtypes, function(i, type) {
+				var marker = getLinked(elem, 'marker-'+type);
+				if(!marker) return;
+				
+				var cur_color = $(marker).children().attr('fill');
+				var cur_d = $(marker).children().attr('d');
+				var new_marker = null;
+				if(cur_color === color) return;
+				
+				var all_markers = $(defs).find('marker');
+				// Different color, check if already made
+				all_markers.each(function() {
+					var attrs = $(this).children().attr(['fill', 'd']);
+					if(attrs.fill === color && attrs.d === cur_d) {
+						// Found another marker with this color and this path
+						new_marker = this;
+					}
+				});
+				
+				if(!new_marker) {
+					// Create a new marker with this color
+					var last_id = marker.id;
+					var dir = last_id.indexOf('_fw') !== -1?'fw':'bk';
+					
+					new_marker = addMarker(dir, type, 'se_arrow_' + dir + all_markers.length);
+
+					$(new_marker).children().attr('fill', color);
+				}
+				
+				$(elem).attr('marker-'+type, "url(#" + new_marker.id + ")");
+				
+				// Check if last marker can be removed
+				var remove = true;
+				$(S.svgcontent).find('line, polyline, path, polygon').each(function() {
+					var elem = this;
+					$.each(mtypes, function(j, mtype) {
+						if($(elem).attr('marker-' + mtype) === "url(#" + marker.id + ")") {
+							return remove = false;
+						}
+					});
+					if(!remove) return false;
+				});
+				
+				// Not found, so can safely remove
+				if(remove) {
+					$(marker).remove();
+				}
+
+			});
+			
+		}
+		
+		return {
+			name: "Arrows",
+			context_tools: [{
+				type: "select",
+				panel: "arrow_panel",
+				title: "Select arrow type",
+				id: "arrow_list",
+				options: {
+					none: "No arrow",
+					end: "---->",
+					start: "<----",
+					both: "<--->",
+					mid: "-->--",
+					mid_bk: "--<--"
+				},
+				defval: "none",
+				events: {
+					change: setArrow
+				}
+			}],
+			callback: function() {
+				$('#arrow_panel').hide();
+			},
+			addLangData: function(lang) {
+				return {
+					data: lang_list[lang]
+				};
+			},
+			selectedChanged: function(opts) {
+				
+				// Use this to update the current selected elements
+				selElems = opts.elems;
+				
+				var i = selElems.length;
+				var marker_elems = ['line','path','polyline','polygon'];
+				
+				while(i--) {
+					var elem = selElems[i];
+					if(elem && $.inArray(elem.tagName, marker_elems) != -1) {
+						if(opts.selectedElement && !opts.multiselected) {
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+				if(elem && (
+					elem.getAttribute("marker-start") ||
+					elem.getAttribute("marker-mid") ||
+					elem.getAttribute("marker-end")
+				)) {
+	// 								var start = elem.getAttribute("marker-start");
+	// 								var mid = elem.getAttribute("marker-mid");
+	// 								var end = elem.getAttribute("marker-end");
+					// Has marker, so see if it should match color
+					colorChanged(elem);
+				}
+				
+			}
+		};
+	});
+});

public/svg-edit/editor/extensions/ext-connector.js

@@ -0,0 +1,574 @@
+/*
+ * ext-connector.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * Copyright(c) 2010 Alexis Deveria
+ *
+ */
+ 
+$(function() {
+	svgCanvas.addExtension("Connector", function(S) {
+		var svgcontent = S.svgcontent,
+			svgroot = S.svgroot,
+			getNextId = S.getNextId,
+			getElem = S.getElem,
+			addElem = S.addSvgElementFromJson,
+			selManager = S.selectorManager,
+			started = false,
+			start_x,
+			start_y,
+			cur_line,
+			start_elem,
+			end_elem,
+			connections = [],
+			conn_sel = ".se_connector",
+			se_ns,
+// 			connect_str = "-SE_CONNECT-",
+			selElems = [];
+			
+		var lang_list = {
+			"en":[
+				{"id": "mode_connect", "title": "Connect two objects" }
+			],
+			"fr":[
+				{"id": "mode_connect", "title": "Connecter deux objets"}
+			]
+		};
+		
+		function showPanel(on) {
+			var conn_rules = $('#connector_rules');
+			if(!conn_rules.length) {
+				conn_rules = $('<style id="connector_rules"><\/style>').appendTo('head');
+			} 
+			conn_rules.text(!on?"":"#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }");
+			$('#connector_panel').toggle(on);
+		}
+		
+		function setPoint(elem, pos, x, y, setMid) {
+			var pts = elem.points;
+			var pt = svgroot.createSVGPoint();
+			pt.x = x;
+			pt.y = y;
+			if(pos === 'end') pos = pts.numberOfItems-1;
+			// TODO: Test for this on init, then use alt only if needed
+			try {
+				pts.replaceItem(pt, pos);
+			} catch(err) {
+				// Should only occur in FF which formats points attr as "n,n n,n", so just split
+				var pt_arr = elem.getAttribute("points").split(" ");
+				for(var i=0; i< pt_arr.length; i++) {
+					if(i == pos) {
+						pt_arr[i] = x + ',' + y;
+					}
+				}
+				elem.setAttribute("points",pt_arr.join(" ")); 
+			}
+			
+			if(setMid) {
+				// Add center point
+				var pt_start = pts.getItem(0);
+				var pt_end = pts.getItem(pts.numberOfItems-1);
+				setPoint(elem, 1, (pt_end.x + pt_start.x)/2, (pt_end.y + pt_start.y)/2);
+			}
+		}
+		
+		function findConnectors() {
+			// Check if selected elements have connections
+			var elems = selElems;
+			var i = elems.length;
+			var connectors = $(svgcontent).find(conn_sel);
+			if(!connectors.length) return;
+			connections = [];
+			
+			var sel = ':not(a,g,svg,'+conn_sel+')';
+			var all_els = [];
+			// Get children from groups
+			
+			while(i--) {
+				var elem = elems[i];
+				if(!elem) continue;
+				// Get all children that cannot contain children
+				var solid_elems = $(elem).find(sel);
+				// Include self if okay
+				if($(elem).filter(sel).length) {
+					solid_elems.push(elem);
+				}
+				$.merge(all_els, solid_elems);
+			}
+			
+			i = all_els.length;
+
+			if(i > 1) {
+				// Multiselected, so unselect connector
+				svgCanvas.removeFromSelection($(conn_sel).toArray());
+			}
+			
+			// Loop through selected elements
+			while(i--) {
+				var elem = all_els[i];
+				if(!elem) continue;
+				
+				// Element was deleted, so delete connector
+				var was_deleted = !elem.parentNode;
+				
+				// Skip connector
+				if($(elem).data('c_start')) continue;
+				
+				// Loop through connectors to see if one is connected to the element
+				connectors.each(function() {
+					var start = $(this).data("c_start");
+					var end = $(this).data("c_end");
+					
+					// Connector found for this element
+					if(start == elem.id || end == elem.id) {
+						
+						if(was_deleted) {
+							$(this).remove();
+							return;
+						}
+						var bb = svgCanvas.getStrokedBBox([elem]);
+						connections.push({
+							elem: elem,
+							connector: this,
+							is_start: start == elem.id,
+							start_x: bb.x,
+							start_y: bb.y
+						});	
+					}
+				});
+			}
+		}
+
+		function updateConnectors() {
+			// Updates connector lines based on selected elements
+			// Is not used on mousemove, as it runs getStrokedBBox every time,
+			// which isn't necessary there.
+			findConnectors();
+			if(connections.length) {
+				// Update line with element
+				var i = connections.length;
+				while(i--) {
+					var conn = connections[i];
+					var line = conn.connector;
+					var elem = conn.elem;
+
+					var sw = line.getAttribute('stroke-width');
+					var pre = conn.is_start?'start':'end';
+					
+					// Update bbox for this element
+					var bb = svgCanvas.getStrokedBBox([elem]);
+					bb.x = conn.start_x;
+					bb.y = conn.start_y;
+					$(line).data(pre+'_bb', bb);
+					var add_offset = $(line).data(pre+'_off');
+				
+					var alt_pre = conn.is_start?'end':'start';
+					
+					// Get center pt of connected element
+					var bb2 = $(line).data(alt_pre+'_bb');
+					var src_x = bb2.x + bb2.width/2;
+					var src_y = bb2.y + bb2.height/2;
+					
+					// Set point of element being moved
+					var pt = getBBintersect(src_x, src_y, bb, add_offset?sw:0);
+					setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
+					
+					// Set point of connected element
+					var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre + '_off')?sw:0);
+					setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
+					
+					// Update points attribute manually for webkit
+					if(navigator.userAgent.indexOf('AppleWebKit') != -1) {
+						var pts = line.points;
+						var len = pts.numberOfItems;
+						var pt_arr = Array(len);
+						for(var j=0; j< len; j++) {
+							var pt = pts.getItem(j);
+							pt_arr[j] = pt.x + ',' + pt.y;
+						}	
+						line.setAttribute("points",pt_arr.join(" ")); 
+					}
+
+				}
+			}
+		}
+		
+		function getBBintersect(x, y, bb, offset) {
+			if(offset) {
+				offset -= 0;
+				bb = $.extend({}, bb);
+				bb.width += offset;
+				bb.height += offset;
+				bb.x -= offset/2;
+				bb.y -= offset/2;
+			}
+		
+			var mid_x = bb.x + bb.width/2;
+			var mid_y = bb.y + bb.height/2;
+			var len_x = x - mid_x;
+			var len_y = y - mid_y;
+			
+			var slope = Math.abs(len_y/len_x);
+			
+			var ratio;
+			
+			if(slope < bb.height/bb.width) {
+				ratio = (bb.width/2) / Math.abs(len_x);
+			} else {
+				ratio = (bb.height/2) / Math.abs(len_y);
+			}
+			
+			
+			return {
+				x: mid_x + len_x * ratio,
+				y: mid_y + len_y * ratio
+			}
+		}
+		
+		// Do once
+		(function() {
+			var gse = svgCanvas.groupSelectedElements;
+			
+			svgCanvas.groupSelectedElements = function() {
+				svgCanvas.removeFromSelection($(conn_sel).toArray());
+				gse();
+			}
+			
+			var mse = svgCanvas.moveSelectedElements;
+			
+			svgCanvas.moveSelectedElements = function() {
+				svgCanvas.removeFromSelection($(conn_sel).toArray());
+				mse.apply(this, arguments);
+				updateConnectors();
+			}
+			
+			se_ns = svgCanvas.getEditorNS();
+		}());
+		
+		// Do on reset
+		function init() {
+			// Make sure all connectors have data set
+			$(svgcontent).find('*').each(function() { 
+				var conn = this.getAttributeNS(se_ns, "connector");
+				if(conn) {
+					this.setAttribute('class', conn_sel.substr(1));
+					var conn_data = conn.split(' ');
+					$(this).data('c_start',conn_data[0])
+						.data('c_end',conn_data[1]);
+					svgCanvas.getEditorNS(true);
+				}
+			});
+// 			updateConnectors();
+		}
+		
+// 		$(svgroot).parent().mousemove(function(e) {
+// // 			if(started 
+// // 				|| svgCanvas.getMode() != "connector"
+// // 				|| e.target.parentNode.parentNode != svgcontent) return;
+// 			
+// 			console.log('y')
+// // 			if(e.target.parentNode.parentNode === svgcontent) {
+// // 					
+// // 			}
+// 		});
+		
+		return {
+			name: "Connector",
+			svgicons: "images/conn.svg",
+			buttons: [{
+				id: "mode_connect",
+				type: "mode",
+				icon: "images/cut.png",
+				title: "Connect two objects",
+				key: "Shift+3",
+				includeWith: {
+					button: '#tool_line',
+					isDefault: false,
+					position: 1
+				},
+				events: {
+					'click': function() {
+						svgCanvas.setMode("connector");
+					}
+				}
+			}],
+			addLangData: function(lang) {
+				return {
+					data: lang_list[lang]
+				};
+			},
+			mouseDown: function(opts) {
+				var e = opts.event;
+				
+				start_x = opts.start_x,
+				start_y = opts.start_y;
+				var mode = svgCanvas.getMode();
+				
+				if(mode == "connector") {
+					
+					if(started) return;
+					
+					var mouse_target = e.target;
+					
+					var parents = $(mouse_target).parents();
+					
+					if($.inArray(svgcontent, parents) != -1) {
+						// Connectable element
+
+						start_elem = mouse_target;
+						
+						// Get center of source element
+						var bb = svgCanvas.getStrokedBBox([start_elem]);
+						var x = bb.x + bb.width/2;
+						var y = bb.y + bb.height/2;
+						
+						started = true;
+						cur_line = addElem({
+							"element": "polyline",
+							"attr": {
+								"id": getNextId(),
+								"points": (x+','+y+' '+x+','+y+' '+start_x+','+start_y),
+								"stroke": '#000',
+								"stroke-width": 3,
+								"fill": "none",
+								"opacity": .5,
+								"style": "pointer-events:none"
+							}
+						});
+						
+						$(cur_line).data('start_bb', bb);
+					}
+					return {
+						started: true
+					};
+				} else if(mode == "select") {
+					findConnectors();
+				}
+			},
+			mouseMove: function(opts) {
+				var zoom = svgCanvas.getZoom();
+				var e = opts.event;
+				var x = opts.mouse_x/zoom;
+				var y = opts.mouse_y/zoom;
+				
+				var	diff_x = x - start_x,
+					diff_y = y - start_y;
+									
+				var mode = svgCanvas.getMode();
+				
+				if(mode == "connector" && started) {
+
+					// Set start point (adjusts based on bb)
+					var pt = getBBintersect(x, y, $(cur_line).data('start_bb'));
+					start_x = pt.x;
+					start_y = pt.y;
+					
+					setPoint(cur_line, 0, pt.x, pt.y, true);
+					
+					// Set end point
+					setPoint(cur_line, 'end', x, y, true);
+				} else if(mode == "select") {
+					var slen = selElems.length;
+					
+					while(slen--) {
+						var elem = selElems[slen];
+						// Look for selected connector elements
+						if(elem && $(elem).data('c_start')) {
+							// Remove the "translate" transform given to move
+							svgCanvas.removeFromSelection([elem]);
+							svgCanvas.getTransformList(elem).clear();
+
+						}
+					}
+					if(connections.length) {
+						// Update line with element
+						var i = connections.length;
+						while(i--) {
+							var conn = connections[i];
+							var line = conn.connector;
+							var elem = conn.elem;
+							
+							var pre = conn.is_start?'start':'end';
+							var sw = line.getAttribute('stroke-width');
+							
+							// Update bbox for this element
+							var bb = $(line).data(pre+'_bb');
+							bb.x = conn.start_x + diff_x;
+							bb.y = conn.start_y + diff_y;
+							$(line).data(pre+'_bb', bb);
+							
+							var alt_pre = conn.is_start?'end':'start';
+							
+							// Get center pt of connected element
+							var bb2 = $(line).data(alt_pre+'_bb');
+							var src_x = bb2.x + bb2.width/2;
+							var src_y = bb2.y + bb2.height/2;
+							
+							// Set point of element being moved
+							var pt = getBBintersect(src_x, src_y, bb, $(line).data(pre+'_off')?sw:0);
+							setPoint(line, conn.is_start?0:'end', pt.x, pt.y, true);
+							
+							// Set point of connected element
+							var pt2 = getBBintersect(pt.x, pt.y, $(line).data(alt_pre + '_bb'), $(line).data(alt_pre+'_off')?sw:0);
+							setPoint(line, conn.is_start?'end':0, pt2.x, pt2.y, true);
+
+						}
+						
+					}
+				} 
+			},
+			mouseUp: function(opts) {
+				var zoom = svgCanvas.getZoom();
+				var e = opts.event,
+					x = opts.mouse_x/zoom,
+					y = opts.mouse_y/zoom;
+				
+				if(svgCanvas.getMode() == "connector") {
+					if(e.target.parentNode.parentNode != svgcontent) {
+						// Not a valid target element, so remove line
+						$(cur_line).remove();
+						started = false;
+						return {
+							keep: false,
+							element: null,
+							started: started
+						}
+					} else if(e.target == start_elem) {
+						// Start line through click
+						started = true;
+						return {
+							keep: true,
+							element: null,
+							started: started
+						}						
+					} else {
+						// Valid end element
+						end_elem = e.target;
+						var start_id = start_elem.id, end_id = end_elem.id;
+						var conn_str = start_id + " " + end_id;
+						var alt_str = end_id + " " + start_id;
+						// Don't create connector if one already exists
+						var dupe = $(svgcontent).find(conn_sel).filter(function() {
+							var conn = this.getAttributeNS(se_ns, "connector");
+							if(conn == conn_str || conn == alt_str) return true;
+						});
+						if(dupe.length) {
+							$(cur_line).remove();
+							return {
+								keep: false,
+								element: null,
+								started: false
+							}
+						}
+						
+						var bb = svgCanvas.getStrokedBBox([end_elem]);
+						
+						var pt = getBBintersect(start_x, start_y, bb);
+						setPoint(cur_line, 'end', pt.x, pt.y, true);
+						$(cur_line)
+							.data("c_start", start_id)
+							.data("c_end", end_id)
+							.data("end_bb", bb);
+						se_ns = svgCanvas.getEditorNS(true);
+						cur_line.setAttributeNS(se_ns, "se:connector", conn_str);
+						cur_line.setAttribute('class', conn_sel.substr(1));
+						cur_line.setAttribute('opacity', 1);
+						svgCanvas.addToSelection([cur_line]);
+						svgCanvas.moveToBottomSelectedElement();
+						selManager.requestSelector(cur_line).showGrips(false);
+						started = false;
+						return {
+							keep: true,
+							element: cur_line,
+							started: started
+						}
+					}
+				}
+			},
+			selectedChanged: function(opts) {
+				
+				// Use this to update the current selected elements
+				selElems = opts.elems;
+				
+				var i = selElems.length;
+				
+				while(i--) {
+					var elem = selElems[i];
+					if(elem && $(elem).data('c_start')) {
+						selManager.requestSelector(elem).showGrips(false);
+						if(opts.selectedElement && !opts.multiselected) {
+							// TODO: Set up context tools and hide most regular line tools
+							showPanel(true);
+						} else {
+							showPanel(false);
+						}
+					} else {
+						showPanel(false);
+					}
+				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+				if (elem && elem.tagName == 'svg' && elem.id == "svgcontent") {
+					// Update svgcontent (can change on import)
+					svgcontent = elem;
+					init();
+				}
+				
+				// Has marker, so change offset
+				if(elem && (
+					elem.getAttribute("marker-start") ||
+					elem.getAttribute("marker-mid") ||
+					elem.getAttribute("marker-end")
+				)) {
+					var start = elem.getAttribute("marker-start");
+					var mid = elem.getAttribute("marker-mid");
+					var end = elem.getAttribute("marker-end");
+					cur_line = elem;
+					$(elem)
+						.data("start_off", !!start)
+						.data("end_off", !!end);
+					
+					if(elem.tagName == "line" && mid) {
+						// Convert to polyline to accept mid-arrow
+						
+						var x1 = elem.getAttribute('x1')-0;
+						var x2 = elem.getAttribute('x2')-0;
+						var y1 = elem.getAttribute('y1')-0;
+						var y2 = elem.getAttribute('y2')-0;
+						var id = elem.id;
+						
+						var mid_pt = (' '+((x1+x2)/2)+','+((y1+y2)/2) + ' ');
+						var pline = addElem({
+							"element": "polyline",
+							"attr": {
+								"points": (x1+','+y1+ mid_pt +x2+','+y2),
+								"stroke": elem.getAttribute('stroke'),
+								"stroke-width": elem.getAttribute('stroke-width'),
+								"marker-mid": mid,
+								"fill": "none",
+								"opacity": elem.getAttribute('opacity') || 1
+							}
+						});
+						$(elem).after(pline).remove();
+						svgCanvas.clearSelection();
+						pline.id = id;
+						svgCanvas.addToSelection([pline]);
+					}
+						
+				}
+				updateConnectors();
+			},
+			toolButtonStateUpdate: function(opts) {
+				if(opts.nostroke) {
+					if ($('#mode_connect').hasClass('tool_button_current')) {
+						clickSelect();
+					}
+				}
+				$('#mode_connect')
+					.toggleClass('disabled',opts.nostroke);
+			}
+		};
+	});
+});

public/svg-edit/editor/locale/README.txt

@@ -9,8 +9,9 @@ Languages Already Translated By Humans:
   * lang.cs.js
   * lang.de.js
   * lang.en.js
-  * lang.es.js  
+  * lang.es.js
   * lang.fr.js
+  * lang.ja.js
   * lang.nl.js
   * lang.ro.js
   * lang.sk.js

public/svg-edit/editor/svg-editor.css

@@ -262,21 +262,26 @@
 	-webkit-border-radius: 8px;
 }
 
-#svg_editor #main_icon:hover,
+#svg_editor .tool_button:hover, 
-#svg_editor #main_icon.down {
+#svg_editor .push_button:hover,
-	border-left: 1px #fcd9ba solid;
+#svg_editor .buttonup:hover,
-	border-top: 1px #fcd9ba solid;
+#svg_editor .buttondown,
-	border-right: 1px #e0a874 solid;
+#svg_editor .tool_button_current,
-	border-bottom: 1px #e0a874 solid;
+#svg_editor .push_button_pressed
-	background-color: #FFC;
+{
+	border-left: 1px #fcd9ba solid !important;
+	border-top: 1px #fcd9ba solid !important;
+	border-right: 1px #e0a874 solid !important;
+	border-bottom: 1px #e0a874 solid !important;
+	background-color: #FFC !important;
 }
 
-#svg_editor #main_icon.down { 
+#svg_editor .tool_button_current,
-	background-color: #f4e284;
+#svg_editor .push_button_pressed,
-	border-top: 1px solid #630;
+#svg_editor .buttondown { 
-	border-left: 1px solid #630;
+	background-color: #f4e284 !important;
-	top: -1px;
+	border-top: 1px solid #630 !important;
-	left: -1px;
+	border-left: 1px solid #630 !important;
 }
 
 #svg_editor #main_icon span {
@@ -371,7 +376,7 @@
 	left: 0;
 	padding-left: 2px;
 	background: #E8E8E8;
-	z-index: 5;
+	z-index: 4;
 }
 
 #workarea.wireframe #svgcontent * {
@@ -440,7 +445,8 @@
 	height: 15px;
 }
 
-#svg_editor #tools_left .tool_button {
+#svg_editor #tools_left .tool_button,
+#svg_editor #tools_left .tool_button_current {
 	position: relative;
 	z-index: 11;
 }
@@ -542,7 +548,9 @@ span.zoom_tool {
 
 #svg_editor .tool_button, 
 #svg_editor .push_button,
-#svg_editor .tool_button_current {
+#svg_editor .tool_button_current,
+#svg_editor .push_button_pressed 
+{
 	height: 24px;
 	width: 24px;
 	margin: 2px;
@@ -553,6 +561,9 @@ span.zoom_tool {
 	border-bottom: 1px solid #808080;
 	background-color: #E8E8E8;
 	cursor: pointer;
+	border-radius: 5px;
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
 }
 
 #svg_editor #main_menu li#tool_open {
@@ -571,15 +582,6 @@ span.zoom_tool {
 	cursor: pointer; /* Sadly doesn't appear to have an effect */
 }
 
-#svg_editor .tool_button_current,
-#svg_editor .push_button_pressed {
-	border-left: 1px solid #808080;
-	border-top: 1px solid #808080;
-	border-right: 1px solid #FFFFFF;
-	border-bottom: 1px solid #FFFFFF;
-	background-color: #B0B0B0;
-}
-
 #svg_editor .disabled {
 	opacity: 0.5;
 	cursor: default;
@@ -653,11 +655,6 @@ span.zoom_tool {
 	width: 28px;
 }
 
-#svg_editor .tool_button:hover, 
-#svg_editor .push_button:hover {
-	background-color: #FFF;
-}
-
 #svg_editor #tools_bottom {
 	position: absolute;
 	left: 40px;
@@ -711,15 +708,6 @@ span.zoom_tool {
 	z-index: 6;
 }
 
-/*
-	top: 100px;
-	left: 80px;
-	right: 80px;
-	bottom: 100px;
-*/
-
-
-
 #svg_docprops #svg_docprops_container {
 	position: absolute;
 	top: 50px;
@@ -880,6 +868,7 @@ button#tool_docprops_cancel {
 	position:absolute;
 	top:0;
 	width:100%;
+	z-index: 6;
 }
 
 #dialog_content {
@@ -956,19 +945,15 @@ button#tool_docprops_cancel {
 	border: 1px solid #000;
 }
 
-/* Possibly not necessary */
+/* Necessary to keep the flyouts sized properly */
 #svg_editor .tools_flyout .tool_button,
 #svg_editor .tools_flyout .tool_flyout {
 	padding: 2px;
 	width: 24px;
 	height: 24px;
 	margin: 0;
+	border-radius: 0px;
+	-moz-border-radius: 0px;
+	-webkit-border-radius: 0px;	
 }
 
-#svg_editor .tools_flyout .tool_button:hover {
-	border-left: 1px solid #808080;
-	border-top: 1px solid #808080;
-	border-right: 1px solid #FFFFFF;
-	border-bottom: 1px solid #FFFFFF;
-	background-color: #B0B0B0;
-}

public/svg-edit/editor/svg-editor.html

@@ -18,8 +18,8 @@
 <script type="text/javascript" src="locale/locale.js"></script>
 <script type="text/javascript" src="svgcanvas.js"></script>
 <script type="text/javascript" src="svg-editor.js"></script>
-<script type="text/javascript" src="../extensions/ext-arrows.js"></script>
+<script type="text/javascript" src="extensions/ext-arrows.js"></script>
-<script type="text/javascript" src="../extensions/ext-connector.js"></script>
+<script type="text/javascript" src="extensions/ext-connector.js"></script>
 
 <!-- Release version of script tags: >
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
@@ -77,7 +77,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 </div>
 
 <div id="main_button">
-	<div id="main_icon" title="Main Menu">
+	<div id="main_icon" class="buttonup" title="Main Menu">
 		<span></span>
 		<div id="logo"></div>
 		<div class="dropdown"></div>
@@ -436,20 +436,6 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 <!-- hidden divs -->
 <div id="color_picker"></div>
 
-<!-- 
-<div id="tools_rect" class="tools_flyout">
-	<div id="tool_rect" class="tool_flyout_button" title="Rectangle"></div>
-	<div id="tool_square" class="tool_flyout_button" title="Square"></div>
-	<div id="tool_fhrect" class="tool_flyout_button" title="Free-Hand Rectangle"></div>
-</div>
-
-<div id="tools_ellipse" class="tools_flyout">
-	<div id="tool_ellipse" class="tool_flyout_button" title="Ellipse"></div>
-	<div id="tool_circle" class="tool_flyout_button" title="Circle"></div>
-	<div id="tool_fhellipse" class="tool_flyout_button" title="Free-Hand Ellipse"></div>
-</div>
- -->
-
 </div> <!-- svg_editor -->
 
 <div id="svg_source_editor">
@@ -518,7 +504,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				<select id="lang_select">
 				  <option id="lang_ar" value="ar">العربية</option>
 					<option id="lang_cs" value="cs">Čeština</option>
- 					<option id="lang_de" value="de">Deutsch</option>
+					<option id="lang_de" value="de">Deutsch</option>
 					<option id="lang_en" value="en" selected="selected">English</option>
 					<option id="lang_es" value="es">Español</option>
 					<option id="lang_fa" value="fa">فارسی</option>
@@ -558,9 +544,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 <div id="dialog_box">
 	<div id="dialog_box_overlay"></div>
 	<div id="dialog_container">
-		<div id="dialog_content">
+		<div id="dialog_content"></div>
-			Test message
-		</div>
 		<div id="dialog_buttons"></div>
 	</div>
 </div>

public/svg-edit/editor/svg-editor.js

@@ -135,7 +135,7 @@ function svg_edit_setup() {
 	
 	var setSelectMode = function() {
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tool_select').addClass('tool_button_current');
+		$('#tool_select').addClass('tool_button_current').removeClass('tool_button');
 		$('#styleoverrides').text('#svgcanvas svg *{cursor:move;pointer-events:all} #svgcanvas svg{cursor:default}');
 		svgCanvas.setMode('select');
 	};
@@ -146,8 +146,8 @@ function svg_edit_setup() {
 		var size = $('#tool_select > svg, #tool_select > img')[0].getAttribute('width');
 		if(editmode) {
 			// Change select icon
-			$('.tool_button').removeClass('tool_button_current');
+			$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-			$('#tool_select').addClass('tool_button_current')
+			$('#tool_select').addClass('tool_button_current').removeClass('tool_button')
 				.empty().append($.getSvgIcon('select_node'));
 			multiselected = false;
 			if(elems.length) {
@@ -782,16 +782,16 @@ function svg_edit_setup() {
 				if(el_name == 'text') {
 					$('#text_panel').css("display", "inline");	
 					if (svgCanvas.getItalic()) {
-						$('#tool_italic').addClass('tool_button_current');
+						$('#tool_italic').addClass('push_button_pressed').removeClass('tool_button');
 					}
 					else {
-						$('#tool_italic').removeClass('tool_button_current');
+						$('#tool_italic').removeClass('push_button_pressed').addClass('tool_button');
 					}
 					if (svgCanvas.getBold()) {
-						$('#tool_bold').addClass('tool_button_current');
+						$('#tool_bold').addClass('push_button_pressed').removeClass('tool_button');
 					}
 					else {
-						$('#tool_bold').removeClass('tool_button_current');
+						$('#tool_bold').removeClass('push_button_pressed').addClass('tool_button');
 					}
 					$('#font_family').val(elem.getAttribute("font-family"));
 					$('#font_size').val(elem.getAttribute("font-size"));
@@ -1059,7 +1059,7 @@ function svg_edit_setup() {
 		$('.tools_flyout').fadeOut(fadeFlyouts);
 		$('#styleoverrides').text('');
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$(button).addClass('tool_button_current');
+		$(button).addClass('tool_button_current').removeClass('tool_button');
 		// when a tool is selected, we should deselect any currently selected elements
 		svgCanvas.clearSelection();
 		return true;
@@ -1080,7 +1080,7 @@ function svg_edit_setup() {
 		
 		$(window).mouseup(function(evt) {
 			if(!on_button) {
-				button.removeClass('down');
+				button.removeClass('buttondown');
 				// do not hide if it was the file input as that input needs to be visible 
 				// for its change event to fire
 				if (evt.target.localName != "input") {
@@ -1098,8 +1098,8 @@ function svg_edit_setup() {
 		});
 		
 		overlay.bind('mousedown',function() {
-			if (!button.hasClass('down')) {
+			if (!button.hasClass('buttondown')) {
-				button.addClass('down');
+				button.addClass('buttondown').removeClass('buttonup')
 				// Margin must be reset in case it was changed before;
 				list.css('margin-left',0).show();
 				if(!height) {
@@ -1112,7 +1112,7 @@ function svg_edit_setup() {
 				on_button = true;
 				return false;
 			} else {
-				button.removeClass('down');
+				button.removeClass('buttondown').addClass('buttonup');
 				list.fadeOut(200);
 			}
 		}).hover(function() {
@@ -1345,8 +1345,12 @@ function svg_edit_setup() {
 	};
 
 	var linkControlPoints = function() {
-		$('#tool_node_link').toggleClass('push_button_pressed');
+		var linked = !$('#tool_node_link').hasClass('push_button_pressed');
-		var linked = $('#tool_node_link').hasClass('push_button_pressed');
+		if (linked)
+			$('#tool_node_link').addClass('push_button_pressed').removeClass('tool_button');
+		else
+			$('#tool_node_link').removeClass('push_button_pressed').addClass('tool_button');
+			
 		path.linkControlPoints(linked);
 	}
 
@@ -1469,7 +1473,11 @@ function svg_edit_setup() {
 	}
 
 	var clickWireframe = function() {
-		$('#tool_wireframe').toggleClass('push_button_pressed');
+		var wf = !$('#tool_wireframe').hasClass('push_button_pressed');
+		if (wf) 
+			$('#tool_wireframe').addClass('push_button_pressed').removeClass('tool_button');
+		else
+			$('#tool_wireframe').removeClass('push_button_pressed').addClass('tool_button');
 		workarea.toggleClass('wireframe');
 		
 		if(supportsNonSS) return;
@@ -2050,12 +2058,12 @@ function svg_edit_setup() {
 
 	$('.push_button').mousedown(function() { 
 		if (!$(this).hasClass('disabled')) {
-			$(this).addClass('push_button_pressed');
+			$(this).addClass('push_button_pressed').removeClass('push_button');
 		}
 	}).mouseout(function() {
-		$(this).removeClass('push_button_pressed');
+		$(this).removeClass('push_button_pressed').addClass('push_button');
 	}).mouseup(function() {
-		$(this).removeClass('push_button_pressed');
+		$(this).removeClass('push_button_pressed').addClass('push_button');
 	});
 	
 	$('#layer_new').click(function() {
@@ -2703,7 +2711,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1355 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1362 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;

public/svg-edit/editor/svgcanvas.js

@@ -1816,38 +1816,28 @@ function BatchCommand(text) {
 		var batchCmd = new BatchCommand("Transform");
 		
 		// store initial values that will be affected by reducing the transform list
-		var changes = {}, initial = null;
+		var changes = {}, initial = null, attrs = [];
 		switch (selected.tagName)
 		{
 			case "line":
-				changes["x1"] = selected.getAttribute("x1");
+				attrs = ["x1", "y1", "x2", "y2"];
-				changes["y1"] = selected.getAttribute("y1");
-				changes["x2"] = selected.getAttribute("x2");
-				changes["y2"] = selected.getAttribute("y2");
 				break;
 			case "circle":
-				changes["cx"] = selected.getAttribute("cx");
+				attrs = ["cx", "cy", "r"];
-				changes["cy"] = selected.getAttribute("cy");
-				changes["r"] = selected.getAttribute("r");
 				break;
 			case "ellipse":
-				changes["cx"] = selected.getAttribute("cx");
+				attrs = ["cx", "cy", "rx", "ry"];
-				changes["cy"] = selected.getAttribute("cy");
-				changes["rx"] = selected.getAttribute("rx");
-				changes["ry"] = selected.getAttribute("ry");
 				break;
 			case "foreignObject":
 			case "rect":
 			case "image":
-				changes["width"] = selected.getAttribute("width");
+				attrs = ["width", "height", "x", "y"];
-				changes["height"] = selected.getAttribute("height");
+				break;
 			case "use":
-				changes["x"] = selected.getAttribute("x");
+				attrs = ["x", "y"];
-				changes["y"] = selected.getAttribute("y");
 				break;
 			case "text":
-				changes["x"] = selected.getAttribute("x");
+				attrs = ["x", "y"];
-				changes["y"] = selected.getAttribute("y");
 				break;
 			case "polygon":
 			case "polyline":
@@ -1868,6 +1858,10 @@ function BatchCommand(text) {
 				break;
 		} // switch on element type to get initial values
 		
+		if(attrs.length) {
+			changes = $(selected).attr(attrs);
+		}
+		
 		// if we haven't created an initial array in polygon/polyline/path, then 
 		// make a copy of initial values and include the transform
 		if (initial == null) {
@@ -2181,10 +2175,7 @@ function BatchCommand(text) {
 				m = transformListToTransform(tlist).matrix;
 				switch (selected.tagName) {
 					case 'line':
-						changes.x1 = selected.getAttribute("x1");
+						changes = $(selected).attr(["x1","y1","x2","y2"]);
-						changes.y1 = selected.getAttribute("y1");
-						changes.x2 = selected.getAttribute("x2");
-						changes.y2 = selected.getAttribute("y2");
 					case 'polyline':
 					case 'polygon':
 						changes.points = selected.getAttribute("points");
@@ -3161,14 +3152,14 @@ function BatchCommand(text) {
 					
 					break;
 				case "circle":
-					var cx = shape.getAttributeNS(null, "cx"),
+					var c = $(shape).attr(["cx", "cy"]);
-						cy = shape.getAttributeNS(null, "cy"),
+					var cx = c.cx, cy = c.cy,
 						rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
 					shape.setAttributeNS(null, "r", rad);
 					break;
 				case "ellipse":
-					var cx = shape.getAttributeNS(null, "cx"),
+					var c = $(shape).attr(["cx", "cy"]);
-						cy = shape.getAttributeNS(null, "cy"),
+					var cx = c.cx, cy = c.cy;
 					// Opera has a problem with suspendRedraw() apparently
 						handle = null;
 					if (!window.opera) svgroot.suspendRedraw(1000);
@@ -3338,27 +3329,22 @@ function BatchCommand(text) {
 					}
 					break;
 				case "line":
-// 					keep = (element.x1.baseVal.value != element.x2.baseVal.value ||
+					var attrs = $(element).attr(["x1", "x2", "y1", "y2"]);
-// 							element.y1.baseVal.value != element.y2.baseVal.value);
+					keep = (attrs.x1 != attrs.x2 || attrs.y1 != attrs.y2);
-					keep = (element.getAttribute('x1') != element.getAttribute('x2') || element.getAttribute('y1') != element.getAttribute('y2'));
 					break;
 				case "foreignObject":
 				case "square":
 				case "rect":
-					// keep = (element.width.baseVal.value && element.height.baseVal.value);
-					keep = (element.getAttribute('width') != 0 || element.getAttribute('height') != 0);
-					break;
 				case "image":
-					// keep = (element.width.baseVal.value && element.height.baseVal.value);
+					var attrs = $(element).attr(["width", "height"]);
-					keep = (element.getAttribute('width') != 0 || element.getAttribute('height') != 0);
+					keep = (attrs.width != 0 || attrs.height != 0);
 					break;
 				case "circle":
-					// keep = (element.r.baseVal.value);
 					keep = (element.getAttribute('r') != 0);
 					break;
 				case "ellipse":
-					// keep = (element.rx.baseVal.value && element.ry.baseVal.value);
+					var attrs = $(element).attr(["rx", "ry"]);
-					keep = (element.getAttribute('rx') != null || element.getAttribute('ry') != null);
+					keep = (attrs.rx != null || attrs.ry != null);
 					break;
 				case "fhellipse":
 					if ((freehand.maxx - freehand.minx) > 0 &&
@@ -5225,14 +5211,12 @@ function BatchCommand(text) {
 
 		switch (elem.tagName) {
 		case 'ellipse':
-			var rx = elem.getAttribute('rx')-0;
-			var ry = elem.getAttribute('ry')-0;
 		case 'circle':
+			var a = $(elem).attr(['rx', 'ry', 'cx', 'cy']);
+			var cx = a.cx, cy = a.cy, rx = a.rx, ry = a.ry;
 			if(elem.tagName == 'circle') {
-				var rx = ry = elem.getAttribute('r')-0;
+				rx = ry = $(elem).attr('r');
 			}
-			var cx = elem.getAttribute('cx')-0;
-			var cy = elem.getAttribute('cy')-0;
 		
 			joinSegs([
 				['M',[(cx-rx),(cy)]],
@@ -5247,20 +5231,16 @@ function BatchCommand(text) {
 			d = elem.getAttribute('d');
 			break;
 		case 'line':
-			var x1 = elem.getAttribute('x1');
+			var a = $(elem).attr(["x1", "y1", "x2", "y2"]);
-			var x2 = elem.getAttribute('x2');
+			d = "M"+a.x1+","+a.y1+"L"+a.x2+","+a.y2;
-			var y1 = elem.getAttribute('y1');
-			var y2 = elem.getAttribute('y2');
-			d = "M"+x1+","+y1+"L"+x2+","+y2;
 			break;
 		case 'polyline':
 		case 'polygon':
-			var points = elem.getAttribute('points');
+			d = "M" + elem.getAttribute('points');
-			d = "M"+points;
 			break;
 		case 'rect':
-			var rx = elem.getAttribute('rx')-0;
+			var r = $(elem).attr(['rx', 'ry']);
-			var ry = elem.getAttribute('ry')-0;
+			var rx = r.rx, ry = r.ry;
 			var b = elem.getBBox();
 			var x = b.x, y = b.y, w = b.width, h = b.height;
 			var num = 4-num; // Why? Because!
@@ -5441,7 +5421,6 @@ function BatchCommand(text) {
 			
 			// determine proper size
 			var w, h;
-			var min_x = min_y = 0;
 			if (svgcontent.getAttribute("viewBox")) {
 				var vb = svgcontent.getAttribute("viewBox").split(' ');
 				w = vb[2];
@@ -6028,10 +6007,7 @@ function BatchCommand(text) {
 		return true;
 	};
 	this.getOffset = function() {
-		return {
+		return $(svgcontent).attr(['x', 'y']);
-			x: svgcontent.getAttribute('x'),
-			y: svgcontent.getAttribute('y')
-		};
 	}
 	
 	this.setBBoxZoom = function(val, editor_w, editor_h) {
@@ -7539,7 +7515,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1355 $)";
+		return "svgcanvas.js ($Rev: 1363 $)";
 	};
 	
 	this.setUiStrings = function(strs) {