RoamController.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  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. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { __extends } from "tslib";
  41. import Eventful from 'zrender/lib/core/Eventful.js';
  42. import * as eventTool from 'zrender/lib/core/event.js';
  43. import * as interactionMutex from './interactionMutex.js';
  44. import { isString, bind, defaults, extend, retrieve2 } from 'zrender/lib/core/util.js';
  45. import { makeInner } from '../../util/model.js';
  46. import { retrieveZInfo } from '../../util/graphic.js';
  47. import { onIrrelevantElement } from './cursorHelper.js';
  48. ;
  49. /**
  50. * An manager of zoom and pan(darg) hehavior.
  51. * But it is not responsible for updating the view, since view updates vary and can
  52. * not be handled in a uniform way.
  53. *
  54. * Note: regarding view updates:
  55. * - Transformabe views typically use `coord/View` (e.g., geo and series.graph roaming).
  56. * Some commonly used view update logic has been organized into `roamHelper.ts`.
  57. * - Non-transformable views handle updates themselves, possibly involving re-layout,
  58. * (e.g., treemap).
  59. * - Some scenarios do not require transformation (e.g., dataZoom roaming for cartesian,
  60. * brush component).
  61. */
  62. var RoamController = /** @class */function (_super) {
  63. __extends(RoamController, _super);
  64. function RoamController(zr) {
  65. var _this = _super.call(this) || this;
  66. _this._zr = zr;
  67. // Avoid two roamController bind the same handler
  68. var mousedownHandler = bind(_this._mousedownHandler, _this);
  69. var mousemoveHandler = bind(_this._mousemoveHandler, _this);
  70. var mouseupHandler = bind(_this._mouseupHandler, _this);
  71. var mousewheelHandler = bind(_this._mousewheelHandler, _this);
  72. var pinchHandler = bind(_this._pinchHandler, _this);
  73. /**
  74. * Notice:
  75. * - only enable needed types. For example, if 'zoom'
  76. * is not needed, 'zoom' should not be enabled, otherwise
  77. * default mousewheel behaviour (scroll page) will be disabled.
  78. * - This method is idempotent.
  79. */
  80. _this.enable = function (controlType, rawOpt) {
  81. var zInfo = rawOpt.zInfo;
  82. var _a = retrieveZInfo(zInfo.component),
  83. z = _a.z,
  84. zlevel = _a.zlevel;
  85. var zInfoParsed = {
  86. component: zInfo.component,
  87. z: z,
  88. zlevel: zlevel,
  89. // By default roam controller is the lowest z2 comparing to other elememts in a component.
  90. z2: retrieve2(zInfo.z2, -Infinity)
  91. };
  92. var triggerInfo = extend({}, rawOpt.triggerInfo);
  93. this._opt = defaults(extend({}, rawOpt), {
  94. zoomOnMouseWheel: true,
  95. moveOnMouseMove: true,
  96. // By default, wheel do not trigger move.
  97. moveOnMouseWheel: false,
  98. preventDefaultMouseMove: true,
  99. zInfoParsed: zInfoParsed,
  100. triggerInfo: triggerInfo,
  101. cursorGrab: 'grab',
  102. cursorGrabbing: 'grabbing'
  103. });
  104. if (controlType == null) {
  105. controlType = true;
  106. }
  107. // A quick optimization for repeatedly calling `enable` during roaming.
  108. // Assert `disable` is only affected by `controlType`.
  109. if (!this._enabled || this._controlType !== controlType) {
  110. // Disable previous first
  111. this.disable();
  112. this._enabled = true;
  113. if (controlType === true || controlType === 'move' || controlType === 'pan') {
  114. addRoamZrListener(zr, 'mousedown', mousedownHandler, zInfoParsed);
  115. addRoamZrListener(zr, 'mousemove', mousemoveHandler, zInfoParsed);
  116. addRoamZrListener(zr, 'mouseup', mouseupHandler, zInfoParsed);
  117. }
  118. if (controlType === true || controlType === 'scale' || controlType === 'zoom') {
  119. addRoamZrListener(zr, 'mousewheel', mousewheelHandler, zInfoParsed);
  120. addRoamZrListener(zr, 'pinch', pinchHandler, zInfoParsed);
  121. }
  122. }
  123. };
  124. _this.disable = function () {
  125. if (this._enabled) {
  126. this._enabled = false;
  127. removeRoamZrListener(zr, 'mousedown', mousedownHandler);
  128. removeRoamZrListener(zr, 'mousemove', mousemoveHandler);
  129. removeRoamZrListener(zr, 'mouseup', mouseupHandler);
  130. removeRoamZrListener(zr, 'mousewheel', mousewheelHandler);
  131. removeRoamZrListener(zr, 'pinch', pinchHandler);
  132. }
  133. };
  134. return _this;
  135. }
  136. RoamController.prototype.isDragging = function () {
  137. return this._dragging;
  138. };
  139. RoamController.prototype.isPinching = function () {
  140. return this._pinching;
  141. };
  142. RoamController.prototype._checkPointer = function (e, x, y) {
  143. var opt = this._opt;
  144. var zInfoParsed = opt.zInfoParsed;
  145. if (onIrrelevantElement(e, opt.api, zInfoParsed.component)) {
  146. return false;
  147. }
  148. ;
  149. var triggerInfo = opt.triggerInfo;
  150. var roamTrigger = triggerInfo.roamTrigger;
  151. var inArea = false;
  152. if (roamTrigger === 'global') {
  153. inArea = true;
  154. }
  155. if (!inArea) {
  156. inArea = triggerInfo.isInSelf(e, x, y);
  157. }
  158. if (inArea && triggerInfo.isInClip && !triggerInfo.isInClip(e, x, y)) {
  159. inArea = false;
  160. }
  161. return inArea;
  162. };
  163. RoamController.prototype._decideCursorStyle = function (e, x, y, forReverse) {
  164. // If this cursor style decision is not strictly consistent with zrender,
  165. // it's fine - zr will set the cursor on the next mousemove.
  166. // This `grab` cursor style should take the lowest precedence. If the hovring element already
  167. // have a cursor, zrender will set it to be non-'default' before entering this handler.
  168. // (note, e.target is never silent, e.topTarget can be silent be irrelevant.)
  169. var target = e.target;
  170. if (!target && this._checkPointer(e, x, y)) {
  171. // To indicate users that this area is draggable, otherwise users probably cannot kwown
  172. // that when hovering out of the shape but still inside the bounding rect.
  173. return this._opt.cursorGrab;
  174. }
  175. if (forReverse) {
  176. return target && target.cursor || 'default';
  177. }
  178. };
  179. RoamController.prototype.dispose = function () {
  180. this.disable();
  181. };
  182. RoamController.prototype._mousedownHandler = function (e) {
  183. if (eventTool.isMiddleOrRightButtonOnMouseUpDown(e) || eventConsumed(e)) {
  184. return;
  185. }
  186. var el = e.target;
  187. while (el) {
  188. if (el.draggable) {
  189. return;
  190. }
  191. // check if host is draggable
  192. el = el.__hostTarget || el.parent;
  193. }
  194. var x = e.offsetX;
  195. var y = e.offsetY;
  196. // To determine dragging start, only by checking on mosedown, but not mousemove.
  197. // Mouse can be out of target when mouse moving.
  198. if (this._checkPointer(e, x, y)) {
  199. this._x = x;
  200. this._y = y;
  201. this._dragging = true;
  202. }
  203. };
  204. RoamController.prototype._mousemoveHandler = function (e) {
  205. var zr = this._zr;
  206. if (e.gestureEvent === 'pinch' || interactionMutex.isTaken(zr, 'globalPan') || eventConsumed(e)) {
  207. return;
  208. }
  209. var x = e.offsetX;
  210. var y = e.offsetY;
  211. if (!this._dragging || !isAvailableBehavior('moveOnMouseMove', e, this._opt)) {
  212. var cursorStyle = this._decideCursorStyle(e, x, y, false);
  213. if (cursorStyle) {
  214. zr.setCursorStyle(cursorStyle);
  215. }
  216. return;
  217. }
  218. zr.setCursorStyle(this._opt.cursorGrabbing);
  219. var oldX = this._x;
  220. var oldY = this._y;
  221. var dx = x - oldX;
  222. var dy = y - oldY;
  223. this._x = x;
  224. this._y = y;
  225. if (this._opt.preventDefaultMouseMove) {
  226. eventTool.stop(e.event);
  227. }
  228. e.__ecRoamConsumed = true;
  229. trigger(this, 'pan', 'moveOnMouseMove', e, {
  230. dx: dx,
  231. dy: dy,
  232. oldX: oldX,
  233. oldY: oldY,
  234. newX: x,
  235. newY: y,
  236. isAvailableBehavior: null
  237. });
  238. };
  239. RoamController.prototype._mouseupHandler = function (e) {
  240. if (eventConsumed(e)) {
  241. return;
  242. }
  243. var zr = this._zr;
  244. if (!eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
  245. this._dragging = false;
  246. var cursorStyle = this._decideCursorStyle(e, e.offsetX, e.offsetY, true);
  247. if (cursorStyle) {
  248. zr.setCursorStyle(cursorStyle);
  249. }
  250. }
  251. };
  252. RoamController.prototype._mousewheelHandler = function (e) {
  253. if (eventConsumed(e)) {
  254. return;
  255. }
  256. var shouldZoom = isAvailableBehavior('zoomOnMouseWheel', e, this._opt);
  257. var shouldMove = isAvailableBehavior('moveOnMouseWheel', e, this._opt);
  258. var wheelDelta = e.wheelDelta;
  259. var absWheelDeltaDelta = Math.abs(wheelDelta);
  260. var originX = e.offsetX;
  261. var originY = e.offsetY;
  262. // wheelDelta maybe -0 in chrome mac.
  263. if (wheelDelta === 0 || !shouldZoom && !shouldMove) {
  264. return;
  265. }
  266. // If both `shouldZoom` and `shouldMove` is true, trigger
  267. // their event both, and the final behavior is determined
  268. // by event listener themselves.
  269. if (shouldZoom) {
  270. // Convenience:
  271. // Mac and VM Windows on Mac: scroll up: zoom out.
  272. // Windows: scroll up: zoom in.
  273. // FIXME: Should do more test in different environment.
  274. // wheelDelta is too complicated in difference nvironment
  275. // (https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel),
  276. // although it has been normallized by zrender.
  277. // wheelDelta of mouse wheel is bigger than touch pad.
  278. var factor = absWheelDeltaDelta > 3 ? 1.4 : absWheelDeltaDelta > 1 ? 1.2 : 1.1;
  279. var scale = wheelDelta > 0 ? factor : 1 / factor;
  280. this._checkTriggerMoveZoom(this, 'zoom', 'zoomOnMouseWheel', e, {
  281. scale: scale,
  282. originX: originX,
  283. originY: originY,
  284. isAvailableBehavior: null
  285. });
  286. }
  287. if (shouldMove) {
  288. // FIXME: Should do more test in different environment.
  289. var absDelta = Math.abs(wheelDelta);
  290. // wheelDelta of mouse wheel is bigger than touch pad.
  291. var scrollDelta = (wheelDelta > 0 ? 1 : -1) * (absDelta > 3 ? 0.4 : absDelta > 1 ? 0.15 : 0.05);
  292. this._checkTriggerMoveZoom(this, 'scrollMove', 'moveOnMouseWheel', e, {
  293. scrollDelta: scrollDelta,
  294. originX: originX,
  295. originY: originY,
  296. isAvailableBehavior: null
  297. });
  298. }
  299. };
  300. RoamController.prototype._pinchHandler = function (e) {
  301. if (interactionMutex.isTaken(this._zr, 'globalPan') || eventConsumed(e)) {
  302. return;
  303. }
  304. var scale = e.pinchScale > 1 ? 1.1 : 1 / 1.1;
  305. this._checkTriggerMoveZoom(this, 'zoom', null, e, {
  306. scale: scale,
  307. originX: e.pinchX,
  308. originY: e.pinchY,
  309. isAvailableBehavior: null
  310. });
  311. };
  312. RoamController.prototype._checkTriggerMoveZoom = function (controller, eventName, behaviorToCheck, e, contollerEvent) {
  313. if (controller._checkPointer(e, contollerEvent.originX, contollerEvent.originY)) {
  314. // When mouse is out of roamController rect,
  315. // default befavoius should not be be disabled, otherwise
  316. // page sliding is disabled, contrary to expectation.
  317. eventTool.stop(e.event);
  318. e.__ecRoamConsumed = true;
  319. trigger(controller, eventName, behaviorToCheck, e, contollerEvent);
  320. }
  321. };
  322. return RoamController;
  323. }(Eventful);
  324. function eventConsumed(e) {
  325. return e.__ecRoamConsumed;
  326. }
  327. var innerZrStore = makeInner();
  328. function ensureZrStore(zr) {
  329. var store = innerZrStore(zr);
  330. store.roam = store.roam || {};
  331. store.uniform = store.uniform || {};
  332. return store;
  333. }
  334. /**
  335. * Listeners are sorted by z2/z/zlevel in descending order.
  336. * This decides the precedence between different roam controllers if they are overlapped.
  337. *
  338. * [MEMO]: It's not easy to perfectly reconcile the conflicts caused by overlap.
  339. * - Consider cases:
  340. * - Multiple roam controllers overlapped.
  341. * - Usually only the topmost can trigger roam.
  342. * - Roam controllers overlap with other zr elements:
  343. * - zr elements are relevant or irrelevent to the host of the roam controller. e.g., axis split line
  344. * or series elements is relevant to a cartesian and should trigger roam.
  345. * - zr elements is above or below the roam controller host, which affects the precedence of interaction.
  346. * - zr elements may not silent only for triggering tooltip by hovering, which is available to roam;
  347. * or may not silent for click, where roam is not preferable.
  348. * - Approach - `addRoamZrListener+pointerChecker+onIrrelevantElement` (currently used):
  349. * - Resolve the precedence between different roam controllers
  350. * - But cannot prevent the handling on other zr elements that under the roam controller in z-order.
  351. * - Approach - "use an invisible zr elements to receive the zr events to trigger roam":
  352. * - More complicated in impl.
  353. * - May cause bad cases where zr event cannot be receive due to other non-silient zr elements covering it.
  354. */
  355. function addRoamZrListener(zr, eventType, listener, zInfoParsed) {
  356. var store = ensureZrStore(zr);
  357. var roam = store.roam;
  358. var listenerList = roam[eventType] = roam[eventType] || [];
  359. var idx = 0;
  360. for (; idx < listenerList.length; idx++) {
  361. var currZInfo = listenerList[idx].zInfoParsed;
  362. if ((currZInfo.zlevel - zInfoParsed.zlevel || currZInfo.z - zInfoParsed.z || currZInfo.z2 - zInfoParsed.z2
  363. // If all equals, the latter added one has a higher precedence.
  364. ) <= 0) {
  365. break;
  366. }
  367. }
  368. listenerList.splice(idx, 0, {
  369. listener: listener,
  370. zInfoParsed: zInfoParsed
  371. });
  372. ensureUniformListener(zr, eventType);
  373. }
  374. function removeRoamZrListener(zr, eventType, listener) {
  375. var store = ensureZrStore(zr);
  376. var listenerList = store.roam[eventType] || [];
  377. for (var idx = 0; idx < listenerList.length; idx++) {
  378. if (listenerList[idx].listener === listener) {
  379. listenerList.splice(idx, 1);
  380. if (!listenerList.length) {
  381. removeUniformListener(zr, eventType);
  382. }
  383. return;
  384. }
  385. }
  386. }
  387. function ensureUniformListener(zr, eventType) {
  388. var store = ensureZrStore(zr);
  389. if (!store.uniform[eventType]) {
  390. zr.on(eventType, store.uniform[eventType] = function (event) {
  391. var listenerList = store.roam[eventType];
  392. if (listenerList) {
  393. for (var i = 0; i < listenerList.length; i++) {
  394. listenerList[i].listener(event);
  395. }
  396. }
  397. });
  398. }
  399. }
  400. function removeUniformListener(zr, eventType) {
  401. var store = ensureZrStore(zr);
  402. var uniform = store.uniform;
  403. if (uniform[eventType]) {
  404. zr.off(eventType, uniform[eventType]);
  405. uniform[eventType] = null;
  406. }
  407. }
  408. function trigger(controller, eventName, behaviorToCheck, e, contollerEvent) {
  409. // Also provide behavior checker for event listener, for some case that
  410. // multiple components share one listener.
  411. contollerEvent.isAvailableBehavior = bind(isAvailableBehavior, null, behaviorToCheck, e);
  412. // TODO should not have type issue.
  413. controller.trigger(eventName, contollerEvent);
  414. }
  415. // settings: {
  416. // zoomOnMouseWheel
  417. // moveOnMouseMove
  418. // moveOnMouseWheel
  419. // }
  420. // The value can be: true / false / 'shift' / 'ctrl' / 'alt'.
  421. function isAvailableBehavior(behaviorToCheck, e, settings) {
  422. var setting = settings[behaviorToCheck];
  423. return !behaviorToCheck || setting && (!isString(setting) || e.event[setting + 'Key']);
  424. }
  425. export default RoamController;