From 66c5cb48663bddd833067cfca83e0bd678b658a5 Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 6 Apr 2010 18:40:10 +0000
Subject: [PATCH] Added basic support for gaussianBlur effect

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1508 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.html | 13 ++++++++
 editor/svg-editor.js   | 37 ++++++++++++++++++++++
 editor/svgcanvas.js    | 71 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 121 insertions(+)

diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 081fbe03..1d176f9c 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -166,6 +166,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"/>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 1c5a63ff..364f1e0c 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -1064,6 +1064,10 @@
 					var elname = elem.nodeName;
 					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') {
@@ -1294,6 +1298,15 @@
 				svgCanvas.setOpacity(val/100);
 			}
 		
+			var changeBlur = function(ctl, val) {
+				if(val == null) val = ctl.value;
+				$('#blur').val(val);
+				if(!ctl || !ctl.handle) {
+					$('#blur_slider').slider('option', 'value', val);
+				}
+				svgCanvas.setBlur(val);
+			}
+		
 			var operaRepaint = function() {
 				// Repaints canvas in Opera. Needed for stroke-dasharray change as well as fill change
 				if(!window.opera) return;
@@ -1671,6 +1684,22 @@
 				}
 			});
 		
+			addDropDown('#blur_dropdown', function() {
+			});
+			
+			$("#blur_slider").slider({
+				max: 10,
+				step: .1,
+				stop: function() {
+					$('#blur_dropdown li').show();
+					$(window).mouseup();
+				},
+				slide: function(evt, ui){
+					changeBlur(ui);
+				}
+			});
+
+		
 			addDropDown('#zoom_dropdown', function() {
 				var item = $(this);
 				var val = item.attr('data-val');
@@ -2568,6 +2597,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 +3189,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() { 
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index d05d358c..c698dd62 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -7084,6 +7084,77 @@ 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) {
+		// 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 {
+				filter.firstChild.setAttribute('stdDeviation', val);
+			}
+		} 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;
 	};