Socket
Socket
Sign inDemoInstall

@interactjs/inertia

Package Overview
Dependencies
Maintainers
2
Versions
137
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@interactjs/inertia - npm Package Compare versions

Comparing version 1.8.4 to 1.8.5

75

index.d.ts

@@ -1,6 +0,7 @@

import { EventPhase } from '@interactjs/core/InteractEvent';
import * as modifiers from '@interactjs/modifiers/base';
import Modification from '@interactjs/modifiers/Modification';
declare module '@interactjs/core/InteractEvent' {
enum EventPhase {
Resume = "resume",
InertiaStart = "inertiastart"
interface PhaseMap {
resume?: true;
inertiastart?: true;
}

@@ -10,28 +11,3 @@ }

interface Interaction {
inertia?: {
active: boolean;
smoothEnd: boolean;
allowResume: boolean;
startEvent?: Interact.InteractEvent;
upCoords: {
page: Interact.Point;
client: Interact.Point;
timeStamp: number;
};
xe?: number;
ye?: number;
sx?: number;
sy?: number;
t0?: number;
te?: number;
v0?: number;
vx0?: number;
vy0?: number;
duration?: number;
modifiedXe?: number;
modifiedYe?: number;
lambda_v0?: number;
one_ve_v0?: number;
timeout: any;
};
inertia?: InertiaState;
}

@@ -53,9 +29,40 @@ }

interface SignalArgs {
'interactions:action-resume': {
interaction: Interact.Interaction;
phase: EventPhase.Resume;
};
'interactions:before-action-inertiastart': Omit<Interact.DoPhaseArg<Interact.ActionName, 'inertiastart'>, 'iEvent'>;
'interactions:action-inertiastart': Interact.DoPhaseArg<Interact.ActionName, 'inertiastart'>;
'interactions:after-action-inertiastart': Interact.DoPhaseArg<Interact.ActionName, 'inertiastart'>;
'interactions:before-action-resume': Omit<Interact.DoPhaseArg<Interact.ActionName, 'resume'>, 'iEvent'>;
'interactions:action-resume': Interact.DoPhaseArg<Interact.ActionName, 'resume'>;
'interactions:after-action-resume': Interact.DoPhaseArg<Interact.ActionName, 'resume'>;
}
}
export declare class InertiaState {
private readonly interaction;
active: boolean;
isModified: boolean;
smoothEnd: boolean;
allowResume: boolean;
modification: Modification;
modifierCount: number;
modifierArg: modifiers.ModifierArg;
startCoords: Interact.Point;
t0: number;
v0: number;
te: number;
targetOffset: Interact.Point;
modifiedOffset: Interact.Point;
currentOffset: Interact.Point;
lambda_v0?: number;
one_ve_v0?: number;
timeout: number;
constructor(interaction: Interact.Interaction);
start(event: Interact.PointerEventType): boolean;
startInertia(): void;
startSmoothEnd(): void;
inertiaTick(): void;
smoothEndTick(): void;
resume({ pointer, event, eventTarget }: Interact.SignalArgs['interactions:down']): void;
end(): void;
stop(): void;
}
declare const inertia: Interact.Plugin;
export default inertia;

@@ -1,7 +0,11 @@

import { EventPhase } from "../core/InteractEvent.js";
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import * as modifiers from "../modifiers/base.js";
import * as utils from "../utils/index.js";
import Modification from "../modifiers/Modification.js";
import offset from "../offset/index.js";
import * as dom from "../utils/domUtils.js";
import hypot from "../utils/hypot.js";
import * as is from "../utils/is.js";
import { copyCoords } from "../utils/pointerUtils.js";
import raf from "../utils/raf.js";
EventPhase.Resume = 'resume';
EventPhase.InertiaStart = 'inertiastart';

