Gaussian Blur (and other fun stuff)

Sync with latest SVG-edit.

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

@@ -398,6 +398,7 @@
 	opacity: 1;
 	pointer-events: stroke;
 	vector-effect: non-scaling-stroke;
+	filter: none;
 }
 
 #workarea.wireframe #svgcontent text {
@@ -751,7 +752,7 @@ span.zoom_tool {
 #option_lists ul {
 	display: none;
 	position: absolute;
-	height: 90px;
+	height: auto;
 	z-index: 3;
 	margin: 0;
 	list-style: none;

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

@@ -168,6 +168,19 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<input id="angle" title="Change rotation angle" size="2" value="0" type="text"/>
 		</label>
 		
+		<div class="toolset" id="tool_blur">
+			<label>
+				<span id="blurLabel">blur:</span>
+				<input id="blur" title="Change gaussian blur value" size="2" value="0" type="text"/>
+			</label>
+			<div id="blur_dropdown" class="dropdown">
+				<button></button>
+				<ul>
+					<li class="special"><div id="blur_slider"></div></li>
+				</ul>
+			</div>
+		</div>
+		
 		<div id="xy_panel" class="toolset">
 			<label>
 				x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>

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

@@ -963,12 +963,7 @@
 			// updates the toolbar (colors, opacity, etc) based on the selected element
 			// This function also updates the opacity and id elements that are in the context panel
 			var updateToolbar = function() {
-				if (selectedElement != null && 
+				if (selectedElement != null && $.inArray(selectedElement.tagName, ['image', 'text', 'foreignObject', 'g', 'a']) === -1) {
-					selectedElement.tagName != "image" &&
-					selectedElement.tagName != "text" &&
-					selectedElement.tagName != "foreignObject" &&
-					selectedElement.tagName != "g")
-				{
 					// get opacity values
 					var fillOpacity = parseFloat(selectedElement.getAttribute("fill-opacity"));
 					if (isNaN(fillOpacity)) {
@@ -1062,9 +1057,22 @@
 					#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
 				if (elem != null) {
 					var elname = elem.nodeName;
+					
+					// If this is a link with no transform and one child, pretend
+					// its child is selected
+// 					console.log('go', elem)
+// 					if(elname === 'a') { // && !$(elem).attr('transform')) {
+// 						elem = elem.firstChild;
+// 					}
+
+					
 					var angle = svgCanvas.getRotationAngle(elem);
 					$('#angle').val(angle);
 
+					var blurval = svgCanvas.getBlur(elem);
+					$('#blur').val(blurval);
+					$('#blur_slider').slider('option', 'value', blurval);
+					
 					if(svgCanvas.addedNew) {
 						if(elname == 'image') {
 							promptImgURL();
@@ -1294,6 +1302,15 @@
 				svgCanvas.setOpacity(val/100);
 			}
 		
+			var changeBlur = function(ctl, val, noUndo) {
+				if(val == null) val = ctl.value;
+				$('#blur').val(val);
+				if(!ctl || !ctl.handle) {
+					$('#blur_slider').slider('option', 'value', val);
+				}
+				svgCanvas.setBlur(val, noUndo);
+			}
+		
 			var operaRepaint = function() {
 				// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
 				if(!window.opera) return;
@@ -1671,6 +1688,23 @@
 				}
 			});
 		
+			addDropDown('#blur_dropdown', function() {
+			});
+			
+			$("#blur_slider").slider({
+				max: 10,
+				step: .1,
+				stop: function(evt, ui) {
+					changeBlur(ui);
+					$('#blur_dropdown li').show();
+					$(window).mouseup();
+				},
+				slide: function(evt, ui){
+					changeBlur(ui, null, true);
+				}
+			});
+
+		
 			addDropDown('#zoom_dropdown', function() {
 				var item = $(this);
 				var val = item.attr('data-val');
@@ -1681,10 +1715,6 @@
 				}
 			}, 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);
@@ -2237,7 +2267,8 @@
 						'line-height': {s: '15px'}
 					},
 					"#tools_bottom_2": {
-						'width': {l: '295px', xl: '355px'}
+						'width': {l: '295px', xl: '355px'},
+						'top': {s: '4px'}
 					},
 					"#tools_top > div, #tools_top": {
 						'line-height': {s: '17px', l: '34px', xl: '50px'}
@@ -2364,6 +2395,7 @@
 		
 			function setImageURL(url) {
 				if(!url) url = default_img_url;
+				
 				svgCanvas.setImageURL(url);
 				$('#image_url').val(url);
 				
@@ -2568,6 +2600,13 @@
 			var supportsNonSS = (test_el.style.vectorEffect == 'non-scaling-stroke');
 			test_el.removeAttribute('style');
 			
+			// Use this to test support for blur element. Seems to work to test support in Webkit
+			var blur_test = svgdocbox.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
+			if(typeof blur_test.stdDeviationX === "undefined") {
+				$('#tool_blur').hide();
+			}
+			$(blur_test).remove();
+			
 			// Test for embedImage support (use timeout to not interfere with page load)
 			setTimeout(function() {
 				svgCanvas.embedImage('images/logo.png', function(datauri) {
@@ -3153,6 +3192,7 @@
 			$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
 			$('#font_size').SpinButton({ step: 1, min: 0.001, stepfunc: stepFontSize, callback: changeFontSize });
 			$('#group_opacity').SpinButton({ step: 5, min: 0, max: 100, callback: changeOpacity });
+			$('#blur').SpinButton({ step: .1, min: 0, max: 10, callback: changeBlur });
 			$('#zoom').SpinButton({ min: 0.001, max: 10000, step: 50, stepfunc: stepZoom, callback: changeZoom });
 			
 			window.onbeforeunload = function() { 
@@ -3215,7 +3255,6 @@
 				var w = workarea.width(), h = workarea.height();
 				var w_orig = w, h_orig = h;
 				var zoom = svgCanvas.getZoom();
-				var res = svgCanvas.getResolution();
 				var w_area = workarea;
 				var cnvs = $("#svgcanvas");
 				
@@ -3225,8 +3264,8 @@
 				};
 				
 				var multi = curConfig.canvas_expansion;
-				w = Math.max(w_orig, res.w * multi * zoom);
+				w = Math.max(w_orig, svgCanvas.contentW * zoom * multi);
-				h = Math.max(h_orig, res.h * multi * zoom);
+				h = Math.max(h_orig, svgCanvas.contentH * zoom * multi);
 				
 				if(w == w_orig && h == h_orig) {
 					workarea.css('overflow','hidden');
@@ -3255,8 +3294,8 @@
 					var new_y = new_can_y + old_dist_y * ratio;
 		
 					new_ctr = {
-						x: new_x, // + res.w/2,
+						x: new_x,
-						y: new_y //+ res.h/2,
+						y: new_y
 					};
 					
 				} else {
@@ -3277,7 +3316,7 @@
 				updateCanvas(true);
 // 			});
 			
-		//	var revnums = "svg-editor.js ($Rev: 1505 $) ";
+		//	var revnums = "svg-editor.js ($Rev: 1514 $) ";
 		//	revnums += svgCanvas.getVersion();
 		//	$('#copyright')[0].setAttribute("title", revnums);
 		

public/svg-edit/editor/svgcanvas.js

@@ -1,4 +1,4 @@
-/*
+/*
  * svgcanvas.js
  *
  * Licensed under the Apache License, Version 2
@@ -197,6 +197,7 @@ function ChangeElementCommand(elem, attrs, text) {
 	this.oldValues = attrs;
 	for (var attr in attrs) {
 		if (attr == "#text") this.newValues[attr] = elem.textContent;
+		else if (attr == "#href") this.newValues[attr] = elem.getAttributeNS(xlinkns, "href");
 		else this.newValues[attr] = elem.getAttribute(attr);
 	}
 
@@ -205,6 +206,7 @@ function ChangeElementCommand(elem, attrs, text) {
 		for(var attr in this.newValues ) {
 			if (this.newValues[attr]) {
 				if (attr == "#text") this.elem.textContent = this.newValues[attr];
+				else if (attr == "#href") this.elem.setAttributeNS(xlinkns, "xlink:href", this.newValues[attr])
 				else this.elem.setAttribute(attr, this.newValues[attr]);
 			}
 			else {
@@ -241,6 +243,7 @@ function ChangeElementCommand(elem, attrs, text) {
 		for(var attr in this.oldValues ) {
 			if (this.oldValues[attr]) {
 				if (attr == "#text") this.elem.textContent = this.oldValues[attr];
+				else if (attr == "#href") this.elem.setAttributeNS(xlinkns, "xlink:href", this.oldValues[attr]);
 				else this.elem.setAttribute(attr, this.oldValues[attr]);
 			}
 			else {
@@ -1140,6 +1143,7 @@ function BatchCommand(text) {
 		var handle = svgroot.suspendRedraw(60);
 		var defaults = {
 			'fill-opacity':1,
+			'stop-opacity':1,
 			'opacity':1,
 			'stroke':'none',
 			'stroke-dasharray':'none',
@@ -1599,15 +1603,36 @@ function BatchCommand(text) {
 			if(elem.id == 'svgcontent') {
 				// Process root element separately
 				var res = canvas.getResolution();
+//				console.log('res',res);
 				out.push(' width="' + res.w + '" height="' + res.h + '" xmlns="'+svgns+'"');
+				
+				var nsuris = {};
+				
+				// Check elements for namespaces, add if found
+				$(elem).find('*').andSelf().each(function() {
+					var el = this;
+					$.each(this.attributes, function(i, attr) {
+						var uri = attr.namespaceURI;
+						if(uri && !nsuris[uri] && nsMap[uri] !== 'xmlns') {
+							nsuris[uri] = true;
+							out.push(" xmlns:" + nsMap[uri] + '="' + uri +'"');
+						}
+					});
+				});
+				
 				var i = attrs.length;
 				while (i--) {
 					attr = attrs.item(i);
 					var attrVal = toXml(attr.nodeValue);
+					
+					// Namespaces have already been dealt with, so skip
+					if(attr.nodeName.indexOf('xmlns:') === 0) continue;
+					
 					// only serialize attributes we don't use internally
 					if (attrVal != "" && 
 						$.inArray(attr.localName, ['width','height','xmlns','x','y','viewBox','id','overflow']) == -1) 
 					{
+
 						if(!attr.namespaceURI || nsMap[attr.namespaceURI]) {
 							out.push(' '); 
 							out.push(attr.nodeName); out.push("=\"");
@@ -2148,6 +2173,10 @@ function BatchCommand(text) {
 					ty = 0;
 					if (child.nodeType == 1) {
 						var childTlist = canvas.getTransformList(child);
+
+						// some children might not have a transform (<metadata>, <defs>, etc)
+						if (!childTlist) continue;
+
 						var m = transformListToTransform(childTlist).matrix;
 					
 						var angle = canvas.getRotationAngle(child);
@@ -2589,6 +2618,11 @@ function BatchCommand(text) {
 				}
 			}
 		}
+		if(selectedElements[0] && selectedElements.length === 1 && selectedElements[0].tagName == 'a') {
+			// Make "a" element's child be the selected element 
+			selectedElements[0] = selectedElements[0].firstChild;
+		}
+		
 		call("selected", selectedElements);
 		
 		if (showGrips || selectedElements.length == 1) {
@@ -3603,7 +3637,8 @@ function BatchCommand(text) {
 				case "rect":
 				case "image":
 					var attrs = $(element).attr(["width", "height"]);
-					keep = (attrs.width != 0 || attrs.height != 0);
+					// Image should be kept regardless of size (use inherit dimensions later)
+					keep = (attrs.width != 0 || attrs.height != 0) || current_mode === "image";
 					break;
 				case "circle":
 					keep = (element.getAttribute('r') != 0);
@@ -5093,12 +5128,17 @@ function BatchCommand(text) {
 			},
 			
 			clear: function(remove) {
-				if(remove && current_mode == "path") {
+				if (current_mode == "path" && current_path_pts.length > 0) {
 					var elem = getElem(getId());
-					if(elem) elem.parentNode.removeChild(elem);
+					$(getElem("path_stretch_line")).remove();
+					$(elem).remove();
+					$(getElem("pathpointgrip_container")).find('*').attr('display', 'none');
+					current_path_pts = [];
+					started = false;
+				} else if (current_mode == "pathedit") {
+					this.toSelectMode();
 				}
 				if(path) path.init().show(false);
-				current_path = null;
 			},
 			resetOrientation: function(path) {
 				if(path == null || path.nodeName != 'path') return false;
@@ -5138,20 +5178,6 @@ function BatchCommand(text) {
 					path.update();
 				}
 			},
-			modeChange: function() {
-				// toss out half-drawn path
-				if (current_mode == "path" && current_path_pts.length > 0) {
-					var elem = getElem(getId());
-					elem.parentNode.removeChild(elem);
-					this.clear();
-					canvas.clearSelection();
-					started = false;
-				}
-				else if (current_mode == "pathedit") {
-					this.clear();
-					this.toSelectMode();
-				}
-			},
 			getNodePoint: function() {
 				var sel_pt = path.selected_pts.length ? path.selected_pts[0] : 1;
 
@@ -5980,10 +6006,11 @@ function BatchCommand(text) {
 					}
 				});
 			}
+			
+			content.attr(attrs);
 			this.contentW = attrs['width'];
 			this.contentH = attrs['height'];
 			
-			content.attr(attrs);
 			batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
 			// update root to the correct size
 			var changes = content.attr(["width", "height"]);
@@ -6655,8 +6682,8 @@ function BatchCommand(text) {
 // 		return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
 			
 		return {
-			'w':svgcontent.getAttribute("width"),
+			'w':svgcontent.getAttribute("width")/current_zoom,
-			'h':svgcontent.getAttribute("height"),
+			'h':svgcontent.getAttribute("height")/current_zoom,
 			'zoom': current_zoom
 		};
 	};
@@ -6824,7 +6851,7 @@ function BatchCommand(text) {
 	};
 
 	this.setMode = function(name) {
-		pathActions.modeChange();
+		pathActions.clear(true);
 		
 		cur_properties = (selectedElements[0] && selectedElements[0].nodeName == 'text') ? cur_text : cur_shape;
 		current_mode = name;
@@ -7084,6 +7111,82 @@ function BatchCommand(text) {
 		this.changeSelectedAttribute("opacity", val);
 	};
 
+	this.getBlur = function() {
+		var val = 0;
+		var elem = selectedElements[0];
+		
+		if(elem) {
+			var filter_url = elem.getAttribute('filter');
+			if(filter_url) {
+				var blur = getElem(elem.id + '_blur');
+				if(blur) {
+					val = blur.firstChild.getAttribute('stdDeviation');
+				}
+			}
+		}
+		return val;
+	}
+
+	this.setBlur = function(val, noUndo) {
+		// Looks for associated blur, creates one if not found
+		var elem_id = selectedElements[0].id;
+		var filter = getElem(elem_id + '_blur');
+		
+		val -= 0;
+		
+		// Blur found!
+		if(filter) {
+			if(val === 0) {
+				$(filter).remove();
+			} else {
+				var elem = filter.firstChild;
+				if(noUndo) {
+					this.changeSelectedAttributeNoUndo('stdDeviation', val, [elem]);
+				} else {
+					this.changeSelectedAttribute('stdDeviation', val, [elem]);
+				}
+			}
+		} else {
+			// Not found, so create
+			var newblur = addSvgElementFromJson({ "element": "feGaussianBlur",
+				"attr": {
+					"in": 'SourceGraphic',
+					"stdDeviation": val
+				}
+			});
+			
+			filter = addSvgElementFromJson({ "element": "filter",
+				"attr": {
+					"id": elem_id + '_blur'
+				}
+			});
+			
+			filter.appendChild(newblur);
+			findDefs().appendChild(filter);
+		}
+		
+		if(val === 0) {
+			selectedElements[0].removeAttribute("filter");
+		} else {
+			this.changeSelectedAttribute("filter", 'url(#' + elem_id + '_blur)');
+			
+			if(val > 3) {
+				// TODO: Create algorithm here where size is based on expected blur
+				assignAttributes(filter, {
+					x: '-50%',
+					y: '-50%',
+					width: '200%',
+					height: '200%',
+				}, 100);
+			} else {
+				filter.removeAttribute('x');
+				filter.removeAttribute('y');
+				filter.removeAttribute('width');
+				filter.removeAttribute('height');
+			}
+		}
+	};
+
 	this.getFillOpacity = function() {
 		return cur_shape.fill_opacity;
 	};
@@ -7331,7 +7434,44 @@ function BatchCommand(text) {
 	};
 
 	this.setImageURL = function(val) {
-		svgCanvas.changeSelectedAttribute("#href", val);
+		var elem = selectedElements[0];
+		if(!elem) return;
+		
+		var attrs = $(elem).attr(['width', 'height']);
+		var setsize = (!attrs.width || !attrs.height);
+
+		var cur_href = elem.getAttributeNS(xlinkns, "href");
+		
+		// Do nothing if no URL change or size change
+		if(cur_href !== val) {
+			setsize = true;
+		} else if(!setsize) return;
+
+		var batchCmd = new BatchCommand("Change Image URL");
+	
+		elem.setAttributeNS(xlinkns, "xlink:href", val);
+		batchCmd.addSubCommand(new ChangeElementCommand(elem, {
+			"#href": cur_href
+		}));
+	
+		if(setsize) {
+			$(new Image()).load(function() {
+				var changes = $(elem).attr(['width', 'height']);
+			
+				$(elem).attr({
+					width: this.width,
+					height: this.height
+				});
+				
+				selectorManager.requestSelector(elem).resize();
+				
+				batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
+				addCommandToHistory(batchCmd);
+				call("changed", elem);
+			}).attr('src',val);
+		} else {
+			addCommandToHistory(batchCmd);
+		}
 	};
 
 	this.setRectRadius = function(val) {
@@ -8313,7 +8453,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1504 $)";
+		return "svgcanvas.js ($Rev: 1514 $)";
 	};
 	
 	this.setUiStrings = function(strs) {