| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- /* *
- *
- * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
- *
- * */
- import H from '../../../Core/Globals.js';
- import U from '../../../Core/Utilities.js';
- var addEvent = U.addEvent, fireEvent = U.fireEvent, objectEach = U.objectEach, pick = U.pick, removeEvent = U.removeEvent;
- /* eslint-disable valid-jsdoc */
- /**
- * It provides methods for:
- * - adding and handling DOM events and a drag event,
- * - mapping a mouse move event to the distance between two following events.
- * The units of the distance are specific to a transformation,
- * e.g. for rotation they are radians, for scaling they are scale factors.
- *
- * @private
- * @mixin
- * @memberOf Annotation
- */
- var eventEmitterMixin = {
- /**
- * Add emitter events.
- */
- addEvents: function () {
- var emitter = this, addMouseDownEvent = function (element) {
- addEvent(element, H.isTouchDevice ? 'touchstart' : 'mousedown', function (e) {
- emitter.onMouseDown(e);
- }, { passive: false });
- };
- addMouseDownEvent(this.graphic.element);
- (emitter.labels || []).forEach(function (label) {
- if (label.options.useHTML && label.graphic.text) {
- // Mousedown event bound to HTML element (#13070).
- addMouseDownEvent(label.graphic.text.element);
- }
- });
- objectEach(emitter.options.events, function (event, type) {
- var eventHandler = function (e) {
- if (type !== 'click' || !emitter.cancelClick) {
- event.call(emitter, emitter.chart.pointer.normalize(e), emitter.target);
- }
- };
- if ((emitter.nonDOMEvents || []).indexOf(type) === -1) {
- emitter.graphic.on(type, eventHandler);
- }
- else {
- addEvent(emitter, type, eventHandler, { passive: false });
- }
- });
- if (emitter.options.draggable) {
- addEvent(emitter, 'drag', emitter.onDrag);
- if (!emitter.graphic.renderer.styledMode) {
- var cssPointer_1 = {
- cursor: {
- x: 'ew-resize',
- y: 'ns-resize',
- xy: 'move'
- }[emitter.options.draggable]
- };
- emitter.graphic.css(cssPointer_1);
- (emitter.labels || []).forEach(function (label) {
- if (label.options.useHTML && label.graphic.text) {
- label.graphic.text.css(cssPointer_1);
- }
- });
- }
- }
- if (!emitter.isUpdating) {
- fireEvent(emitter, 'add');
- }
- },
- /**
- * Remove emitter document events.
- */
- removeDocEvents: function () {
- if (this.removeDrag) {
- this.removeDrag = this.removeDrag();
- }
- if (this.removeMouseUp) {
- this.removeMouseUp = this.removeMouseUp();
- }
- },
- /**
- * Mouse down handler.
- */
- onMouseDown: function (e) {
- var emitter = this, pointer = emitter.chart.pointer, prevChartX, prevChartY;
- if (e.preventDefault) {
- e.preventDefault();
- }
- // On right click, do nothing:
- if (e.button === 2) {
- return;
- }
- e = pointer.normalize(e);
- prevChartX = e.chartX;
- prevChartY = e.chartY;
- emitter.cancelClick = false;
- emitter.chart.hasDraggedAnnotation = true;
- emitter.removeDrag = addEvent(H.doc, H.isTouchDevice ? 'touchmove' : 'mousemove', function (e) {
- emitter.hasDragged = true;
- e = pointer.normalize(e);
- e.prevChartX = prevChartX;
- e.prevChartY = prevChartY;
- fireEvent(emitter, 'drag', e);
- prevChartX = e.chartX;
- prevChartY = e.chartY;
- }, H.isTouchDevice ? { passive: false } : void 0);
- emitter.removeMouseUp = addEvent(H.doc, H.isTouchDevice ? 'touchend' : 'mouseup', function (e) {
- emitter.cancelClick = emitter.hasDragged;
- emitter.hasDragged = false;
- emitter.chart.hasDraggedAnnotation = false;
- // ControlPoints vs Annotation:
- fireEvent(pick(emitter.target, emitter), 'afterUpdate');
- emitter.onMouseUp(e);
- }, H.isTouchDevice ? { passive: false } : void 0);
- },
- /**
- * Mouse up handler.
- */
- onMouseUp: function (_e) {
- var chart = this.chart, annotation = this.target || this, annotationsOptions = chart.options.annotations, index = chart.annotations.indexOf(annotation);
- this.removeDocEvents();
- annotationsOptions[index] = annotation.options;
- },
- /**
- * Drag and drop event. All basic annotations should share this
- * capability as well as the extended ones.
- */
- onDrag: function (e) {
- if (this.chart.isInsidePlot(e.chartX - this.chart.plotLeft, e.chartY - this.chart.plotTop)) {
- var translation = this.mouseMoveToTranslation(e);
- if (this.options.draggable === 'x') {
- translation.y = 0;
- }
- if (this.options.draggable === 'y') {
- translation.x = 0;
- }
- if (this.points.length) {
- this.translate(translation.x, translation.y);
- }
- else {
- this.shapes.forEach(function (shape) {
- shape.translate(translation.x, translation.y);
- });
- this.labels.forEach(function (label) {
- label.translate(translation.x, translation.y);
- });
- }
- this.redraw(false);
- }
- },
- /**
- * Map mouse move event to the radians.
- */
- mouseMoveToRadians: function (e, cx, cy) {
- var prevDy = e.prevChartY - cy, prevDx = e.prevChartX - cx, dy = e.chartY - cy, dx = e.chartX - cx, temp;
- if (this.chart.inverted) {
- temp = prevDx;
- prevDx = prevDy;
- prevDy = temp;
- temp = dx;
- dx = dy;
- dy = temp;
- }
- return Math.atan2(dy, dx) - Math.atan2(prevDy, prevDx);
- },
- /**
- * Map mouse move event to the distance between two following events.
- */
- mouseMoveToTranslation: function (e) {
- var dx = e.chartX - e.prevChartX, dy = e.chartY - e.prevChartY, temp;
- if (this.chart.inverted) {
- temp = dy;
- dy = dx;
- dx = temp;
- }
- return {
- x: dx,
- y: dy
- };
- },
- /**
- * Map mouse move to the scale factors.
- *
- * @param {Object} e event
- * @param {number} cx center x
- * @param {number} cy center y
- **/
- mouseMoveToScale: function (e, cx, cy) {
- var prevDx = e.prevChartX - cx, prevDy = e.prevChartY - cy, dx = e.chartX - cx, dy = e.chartY - cy, sx = (dx || 1) / (prevDx || 1), sy = (dy || 1) / (prevDy || 1), temp;
- if (this.chart.inverted) {
- temp = sy;
- sy = sx;
- sx = temp;
- }
- return {
- x: sx,
- y: sy
- };
- },
- /**
- * Destroy the event emitter.
- */
- destroy: function () {
- this.removeDocEvents();
- removeEvent(this);
- this.hcEvents = null;
- }
- };
- export default eventEmitterMixin;
|