Largely fixed issue 185: Allow elements and selections to be visible outside the image canvas

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1225 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-01-15 15:04:57 +00:00
parent 03a335646f
commit 8c3488ab31
2 changed files with 126 additions and 58 deletions

View File

@ -41,7 +41,8 @@ function svg_edit_setup() {
var path = svgCanvas.pathActions;
var default_img_url = "images/logo.png";
var workarea = $("#workarea");
// Store and retrieve preferences
$.pref = function(key, val) {
if(val) curPrefs[key] = val;
@ -207,9 +208,10 @@ function svg_edit_setup() {
// if the element changed was the svg, then it could be a resolution change
if (elem && elem.tagName == "svg" && elem.getAttribute("viewBox")) {
var vb = elem.getAttribute("viewBox").split(' ');
changeResolution(parseInt(vb[2]),
parseInt(vb[3]));
// var vb = elem.getAttribute("viewBox").split(' ');
// changeResolution(parseInt(vb[2]),
// parseInt(vb[3]));
populateLayers();
}
// Update selectedElement if element is no longer part of the image.
@ -248,7 +250,7 @@ function svg_edit_setup() {
var zoomlevel = z_info.zoom;
var bb = z_info.bbox;
$('#zoom').val(Math.round(zoomlevel*100));
setResolution(res.w * zoomlevel, res.h * zoomlevel);
// setResolution(res.w * zoomlevel, res.h * zoomlevel);
var scrLeft = bb.x * zoomlevel;
var scrOffX = w_area.width()/2 - (bb.width * zoomlevel)/2;
w_area[0].scrollLeft = Math.max(0,scrLeft - scrOffX) + Math.max(0,canvas_pos.left);
@ -1049,7 +1051,8 @@ function svg_edit_setup() {
$.confirm(uiStrings.QwantToClear, function(ok) {
if(!ok) return;
svgCanvas.clear();
svgCanvas.setResolution(640, 480);
// svgCanvas.setResolution(640, 480);
updateCanvas();
zoomImage();
populateLayers();
updateContextPanel();
@ -1119,7 +1122,8 @@ function svg_edit_setup() {
var zoomImage = function(multiplier) {
var res = svgCanvas.getResolution();
multiplier = multiplier?res.zoom * multiplier:1;
setResolution(res.w * multiplier, res.h * multiplier, true);
// setResolution(res.w * multiplier, res.h * multiplier, true);
updateCanvas();
$('#zoom').val(multiplier * 100);
svgCanvas.setZoom(multiplier);
zoomDone();
@ -1128,6 +1132,7 @@ function svg_edit_setup() {
var zoomDone = function() {
updateBgImage();
updateWireFrame();
updateCanvas();
}
var clickWireframe = function() {
@ -1267,6 +1272,7 @@ function svg_edit_setup() {
// set icon size
setIconSize($('#iconsize').val());
updateCanvas();
hideDocProperties();
};
@ -2009,10 +2015,10 @@ function svg_edit_setup() {
};
populateLayers();
function changeResolution(x,y) {
var zoom = svgCanvas.getResolution().zoom;
setResolution(x * zoom, y * zoom);
}
// function changeResolution(x,y) {
// var zoom = svgCanvas.getResolution().zoom;
// setResolution(x * zoom, y * zoom);
// }
var centerCanvas = function() {
// this centers the canvas vertically in the workarea (horizontal handled in CSS)
@ -2061,20 +2067,21 @@ function svg_edit_setup() {
}
}
function setResolution(w, h, center) {
w-=0; h-=0;
$('#svgcanvas').css( { 'width': w, 'height': h } );
$('#canvas_width').val(w);
$('#canvas_height').val(h);
if(center) {
var w_area = workarea;
var scroll_y = h/2 - w_area.height()/2;
var scroll_x = w/2 - w_area.width()/2;
w_area[0].scrollTop = scroll_y;
w_area[0].scrollLeft = scroll_x;
}
}
// function setResolution(w, h, center) {
// updateCanvas();
// // w-=0; h-=0;
// // $('#svgcanvas').css( { 'width': w, 'height': h } );
// // $('#canvas_width').val(w);
// // $('#canvas_height').val(h);
// //
// // if(center) {
// // var w_area = workarea;
// // var scroll_y = h/2 - w_area.height()/2;
// // var scroll_x = w/2 - w_area.width()/2;
// // w_area[0].scrollTop = scroll_y;
// // w_area[0].scrollLeft = scroll_x;
// // }
// }
$('#resolution').change(function(){
var wh = $('#canvas_width,#canvas_height');
@ -2316,8 +2323,28 @@ function svg_edit_setup() {
$("#tool_open").show().prepend(inp);
}
var updateCanvas = function() {
var w = workarea.width(), h = workarea.height();
var w_orig = w, h_orig = h;
var zoom = svgCanvas.getZoom();
var multi = (5*(zoom>1?zoom:1));
// Make the canvas bigger than the viewport
w *= multi;
h *= multi;
$("#svgcanvas").width(w).height(h);
svgCanvas.updateCanvas(w, h);
var w_area = workarea;
var scroll_y = h/2 - h_orig/2;
var scroll_x = w/2 - w_orig/2;
w_area[0].scrollTop = scroll_y;
w_area[0].scrollLeft = scroll_x;
}
// set starting resolution (centers canvas)
setResolution(640,480);
// setResolution(640,480);
$(updateCanvas);
// var revnums = "svg-editor.js ($Rev$) ";
// revnums += svgCanvas.getVersion();

View File

@ -561,6 +561,22 @@ function BatchCommand(text) {
mgr.selectorMap = {};
mgr.selectors = [];
mgr.rubberBandBox = null;
if($("#borderRect").length) return;
var rect = svgdoc.createElementNS(svgns, "rect");
assignAttributes(rect, {
'id':'borderRect',
'width':'640',
'height':'480',
'x':'0',
'y':'0',
'stroke-width':'1',
'stroke':'#000',
'fill':'none',
'style':'pointer-events:none'
});
mgr.selectorParentGroup.appendChild(rect);
};
this.requestSelector = function(elem) {
@ -860,13 +876,18 @@ function BatchCommand(text) {
container.appendChild(svgroot);
var svgcontent = svgdoc.createElementNS(svgns, "svg");
svgcontent.setAttribute('id', 'svgcontent');
svgcontent.setAttribute('viewBox', '0 0 640 480');
// svgcontent.setAttribute('viewBox', '0 0 640 480');
svgcontent.setAttribute('width', '640');
svgcontent.setAttribute('height', '480');
svgcontent.setAttribute('x', '640');
svgcontent.setAttribute('y', '480');
svgcontent.setAttribute('overflow', 'visible');
svgcontent.setAttribute("xmlns", svgns);
svgcontent.setAttribute("xmlns:xlink", xlinkns);
svgroot.appendChild(svgcontent);
(function() {
// TODO: make this string optional and set by the client
var comment = svgdoc.createComment(" Created with SVG-edit - http://svg-edit.googlecode.com/ ");
@ -1121,7 +1142,6 @@ function BatchCommand(text) {
}
var svgCanvasToString = function() {
// TODO: Find out why Webkit throws an error somewhere here (breaking the editor)
removeUnusedGrads();
pathActions.clear(true);
$.each(svgcontent.childNodes, function(i, node) {
@ -1141,6 +1161,7 @@ function BatchCommand(text) {
var attr;
var i;
var childs = elem.childNodes;
for (var i=0; i<indent; i++) out.push(" ");
out.push("<"); out.push(elem.nodeName);
if(elem.id == 'svgcontent') {
@ -1196,7 +1217,6 @@ function BatchCommand(text) {
for (var i=0; i<childs.length; i++)
{
var child = childs.item(i);
if (child.id == "selectorParentGroup") continue;
switch(child.nodeType) {
case 1: // element node
out.push("\n");
@ -2289,10 +2309,10 @@ function BatchCommand(text) {
// and do nothing else
var mouseDown = function(evt)
{
root_sctm = svgroot.getScreenCTM().inverse();
root_sctm = svgcontent.getScreenCTM().inverse();
var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
var mouse_x = pt.x;
var mouse_y = pt.y;
var mouse_x = pt.x * current_zoom;
var mouse_y = pt.y * current_zoom;
evt.preventDefault();
if($.inArray(current_mode, ['select', 'resize']) == -1) {
@ -2608,8 +2628,8 @@ function BatchCommand(text) {
if (!started) return;
var selected = selectedElements[0];
var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
var mouse_x = pt.x;
var mouse_y = pt.y;
var mouse_x = pt.x * current_zoom;
var mouse_y = pt.y * current_zoom;
var shape = getElem(getId());
x = mouse_x / current_zoom;
@ -2892,8 +2912,8 @@ function BatchCommand(text) {
if (!started) return;
var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
var mouse_x = pt.x;
var mouse_y = pt.y;
var mouse_x = pt.x * current_zoom;
var mouse_y = pt.y * current_zoom;
var x = mouse_x / current_zoom;
var y = mouse_y / current_zoom;
@ -4772,20 +4792,19 @@ function BatchCommand(text) {
else {
w = svgcontent.getAttribute("width");
h = svgcontent.getAttribute("height");
svgcontent.setAttribute("viewBox", ["0", "0", w, h].join(" "));
// svgcontent.setAttribute("viewBox", ["0", "0", w, h].join(" "));
}
// just to be safe, set width and height to 100%/100%
// (removing causes bug in Webkit)
svgcontent.setAttribute('width','100%');
svgcontent.setAttribute('height','100%');
svgcontent.setAttribute('width', w);
svgcontent.setAttribute('height', h);
svgcontent.setAttribute('overflow', 'visible');
batchCmd.addSubCommand(new InsertElementCommand(svgcontent));
// update root to the correct size
var changes = {};
changes['width'] = svgroot.getAttribute('width');
changes['height'] = svgroot.getAttribute('height');
svgroot.setAttribute('width', w);
svgroot.setAttribute('height', h);
changes['width'] = svgcontent.getAttribute('width');
changes['height'] = svgcontent.getAttribute('height');
// svgroot.setAttribute('width', w);
// svgroot.setAttribute('height', h);
batchCmd.addSubCommand(new ChangeElementCommand(svgroot, changes));
// reset zoom
@ -5235,9 +5254,14 @@ function BatchCommand(text) {
}
this.getResolution = function() {
// return [svgroot.getAttribute("width"), svgroot.getAttribute("height")];
var vb = svgcontent.getAttribute("viewBox").split(' ');
return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
// var vb = svgcontent.getAttribute("viewBox").split(' ');
// return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
return {
'w':svgcontent.getAttribute("width"),
'h':svgcontent.getAttribute("height"),
'zoom': current_zoom
};
};
this.getImageTitle = function() {
@ -5306,18 +5330,16 @@ function BatchCommand(text) {
return false;
}
}
x *= current_zoom;
y *= current_zoom;
if (x != w || y != h) {
var handle = svgroot.suspendRedraw(1000);
if(!batchCmd) {
batchCmd = new BatchCommand("Change Image Dimensions");
}
svgroot.setAttribute('width', x);
svgroot.setAttribute('height', y);
batchCmd.addSubCommand(new ChangeElementCommand(svgroot, {"width":w, "height":h}));
svgcontent.setAttribute('width', x);
svgcontent.setAttribute('height', y);
batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"width":w, "height":h}));
svgcontent.setAttribute("viewBox", ["0 0", x/current_zoom, y/current_zoom].join(' '));
svgcontent.setAttribute("viewBox", [0, 0, x/current_zoom, y/current_zoom].join(' '));
batchCmd.addSubCommand(new ChangeElementCommand(svgcontent, {"viewBox": ["0 0", w, h].join(' ')}));
addCommandToHistory(batchCmd);
@ -5373,8 +5395,7 @@ function BatchCommand(text) {
this.setZoom = function(zoomlevel) {
var res = canvas.getResolution();
svgroot.setAttribute("width", res.w * zoomlevel);
svgroot.setAttribute("height", res.h * zoomlevel);
svgcontent.setAttribute("viewBox", "0 0 " + res.w/zoomlevel + " " + res.h/zoomlevel);
current_zoom = zoomlevel;
$.each(selectedElements, function(i, elem) {
if(!elem) return;
@ -6339,6 +6360,26 @@ function BatchCommand(text) {
'height': h
};
}
this.updateCanvas = function(w, h, w_orig, h_orig) {
svgroot.setAttribute("width", w);
svgroot.setAttribute("height", h);
var rect = $('#borderRect')[0];
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, {
width: svgcontent.getAttribute('width') * current_zoom,
height: svgcontent.getAttribute('height') * current_zoom
});
selectorManager.selectorParentGroup.setAttribute("transform","translate(" + x + "," + y + ")");
}
this.getStrokedBBox = function(elems) {
if(!elems) elems = canvas.getVisibleElements();