@antv/g-gesture
Advanced tools
Comparing version 3.0.11 to 3.0.12
@@ -1,2 +0,9 @@ | ||
import { __extends } from 'tslib'; | ||
/*! | ||
* @antv/g-gesture | ||
* @description G Gesture | ||
* @version 3.0.12 | ||
* @date 10/23/2024, 7:16:52 AM | ||
* @author AntVis | ||
* @docs https://g.antv.antgroup.com/ | ||
*/ | ||
import EventEmitter from 'eventemitter3'; | ||
@@ -6,327 +13,375 @@ | ||
var PRESS_DELAY = 250; | ||
// 计算滑动的方向 | ||
var calcDirection = function (start, end) { | ||
var xDistance = end.x - start.x; | ||
var yDistance = end.y - start.y; | ||
// x 的距离大于y 说明是横向,否则就是纵向 | ||
if (Math.abs(xDistance) > Math.abs(yDistance)) { | ||
return xDistance > 0 ? 'right' : 'left'; | ||
} | ||
return yDistance > 0 ? 'down' : 'up'; | ||
var calcDirection = (start, end) => { | ||
var xDistance = end.x - start.x; | ||
var yDistance = end.y - start.y; | ||
// x 的距离大于y 说明是横向,否则就是纵向 | ||
if (Math.abs(xDistance) > Math.abs(yDistance)) { | ||
return xDistance > 0 ? 'right' : 'left'; | ||
} | ||
return yDistance > 0 ? 'down' : 'up'; | ||
}; | ||
// 计算2点之间的距离 | ||
var calcDistance = function (point1, point2) { | ||
var xDistance = Math.abs(point2.x - point1.x); | ||
var yDistance = Math.abs(point2.y - point1.y); | ||
return Math.sqrt(xDistance * xDistance + yDistance * yDistance); | ||
var calcDistance = (point1, point2) => { | ||
var xDistance = Math.abs(point2.x - point1.x); | ||
var yDistance = Math.abs(point2.y - point1.y); | ||
return Math.sqrt(xDistance * xDistance + yDistance * yDistance); | ||
}; | ||
var getCenter = function (point1, point2) { | ||
var x = point1.x + (point2.x - point1.x) / 2; | ||
var y = point1.y + (point2.y - point1.y) / 2; | ||
return { x: x, y: y }; | ||
var getCenter = (point1, point2) => { | ||
var x = point1.x + (point2.x - point1.x) / 2; | ||
var y = point1.y + (point2.y - point1.y) / 2; | ||
return { | ||
x, | ||
y | ||
}; | ||
}; | ||
var Gesture = /** @class */ (function (_super) { | ||
__extends(Gesture, _super); | ||
function Gesture(el) { | ||
var _this = _super.call(this) || this; | ||
_this.evCache = []; | ||
_this.startPoints = []; | ||
// 用来记录当前触发的事件 | ||
_this.processEvent = {}; | ||
_this.throttleTimer = 0; | ||
_this.emitThrottles = []; | ||
_this._start = function (ev) { | ||
// 每次触点开始都重置事件 | ||
_this.reset(); | ||
// 记录touch start 的时间 | ||
_this.startTime = clock.now(); | ||
var _a = _this, evCache = _a.evCache, startPoints = _a.startPoints; | ||
if (ev) { | ||
var pointerId = ev.pointerId, x = ev.x, y = ev.y; | ||
evCache.push({ | ||
pointerId: pointerId, | ||
x: x, | ||
y: y, | ||
ev: ev, | ||
}); | ||
} | ||
// 重置 startPoints | ||
startPoints.length = evCache.length; | ||
for (var i = 0; i < evCache.length; i++) { | ||
var _b = evCache[i], x = _b.x, y = _b.y; | ||
var point = { x: x, y: y }; | ||
startPoints[i] = point; | ||
} | ||
// 单指事件 | ||
if (startPoints.length === 1) { | ||
var event_1 = evCache[0].ev; | ||
// 如果touchstart后停顿250ms, 则也触发press事件 | ||
// @ts-ignore | ||
_this.pressTimeout = setTimeout(function () { | ||
// 这里固定触发press事件 | ||
var eventType = 'press'; | ||
var direction = 'none'; | ||
event_1.direction = direction; | ||
event_1.deltaX = 0; | ||
event_1.deltaY = 0; | ||
event_1.points = startPoints; | ||
_this.emitStart(eventType, event_1); | ||
_this.emit(eventType, event_1); | ||
_this.eventType = eventType; | ||
_this.direction = direction; | ||
}, PRESS_DELAY); | ||
return; | ||
} | ||
// 目前只处理双指 | ||
_this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
_this.center = getCenter(startPoints[0], startPoints[1]); | ||
class Gesture extends EventEmitter { | ||
constructor(el) { | ||
super(); | ||
this.evCache = []; | ||
this.startPoints = []; | ||
// 用来记录当前触发的事件 | ||
this.processEvent = {}; | ||
this.throttleTimer = 0; | ||
this.emitThrottles = []; | ||
this._start = ev => { | ||
// 每次触点开始都重置事件 | ||
this.reset(); | ||
// 记录touch start 的时间 | ||
this.startTime = clock.now(); | ||
var evCache = this.evCache, | ||
startPoints = this.startPoints; | ||
if (ev) { | ||
var pointerId = ev.pointerId, | ||
x = ev.x, | ||
y = ev.y; | ||
evCache.push({ | ||
pointerId, | ||
x, | ||
y, | ||
ev | ||
}); | ||
} | ||
// 重置 startPoints | ||
startPoints.length = evCache.length; | ||
for (var i = 0; i < evCache.length; i++) { | ||
var _evCache$i = evCache[i], | ||
_x = _evCache$i.x, | ||
_y = _evCache$i.y; | ||
var point = { | ||
x: _x, | ||
y: _y | ||
}; | ||
_this._move = function (ev) { | ||
_this.clearPressTimeout(); | ||
var _a = _this, startPoints = _a.startPoints, evCache = _a.evCache; | ||
if (!startPoints.length) | ||
return; | ||
var x = ev.x, y = ev.y, pointerId = ev.pointerId; | ||
var isTriggerStart = false; | ||
// Find this event in the cache and update its record with this event | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (pointerId === evCache[i].pointerId) { | ||
evCache[i] = { | ||
pointerId: pointerId, | ||
x: x, | ||
y: y, | ||
ev: ev, | ||
}; | ||
isTriggerStart = true; | ||
break; | ||
} | ||
} | ||
// 无触发start事件 需保留startPoints重新触发start | ||
if (!isTriggerStart) { | ||
var point_1 = { x: x, y: y }; | ||
startPoints.push(point_1); | ||
evCache.push({ | ||
pointerId: pointerId, | ||
x: x, | ||
y: y, | ||
ev: ev, | ||
}); | ||
// 目前只处理双指 | ||
_this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
_this.center = getCenter(startPoints[0], startPoints[1]); | ||
} | ||
var point = { x: x, y: y }; | ||
var points = evCache.map(function (ev) { | ||
return { x: ev.x, y: ev.y }; | ||
}); | ||
// 记录最后2次move的时间和坐标,为了给swipe事件用 | ||
var now = clock.now(); | ||
_this.prevMoveTime = _this.lastMoveTime; | ||
_this.prevMovePoint = _this.lastMovePoint; | ||
_this.lastMoveTime = now; | ||
_this.lastMovePoint = point; | ||
if (startPoints.length === 1) { | ||
var startPoint = startPoints[0]; | ||
var deltaX = x - startPoint.x; | ||
var deltaY = y - startPoint.y; | ||
var direction = _this.direction || calcDirection(startPoint, point); | ||
_this.direction = direction; | ||
// 获取press或者pan的事件类型 | ||
// press 按住滑动, pan表示平移 | ||
// 如果start后立刻move,则触发pan, 如果有停顿,则触发press | ||
var eventType = _this.getEventType(point); | ||
ev.direction = direction; | ||
ev.deltaX = deltaX; | ||
ev.deltaY = deltaY; | ||
ev.points = points; | ||
_this.emitStart(eventType, ev); | ||
_this.emit(eventType, ev); | ||
return; | ||
} | ||
// 多指触控 | ||
var startDistance = _this.startDistance; | ||
var currentDistance = calcDistance(points[0], points[1]); | ||
// 缩放比例 | ||
ev.zoom = currentDistance / startDistance; | ||
ev.center = _this.center; | ||
ev.points = points; | ||
// 触发缩放事件 | ||
_this.emitStart('pinch', ev); | ||
// touch 多指会被拆成多个手指的 move, 会触发多次 move,所以这里需要做节流 | ||
_this._throttleEmit('pinch', ev); | ||
}; | ||
_this._end = function (ev) { | ||
var _a = _this, evCache = _a.evCache, startPoints = _a.startPoints; | ||
var points = evCache.map(function (ev) { | ||
return { x: ev.x, y: ev.y }; | ||
}); | ||
ev.points = points; | ||
_this.emitEnd(ev); | ||
// 单指 | ||
if (evCache.length === 1) { | ||
// swipe事件处理, 在end之后触发 | ||
var now = clock.now(); | ||
var lastMoveTime = _this.lastMoveTime; | ||
// 做这个判断是为了最后一次touchmove后到end前,是否还有一个停顿的过程 | ||
// 100 是拍的一个值,理论这个值会很短,一般不卡顿的话在10ms以内 | ||
if (now - lastMoveTime < 100) { | ||
var prevMoveTime = _this.prevMoveTime || _this.startTime; | ||
var intervalTime = lastMoveTime - prevMoveTime; | ||
// 时间间隔一定要大于0, 否则计算没意义 | ||
if (intervalTime > 0) { | ||
var prevMovePoint = _this.prevMovePoint || startPoints[0]; | ||
var lastMovePoint = _this.lastMovePoint || startPoints[0]; | ||
// move速率 | ||
var velocity = calcDistance(prevMovePoint, lastMovePoint) / intervalTime; | ||
// 0.3 是参考hammerjs的设置 | ||
if (velocity > 0.3) { | ||
ev.velocity = velocity; | ||
ev.direction = calcDirection(prevMovePoint, lastMovePoint); | ||
_this.emit('swipe', ev); | ||
} | ||
} | ||
} | ||
} | ||
// remove event from cache | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (evCache[i].pointerId === ev.pointerId) { | ||
evCache.splice(i, 1); | ||
startPoints.splice(i, 1); | ||
break; | ||
} | ||
} | ||
_this.reset(); | ||
// 多指离开 1 指后,重新触发一次start | ||
if (evCache.length > 0) { | ||
_this._start(); | ||
} | ||
}; | ||
_this._cancel = function (ev) { | ||
var evCache = _this.evCache; | ||
var points = evCache.map(function (ev) { | ||
return { x: ev.x, y: ev.y }; | ||
}); | ||
ev.points = points; | ||
_this.emitEnd(ev); | ||
_this.evCache = []; | ||
_this.reset(); | ||
}; | ||
_this.el = el; | ||
_this._initEvent(); | ||
return _this; | ||
} | ||
Gesture.prototype._initEvent = function () { | ||
var el = this.el; | ||
el.addEventListener('pointerdown', this._start); | ||
el.addEventListener('pointermove', this._move); | ||
el.addEventListener('pointerup', this._end); | ||
el.addEventListener('pointercancel', this._cancel); | ||
el.addEventListener('pointerupoutside', this._end); | ||
}; | ||
Gesture.prototype.getEventType = function (point) { | ||
var _a = this, eventType = _a.eventType, startTime = _a.startTime, startPoints = _a.startPoints; | ||
if (eventType) { | ||
return eventType; | ||
} | ||
var type; | ||
startPoints[i] = point; | ||
} | ||
// 单指事件 | ||
if (startPoints.length === 1) { | ||
var event = evCache[0].ev; | ||
// 如果touchstart后停顿250ms, 则也触发press事件 | ||
// @ts-ignore | ||
var panEventListeners = this._events.pan; | ||
// 如果没有pan事件的监听,默认都是press | ||
if (!panEventListeners) { | ||
type = 'press'; | ||
} | ||
else { | ||
// 如果有pan事件的处理,press则需要停顿250ms, 且移动距离小于10 | ||
var now = clock.now(); | ||
if (now - startTime > PRESS_DELAY && | ||
calcDistance(startPoints[0], point) < 10) { | ||
type = 'press'; | ||
} | ||
else { | ||
type = 'pan'; | ||
} | ||
} | ||
this.eventType = type; | ||
return type; | ||
this.pressTimeout = setTimeout(() => { | ||
// 这里固定触发press事件 | ||
var eventType = 'press'; | ||
var direction = 'none'; | ||
event.direction = direction; | ||
event.deltaX = 0; | ||
event.deltaY = 0; | ||
event.points = startPoints; | ||
this.emitStart(eventType, event); | ||
this.emit(eventType, event); | ||
this.eventType = eventType; | ||
this.direction = direction; | ||
}, PRESS_DELAY); | ||
return; | ||
} | ||
// 目前只处理双指 | ||
this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
this.center = getCenter(startPoints[0], startPoints[1]); | ||
}; | ||
Gesture.prototype.enable = function (eventType) { | ||
this.processEvent[eventType] = true; | ||
}; | ||
// 是否进行中的事件 | ||
Gesture.prototype.isProcess = function (eventType) { | ||
return this.processEvent[eventType]; | ||
}; | ||
// 触发start事件 | ||
Gesture.prototype.emitStart = function (type, ev) { | ||
if (this.isProcess(type)) { | ||
return; | ||
this._move = ev => { | ||
this.clearPressTimeout(); | ||
var startPoints = this.startPoints, | ||
evCache = this.evCache; | ||
if (!startPoints.length) return; | ||
var x = ev.x, | ||
y = ev.y, | ||
pointerId = ev.pointerId; | ||
var isTriggerStart = false; | ||
// Find this event in the cache and update its record with this event | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (pointerId === evCache[i].pointerId) { | ||
evCache[i] = { | ||
pointerId, | ||
x, | ||
y, | ||
ev | ||
}; | ||
isTriggerStart = true; | ||
break; | ||
} | ||
this.enable(type); | ||
this.emit("".concat(type, "start"), ev); | ||
}; | ||
// 触发事件 | ||
Gesture.prototype._throttleEmit = function (type, ev) { | ||
var _this = this; | ||
var _a, _b; | ||
// 主要是节流处理 | ||
this.pushEvent(type, ev); | ||
var _c = this, el = _c.el, throttleTimer = _c.throttleTimer, emitThrottles = _c.emitThrottles, processEvent = _c.processEvent; | ||
if (throttleTimer) { | ||
return; | ||
} | ||
// @ts-ignore | ||
var global = ((_a = el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || ((_b = el.document) === null || _b === void 0 ? void 0 : _b.defaultView); | ||
this.throttleTimer = global.requestAnimationFrame(function () { | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
var _a = emitThrottles[i], type_1 = _a.type, ev_1 = _a.ev; | ||
if (processEvent[type_1]) { | ||
_this.emit(type_1, ev_1); | ||
} | ||
} | ||
// 清空 | ||
_this.throttleTimer = 0; | ||
_this.emitThrottles.length = 0; | ||
} | ||
// 无触发start事件 需保留startPoints重新触发start | ||
if (!isTriggerStart) { | ||
var _point = { | ||
x, | ||
y | ||
}; | ||
startPoints.push(_point); | ||
evCache.push({ | ||
pointerId, | ||
x, | ||
y, | ||
ev | ||
}); | ||
// 目前只处理双指 | ||
this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
this.center = getCenter(startPoints[0], startPoints[1]); | ||
} | ||
var point = { | ||
x, | ||
y | ||
}; | ||
var points = evCache.map(ev => { | ||
return { | ||
x: ev.x, | ||
y: ev.y | ||
}; | ||
}); | ||
// 记录最后2次move的时间和坐标,为了给swipe事件用 | ||
var now = clock.now(); | ||
this.prevMoveTime = this.lastMoveTime; | ||
this.prevMovePoint = this.lastMovePoint; | ||
this.lastMoveTime = now; | ||
this.lastMovePoint = point; | ||
if (startPoints.length === 1) { | ||
var startPoint = startPoints[0]; | ||
var deltaX = x - startPoint.x; | ||
var deltaY = y - startPoint.y; | ||
var direction = this.direction || calcDirection(startPoint, point); | ||
this.direction = direction; | ||
// 获取press或者pan的事件类型 | ||
// press 按住滑动, pan表示平移 | ||
// 如果start后立刻move,则触发pan, 如果有停顿,则触发press | ||
var eventType = this.getEventType(point); | ||
ev.direction = direction; | ||
ev.deltaX = deltaX; | ||
ev.deltaY = deltaY; | ||
ev.points = points; | ||
this.emitStart(eventType, ev); | ||
this.emit(eventType, ev); | ||
return; | ||
} | ||
// 多指触控 | ||
var startDistance = this.startDistance; | ||
var currentDistance = calcDistance(points[0], points[1]); | ||
// 缩放比例 | ||
ev.zoom = currentDistance / startDistance; | ||
ev.center = this.center; | ||
ev.points = points; | ||
// 触发缩放事件 | ||
this.emitStart('pinch', ev); | ||
// touch 多指会被拆成多个手指的 move, 会触发多次 move,所以这里需要做节流 | ||
this._throttleEmit('pinch', ev); | ||
}; | ||
// 触发end事件 | ||
Gesture.prototype.emitEnd = function (ev) { | ||
var _this = this; | ||
var processEvent = this.processEvent; | ||
Object.keys(processEvent).forEach(function (type) { | ||
_this.emit("".concat(type, "end"), ev); | ||
delete processEvent[type]; | ||
}); | ||
}; | ||
Gesture.prototype.pushEvent = function (type, ev) { | ||
var emitThrottles = this.emitThrottles; | ||
var newEvent = { type: type, ev: ev }; | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
if (emitThrottles[i].type === type) { | ||
emitThrottles.splice(i, 1, newEvent); | ||
return; | ||
this._end = ev => { | ||
var evCache = this.evCache, | ||
startPoints = this.startPoints; | ||
var points = evCache.map(ev => { | ||
return { | ||
x: ev.x, | ||
y: ev.y | ||
}; | ||
}); | ||
ev.points = points; | ||
this.emitEnd(ev); | ||
// 单指 | ||
if (evCache.length === 1) { | ||
// swipe事件处理, 在end之后触发 | ||
var now = clock.now(); | ||
var lastMoveTime = this.lastMoveTime; | ||
// 做这个判断是为了最后一次touchmove后到end前,是否还有一个停顿的过程 | ||
// 100 是拍的一个值,理论这个值会很短,一般不卡顿的话在10ms以内 | ||
if (now - lastMoveTime < 100) { | ||
var prevMoveTime = this.prevMoveTime || this.startTime; | ||
var intervalTime = lastMoveTime - prevMoveTime; | ||
// 时间间隔一定要大于0, 否则计算没意义 | ||
if (intervalTime > 0) { | ||
var prevMovePoint = this.prevMovePoint || startPoints[0]; | ||
var lastMovePoint = this.lastMovePoint || startPoints[0]; | ||
// move速率 | ||
var velocity = calcDistance(prevMovePoint, lastMovePoint) / intervalTime; | ||
// 0.3 是参考hammerjs的设置 | ||
if (velocity > 0.3) { | ||
ev.velocity = velocity; | ||
ev.direction = calcDirection(prevMovePoint, lastMovePoint); | ||
this.emit('swipe', ev); | ||
} | ||
} | ||
} | ||
emitThrottles.push(newEvent); | ||
}; | ||
Gesture.prototype.clearPressTimeout = function () { | ||
if (this.pressTimeout) { | ||
clearTimeout(this.pressTimeout); | ||
this.pressTimeout = null; | ||
} | ||
// remove event from cache | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (evCache[i].pointerId === ev.pointerId) { | ||
evCache.splice(i, 1); | ||
startPoints.splice(i, 1); | ||
break; | ||
} | ||
} | ||
this.reset(); | ||
// 多指离开 1 指后,重新触发一次start | ||
if (evCache.length > 0) { | ||
this._start(); | ||
} | ||
}; | ||
Gesture.prototype.reset = function () { | ||
this.clearPressTimeout(); | ||
this.startTime = 0; | ||
this.startDistance = 0; | ||
this.direction = null; | ||
this.eventType = null; | ||
this.prevMoveTime = 0; | ||
this.prevMovePoint = null; | ||
this.lastMoveTime = 0; | ||
this.lastMovePoint = null; | ||
this._cancel = ev => { | ||
var evCache = this.evCache; | ||
var points = evCache.map(ev => { | ||
return { | ||
x: ev.x, | ||
y: ev.y | ||
}; | ||
}); | ||
ev.points = points; | ||
this.emitEnd(ev); | ||
this.evCache = []; | ||
this.reset(); | ||
}; | ||
return Gesture; | ||
}(EventEmitter)); | ||
this.el = el; | ||
this._initEvent(); | ||
} | ||
_initEvent() { | ||
var el = this.el; | ||
el.addEventListener('pointerdown', this._start); | ||
el.addEventListener('pointermove', this._move); | ||
el.addEventListener('pointerup', this._end); | ||
el.addEventListener('pointercancel', this._cancel); | ||
el.addEventListener('pointerupoutside', this._end); | ||
} | ||
getEventType(point) { | ||
var eventType = this.eventType, | ||
startTime = this.startTime, | ||
startPoints = this.startPoints; | ||
if (eventType) { | ||
return eventType; | ||
} | ||
var type; | ||
// @ts-ignore | ||
var panEventListeners = this._events.pan; | ||
// 如果没有pan事件的监听,默认都是press | ||
if (!panEventListeners) { | ||
type = 'press'; | ||
} else { | ||
// 如果有pan事件的处理,press则需要停顿250ms, 且移动距离小于10 | ||
var now = clock.now(); | ||
if (now - startTime > PRESS_DELAY && calcDistance(startPoints[0], point) < 10) { | ||
type = 'press'; | ||
} else { | ||
type = 'pan'; | ||
} | ||
} | ||
this.eventType = type; | ||
return type; | ||
} | ||
enable(eventType) { | ||
this.processEvent[eventType] = true; | ||
} | ||
// 是否进行中的事件 | ||
isProcess(eventType) { | ||
return this.processEvent[eventType]; | ||
} | ||
// 触发start事件 | ||
emitStart(type, ev) { | ||
if (this.isProcess(type)) { | ||
return; | ||
} | ||
this.enable(type); | ||
this.emit("".concat(type, "start"), ev); | ||
} | ||
// 触发事件 | ||
_throttleEmit(type, ev) { | ||
var _el$ownerDocument, _el$document; | ||
// 主要是节流处理 | ||
this.pushEvent(type, ev); | ||
var el = this.el, | ||
throttleTimer = this.throttleTimer, | ||
emitThrottles = this.emitThrottles, | ||
processEvent = this.processEvent; | ||
if (throttleTimer) { | ||
return; | ||
} | ||
// @ts-ignore | ||
var global = ((_el$ownerDocument = el.ownerDocument) === null || _el$ownerDocument === void 0 ? void 0 : _el$ownerDocument.defaultView) || ((_el$document = el.document) === null || _el$document === void 0 ? void 0 : _el$document.defaultView); | ||
this.throttleTimer = global.requestAnimationFrame(() => { | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
var _emitThrottles$i = emitThrottles[i], | ||
_type = _emitThrottles$i.type, | ||
_ev = _emitThrottles$i.ev; | ||
if (processEvent[_type]) { | ||
this.emit(_type, _ev); | ||
} | ||
} | ||
// 清空 | ||
this.throttleTimer = 0; | ||
this.emitThrottles.length = 0; | ||
}); | ||
} | ||
// 触发end事件 | ||
emitEnd(ev) { | ||
var processEvent = this.processEvent; | ||
Object.keys(processEvent).forEach(type => { | ||
this.emit("".concat(type, "end"), ev); | ||
delete processEvent[type]; | ||
}); | ||
} | ||
pushEvent(type, ev) { | ||
var emitThrottles = this.emitThrottles; | ||
var newEvent = { | ||
type, | ||
ev | ||
}; | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
if (emitThrottles[i].type === type) { | ||
emitThrottles.splice(i, 1, newEvent); | ||
return; | ||
} | ||
} | ||
emitThrottles.push(newEvent); | ||
} | ||
clearPressTimeout() { | ||
if (this.pressTimeout) { | ||
clearTimeout(this.pressTimeout); | ||
this.pressTimeout = null; | ||
} | ||
} | ||
reset() { | ||
this.clearPressTimeout(); | ||
this.startTime = 0; | ||
this.startDistance = 0; | ||
this.direction = null; | ||
this.eventType = null; | ||
this.prevMoveTime = 0; | ||
this.prevMovePoint = null; | ||
this.lastMoveTime = 0; | ||
this.lastMovePoint = null; | ||
} | ||
} | ||
export { Gesture as default }; | ||
//# sourceMappingURL=index.esm.js.map |
@@ -0,1 +1,9 @@ | ||
/*! | ||
* @antv/g-gesture | ||
* @description G Gesture | ||
* @version 3.0.12 | ||
* @date 10/23/2024, 7:16:52 AM | ||
* @author AntVis | ||
* @docs https://g.antv.antgroup.com/ | ||
*/ | ||
'use strict'; | ||
@@ -5,3 +13,2 @@ | ||
var tslib = require('tslib'); | ||
var EventEmitter = require('eventemitter3'); | ||
@@ -11,327 +18,375 @@ | ||
var PRESS_DELAY = 250; | ||
// 计算滑动的方向 | ||
var calcDirection = function (start, end) { | ||
var xDistance = end.x - start.x; | ||
var yDistance = end.y - start.y; | ||
// x 的距离大于y 说明是横向,否则就是纵向 | ||
if (Math.abs(xDistance) > Math.abs(yDistance)) { | ||
return xDistance > 0 ? 'right' : 'left'; | ||
} | ||
return yDistance > 0 ? 'down' : 'up'; | ||
var calcDirection = (start, end) => { | ||
var xDistance = end.x - start.x; | ||
var yDistance = end.y - start.y; | ||
// x 的距离大于y 说明是横向,否则就是纵向 | ||
if (Math.abs(xDistance) > Math.abs(yDistance)) { | ||
return xDistance > 0 ? 'right' : 'left'; | ||
} | ||
return yDistance > 0 ? 'down' : 'up'; | ||
}; | ||
// 计算2点之间的距离 | ||
var calcDistance = function (point1, point2) { | ||
var xDistance = Math.abs(point2.x - point1.x); | ||
var yDistance = Math.abs(point2.y - point1.y); | ||
return Math.sqrt(xDistance * xDistance + yDistance * yDistance); | ||
var calcDistance = (point1, point2) => { | ||
var xDistance = Math.abs(point2.x - point1.x); | ||
var yDistance = Math.abs(point2.y - point1.y); | ||
return Math.sqrt(xDistance * xDistance + yDistance * yDistance); | ||
}; | ||
var getCenter = function (point1, point2) { | ||
var x = point1.x + (point2.x - point1.x) / 2; | ||
var y = point1.y + (point2.y - point1.y) / 2; | ||
return { x: x, y: y }; | ||
var getCenter = (point1, point2) => { | ||
var x = point1.x + (point2.x - point1.x) / 2; | ||
var y = point1.y + (point2.y - point1.y) / 2; | ||
return { | ||
x, | ||
y | ||
}; | ||
}; | ||
var Gesture = /** @class */ (function (_super) { | ||
tslib.__extends(Gesture, _super); | ||
function Gesture(el) { | ||
var _this = _super.call(this) || this; | ||
_this.evCache = []; | ||
_this.startPoints = []; | ||
// 用来记录当前触发的事件 | ||
_this.processEvent = {}; | ||
_this.throttleTimer = 0; | ||
_this.emitThrottles = []; | ||
_this._start = function (ev) { | ||
// 每次触点开始都重置事件 | ||
_this.reset(); | ||
// 记录touch start 的时间 | ||
_this.startTime = clock.now(); | ||
var _a = _this, evCache = _a.evCache, startPoints = _a.startPoints; | ||
if (ev) { | ||
var pointerId = ev.pointerId, x = ev.x, y = ev.y; | ||
evCache.push({ | ||
pointerId: pointerId, | ||
x: x, | ||
y: y, | ||
ev: ev, | ||
}); | ||
} | ||
// 重置 startPoints | ||
startPoints.length = evCache.length; | ||
for (var i = 0; i < evCache.length; i++) { | ||
var _b = evCache[i], x = _b.x, y = _b.y; | ||
var point = { x: x, y: y }; | ||
startPoints[i] = point; | ||
} | ||
// 单指事件 | ||
if (startPoints.length === 1) { | ||
var event_1 = evCache[0].ev; | ||
// 如果touchstart后停顿250ms, 则也触发press事件 | ||
// @ts-ignore | ||
_this.pressTimeout = setTimeout(function () { | ||
// 这里固定触发press事件 | ||
var eventType = 'press'; | ||
var direction = 'none'; | ||
event_1.direction = direction; | ||
event_1.deltaX = 0; | ||
event_1.deltaY = 0; | ||
event_1.points = startPoints; | ||
_this.emitStart(eventType, event_1); | ||
_this.emit(eventType, event_1); | ||
_this.eventType = eventType; | ||
_this.direction = direction; | ||
}, PRESS_DELAY); | ||
return; | ||
} | ||
// 目前只处理双指 | ||
_this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
_this.center = getCenter(startPoints[0], startPoints[1]); | ||
class Gesture extends EventEmitter { | ||
constructor(el) { | ||
super(); | ||
this.evCache = []; | ||
this.startPoints = []; | ||
// 用来记录当前触发的事件 | ||
this.processEvent = {}; | ||
this.throttleTimer = 0; | ||
this.emitThrottles = []; | ||
this._start = ev => { | ||
// 每次触点开始都重置事件 | ||
this.reset(); | ||
// 记录touch start 的时间 | ||
this.startTime = clock.now(); | ||
var evCache = this.evCache, | ||
startPoints = this.startPoints; | ||
if (ev) { | ||
var pointerId = ev.pointerId, | ||
x = ev.x, | ||
y = ev.y; | ||
evCache.push({ | ||
pointerId, | ||
x, | ||
y, | ||
ev | ||
}); | ||
} | ||
// 重置 startPoints | ||
startPoints.length = evCache.length; | ||
for (var i = 0; i < evCache.length; i++) { | ||
var _evCache$i = evCache[i], | ||
_x = _evCache$i.x, | ||
_y = _evCache$i.y; | ||
var point = { | ||
x: _x, | ||
y: _y | ||
}; | ||
_this._move = function (ev) { | ||
_this.clearPressTimeout(); | ||
var _a = _this, startPoints = _a.startPoints, evCache = _a.evCache; | ||
if (!startPoints.length) | ||
return; | ||
var x = ev.x, y = ev.y, pointerId = ev.pointerId; | ||
var isTriggerStart = false; | ||
// Find this event in the cache and update its record with this event | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (pointerId === evCache[i].pointerId) { | ||
evCache[i] = { | ||
pointerId: pointerId, | ||
x: x, | ||
y: y, | ||
ev: ev, | ||
}; | ||
isTriggerStart = true; | ||
break; | ||
} | ||
} | ||
// 无触发start事件 需保留startPoints重新触发start | ||
if (!isTriggerStart) { | ||
var point_1 = { x: x, y: y }; | ||
startPoints.push(point_1); | ||
evCache.push({ | ||
pointerId: pointerId, | ||
x: x, | ||
y: y, | ||
ev: ev, | ||
}); | ||
// 目前只处理双指 | ||
_this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
_this.center = getCenter(startPoints[0], startPoints[1]); | ||
} | ||
var point = { x: x, y: y }; | ||
var points = evCache.map(function (ev) { | ||
return { x: ev.x, y: ev.y }; | ||
}); | ||
// 记录最后2次move的时间和坐标,为了给swipe事件用 | ||
var now = clock.now(); | ||
_this.prevMoveTime = _this.lastMoveTime; | ||
_this.prevMovePoint = _this.lastMovePoint; | ||
_this.lastMoveTime = now; | ||
_this.lastMovePoint = point; | ||
if (startPoints.length === 1) { | ||
var startPoint = startPoints[0]; | ||
var deltaX = x - startPoint.x; | ||
var deltaY = y - startPoint.y; | ||
var direction = _this.direction || calcDirection(startPoint, point); | ||
_this.direction = direction; | ||
// 获取press或者pan的事件类型 | ||
// press 按住滑动, pan表示平移 | ||
// 如果start后立刻move,则触发pan, 如果有停顿,则触发press | ||
var eventType = _this.getEventType(point); | ||
ev.direction = direction; | ||
ev.deltaX = deltaX; | ||
ev.deltaY = deltaY; | ||
ev.points = points; | ||
_this.emitStart(eventType, ev); | ||
_this.emit(eventType, ev); | ||
return; | ||
} | ||
// 多指触控 | ||
var startDistance = _this.startDistance; | ||
var currentDistance = calcDistance(points[0], points[1]); | ||
// 缩放比例 | ||
ev.zoom = currentDistance / startDistance; | ||
ev.center = _this.center; | ||
ev.points = points; | ||
// 触发缩放事件 | ||
_this.emitStart('pinch', ev); | ||
// touch 多指会被拆成多个手指的 move, 会触发多次 move,所以这里需要做节流 | ||
_this._throttleEmit('pinch', ev); | ||
}; | ||
_this._end = function (ev) { | ||
var _a = _this, evCache = _a.evCache, startPoints = _a.startPoints; | ||
var points = evCache.map(function (ev) { | ||
return { x: ev.x, y: ev.y }; | ||
}); | ||
ev.points = points; | ||
_this.emitEnd(ev); | ||
// 单指 | ||
if (evCache.length === 1) { | ||
// swipe事件处理, 在end之后触发 | ||
var now = clock.now(); | ||
var lastMoveTime = _this.lastMoveTime; | ||
// 做这个判断是为了最后一次touchmove后到end前,是否还有一个停顿的过程 | ||
// 100 是拍的一个值,理论这个值会很短,一般不卡顿的话在10ms以内 | ||
if (now - lastMoveTime < 100) { | ||
var prevMoveTime = _this.prevMoveTime || _this.startTime; | ||
var intervalTime = lastMoveTime - prevMoveTime; | ||
// 时间间隔一定要大于0, 否则计算没意义 | ||
if (intervalTime > 0) { | ||
var prevMovePoint = _this.prevMovePoint || startPoints[0]; | ||
var lastMovePoint = _this.lastMovePoint || startPoints[0]; | ||
// move速率 | ||
var velocity = calcDistance(prevMovePoint, lastMovePoint) / intervalTime; | ||
// 0.3 是参考hammerjs的设置 | ||
if (velocity > 0.3) { | ||
ev.velocity = velocity; | ||
ev.direction = calcDirection(prevMovePoint, lastMovePoint); | ||
_this.emit('swipe', ev); | ||
} | ||
} | ||
} | ||
} | ||
// remove event from cache | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (evCache[i].pointerId === ev.pointerId) { | ||
evCache.splice(i, 1); | ||
startPoints.splice(i, 1); | ||
break; | ||
} | ||
} | ||
_this.reset(); | ||
// 多指离开 1 指后,重新触发一次start | ||
if (evCache.length > 0) { | ||
_this._start(); | ||
} | ||
}; | ||
_this._cancel = function (ev) { | ||
var evCache = _this.evCache; | ||
var points = evCache.map(function (ev) { | ||
return { x: ev.x, y: ev.y }; | ||
}); | ||
ev.points = points; | ||
_this.emitEnd(ev); | ||
_this.evCache = []; | ||
_this.reset(); | ||
}; | ||
_this.el = el; | ||
_this._initEvent(); | ||
return _this; | ||
} | ||
Gesture.prototype._initEvent = function () { | ||
var el = this.el; | ||
el.addEventListener('pointerdown', this._start); | ||
el.addEventListener('pointermove', this._move); | ||
el.addEventListener('pointerup', this._end); | ||
el.addEventListener('pointercancel', this._cancel); | ||
el.addEventListener('pointerupoutside', this._end); | ||
}; | ||
Gesture.prototype.getEventType = function (point) { | ||
var _a = this, eventType = _a.eventType, startTime = _a.startTime, startPoints = _a.startPoints; | ||
if (eventType) { | ||
return eventType; | ||
} | ||
var type; | ||
startPoints[i] = point; | ||
} | ||
// 单指事件 | ||
if (startPoints.length === 1) { | ||
var event = evCache[0].ev; | ||
// 如果touchstart后停顿250ms, 则也触发press事件 | ||
// @ts-ignore | ||
var panEventListeners = this._events.pan; | ||
// 如果没有pan事件的监听,默认都是press | ||
if (!panEventListeners) { | ||
type = 'press'; | ||
} | ||
else { | ||
// 如果有pan事件的处理,press则需要停顿250ms, 且移动距离小于10 | ||
var now = clock.now(); | ||
if (now - startTime > PRESS_DELAY && | ||
calcDistance(startPoints[0], point) < 10) { | ||
type = 'press'; | ||
} | ||
else { | ||
type = 'pan'; | ||
} | ||
} | ||
this.eventType = type; | ||
return type; | ||
this.pressTimeout = setTimeout(() => { | ||
// 这里固定触发press事件 | ||
var eventType = 'press'; | ||
var direction = 'none'; | ||
event.direction = direction; | ||
event.deltaX = 0; | ||
event.deltaY = 0; | ||
event.points = startPoints; | ||
this.emitStart(eventType, event); | ||
this.emit(eventType, event); | ||
this.eventType = eventType; | ||
this.direction = direction; | ||
}, PRESS_DELAY); | ||
return; | ||
} | ||
// 目前只处理双指 | ||
this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
this.center = getCenter(startPoints[0], startPoints[1]); | ||
}; | ||
Gesture.prototype.enable = function (eventType) { | ||
this.processEvent[eventType] = true; | ||
}; | ||
// 是否进行中的事件 | ||
Gesture.prototype.isProcess = function (eventType) { | ||
return this.processEvent[eventType]; | ||
}; | ||
// 触发start事件 | ||
Gesture.prototype.emitStart = function (type, ev) { | ||
if (this.isProcess(type)) { | ||
return; | ||
this._move = ev => { | ||
this.clearPressTimeout(); | ||
var startPoints = this.startPoints, | ||
evCache = this.evCache; | ||
if (!startPoints.length) return; | ||
var x = ev.x, | ||
y = ev.y, | ||
pointerId = ev.pointerId; | ||
var isTriggerStart = false; | ||
// Find this event in the cache and update its record with this event | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (pointerId === evCache[i].pointerId) { | ||
evCache[i] = { | ||
pointerId, | ||
x, | ||
y, | ||
ev | ||
}; | ||
isTriggerStart = true; | ||
break; | ||
} | ||
this.enable(type); | ||
this.emit("".concat(type, "start"), ev); | ||
}; | ||
// 触发事件 | ||
Gesture.prototype._throttleEmit = function (type, ev) { | ||
var _this = this; | ||
var _a, _b; | ||
// 主要是节流处理 | ||
this.pushEvent(type, ev); | ||
var _c = this, el = _c.el, throttleTimer = _c.throttleTimer, emitThrottles = _c.emitThrottles, processEvent = _c.processEvent; | ||
if (throttleTimer) { | ||
return; | ||
} | ||
// @ts-ignore | ||
var global = ((_a = el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) || ((_b = el.document) === null || _b === void 0 ? void 0 : _b.defaultView); | ||
this.throttleTimer = global.requestAnimationFrame(function () { | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
var _a = emitThrottles[i], type_1 = _a.type, ev_1 = _a.ev; | ||
if (processEvent[type_1]) { | ||
_this.emit(type_1, ev_1); | ||
} | ||
} | ||
// 清空 | ||
_this.throttleTimer = 0; | ||
_this.emitThrottles.length = 0; | ||
} | ||
// 无触发start事件 需保留startPoints重新触发start | ||
if (!isTriggerStart) { | ||
var _point = { | ||
x, | ||
y | ||
}; | ||
startPoints.push(_point); | ||
evCache.push({ | ||
pointerId, | ||
x, | ||
y, | ||
ev | ||
}); | ||
// 目前只处理双指 | ||
this.startDistance = calcDistance(startPoints[0], startPoints[1]); | ||
this.center = getCenter(startPoints[0], startPoints[1]); | ||
} | ||
var point = { | ||
x, | ||
y | ||
}; | ||
var points = evCache.map(ev => { | ||
return { | ||
x: ev.x, | ||
y: ev.y | ||
}; | ||
}); | ||
// 记录最后2次move的时间和坐标,为了给swipe事件用 | ||
var now = clock.now(); | ||
this.prevMoveTime = this.lastMoveTime; | ||
this.prevMovePoint = this.lastMovePoint; | ||
this.lastMoveTime = now; | ||
this.lastMovePoint = point; | ||
if (startPoints.length === 1) { | ||
var startPoint = startPoints[0]; | ||
var deltaX = x - startPoint.x; | ||
var deltaY = y - startPoint.y; | ||
var direction = this.direction || calcDirection(startPoint, point); | ||
this.direction = direction; | ||
// 获取press或者pan的事件类型 | ||
// press 按住滑动, pan表示平移 | ||
// 如果start后立刻move,则触发pan, 如果有停顿,则触发press | ||
var eventType = this.getEventType(point); | ||
ev.direction = direction; | ||
ev.deltaX = deltaX; | ||
ev.deltaY = deltaY; | ||
ev.points = points; | ||
this.emitStart(eventType, ev); | ||
this.emit(eventType, ev); | ||
return; | ||
} | ||
// 多指触控 | ||
var startDistance = this.startDistance; | ||
var currentDistance = calcDistance(points[0], points[1]); | ||
// 缩放比例 | ||
ev.zoom = currentDistance / startDistance; | ||
ev.center = this.center; | ||
ev.points = points; | ||
// 触发缩放事件 | ||
this.emitStart('pinch', ev); | ||
// touch 多指会被拆成多个手指的 move, 会触发多次 move,所以这里需要做节流 | ||
this._throttleEmit('pinch', ev); | ||
}; | ||
// 触发end事件 | ||
Gesture.prototype.emitEnd = function (ev) { | ||
var _this = this; | ||
var processEvent = this.processEvent; | ||
Object.keys(processEvent).forEach(function (type) { | ||
_this.emit("".concat(type, "end"), ev); | ||
delete processEvent[type]; | ||
}); | ||
}; | ||
Gesture.prototype.pushEvent = function (type, ev) { | ||
var emitThrottles = this.emitThrottles; | ||
var newEvent = { type: type, ev: ev }; | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
if (emitThrottles[i].type === type) { | ||
emitThrottles.splice(i, 1, newEvent); | ||
return; | ||
this._end = ev => { | ||
var evCache = this.evCache, | ||
startPoints = this.startPoints; | ||
var points = evCache.map(ev => { | ||
return { | ||
x: ev.x, | ||
y: ev.y | ||
}; | ||
}); | ||
ev.points = points; | ||
this.emitEnd(ev); | ||
// 单指 | ||
if (evCache.length === 1) { | ||
// swipe事件处理, 在end之后触发 | ||
var now = clock.now(); | ||
var lastMoveTime = this.lastMoveTime; | ||
// 做这个判断是为了最后一次touchmove后到end前,是否还有一个停顿的过程 | ||
// 100 是拍的一个值,理论这个值会很短,一般不卡顿的话在10ms以内 | ||
if (now - lastMoveTime < 100) { | ||
var prevMoveTime = this.prevMoveTime || this.startTime; | ||
var intervalTime = lastMoveTime - prevMoveTime; | ||
// 时间间隔一定要大于0, 否则计算没意义 | ||
if (intervalTime > 0) { | ||
var prevMovePoint = this.prevMovePoint || startPoints[0]; | ||
var lastMovePoint = this.lastMovePoint || startPoints[0]; | ||
// move速率 | ||
var velocity = calcDistance(prevMovePoint, lastMovePoint) / intervalTime; | ||
// 0.3 是参考hammerjs的设置 | ||
if (velocity > 0.3) { | ||
ev.velocity = velocity; | ||
ev.direction = calcDirection(prevMovePoint, lastMovePoint); | ||
this.emit('swipe', ev); | ||
} | ||
} | ||
} | ||
emitThrottles.push(newEvent); | ||
}; | ||
Gesture.prototype.clearPressTimeout = function () { | ||
if (this.pressTimeout) { | ||
clearTimeout(this.pressTimeout); | ||
this.pressTimeout = null; | ||
} | ||
// remove event from cache | ||
for (var i = 0, len = evCache.length; i < len; i++) { | ||
if (evCache[i].pointerId === ev.pointerId) { | ||
evCache.splice(i, 1); | ||
startPoints.splice(i, 1); | ||
break; | ||
} | ||
} | ||
this.reset(); | ||
// 多指离开 1 指后,重新触发一次start | ||
if (evCache.length > 0) { | ||
this._start(); | ||
} | ||
}; | ||
Gesture.prototype.reset = function () { | ||
this.clearPressTimeout(); | ||
this.startTime = 0; | ||
this.startDistance = 0; | ||
this.direction = null; | ||
this.eventType = null; | ||
this.prevMoveTime = 0; | ||
this.prevMovePoint = null; | ||
this.lastMoveTime = 0; | ||
this.lastMovePoint = null; | ||
this._cancel = ev => { | ||
var evCache = this.evCache; | ||
var points = evCache.map(ev => { | ||
return { | ||
x: ev.x, | ||
y: ev.y | ||
}; | ||
}); | ||
ev.points = points; | ||
this.emitEnd(ev); | ||
this.evCache = []; | ||
this.reset(); | ||
}; | ||
return Gesture; | ||
}(EventEmitter)); | ||
this.el = el; | ||
this._initEvent(); | ||
} | ||
_initEvent() { | ||
var el = this.el; | ||
el.addEventListener('pointerdown', this._start); | ||
el.addEventListener('pointermove', this._move); | ||
el.addEventListener('pointerup', this._end); | ||
el.addEventListener('pointercancel', this._cancel); | ||
el.addEventListener('pointerupoutside', this._end); | ||
} | ||
getEventType(point) { | ||
var eventType = this.eventType, | ||
startTime = this.startTime, | ||
startPoints = this.startPoints; | ||
if (eventType) { | ||
return eventType; | ||
} | ||
var type; | ||
// @ts-ignore | ||
var panEventListeners = this._events.pan; | ||
// 如果没有pan事件的监听,默认都是press | ||
if (!panEventListeners) { | ||
type = 'press'; | ||
} else { | ||
// 如果有pan事件的处理,press则需要停顿250ms, 且移动距离小于10 | ||
var now = clock.now(); | ||
if (now - startTime > PRESS_DELAY && calcDistance(startPoints[0], point) < 10) { | ||
type = 'press'; | ||
} else { | ||
type = 'pan'; | ||
} | ||
} | ||
this.eventType = type; | ||
return type; | ||
} | ||
enable(eventType) { | ||
this.processEvent[eventType] = true; | ||
} | ||
// 是否进行中的事件 | ||
isProcess(eventType) { | ||
return this.processEvent[eventType]; | ||
} | ||
// 触发start事件 | ||
emitStart(type, ev) { | ||
if (this.isProcess(type)) { | ||
return; | ||
} | ||
this.enable(type); | ||
this.emit("".concat(type, "start"), ev); | ||
} | ||
// 触发事件 | ||
_throttleEmit(type, ev) { | ||
var _el$ownerDocument, _el$document; | ||
// 主要是节流处理 | ||
this.pushEvent(type, ev); | ||
var el = this.el, | ||
throttleTimer = this.throttleTimer, | ||
emitThrottles = this.emitThrottles, | ||
processEvent = this.processEvent; | ||
if (throttleTimer) { | ||
return; | ||
} | ||
// @ts-ignore | ||
var global = ((_el$ownerDocument = el.ownerDocument) === null || _el$ownerDocument === void 0 ? void 0 : _el$ownerDocument.defaultView) || ((_el$document = el.document) === null || _el$document === void 0 ? void 0 : _el$document.defaultView); | ||
this.throttleTimer = global.requestAnimationFrame(() => { | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
var _emitThrottles$i = emitThrottles[i], | ||
_type = _emitThrottles$i.type, | ||
_ev = _emitThrottles$i.ev; | ||
if (processEvent[_type]) { | ||
this.emit(_type, _ev); | ||
} | ||
} | ||
// 清空 | ||
this.throttleTimer = 0; | ||
this.emitThrottles.length = 0; | ||
}); | ||
} | ||
// 触发end事件 | ||
emitEnd(ev) { | ||
var processEvent = this.processEvent; | ||
Object.keys(processEvent).forEach(type => { | ||
this.emit("".concat(type, "end"), ev); | ||
delete processEvent[type]; | ||
}); | ||
} | ||
pushEvent(type, ev) { | ||
var emitThrottles = this.emitThrottles; | ||
var newEvent = { | ||
type, | ||
ev | ||
}; | ||
for (var i = 0, len = emitThrottles.length; i < len; i++) { | ||
if (emitThrottles[i].type === type) { | ||
emitThrottles.splice(i, 1, newEvent); | ||
return; | ||
} | ||
} | ||
emitThrottles.push(newEvent); | ||
} | ||
clearPressTimeout() { | ||
if (this.pressTimeout) { | ||
clearTimeout(this.pressTimeout); | ||
this.pressTimeout = null; | ||
} | ||
} | ||
reset() { | ||
this.clearPressTimeout(); | ||
this.startTime = 0; | ||
this.startDistance = 0; | ||
this.direction = null; | ||
this.eventType = null; | ||
this.prevMoveTime = 0; | ||
this.prevMovePoint = null; | ||
this.lastMoveTime = 0; | ||
this.lastMovePoint = null; | ||
} | ||
} | ||
exports.default = Gesture; | ||
//# sourceMappingURL=index.js.map |
@@ -1,2 +0,10 @@ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.Gesture=e())}(this,(function(){"use strict";var t=function(e,n){return t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},t(e,n)};"function"==typeof SuppressedError&&SuppressedError;var e={exports:{}};!function(t){var e=Object.prototype.hasOwnProperty,n="~";function r(){}function o(t,e,n){this.fn=t,this.context=e,this.once=n||!1}function i(t,e,r,i,s){if("function"!=typeof r)throw new TypeError("The listener must be a function");var a=new o(r,i||t,s),c=n?n+e:e;return t._events[c]?t._events[c].fn?t._events[c]=[t._events[c],a]:t._events[c].push(a):(t._events[c]=a,t._eventsCount++),t}function s(t,e){0==--t._eventsCount?t._events=new r:delete t._events[e]}function a(){this._events=new r,this._eventsCount=0}Object.create&&(r.prototype=Object.create(null),(new r).__proto__||(n=!1)),a.prototype.eventNames=function(){var t,r,o=[];if(0===this._eventsCount)return o;for(r in t=this._events)e.call(t,r)&&o.push(n?r.slice(1):r);return Object.getOwnPropertySymbols?o.concat(Object.getOwnPropertySymbols(t)):o},a.prototype.listeners=function(t){var e=this._events[n?n+t:t];if(!e)return[];if(e.fn)return[e.fn];for(var r=0,o=e.length,i=Array(o);o>r;r++)i[r]=e[r].fn;return i},a.prototype.listenerCount=function(t){var e=this._events[n?n+t:t];return e?e.fn?1:e.length:0},a.prototype.emit=function(t,e,r,o,i,s){var a=n?n+t:t;if(!this._events[a])return!1;var c,p,u=this._events[a],v=arguments.length;if(u.fn){switch(u.once&&this.removeListener(t,u.fn,void 0,!0),v){case 1:return u.fn.call(u.context),!0;case 2:return u.fn.call(u.context,e),!0;case 3:return u.fn.call(u.context,e,r),!0;case 4:return u.fn.call(u.context,e,r,o),!0;case 5:return u.fn.call(u.context,e,r,o,i),!0;case 6:return u.fn.call(u.context,e,r,o,i,s),!0}for(p=1,c=Array(v-1);v>p;p++)c[p-1]=arguments[p];u.fn.apply(u.context,c)}else{var f,l=u.length;for(p=0;l>p;p++)switch(u[p].once&&this.removeListener(t,u[p].fn,void 0,!0),v){case 1:u[p].fn.call(u[p].context);break;case 2:u[p].fn.call(u[p].context,e);break;case 3:u[p].fn.call(u[p].context,e,r);break;case 4:u[p].fn.call(u[p].context,e,r,o);break;default:if(!c)for(f=1,c=Array(v-1);v>f;f++)c[f-1]=arguments[f];u[p].fn.apply(u[p].context,c)}}return!0},a.prototype.on=function(t,e,n){return i(this,t,e,n,!1)},a.prototype.once=function(t,e,n){return i(this,t,e,n,!0)},a.prototype.removeListener=function(t,e,r,o){var i=n?n+t:t;if(!this._events[i])return this;if(!e)return s(this,i),this;var a=this._events[i];if(a.fn)a.fn!==e||o&&!a.once||r&&a.context!==r||s(this,i);else{for(var c=0,p=[],u=a.length;u>c;c++)(a[c].fn!==e||o&&!a[c].once||r&&a[c].context!==r)&&p.push(a[c]);p.length?this._events[i]=1===p.length?p[0]:p:s(this,i)}return this},a.prototype.removeAllListeners=function(t){var e;return t?this._events[e=n?n+t:t]&&s(this,e):(this._events=new r,this._eventsCount=0),this},a.prototype.off=a.prototype.removeListener,a.prototype.addListener=a.prototype.on,a.prefixed=n,a.EventEmitter=a,t.exports=a}(e);var n="object"==typeof performance&&performance.now?performance:Date,r=function(t,e){var n=e.x-t.x,r=e.y-t.y;return Math.abs(n)>Math.abs(r)?n>0?"right":"left":r>0?"down":"up"},o=function(t,e){var n=Math.abs(e.x-t.x),r=Math.abs(e.y-t.y);return Math.sqrt(n*n+r*r)},i=function(t,e){return{x:t.x+(e.x-t.x)/2,y:t.y+(e.y-t.y)/2}};return function(e){function s(t){var s=e.call(this)||this;return s.evCache=[],s.startPoints=[],s.processEvent={},s.throttleTimer=0,s.emitThrottles=[],s._start=function(t){s.reset(),s.startTime=n.now();var e=s.evCache,r=s.startPoints;t&&e.push({pointerId:t.pointerId,x:t.x,y:t.y,ev:t});r.length=e.length;for(var a=0;e.length>a;a++){var c=e[a];r[a]={x:c.x,y:c.y}}if(1!==r.length)s.startDistance=o(r[0],r[1]),s.center=i(r[0],r[1]);else{var p=e[0].ev;s.pressTimeout=setTimeout((function(){var t="press",e="none";p.direction=e,p.deltaX=0,p.deltaY=0,p.points=r,s.emitStart(t,p),s.emit(t,p),s.eventType=t,s.direction=e}),250)}},s._move=function(t){s.clearPressTimeout();var e=s.startPoints,a=s.evCache;if(e.length){for(var c=t.x,p=t.y,u=t.pointerId,v=!1,f=0,l=a.length;l>f;f++)if(u===a[f].pointerId){a[f]={pointerId:u,x:c,y:p,ev:t},v=!0;break}if(!v)e.push({x:c,y:p}),a.push({pointerId:u,x:c,y:p,ev:t}),s.startDistance=o(e[0],e[1]),s.center=i(e[0],e[1]);var h={x:c,y:p},y=a.map((function(t){return{x:t.x,y:t.y}})),m=n.now();if(s.prevMoveTime=s.lastMoveTime,s.prevMovePoint=s.lastMovePoint,s.lastMoveTime=m,s.lastMovePoint=h,1===e.length){var d=e[0],_=c-d.x,x=p-d.y,T=s.direction||r(d,h);s.direction=T;var b=s.getEventType(h);return t.direction=T,t.deltaX=_,t.deltaY=x,t.points=y,s.emitStart(b,t),void s.emit(b,t)}var E=s.startDistance,g=o(y[0],y[1]);t.zoom=g/E,t.center=s.center,t.points=y,s.emitStart("pinch",t),s._throttleEmit("pinch",t)}},s._end=function(t){var e=s.evCache,i=s.startPoints,a=e.map((function(t){return{x:t.x,y:t.y}}));if(t.points=a,s.emitEnd(t),1===e.length){var c=n.now(),p=s.lastMoveTime;if(100>c-p){var u=p-(s.prevMoveTime||s.startTime);if(u>0){var v=s.prevMovePoint||i[0],f=s.lastMovePoint||i[0],l=o(v,f)/u;l>.3&&(t.velocity=l,t.direction=r(v,f),s.emit("swipe",t))}}}for(var h=0,y=e.length;y>h;h++)if(e[h].pointerId===t.pointerId){e.splice(h,1),i.splice(h,1);break}s.reset(),e.length>0&&s._start()},s._cancel=function(t){var e=s.evCache.map((function(t){return{x:t.x,y:t.y}}));t.points=e,s.emitEnd(t),s.evCache=[],s.reset()},s.el=t,s._initEvent(),s}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+n+" is not a constructor or null");function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}(s,e),s.prototype._initEvent=function(){var t=this.el;t.addEventListener("pointerdown",this._start),t.addEventListener("pointermove",this._move),t.addEventListener("pointerup",this._end),t.addEventListener("pointercancel",this._cancel),t.addEventListener("pointerupoutside",this._end)},s.prototype.getEventType=function(t){var e,r=this,i=r.eventType,s=r.startTime,a=r.startPoints;if(i)return i;this._events.pan?e=n.now()-s>250&&10>o(a[0],t)?"press":"pan":e="press";return this.eventType=e,e},s.prototype.enable=function(t){this.processEvent[t]=!0},s.prototype.isProcess=function(t){return this.processEvent[t]},s.prototype.emitStart=function(t,e){this.isProcess(t)||(this.enable(t),this.emit("".concat(t,"start"),e))},s.prototype._throttleEmit=function(t,e){var n,r,o=this;this.pushEvent(t,e);var i=this,s=i.el,a=i.emitThrottles,c=i.processEvent;if(!i.throttleTimer){var p=(null===(n=s.ownerDocument)||void 0===n?void 0:n.defaultView)||(null===(r=s.document)||void 0===r?void 0:r.defaultView);this.throttleTimer=p.requestAnimationFrame((function(){for(var t=0,e=a.length;e>t;t++){var n=a[t],r=n.type;c[r]&&o.emit(r,n.ev)}o.throttleTimer=0,o.emitThrottles.length=0}))}},s.prototype.emitEnd=function(t){var e=this,n=this.processEvent;Object.keys(n).forEach((function(r){e.emit("".concat(r,"end"),t),delete n[r]}))},s.prototype.pushEvent=function(t,e){for(var n=this.emitThrottles,r={type:t,ev:e},o=0,i=n.length;i>o;o++)if(n[o].type===t)return void n.splice(o,1,r);n.push(r)},s.prototype.clearPressTimeout=function(){this.pressTimeout&&(clearTimeout(this.pressTimeout),this.pressTimeout=null)},s.prototype.reset=function(){this.clearPressTimeout(),this.startTime=0,this.startDistance=0,this.direction=null,this.eventType=null,this.prevMoveTime=0,this.prevMovePoint=null,this.lastMoveTime=0,this.lastMovePoint=null},s}(e.exports)})); | ||
/*! | ||
* @antv/g-gesture | ||
* @description G Gesture | ||
* @version 3.0.12 | ||
* @date 10/23/2024, 7:16:52 AM | ||
* @author AntVis | ||
* @docs https://g.antv.antgroup.com/ | ||
*/ | ||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).G=t.G||{},t.G.Gesture=e())}(this,(function(){"use strict";var t={exports:{}};!function(t){var e=Object.prototype.hasOwnProperty,i="~";function n(){}function s(t,e,i){this.fn=t,this.context=e,this.once=i||!1}function r(t,e,n,r,o){if("function"!=typeof n)throw new TypeError("The listener must be a function");var h=new s(n,r||t,o),a=i?i+e:e;return t._events[a]?t._events[a].fn?t._events[a]=[t._events[a],h]:t._events[a].push(h):(t._events[a]=h,t._eventsCount++),t}function o(t,e){0==--t._eventsCount?t._events=new n:delete t._events[e]}function h(){this._events=new n,this._eventsCount=0}Object.create&&(n.prototype=Object.create(null),(new n).__proto__||(i=!1)),h.prototype.eventNames=function(){var t,n,s=[];if(0===this._eventsCount)return s;for(n in t=this._events)e.call(t,n)&&s.push(i?n.slice(1):n);return Object.getOwnPropertySymbols?s.concat(Object.getOwnPropertySymbols(t)):s},h.prototype.listeners=function(t){var e=this._events[i?i+t:t];if(!e)return[];if(e.fn)return[e.fn];for(var n=0,s=e.length,r=Array(s);s>n;n++)r[n]=e[n].fn;return r},h.prototype.listenerCount=function(t){var e=this._events[i?i+t:t];return e?e.fn?1:e.length:0},h.prototype.emit=function(t,e,n,s,r,o){var h=i?i+t:t;if(!this._events[h])return!1;var a,v,c=this._events[h],l=arguments.length;if(c.fn){switch(c.once&&this.removeListener(t,c.fn,void 0,!0),l){case 1:return c.fn.call(c.context),!0;case 2:return c.fn.call(c.context,e),!0;case 3:return c.fn.call(c.context,e,n),!0;case 4:return c.fn.call(c.context,e,n,s),!0;case 5:return c.fn.call(c.context,e,n,s,r),!0;case 6:return c.fn.call(c.context,e,n,s,r,o),!0}for(v=1,a=Array(l-1);l>v;v++)a[v-1]=arguments[v];c.fn.apply(c.context,a)}else{var p,f=c.length;for(v=0;f>v;v++)switch(c[v].once&&this.removeListener(t,c[v].fn,void 0,!0),l){case 1:c[v].fn.call(c[v].context);break;case 2:c[v].fn.call(c[v].context,e);break;case 3:c[v].fn.call(c[v].context,e,n);break;case 4:c[v].fn.call(c[v].context,e,n,s);break;default:if(!a)for(p=1,a=Array(l-1);l>p;p++)a[p-1]=arguments[p];c[v].fn.apply(c[v].context,a)}}return!0},h.prototype.on=function(t,e,i){return r(this,t,e,i,!1)},h.prototype.once=function(t,e,i){return r(this,t,e,i,!0)},h.prototype.removeListener=function(t,e,n,s){var r=i?i+t:t;if(!this._events[r])return this;if(!e)return o(this,r),this;var h=this._events[r];if(h.fn)h.fn!==e||s&&!h.once||n&&h.context!==n||o(this,r);else{for(var a=0,v=[],c=h.length;c>a;a++)(h[a].fn!==e||s&&!h[a].once||n&&h[a].context!==n)&&v.push(h[a]);v.length?this._events[r]=1===v.length?v[0]:v:o(this,r)}return this},h.prototype.removeAllListeners=function(t){var e;return t?this._events[e=i?i+t:t]&&o(this,e):(this._events=new n,this._eventsCount=0),this},h.prototype.off=h.prototype.removeListener,h.prototype.addListener=h.prototype.on,h.prefixed=i,h.EventEmitter=h,t.exports=h}(t);var e=t.exports,i="object"==typeof performance&&performance.now?performance:Date,n=(t,e)=>{var i=e.x-t.x,n=e.y-t.y;return Math.abs(i)>Math.abs(n)?i>0?"right":"left":n>0?"down":"up"},s=(t,e)=>{var i=Math.abs(e.x-t.x),n=Math.abs(e.y-t.y);return Math.sqrt(i*i+n*n)},r=(t,e)=>({x:t.x+(e.x-t.x)/2,y:t.y+(e.y-t.y)/2});return class extends e{constructor(t){super(),this.evCache=[],this.startPoints=[],this.processEvent={},this.throttleTimer=0,this.emitThrottles=[],this._start=t=>{this.reset(),this.startTime=i.now();var e=this.evCache,n=this.startPoints;t&&e.push({pointerId:t.pointerId,x:t.x,y:t.y,ev:t});n.length=e.length;for(var o=0;e.length>o;o++){var h=e[o];n[o]={x:h.x,y:h.y}}if(1!==n.length)this.startDistance=s(n[0],n[1]),this.center=r(n[0],n[1]);else{var a=e[0].ev;this.pressTimeout=setTimeout((()=>{var t="press",e="none";a.direction=e,a.deltaX=0,a.deltaY=0,a.points=n,this.emitStart(t,a),this.emit(t,a),this.eventType=t,this.direction=e}),250)}},this._move=t=>{this.clearPressTimeout();var e=this.startPoints,o=this.evCache;if(e.length){for(var h=t.x,a=t.y,v=t.pointerId,c=!1,l=0,p=o.length;p>l;l++)if(v===o[l].pointerId){o[l]={pointerId:v,x:h,y:a,ev:t},c=!0;break}if(!c)e.push({x:h,y:a}),o.push({pointerId:v,x:h,y:a,ev:t}),this.startDistance=s(e[0],e[1]),this.center=r(e[0],e[1]);var f={x:h,y:a},u=o.map((t=>({x:t.x,y:t.y}))),m=i.now();if(this.prevMoveTime=this.lastMoveTime,this.prevMovePoint=this.lastMovePoint,this.lastMoveTime=m,this.lastMovePoint=f,1===e.length){var d=e[0],y=h-d.x,x=a-d.y,_=this.direction||n(d,f);this.direction=_;var T=this.getEventType(f);return t.direction=_,t.deltaX=y,t.deltaY=x,t.points=u,this.emitStart(T,t),void this.emit(T,t)}var g=this.startDistance,b=s(u[0],u[1]);t.zoom=b/g,t.center=this.center,t.points=u,this.emitStart("pinch",t),this._throttleEmit("pinch",t)}},this._end=t=>{var e=this.evCache,r=this.startPoints,o=e.map((t=>({x:t.x,y:t.y})));if(t.points=o,this.emitEnd(t),1===e.length){var h=i.now(),a=this.lastMoveTime;if(100>h-a){var v=a-(this.prevMoveTime||this.startTime);if(v>0){var c=this.prevMovePoint||r[0],l=this.lastMovePoint||r[0],p=s(c,l)/v;p>.3&&(t.velocity=p,t.direction=n(c,l),this.emit("swipe",t))}}}for(var f=0,u=e.length;u>f;f++)if(e[f].pointerId===t.pointerId){e.splice(f,1),r.splice(f,1);break}this.reset(),e.length>0&&this._start()},this._cancel=t=>{var e=this.evCache.map((t=>({x:t.x,y:t.y})));t.points=e,this.emitEnd(t),this.evCache=[],this.reset()},this.el=t,this._initEvent()}_initEvent(){var t=this.el;t.addEventListener("pointerdown",this._start),t.addEventListener("pointermove",this._move),t.addEventListener("pointerup",this._end),t.addEventListener("pointercancel",this._cancel),t.addEventListener("pointerupoutside",this._end)}getEventType(t){var e,n=this.eventType,r=this.startTime,o=this.startPoints;if(n)return n;this._events.pan?e=i.now()-r>250&&10>s(o[0],t)?"press":"pan":e="press";return this.eventType=e,e}enable(t){this.processEvent[t]=!0}isProcess(t){return this.processEvent[t]}emitStart(t,e){this.isProcess(t)||(this.enable(t),this.emit("".concat(t,"start"),e))}_throttleEmit(t,e){var i,n;this.pushEvent(t,e);var s=this.el,r=this.emitThrottles,o=this.processEvent;if(!this.throttleTimer){var h=(null===(i=s.ownerDocument)||void 0===i?void 0:i.defaultView)||(null===(n=s.document)||void 0===n?void 0:n.defaultView);this.throttleTimer=h.requestAnimationFrame((()=>{for(var t=0,e=r.length;e>t;t++){var i=r[t],n=i.type;o[n]&&this.emit(n,i.ev)}this.throttleTimer=0,this.emitThrottles.length=0}))}}emitEnd(t){var e=this.processEvent;Object.keys(e).forEach((i=>{this.emit("".concat(i,"end"),t),delete e[i]}))}pushEvent(t,e){for(var i=this.emitThrottles,n={type:t,ev:e},s=0,r=i.length;r>s;s++)if(i[s].type===t)return void i.splice(s,1,n);i.push(n)}clearPressTimeout(){this.pressTimeout&&(clearTimeout(this.pressTimeout),this.pressTimeout=null)}reset(){this.clearPressTimeout(),this.startTime=0,this.startDistance=0,this.direction=null,this.eventType=null,this.prevMoveTime=0,this.prevMovePoint=null,this.lastMoveTime=0,this.lastMovePoint=null}}})); | ||
//# sourceMappingURL=index.umd.min.js.map |
{ | ||
"name": "@antv/g-gesture", | ||
"version": "3.0.11", | ||
"version": "3.0.12", | ||
"description": "G Gesture", | ||
@@ -21,3 +21,3 @@ "keywords": [ | ||
"exports": { | ||
"types": "./dist/index.d.ts", | ||
"types": "./types/index.d.ts", | ||
"import": "./dist/index.esm.js", | ||
@@ -29,6 +29,7 @@ "default": "./dist/index.js" | ||
"module": "dist/index.esm.js", | ||
"types": "dist/index.d.ts", | ||
"types": "types/index.d.ts", | ||
"files": [ | ||
"package.json", | ||
"dist", | ||
"types", | ||
"LICENSE", | ||
@@ -38,9 +39,10 @@ "README.md" | ||
"dependencies": { | ||
"@babel/runtime": "^7.25.6", | ||
"eventemitter3": "^5.0.1", | ||
"tslib": "^2.5.3", | ||
"@antv/g-lite": "2.1.0" | ||
"@antv/g-lite": "2.1.1" | ||
}, | ||
"devDependencies": { | ||
"@antv/g-mobile-canvas": "1.0.13", | ||
"@antv/g-mobile-canvas-element": "1.0.11" | ||
"@antv/g-mobile-canvas": "1.0.14", | ||
"@antv/g-mobile-canvas-element": "1.0.12" | ||
}, | ||
@@ -51,3 +53,4 @@ "publishConfig": { | ||
"scripts": { | ||
"build": "npm run clean && rollup -c", | ||
"build:types": "tsc --emitDeclarationOnly --noCheck", | ||
"build": "npm run clean && npm run build:types && rollup -c", | ||
"clean": "rimraf dist", | ||
@@ -54,0 +57,0 @@ "sync": "tnpm sync", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
118166
13
820
4
1
+ Added@babel/runtime@^7.25.6
+ Added@antv/g-lite@2.1.1(transitive)
+ Added@babel/runtime@7.25.9(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
- Removed@antv/g-lite@2.1.0(transitive)
Updated@antv/g-lite@2.1.1