From 8c3488ab31707e64ee90f4b48fc169fa16e4ddae Mon Sep 17 00:00:00 2001 From: Alexis Deveria Date: Fri, 15 Jan 2010 15:04:57 +0000 Subject: [PATCH] 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 --- editor/svg-editor.js | 79 +++++++++++++++++++++----------- editor/svgcanvas.js | 105 ++++++++++++++++++++++++++++++------------- 2 files changed, 126 insertions(+), 58 deletions(-) diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 3c607a10..0d9bf2b0 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -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(); diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index 04e6cd31..58c868f7 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -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