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 | }
|
266 | if (el.silent) {
|
267 | isSilent = true;
|
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;
|