@interactjs/inertia
Advanced tools
@interactjs/inertia - npm Package Compare versions
Comparing version 1.10.23 to 1.10.24
| { | ||
| "name": "@interactjs/inertia", | ||
| "version": "1.10.23", | ||
| "version": "1.10.24", | ||
| "main": "index", | ||
@@ -13,11 +13,11 @@ "module": "index", | ||
| "dependencies": { | ||
| "@interactjs/offset": "1.10.23" | ||
| "@interactjs/offset": "1.10.24" | ||
| }, | ||
| "peerDependencies": { | ||
| "@interactjs/core": "1.10.23", | ||
| "@interactjs/modifiers": "1.10.23", | ||
| "@interactjs/utils": "1.10.23" | ||
| "@interactjs/core": "1.10.24", | ||
| "@interactjs/modifiers": "1.10.24", | ||
| "@interactjs/utils": "1.10.24" | ||
| }, | ||
| "optionalDependencies": { | ||
| "@interactjs/interact": "1.10.23" | ||
| "@interactjs/interact": "1.10.24" | ||
| }, | ||
@@ -32,3 +32,3 @@ "publishConfig": { | ||
| "license": "MIT", | ||
| "gitHead": "9ba48631" | ||
| "gitHead": "86c64a3f" | ||
| } |
| import type { Interaction, DoPhaseArg } from '@interactjs/core/Interaction'; | ||
| import type { SignalArgs, Plugin } from '@interactjs/core/scope'; | ||
| import type { ActionName, Point, PointerEventType } from '@interactjs/core/types'; | ||
| import Modification from '@interactjs/modifiers/Modification'; | ||
| import '@interactjs/modifiers/base'; | ||
| import '@interactjs/offset/plugin'; | ||
| import { Modification } from '@interactjs/modifiers/Modification'; | ||
| import type { ModifierArg } from '@interactjs/modifiers/types'; | ||
@@ -8,0 +8,0 @@ declare module '@interactjs/core/InteractEvent' { |
@@ -1,10 +0,8 @@ | ||
| import Modification from "../modifiers/Modification.js"; | ||
| /* eslint-disable import/no-duplicates -- for typescript module augmentations */ | ||
| import "../modifiers/base.js"; | ||
| import "../offset/plugin.js"; | ||
| import * as modifiers from "../modifiers/base.js"; | ||
| import { Modification } from "../modifiers/Modification.js"; | ||
| import offset from "../offset/plugin.js"; | ||
| /* eslint-enable import/no-duplicates */ | ||
| import * as dom from "../utils/domUtils.js"; | ||
@@ -15,3 +13,2 @@ import hypot from "../utils/hypot.js"; | ||
| import raf from "../utils/raf.js"; | ||
| function install(scope) { | ||
@@ -36,6 +33,4 @@ const { | ||
| smoothEndDuration: 300 // animate to snap/restrict endOnly if there's no inertia | ||
| }; | ||
| } | ||
| export class InertiaState { | ||
@@ -57,12 +52,8 @@ active = false; | ||
| lambda_v0 = 0; // eslint-disable-line camelcase | ||
| one_ve_v0 = 0; // eslint-disable-line camelcase | ||
| timeout; | ||
| interaction; | ||
| constructor(interaction) { | ||
| this.interaction = interaction; | ||
| } | ||
| start(event) { | ||
@@ -73,7 +64,5 @@ const { | ||
| const options = getOptions(interaction); | ||
| if (!options || !options.enabled) { | ||
| return false; | ||
| } | ||
| const { | ||
@@ -99,3 +88,2 @@ client: velocityClient | ||
| const thrown = this.t0 - interaction.coords.cur.timeStamp < 50 && pointerSpeed > options.minSpeed && pointerSpeed > options.endSpeed; | ||
| if (thrown) { | ||
@@ -105,15 +93,13 @@ this.startInertia(); | ||
| modification.result = modification.setAll(this.modifierArg); | ||
| if (!modification.result.changed) { | ||
| return false; | ||
| } | ||
| this.startSmoothEnd(); | ||
| } // force modification change | ||
| } | ||
| // force modification change | ||
| interaction.modification.result.rect = null; | ||
| interaction.modification.result.rect = null; // bring inertiastart event to the target coords | ||
| // bring inertiastart event to the target coords | ||
| interaction.offsetBy(this.targetOffset); | ||
| interaction._doPhase({ | ||
@@ -124,8 +110,7 @@ interaction, | ||
| }); | ||
| interaction.offsetBy({ | ||
| x: -this.targetOffset.x, | ||
| y: -this.targetOffset.y | ||
| }); // force modification change | ||
| }); | ||
| // force modification change | ||
| interaction.modification.result.rect = null; | ||
@@ -136,3 +121,2 @@ this.active = true; | ||
| } | ||
| startInertia() { | ||
@@ -159,3 +143,2 @@ const startVelocity = this.interaction.coords.velocity.client; | ||
| modification.result = modification.setAll(modifierArg); | ||
| if (modification.result.changed) { | ||
@@ -168,6 +151,4 @@ this.isModified = true; | ||
| } | ||
| this.onNextFrame(() => this.inertiaTick()); | ||
| } | ||
| startSmoothEnd() { | ||
@@ -182,3 +163,2 @@ this.smoothEnd = true; | ||
| } | ||
| onNextFrame(tickFn) { | ||
@@ -191,3 +171,2 @@ this.timeout = raf.request(() => { | ||
| } | ||
| inertiaTick() { | ||
@@ -200,7 +179,5 @@ const { | ||
| const t = (interaction._now() - this.t0) / 1000; | ||
| if (t < this.te) { | ||
| const progress = 1 - (Math.exp(-lambda * t) - this.lambda_v0) / this.one_ve_v0; | ||
| let newOffset; | ||
| if (this.isModified) { | ||
@@ -214,3 +191,2 @@ newOffset = getQuadraticCurvePoint(0, 0, this.targetOffset.x, this.targetOffset.y, this.modifiedOffset.x, this.modifiedOffset.y, progress); | ||
| } | ||
| const delta = { | ||
@@ -233,3 +209,2 @@ x: newOffset.x - this.currentOffset.x, | ||
| } | ||
| smoothEndTick() { | ||
@@ -243,3 +218,2 @@ const { | ||
| } = getOptions(interaction); | ||
| if (t < duration) { | ||
@@ -269,3 +243,2 @@ const newOffset = { | ||
| } | ||
| resume({ | ||
@@ -278,11 +251,14 @@ pointer, | ||
| interaction | ||
| } = this; // undo inertia changes to interaction coords | ||
| } = this; | ||
| // undo inertia changes to interaction coords | ||
| interaction.offsetBy({ | ||
| x: -this.currentOffset.x, | ||
| y: -this.currentOffset.y | ||
| }); // update pointer at pointer down position | ||
| }); | ||
| interaction.updatePointer(pointer, event, eventTarget, true); // fire resume signals and event | ||
| // update pointer at pointer down position | ||
| interaction.updatePointer(pointer, event, eventTarget, true); | ||
| // fire resume signals and event | ||
| interaction._doPhase({ | ||
@@ -293,7 +269,5 @@ interaction, | ||
| }); | ||
| copyCoords(interaction.coords.prev, interaction.coords.cur); | ||
| this.stop(); | ||
| } | ||
| end() { | ||
@@ -304,3 +278,2 @@ this.interaction.move(); | ||
| } | ||
| stop() { | ||
@@ -311,5 +284,3 @@ this.active = this.smoothEnd = false; | ||
| } | ||
| } | ||
| function start({ | ||
@@ -322,10 +293,10 @@ interaction, | ||
| } | ||
| const started = interaction.inertia.start(event); | ||
| const started = interaction.inertia.start(event); // prevent action end if inertia or smoothEnd | ||
| // prevent action end if inertia or smoothEnd | ||
| return started ? false : null; | ||
| } | ||
| return started ? false : null; | ||
| } // Check if the down event hits the current inertia target | ||
| // Check if the down event hits the current inertia target | ||
| // control should be return to the user | ||
| function resume(arg) { | ||
@@ -338,4 +309,5 @@ const { | ||
| if (!state.active) return; | ||
| let element = eventTarget; // climb up the DOM tree from the event target | ||
| let element = eventTarget; | ||
| // climb up the DOM tree from the event target | ||
| while (is.element(element)) { | ||
@@ -347,7 +319,5 @@ // if interaction element is the current inertia target element | ||
| } | ||
| element = dom.parentNode(element); | ||
| } | ||
| } | ||
| function stop({ | ||
@@ -357,3 +327,2 @@ interaction | ||
| const state = interaction.inertia; | ||
| if (state.active) { | ||
@@ -363,3 +332,2 @@ state.stop(); | ||
| } | ||
| function getOptions({ | ||
@@ -371,3 +339,2 @@ interactable, | ||
| } | ||
| const inertia = { | ||
@@ -400,4 +367,5 @@ id: 'inertia', | ||
| } | ||
| }; // http://stackoverflow.com/a/5634528/2280888 | ||
| }; | ||
| // http://stackoverflow.com/a/5634528/2280888 | ||
| function _getQBezierValue(t, p1, p2, p3) { | ||
@@ -407,3 +375,2 @@ const iT = 1 - t; | ||
| } | ||
| function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) { | ||
@@ -414,5 +381,5 @@ return { | ||
| }; | ||
| } // http://gizma.com/easing/ | ||
| } | ||
| // http://gizma.com/easing/ | ||
| function easeOutQuad(t, b, c, d) { | ||
@@ -422,4 +389,3 @@ t /= d; | ||
| } | ||
| export default inertia; | ||
| //# sourceMappingURL=plugin.js.map |
@@ -1,2 +0,2 @@ | ||
| import t from"../modifiers/Modification.prod.js";import"../modifiers/base.prod.js";import"../offset/plugin.prod.js";import*as i from"../modifiers/base.prod.js";import e from"../offset/plugin.prod.js";import*as s from"../utils/domUtils.prod.js";import o from"../utils/hypot.prod.js";import r from"../utils/is.prod.js";import{copyCoords as n}from"../utils/pointerUtils.prod.js";import a from"../utils/raf.prod.js";export class InertiaState{active=!1;isModified=!1;smoothEnd=!1;allowResume=!1;modification;modifierCount=0;modifierArg;startCoords;t0=0;v0=0;te=0;targetOffset;modifiedOffset;currentOffset;lambda_v0=0;one_ve_v0=0;timeout;interaction;constructor(t){this.interaction=t}start(i){const{interaction:e}=this,s=f(e);if(!s||!s.enabled)return!1;const{client:r}=e.coords.velocity,n=o(r.x,r.y),a=this.modification||(this.modification=new t(e));if(a.copyFrom(e.modification),this.t0=e._now(),this.allowResume=s.allowResume,this.v0=n,this.currentOffset={x:0,y:0},this.startCoords=e.coords.cur.page,this.modifierArg=a.fillArg({pageCoords:this.startCoords,preEnd:!0,phase:"inertiastart"}),this.t0-e.coords.cur.timeStamp<50&&n>s.minSpeed&&n>s.endSpeed)this.startInertia();else{if(a.result=a.setAll(this.modifierArg),!a.result.changed)return!1;this.startSmoothEnd()}return e.modification.result.rect=null,e.offsetBy(this.targetOffset),e._doPhase({interaction:e,event:i,phase:"inertiastart"}),e.offsetBy({x:-this.targetOffset.x,y:-this.targetOffset.y}),e.modification.result.rect=null,this.active=!0,e.simulation=this,!0}startInertia(){const t=this.interaction.coords.velocity.client,i=f(this.interaction),e=i.resistance,s=-Math.log(i.endSpeed/this.v0)/e;this.targetOffset={x:(t.x-s)/e,y:(t.y-s)/e},this.te=s,this.lambda_v0=e/this.v0,this.one_ve_v0=1-i.endSpeed/this.v0;const{modification:o,modifierArg:r}=this;r.pageCoords={x:this.startCoords.x+this.targetOffset.x,y:this.startCoords.y+this.targetOffset.y},o.result=o.setAll(r),o.result.changed&&(this.isModified=!0,this.modifiedOffset={x:this.targetOffset.x+o.result.delta.x,y:this.targetOffset.y+o.result.delta.y}),this.onNextFrame((()=>this.inertiaTick()))}startSmoothEnd(){this.smoothEnd=!0,this.isModified=!0,this.targetOffset={x:this.modification.result.delta.x,y:this.modification.result.delta.y},this.onNextFrame((()=>this.smoothEndTick()))}onNextFrame(t){this.timeout=a.request((()=>{this.active&&t()}))}inertiaTick(){const{interaction:t}=this,i=f(t).resistance,e=(t._now()-this.t0)/1e3;if(e<this.te){const f=1-(Math.exp(-i*e)-this.lambda_v0)/this.one_ve_v0;let c;this.isModified?(0,0,s=this.targetOffset.x,o=this.targetOffset.y,r=this.modifiedOffset.x,n=this.modifiedOffset.y,c={x:d(a=f,0,s,r),y:d(a,0,o,n)}):c={x:this.targetOffset.x*f,y:this.targetOffset.y*f};const h={x:c.x-this.currentOffset.x,y:c.y-this.currentOffset.y};this.currentOffset.x+=h.x,this.currentOffset.y+=h.y,t.offsetBy(h),t.move(),this.onNextFrame((()=>this.inertiaTick()))}else t.offsetBy({x:this.modifiedOffset.x-this.currentOffset.x,y:this.modifiedOffset.y-this.currentOffset.y}),this.end();var s,o,r,n,a}smoothEndTick(){const{interaction:t}=this,i=t._now()-this.t0,{smoothEndDuration:e}=f(t);if(i<e){const s={x:h(i,0,this.targetOffset.x,e),y:h(i,0,this.targetOffset.y,e)},o={x:s.x-this.currentOffset.x,y:s.y-this.currentOffset.y};this.currentOffset.x+=o.x,this.currentOffset.y+=o.y,t.offsetBy(o),t.move({skipModifiers:this.modifierCount}),this.onNextFrame((()=>this.smoothEndTick()))}else t.offsetBy({x:this.targetOffset.x-this.currentOffset.x,y:this.targetOffset.y-this.currentOffset.y}),this.end()}resume({pointer:t,event:i,eventTarget:e}){const{interaction:s}=this;s.offsetBy({x:-this.currentOffset.x,y:-this.currentOffset.y}),s.updatePointer(t,i,e,!0),s._doPhase({interaction:s,event:i,phase:"resume"}),n(s.coords.prev,s.coords.cur),this.stop()}end(){this.interaction.move(),this.interaction.end(),this.stop()}stop(){this.active=this.smoothEnd=!1,this.interaction.simulation=null,a.cancel(this.timeout)}}function f({interactable:t,prepared:i}){return t&&t.options&&i.name&&t.options[i.name].inertia}const c={id:"inertia",before:["modifiers","actions"],install(t){const{defaults:s}=t;t.usePlugin(e),t.usePlugin(i.default),t.actions.phases.inertiastart=!0,t.actions.phases.resume=!0,s.perAction.inertia={enabled:!1,resistance:10,minSpeed:100,endSpeed:10,allowResume:!0,smoothEndDuration:300}},listeners:{"interactions:new"({interaction:t}){t.inertia=new InertiaState(t)},"interactions:before-action-end":({interaction:t,event:i})=>(!t._interacting||t.simulation||!t.inertia.start(i))&&null,"interactions:down"(t){const{interaction:i,eventTarget:e}=t,o=i.inertia;if(!o.active)return;let n=e;for(;r.element(n);){if(n===i.element){o.resume(t);break}n=s.parentNode(n)}},"interactions:stop"({interaction:t}){const i=t.inertia;i.active&&i.stop()},"interactions:before-action-resume"(t){const{modification:i}=t.interaction;i.stop(t),i.start(t,t.interaction.coords.cur.page),i.applyToInteraction(t)},"interactions:before-action-inertiastart":t=>t.interaction.modification.setAndApply(t),"interactions:action-resume":i.addEventModifiers,"interactions:action-inertiastart":i.addEventModifiers,"interactions:after-action-inertiastart":t=>t.interaction.modification.restoreInteractionCoords(t),"interactions:after-action-resume":t=>t.interaction.modification.restoreInteractionCoords(t)}};function d(t,i,e,s){const o=1-t;return o*o*i+2*o*t*e+t*t*s}function h(t,i,e,s){return-e*(t/=s)*(t-2)+i}export default c; | ||
| import"../modifiers/base.prod.js";import"../offset/plugin.prod.js";import*as t from"../modifiers/base.prod.js";import{Modification as i}from"../modifiers/Modification.prod.js";import e from"../offset/plugin.prod.js";import*as s from"../utils/domUtils.prod.js";import o from"../utils/hypot.prod.js";import r from"../utils/is.prod.js";import{copyCoords as n}from"../utils/pointerUtils.prod.js";import a from"../utils/raf.prod.js";export class InertiaState{active=!1;isModified=!1;smoothEnd=!1;allowResume=!1;modification;modifierCount=0;modifierArg;startCoords;t0=0;v0=0;te=0;targetOffset;modifiedOffset;currentOffset;lambda_v0=0;one_ve_v0=0;timeout;interaction;constructor(t){this.interaction=t}start(t){const{interaction:e}=this,s=f(e);if(!s||!s.enabled)return!1;const{client:r}=e.coords.velocity,n=o(r.x,r.y),a=this.modification||(this.modification=new i(e));if(a.copyFrom(e.modification),this.t0=e._now(),this.allowResume=s.allowResume,this.v0=n,this.currentOffset={x:0,y:0},this.startCoords=e.coords.cur.page,this.modifierArg=a.fillArg({pageCoords:this.startCoords,preEnd:!0,phase:"inertiastart"}),this.t0-e.coords.cur.timeStamp<50&&n>s.minSpeed&&n>s.endSpeed)this.startInertia();else{if(a.result=a.setAll(this.modifierArg),!a.result.changed)return!1;this.startSmoothEnd()}return e.modification.result.rect=null,e.offsetBy(this.targetOffset),e._doPhase({interaction:e,event:t,phase:"inertiastart"}),e.offsetBy({x:-this.targetOffset.x,y:-this.targetOffset.y}),e.modification.result.rect=null,this.active=!0,e.simulation=this,!0}startInertia(){const t=this.interaction.coords.velocity.client,i=f(this.interaction),e=i.resistance,s=-Math.log(i.endSpeed/this.v0)/e;this.targetOffset={x:(t.x-s)/e,y:(t.y-s)/e},this.te=s,this.lambda_v0=e/this.v0,this.one_ve_v0=1-i.endSpeed/this.v0;const{modification:o,modifierArg:r}=this;r.pageCoords={x:this.startCoords.x+this.targetOffset.x,y:this.startCoords.y+this.targetOffset.y},o.result=o.setAll(r),o.result.changed&&(this.isModified=!0,this.modifiedOffset={x:this.targetOffset.x+o.result.delta.x,y:this.targetOffset.y+o.result.delta.y}),this.onNextFrame((()=>this.inertiaTick()))}startSmoothEnd(){this.smoothEnd=!0,this.isModified=!0,this.targetOffset={x:this.modification.result.delta.x,y:this.modification.result.delta.y},this.onNextFrame((()=>this.smoothEndTick()))}onNextFrame(t){this.timeout=a.request((()=>{this.active&&t()}))}inertiaTick(){const{interaction:t}=this,i=f(t).resistance,e=(t._now()-this.t0)/1e3;if(e<this.te){const f=1-(Math.exp(-i*e)-this.lambda_v0)/this.one_ve_v0;let c;this.isModified?(0,0,s=this.targetOffset.x,o=this.targetOffset.y,r=this.modifiedOffset.x,n=this.modifiedOffset.y,c={x:d(a=f,0,s,r),y:d(a,0,o,n)}):c={x:this.targetOffset.x*f,y:this.targetOffset.y*f};const h={x:c.x-this.currentOffset.x,y:c.y-this.currentOffset.y};this.currentOffset.x+=h.x,this.currentOffset.y+=h.y,t.offsetBy(h),t.move(),this.onNextFrame((()=>this.inertiaTick()))}else t.offsetBy({x:this.modifiedOffset.x-this.currentOffset.x,y:this.modifiedOffset.y-this.currentOffset.y}),this.end();var s,o,r,n,a}smoothEndTick(){const{interaction:t}=this,i=t._now()-this.t0,{smoothEndDuration:e}=f(t);if(i<e){const s={x:h(i,0,this.targetOffset.x,e),y:h(i,0,this.targetOffset.y,e)},o={x:s.x-this.currentOffset.x,y:s.y-this.currentOffset.y};this.currentOffset.x+=o.x,this.currentOffset.y+=o.y,t.offsetBy(o),t.move({skipModifiers:this.modifierCount}),this.onNextFrame((()=>this.smoothEndTick()))}else t.offsetBy({x:this.targetOffset.x-this.currentOffset.x,y:this.targetOffset.y-this.currentOffset.y}),this.end()}resume({pointer:t,event:i,eventTarget:e}){const{interaction:s}=this;s.offsetBy({x:-this.currentOffset.x,y:-this.currentOffset.y}),s.updatePointer(t,i,e,!0),s._doPhase({interaction:s,event:i,phase:"resume"}),n(s.coords.prev,s.coords.cur),this.stop()}end(){this.interaction.move(),this.interaction.end(),this.stop()}stop(){this.active=this.smoothEnd=!1,this.interaction.simulation=null,a.cancel(this.timeout)}}function f({interactable:t,prepared:i}){return t&&t.options&&i.name&&t.options[i.name].inertia}const c={id:"inertia",before:["modifiers","actions"],install(i){const{defaults:s}=i;i.usePlugin(e),i.usePlugin(t.default),i.actions.phases.inertiastart=!0,i.actions.phases.resume=!0,s.perAction.inertia={enabled:!1,resistance:10,minSpeed:100,endSpeed:10,allowResume:!0,smoothEndDuration:300}},listeners:{"interactions:new"({interaction:t}){t.inertia=new InertiaState(t)},"interactions:before-action-end":({interaction:t,event:i})=>(!t._interacting||t.simulation||!t.inertia.start(i))&&null,"interactions:down"(t){const{interaction:i,eventTarget:e}=t,o=i.inertia;if(!o.active)return;let n=e;for(;r.element(n);){if(n===i.element){o.resume(t);break}n=s.parentNode(n)}},"interactions:stop"({interaction:t}){const i=t.inertia;i.active&&i.stop()},"interactions:before-action-resume"(t){const{modification:i}=t.interaction;i.stop(t),i.start(t,t.interaction.coords.cur.page),i.applyToInteraction(t)},"interactions:before-action-inertiastart":t=>t.interaction.modification.setAndApply(t),"interactions:action-resume":t.addEventModifiers,"interactions:action-inertiastart":t.addEventModifiers,"interactions:after-action-inertiastart":t=>t.interaction.modification.restoreInteractionCoords(t),"interactions:after-action-resume":t=>t.interaction.modification.restoreInteractionCoords(t)}};function d(t,i,e,s){const o=1-t;return o*o*i+2*o*t*e+t*t*s}function h(t,i,e,s){return-e*(t/=s)*(t-2)+i}export default c; | ||
| //# sourceMappingURL=plugin.prod.js.map |
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
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by0.89%
67698
- Lines of code
- increased by2.51%
450
Dependency changes
+ Added@interactjs/core@1.10.24(transitive)
+ Added@interactjs/interact@1.10.24(transitive)
+ Added@interactjs/modifiers@1.10.24(transitive)
+ Added@interactjs/offset@1.10.24(transitive)
+ Added@interactjs/snappers@1.10.24(transitive)
+ Added@interactjs/utils@1.10.24(transitive)
- Removed@interactjs/core@1.10.23(transitive)
- Removed@interactjs/interact@1.10.23(transitive)
- Removed@interactjs/modifiers@1.10.23(transitive)
- Removed@interactjs/offset@1.10.23(transitive)
- Removed@interactjs/snappers@1.10.23(transitive)
- Removed@interactjs/utils@1.10.23(transitive)
Updated@interactjs/offset@1.10.24