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-75d572ba1dddmaster
Alexis Deveria
parent
29e2acc359
commit
0f46184757
|
|
@ -381,8 +381,8 @@
|
|||
stroke: none;
|
||||
}
|
||||
|
||||
#workarea.wireframe #svgcanvas {
|
||||
background: #FFF !important;
|
||||
#workarea.wireframe #canvasBackground rect {
|
||||
fill: #FFF !important;
|
||||
}
|
||||
|
||||
#svg_editor #selected_panel,
|
||||
|
|
|
|||
|
|
@ -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 += '<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 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) {
|
||||
$('<div id="background_img"><img src="'+url+'" style="width:100%"></div>')
|
||||
.prependTo('#svgcanvas');
|
||||
} else {
|
||||
$('#background_img img').attr('src',url);
|
||||
}
|
||||
} else {
|
||||
$('#background_img').remove();
|
||||
}
|
||||
svgCanvas.setBackground(color, url);
|
||||
}
|
||||
|
||||
var setIconSize = function(size) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue