diff --git a/packages/devextreme/js/__internal/events/m_transform.ts b/packages/devextreme/js/__internal/events/m_transform.ts index 9e34d9c39b3f..6f6e8cd37fba 100644 --- a/packages/devextreme/js/__internal/events/m_transform.ts +++ b/packages/devextreme/js/__internal/events/m_transform.ts @@ -1,8 +1,13 @@ -import { sign as mathSign, fitIntoRange } from '../core/utils/math'; -import * as iteratorUtils from '../core/utils/iterator'; -import { hasTouches } from './utils/index'; -import Emitter from './core/emitter'; -import registerEmitter from './core/emitter_registrator'; +import * as iteratorUtils from '@js/core/utils/iterator'; +import { fitIntoRange, sign as mathSign } from '@js/core/utils/math'; +import Emitter from '@js/events/core/emitter'; +import registerEmitter from '@js/events/core/emitter_registrator'; +import { hasTouches } from '@js/events/utils/index'; + +interface EventAlias { + name: string; + args: any; +} const DX_PREFIX = 'dx'; @@ -15,140 +20,138 @@ const START_POSTFIX = 'start'; const UPDATE_POSTFIX = ''; const END_POSTFIX = 'end'; -const eventAliases = []; -const addAlias = function(eventName, eventArgs) { - eventAliases.push({ - name: eventName, - args: eventArgs - }); +const eventAliases: EventAlias[] = []; +const addAlias = function (eventName, eventArgs) { + eventAliases.push({ + name: eventName, + args: eventArgs, + }); }; addAlias(TRANSFORM, { - scale: true, - deltaScale: true, - rotation: true, - deltaRotation: true, - translation: true, - deltaTranslation: true + scale: true, + deltaScale: true, + rotation: true, + deltaRotation: true, + translation: true, + deltaTranslation: true, }); addAlias(TRANSLATE, { - translation: true, - deltaTranslation: true + translation: true, + deltaTranslation: true, }); addAlias(PINCH, { - scale: true, - deltaScale: true + scale: true, + deltaScale: true, }); addAlias(ROTATE, { - rotation: true, - deltaRotation: true + rotation: true, + deltaRotation: true, }); - -const getVector = function(first, second) { - return { - x: second.pageX - first.pageX, - y: -second.pageY + first.pageY, - centerX: (second.pageX + first.pageX) * 0.5, - centerY: (second.pageY + first.pageY) * 0.5 - }; +const getVector = function (first, second) { + return { + x: second.pageX - first.pageX, + y: -second.pageY + first.pageY, + centerX: (second.pageX + first.pageX) * 0.5, + centerY: (second.pageY + first.pageY) * 0.5, + }; }; -const getEventVector = function(e) { - const pointers = e.pointers; +const getEventVector = function (e) { + const { pointers } = e; - return getVector(pointers[0], pointers[1]); + return getVector(pointers[0], pointers[1]); }; -const getDistance = function(vector) { - return Math.sqrt(vector.x * vector.x + vector.y * vector.y); +const getDistance = function (vector) { + return Math.sqrt(vector.x * vector.x + vector.y * vector.y); }; -const getScale = function(firstVector, secondVector) { - return getDistance(firstVector) / getDistance(secondVector); +const getScale = function (firstVector, secondVector) { + return getDistance(firstVector) / getDistance(secondVector); }; -const getRotation = function(firstVector, secondVector) { - const scalarProduct = firstVector.x * secondVector.x + firstVector.y * secondVector.y; - const distanceProduct = getDistance(firstVector) * getDistance(secondVector); +const getRotation = function (firstVector, secondVector) { + const scalarProduct = firstVector.x * secondVector.x + firstVector.y * secondVector.y; + const distanceProduct = getDistance(firstVector) * getDistance(secondVector); - if(distanceProduct === 0) { - return 0; - } + if (distanceProduct === 0) { + return 0; + } - const sign = mathSign(firstVector.x * secondVector.y - secondVector.x * firstVector.y); - const angle = Math.acos(fitIntoRange(scalarProduct / distanceProduct, -1, 1)); + const sign = mathSign(firstVector.x * secondVector.y - secondVector.x * firstVector.y); + const angle = Math.acos(fitIntoRange(scalarProduct / distanceProduct, -1, 1)); - return sign * angle; + return sign * angle; }; -const getTranslation = function(firstVector, secondVector) { - return { - x: firstVector.centerX - secondVector.centerX, - y: firstVector.centerY - secondVector.centerY - }; +const getTranslation = function (firstVector, secondVector) { + return { + x: firstVector.centerX - secondVector.centerX, + y: firstVector.centerY - secondVector.centerY, + }; }; const TransformEmitter = Emitter.inherit({ - validatePointers: function(e) { - return hasTouches(e) > 1; - }, - - start: function(e) { - this._accept(e); - - const startVector = getEventVector(e); - this._startVector = startVector; - this._prevVector = startVector; - - this._fireEventAliases(START_POSTFIX, e); - }, - - move: function(e) { - const currentVector = getEventVector(e); - const eventArgs = this._getEventArgs(currentVector); - - this._fireEventAliases(UPDATE_POSTFIX, e, eventArgs); - this._prevVector = currentVector; - }, - - end: function(e) { - const eventArgs = this._getEventArgs(this._prevVector); - this._fireEventAliases(END_POSTFIX, e, eventArgs); - }, - - _getEventArgs: function(vector) { - return { - scale: getScale(vector, this._startVector), - deltaScale: getScale(vector, this._prevVector), - rotation: getRotation(vector, this._startVector), - deltaRotation: getRotation(vector, this._prevVector), - translation: getTranslation(vector, this._startVector), - deltaTranslation: getTranslation(vector, this._prevVector) - }; - }, - - _fireEventAliases: function(eventPostfix, originalEvent, eventArgs) { - eventArgs = eventArgs || {}; - - iteratorUtils.each(eventAliases, (function(_, eventAlias) { - const args = {}; - iteratorUtils.each(eventAlias.args, function(name) { - if(name in eventArgs) { - args[name] = eventArgs[name]; - } - }); - - this._fireEvent(DX_PREFIX + eventAlias.name + eventPostfix, originalEvent, args); - }).bind(this)); - } + validatePointers(e) { + return hasTouches(e) > 1; + }, -}); + start(e) { + this._accept(e); + + const startVector = getEventVector(e); + this._startVector = startVector; + this._prevVector = startVector; + + this._fireEventAliases(START_POSTFIX, e); + }, + + move(e) { + const currentVector = getEventVector(e); + const eventArgs = this._getEventArgs(currentVector); + this._fireEventAliases(UPDATE_POSTFIX, e, eventArgs); + this._prevVector = currentVector; + }, + + end(e) { + const eventArgs = this._getEventArgs(this._prevVector); + this._fireEventAliases(END_POSTFIX, e, eventArgs); + }, + + _getEventArgs(vector) { + return { + scale: getScale(vector, this._startVector), + deltaScale: getScale(vector, this._prevVector), + rotation: getRotation(vector, this._startVector), + deltaRotation: getRotation(vector, this._prevVector), + translation: getTranslation(vector, this._startVector), + deltaTranslation: getTranslation(vector, this._prevVector), + }; + }, + + _fireEventAliases(eventPostfix, originalEvent, eventArgs) { + eventArgs = eventArgs || {}; + + iteratorUtils.each(eventAliases, (_, eventAlias) => { + const args = {}; + iteratorUtils.each(eventAlias.args, (name) => { + if (name in eventArgs) { + args[name] = eventArgs[name]; + } + }); + + this._fireEvent(DX_PREFIX + eventAlias.name + eventPostfix, originalEvent, args); + }); + }, + +}); /** * @name UI Events.dxtransformstart @@ -262,36 +265,36 @@ const TransformEmitter = Emitter.inherit({ * @module events/transform */ -const eventNames = eventAliases.reduce((result, eventAlias) => { - [START_POSTFIX, UPDATE_POSTFIX, END_POSTFIX].forEach(eventPostfix => { - result.push(DX_PREFIX + eventAlias.name + eventPostfix); - }); - return result; +const eventNames = eventAliases.reduce((result: string[], eventAlias) => { + [START_POSTFIX, UPDATE_POSTFIX, END_POSTFIX].forEach((eventPostfix) => { + result.push(DX_PREFIX + eventAlias.name + eventPostfix); + }); + return result; }, []); registerEmitter({ - emitter: TransformEmitter, - events: eventNames + emitter: TransformEmitter, + events: eventNames, }); -const exportNames = {}; -iteratorUtils.each(eventNames, function(_, eventName) { - exportNames[eventName.substring(DX_PREFIX.length)] = eventName; +const exportNames: Record = {}; +iteratorUtils.each(eventNames, (_, eventName: string) => { + exportNames[eventName.substring(DX_PREFIX.length)] = eventName; }); /* eslint-disable spellcheck/spell-checker */ export const { - transformstart, - transform, - transformend, - translatestart, - translate, - translateend, - zoomstart, - zoom, - zoomend, - pinchstart, - pinch, - pinchend, - rotatestart, - rotate, - rotateend + transformstart, + transform, + transformend, + translatestart, + translate, + translateend, + zoomstart, + zoom, + zoomend, + pinchstart, + pinch, + pinchend, + rotatestart, + rotate, + rotateend, } = exportNames; diff --git a/packages/devextreme/js/events/transform.js b/packages/devextreme/js/events/transform.js new file mode 100644 index 000000000000..68ce2e1ac364 --- /dev/null +++ b/packages/devextreme/js/events/transform.js @@ -0,0 +1,2 @@ +export * from '../__internal/events/m_transform'; +