Fixed background colors/URLs, element page alignment and clear option

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

editor/svg-editor.css

@@ -381,8 +381,8 @@
 	stroke: none;
 }
 
-#workarea.wireframe #svgcanvas {
+#workarea.wireframe #canvasBackground rect {
-	background: #FFF !important;
+	fill: #FFF !important;
 }
 
 #svg_editor #selected_panel,

editor/svg-editor.js

@@ -231,13 +231,13 @@ function svg_edit_setup() {
 		updateContextPanel();
 	};
 	
-	var updateBgImage = function() {
+// 	var updateBgImage = function() {
-		var bg_img = $('#background_img');
+// 		var bg_img = $('#background_img');
-		if(!bg_img.length) return;
+// 		if(!bg_img.length) return;
-		var img = bg_img.find('img');
+// 		var img = bg_img.find('img');
-		var zoomlevel = svgCanvas.getZoom();
+// 		var zoomlevel = svgCanvas.getZoom();
-		img.width(zoomlevel*100 + '%');
+// 		img.width(zoomlevel*100 + '%');
-	}
+// 	}
 	
 	var zoomChanged = function(window, bbox, autoCenter) {
 		var scrbar = 15;
@@ -522,7 +522,8 @@ function svg_edit_setup() {
 	$('#palette').append(str);
 	
 	// Set up editor background functionality
-	var color_blocks = ['#FFF','#888','#000','url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
+	// TODO add checkerboard as "pattern"
+	var color_blocks = ['#FFF','#888','#000']; // ,'url(data:image/gif;base64,R0lGODlhEAAQAIAAAP%2F%2F%2F9bW1iH5BAAAAAAALAAAAAAQABAAAAIfjG%2Bgq4jM3IFLJgpswNly%2FXkcBpIiVaInlLJr9FZWAQA7)'];
 	var str = '';
 	$.each(color_blocks, function() {
 		str += '<div class="color_block" style="background:' + this + ';"></div>';
@@ -1057,7 +1058,7 @@ function svg_edit_setup() {
 		$.confirm(uiStrings.QwantToClear, function(ok) {
 			if(!ok) return;
 			svgCanvas.clear();
-// 			svgCanvas.setResolution(640, 480);
+			svgCanvas.setResolution(640, 480);
 			updateCanvas(true);
 			zoomImage();
 			populateLayers();
@@ -1136,7 +1137,7 @@ function svg_edit_setup() {
 	};
 	
 	var zoomDone = function() {
-		updateBgImage();
+// 		updateBgImage();
 		updateWireFrame();
 		//updateCanvas(); // necessary?
 	}
@@ -1193,17 +1194,17 @@ function svg_edit_setup() {
 		// Update background color with current one
 		var blocks = $('#bg_blocks div');
 		var cur_bg = 'cur_background';
-		var canvas_bg = $('#svgcanvas').css('background');
+		var canvas_bg = $.pref('bg_color');
-		var url = canvas_bg.match(/url\("?(.*?)"?\)/);
+		var url = $.pref('bg_url');
-		if(url) url = url[1];
+// 		if(url) url = url[1];
 		blocks.each(function() {
 			var blk = $(this);
-			var is_bg = blk.css('background') == canvas_bg;
+			var is_bg = blk.css('background-color') == canvas_bg;
 			blk.toggleClass(cur_bg, is_bg);
 			if(is_bg) $('#canvas_bg_url').removeClass(cur_bg);
 		});
 		if(!canvas_bg) blocks.eq(0).addClass(cur_bg);
-		if(!$('#bg_blocks .' + cur_bg).length && url) {
+		if(url) {
 			$('#canvas_bg_url').val(url);
 		}
 		
@@ -1266,7 +1267,7 @@ function svg_edit_setup() {
 		$.pref('img_save',curPrefs.img_save);
 		
 		// set background
-		var color = $('#bg_blocks div.cur_background').css('background') || '#FFF';
+		var color = $('#bg_blocks div.cur_background').css('background-color') || '#FFF';
 		setBackground(color, $('#canvas_bg_url').val());
 		
 		// set language
@@ -1288,18 +1289,7 @@ function svg_edit_setup() {
 		$.pref('bg_url', url);
 		
 		// This should be done in svgcanvas.js for the borderRect fill
-		// $('#svgcanvas').css('background',color);
+		svgCanvas.setBackground(color, url);
-		
-		if(url) {
-			if(!$('#background_img').length) {
-				$('<div id="background_img"><img src="'+url+'" style="width:100%"></div>')
-					.prependTo('#svgcanvas');
-			} else {
-				$('#background_img img').attr('src',url);
-			}
-		} else {
-			$('#background_img').remove();
-		}
 	}
 
 	var setIconSize = function(size) {

editor/svgcanvas.js

@@ -559,21 +559,30 @@ function BatchCommand(text) {
 			mgr.selectors = [];
 			mgr.rubberBandBox = null;
 			
-			if($("#borderRect").length) return;
+			if($("#canvasBackground").length) return;
 
+			var canvasbg = svgdoc.createElementNS(svgns, "svg");
+			assignAttributes(canvasbg, {
+				'id':'canvasBackground',
+				'width': 640,
+				'height': 480,
+				'x': 0,
+				'y': 0,
+				'style': 'pointer-events:none'
+			});
 			var rect = svgdoc.createElementNS(svgns, "rect");
 			assignAttributes(rect, {
-				'id':'borderRect',
+				'width': '100%',
-				'width':'640',
+				'height': '100%',
-				'height':'480',
+				'x': 0,
-				'x':'0',
+				'y': 0,
-				'y':'0',
+				'stroke-width': 1,
-				'stroke-width':'1',
+				'stroke': '#000',
-				'stroke':'#000',
+				'fill': '#FFF',
-				'fill':'#FFF',
+				'style': 'pointer-events:none'
-				'style':'pointer-events:none'
 			});
-			svgroot.insertBefore(rect, svgcontent);
+			canvasbg.appendChild(rect);
+			svgroot.insertBefore(canvasbg, svgcontent);
 		};
 
 		this.requestSelector = function(elem) {
@@ -6418,20 +6427,18 @@ function BatchCommand(text) {
 	this.updateCanvas = function(w, h, w_orig, h_orig) {
 		svgroot.setAttribute("width", w);
 		svgroot.setAttribute("height", h);
-		var rect = $('#borderRect')[0];
+		var bg = $('#canvasBackground')[0];
 		var old_x = svgcontent.getAttribute('x');
 		var old_y = svgcontent.getAttribute('y');
 		var x = (w/2 - svgcontent.getAttribute('width')*current_zoom/2);
 		var y = (h/2 - svgcontent.getAttribute('height')*current_zoom/2);
 
-		
-
 		assignAttributes(svgcontent, {
 			'x': x,
 			'y': y
 		});
 		
-		assignAttributes(rect, {
+		assignAttributes(bg, {
 			width: svgcontent.getAttribute('width') * current_zoom,
 			height: svgcontent.getAttribute('height') * current_zoom,
 			x: x,
@@ -6734,6 +6741,29 @@ function BatchCommand(text) {
 		}
 	};
 
+	this.setBackground = function(color, url) {
+		var bg =  getElem('canvasBackground');
+		var border = $(bg).find('rect')[0];
+		var bg_img = getElem('background_image');
+		border.setAttribute('fill',color);
+		if(url) {
+			if(!bg_img) {
+				bg_img = svgdoc.createElementNS(svgns, "image");
+				assignAttributes(bg_img, {
+					'id': 'background_image',
+					'width': '100%',
+					'height': '100%',
+					'preserveAspectRatio': 'xMinYMin',
+					'style':'pointer-events:none'
+				});
+			}
+			bg_img.setAttributeNS(xlinkns, "href", url);
+			bg.appendChild(bg_img);
+		} else if(bg_img) {
+			bg_img.parentNode.removeChild(bg_img);
+		}
+	}
+
 	// aligns selected elements (type is a char - see switch below for explanation)
 	// relative_to can be "selected", "largest", "smallest", "page"
 	this.alignSelectedElements = function(type, relative_to) {
@@ -6783,8 +6813,8 @@ function BatchCommand(text) {
 		if (relative_to == 'page') {
 			minx = 0;
 			miny = 0;
-			maxx = svgroot.getAttribute('width');
+			maxx = svgcontent.getAttribute('width');
-			maxy = svgroot.getAttribute('height');
+			maxy = svgcontent.getAttribute('height');
 		}
 
 		var dx = new Array(len);