diff --git a/editor/extensions/ext-overview_window.js b/editor/extensions/ext-overview_window.js new file mode 100644 index 00000000..7375c8d4 --- /dev/null +++ b/editor/extensions/ext-overview_window.js @@ -0,0 +1,140 @@ +/* + * ext-overview_window.js + * + * Licensed under the MIT License + * + * Copyright(c) 2013 James Sacksteder + * + */ + +var overviewWindowGlobals={}; +svgEditor.addExtension("overview_window", function() { + //define and insert the base html element + var propsWindowHtml= "\ +
\ +
\ +
\ + \ + <\/use>\ + \ +
\ + <\/div>\ + <\/div>\ + <\/div>\ + <\/div>"; + $("#sidepanels").append(propsWindowHtml); + + //define dynamic animation of the view box. + var updateViewBox = function(){ + var portHeight=parseFloat($("#workarea").css("height")); + var portWidth=parseFloat($("#workarea").css("width")); + var portX=$("#workarea").scrollLeft(); + var portY=$("#workarea").scrollTop(); + var windowWidth=parseFloat($("#svgcanvas").css("width")); + var windowHeight=parseFloat($("#svgcanvas").css("height")); + var overviewWidth=$("#overviewMiniView").attr("width"); + var overviewHeight=$("#overviewMiniView").attr("height"); + + var viewBoxX=portX/windowWidth*overviewWidth; + var viewBoxY=portY/windowHeight*overviewHeight; + var viewBoxWidth=portWidth/windowWidth*overviewWidth; + var viewBoxHeight=portHeight/windowHeight*overviewHeight; + + $("#overview_window_view_box").css("min-width",viewBoxWidth+"px"); + $("#overview_window_view_box").css("min-height",viewBoxHeight+"px"); + $("#overview_window_view_box").css("top",viewBoxY+"px"); + $("#overview_window_view_box").css("left",viewBoxX+"px"); + }; + $("#workarea").scroll(function(){ + if(!(overviewWindowGlobals.viewBoxDragging)){ + updateViewBox() + } + }); + $("#workarea").resize(updateViewBox); + updateViewBox(); + + //comphensate for changes in zoom and canvas size + var updateViewDimensions= function(){ + var viewWidth=$("#svgroot").attr("width"); + var viewHeight=$("#svgroot").attr("height"); + var viewX=640; + var viewY=480; + + if(svgedit.browser.isIE()) + { + //This has only been tested with Firefox 10 and IE 9 (without chrome frame). + //I am not sure if if is Firefox or IE that is being non compliant here. + //Either way the one that is noncompliant may become more compliant later. + //TAG:HACK + //TAG:VERSION_DEPENDENT + //TAG:BROWSER_SNIFFING + viewX=0; + viewY=0; + } + + var svgWidth_old=$("#overviewMiniView").attr("width"); + var svgHeight_new=viewHeight/viewWidth*svgWidth_old; + $("#overviewMiniView").attr("viewBox",viewX+" "+viewY+" "+viewWidth+" "+viewHeight); + $("#overviewMiniView").attr("height",svgHeight_new); + updateViewBox(); + }; + updateViewDimensions(); + + //set up the overview window as a controller for the view port. + overviewWindowGlobals.viewBoxDragging=false; + var updateViewPortFromViewBox = function(){ + + var windowWidth =parseFloat($("#svgcanvas").css("width" )); + var windowHeight=parseFloat($("#svgcanvas").css("height")); + var overviewWidth =$("#overviewMiniView").attr("width" ); + var overviewHeight=$("#overviewMiniView").attr("height"); + var viewBoxX=parseFloat($("#overview_window_view_box").css("left")); + var viewBoxY=parseFloat($("#overview_window_view_box").css("top" )); + + var portX=viewBoxX/overviewWidth *windowWidth; + var portY=viewBoxY/overviewHeight*windowHeight; + + $("#workarea").scrollLeft(portX); + $("#workarea").scrollTop(portY); + }; + $( "#overview_window_view_box" ).draggable({ containment: "parent" + ,drag: updateViewPortFromViewBox + ,start:function(){overviewWindowGlobals.viewBoxDragging=true; } + ,stop :function(){overviewWindowGlobals.viewBoxDragging=false;} + }); + $("#overviewMiniView").click(function(evt){ + //Firefox doesn't support evt.offsetX and evt.offsetY + var mouseX=(evt.offsetX || evt.originalEvent.layerX); + var mouseY=(evt.offsetY || evt.originalEvent.layerY); + var overviewWidth =$("#overviewMiniView").attr("width" ); + var overviewHeight=$("#overviewMiniView").attr("height"); + var viewBoxWidth =parseFloat($("#overview_window_view_box").css("min-width" )); + var viewBoxHeight=parseFloat($("#overview_window_view_box").css("min-height")); + + var viewBoxX=mouseX-.5*viewBoxWidth; + var viewBoxY=mouseY-.5*viewBoxHeight; + //deal with constraints + if(viewBoxX<0){ + viewBoxX=0; + } + if(viewBoxY<0){ + viewBoxY=0; + } + if(viewBoxX+viewBoxWidth>overviewWidth){ + viewBoxX=overviewWidth-viewBoxWidth; + } + if(viewBoxY+viewBoxHeight>overviewHeight){ + viewBoxY=overviewHeight-viewBoxHeight; + } + + $("#overview_window_view_box").css("top",viewBoxY+"px"); + $("#overview_window_view_box").css("left",viewBoxX+"px"); + updateViewPortFromViewBox(); + }); + + return{ + name: "overview window", + canvasUpdated:updateViewDimensions, + workareaResized:updateViewBox + }; +}); diff --git a/editor/svg-editor.css b/editor/svg-editor.css index b4de8cbd..3a13edf8 100644 --- a/editor/svg-editor.css +++ b/editor/svg-editor.css @@ -183,16 +183,18 @@ select { border-style: solid; border-width: 1px; border-left: none; + overflow-x:hidden; + overflow-y:visible; } #layerpanel { display: inline-block; - position:absolute; - top: 1px; + position:relative; + top: 0px; bottom: 0; - right: 0; + left: 12px; width: 0; - overflow: auto; + overflow: hidden; margin: 0; -moz-user-select: none; -webkit-user-select: none; diff --git a/editor/svg-editor.html b/editor/svg-editor.html index 063f74c7..115471d9 100644 --- a/editor/svg-editor.html +++ b/editor/svg-editor.html @@ -2,8 +2,8 @@ + - @@ -56,6 +56,7 @@ + diff --git a/editor/svg-editor.js b/editor/svg-editor.js index 98447637..126e03af 100644 --- a/editor/svg-editor.js +++ b/editor/svg-editor.js @@ -3603,6 +3603,7 @@ $('#layerpanel').width('+=' + delta); rulerX.css('right', parseInt(rulerX.css('right'), 10) + delta); workarea.css('right', parseInt(workarea.css('right'), 10) + delta); + svgCanvas.runExtensions("workareaResized"); }; var resizeSidePanel = function(evt) { diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js index ad0b3852..7902c9f2 100644 --- a/editor/svgcanvas.js +++ b/editor/svgcanvas.js @@ -7561,7 +7561,7 @@ this.updateCanvas = function(w, h) { } selectorManager.selectorParentGroup.setAttribute("transform", "translate(" + x + "," + y + ")"); - + runExtensions("canvasUpdated",{new_x:x, new_y:y, old_x:old_x, old_y:old_y, d_x:x - old_x, d_y:y - old_y}); return {x:x, y:y, old_x:old_x, old_y:old_y, d_x:x - old_x, d_y:y - old_y}; };