Socket
Socket
Sign inDemoInstall

@interactjs/modifiers

Package Overview
Dependencies
Maintainers
2
Versions
136
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@interactjs/modifiers - npm Package Compare versions

Comparing version 1.8.4 to 1.8.5

Modification.d.ts
Modification.js
Modification.js.map

3

aspectRatio.d.ts
import { Modifier, ModifierModule, ModifierState } from './base';
import Modification from './Modification';
export interface AspectRatioOptions {

@@ -16,5 +17,5 @@ ratio?: number | 'preserve';

edgeSign: 1 | -1;
subStates: ModifierState[];
subModification: Modification;
}>;
declare const aspectRatio: ModifierModule<AspectRatioOptions, AspectRatioState>;
export default aspectRatio;

19

aspectRatio.js

@@ -21,3 +21,3 @@ /* eslint-disable */

import { addEdges } from "../utils/rect.js";
import { prepareStates, setAll, startAll } from "./base.js";
import Modification from "./Modification.js";
const aspectRatio = {

@@ -68,10 +68,8 @@ start(arg) {

state.subStates = prepareStates(modifiers).map(subState => {
subState.options = { ...subState.options
};
return subState;
const subModification = new Modification(arg.interaction);
subModification.copyFrom(arg.interaction.modification);
subModification.prepareStates(modifiers);
state.subModification = subModification;
subModification.startAll({ ...arg
});
return startAll({ ...arg,
states: state.subStates
});
},

@@ -89,3 +87,3 @@

if (!state.subStates) {
if (!state.subModification) {
return null;

@@ -99,7 +97,6 @@ }

});
const result = setAll({ ...arg,
const result = state.subModification.setAll({ ...arg,
rect: correctedRect,
edges: state.linkedEdges,
pageCoords: coords,
states: state.subStates,
prevCoords: coords,

@@ -106,0 +103,0 @@ prevRect: correctedRect

61

base.d.ts

@@ -0,1 +1,2 @@

import Modification from './Modification';
declare module '@interactjs/core/scope' {

@@ -8,9 +9,3 @@ interface Scope {

interface Interaction {
modifiers?: {
states: ModifierState[];
startOffset: Interact.Rect;
startDelta: Interact.Point;
result?: ModifiersResult;
endResult: Interact.Point | void;
};
modification?: Modification;
}

@@ -48,3 +43,2 @@ }

name?: Name;
result?: object;
} & StateProps;

@@ -57,3 +51,2 @@ export interface ModifierArg<State extends ModifierState = ModifierState> {

edges: Interact.EdgeOptions;
states?: State[];
state?: State;

@@ -67,3 +60,2 @@ element: Interact.Element;

preEnd?: boolean;
requireEndOnly?: boolean;
}

@@ -79,47 +71,2 @@ export interface ModifierModule<Defaults extends {

}
export interface ModifiersResult {
delta: {
x: number;
y: number;
};
rectDelta: {
left: number;
right: number;
top: number;
bottom: number;
};
coords: Interact.Point;
rect: Interact.FullRect;
eventProps: any[];
changed: boolean;
}
export declare function startAll(arg: ModifierArg<any>): void;
export declare function setAll(arg: ModifierArg): ModifiersResult;
export declare function prepareStates(modifierList: Modifier[]): {
options: {};
methods?: {
start?: (arg: ModifierArg<any>) => void;
set: (arg: ModifierArg<any>) => void;
beforeEnd?: (arg: ModifierArg<any>) => void | import("@interactjs/types/types").Point;
stop?: (arg: ModifierArg<any>) => void;
};
index?: number;
name?: any;
result?: object;
}[];
export declare function setCoords(arg: {
interaction: Interact.Interaction;
phase: Interact.EventPhase;
rect?: Interact.Rect;
}): void;
export declare function restoreCoords({ interaction: { coords, rect, modifiers } }: {
interaction: Interact.Interaction;
}): void;
export declare function shouldDo(options: any, preEnd?: boolean, requireEndOnly?: boolean, phase?: string): any;
export declare function getRectOffset(rect: any, coords: any): {
left: number;
top: number;
right: number;
bottom: number;
};
export declare function makeModifier<Defaults extends {

@@ -137,3 +84,7 @@ enabled?: boolean;

};
export declare function addEventModifiers({ iEvent, interaction: { modification: { result } } }: {
iEvent: Interact.InteractEvent<Interact.ActionName, Interact.EventPhase>;
interaction: Interact.Interaction;
}): void;
declare const modifiersBase: Interact.Plugin;
export default modifiersBase;

409

base.js

@@ -1,365 +0,2 @@

import extend from "../utils/extend.js";
import * as rectUtils from "../utils/rect.js";
function start({
interaction,
phase
}, pageCoords, prevCoords, prevRect) {
const {
interactable,
element,
edges
} = interaction;
const modifierList = getModifierList(interaction);
const states = prepareStates(modifierList);
const rect = extend({}, interaction.rect);
const startOffset = getRectOffset(rect, pageCoords);
interaction.modifiers.startOffset = startOffset;
interaction.modifiers.startDelta = {
x: 0,
y: 0
};
const arg = {
interaction,
interactable,
element,
pageCoords,
phase,
rect,
edges,
startOffset,
states,
preEnd: false,
requireEndOnly: false,
prevCoords,
prevRect
};
interaction.modifiers.states = states;
interaction.modifiers.result = null;
startAll(arg);
const result = interaction.modifiers.result = setAll(arg);
return result;
}
export function startAll(arg) {
const states = arg.states;
for (const state of states) {
if (state.methods.start) {
arg.state = state;
state.methods.start(arg);
}
}
arg.interaction.edges = arg.edges;
}
export function setAll(arg) {
const {
prevCoords,
prevRect,
phase,
preEnd,
requireEndOnly,
states,
rect
} = arg;
arg.coords = extend({}, arg.pageCoords);
arg.rect = extend({}, rect);
const result = {
delta: {
x: 0,
y: 0
},
rectDelta: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
coords: arg.coords,
rect: arg.rect,
eventProps: [],
changed: true
};
const edges = arg.edges || {
left: true,
right: true,
top: true,
bottom: true
};
for (const state of states) {
const {
options
} = state;
const lastModifierCoords = extend({}, arg.coords);
let returnValue = null;
if (state.methods.set && shouldDo(options, preEnd, requireEndOnly, phase)) {
arg.state = state;
returnValue = state.methods.set(arg);
rectUtils.addEdges(edges, arg.rect, {
x: arg.coords.x - lastModifierCoords.x,
y: arg.coords.y - lastModifierCoords.y
});
}
result.eventProps.push(returnValue);
}
result.delta.x = arg.coords.x - arg.pageCoords.x;
result.delta.y = arg.coords.y - arg.pageCoords.y;
result.rectDelta.left = arg.rect.left - rect.left;
result.rectDelta.right = arg.rect.right - rect.right;
result.rectDelta.top = arg.rect.top - rect.top;
result.rectDelta.bottom = arg.rect.bottom - rect.bottom;
const rectChanged = !prevRect || result.rect.left !== prevRect.left || result.rect.right !== prevRect.right || result.rect.top !== prevRect.top || result.rect.bottom !== prevRect.bottom;
result.changed = !prevCoords || prevCoords.x !== result.coords.x || prevCoords.y !== result.coords.y || rectChanged;
return result;
}
function beforeMove(arg) {
const {
interaction,
phase,
preEnd,
skipModifiers
} = arg;
const {
interactable,
element
} = interaction;
const states = skipModifiers ? interaction.modifiers.states.slice(skipModifiers) : interaction.modifiers.states;
const prevCoords = arg.prevCoords || (interaction.modifiers.result ? interaction.modifiers.result.coords : null);
const prevRect = arg.prevRect || (interaction.modifiers.result ? interaction.modifiers.result.rect : null);
const modifierResult = setAll({
interaction,
interactable,
element,
preEnd,
phase,
pageCoords: arg.modifiedCoords || interaction.coords.cur.page,
prevCoords,
rect: interaction.rect,
edges: interaction.edges,
prevRect,
states,
requireEndOnly: false
});
interaction.modifiers.result = modifierResult; // don't fire an action move if a modifier would keep the event in the same
// cordinates as before
if (!modifierResult.changed && interaction.interacting()) {
return false;
}
if (arg.modifiedCoords) {
const {
page
} = interaction.coords.cur;
const adjustment = {
x: arg.modifiedCoords.x - page.x,
y: arg.modifiedCoords.y - page.y
};
modifierResult.coords.x += adjustment.x;
modifierResult.coords.y += adjustment.y;
modifierResult.delta.x += adjustment.x;
modifierResult.delta.y += adjustment.y;
}
setCoords(arg);
}
function beforeEnd(arg) {
const {
interaction,
event,
noPreEnd
} = arg;
const states = interaction.modifiers.states;
if (noPreEnd || !states || !states.length) {
return;
}
let didPreEnd = false;
for (const state of states) {
arg.state = state;
const {
options,
methods
} = state;
const endPosition = methods.beforeEnd && methods.beforeEnd(arg);
if (endPosition) {
interaction.modifiers.endResult = endPosition;
return false;
} // if the endOnly option is true for any modifier
if (!didPreEnd && shouldDo(options, true, true)) {
// fire a move event at the modified coordinates
interaction.move({
event,
preEnd: true
});
didPreEnd = true;
}
}
}
function stop(arg) {
const {
interaction
} = arg;
const states = interaction.modifiers.states;
if (!states || !states.length) {
return;
}
const modifierArg = extend({
states,
interactable: interaction.interactable,
element: interaction.element,
rect: null
}, arg);
for (const state of states) {
modifierArg.state = state;
if (state.methods.stop) {
state.methods.stop(modifierArg);
}
}
arg.interaction.modifiers.states = null;
arg.interaction.modifiers.endResult = null;
}
function getModifierList(interaction) {
const actionOptions = interaction.interactable.options[interaction.prepared.name];
const actionModifiers = actionOptions.modifiers;
if (actionModifiers && actionModifiers.length) {
return actionModifiers.filter(modifier => !modifier.options || modifier.options.enabled !== false);
}
return ['snap', 'snapSize', 'snapEdges', 'restrict', 'restrictEdges', 'restrictSize'].map(type => {
const options = actionOptions[type];
return options && options.enabled && {
options,
methods: options._methods
};
}).filter(m => !!m);
}
export function prepareStates(modifierList) {
const states = [];
for (let index = 0; index < modifierList.length; index++) {
const {
options,
methods,
name
} = modifierList[index];
if (options && options.enabled === false) {
continue;
}
states.push({
options,
methods,
index,
name
});
}
return states;
}
export function setCoords(arg) {
const {
interaction,
phase
} = arg;
const curCoords = interaction.coords.cur;
const startCoords = interaction.coords.start;
const {
result,
startDelta
} = interaction.modifiers;
const curDelta = result.delta;
if (phase === 'start') {
extend(interaction.modifiers.startDelta, result.delta);
}
for (const [coordsSet, delta] of [[startCoords, startDelta], [curCoords, curDelta]]) {
coordsSet.page.x += delta.x;
coordsSet.page.y += delta.y;
coordsSet.client.x += delta.x;
coordsSet.client.y += delta.y;
}
const {
rectDelta
} = interaction.modifiers.result;
const rect = arg.rect || interaction.rect;
rect.left += rectDelta.left;
rect.right += rectDelta.right;
rect.top += rectDelta.top;
rect.bottom += rectDelta.bottom;
rect.width = rect.right - rect.left;
rect.height = rect.bottom - rect.top;
}
export function restoreCoords({
interaction: {
coords,
rect,
modifiers
}
}) {
if (!modifiers.result) {
return;
}
const {
startDelta
} = modifiers;
const {
delta: curDelta,
rectDelta
} = modifiers.result;
const coordsAndDeltas = [[coords.start, startDelta], [coords.cur, curDelta]];
for (const [coordsSet, delta] of coordsAndDeltas) {
coordsSet.page.x -= delta.x;
coordsSet.page.y -= delta.y;
coordsSet.client.x -= delta.x;
coordsSet.client.y -= delta.y;
}
rect.left -= rectDelta.left;
rect.right -= rectDelta.right;
rect.top -= rectDelta.top;
rect.bottom -= rectDelta.bottom;
}
export function shouldDo(options, preEnd, requireEndOnly, phase) {
return options ? options.enabled !== false && (preEnd || !options.endOnly) && (!requireEndOnly || options.endOnly || options.alwaysOnEnd) && (options.setStart || phase !== 'start') : !requireEndOnly;
}
export function getRectOffset(rect, coords) {
return rect ? {
left: coords.x - rect.left,
top: coords.y - rect.top,
right: rect.right - coords.x,
bottom: rect.bottom - coords.y
} : {
left: 0,
top: 0,
right: 0,
bottom: 0
};
}
import Modification from "./Modification.js";
export function makeModifier(module, name) {

@@ -402,7 +39,6 @@ const {

}
function addEventModifiers({
export function addEventModifiers({
iEvent,
interaction: {
modifiers: {
modification: {
result

@@ -416,3 +52,2 @@ }

}
const modifiersBase = {

@@ -427,36 +62,20 @@ id: 'modifiers/base',

}) => {
interaction.modifiers = {
startOffset: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
states: null,
result: null,
endResult: null,
startDelta: null
};
interaction.modification = new Modification(interaction);
},
'interactions:before-action-start': arg => {
start(arg, arg.interaction.coords.start.page, null, null);
setCoords(arg);
},
'interactions:after-action-start': restoreCoords,
'interactions:before-action-move': beforeMove,
'interactions:after-action-move': restoreCoords,
'interactions:action-resume': arg => {
const {
coords: prevCoords,
rect: prevRect
} = arg.interaction.modifiers.result;
stop(arg);
start(arg, arg.interaction.coords.cur.page, prevCoords, prevRect);
beforeMove(arg);
modification
} = arg.interaction;
modification.start(arg, arg.interaction.coords.start.page);
arg.interaction.edges = modification.edges;
modification.applyToInteraction(arg);
},
'interactions:before-action-end': beforeEnd,
'interactions:before-action-move': arg => arg.interaction.modification.setAndApply(arg),
'interactions:before-action-end': arg => arg.interaction.modification.beforeEnd(arg),
'interactions:action-start': addEventModifiers,
'interactions:action-move': addEventModifiers,
'interactions:action-end': addEventModifiers,
'interactions:stop': stop
'interactions:after-action-start': arg => arg.interaction.modification.restoreInteractionCoords(arg),
'interactions:after-action-move': arg => arg.interaction.modification.restoreInteractionCoords(arg),
'interactions:stop': arg => arg.interaction.modification.stop(arg)
},

@@ -463,0 +82,0 @@ before: ['actions', 'action/drag', 'actions/resize', 'actions/gesture']

73

index.d.ts

@@ -32,3 +32,3 @@ export declare const snap: {

export declare const snapSize: {
(_options?: Partial<Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "targets" | "endOnly" | "range">>): import("./base").Modifier<Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "targets" | "endOnly" | "range">, import("./base").ModifierState<import("./snap/pointer").SnapOptions, {
(_options?: Partial<Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">>): import("./base").Modifier<Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">, import("./base").ModifierState<import("./snap/pointer").SnapOptions, {
offsets?: import("./snap/pointer").Offset[];

@@ -38,3 +38,3 @@ closest?: any;

}, any>, "snapSize">;
_defaults: Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "targets" | "endOnly" | "range">;
_defaults: Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">;
_methods: {

@@ -64,3 +64,3 @@ start: (arg: import("./base").ModifierArg<import("./base").ModifierState<import("./snap/pointer").SnapOptions, {

export declare const snapEdges: {
(_options?: Partial<import("./snap/pointer").SnapOptions>): import("./base").Modifier<import("./snap/pointer").SnapOptions, import("./base").ModifierState<import("./snap/pointer").SnapOptions, {
(_options?: Partial<Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">>): import("./base").Modifier<Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">, import("./base").ModifierState<import("./snap/pointer").SnapOptions, {
offsets?: import("./snap/pointer").Offset[];

@@ -70,3 +70,3 @@ closest?: any;

}, any>, "snapEdges">;
_defaults: import("./snap/pointer").SnapOptions;
_defaults: Pick<import("./snap/pointer").SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">;
_methods: {

@@ -225,14 +225,3 @@ start: (arg: import("./base").ModifierArg<import("./base").ModifierState<import("./snap/pointer").SnapOptions, {

edgeSign: 1 | -1;
subStates: {
options: {};
methods?: {
start?: (arg: import("./base").ModifierArg<any>) => void;
set: (arg: import("./base").ModifierArg<any>) => void;
beforeEnd?: (arg: import("./base").ModifierArg<any>) => void | import("@interactjs/types/types").Point;
stop?: (arg: import("./base").ModifierArg<any>) => void;
};
index?: number;
name?: any;
result?: object;
}[];
subModification: import("./Modification").default;
}, any>, "aspectRatio">;

@@ -249,14 +238,3 @@ _defaults: import("./aspectRatio").AspectRatioOptions;

edgeSign: 1 | -1;
subStates: {
options: {};
methods?: {
start?: (arg: import("./base").ModifierArg<any>) => void;
set: (arg: import("./base").ModifierArg<any>) => void;
beforeEnd?: (arg: import("./base").ModifierArg<any>) => void | import("@interactjs/types/types").Point;
stop?: (arg: import("./base").ModifierArg<any>) => void;
};
index?: number;
name?: any;
result?: object;
}[];
subModification: import("./Modification").default;
}, any>>) => void;

@@ -271,14 +249,3 @@ set: (arg: import("./base").ModifierArg<import("./base").ModifierState<import("./aspectRatio").AspectRatioOptions, {

edgeSign: 1 | -1;
subStates: {
options: {};
methods?: {
start?: (arg: import("./base").ModifierArg<any>) => void;
set: (arg: import("./base").ModifierArg<any>) => void;
beforeEnd?: (arg: import("./base").ModifierArg<any>) => void | import("@interactjs/types/types").Point;
stop?: (arg: import("./base").ModifierArg<any>) => void;
};
index?: number;
name?: any;
result?: object;
}[];
subModification: import("./Modification").default;
}, any>>) => any;

@@ -293,14 +260,3 @@ beforeEnd: (arg: import("./base").ModifierArg<import("./base").ModifierState<import("./aspectRatio").AspectRatioOptions, {

edgeSign: 1 | -1;
subStates: {
options: {};
methods?: {
start?: (arg: import("./base").ModifierArg<any>) => void;
set: (arg: import("./base").ModifierArg<any>) => void;
beforeEnd?: (arg: import("./base").ModifierArg<any>) => void | import("@interactjs/types/types").Point;
stop?: (arg: import("./base").ModifierArg<any>) => void;
};
index?: number;
name?: any;
result?: object;
}[];
subModification: import("./Modification").default;
}, any>>) => void | import("@interactjs/types/types").Point;

@@ -315,16 +271,5 @@ stop: (arg: import("./base").ModifierArg<import("./base").ModifierState<import("./aspectRatio").AspectRatioOptions, {

edgeSign: 1 | -1;
subStates: {
options: {};
methods?: {
start?: (arg: import("./base").ModifierArg<any>) => void;
set: (arg: import("./base").ModifierArg<any>) => void;
beforeEnd?: (arg: import("./base").ModifierArg<any>) => void | import("@interactjs/types/types").Point;
stop?: (arg: import("./base").ModifierArg<any>) => void;
};
index?: number;
name?: any;
result?: object;
}[];
subModification: import("./Modification").default;
}, any>>) => void;
};
};

12

package.json
{
"name": "@interactjs/modifiers",
"version": "1.8.4",
"version": "1.8.5",
"license": "MIT",
"peerDependencies": {
"@interactjs/core": "1.8.4",
"@interactjs/utils": "1.8.4"
"@interactjs/core": "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"
},

@@ -16,3 +16,3 @@ "publishConfig": {

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

3

snap/edges.d.ts

@@ -30,3 +30,4 @@ /**

import { SnapOptions, SnapState } from './pointer';
declare const snapEdges: ModifierModule<SnapOptions, SnapState>;
export declare type SnapEdgesOptions = Pick<SnapOptions, 'targets' | 'range' | 'offset' | 'endOnly' | 'enabled'>;
declare const snapEdges: ModifierModule<SnapEdgesOptions, SnapState>;
export default snapEdges;

2

snap/edges.js

@@ -49,2 +49,4 @@ /**

defaults: extend(clone(snapSize.defaults), {
targets: null,
range: null,
offset: {

@@ -51,0 +53,0 @@ x: 0,

2

snap/size.d.ts

@@ -18,4 +18,4 @@ import { ModifierArg } from '../base';

set: typeof set;
defaults: Pick<SnapOptions, "enabled" | "offset" | "targets" | "endOnly" | "range">;
defaults: Pick<SnapOptions, "enabled" | "offset" | "endOnly" | "targets" | "range">;
};
export default snapSize;
aspectRatio.js.map

Sorry, the diff of this file is not supported yet

base.js.map

Sorry, the diff of this file is not supported yet

snap/edges.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc