RoamController.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var zrUtil = require("zrender/lib/core/util");
  20. var Eventful = require("zrender/lib/mixin/Eventful");
  21. var eventTool = require("zrender/lib/core/event");
  22. var interactionMutex = require("./interactionMutex");
  23. /*
  24. * Licensed to the Apache Software Foundation (ASF) under one
  25. * or more contributor license agreements. See the NOTICE file
  26. * distributed with this work for additional information
  27. * regarding copyright ownership. The ASF licenses this file
  28. * to you under the Apache License, Version 2.0 (the
  29. * "License"); you may not use this file except in compliance
  30. * with the License. You may obtain a copy of the License at
  31. *
  32. * http://www.apache.org/licenses/LICENSE-2.0
  33. *
  34. * Unless required by applicable law or agreed to in writing,
  35. * software distributed under the License is distributed on an
  36. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  37. * KIND, either express or implied. See the License for the
  38. * specific language governing permissions and limitations
  39. * under the License.
  40. */
  41. /**
  42. * @alias module:echarts/component/helper/RoamController
  43. * @constructor
  44. * @mixin {module:zrender/mixin/Eventful}
  45. *
  46. * @param {module:zrender/zrender~ZRender} zr
  47. */
  48. function RoamController(zr) {
  49. /**
  50. * @type {Function}
  51. */
  52. this.pointerChecker;
  53. /**
  54. * @type {module:zrender}
  55. */
  56. this._zr = zr;
  57. /**
  58. * @type {Object}
  59. */
  60. this._opt = {}; // Avoid two roamController bind the same handler
  61. var bind = zrUtil.bind;
  62. var mousedownHandler = bind(mousedown, this);
  63. var mousemoveHandler = bind(mousemove, this);
  64. var mouseupHandler = bind(mouseup, this);
  65. var mousewheelHandler = bind(mousewheel, this);
  66. var pinchHandler = bind(pinch, this);
  67. Eventful.call(this);
  68. /**
  69. * @param {Function} pointerChecker
  70. * input: x, y
  71. * output: boolean
  72. */
  73. this.setPointerChecker = function (pointerChecker) {
  74. this.pointerChecker = pointerChecker;
  75. };
  76. /**
  77. * Notice: only enable needed types. For example, if 'zoom'
  78. * is not needed, 'zoom' should not be enabled, otherwise
  79. * default mousewheel behaviour (scroll page) will be disabled.
  80. *
  81. * @param {boolean|string} [controlType=true] Specify the control type,
  82. * which can be null/undefined or true/false
  83. * or 'pan/move' or 'zoom'/'scale'
  84. * @param {Object} [opt]
  85. * @param {Object} [opt.zoomOnMouseWheel=true] The value can be: true / false / 'shift' / 'ctrl' / 'alt'.
  86. * @param {Object} [opt.moveOnMouseMove=true] The value can be: true / false / 'shift' / 'ctrl' / 'alt'.
  87. * @param {Object} [opt.moveOnMouseWheel=false] The value can be: true / false / 'shift' / 'ctrl' / 'alt'.
  88. * @param {Object} [opt.preventDefaultMouseMove=true] When pan.
  89. */
  90. this.enable = function (controlType, opt) {
  91. // Disable previous first
  92. this.disable();
  93. this._opt = zrUtil.defaults(zrUtil.clone(opt) || {}, {
  94. zoomOnMouseWheel: true,
  95. moveOnMouseMove: true,
  96. // By default, wheel do not trigger move.
  97. moveOnMouseWheel: false,
  98. preventDefaultMouseMove: true
  99. });
  100. if (controlType == null) {
  101. controlType = true;
  102. }
  103. if (controlType === true || controlType === 'move' || controlType === 'pan') {
  104. zr.on('mousedown', mousedownHandler);
  105. zr.on('mousemove', mousemoveHandler);
  106. zr.on('mouseup', mouseupHandler);
  107. }
  108. if (controlType === true || controlType === 'scale' || controlType === 'zoom') {
  109. zr.on('mousewheel', mousewheelHandler);
  110. zr.on('pinch', pinchHandler);
  111. }
  112. };
  113. this.disable = function () {
  114. zr.off('mousedown', mousedownHandler);
  115. zr.off('mousemove', mousemoveHandler);
  116. zr.off('mouseup', mouseupHandler);
  117. zr.off('mousewheel', mousewheelHandler);
  118. zr.off('pinch', pinchHandler);
  119. };
  120. this.dispose = this.disable;
  121. this.isDragging = function () {
  122. return this._dragging;
  123. };
  124. this.isPinching = function () {
  125. return this._pinching;
  126. };
  127. }
  128. zrUtil.mixin(RoamController, Eventful);
  129. function mousedown(e) {
  130. if (eventTool.isMiddleOrRightButtonOnMouseUpDown(e) || e.target && e.target.draggable) {
  131. return;
  132. }
  133. var x = e.offsetX;
  134. var y = e.offsetY; // Only check on mosedown, but not mousemove.
  135. // Mouse can be out of target when mouse moving.
  136. if (this.pointerChecker && this.pointerChecker(e, x, y)) {
  137. this._x = x;
  138. this._y = y;
  139. this._dragging = true;
  140. }
  141. }
  142. function mousemove(e) {
  143. if (!this._dragging || !isAvailableBehavior('moveOnMouseMove', e, this._opt) || e.gestureEvent === 'pinch' || interactionMutex.isTaken(this._zr, 'globalPan')) {
  144. return;
  145. }
  146. var x = e.offsetX;
  147. var y = e.offsetY;
  148. var oldX = this._x;
  149. var oldY = this._y;
  150. var dx = x - oldX;
  151. var dy = y - oldY;
  152. this._x = x;
  153. this._y = y;
  154. this._opt.preventDefaultMouseMove && eventTool.stop(e.event);
  155. trigger(this, 'pan', 'moveOnMouseMove', e, {
  156. dx: dx,
  157. dy: dy,
  158. oldX: oldX,
  159. oldY: oldY,
  160. newX: x,
  161. newY: y
  162. });
  163. }
  164. function mouseup(e) {
  165. if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
  166. this._dragging = false;
  167. }
  168. }
  169. function mousewheel(e) {
  170. var shouldZoom = isAvailableBehavior('zoomOnMouseWheel', e, this._opt);
  171. var shouldMove = isAvailableBehavior('moveOnMouseWheel', e, this._opt);
  172. var wheelDelta = e.wheelDelta;
  173. var absWheelDeltaDelta = Math.abs(wheelDelta);
  174. var originX = e.offsetX;
  175. var originY = e.offsetY; // wheelDelta maybe -0 in chrome mac.
  176. if (wheelDelta === 0 || !shouldZoom && !shouldMove) {
  177. return;
  178. } // If both `shouldZoom` and `shouldMove` is true, trigger
  179. // their event both, and the final behavior is determined
  180. // by event listener themselves.
  181. if (shouldZoom) {
  182. // Convenience:
  183. // Mac and VM Windows on Mac: scroll up: zoom out.
  184. // Windows: scroll up: zoom in.
  185. // FIXME: Should do more test in different environment.
  186. // wheelDelta is too complicated in difference nvironment
  187. // (https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel),
  188. // although it has been normallized by zrender.
  189. // wheelDelta of mouse wheel is bigger than touch pad.
  190. var factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1;
  191. var scale = wheelDelta > 0 ? factor : 1 / factor;
  192. checkPointerAndTrigger(this, 'zoom', 'zoomOnMouseWheel', e, {
  193. scale: scale,
  194. originX: originX,
  195. originY: originY
  196. });
  197. }
  198. if (shouldMove) {
  199. // FIXME: Should do more test in different environment.
  200. var absDelta = Math.abs(wheelDelta); // wheelDelta of mouse wheel is bigger than touch pad.
  201. var scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05);
  202. checkPointerAndTrigger(this, 'scrollMove', 'moveOnMouseWheel', e, {
  203. scrollDelta: scrollDelta,
  204. originX: originX,
  205. originY: originY
  206. });
  207. }
  208. }
  209. function pinch(e) {
  210. if (interactionMutex.isTaken(this._zr, 'globalPan')) {
  211. return;
  212. }
  213. var scale = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
  214. checkPointerAndTrigger(this, 'zoom', null, e, {
  215. scale: scale,
  216. originX: e.pinchX,
  217. originY: e.pinchY
  218. });
  219. }
  220. function checkPointerAndTrigger(controller, eventName, behaviorToCheck, e, contollerEvent) {
  221. if (controller.pointerChecker && controller.pointerChecker(e, contollerEvent.originX, contollerEvent.originY)) {
  222. // When mouse is out of roamController rect,
  223. // default befavoius should not be be disabled, otherwise
  224. // page sliding is disabled, contrary to expectation.
  225. eventTool.stop(e.event);
  226. trigger(controller, eventName, behaviorToCheck, e, contollerEvent);
  227. }
  228. }
  229. function trigger(controller, eventName, behaviorToCheck, e, contollerEvent) {
  230. // Also provide behavior checker for event listener, for some case that
  231. // multiple components share one listener.
  232. contollerEvent.isAvailableBehavior = zrUtil.bind(isAvailableBehavior, null, behaviorToCheck, e);
  233. controller.trigger(eventName, contollerEvent);
  234. } // settings: {
  235. // zoomOnMouseWheel
  236. // moveOnMouseMove
  237. // moveOnMouseWheel
  238. // }
  239. // The value can be: true / false / 'shift' / 'ctrl' / 'alt'.
  240. function isAvailableBehavior(behaviorToCheck, e, settings) {
  241. var setting = settings[behaviorToCheck];
  242. return !behaviorToCheck || setting && (!zrUtil.isString(setting) || e.event[setting + 'Key']);
  243. }
  244. var _default = RoamController;
  245. module.exports = _default;