Zoom.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /*
  2. Copyright (c) 2004-2012, The Dojo Foundation All Rights Reserved.
  3. Available via Academic Free License >= 2.1 OR the modified BSD license.
  4. see: http://dojotoolkit.org/license for details
  5. */
  6. if(!dojo._hasResource["dojox.drawing.ui.dom.Zoom"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.drawing.ui.dom.Zoom"] = true;
  8. dojo.provide("dojox.drawing.ui.dom.Zoom");
  9. dojo.require("dojox.drawing.plugins._Plugin");
  10. dojox.drawing.ui.dom.Zoom = dojox.drawing.util.oo.declare(
  11. // NOTE:
  12. // dojox.drawing.ui.dom.Zoom is DEPRECATED.
  13. // This was a temporary DOM solution. Use the non-dom
  14. // tools for Toobar and Plugins.
  15. //
  16. // summary:
  17. // A plugin that allows for zooming the canvas in and out. An
  18. // action-tool is added to the toolbar with plus, minus and 100%
  19. // buttons.
  20. // example:
  21. // | <div dojoType="dojox.drawing.Toolbar" drawingId="drawingNode" class="drawingToolbar vertical">
  22. // | <div tool="dojox.drawing.tools.Line" selected="true">Line</div>
  23. // | <div plugin="dojox.drawing.ui.dom.Zoom" options="{zoomInc:.1,minZoom:.5,maxZoom:2}">Zoom</div>
  24. // | </div>
  25. //
  26. dojox.drawing.plugins._Plugin,
  27. function(options){
  28. var cls = options.node.className;
  29. var txt = options.node.innerHTML;
  30. this.domNode = dojo.create("div", {id:"btnZoom", "class":"toolCombo"}, options.node, "replace");
  31. this.makeButton("ZoomIn", this.topClass);
  32. this.makeButton("Zoom100", this.midClass);
  33. this.makeButton("ZoomOut", this.botClass);
  34. },
  35. {
  36. type:"dojox.drawing.ui.dom.Zoom",
  37. //
  38. // zoomInc: Float
  39. // The amount of zoom that will occur upon each click.
  40. zoomInc:.1,
  41. //
  42. // maxZoom: Number
  43. // The maximum the canvas can be zoomed in. 10 = 1000%
  44. maxZoom:10,
  45. //
  46. // minZoom: Float
  47. // The most the canvas can be zoomed out. .1 = 10%
  48. minZoom:.1,
  49. //
  50. // zoomFactor: [readonly] Float
  51. // The current zoom amount
  52. zoomFactor:1,
  53. //
  54. // baseClass: String
  55. // The CSS class added to the Toolbar buttons
  56. baseClass:"drawingButton",
  57. //
  58. // topClass: String
  59. // The CSS class added to the top (or left) Toolbar button
  60. topClass:"toolComboTop",
  61. //
  62. // midClass: String
  63. // The CSS class added to the middle Toolbar button
  64. midClass:"toolComboMid",
  65. //
  66. // botClass: String
  67. // The CSS class added to the bottom (or right) Toolbar button
  68. botClass:"toolComboBot",
  69. //
  70. makeButton: function(name, cls){
  71. // summary:
  72. // Internal. Creates one of the buttons in the zoom-button set.
  73. //
  74. var node = dojo.create("div", {id:"btn"+name, "class":this.baseClass+" "+cls,
  75. innerHTML:'<div title="Zoom In" class="icon icon'+name+'"></div>'}, this.domNode);
  76. dojo.connect(document, "mouseup", function(evt){
  77. dojo.stopEvent(evt);
  78. dojo.removeClass(node, "active");
  79. });
  80. dojo.connect(node, "mouseup", this, function(evt){
  81. dojo.stopEvent(evt);
  82. dojo.removeClass(node, "active");
  83. this["on"+name](); // this is what calls the methods below
  84. });
  85. dojo.connect(node, "mouseover", function(evt){
  86. dojo.stopEvent(evt);
  87. dojo.addClass(node, "hover");
  88. });
  89. dojo.connect(node, "mousedown", this, function(evt){
  90. dojo.stopEvent(evt);
  91. dojo.addClass(node, "active");
  92. });
  93. dojo.connect(node, "mouseout", this, function(evt){
  94. dojo.stopEvent(evt);
  95. dojo.removeClass(node, "hover");
  96. });
  97. },
  98. onZoomIn: function(/*Mouse Event*/evt){
  99. // summary:
  100. // Handles zoom in.
  101. //
  102. this.zoomFactor += this.zoomInc;
  103. this.zoomFactor = Math.min(this.zoomFactor, this.maxZoom);
  104. this.canvas.setZoom(this.zoomFactor);
  105. this.mouse.setZoom(this.zoomFactor);
  106. },
  107. onZoom100: function(/*Mouse Event*/evt){
  108. // summary:
  109. // Zooms to 100%
  110. //
  111. this.zoomFactor = 1;
  112. this.canvas.setZoom(this.zoomFactor);
  113. this.mouse.setZoom(this.zoomFactor);
  114. },
  115. onZoomOut: function(/*Mouse Event*/evt){
  116. // summary:
  117. // Handles zoom out.
  118. //
  119. this.zoomFactor -= this.zoomInc;
  120. this.zoomFactor = Math.max(this.zoomFactor, this.minZoom);
  121. this.canvas.setZoom(this.zoomFactor);
  122. this.mouse.setZoom(this.zoomFactor);
  123. }
  124. }
  125. );
  126. //dojox.drawing.register(dojox.drawing.plugins.tools.Pan, "plugin");
  127. }