ext-overview_window.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /*globals svgEditor, svgedit, $ */
  2. /*jslint es5: true, vars: true*/
  3. /*
  4. * ext-overview_window.js
  5. *
  6. * Licensed under the MIT License
  7. *
  8. * Copyright(c) 2013 James Sacksteder
  9. *
  10. */
  11. var overviewWindowGlobals = {};
  12. svgEditor.addExtension("overview_window", function() { 'use strict';
  13. //define and insert the base html element
  14. var propsWindowHtml= "\
  15. <div id=\"overview_window_content_pane\" style=\" width:100%; word-wrap:break-word; display:inline-block; margin-top:20px;\">\
  16. <div id=\"overview_window_content\" style=\"position:relative; left:12px; top:0px;\">\
  17. <div style=\"background-color:#A0A0A0; display:inline-block; overflow:visible;\">\
  18. <svg id=\"overviewMiniView\" width=\"150\" height=\"100\" x=\"0\" y=\"0\" viewBox=\"0 0 4800 3600\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\
  19. <use x=\"0\" y=\"0\" xlink:href=\"#svgroot\"> </use>\
  20. </svg>\
  21. <div id=\"overview_window_view_box\" style=\"min-width:50px; min-height:50px; position:absolute; top:30px; left:30px; z-index:5; background-color:rgba(255,0,102,0.3);\">\
  22. </div>\
  23. </div>\
  24. </div>\
  25. </div>";
  26. $("#sidepanels").append(propsWindowHtml);
  27. //define dynamic animation of the view box.
  28. var updateViewBox = function(){
  29. var portHeight=parseFloat($("#workarea").css("height"));
  30. var portWidth=parseFloat($("#workarea").css("width"));
  31. var portX=$("#workarea").scrollLeft();
  32. var portY=$("#workarea").scrollTop();
  33. var windowWidth=parseFloat($("#svgcanvas").css("width"));
  34. var windowHeight=parseFloat($("#svgcanvas").css("height"));
  35. var overviewWidth=$("#overviewMiniView").attr("width");
  36. var overviewHeight=$("#overviewMiniView").attr("height");
  37. var viewBoxX=portX/windowWidth*overviewWidth;
  38. var viewBoxY=portY/windowHeight*overviewHeight;
  39. var viewBoxWidth=portWidth/windowWidth*overviewWidth;
  40. var viewBoxHeight=portHeight/windowHeight*overviewHeight;
  41. $("#overview_window_view_box").css("min-width",viewBoxWidth+"px");
  42. $("#overview_window_view_box").css("min-height",viewBoxHeight+"px");
  43. $("#overview_window_view_box").css("top",viewBoxY+"px");
  44. $("#overview_window_view_box").css("left",viewBoxX+"px");
  45. };
  46. $("#workarea").scroll(function(){
  47. if(!(overviewWindowGlobals.viewBoxDragging)){
  48. updateViewBox();
  49. }
  50. });
  51. $("#workarea").resize(updateViewBox);
  52. updateViewBox();
  53. //comphensate for changes in zoom and canvas size
  54. var updateViewDimensions= function(){
  55. var viewWidth=$("#svgroot").attr("width");
  56. var viewHeight=$("#svgroot").attr("height");
  57. var viewX=640;
  58. var viewY=480;
  59. if(svgedit.browser.isIE())
  60. {
  61. //This has only been tested with Firefox 10 and IE 9 (without chrome frame).
  62. //I am not sure if if is Firefox or IE that is being non compliant here.
  63. //Either way the one that is noncompliant may become more compliant later.
  64. //TAG:HACK
  65. //TAG:VERSION_DEPENDENT
  66. //TAG:BROWSER_SNIFFING
  67. viewX=0;
  68. viewY=0;
  69. }
  70. var svgWidth_old=$("#overviewMiniView").attr("width");
  71. var svgHeight_new=viewHeight/viewWidth*svgWidth_old;
  72. $("#overviewMiniView").attr("viewBox",viewX+" "+viewY+" "+viewWidth+" "+viewHeight);
  73. $("#overviewMiniView").attr("height",svgHeight_new);
  74. updateViewBox();
  75. };
  76. updateViewDimensions();
  77. //set up the overview window as a controller for the view port.
  78. overviewWindowGlobals.viewBoxDragging=false;
  79. var updateViewPortFromViewBox = function(){
  80. var windowWidth =parseFloat($("#svgcanvas").css("width" ));
  81. var windowHeight=parseFloat($("#svgcanvas").css("height"));
  82. var overviewWidth =$("#overviewMiniView").attr("width" );
  83. var overviewHeight=$("#overviewMiniView").attr("height");
  84. var viewBoxX=parseFloat($("#overview_window_view_box").css("left"));
  85. var viewBoxY=parseFloat($("#overview_window_view_box").css("top" ));
  86. var portX=viewBoxX/overviewWidth *windowWidth;
  87. var portY=viewBoxY/overviewHeight*windowHeight;
  88. $("#workarea").scrollLeft(portX);
  89. $("#workarea").scrollTop(portY);
  90. };
  91. $( "#overview_window_view_box" ).draggable({ containment: "parent"
  92. ,drag: updateViewPortFromViewBox
  93. ,start:function(){overviewWindowGlobals.viewBoxDragging=true; }
  94. ,stop :function(){overviewWindowGlobals.viewBoxDragging=false;}
  95. });
  96. $("#overviewMiniView").click(function(evt){
  97. //Firefox doesn't support evt.offsetX and evt.offsetY
  98. var mouseX=(evt.offsetX || evt.originalEvent.layerX);
  99. var mouseY=(evt.offsetY || evt.originalEvent.layerY);
  100. var overviewWidth =$("#overviewMiniView").attr("width" );
  101. var overviewHeight=$("#overviewMiniView").attr("height");
  102. var viewBoxWidth =parseFloat($("#overview_window_view_box").css("min-width" ));
  103. var viewBoxHeight=parseFloat($("#overview_window_view_box").css("min-height"));
  104. var viewBoxX=mouseX - 0.5 * viewBoxWidth;
  105. var viewBoxY=mouseY- 0.5 * viewBoxHeight;
  106. //deal with constraints
  107. if(viewBoxX<0){
  108. viewBoxX=0;
  109. }
  110. if(viewBoxY<0){
  111. viewBoxY=0;
  112. }
  113. if(viewBoxX+viewBoxWidth>overviewWidth){
  114. viewBoxX=overviewWidth-viewBoxWidth;
  115. }
  116. if(viewBoxY+viewBoxHeight>overviewHeight){
  117. viewBoxY=overviewHeight-viewBoxHeight;
  118. }
  119. $("#overview_window_view_box").css("top",viewBoxY+"px");
  120. $("#overview_window_view_box").css("left",viewBoxX+"px");
  121. updateViewPortFromViewBox();
  122. });
  123. return {
  124. name: "overview window",
  125. canvasUpdated: updateViewDimensions,
  126. workareaResized: updateViewBox
  127. };
  128. });