diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 733cec91..ad7ea81e 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -381,8 +381,8 @@
stroke: none;
}
-#workarea.wireframe #svgcanvas {
- background: #FFF !important;
+#workarea.wireframe #canvasBackground rect {
+ fill: #FFF !important;
}
#svg_editor #selected_panel,
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index a52ebd69..1cbe5512 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -231,13 +231,13 @@ function svg_edit_setup() {
updateContextPanel();
};
- var updateBgImage = function() {
- var bg_img = $('#background_img');
- if(!bg_img.length) return;
- var img = bg_img.find('img');
- var zoomlevel = svgCanvas.getZoom();
- img.width(zoomlevel*100 + '%');
- }
+// var updateBgImage = function() {
+// var bg_img = $('#background_img');
+// if(!bg_img.length) return;
+// var img = bg_img.find('img');
+// var zoomlevel = svgCanvas.getZoom();
+// 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 += '';
@@ -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 url = canvas_bg.match(/url\("?(.*?)"?\)/);
- if(url) url = url[1];
+ var canvas_bg = $.pref('bg_color');
+ var url = $.pref('bg_url');
+// 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);
-
- if(url) {
- if(!$('#background_img').length) {
- $('')
- .prependTo('#svgcanvas');
- } else {
- $('#background_img img').attr('src',url);
- }
- } else {
- $('#background_img').remove();
- }
+ svgCanvas.setBackground(color, url);
}
var setIconSize = function(size) {
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 5a058e75..1b286f85 100644
--- a/editor/svgcanvas.js
+++ b/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':'640',
- 'height':'480',
- 'x':'0',
- 'y':'0',
- 'stroke-width':'1',
- 'stroke':'#000',
- 'fill':'#FFF',
- 'style':'pointer-events:none'
+ 'width': '100%',
+ 'height': '100%',
+ 'x': 0,
+ 'y': 0,
+ 'stroke-width': 1,
+ 'stroke': '#000',
+ 'fill': '#FFF',
+ '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');
- maxy = svgroot.getAttribute('height');
+ maxx = svgcontent.getAttribute('width');
+ maxy = svgcontent.getAttribute('height');
}
var dx = new Array(len);