Handler.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. import { __extends } from "tslib";
  2. import * as util from './core/util.js';
  3. import * as vec2 from './core/vector.js';
  4. import Draggable from './mixin/Draggable.js';
  5. import Eventful from './core/Eventful.js';
  6. import * as eventTool from './core/event.js';
  7. import { GestureMgr } from './core/GestureMgr.js';
  8. import BoundingRect from './core/BoundingRect.js';
  9. var SILENT = 'silent';
  10. function makeEventPacket(eveType, targetInfo, event) {
  11. return {
  12. type: eveType,
  13. event: event,
  14. target: targetInfo.target,
  15. topTarget: targetInfo.topTarget,
  16. cancelBubble: false,
  17. offsetX: event.zrX,
  18. offsetY: event.zrY,
  19. gestureEvent: event.gestureEvent,
  20. pinchX: event.pinchX,
  21. pinchY: event.pinchY,
  22. pinchScale: event.pinchScale,
  23. wheelDelta: event.zrDelta,
  24. zrByTouch: event.zrByTouch,
  25. which: event.which,
  26. stop: stopEvent
  27. };
  28. }
  29. function stopEvent() {
  30. eventTool.stop(this.event);
  31. }
  32. var EmptyProxy = (function (_super) {
  33. __extends(EmptyProxy, _super);
  34. function EmptyProxy() {
  35. var _this = _super !== null && _super.apply(this, arguments) || this;
  36. _this.handler = null;
  37. return _this;
  38. }
  39. EmptyProxy.prototype.dispose = function () { };
  40. EmptyProxy.prototype.setCursor = function () { };
  41. return EmptyProxy;
  42. }(Eventful));
  43. var HoveredResult = (function () {
  44. function HoveredResult(x, y) {
  45. this.x = x;
  46. this.y = y;
  47. }
  48. return HoveredResult;
  49. }());
  50. var handlerNames = [
  51. 'click', 'dblclick', 'mousewheel', 'mouseout',
  52. 'mouseup', 'mousedown', 'mousemove', 'contextmenu'
  53. ];
  54. var tmpRect = new BoundingRect(0, 0, 0, 0);
  55. var Handler = (function (_super) {
  56. __extends(Handler, _super);
  57. function Handler(storage, painter, proxy, painterRoot, pointerSize) {
  58. var _this = _super.call(this) || this;
  59. _this._hovered = new HoveredResult(0, 0);
  60. _this.storage = storage;
  61. _this.painter = painter;
  62. _this.painterRoot = painterRoot;
  63. _this._pointerSize = pointerSize;
  64. proxy = proxy || new EmptyProxy();
  65. _this.proxy = null;
  66. _this.setHandlerProxy(proxy);
  67. _this._draggingMgr = new Draggable(_this);
  68. return _this;
  69. }
  70. Handler.prototype.setHandlerProxy = function (proxy) {
  71. if (this.proxy) {
  72. this.proxy.dispose();
  73. }
  74. if (proxy) {
  75. util.each(handlerNames, function (name) {
  76. proxy.on && proxy.on(name, this[name], this);
  77. }, this);
  78. proxy.handler = this;
  79. }
  80. this.proxy = proxy;
  81. };
  82. Handler.prototype.mousemove = function (event) {
  83. var x = event.zrX;
  84. var y = event.zrY;
  85. var isOutside = isOutsideBoundary(this, x, y);
  86. var lastHovered = this._hovered;
  87. var lastHoveredTarget = lastHovered.target;
  88. if (lastHoveredTarget && !lastHoveredTarget.__zr) {
  89. lastHovered = this.findHover(lastHovered.x, lastHovered.y);
  90. lastHoveredTarget = lastHovered.target;
  91. }
  92. var hovered = this._hovered = isOutside ? new HoveredResult(x, y) : this.findHover(x, y);
  93. var hoveredTarget = hovered.target;
  94. var proxy = this.proxy;
  95. proxy.setCursor && proxy.setCursor(hoveredTarget ? hoveredTarget.cursor : 'default');
  96. if (lastHoveredTarget && hoveredTarget !== lastHoveredTarget) {
  97. this.dispatchToElement(lastHovered, 'mouseout', event);
  98. }
  99. this.dispatchToElement(hovered, 'mousemove', event);
  100. if (hoveredTarget && hoveredTarget !== lastHoveredTarget) {
  101. this.dispatchToElement(hovered, 'mouseover', event);
  102. }
  103. };
  104. Handler.prototype.mouseout = function (event) {
  105. var eventControl = event.zrEventControl;
  106. if (eventControl !== 'only_globalout') {
  107. this.dispatchToElement(this._hovered, 'mouseout', event);
  108. }
  109. if (eventControl !== 'no_globalout') {
  110. this.trigger('globalout', { type: 'globalout', event: event });
  111. }
  112. };
  113. Handler.prototype.resize = function () {
  114. this._hovered = new HoveredResult(0, 0);
  115. };
  116. Handler.prototype.dispatch = function (eventName, eventArgs) {
  117. var handler = this[eventName];
  118. handler && handler.call(this, eventArgs);
  119. };
  120. Handler.prototype.dispose = function () {
  121. this.proxy.dispose();
  122. this.storage = null;
  123. this.proxy = null;
  124. this.painter = null;
  125. };
  126. Handler.prototype.setCursorStyle = function (cursorStyle) {
  127. var proxy = this.proxy;
  128. proxy.setCursor && proxy.setCursor(cursorStyle);
  129. };
  130. Handler.prototype.dispatchToElement = function (targetInfo, eventName, event) {
  131. targetInfo = targetInfo || {};
  132. var el = targetInfo.target;
  133. if (el && el.silent) {
  134. return;
  135. }
  136. var eventKey = ('on' + eventName);
  137. var eventPacket = makeEventPacket(eventName, targetInfo, event);
  138. while (el) {
  139. el[eventKey]
  140. && (eventPacket.cancelBubble = !!el[eventKey].call(el, eventPacket));
  141. el.trigger(eventName, eventPacket);
  142. el = el.__hostTarget ? el.__hostTarget : el.parent;
  143. if (eventPacket.cancelBubble) {
  144. break;
  145. }
  146. }
  147. if (!eventPacket.cancelBubble) {
  148. this.trigger(eventName, eventPacket);
  149. if (this.painter && this.painter.eachOtherLayer) {
  150. this.painter.eachOtherLayer(function (layer) {
  151. if (typeof (layer[eventKey]) === 'function') {
  152. layer[eventKey].call(layer, eventPacket);
  153. }
  154. if (layer.trigger) {
  155. layer.trigger(eventName, eventPacket);
  156. }
  157. });
  158. }
  159. }
  160. };
  161. Handler.prototype.findHover = function (x, y, exclude) {
  162. var list = this.storage.getDisplayList();
  163. var out = new HoveredResult(x, y);
  164. setHoverTarget(list, out, x, y, exclude);
  165. if (this._pointerSize && !out.target) {
  166. var candidates = [];
  167. var pointerSize = this._pointerSize;
  168. var targetSizeHalf = pointerSize / 2;
  169. var pointerRect = new BoundingRect(x - targetSizeHalf, y - targetSizeHalf, pointerSize, pointerSize);
  170. for (var i = list.length - 1; i >= 0; i--) {
  171. var el = list[i];
  172. if (el !== exclude
  173. && !el.ignore
  174. && !el.ignoreCoarsePointer
  175. && (!el.parent || !el.parent.ignoreCoarsePointer)) {
  176. tmpRect.copy(el.getBoundingRect());
  177. if (el.transform) {
  178. tmpRect.applyTransform(el.transform);
  179. }
  180. if (tmpRect.intersect(pointerRect)) {
  181. candidates.push(el);
  182. }
  183. }
  184. }
  185. if (candidates.length) {
  186. var rStep = 4;
  187. var thetaStep = Math.PI / 12;
  188. var PI2 = Math.PI * 2;
  189. for (var r = 0; r < targetSizeHalf; r += rStep) {
  190. for (var theta = 0; theta < PI2; theta += thetaStep) {
  191. var x1 = x + r * Math.cos(theta);
  192. var y1 = y + r * Math.sin(theta);
  193. setHoverTarget(candidates, out, x1, y1, exclude);
  194. if (out.target) {
  195. return out;
  196. }
  197. }
  198. }
  199. }
  200. }
  201. return out;
  202. };
  203. Handler.prototype.processGesture = function (event, stage) {
  204. if (!this._gestureMgr) {
  205. this._gestureMgr = new GestureMgr();
  206. }
  207. var gestureMgr = this._gestureMgr;
  208. stage === 'start' && gestureMgr.clear();
  209. var gestureInfo = gestureMgr.recognize(event, this.findHover(event.zrX, event.zrY, null).target, this.proxy.dom);
  210. stage === 'end' && gestureMgr.clear();
  211. if (gestureInfo) {
  212. var type = gestureInfo.type;
  213. event.gestureEvent = type;
  214. var res = new HoveredResult();
  215. res.target = gestureInfo.target;
  216. this.dispatchToElement(res, type, gestureInfo.event);
  217. }
  218. };
  219. return Handler;
  220. }(Eventful));
  221. util.each(['click', 'mousedown', 'mouseup', 'mousewheel', 'dblclick', 'contextmenu'], function (name) {
  222. Handler.prototype[name] = function (event) {
  223. var x = event.zrX;
  224. var y = event.zrY;
  225. var isOutside = isOutsideBoundary(this, x, y);
  226. var hovered;
  227. var hoveredTarget;
  228. if (name !== 'mouseup' || !isOutside) {
  229. hovered = this.findHover(x, y);
  230. hoveredTarget = hovered.target;
  231. }
  232. if (name === 'mousedown') {
  233. this._downEl = hoveredTarget;
  234. this._downPoint = [event.zrX, event.zrY];
  235. this._upEl = hoveredTarget;
  236. }
  237. else if (name === 'mouseup') {
  238. this._upEl = hoveredTarget;
  239. }
  240. else if (name === 'click') {
  241. if (this._downEl !== this._upEl
  242. || !this._downPoint
  243. || vec2.dist(this._downPoint, [event.zrX, event.zrY]) > 4) {
  244. return;
  245. }
  246. this._downPoint = null;
  247. }
  248. this.dispatchToElement(hovered, name, event);
  249. };
  250. });
  251. function isHover(displayable, x, y) {
  252. if (displayable[displayable.rectHover ? 'rectContain' : 'contain'](x, y)) {
  253. var el = displayable;
  254. var isSilent = void 0;
  255. var ignoreClip = false;
  256. while (el) {
  257. if (el.ignoreClip) {
  258. ignoreClip = true;
  259. }
  260. if (!ignoreClip) {
  261. var clipPath = el.getClipPath();
  262. if (clipPath && !clipPath.contain(x, y)) {
  263. return false;
  264. }
  265. if (el.silent) {
  266. isSilent = true;
  267. }
  268. }
  269. var hostEl = el.__hostTarget;
  270. el = hostEl ? hostEl : el.parent;
  271. }
  272. return isSilent ? SILENT : true;
  273. }
  274. return false;
  275. }
  276. function setHoverTarget(list, out, x, y, exclude) {
  277. for (var i = list.length - 1; i >= 0; i--) {
  278. var el = list[i];
  279. var hoverCheckResult = void 0;
  280. if (el !== exclude
  281. && !el.ignore
  282. && (hoverCheckResult = isHover(el, x, y))) {
  283. !out.topTarget && (out.topTarget = el);
  284. if (hoverCheckResult !== SILENT) {
  285. out.target = el;
  286. break;
  287. }
  288. }
  289. }
  290. }
  291. function isOutsideBoundary(handlerInstance, x, y) {
  292. var painter = handlerInstance.painter;
  293. return x < 0 || x > painter.getWidth() || y < 0 || y > painter.getHeight();
  294. }
  295. export default Handler;