@ajiu9/gesture
Advanced tools
Comparing version 1.0.3-beta.6 to 1.0.3-beta.7
@@ -1,247 +0,1 @@ | ||
'use strict'; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
class Listener { | ||
constructor(element, recognizer) { | ||
let isListeningMouse = false; | ||
const contexts = new Map(); | ||
// PC mousemove and mouseup event | ||
// Event listen in document.documentElement | ||
const el = document.documentElement; | ||
element.addEventListener('mousedown', (event) => { | ||
const context = Object.create(null); | ||
// 移位做为key | ||
contexts.set(`mouse${1 << event.button}`, context); | ||
recognizer.start(event, context); | ||
const mouseMove = (event) => { | ||
// mousemove中event.button may not exist | ||
// get event.buttons 0b00001 | ||
let button = 1; | ||
while (button <= event.buttons) { | ||
if (button & event.buttons) { | ||
// order of buttons & button property is not same | ||
let key; | ||
if (button === 2) | ||
key = 4; | ||
else if (button === 4) | ||
key = 2; | ||
else | ||
key = button; | ||
const context = contexts.get(`mouse${key}`); | ||
recognizer.move(event, context); | ||
} | ||
button = button << 1; | ||
} | ||
}; | ||
const mouseup = (event) => { | ||
const context = contexts.get(`mouse${1 << event.button}`); | ||
recognizer.end(event, context); | ||
contexts.delete(`mouse${1 << event.button}`); | ||
if (event.buttons === 0) { | ||
el.removeEventListener('mousemove', mouseMove); | ||
el.removeEventListener('mouseup', mouseup); | ||
isListeningMouse = false; | ||
} | ||
}; | ||
if (!isListeningMouse) { | ||
el.addEventListener('mousemove', mouseMove); | ||
el.addEventListener('mouseup', mouseup); | ||
isListeningMouse = true; | ||
} | ||
}); | ||
// touchstart touchmove on an element | ||
element.addEventListener('touchstart', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = Object.create(null); | ||
contexts.set(touch.identifier, context); | ||
recognizer.start(touch, context); | ||
} | ||
}); | ||
element.addEventListener('touchmove', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = contexts.get(touch.identifier); | ||
// prevent event for example drop down event | ||
// item can interrupt touchmove | ||
event.preventDefault(); | ||
recognizer.move(touch, context); | ||
} | ||
}); | ||
element.addEventListener('touchend', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = contexts.get(touch.identifier); | ||
recognizer.end(touch, context); | ||
contexts.delete(touch.identifier); | ||
} | ||
}); | ||
element.addEventListener('touchcancel', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = contexts.get(touch.identifier); | ||
recognizer.cancel(touch, context); | ||
contexts.delete(touch.identifier); | ||
} | ||
}); | ||
} | ||
} | ||
class Recognizer { | ||
constructor(dispatcher) { | ||
this.dispatcher = dispatcher; | ||
} | ||
start(point, context) { | ||
context.startX = point.clientX; | ||
context.startY = point.clientY; | ||
this.dispatcher.dispatch('start', { | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
}); | ||
context.points = [{ | ||
t: Date.now(), | ||
x: point.clientX, | ||
y: point.clientY, | ||
}]; | ||
context.isTap = true; | ||
context.isPan = false; | ||
context.isPress = false; | ||
context.handler = setTimeout(() => { | ||
context.isTap = false; | ||
context.isPan = false; | ||
context.isPress = true; | ||
context.handler = null; | ||
this.dispatcher.dispatch('press', {}); | ||
}, 500); | ||
} | ||
move(point, context) { | ||
const dx = point.clientX - context.startX; | ||
const dy = point.clientY - context.startY; | ||
if (!context.isPan && dx ** 2 + dy ** 2 > 100) { | ||
context.isPan = true; | ||
context.isTap = false; | ||
context.isPress = false; | ||
context.isVertical = Math.abs(dx) - Math.abs(dy) >= 0; | ||
clearTimeout(context.handler); | ||
this.dispatcher.dispatch('panStart', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
}); | ||
} | ||
if (context.isPan) { | ||
this.dispatcher.dispatch('pan', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
}); | ||
} | ||
context.points = context.points.filter(point => Date.now() - point.t < 500); | ||
context.points.push({ | ||
t: Date.now(), | ||
x: point.clientX, | ||
y: point.clientY, | ||
}); | ||
} | ||
end(point, context) { | ||
if (context.isTap) { | ||
this.dispatcher.dispatch('tap', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
}); | ||
clearTimeout(context.handler); | ||
} | ||
if (context.isPress) | ||
this.dispatcher.dispatch('pressEnd', {}); | ||
context.points = context.points.filter(point => Date.now() - point.t < 500); | ||
let v = 0; | ||
if (context.points.length) { | ||
const d = Math.sqrt((point.clientX - context.points[0].x) ** 2 + (point.clientY - context.points[0].y) ** 2); | ||
v = d / (Date.now() - context.points[0].t); | ||
} | ||
if (v > 1.5) { | ||
context.isFlick = true; | ||
this.dispatcher.dispatch('flick', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
isFlick: context.isFlick, | ||
velocity: v, | ||
}); | ||
} | ||
else { | ||
context.isFlick = false; | ||
} | ||
if (context.isPan) { | ||
this.dispatcher.dispatch('panEnd', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
isFlick: context.isFlick, | ||
velocity: v, | ||
}); | ||
} | ||
this.dispatcher.dispatch('end', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
isFlick: context.isFlick, | ||
isPan: context.isPan, | ||
velocity: v, | ||
}); | ||
} | ||
cancel = (point, context) => { | ||
clearTimeout(context.handler); | ||
this.dispatcher.dispatch('cancel', {}); | ||
} | ||
} | ||
class Dispatcher { | ||
constructor(element) { | ||
this.element = element; | ||
} | ||
dispatch(type, properties) { | ||
const event = new Event(type); | ||
for (const name in properties) | ||
event[name] = properties[name]; | ||
this.element.dispatchEvent(event); | ||
} | ||
} | ||
function enableGesture(element) { | ||
// eslint-disable-next-line no-new | ||
new Listener(element, new Recognizer(new Dispatcher(element))); | ||
} | ||
exports.Dispatcher = Dispatcher; | ||
exports.Listener = Listener; | ||
exports.Recognizer = Recognizer; | ||
exports.enableGesture = enableGesture; | ||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class t{constructor(t,e){let s=!1;const i=new Map,n=document.documentElement;t.addEventListener("mousedown",(t=>{const c=Object.create(null);i.set("mouse"+(1<<t.button),c),e.start(t,c);const a=t=>{let s=1;for(;s<=t.buttons;){if(s&t.buttons){let n;n=2===s?4:4===s?2:s;const c=i.get(`mouse${n}`);e.move(t,c)}s<<=1}},r=t=>{const c=i.get("mouse"+(1<<t.button));e.end(t,c),i.delete("mouse"+(1<<t.button)),0===t.buttons&&(n.removeEventListener("mousemove",a),n.removeEventListener("mouseup",r),s=!1)};s||(n.addEventListener("mousemove",a),n.addEventListener("mouseup",r),s=!0)})),t.addEventListener("touchstart",(t=>{for(const s of t.changedTouches){const t=Object.create(null);i.set(s.identifier,t),e.start(s,t)}})),t.addEventListener("touchmove",(t=>{for(const s of t.changedTouches){const n=i.get(s.identifier);t.preventDefault(),e.move(s,n)}})),t.addEventListener("touchend",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.end(s,t),i.delete(s.identifier)}})),t.addEventListener("touchcancel",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.cancel(s,t),i.delete(s.identifier)}}))}}class e{constructor(t){this.dispatcher=t}start(t,e){e.startX=t.clientX,e.startY=t.clientY,this.dispatcher.dispatch("start",{clientX:t.clientX,clientY:t.clientY}),e.points=[{t:Date.now(),x:t.clientX,y:t.clientY}],e.isTap=!0,e.isPan=!1,e.isPress=!1,e.handler=setTimeout((()=>{e.isTap=!1,e.isPan=!1,e.isPress=!0,e.handler=null,this.dispatcher.dispatch("press",{})}),500)}move(t,e){const s=t.clientX-e.startX,i=t.clientY-e.startY;!e.isPan&&s**2+i**2>100&&(e.isPan=!0,e.isTap=!1,e.isPress=!1,e.isVertical=Math.abs(s)-Math.abs(i)>=0,clearTimeout(e.handler),this.dispatcher.dispatch("panStart",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical})),e.isPan&&this.dispatcher.dispatch("pan",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical}),e.points=e.points.filter((t=>Date.now()-t.t<500)),e.points.push({t:Date.now(),x:t.clientX,y:t.clientY})}end(t,e){e.isTap&&(this.dispatcher.dispatch("tap",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY}),clearTimeout(e.handler)),e.isPress&&this.dispatcher.dispatch("pressEnd",{}),e.points=e.points.filter((t=>Date.now()-t.t<500));let s=0;if(e.points.length){s=Math.sqrt((t.clientX-e.points[0].x)**2+(t.clientY-e.points[0].y)**2)/(Date.now()-e.points[0].t)}s>1.5?(e.isFlick=!0,this.dispatcher.dispatch("flick",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s})):e.isFlick=!1,e.isPan&&this.dispatcher.dispatch("panEnd",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s}),this.dispatcher.dispatch("end",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,isPan:e.isPan,velocity:s})}cancel=(t,e)=>{clearTimeout(e.handler),this.dispatcher.dispatch("cancel",{})}}class s{constructor(t){this.element=t}dispatch(t,e){const s=new Event(t);for(const i in e)s[i]=e[i];this.element.dispatchEvent(s)}}exports.Dispatcher=s,exports.Listener=t,exports.Recognizer=e,exports.enableGesture=function(i){new t(i,new e(new s(i)))}; |
@@ -1,240 +0,1 @@ | ||
class Listener { | ||
constructor(element, recognizer) { | ||
let isListeningMouse = false; | ||
const contexts = new Map(); | ||
// PC mousemove and mouseup event | ||
// Event listen in document.documentElement | ||
const el = document.documentElement; | ||
element.addEventListener('mousedown', (event) => { | ||
const context = Object.create(null); | ||
// 移位做为key | ||
contexts.set(`mouse${1 << event.button}`, context); | ||
recognizer.start(event, context); | ||
const mouseMove = (event) => { | ||
// mousemove中event.button may not exist | ||
// get event.buttons 0b00001 | ||
let button = 1; | ||
while (button <= event.buttons) { | ||
if (button & event.buttons) { | ||
// order of buttons & button property is not same | ||
let key; | ||
if (button === 2) | ||
key = 4; | ||
else if (button === 4) | ||
key = 2; | ||
else | ||
key = button; | ||
const context = contexts.get(`mouse${key}`); | ||
recognizer.move(event, context); | ||
} | ||
button = button << 1; | ||
} | ||
}; | ||
const mouseup = (event) => { | ||
const context = contexts.get(`mouse${1 << event.button}`); | ||
recognizer.end(event, context); | ||
contexts.delete(`mouse${1 << event.button}`); | ||
if (event.buttons === 0) { | ||
el.removeEventListener('mousemove', mouseMove); | ||
el.removeEventListener('mouseup', mouseup); | ||
isListeningMouse = false; | ||
} | ||
}; | ||
if (!isListeningMouse) { | ||
el.addEventListener('mousemove', mouseMove); | ||
el.addEventListener('mouseup', mouseup); | ||
isListeningMouse = true; | ||
} | ||
}); | ||
// touchstart touchmove on an element | ||
element.addEventListener('touchstart', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = Object.create(null); | ||
contexts.set(touch.identifier, context); | ||
recognizer.start(touch, context); | ||
} | ||
}); | ||
element.addEventListener('touchmove', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = contexts.get(touch.identifier); | ||
// prevent event for example drop down event | ||
// item can interrupt touchmove | ||
event.preventDefault(); | ||
recognizer.move(touch, context); | ||
} | ||
}); | ||
element.addEventListener('touchend', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = contexts.get(touch.identifier); | ||
recognizer.end(touch, context); | ||
contexts.delete(touch.identifier); | ||
} | ||
}); | ||
element.addEventListener('touchcancel', (event) => { | ||
for (const touch of event.changedTouches) { | ||
const context = contexts.get(touch.identifier); | ||
recognizer.cancel(touch, context); | ||
contexts.delete(touch.identifier); | ||
} | ||
}); | ||
} | ||
} | ||
class Recognizer { | ||
constructor(dispatcher) { | ||
this.dispatcher = dispatcher; | ||
} | ||
start(point, context) { | ||
context.startX = point.clientX; | ||
context.startY = point.clientY; | ||
this.dispatcher.dispatch('start', { | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
}); | ||
context.points = [{ | ||
t: Date.now(), | ||
x: point.clientX, | ||
y: point.clientY, | ||
}]; | ||
context.isTap = true; | ||
context.isPan = false; | ||
context.isPress = false; | ||
context.handler = setTimeout(() => { | ||
context.isTap = false; | ||
context.isPan = false; | ||
context.isPress = true; | ||
context.handler = null; | ||
this.dispatcher.dispatch('press', {}); | ||
}, 500); | ||
} | ||
move(point, context) { | ||
const dx = point.clientX - context.startX; | ||
const dy = point.clientY - context.startY; | ||
if (!context.isPan && dx ** 2 + dy ** 2 > 100) { | ||
context.isPan = true; | ||
context.isTap = false; | ||
context.isPress = false; | ||
context.isVertical = Math.abs(dx) - Math.abs(dy) >= 0; | ||
clearTimeout(context.handler); | ||
this.dispatcher.dispatch('panStart', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
}); | ||
} | ||
if (context.isPan) { | ||
this.dispatcher.dispatch('pan', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
}); | ||
} | ||
context.points = context.points.filter(point => Date.now() - point.t < 500); | ||
context.points.push({ | ||
t: Date.now(), | ||
x: point.clientX, | ||
y: point.clientY, | ||
}); | ||
} | ||
end(point, context) { | ||
if (context.isTap) { | ||
this.dispatcher.dispatch('tap', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
}); | ||
clearTimeout(context.handler); | ||
} | ||
if (context.isPress) | ||
this.dispatcher.dispatch('pressEnd', {}); | ||
context.points = context.points.filter(point => Date.now() - point.t < 500); | ||
let v = 0; | ||
if (context.points.length) { | ||
const d = Math.sqrt((point.clientX - context.points[0].x) ** 2 + (point.clientY - context.points[0].y) ** 2); | ||
v = d / (Date.now() - context.points[0].t); | ||
} | ||
if (v > 1.5) { | ||
context.isFlick = true; | ||
this.dispatcher.dispatch('flick', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
isFlick: context.isFlick, | ||
velocity: v, | ||
}); | ||
} | ||
else { | ||
context.isFlick = false; | ||
} | ||
if (context.isPan) { | ||
this.dispatcher.dispatch('panEnd', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
isFlick: context.isFlick, | ||
velocity: v, | ||
}); | ||
} | ||
this.dispatcher.dispatch('end', { | ||
startX: context.startX, | ||
startY: context.startY, | ||
clientX: point.clientX, | ||
clientY: point.clientY, | ||
isVertical: context.isVertical, | ||
isFlick: context.isFlick, | ||
isPan: context.isPan, | ||
velocity: v, | ||
}); | ||
} | ||
cancel = (point, context) => { | ||
clearTimeout(context.handler); | ||
this.dispatcher.dispatch('cancel', {}); | ||
} | ||
} | ||
class Dispatcher { | ||
constructor(element) { | ||
this.element = element; | ||
} | ||
dispatch(type, properties) { | ||
const event = new Event(type); | ||
for (const name in properties) | ||
event[name] = properties[name]; | ||
this.element.dispatchEvent(event); | ||
} | ||
} | ||
function enableGesture(element) { | ||
// eslint-disable-next-line no-new | ||
new Listener(element, new Recognizer(new Dispatcher(element))); | ||
} | ||
export { Dispatcher, Listener, Recognizer, enableGesture }; | ||
class t{constructor(t,e){let s=!1;const i=new Map,n=document.documentElement;t.addEventListener("mousedown",(t=>{const c=Object.create(null);i.set("mouse"+(1<<t.button),c),e.start(t,c);const a=t=>{let s=1;for(;s<=t.buttons;){if(s&t.buttons){let n;n=2===s?4:4===s?2:s;const c=i.get(`mouse${n}`);e.move(t,c)}s<<=1}},r=t=>{const c=i.get("mouse"+(1<<t.button));e.end(t,c),i.delete("mouse"+(1<<t.button)),0===t.buttons&&(n.removeEventListener("mousemove",a),n.removeEventListener("mouseup",r),s=!1)};s||(n.addEventListener("mousemove",a),n.addEventListener("mouseup",r),s=!0)})),t.addEventListener("touchstart",(t=>{for(const s of t.changedTouches){const t=Object.create(null);i.set(s.identifier,t),e.start(s,t)}})),t.addEventListener("touchmove",(t=>{for(const s of t.changedTouches){const n=i.get(s.identifier);t.preventDefault(),e.move(s,n)}})),t.addEventListener("touchend",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.end(s,t),i.delete(s.identifier)}})),t.addEventListener("touchcancel",(t=>{for(const s of t.changedTouches){const t=i.get(s.identifier);e.cancel(s,t),i.delete(s.identifier)}}))}}class e{constructor(t){this.dispatcher=t}start(t,e){e.startX=t.clientX,e.startY=t.clientY,this.dispatcher.dispatch("start",{clientX:t.clientX,clientY:t.clientY}),e.points=[{t:Date.now(),x:t.clientX,y:t.clientY}],e.isTap=!0,e.isPan=!1,e.isPress=!1,e.handler=setTimeout((()=>{e.isTap=!1,e.isPan=!1,e.isPress=!0,e.handler=null,this.dispatcher.dispatch("press",{})}),500)}move(t,e){const s=t.clientX-e.startX,i=t.clientY-e.startY;!e.isPan&&s**2+i**2>100&&(e.isPan=!0,e.isTap=!1,e.isPress=!1,e.isVertical=Math.abs(s)-Math.abs(i)>=0,clearTimeout(e.handler),this.dispatcher.dispatch("panStart",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical})),e.isPan&&this.dispatcher.dispatch("pan",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical}),e.points=e.points.filter((t=>Date.now()-t.t<500)),e.points.push({t:Date.now(),x:t.clientX,y:t.clientY})}end(t,e){e.isTap&&(this.dispatcher.dispatch("tap",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY}),clearTimeout(e.handler)),e.isPress&&this.dispatcher.dispatch("pressEnd",{}),e.points=e.points.filter((t=>Date.now()-t.t<500));let s=0;if(e.points.length){s=Math.sqrt((t.clientX-e.points[0].x)**2+(t.clientY-e.points[0].y)**2)/(Date.now()-e.points[0].t)}s>1.5?(e.isFlick=!0,this.dispatcher.dispatch("flick",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s})):e.isFlick=!1,e.isPan&&this.dispatcher.dispatch("panEnd",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,velocity:s}),this.dispatcher.dispatch("end",{startX:e.startX,startY:e.startY,clientX:t.clientX,clientY:t.clientY,isVertical:e.isVertical,isFlick:e.isFlick,isPan:e.isPan,velocity:s})}cancel=(t,e)=>{clearTimeout(e.handler),this.dispatcher.dispatch("cancel",{})}}class s{constructor(t){this.element=t}dispatch(t,e){const s=new Event(t);for(const i in e)s[i]=e[i];this.element.dispatchEvent(s)}}function i(i){new t(i,new e(new s(i)))}export{s as Dispatcher,t as Listener,e as Recognizer,i as enableGesture}; |
{ | ||
"name": "@ajiu9/gesture", | ||
"version": "1.0.3-beta.6", | ||
"version": "1.0.3-beta.7", | ||
"description": "", | ||
@@ -5,0 +5,0 @@ "author": "ajiu9 <615944323@qq.com> (https://github.com/ajiu9/)", |
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
8284
28
1