diff --git a/editor/images/zoom.png b/editor/images/zoom.png new file mode 100644 index 00000000..c4fb6f17 Binary files /dev/null and b/editor/images/zoom.png differ diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 33c67da5..4c73bdf7 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -243,6 +243,7 @@ Text Poly Image + Zoom
diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 1486f482..2832123a 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -80,6 +80,27 @@ function svg_edit_setup() { // text element was previously in focus updateContextPanel(); }; + + var zoomChanged = function(window, bbox) { + var scrbar = 15; + var res = svgCanvas.getResolution(); + + var w_area = $('#workarea'); + w_area.css('cursor','auto'); + var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar); + if(!z_info) return; + var zoomlevel = z_info.zoom; + var bb = z_info.bbox; + $('#zoom').val(Math.round(zoomlevel*100)); + 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); + var scrTop = bb.y * zoomlevel; + var scrOffY = w_area.height()/2 - (bb.height * zoomlevel)/2; + w_area[0].scrollTop = Math.max(0,scrTop - scrOffY); + clickSelect(); + } // updates the toolbar (colors, opacity, etc) based on the selected element var updateToolbar = function() { @@ -259,6 +280,7 @@ function svg_edit_setup() { svgCanvas.bind("selected", selectedChanged); svgCanvas.bind("changed", elementChanged); svgCanvas.bind("saved", saveHandler); + svgCanvas.bind("zoomed", zoomChanged); var str = '
' $.each(palette, function(i,item){ @@ -507,6 +529,23 @@ function svg_edit_setup() { } }; + var clickZoom = function(){ + if (toolButtonClick('#tool_zoom')) { + $('#workarea').css('cursor','crosshair'); + svgCanvas.setMode('zoom'); + } + }; + + var dblclickZoom = function(){ + if (toolButtonClick('#tool_zoom')) { + var res = svgCanvas.getResolution(); + setResolution(res.w, res.h); + $('#zoom').val(100); + svgCanvas.setZoom(1); + setSelectMode(); + } + }; + var clickFHRect = function(){ if (toolButtonClick('#tools_rect_show')) { svgCanvas.setMode('fhrect'); @@ -763,6 +802,8 @@ function svg_edit_setup() { $('#tool_ellipse').mouseup(clickEllipse); $('#tool_fhellipse').mouseup(clickFHEllipse); $('#tool_image').mouseup(clickImage); + $('#tool_zoom').mouseup(clickZoom); + $('#tool_zoom').dblclick(dblclickZoom); $('#tool_text').click(clickText); $('#tool_poly').click(clickPoly); $('#tool_clear').click(clickClear); @@ -1042,6 +1083,7 @@ function svg_edit_setup() { } function setResolution(w, h, center) { + w-=0; h-=0; $('#svgcanvas').css( { 'width': w, 'height': h } ); if(center) { var w_area = $('#workarea'); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index d70ac0e1..42156945 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -1393,6 +1393,11 @@ function BatchCommand(text) { }, 100); } break; + case "zoom": + started = true; + start_x = x; + start_y = y; + break; case "resize": started = true; start_x = x; @@ -2105,6 +2110,14 @@ function BatchCommand(text) { // we return immediately from select so that the obj_num is not incremented return; break; + case "zoom": + call("zoomed", { + 'x': Math.min(start_x,x), + 'y': Math.min(start_y,y), + 'width': Math.abs(x-start_x), + 'height': Math.abs(y-start_y) + }); + return; case "path": keep = true; break; @@ -2591,11 +2604,24 @@ function BatchCommand(text) { } }; - this.setBBoxZoom = function(type, editor_w, editor_h) { + this.setBBoxZoom = function(val, editor_w, editor_h) { var spacer = .85; var w_zoom, h_zoom; - switch ( type ) { + if(typeof val == 'object') { + var bb = val; + if(bb.width == 0 || bb.height == 0) { + canvas.setZoom(current_zoom * 2); + return {'zoom': current_zoom, 'bbox': bb}; + } + w_zoom = Math.round((editor_w / bb.width)*100 * spacer)/100; + h_zoom = Math.round((editor_h / bb.height)*100 * spacer)/100; + var zoomlevel = Math.min(w_zoom,h_zoom); + canvas.setZoom(zoomlevel); + return {'zoom': zoomlevel, 'bbox': bb}; + } + + switch (val) { case 'selection': if(!selectedElements[0]) return; var bb = selectedBBoxes[0];