zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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-75d572ba1ddd
master
Alexis Deveria 2009-09-22 17:22:28 +00:00
parent 2e39f07884
commit e7941f5df8
4 changed files with 71 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
editor/svg-editor.css
View File

@ -468,7 +468,16 @@ span.zoom_tool {
padding: 10px; padding: 10px;
background-color: #B0B0B0; background-color: #B0B0B0;
opacity: 1.0; 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 { #svg_source_editor #svg_source_textarea {
@ -491,10 +500,15 @@ span.zoom_tool {
} }
#svg_source_editor button, #svg_docprops button { #svg_source_editor button, #svg_docprops button {
padding: 5px 2px 6px 28px; padding: 5px 5px 7px 28px;
margin: 5px 20px 0 0; margin: 5px 20px 0 0;
} }
#svg_docprops button {
margin-top: 0;
margin-bottom: 5px;
}
#svg_docprops { #svg_docprops {
display: none; display: none;
} }
@ -510,9 +524,9 @@ span.zoom_tool {
} }
#tool_source_save, #tool_docprops_save { #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 { #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;
} }

32
editor/svg-editor.html
View File

@ -337,21 +337,29 @@
<button id="tool_docprops_cancel">Cancel</button> <button id="tool_docprops_cancel">Cancel</button>
<fieldset id="change_background"> <fieldset id="change_background">
<label>Canvas Background:</label> <legend>Canvas Background</legend>
<div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div> <div id="bkgnd_color" class="color_block" title="Change background color/opacity"></div>
</fieldset> </fieldset>
<fieldset id="change_resolution"> <fieldset id="change_resolution">
<label>Resolution:</label> <legend>Canvas Dimensions</legend>
<select id="resolution" label="Resolution:">
<option selected="selected">640x480</option> <label>Width: <input type="text" id="canvas_width" size="6"></label>
<option>800x600</option>
<option>1024x768</option> <label>Height: <input type="text" id="canvas_height" size="6"></label>
<option>1280x960</option>
<option>1600x1200</option> <label>
<option>Fit to Content</option> <select id="resolution" label="Resolution:">
<option>Custom</option> <option selected="selected">Select predefined:</option>
</select> <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> </fieldset>
</div> </div>
</div> </div>

54
editor/svg-editor.js
View File

@ -725,8 +725,9 @@ function svg_edit_setup() {
// update resolution option with actual resolution // update resolution option with actual resolution
// TODO: what if SVG source is changed? // TODO: what if SVG source is changed?
var res = svgCanvas.getResolution(); 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(); $('#svg_docprops').fadeIn();
}; };
@ -751,15 +752,15 @@ function svg_edit_setup() {
var saveDocProperties = function(){ var saveDocProperties = function(){
// update resolution // update resolution
var x = '', y = ''; var x = parseInt($('#canvas_width').val());
var resOption = $('#resolution'); var y = parseInt($('#canvas_height').val());
var val = resOption.val(); if(isNaN(x) || isNaN(y)) {
if (val && val != 'Fit to content') { x ='fit';
var res = val.split('x'); }
x = parseInt(res[0]); if(!svgCanvas.setResolution(x,y)) {
y = parseInt(res[1]); alert('No content to fit to');
return false;
} }
svgCanvas.setResolution(x,y);
hideDocProperties(); hideDocProperties();
}; };
@ -788,6 +789,8 @@ function svg_edit_setup() {
var hideDocProperties = function(){ var hideDocProperties = function(){
$('#svg_docprops').hide(); $('#svg_docprops').hide();
$('#canvas_width,#canvas_height').removeAttr('disabled');
$('#resolution')[0].selectedIndex = 0;
docprops = false; docprops = false;
}; };
@ -1192,6 +1195,8 @@ function svg_edit_setup() {
function setResolution(w, h, center) { function setResolution(w, h, center) {
w-=0; h-=0; w-=0; h-=0;
$('#svgcanvas').css( { 'width': w, 'height': h } ); $('#svgcanvas').css( { 'width': w, 'height': h } );
$('#canvas_width').val(w);
$('#canvas_height').val(h);
if(center) { if(center) {
var w_area = $('#workarea'); var w_area = $('#workarea');
var scroll_y = h/2 - w_area.height()/2; var scroll_y = h/2 - w_area.height()/2;
@ -1202,25 +1207,18 @@ function svg_edit_setup() {
} }
$('#resolution').change(function(){ $('#resolution').change(function(){
if(this.value == 'Custom') { var wh = $('#canvas_width,#canvas_height');
var cust_val = prompt("Please enter custom size (i.e. 400x300)",""); if(!this.selectedIndex) {
var res_vals = cust_val.match(/(\d+)[x \/,](\d+)/); if($('#canvas_width').val() == 'fit') {
if(!res_vals) { wh.removeAttr("disabled").val(100);
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");
}
} }
} 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");
} }
}); });

12
editor/svgcanvas.js
View File

@ -2868,11 +2868,12 @@ function BatchCommand(text) {
var vb = svgzoom.getAttribute("viewBox").split(' '); var vb = svgzoom.getAttribute("viewBox").split(' ');
return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom}; return {'w':vb[2], 'h':vb[3], 'zoom': current_zoom};
}; };
this.setResolution = function(x, y) { this.setResolution = function(x, y) {
var res = canvas.getResolution(); var res = canvas.getResolution();
var w = res.w, h = res.h; var w = res.w, h = res.h;
if(!x) { if(x == 'fit') {
canvas.clearSelection(); canvas.clearSelection();
// Get bounding box // Get bounding box
@ -2890,11 +2891,10 @@ function BatchCommand(text) {
}); });
}); });
canvas.clearSelection(); canvas.clearSelection();
x = bbox.width; x = Math.round(bbox.width);
y = bbox.height; y = Math.round(bbox.height);
} else { } else {
alert('No content to fit to'); return false;
return;
} }
} }
x *= current_zoom; x *= current_zoom;
@ -2914,6 +2914,7 @@ function BatchCommand(text) {
svgroot.unsuspendRedraw(handle); svgroot.unsuspendRedraw(handle);
call("changed", [svgzoom]); call("changed", [svgzoom]);
} }
return true;
}; };
this.setBBoxZoom = function(val, editor_w, editor_h) { this.setBBoxZoom = function(val, editor_w, editor_h) {
@ -3667,6 +3668,7 @@ function BatchCommand(text) {
this.getStrokedBBox = function(elems) { this.getStrokedBBox = function(elems) {
// TODO: Get correct BBoxes for rotated elements // TODO: Get correct BBoxes for rotated elements
if(!elems) elems = canvas.getVisibleElements(); if(!elems) elems = canvas.getVisibleElements();
if(!elems.length) return false;
var full_bb = elems[0].getBBox(); var full_bb = elems[0].getBBox();
var max_x = full_bb.x + full_bb.width; var max_x = full_bb.x + full_bb.width;
var max_y = full_bb.y + full_bb.height; var max_y = full_bb.y + full_bb.height;