Made doc properties adjustments, now has separate width&height fields.
git-svn-id: http://svg-edit.googlecode.com/svn/trunk@677 eee81c28-f429-11dd-99c0-75d572ba1dddmaster
Alexis Deveria
parent
2e39f07884
commit
e7941f5df8
|
|
@ -468,7 +468,16 @@ span.zoom_tool {
|
|||
padding: 10px;
|
||||
background-color: #B0B0B0;
|
||||
opacity: 1.0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#svg_docprops_container fieldset {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#svg_docprops_container label {
|
||||
display: block;
|
||||
margin-bottom: .2em;
|
||||
}
|
||||
|
||||
#svg_source_editor #svg_source_textarea {
|
||||
|
|
@ -491,10 +500,15 @@ span.zoom_tool {
|
|||
}
|
||||
|
||||
#svg_source_editor button, #svg_docprops button {
|
||||
padding: 5px 2px 6px 28px;
|
||||
padding: 5px 5px 7px 28px;
|
||||
margin: 5px 20px 0 0;
|
||||
}
|
||||
|
||||
#svg_docprops button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#svg_docprops {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -510,9 +524,9 @@ span.zoom_tool {
|
|||
}
|
||||
|
||||
#tool_source_save, #tool_docprops_save {
|
||||
background: #E8E8E8 url(images/save.png) no-repeat 2px 2px;
|
||||
background: #E8E8E8 url(images/save.png) no-repeat 2px 0;
|
||||
}
|
||||
|
||||
#tool_source_cancel, #tool_docprops_cancel {
|
||||
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 2px;
|
||||
background: #E8E8E8 url(images/cancel.png) no-repeat 2px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -337,21 +337,29 @@
|
|||
<button id="tool_docprops_cancel">Cancel</button>
|
||||
|
||||
<fieldset id="change_background">
|
||||
<label>Canvas Background:</label>
|
||||
<div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div>
|
||||
<legend>Canvas Background</legend>
|
||||
<div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset id="change_resolution">
|
||||
<label>Resolution:</label>
|
||||
<select id="resolution" label="Resolution:">
|
||||
<option selected="selected">640x480</option>
|
||||
<option>800x600</option>
|
||||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option>Fit to Content</option>
|
||||
<option>Custom</option>
|
||||
</select>
|
||||
<legend>Canvas Dimensions</legend>
|
||||
|
||||
<label>Width: <input type="text" id="canvas_width" size="6"></label>
|
||||
|
||||
<label>Height: <input type="text" id="canvas_height" size="6"></label>
|
||||
|
||||
<label>
|
||||
<select id="resolution" label="Resolution:">
|
||||
<option selected="selected">Select predefined:</option>
|
||||
<option>640x480</option>
|
||||
<option>800x600</option>
|
||||
<option>1024x768</option>
|
||||
<option>1280x960</option>
|
||||
<option>1600x1200</option>
|
||||
<option value="content">Fit to Content</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -725,8 +725,9 @@ function svg_edit_setup() {
|
|||
// update resolution option with actual resolution
|
||||
// TODO: what if SVG source is changed?
|
||||
var res = svgCanvas.getResolution();
|
||||
$("#resolution").val(res.w+'x'+res.h).attr("selected", "selected");
|
||||
|
||||
$('#canvas_width').val(res.w);
|
||||
$('#canvas_height').val(res.h);
|
||||
|
||||
$('#svg_docprops').fadeIn();
|
||||
};
|
||||
|
||||
|
|
@ -751,15 +752,15 @@ function svg_edit_setup() {
|
|||
|
||||
var saveDocProperties = function(){
|
||||
// update resolution
|
||||
var x = '', y = '';
|
||||
var resOption = $('#resolution');
|
||||
var val = resOption.val();
|
||||
if (val && val != 'Fit to content') {
|
||||
var res = val.split('x');
|
||||
x = parseInt(res[0]);
|
||||
y = parseInt(res[1]);
|
||||
var x = parseInt($('#canvas_width').val());
|
||||
var y = parseInt($('#canvas_height').val());
|
||||
if(isNaN(x) || isNaN(y)) {
|
||||
x ='fit';
|
||||
}
|
||||
if(!svgCanvas.setResolution(x,y)) {
|
||||
alert('No content to fit to');
|
||||
return false;
|
||||
}
|
||||
svgCanvas.setResolution(x,y);
|
||||
hideDocProperties();
|
||||
};
|
||||
|
||||
|
|
@ -788,6 +789,8 @@ function svg_edit_setup() {
|
|||
|
||||
var hideDocProperties = function(){
|
||||
$('#svg_docprops').hide();
|
||||
$('#canvas_width,#canvas_height').removeAttr('disabled');
|
||||
$('#resolution')[0].selectedIndex = 0;
|
||||
docprops = false;
|
||||
};
|
||||
|
||||
|
|
@ -1192,6 +1195,8 @@ 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;
|
||||
|
|
@ -1202,25 +1207,18 @@ function svg_edit_setup() {
|
|||
}
|
||||
|
||||
$('#resolution').change(function(){
|
||||
if(this.value == 'Custom') {
|
||||
var cust_val = prompt("Please enter custom size (i.e. 400x300)","");
|
||||
var res_vals = cust_val.match(/(\d+)[x \/,](\d+)/);
|
||||
if(!res_vals) {
|
||||
alert('Invalid size. Please format it as WIDTHxHEIGHT (like 400x300)');
|
||||
return false;
|
||||
} else {
|
||||
var x = res_vals[1], y = res_vals[2];
|
||||
if(x == '0' || y == '0') {
|
||||
alert('Invalid size. Width or height may not be 0.');
|
||||
return false;
|
||||
}
|
||||
var newOption = [x,'x',y].join('');
|
||||
$("#resolution").val(newOption).attr("selected", "selected");
|
||||
if ($("#resolution").val() != newOption) {
|
||||
$('#resolution').append('<option>'+newOption+'</option>');
|
||||
$("#resolution").val(newOption).attr("selected", "selected");
|
||||
}
|
||||
var wh = $('#canvas_width,#canvas_height');
|
||||
if(!this.selectedIndex) {
|
||||
if($('#canvas_width').val() == 'fit') {
|
||||
wh.removeAttr("disabled").val(100);
|
||||
}
|
||||
} else if(this.value == 'content') {
|
||||
wh.val('fit').attr("disabled","disabled");
|
||||
} else {
|
||||
var dims = this.value.split('x');
|
||||
$('#canvas_width').val(dims[0]);
|
||||
$('#canvas_height').val(dims[1]);
|
||||
wh.removeAttr("disabled");
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2868,11 +2868,12 @@ function BatchCommand(text) {
|
|||
var vb = svgzoom.getAttribute("viewBox").split(' ');
|
||||
return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
|
||||
};
|
||||
|
||||
this.setResolution = function(x, y) {
|
||||
var res = canvas.getResolution();
|
||||
var w = res.w, h = res.h;
|
||||
|
||||
if(!x) {
|
||||
if(x == 'fit') {
|
||||
canvas.clearSelection();
|
||||
|
||||
// Get bounding box
|
||||
|
|
@ -2890,11 +2891,10 @@ function BatchCommand(text) {
|
|||
});
|
||||
});
|
||||
canvas.clearSelection();
|
||||
x = bbox.width;
|
||||
y = bbox.height;
|
||||
x = Math.round(bbox.width);
|
||||
y = Math.round(bbox.height);
|
||||
} else {
|
||||
alert('No content to fit to');
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
x *= current_zoom;
|
||||
|
|
@ -2914,6 +2914,7 @@ function BatchCommand(text) {
|
|||
svgroot.unsuspendRedraw(handle);
|
||||
call("changed", [svgzoom]);
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
this.setBBoxZoom = function(val, editor_w, editor_h) {
|
||||
|
|
@ -3667,6 +3668,7 @@ function BatchCommand(text) {
|
|||
this.getStrokedBBox = function(elems) {
|
||||
// TODO: Get correct BBoxes for rotated elements
|
||||
if(!elems) elems = canvas.getVisibleElements();
|
||||
if(!elems.length) return false;
|
||||
var full_bb = elems[0].getBBox();
|
||||
var max_x = full_bb.x + full_bb.width;
|
||||
var max_y = full_bb.y + full_bb.height;
|
||||
|
|
|
|||
Loading…
Reference in New Issue