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

Simplified canvas centering using largely CSS-based method 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1217 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-01-14 15:12:40 +00:00
parent 612d563677
commit d360c991cd
2 changed files with 15 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
editor/svg-editor.css
View File

@ -29,6 +29,7 @@
} }
#svg_editor #svgcanvas { #svg_editor #svgcanvas {
display: inline-block;
background-color: #FFFFFF; background-color: #FFFFFF;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
@ -70,7 +71,7 @@
} }
#svg_editor div#workarea { #svg_editor div#workarea {
display: inline-block; display: inline-table-cell;
position:absolute; position:absolute;
top: 75px; top: 75px;
left: 40px; left: 40px;
@ -79,6 +80,7 @@
background-color: #A0A0A0; background-color: #A0A0A0;
border: 1px solid #808080; border: 1px solid #808080;
overflow: auto; overflow: auto;
text-align: center;
} }
#svg_editor #sidepanels { #svg_editor #sidepanels {

38
editor/svg-editor.js
View File

@ -40,6 +40,7 @@ function svg_edit_setup() {
var svgCanvas = new SvgCanvas(document.getElementById("svgcanvas")); var svgCanvas = new SvgCanvas(document.getElementById("svgcanvas"));
var path = svgCanvas.pathActions; var path = svgCanvas.pathActions;
var default_img_url = "images/logo.png"; var default_img_url = "images/logo.png";
var workarea = $("#workarea");
// Store and retrieve preferences // Store and retrieve preferences
$.pref = function(key, val) { $.pref = function(key, val) {
@ -239,7 +240,7 @@ function svg_edit_setup() {
var zoomChanged = function(window, bbox) { var zoomChanged = function(window, bbox) {
var scrbar = 15; var scrbar = 15;
var res = svgCanvas.getResolution(); var res = svgCanvas.getResolution();
var w_area = $('#workarea'); var w_area = workarea;
var canvas_pos = $('#svgcanvas').position(); var canvas_pos = $('#svgcanvas').position();
w_area.css('cursor','auto'); w_area.css('cursor','auto');
var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar); var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar);
@ -569,7 +570,7 @@ function svg_edit_setup() {
var changeZoom = function(ctl) { var changeZoom = function(ctl) {
var zoomlevel = ctl.value / 100; var zoomlevel = ctl.value / 100;
var zoom = svgCanvas.getZoom(); var zoom = svgCanvas.getZoom();
var w_area = $('#workarea'); var w_area = workarea;
zoomChanged(window, { zoomChanged(window, {
width: 0, width: 0,
@ -949,7 +950,7 @@ function svg_edit_setup() {
var clickZoom = function(){ var clickZoom = function(){
if (toolButtonClick('#tool_zoom')) { if (toolButtonClick('#tool_zoom')) {
$('#workarea').css('cursor','crosshair'); workarea.css('cursor','crosshair');
svgCanvas.setMode('zoom'); svgCanvas.setMode('zoom');
} }
}; };
@ -1131,7 +1132,7 @@ function svg_edit_setup() {
var clickWireframe = function() { var clickWireframe = function() {
$('#tool_wireframe').toggleClass('push_button_pressed'); $('#tool_wireframe').toggleClass('push_button_pressed');
$('#workarea').toggleClass('wireframe'); workarea.toggleClass('wireframe');
if(supportsNonSS) return; if(supportsNonSS) return;
var wf_rules = $('#wireframe_rules'); var wf_rules = $('#wireframe_rules');
@ -1149,7 +1150,7 @@ function svg_edit_setup() {
if(supportsNonSS) return; if(supportsNonSS) return;
var rule = "#workarea.wireframe #svgcontent * { stroke-width: " + 1/svgCanvas.getZoom() + "px; }"; var rule = "#workarea.wireframe #svgcontent * { stroke-width: " + 1/svgCanvas.getZoom() + "px; }";
$('#wireframe_rules').text($('#workarea').hasClass('wireframe') ? rule : ""); $('#wireframe_rules').text(workarea.hasClass('wireframe') ? rule : "");
} }
var showSourceEditor = function(){ var showSourceEditor = function(){
@ -1541,7 +1542,7 @@ function svg_edit_setup() {
); );
}()); }());
$('#workarea').bind("mousewheel DOMMouseScroll", function(e){ workarea.bind("mousewheel DOMMouseScroll", function(e){
if(!e.shiftKey) return; if(!e.shiftKey) return;
e.preventDefault(); e.preventDefault();
var off = $('#svgcanvas').offset(); var off = $('#svgcanvas').offset();
@ -1899,12 +1900,10 @@ function svg_edit_setup() {
if (deltax == 0) return; if (deltax == 0) return;
sidedrag -= deltax; sidedrag -= deltax;
var workarea = $('#workarea');
var layerpanel = $('#layerpanel'); var layerpanel = $('#layerpanel');
workarea.css('right', parseInt(workarea.css('right'))+deltax); workarea.css('right', parseInt(workarea.css('right'))+deltax);
sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax); sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax); layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
centerCanvasIfNeeded();
}); });
// if width is non-zero, then fully close it, otherwise fully open it // if width is non-zero, then fully close it, otherwise fully open it
@ -1912,13 +1911,11 @@ function svg_edit_setup() {
var toggleSidePanel = function(close){ var toggleSidePanel = function(close){
var w = parseInt($('#sidepanels').css('width')); var w = parseInt($('#sidepanels').css('width'));
var deltax = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w; var deltax = (w > 2 || close ? 2 : SIDEPANEL_OPENWIDTH) - w;
var workarea = $('#workarea');
var sidepanels = $('#sidepanels'); var sidepanels = $('#sidepanels');
var layerpanel = $('#layerpanel'); var layerpanel = $('#layerpanel');
workarea.css('right', parseInt(workarea.css('right'))+deltax); workarea.css('right', parseInt(workarea.css('right'))+deltax);
sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax); sidepanels.css('width', parseInt(sidepanels.css('width'))+deltax);
layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax); layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
centerCanvasIfNeeded();
}; };
// this function highlights the layer passed in (by fading out the other layers) // this function highlights the layer passed in (by fading out the other layers)
@ -2017,21 +2014,12 @@ function svg_edit_setup() {
setResolution(x * zoom, y * zoom); setResolution(x * zoom, y * zoom);
} }
var centerCanvasIfNeeded = function() { var centerCanvas = function() {
// this centers the canvas in the workarea if it's small enough // this centers the canvas vertically in the workarea (horizontal handled in CSS)
var wa = {w: parseInt($('#workarea').css('width')), workarea.css('line-height', workarea.height() + 'px');
h: parseInt($('#workarea').css('height'))};
var ca = {w: parseInt($('#svgcanvas').css('width')),
h: parseInt($('#svgcanvas').css('height'))};
if (wa.w > ca.w) {
$('#svgcanvas').css({'left': (wa.w-ca.w)/2});
}
if (wa.h > ca.h) {
$('#svgcanvas').css({'top': (wa.h-ca.h)/2});
}
}; };
$(window).resize( centerCanvasIfNeeded ); $(window).bind('load resize', centerCanvas);
function stepFontSize(elem, step) { function stepFontSize(elem, step) {
var orig_val = elem.value-0; var orig_val = elem.value-0;
@ -2079,10 +2067,8 @@ function svg_edit_setup() {
$('#canvas_width').val(w); $('#canvas_width').val(w);
$('#canvas_height').val(h); $('#canvas_height').val(h);
centerCanvasIfNeeded();
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;
var scroll_x = w/2 - w_area.width()/2; var scroll_x = w/2 - w_area.width()/2;
w_area[0].scrollTop = scroll_y; w_area[0].scrollTop = scroll_y;