@@ -12,3 +16,6 @@ function install(scope) {

} = scope;
scope.usePlugin(offset);
scope.usePlugin(modifiers.default);
scope.actions.phases.inertiastart = true;
scope.actions.phases.resume = true;
defaults.perAction.inertia = {

@@ -29,227 +36,291 @@ enabled: false,

function resume({
interaction,
event,
pointer,
eventTarget
}, scope) {
const state = interaction.inertia; // Check if the down event hits the current inertia target
export class InertiaState {
// eslint-disable-line camelcase
// eslint-disable-line camelcase
constructor(interaction) {
this.interaction = interaction;
if (state.active) {
let element = eventTarget; // climb up the DOM tree from the event target
_defineProperty(this, "active", false);
while (utils.is.element(element)) {
// if interaction element is the current inertia target element
if (element === interaction.element) {
// stop inertia
raf.cancel(state.timeout);
state.active = false;
interaction.simulation = null; // update pointers to the down event's coordinates
_defineProperty(this, "isModified", false);
interaction.updatePointer(pointer, event, eventTarget, true);
utils.pointer.setCoords(interaction.coords.cur, interaction.pointers.map(p => p.pointer), interaction._now()); // fire appropriate signals
_defineProperty(this, "smoothEnd", false);
const signalArg = {
interaction,
phase: EventPhase.Resume
};
scope.fire('interactions:action-resume', signalArg); // fire a reume event
_defineProperty(this, "allowResume", false);
const resumeEvent = new scope.InteractEvent(interaction, event, interaction.prepared.name, EventPhase.Resume, interaction.element);
_defineProperty(this, "modification", null);
interaction._fireEvent(resumeEvent);
_defineProperty(this, "modifierCount", 0);
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur);
break;
}
_defineProperty(this, "modifierArg", null);
element = utils.dom.parentNode(element);
}
}
}
_defineProperty(this, "startCoords", null);
function release({
interaction,
event,
noPreEnd
}, scope) {
const state = interaction.inertia;
_defineProperty(this, "t0", 0);
if (!interaction.interacting() || interaction.simulation && interaction.simulation.active || noPreEnd) {
return null;
}
_defineProperty(this, "v0", 0);
const options = getOptions(interaction);
_defineProperty(this, "te", 0);
const now = interaction._now();
_defineProperty(this, "targetOffset", null);
const {
client: velocityClient
} = interaction.coords.velocity;
const pointerSpeed = utils.hypot(velocityClient.x, velocityClient.y);
let smoothEnd = false;
let modifierResult; // check if inertia should be started
_defineProperty(this, "modifiedOffset", null);
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,
interactable: interaction.interactable,
element: interaction.element,
rect: interaction.rect,
edges: interaction.edges,
pageCoords: interaction.coords.cur.page,
states: inertiaPossible && interaction.modifiers.states.map(modifierState => utils.extend({}, modifierState)),
preEnd: true,
prevCoords: null,
prevRect: null,
requireEndOnly: null,
phase: EventPhase.InertiaStart
}; // smoothEnd
_defineProperty(this, "currentOffset", null);
if (inertiaPossible && !inertia) {
modifierArg.prevCoords = interaction.modifiers.result.coords;
modifierArg.prevRect = interaction.modifiers.result.rect;
modifierArg.requireEndOnly = false;
modifierResult = modifiers.setAll(modifierArg);
smoothEnd = modifierResult.changed;
}
_defineProperty(this, "lambda_v0", 0);
if (!(inertia || smoothEnd)) {
return null;
_defineProperty(this, "one_ve_v0", 0);
_defineProperty(this, "timeout", null);
}
utils.pointer.copyCoords(state.upCoords, interaction.coords.cur);
modifiers.setCoords(modifierArg);
interaction.pointers[0].pointer = state.startEvent = new scope.InteractEvent(interaction, event, // FIXME add proper typing Action.name
interaction.prepared.name, EventPhase.InertiaStart, interaction.element);
modifiers.restoreCoords(modifierArg);
state.t0 = now;
state.active = true;
state.allowResume = options.allowResume;
interaction.simulation = state;
interaction.interactable.fire(state.startEvent);
start(event) {
const {
interaction
} = this;
const options = getOptions(interaction);
if (inertia) {
state.vx0 = interaction.coords.velocity.client.x;
state.vy0 = interaction.coords.velocity.client.y;
state.v0 = pointerSpeed;
calcInertia(interaction, state);
utils.extend(modifierArg.pageCoords, interaction.coords.cur.page);
modifierArg.pageCoords.x += state.xe;
modifierArg.pageCoords.y += state.ye;
modifierArg.prevCoords = null;
modifierArg.prevRect = null;
modifierArg.requireEndOnly = true;
modifierResult = modifiers.setAll(modifierArg);
state.modifiedXe += modifierResult.delta.x;
state.modifiedYe += modifierResult.delta.y;
state.timeout = raf.request(() => inertiaTick(interaction));
} else {
state.smoothEnd = true;
state.xe = modifierResult.delta.x;
state.ye = modifierResult.delta.y;
state.sx = state.sy = 0;
state.timeout = raf.request(() => smothEndTick(interaction));
if (!options || !options.enabled) {
return false;
}
const {
client: velocityClient
} = interaction.coords.velocity;
const pointerSpeed = hypot(velocityClient.x, velocityClient.y);
const modification = this.modification || (this.modification = new Modification(interaction));
modification.copyFrom(interaction.modification);
this.t0 = interaction._now();
this.allowResume = options.allowResume;
this.v0 = pointerSpeed;
this.currentOffset = {
x: 0,
y: 0
};
this.startCoords = interaction.coords.cur.page;
this.modifierArg = {
interaction,
interactable: interaction.interactable,
element: interaction.element,
rect: interaction.rect,
edges: interaction.edges,
pageCoords: this.startCoords,
preEnd: true,
phase: 'inertiastart'
};
const thrown = this.t0 - interaction.coords.cur.timeStamp < 50 && pointerSpeed > options.minSpeed && pointerSpeed > options.endSpeed;
if (thrown) {
this.startInertia();
} else {
modification.result = modification.setAll(this.modifierArg);
if (!modification.result.changed) {
return false;
}
this.startSmoothEnd();
} // force modification change
interaction.modification.result.rect = null; // bring inertiastart event to the target coords
interaction.offsetBy(this.targetOffset);
interaction._doPhase({
interaction,
event,
phase: 'inertiastart'
});
interaction.offsetBy({
x: -this.targetOffset.x,
y: -this.targetOffset.y
}); // force modification change
interaction.modification.result.rect = null;
this.active = true;
interaction.simulation = this;
return true;
}
return false;
}
startInertia() {
const startVelocity = this.interaction.coords.velocity.client;
const options = getOptions(this.interaction);
const lambda = options.resistance;
const inertiaDur = -Math.log(options.endSpeed / this.v0) / lambda;
this.targetOffset = {
x: (startVelocity.x - inertiaDur) / lambda,
y: (startVelocity.y - inertiaDur) / lambda
};
this.te = inertiaDur;
this.lambda_v0 = lambda / this.v0;
this.one_ve_v0 = 1 - options.endSpeed / this.v0;
const {
modification,
modifierArg
} = this;
modifierArg.pageCoords = {
x: this.startCoords.x + this.targetOffset.x,
y: this.startCoords.y + this.targetOffset.y
};
modification.result = modification.setAll(modifierArg);
function stop({
interaction
}) {
const state = interaction.inertia;
if (modification.result.changed) {
this.isModified = true;
this.modifiedOffset = {
x: this.targetOffset.x + modification.result.delta.x,
y: this.targetOffset.y + modification.result.delta.y
};
}
if (state.active) {
raf.cancel(state.timeout);
state.active = false;
interaction.simulation = null;
this.timeout = raf.request(() => this.inertiaTick());
}
}
function calcInertia(interaction, state) {
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.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;
}
startSmoothEnd() {
this.smoothEnd = true;
this.isModified = true;
this.targetOffset = {
x: this.modification.result.delta.x,
y: this.modification.result.delta.y
};
this.timeout = raf.request(() => this.smoothEndTick());
}
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);
const state = interaction.inertia;
const options = getOptions(interaction);
const lambda = options.resistance;
const t = interaction._now() / 1000 - state.t0;
inertiaTick() {
const {
interaction
} = this;
const options = getOptions(interaction);
const lambda = options.resistance;
const t = (interaction._now() - this.t0) / 1000;
if (t < state.te) {
const progress = 1 - (Math.exp(-lambda * t) - state.lambda_v0) / state.one_ve_v0;
if (t < this.te) {
const progress = 1 - (Math.exp(-lambda * t) - this.lambda_v0) / this.one_ve_v0;
let newOffset;
if (state.modifiedXe === state.xe && state.modifiedYe === state.ye) {
state.sx = state.xe * progress;
state.sy = state.ye * progress;
if (this.isModified) {
newOffset = getQuadraticCurvePoint(0, 0, this.targetOffset.x, this.targetOffset.y, this.modifiedOffset.x, this.modifiedOffset.y, progress);
} else {
newOffset = {
x: this.targetOffset.x * progress,
y: this.targetOffset.y * progress
};
}
const delta = {
x: newOffset.x - this.currentOffset.x,
y: newOffset.y - this.currentOffset.y
};
this.currentOffset.x += delta.x;
this.currentOffset.y += delta.y;
interaction.offsetBy(delta);
interaction.move();
this.timeout = raf.request(() => this.inertiaTick());
} else {
const quadPoint = utils.getQuadraticCurvePoint(0, 0, state.xe, state.ye, state.modifiedXe, state.modifiedYe, progress);
state.sx = quadPoint.x;
state.sy = quadPoint.y;
interaction.offsetBy({
x: this.modifiedOffset.x - this.currentOffset.x,
y: this.modifiedOffset.y - this.currentOffset.y
});
this.end();
}
}
interaction.move({
event: state.startEvent
});
state.timeout = raf.request(() => inertiaTick(interaction));
} else {
state.sx = state.modifiedXe;
state.sy = state.modifiedYe;
interaction.move({
event: state.startEvent
});
interaction.end(state.startEvent);
state.active = false;
interaction.simulation = null;
smoothEndTick() {
const {
interaction
} = this;
const t = interaction._now() - this.t0;
const {
smoothEndDuration: duration
} = getOptions(interaction);
if (t < duration) {
const newOffset = {
x: easeOutQuad(t, 0, this.targetOffset.x, duration),
y: easeOutQuad(t, 0, this.targetOffset.y, duration)
};
const delta = {
x: newOffset.x - this.currentOffset.x,
y: newOffset.y - this.currentOffset.y
};
this.currentOffset.x += delta.x;
this.currentOffset.y += delta.y;
interaction.offsetBy(delta);
interaction.move({
skipModifiers: this.modifierCount
});
this.timeout = raf.request(() => this.smoothEndTick());
} else {
interaction.offsetBy({
x: this.targetOffset.x - this.currentOffset.x,
y: this.targetOffset.y - this.currentOffset.y
});
this.end();
}
}
utils.pointer.copyCoords(interaction.coords.prev, interaction.coords.cur);
}
resume({
pointer,
event,
eventTarget
}) {
const {
interaction
} = this; // undo inertia changes to interaction coords
function smothEndTick(interaction) {
updateInertiaCoords(interaction);
const state = interaction.inertia;
const t = interaction._now() - state.t0;
const {
smoothEndDuration: duration
} = getOptions(interaction);
interaction.offsetBy({
x: -this.currentOffset.x,
y: -this.currentOffset.y
}); // update pointer at pointer down position
if (t < duration) {
state.sx = utils.easeOutQuad(t, 0, state.xe, duration);
state.sy = utils.easeOutQuad(t, 0, state.ye, duration);
interaction.move({
event: state.startEvent
interaction.updatePointer(pointer, event, eventTarget, true); // fire resume signals and event
interaction._doPhase({
interaction,
event,
phase: 'resume'
});
state.timeout = raf.request(() => smothEndTick(interaction));
} else {
state.sx = state.xe;
state.sy = state.ye;
interaction.move({
event: state.startEvent
});
interaction.end(state.startEvent);
state.smoothEnd = state.active = false;
interaction.simulation = null;
copyCoords(interaction.coords.prev, interaction.coords.cur);
this.stop();
}
end() {
this.interaction.move();
this.interaction.end();
this.stop();
}
stop() {
this.active = this.smoothEnd = false;
this.interaction.simulation = null;
raf.cancel(this.timeout);
}
}
function updateInertiaCoords(interaction) {
const state = interaction.inertia; // return if inertia isn't running
function start({
interaction,
event
}) {
if (!interaction._interacting || interaction.simulation) {
return null;
}
const started = interaction.inertia.start(event); // prevent action end if inertia or smoothEnd
return started ? false : null;
} // Check if the down event hits the current inertia target
// control should be return to the user
function resume(arg) {
const {
interaction,
eventTarget
} = arg;
const state = interaction.inertia;
if (!state.active) {

@@ -259,12 +330,25 @@ return;

const pageUp = state.upCoords.page;
const clientUp = state.upCoords.client;
utils.pointer.setCoords(interaction.coords.cur, [{
pageX: pageUp.x + state.sx,
pageY: pageUp.y + state.sy,
clientX: clientUp.x + state.sx,
clientY: clientUp.y + state.sy
}], interaction._now());
let element = eventTarget; // climb up the DOM tree from the event target
while (is.element(element)) {
// if interaction element is the current inertia target element
if (element === interaction.element) {
state.resume(arg);
break;
}
element = dom.parentNode(element);
}
}
function stop({
interaction
}) {
const state = interaction.inertia;
if (state.active) {
state.stop();
}
}
function getOptions({

@@ -279,2 +363,3 @@ interactable,

id: 'inertia',
before: ['modifiers/base'],
install,

@@ -285,21 +370,42 @@ listeners: {

}) => {
interaction.inertia = {
active: false,
smoothEnd: false,
allowResume: false,
upCoords: {},
timeout: null
};
interaction.inertia = new InertiaState(interaction);
},
'interactions:before-action-end': release,
'interactions:before-action-end': start,
'interactions:down': resume,
'interactions:stop': stop
},
before: ['modifiers/base'],
calcInertia,
inertiaTick,
smothEndTick,
updateInertiaCoords
};
'interactions:stop': stop,
'interactions:before-action-resume': arg => {
const {
modification
} = arg.interaction;
modification.stop(arg);
modification.start(arg, arg.interaction.coords.cur.page);
modification.applyToInteraction(arg);
},
'interactions:before-action-inertiastart': arg => arg.interaction.modification.setAndApply(arg),
'interactions:action-resume': modifiers.addEventModifiers,
'interactions:action-inertiastart': modifiers.addEventModifiers,
'interactions:after-action-inertiastart': arg => arg.interaction.modification.restoreInteractionCoords(arg),
'interactions:after-action-resume': arg => arg.interaction.modification.restoreInteractionCoords(arg)
}
}; // http://stackoverflow.com/a/5634528/2280888
function _getQBezierValue(t, p1, p2, p3) {
const iT = 1 - t;
return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
}
function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
return {
x: _getQBezierValue(position, startX, cpX, endX),
y: _getQBezierValue(position, startY, cpY, endY)
};
} // http://gizma.com/easing/
function easeOutQuad(t, b, c, d) {
t /= d;
return -c * t * (t - 2) + b;
}
export default inertia;
//# sourceMappingURL=index.js.map
{
"name": "@interactjs/inertia",
"version": "1.8.4",
"version": "1.8.5",
"license": "MIT",
"peerDependencies": {
"@interactjs/core": "1.8.4",
"@interactjs/modifiers": "1.8.4",
"@interactjs/utils": "1.8.4"
"@interactjs/core": "1.8.5",
"@interactjs/modifiers": "1.8.5",
"@interactjs/offset": "1.8.5",
"@interactjs/utils": "1.8.5"
},
"devDependencies": {
"@interactjs/_dev": "1.8.4",
"@interactjs/actions": "1.8.4"
"@interactjs/_dev": "1.8.5",
"@interactjs/actions": "1.8.5"
},

@@ -17,3 +18,3 @@ "publishConfig": {

},
"gitHead": "bb6d3695"
"gitHead": "1cc6d94c"
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc