@interactjs/inertia
Advanced tools
Comparing version 1.4.0-alpha.20 to 1.4.0-alpha.21
35
index.js
@@ -6,3 +6,3 @@ import modifiers from '@interactjs/modifiers/base'; | ||
const { interactions, defaults, } = scope; | ||
interactions.signals.on('new', function (interaction) { | ||
interactions.signals.on('new', (interaction) => { | ||
interaction.inertia = { | ||
@@ -14,6 +14,9 @@ active: false, | ||
upCoords: {}, | ||
xe: 0, ye: 0, | ||
sx: 0, sy: 0, | ||
xe: 0, | ||
ye: 0, | ||
sx: 0, | ||
sy: 0, | ||
t0: 0, | ||
vx0: 0, vys: 0, | ||
vx0: 0, | ||
vys: 0, | ||
duration: 0, | ||
@@ -25,5 +28,5 @@ lambda_v0: 0, | ||
}); | ||
interactions.signals.on('before-action-end', arg => release(arg, scope)); | ||
interactions.signals.on('down', arg => resume(arg, scope)); | ||
interactions.signals.on('stop', arg => stop(arg)); | ||
interactions.signals.on('before-action-end', (arg) => release(arg, scope)); | ||
interactions.signals.on('down', (arg) => resume(arg, scope)); | ||
interactions.signals.on('stop', (arg) => stop(arg)); | ||
defaults.perAction.inertia = { | ||
@@ -53,3 +56,3 @@ enabled: false, | ||
interaction.updatePointer(pointer, event, eventTarget, true); | ||
utils.pointer.setCoords(interaction.coords.cur, interaction.pointers.map(p => p.pointer)); | ||
utils.pointer.setCoords(interaction.coords.cur, interaction.pointers.map((p) => p.pointer)); | ||
// fire appropriate signals | ||
@@ -84,13 +87,13 @@ const signalArg = { | ||
// check if inertia should be started | ||
const inertiaPossible = (options && options.enabled | ||
&& interaction.prepared.name !== 'gesture' | ||
&& event !== state.startEvent); | ||
const inertia = (inertiaPossible | ||
&& (now - interaction.coords.cur.timeStamp) < 50 | ||
&& pointerSpeed > options.minSpeed | ||
&& pointerSpeed > options.endSpeed); | ||
const inertiaPossible = (options && options.enabled && | ||
interaction.prepared.name !== 'gesture' && | ||
event !== state.startEvent); | ||
const inertia = (inertiaPossible && | ||
(now - interaction.coords.cur.timeStamp) < 50 && | ||
pointerSpeed > options.minSpeed && | ||
pointerSpeed > options.endSpeed); | ||
const modifierArg = { | ||
interaction, | ||
pageCoords: utils.extend({}, interaction.coords.cur.page), | ||
states: inertiaPossible && interaction.modifiers.states.map(modifierStatus => utils.extend({}, modifierStatus)), | ||
states: inertiaPossible && interaction.modifiers.states.map((modifierStatus) => utils.extend({}, modifierStatus)), | ||
preEnd: true, | ||
@@ -97,0 +100,0 @@ requireEndOnly: true, |
271
index.ts
@@ -1,6 +0,6 @@ | ||
import modifiers from '@interactjs/modifiers/base'; | ||
import * as utils from '@interactjs/utils'; | ||
import raf from '@interactjs/utils/raf'; | ||
import modifiers from '@interactjs/modifiers/base' | ||
import * as utils from '@interactjs/utils' | ||
import raf from '@interactjs/utils/raf' | ||
type Scope = import('@interactjs/core/scope').Scope; | ||
type Scope = import ('@interactjs/core/scope').Scope | ||
@@ -11,5 +11,5 @@ function install (scope: Scope) { | ||
defaults, | ||
} = scope; | ||
} = scope | ||
interactions.signals.on('new', function (interaction) { | ||
interactions.signals.on('new', (interaction) => { | ||
interaction.inertia = { | ||
@@ -23,7 +23,10 @@ active : false, | ||
xe: 0, ye: 0, | ||
sx: 0, sy: 0, | ||
xe: 0, | ||
ye: 0, | ||
sx: 0, | ||
sy: 0, | ||
t0: 0, | ||
vx0: 0, vys: 0, | ||
vx0: 0, | ||
vys: 0, | ||
duration: 0, | ||
@@ -34,8 +37,8 @@ | ||
i : null, | ||
}; | ||
}); | ||
} | ||
}) | ||
interactions.signals.on('before-action-end', arg => release(arg, scope)); | ||
interactions.signals.on('down' , arg => resume (arg, scope)); | ||
interactions.signals.on('stop' , arg => stop (arg)); | ||
interactions.signals.on('before-action-end', (arg) => release(arg, scope)) | ||
interactions.signals.on('down', (arg) => resume(arg, scope)) | ||
interactions.signals.on('stop', (arg) => stop(arg)) | ||
@@ -49,28 +52,27 @@ defaults.perAction.inertia = { | ||
smoothEndDuration: 300, // animate to snap/restrict endOnly if there's no inertia | ||
}; | ||
} | ||
} | ||
function resume ({ interaction, event, pointer, eventTarget }, scope: Scope) { | ||
const state = interaction.inertia; | ||
const state = interaction.inertia | ||
// Check if the down event hits the current inertia target | ||
if (state.active) { | ||
let element = eventTarget; | ||
let element = eventTarget | ||
// climb up the DOM tree from the event target | ||
while (utils.is.element(element)) { | ||
// if interaction element is the current inertia target element | ||
if (element === interaction.element) { | ||
// stop inertia | ||
raf.cancel(state.i); | ||
state.active = false; | ||
interaction.simulation = null; | ||
raf.cancel(state.i) | ||
state.active = false | ||
interaction.simulation = null | ||
// update pointers to the down event's coordinates | ||
interaction.updatePointer(pointer, event, eventTarget, true); | ||
interaction.updatePointer(pointer, event, eventTarget, true) | ||
utils.pointer.setCoords( | ||
interaction.coords.cur, | ||
interaction.pointers.map(p => p.pointer) | ||
); | ||
interaction.pointers.map((p) => p.pointer) | ||
) | ||
@@ -80,17 +82,17 @@ // fire appropriate signals | ||
interaction, | ||
}; | ||
} | ||
scope.interactions.signals.fire('action-resume', signalArg); | ||
scope.interactions.signals.fire('action-resume', signalArg) | ||
// fire a reume event | ||
const resumeEvent = new scope.InteractEvent( | ||
interaction, event, interaction.prepared.name, 'resume', interaction.element); | ||
interaction, event, interaction.prepared.name, 'resume', interaction.element) | ||
interaction._fireEvent(resumeEvent); | ||
interaction._fireEvent(resumeEvent) | ||
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur); | ||
break; | ||
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur) | ||
break | ||
} | ||
element = utils.dom.parentNode(element); | ||
element = utils.dom.parentNode(element) | ||
} | ||
@@ -101,3 +103,3 @@ } | ||
function release ({ interaction, event, noPreEnd }, scope: Scope) { | ||
const state = interaction.inertia; | ||
const state = interaction.inertia | ||
@@ -107,23 +109,23 @@ if (!interaction.interacting() || | ||
noPreEnd) { | ||
return null; | ||
return null | ||
} | ||
const options = getOptions(interaction); | ||
const options = getOptions(interaction) | ||
const now = new Date().getTime(); | ||
const { client: velocityClient } = interaction.coords.velocity; | ||
const pointerSpeed = utils.hypot(velocityClient.x, velocityClient.y); | ||
const now = new Date().getTime() | ||
const { client: velocityClient } = interaction.coords.velocity | ||
const pointerSpeed = utils.hypot(velocityClient.x, velocityClient.y) | ||
let smoothEnd = false; | ||
let modifierResult; | ||
let smoothEnd = false | ||
let modifierResult | ||
// check if inertia should be started | ||
const inertiaPossible = (options && options.enabled | ||
&& interaction.prepared.name !== 'gesture' | ||
&& event !== state.startEvent); | ||
const inertiaPossible = (options && options.enabled && | ||
interaction.prepared.name !== 'gesture' && | ||
event !== state.startEvent) | ||
const inertia = (inertiaPossible | ||
&& (now - interaction.coords.cur.timeStamp) < 50 | ||
&& pointerSpeed > options.minSpeed | ||
&& pointerSpeed > options.endSpeed); | ||
const inertia = (inertiaPossible && | ||
(now - interaction.coords.cur.timeStamp) < 50 && | ||
pointerSpeed > options.minSpeed && | ||
pointerSpeed > options.endSpeed) | ||
@@ -134,71 +136,71 @@ const modifierArg = { | ||
states: inertiaPossible && interaction.modifiers.states.map( | ||
modifierStatus => utils.extend({}, modifierStatus) | ||
(modifierStatus) => utils.extend({}, modifierStatus) | ||
), | ||
preEnd: true, | ||
requireEndOnly: true, | ||
}; | ||
} | ||
// smoothEnd | ||
if (inertiaPossible && !inertia) { | ||
modifierResult = modifiers.setAll(modifierArg); | ||
modifierResult = modifiers.setAll(modifierArg) | ||
if (modifierResult.shouldMove) { | ||
smoothEnd = true; | ||
smoothEnd = true | ||
} | ||
} | ||
if (!(inertia || smoothEnd)) { return null; } | ||
if (!(inertia || smoothEnd)) { return null } | ||
utils.pointer.copyCoords(state.upCoords, interaction.coords.cur); | ||
utils.pointer.copyCoords(state.upCoords, interaction.coords.cur) | ||
interaction.pointers[0].pointer = state.startEvent = new scope.InteractEvent( | ||
interaction, event, interaction.prepared.name, 'inertiastart', interaction.element); | ||
interaction, event, interaction.prepared.name, 'inertiastart', interaction.element) | ||
state.t0 = now; | ||
state.t0 = now | ||
state.active = true; | ||
state.allowResume = options.allowResume; | ||
interaction.simulation = state; | ||
state.active = true | ||
state.allowResume = options.allowResume | ||
interaction.simulation = state | ||
interaction.target.fire(state.startEvent); | ||
interaction.target.fire(state.startEvent) | ||
if (inertia) { | ||
state.vx0 = interaction.coords.velocity.client.x; | ||
state.vy0 = interaction.coords.velocity.client.y; | ||
state.v0 = pointerSpeed; | ||
state.vx0 = interaction.coords.velocity.client.x | ||
state.vy0 = interaction.coords.velocity.client.y | ||
state.v0 = pointerSpeed | ||
calcInertia(interaction, state); | ||
calcInertia(interaction, state) | ||
utils.extend(modifierArg.pageCoords, interaction.coords.cur.page); | ||
utils.extend(modifierArg.pageCoords, interaction.coords.cur.page) | ||
modifierArg.pageCoords.x += state.xe; | ||
modifierArg.pageCoords.y += state.ye; | ||
modifierArg.pageCoords.x += state.xe | ||
modifierArg.pageCoords.y += state.ye | ||
modifierResult = modifiers.setAll(modifierArg); | ||
modifierResult = modifiers.setAll(modifierArg) | ||
state.modifiedXe += modifierResult.delta.x; | ||
state.modifiedYe += modifierResult.delta.y; | ||
state.modifiedXe += modifierResult.delta.x | ||
state.modifiedYe += modifierResult.delta.y | ||
state.i = raf.request(() => inertiaTick(interaction)); | ||
state.i = raf.request(() => inertiaTick(interaction)) | ||
} | ||
else { | ||
state.smoothEnd = true; | ||
state.xe = modifierResult.delta.x; | ||
state.ye = modifierResult.delta.y; | ||
state.smoothEnd = true | ||
state.xe = modifierResult.delta.x | ||
state.ye = modifierResult.delta.y | ||
state.sx = state.sy = 0; | ||
state.sx = state.sy = 0 | ||
state.i = raf.request(() => smothEndTick(interaction)); | ||
state.i = raf.request(() => smothEndTick(interaction)) | ||
} | ||
return false; | ||
return false | ||
} | ||
function stop ({ interaction }) { | ||
const state = interaction.inertia; | ||
const state = interaction.inertia | ||
if (state.active) { | ||
raf.cancel(state.i); | ||
state.active = false; | ||
interaction.simulation = null; | ||
raf.cancel(state.i) | ||
state.active = false | ||
interaction.simulation = null | ||
} | ||
@@ -208,36 +210,35 @@ } | ||
function calcInertia (interaction, state) { | ||
const options = getOptions(interaction); | ||
const lambda = options.resistance; | ||
const inertiaDur = -Math.log(options.endSpeed / state.v0) / lambda; | ||
const options = getOptions(interaction) | ||
const lambda = options.resistance | ||
const inertiaDur = -Math.log(options.endSpeed / state.v0) / lambda | ||
state.x0 = interaction.prevEvent.page.x; | ||
state.y0 = interaction.prevEvent.page.y; | ||
state.t0 = state.startEvent.timeStamp / 1000; | ||
state.sx = state.sy = 0; | ||
state.x0 = interaction.prevEvent.page.x | ||
state.y0 = interaction.prevEvent.page.y | ||
state.t0 = state.startEvent.timeStamp / 1000 | ||
state.sx = state.sy = 0 | ||
state.modifiedXe = state.xe = (state.vx0 - inertiaDur) / lambda; | ||
state.modifiedYe = state.ye = (state.vy0 - inertiaDur) / lambda; | ||
state.te = inertiaDur; | ||
state.modifiedXe = state.xe = (state.vx0 - inertiaDur) / lambda | ||
state.modifiedYe = state.ye = (state.vy0 - inertiaDur) / lambda | ||
state.te = inertiaDur | ||
state.lambda_v0 = lambda / state.v0; | ||
state.one_ve_v0 = 1 - options.endSpeed / state.v0; | ||
state.lambda_v0 = lambda / state.v0 | ||
state.one_ve_v0 = 1 - options.endSpeed / state.v0 | ||
} | ||
function inertiaTick (interaction) { | ||
updateInertiaCoords(interaction); | ||
utils.pointer.setCoordDeltas(interaction.coords.delta, interaction.coords.prev, interaction.coords.cur); | ||
utils.pointer.setCoordVelocity(interaction.coords.velocity, interaction.coords.delta); | ||
updateInertiaCoords(interaction) | ||
utils.pointer.setCoordDeltas(interaction.coords.delta, interaction.coords.prev, interaction.coords.cur) | ||
utils.pointer.setCoordVelocity(interaction.coords.velocity, interaction.coords.delta) | ||
const state = interaction.inertia; | ||
const options = getOptions(interaction); | ||
const lambda = options.resistance; | ||
const t = new Date().getTime() / 1000 - state.t0; | ||
const state = interaction.inertia | ||
const options = getOptions(interaction) | ||
const lambda = options.resistance | ||
const t = new Date().getTime() / 1000 - state.t0 | ||
if (t < state.te) { | ||
const progress = 1 - (Math.exp(-lambda * t) - state.lambda_v0) / state.one_ve_v0 | ||
const progress = 1 - (Math.exp(-lambda * t) - state.lambda_v0) / state.one_ve_v0; | ||
if (state.modifiedXe === state.xe && state.modifiedYe === state.ye) { | ||
state.sx = state.xe * progress; | ||
state.sy = state.ye * progress; | ||
state.sx = state.xe * progress | ||
state.sy = state.ye * progress | ||
} | ||
@@ -249,50 +250,50 @@ else { | ||
state.modifiedXe, state.modifiedYe, | ||
progress); | ||
progress) | ||
state.sx = quadPoint.x; | ||
state.sy = quadPoint.y; | ||
state.sx = quadPoint.x | ||
state.sy = quadPoint.y | ||
} | ||
interaction.move(); | ||
interaction.move() | ||
state.i = raf.request(() => inertiaTick(interaction)); | ||
state.i = raf.request(() => inertiaTick(interaction)) | ||
} | ||
else { | ||
state.sx = state.modifiedXe; | ||
state.sy = state.modifiedYe; | ||
state.sx = state.modifiedXe | ||
state.sy = state.modifiedYe | ||
interaction.move(); | ||
interaction.end(state.startEvent); | ||
state.active = false; | ||
interaction.simulation = null; | ||
interaction.move() | ||
interaction.end(state.startEvent) | ||
state.active = false | ||
interaction.simulation = null | ||
} | ||
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur); | ||
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur) | ||
} | ||
function smothEndTick (interaction) { | ||
updateInertiaCoords(interaction); | ||
updateInertiaCoords(interaction) | ||
const state = interaction.inertia; | ||
const t = new Date().getTime() - state.t0; | ||
const { smoothEndDuration: duration } = getOptions(interaction); | ||
const state = interaction.inertia | ||
const t = new Date().getTime() - state.t0 | ||
const { smoothEndDuration: duration } = getOptions(interaction) | ||
if (t < duration) { | ||
state.sx = utils.easeOutQuad(t, 0, state.xe, duration); | ||
state.sy = utils.easeOutQuad(t, 0, state.ye, duration); | ||
state.sx = utils.easeOutQuad(t, 0, state.xe, duration) | ||
state.sy = utils.easeOutQuad(t, 0, state.ye, duration) | ||
interaction.move(); | ||
interaction.move() | ||
state.i = raf.request(() => smothEndTick(interaction)); | ||
state.i = raf.request(() => smothEndTick(interaction)) | ||
} | ||
else { | ||
state.sx = state.xe; | ||
state.sy = state.ye; | ||
state.sx = state.xe | ||
state.sy = state.ye | ||
interaction.move(); | ||
interaction.end(state.startEvent); | ||
interaction.move() | ||
interaction.end(state.startEvent) | ||
state.smoothEnd = | ||
state.active = false; | ||
interaction.simulation = null; | ||
state.active = false | ||
interaction.simulation = null | ||
} | ||
@@ -302,9 +303,9 @@ } | ||
function updateInertiaCoords (interaction) { | ||
const state = interaction.inertia; | ||
const state = interaction.inertia | ||
// return if inertia isn't running | ||
if (!state.active) { return; } | ||
if (!state.active) { return } | ||
const pageUp = state.upCoords.page; | ||
const clientUp = state.upCoords.client; | ||
const pageUp = state.upCoords.page | ||
const clientUp = state.upCoords.client | ||
@@ -316,7 +317,7 @@ utils.pointer.setCoords(interaction.coords.cur, [ { | ||
clientY: clientUp.y + state.sy, | ||
} ]); | ||
} ]) | ||
} | ||
function getOptions ({ target, prepared }) { | ||
return target && target.options && prepared.name && target.options[prepared.name].inertia; | ||
return target && target.options && prepared.name && target.options[prepared.name].inertia | ||
} | ||
@@ -330,2 +331,2 @@ | ||
updateInertiaCoords, | ||
}; | ||
} |
{ | ||
"name": "@interactjs/inertia", | ||
"version": "1.4.0-alpha.20+sha.ce0da21", | ||
"version": "1.4.0-alpha.21+sha.cdc1d5f", | ||
"peerDependencies": { | ||
"@interactjs/modifiers": "1.4.0-alpha.20+sha.ce0da21", | ||
"@interactjs/utils": "1.4.0-alpha.20+sha.ce0da21" | ||
"@interactjs/modifiers": "1.4.0-alpha.21+sha.cdc1d5f", | ||
"@interactjs/utils": "1.4.0-alpha.21+sha.cdc1d5f" | ||
}, | ||
"devDependencies": { | ||
"@interactjs/_dev": "1.4.0-alpha.20+sha.ce0da21", | ||
"@interactjs/modifiers": "1.4.0-alpha.20+sha.ce0da21", | ||
"@interactjs/utils": "1.4.0-alpha.20+sha.ce0da21" | ||
"@interactjs/_dev": "1.4.0-alpha.21+sha.cdc1d5f", | ||
"@interactjs/modifiers": "1.4.0-alpha.21+sha.cdc1d5f", | ||
"@interactjs/utils": "1.4.0-alpha.21+sha.cdc1d5f" | ||
}, | ||
@@ -13,0 +13,0 @@ "publishConfig": { |
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
495
29652
6