Socket
Socket
Sign inDemoInstall

@interactjs/modifiers

Package Overview
Dependencies
2
Maintainers
2
Versions
136
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.4.0-alpha.17 to 1.4.0-alpha.18

base.d.ts
base.js.map
base.ts
index.d.ts
index.js.map
index.ts
restrict/edges.d.ts
restrict/edges.js.map
restrict/edges.ts
restrict/pointer.d.ts
restrict/pointer.js.map
restrict/pointer.ts
restrict/size.d.ts
restrict/size.js.map
restrict/size.ts
snap/edges.d.ts
snap/edges.js.map
snap/edges.ts
snap/pointer.d.ts
snap/pointer.js.map
snap/pointer.ts
snap/size.d.ts
snap/size.js.map
snap/size.ts
tsconfig.json

599

base.js
import extend from '@interactjs/utils/extend';
function install (scope) {
const {
interactions,
} = scope;
scope.defaults.perAction.modifiers = [];
scope.modifiers = {};
interactions.signals.on('new', function (interaction) {
interaction.modifiers = {
startOffset: { left: 0, right: 0, top: 0, bottom: 0 },
offsets : {},
states : null,
result : null,
};
});
interactions.signals.on('before-action-start' , arg =>
start(arg, arg.interaction.coords.start.page, scope.modifiers));
interactions.signals.on('action-resume', arg => {
beforeMove(arg);
start(arg, arg.interaction.coords.cur.page, scope.modifiers);
});
interactions.signals.on('before-action-move', beforeMove);
interactions.signals.on('before-action-end', beforeEnd);
interactions.signals.on('before-action-start', setCoords);
interactions.signals.on('before-action-move', setCoords);
interactions.signals.on('after-action-start', restoreCoords);
interactions.signals.on('after-action-move', restoreCoords);
interactions.signals.on('stop', stop);
function install(scope) {
const { interactions, } = scope;
scope.defaults.perAction.modifiers = [];
scope.modifiers = {};
interactions.signals.on('new', function (interaction) {
interaction.modifiers = {
startOffset: { left: 0, right: 0, top: 0, bottom: 0 },
offsets: {},
states: null,
result: null,
};
});
interactions.signals.on('before-action-start', arg => start(arg, arg.interaction.coords.start.page, scope.modifiers));
interactions.signals.on('action-resume', arg => {
beforeMove(arg);
start(arg, arg.interaction.coords.cur.page, scope.modifiers);
});
interactions.signals.on('before-action-move', beforeMove);
interactions.signals.on('before-action-end', beforeEnd);
interactions.signals.on('before-action-start', setCoords);
interactions.signals.on('before-action-move', setCoords);
interactions.signals.on('after-action-start', restoreCoords);
interactions.signals.on('after-action-move', restoreCoords);
interactions.signals.on('stop', stop);
}
function startAll (arg) {
for (const state of arg.states) {
if (state.methods.start) {
arg.state = state;
state.methods.start(arg);
function startAll(arg) {
for (const state of arg.states) {
if (state.methods.start) {
arg.state = state;
state.methods.start(arg);
}
}
}
}
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,
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,
};
}
function start({ interaction, phase }, pageCoords, registeredModifiers) {
const { target: interactable, element } = interaction;
const modifierList = getModifierList(interaction, registeredModifiers);
const states = prepareStates(modifierList);
const rect = extend({}, interactable.getRect(element));
if (!('width' in rect)) {
rect.width = rect.right - rect.left;
}
: {
left : 0,
top : 0,
right : 0,
bottom: 0,
if (!('height' in rect)) {
rect.height = rect.bottom - rect.top;
}
const startOffset = getRectOffset(rect, pageCoords);
interaction.modifiers.startOffset = startOffset;
interaction.modifiers.startDelta = { x: 0, y: 0 };
const arg = {
interaction,
interactable,
element,
pageCoords,
phase,
rect,
startOffset,
states,
preEnd: false,
requireEndOnly: false,
};
interaction.modifiers.states = states;
interaction.modifiers.result = null;
startAll(arg);
arg.pageCoords = extend({}, interaction.coords.start.page);
const result = interaction.modifiers.result = setAll(arg);
return result;
}
function start ({ interaction, phase }, pageCoords, registeredModifiers) {
const { target: interactable, element } = interaction;
const modifierList = getModifierList(interaction, registeredModifiers);
const states = prepareStates(modifierList);
const rect = extend({}, interactable.getRect(element));
if (!('width' in rect)) { rect.width = rect.right - rect.left; }
if (!('height' in rect)) { rect.height = rect.bottom - rect.top ; }
const startOffset = getRectOffset(rect, pageCoords);
interaction.modifiers.startOffset = startOffset;
interaction.modifiers.startDelta = { x: 0, y: 0 };
const arg = {
interaction,
interactable,
element,
pageCoords,
phase,
rect,
startOffset,
states,
preEnd: false,
requireEndOnly: false,
};
interaction.modifiers.states = states;
interaction.modifiers.result = null;
startAll(arg);
arg.pageCoords = extend({}, interaction.coords.start.page);
const result = interaction.modifiers.result = setAll(arg);
return result;
function setAll(arg) {
const { interaction, phase, preEnd, requireEndOnly, rect, skipModifiers } = arg;
const states = skipModifiers
? arg.states.slice(interaction.modifiers.skip)
: arg.states;
arg.coords = extend({}, arg.pageCoords);
arg.rect = extend({}, rect);
const result = {
delta: { x: 0, y: 0 },
coords: arg.coords,
changed: true,
};
for (const state of states) {
const { options } = state;
if (!state.methods.set ||
!shouldDo(options, preEnd, requireEndOnly, phase)) {
continue;
}
arg.state = state;
state.methods.set(arg);
}
result.delta.x = arg.coords.x - arg.pageCoords.x;
result.delta.y = arg.coords.y - arg.pageCoords.y;
const prevCoords = interaction.modifiers.result
? interaction.modifiers.result.coords
: interaction.coords.prev.page;
result.changed = (prevCoords.x !== result.coords.x ||
prevCoords.y !== result.coords.y);
return result;
}
function setAll (arg) {
const { interaction, phase, preEnd, requireEndOnly, rect, skipModifiers } = arg;
const states = skipModifiers
? arg.states.slice(interaction.modifiers.skip)
: arg.states;
arg.coords = extend({}, arg.pageCoords);
arg.rect = extend({}, rect);
const result = {
delta: { x: 0, y: 0 },
coords: arg.coords,
changed: true,
};
for (const state of states) {
const { options } = state;
if (!state.methods.set ||
!shouldDo(options, preEnd, requireEndOnly, phase)) { continue; }
arg.state = state;
state.methods.set(arg);
}
result.delta.x = arg.coords.x - arg.pageCoords.x;
result.delta.y = arg.coords.y - arg.pageCoords.y;
const prevCoords = interaction.modifiers.result
? interaction.modifiers.result.coords
: interaction.coords.prev.page;
result.changed = (
prevCoords.x !== result.coords.x ||
prevCoords.y !== result.coords.y);
return result;
function prepareStates(modifierList) {
const states = [];
for (let index = 0; index < modifierList.length; index++) {
const { options, methods } = modifierList[index];
if (options && options.enabled === false) {
continue;
}
const state = {
options,
methods,
index,
};
states.push(state);
}
return states;
}
function prepareStates (modifierList) {
const states = [];
for (let index = 0; index < modifierList.length; index++) {
const { options, methods } = modifierList[index];
if (options && options.enabled === false) { continue; }
const state = {
options,
methods,
index,
};
states.push(state);
}
return states;
}
function beforeMove ({ interaction, phase, preEnd, skipModifiers }) {
const { target: interactable, element } = interaction;
const modifierResult = setAll(
{
interaction,
interactable,
element,
preEnd,
phase,
pageCoords: interaction.coords.cur.page,
rect: interactable.getRect(element),
states: interaction.modifiers.states,
requireEndOnly: false,
skipModifiers,
function beforeMove({ interaction, phase, preEnd, skipModifiers }) {
const { target: interactable, element } = interaction;
const modifierResult = setAll({
interaction,
interactable,
element,
preEnd,
phase,
pageCoords: interaction.coords.cur.page,
rect: interactable.getRect(element),
states: interaction.modifiers.states,
requireEndOnly: false,
skipModifiers,
});
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;
}
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;
}
}
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 endResult = methods.beforeEnd && methods.beforeEnd(arg);
if (endResult === false) {
return false;
function beforeEnd(arg) {
const { interaction, event, noPreEnd } = arg;
const states = interaction.modifiers.states;
if (noPreEnd || !states || !states.length) {
return;
}
// 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;
let didPreEnd = false;
for (const state of states) {
arg.state = state;
const { options, methods } = state;
const endResult = methods.beforeEnd && methods.beforeEnd(arg);
if (endResult === false) {
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.target,
element: interaction.element,
}, arg);
restoreCoords(arg);
for (const state of states) {
modifierArg.state = state;
if (state.methods.stop) { state.methods.stop(modifierArg); }
}
arg.interaction.modifiers.states = null;
function stop(arg) {
const { interaction } = arg;
const states = interaction.modifiers.states;
if (!states || !states.length) {
return;
}
const modifierArg = extend({
states,
interactable: interaction.target,
element: interaction.element,
}, arg);
restoreCoords(arg);
for (const state of states) {
modifierArg.state = state;
if (state.methods.stop) {
state.methods.stop(modifierArg);
}
}
arg.interaction.modifiers.states = null;
}
function setCoords (arg) {
const { interaction, phase } = arg;
const curCoords = arg.curCoords || interaction.coords.cur;
const startCoords = arg.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;
}
function setCoords(arg) {
const { interaction, phase } = arg;
const curCoords = arg.curCoords || interaction.coords.cur;
const startCoords = arg.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;
}
}
function restoreCoords ({ interaction: { coords, modifiers } }) {
const { startDelta, result: { delta: curDelta } } = modifiers;
for (const [coordsSet, delta] of [[coords.start, startDelta], [coords.cur, curDelta]]) {
coordsSet.page.x -= delta.x;
coordsSet.page.y -= delta.y;
coordsSet.client.x -= delta.x;
coordsSet.client.y -= delta.y;
}
function restoreCoords({ interaction: { coords, modifiers } }) {
const { startDelta, result: { delta: curDelta } } = modifiers;
for (const [coordsSet, delta] of [[coords.start, startDelta], [coords.cur, curDelta]]) {
coordsSet.page.x -= delta.x;
coordsSet.page.y -= delta.y;
coordsSet.client.x -= delta.x;
coordsSet.client.y -= delta.y;
}
}
function getModifierList (interaction, registeredModifiers) {
const actionOptions = interaction.target.options[interaction.prepared.name];
const actionModifiers = actionOptions.modifiers;
if (actionModifiers && actionModifiers.length) {
return actionModifiers.map(modifier => {
if (!modifier.methods && modifier.type) {
return registeredModifiers[modifier.type](modifier);
}
return modifier;
});
}
return ['snap', 'snapSize', 'snapEdges', 'restrict', 'restrictEdges', 'restrictSize']
.map(type => {
const options = actionOptions[type];
return options && options.enabled && {
options,
methods: options._methods,
};
function getModifierList(interaction, registeredModifiers) {
const actionOptions = interaction.target.options[interaction.prepared.name];
const actionModifiers = actionOptions.modifiers;
if (actionModifiers && actionModifiers.length) {
return actionModifiers.map(modifier => {
if (!modifier.methods && modifier.type) {
return registeredModifiers[modifier.type](modifier);
}
return modifier;
});
}
return ['snap', 'snapSize', 'snapEdges', 'restrict', 'restrictEdges', 'restrictSize']
.map(type => {
const options = actionOptions[type];
return options && options.enabled && {
options,
methods: options._methods,
};
})
.filter(m => !!m);
.filter(m => !!m);
}
function shouldDo (options, preEnd, requireEndOnly, phase) {
return options
? options.enabled !== false &&
(preEnd || !options.endOnly) &&
(!requireEndOnly || options.endOnly) &&
(options.setStart || phase !== 'start')
: !requireEndOnly;
function shouldDo(options, preEnd, requireEndOnly, phase) {
return options
? options.enabled !== false &&
(preEnd || !options.endOnly) &&
(!requireEndOnly || options.endOnly) &&
(options.setStart || phase !== 'start')
: !requireEndOnly;
}
function makeModifier (module, name) {
const { defaults } = module;
const methods = {
start: module.start,
set: module.set,
beforeEnd: module.beforeEnd,
stop: module.stop,
};
const modifier = options => {
options = options || {};
// add missing defaults to options
options.enabled = options.enabled !== false;
for (const prop in defaults) {
if (!(prop in options)) {
options[prop] = defaults[prop];
}
function makeModifier(module, name) {
const { defaults } = module;
const methods = {
start: module.start,
set: module.set,
beforeEnd: module.beforeEnd,
stop: module.stop,
};
const modifier = options => {
options = options || {};
// add missing defaults to options
options.enabled = options.enabled !== false;
for (const prop in defaults) {
if (!(prop in options)) {
options[prop] = defaults[prop];
}
}
return { options, methods };
};
if (typeof name === 'string') {
Object.defineProperty(modifier, 'name', { value: name });
// for backwrads compatibility
modifier._defaults = defaults;
modifier._methods = methods;
}
return { options, methods };
};
if (typeof name === 'string') {
Object.defineProperty(
modifier,
'name',
{ value: name });
// for backwrads compatibility
modifier._defaults = defaults;
modifier._methods = methods;
}
return modifier;
return modifier;
}
export default {
install,
startAll,
setAll,
prepareStates,
start,
beforeMove,
beforeEnd,
stop,
shouldDo,
getModifierList,
getRectOffset,
makeModifier,
install,
startAll,
setAll,
prepareStates,
start,
beforeMove,
beforeEnd,
stop,
shouldDo,
getModifierList,
getRectOffset,
makeModifier,
};
//# sourceMappingURL=base.js.map

11

index.js
import base from './base';
import restrictEdgesModule from './restrict/edges';
import restrictModule from './restrict/pointer';
import restrictSizeModule from './restrict/size';
import snapEdgesModule from './snap/edges';
import snapModule from './snap/pointer';
import snapSizeModule from './snap/size';
import snapEdgesModule from './snap/edges';
import restrictModule from './restrict/pointer';
import restrictEdgesModule from './restrict/edges';
import restrictSizeModule from './restrict/size';
const { makeModifier } = base;
export const snap = makeModifier(snapModule, 'snap');

@@ -17,1 +15,2 @@ export const snapSize = makeModifier(snapSizeModule, 'snapSize');

export const restrictSize = makeModifier(restrictSizeModule, 'restrictSize');
//# sourceMappingURL=index.js.map

12

package.json
{
"name": "@interactjs/modifiers",
"version": "1.4.0-alpha.17+sha.793e5fa",
"version": "1.4.0-alpha.18+sha.a8adfbf",
"peerDependencies": {
"@interactjs/core": "1.4.0-alpha.17+sha.793e5fa",
"@interactjs/utils": "1.4.0-alpha.17+sha.793e5fa"
"@interactjs/core": "1.4.0-alpha.18+sha.a8adfbf",
"@interactjs/utils": "1.4.0-alpha.18+sha.a8adfbf"
},
"devDependencies": {
"@interactjs/_dev": "1.4.0-alpha.17+sha.793e5fa",
"@interactjs/core": "1.4.0-alpha.17+sha.793e5fa",
"@interactjs/utils": "1.4.0-alpha.17+sha.793e5fa"
"@interactjs/_dev": "1.4.0-alpha.18+sha.a8adfbf",
"@interactjs/core": "1.4.0-alpha.18+sha.a8adfbf",
"@interactjs/utils": "1.4.0-alpha.18+sha.a8adfbf"
},

@@ -13,0 +13,0 @@ "publishConfig": {

127

restrict/edges.js

@@ -11,85 +11,70 @@ // This module adds the options.resize.restrictEdges setting which sets min and

// });
import extend from '@interactjs/utils/extend';
import rectUtils from '@interactjs/utils/rect';
import restrict from './pointer';
const { getRestrictionRect } = restrict;
const noInner = { top: +Infinity, left: +Infinity, bottom: -Infinity, right: -Infinity };
const noOuter = { top: -Infinity, left: -Infinity, bottom: +Infinity, right: +Infinity };
function start ({ interaction, state }) {
const { options } = state;
const startOffset = interaction.modifiers.startOffset;
let offset;
if (options) {
const offsetRect = getRestrictionRect(options.offset, interaction, interaction.coords.start.page);
offset = rectUtils.rectToXY(offsetRect);
}
offset = offset || { x: 0, y: 0 };
state.offset = {
top: offset.y + startOffset.top,
left: offset.x + startOffset.left,
bottom: offset.y - startOffset.bottom,
right: offset.x - startOffset.right,
};
function start({ interaction, state }) {
const { options } = state;
const startOffset = interaction.modifiers.startOffset;
let offset;
if (options) {
const offsetRect = getRestrictionRect(options.offset, interaction, interaction.coords.start.page);
offset = rectUtils.rectToXY(offsetRect);
}
offset = offset || { x: 0, y: 0 };
state.offset = {
top: offset.y + startOffset.top,
left: offset.x + startOffset.left,
bottom: offset.y - startOffset.bottom,
right: offset.x - startOffset.right,
};
}
function set ({ coords, interaction, state }) {
const { offset, options } = state;
const edges = interaction.prepared.linkedEdges || interaction.prepared.edges;
if (!edges) {
return;
}
const page = extend({}, coords);
const inner = getRestrictionRect(options.inner, interaction, page) || {};
const outer = getRestrictionRect(options.outer, interaction, page) || {};
fixRect(inner, noInner);
fixRect(outer, noOuter);
if (edges.top) {
coords.y = Math.min(Math.max(outer.top + offset.top, page.y), inner.top + offset.top);
}
else if (edges.bottom) {
coords.y = Math.max(Math.min(outer.bottom + offset.bottom, page.y), inner.bottom + offset.bottom);
}
if (edges.left) {
coords.x = Math.min(Math.max(outer.left + offset.left, page.x), inner.left + offset.left);
}
else if (edges.right) {
coords.x = Math.max(Math.min(outer.right + offset.right, page.x), inner.right + offset.right);
}
function set({ coords, interaction, state }) {
const { offset, options } = state;
const edges = interaction.prepared.linkedEdges || interaction.prepared.edges;
if (!edges) {
return;
}
const page = extend({}, coords);
const inner = getRestrictionRect(options.inner, interaction, page) || {};
const outer = getRestrictionRect(options.outer, interaction, page) || {};
fixRect(inner, noInner);
fixRect(outer, noOuter);
if (edges.top) {
coords.y = Math.min(Math.max(outer.top + offset.top, page.y), inner.top + offset.top);
}
else if (edges.bottom) {
coords.y = Math.max(Math.min(outer.bottom + offset.bottom, page.y), inner.bottom + offset.bottom);
}
if (edges.left) {
coords.x = Math.min(Math.max(outer.left + offset.left, page.x), inner.left + offset.left);
}
else if (edges.right) {
coords.x = Math.max(Math.min(outer.right + offset.right, page.x), inner.right + offset.right);
}
}
function fixRect (rect, defaults) {
for (const edge of ['top', 'left', 'bottom', 'right']) {
if (!(edge in rect)) {
rect[edge] = defaults[edge];
function fixRect(rect, defaults) {
for (const edge of ['top', 'left', 'bottom', 'right']) {
if (!(edge in rect)) {
rect[edge] = defaults[edge];
}
}
}
return rect;
return rect;
}
const restrictEdges = {
noInner,
noOuter,
getRestrictionRect,
start,
set,
defaults: {
enabled: false,
inner: null,
outer: null,
offset: null,
},
noInner,
noOuter,
getRestrictionRect,
start,
set,
defaults: {
enabled: false,
inner: null,
outer: null,
offset: null,
},
};
export default restrictEdges;
//# sourceMappingURL=edges.js.map

106

restrict/pointer.js

@@ -1,64 +0,56 @@

import * as is from '@interactjs/utils/is';
import * as is from '@interactjs/utils/is';
import rectUtils from '@interactjs/utils/rect';
function start ({ rect, startOffset, state }) {
const { options } = state;
const { elementRect } = options;
const offset = {};
if (rect && elementRect) {
offset.left = startOffset.left - (rect.width * elementRect.left);
offset.top = startOffset.top - (rect.height * elementRect.top);
offset.right = startOffset.right - (rect.width * (1 - elementRect.right));
offset.bottom = startOffset.bottom - (rect.height * (1 - elementRect.bottom));
}
else {
offset.left = offset.top = offset.right = offset.bottom = 0;
}
state.offset = offset;
function start({ rect, startOffset, state }) {
const { options } = state;
const { elementRect } = options;
const offset = {};
if (rect && elementRect) {
offset.left = startOffset.left - (rect.width * elementRect.left);
offset.top = startOffset.top - (rect.height * elementRect.top);
offset.right = startOffset.right - (rect.width * (1 - elementRect.right));
offset.bottom = startOffset.bottom - (rect.height * (1 - elementRect.bottom));
}
else {
offset.left = offset.top = offset.right = offset.bottom = 0;
}
state.offset = offset;
}
function set ({ coords, interaction, state }) {
const { options, offset } = state;
const restriction = getRestrictionRect(options.restriction, interaction, coords);
if (!restriction) { return state; }
const rect = restriction;
// object is assumed to have
// x, y, width, height or
// left, top, right, bottom
if ('x' in restriction && 'y' in restriction) {
coords.x = Math.max(Math.min(rect.x + rect.width - offset.right , coords.x), rect.x + offset.left);
coords.y = Math.max(Math.min(rect.y + rect.height - offset.bottom, coords.y), rect.y + offset.top );
}
else {
coords.x = Math.max(Math.min(rect.right - offset.right , coords.x), rect.left + offset.left);
coords.y = Math.max(Math.min(rect.bottom - offset.bottom, coords.y), rect.top + offset.top );
}
function set({ coords, interaction, state }) {
const { options, offset } = state;
const restriction = getRestrictionRect(options.restriction, interaction, coords);
if (!restriction) {
return state;
}
const rect = restriction;
// object is assumed to have
// x, y, width, height or
// left, top, right, bottom
if ('x' in restriction && 'y' in restriction) {
coords.x = Math.max(Math.min(rect.x + rect.width - offset.right, coords.x), rect.x + offset.left);
coords.y = Math.max(Math.min(rect.y + rect.height - offset.bottom, coords.y), rect.y + offset.top);
}
else {
coords.x = Math.max(Math.min(rect.right - offset.right, coords.x), rect.left + offset.left);
coords.y = Math.max(Math.min(rect.bottom - offset.bottom, coords.y), rect.top + offset.top);
}
}
function getRestrictionRect (value, interaction, coords) {
if (is.func(value)) {
return rectUtils.resolveRectLike(value, interaction.target, interaction.element, [coords.x, coords.y, interaction]);
} else {
return rectUtils.resolveRectLike(value, interaction.target, interaction.element);
}
function getRestrictionRect(value, interaction, coords) {
if (is.func(value)) {
return rectUtils.resolveRectLike(value, interaction.target, interaction.element, [coords.x, coords.y, interaction]);
}
else {
return rectUtils.resolveRectLike(value, interaction.target, interaction.element);
}
}
const restrict = {
start,
set,
getRestrictionRect,
defaults: {
enabled: false,
restriction: null,
elementRect: null,
},
start,
set,
getRestrictionRect,
defaults: {
enabled: false,
restriction: null,
elementRect: null,
},
};
export default restrict;
//# sourceMappingURL=pointer.js.map

100

restrict/size.js

@@ -11,67 +11,55 @@ // This module adds the options.resize.restrictSize setting which sets min and

// });
import extend from '@interactjs/utils/extend';
import rectUtils from '@interactjs/utils/rect';
import restrictEdges from './edges';
const noMin = { width: -Infinity, height: -Infinity };
const noMax = { width: +Infinity, height: +Infinity };
function start (arg) {
return restrictEdges.start(arg);
function start(arg) {
return restrictEdges.start(arg);
}
function set (arg) {
const { interaction, state } = arg;
const { options } = state;
const edges = interaction.prepared.linkedEdges || interaction.prepared.edges;
if (!edges) {
return;
}
const rect = rectUtils.xywhToTlbr(interaction.resizeRects.inverted);
const minSize = rectUtils.tlbrToXywh(restrictEdges.getRestrictionRect(options.min, interaction)) || noMin;
const maxSize = rectUtils.tlbrToXywh(restrictEdges.getRestrictionRect(options.max, interaction)) || noMax;
state.options = {
enabled: options.enabled,
endOnly: options.endOnly,
inner: extend({}, restrictEdges.noInner),
outer: extend({}, restrictEdges.noOuter),
};
if (edges.top) {
state.options.inner.top = rect.bottom - minSize.height;
state.options.outer.top = rect.bottom - maxSize.height;
}
else if (edges.bottom) {
state.options.inner.bottom = rect.top + minSize.height;
state.options.outer.bottom = rect.top + maxSize.height;
}
if (edges.left) {
state.options.inner.left = rect.right - minSize.width;
state.options.outer.left = rect.right - maxSize.width;
}
else if (edges.right) {
state.options.inner.right = rect.left + minSize.width;
state.options.outer.right = rect.left + maxSize.width;
}
restrictEdges.set(arg);
state.options = options;
function set(arg) {
const { interaction, state } = arg;
const { options } = state;
const edges = interaction.prepared.linkedEdges || interaction.prepared.edges;
if (!edges) {
return;
}
const rect = rectUtils.xywhToTlbr(interaction.resizeRects.inverted);
const minSize = rectUtils.tlbrToXywh(restrictEdges.getRestrictionRect(options.min, interaction)) || noMin;
const maxSize = rectUtils.tlbrToXywh(restrictEdges.getRestrictionRect(options.max, interaction)) || noMax;
state.options = {
enabled: options.enabled,
endOnly: options.endOnly,
inner: extend({}, restrictEdges.noInner),
outer: extend({}, restrictEdges.noOuter),
};
if (edges.top) {
state.options.inner.top = rect.bottom - minSize.height;
state.options.outer.top = rect.bottom - maxSize.height;
}
else if (edges.bottom) {
state.options.inner.bottom = rect.top + minSize.height;
state.options.outer.bottom = rect.top + maxSize.height;
}
if (edges.left) {
state.options.inner.left = rect.right - minSize.width;
state.options.outer.left = rect.right - maxSize.width;
}
else if (edges.right) {
state.options.inner.right = rect.left + minSize.width;
state.options.outer.right = rect.left + maxSize.width;
}
restrictEdges.set(arg);
state.options = options;
}
const restrictSize = {
start,
set,
defaults: {
enabled: false,
min: null,
max: null,
},
start,
set,
defaults: {
enabled: false,
min: null,
max: null,
},
};
export default restrictSize;
//# sourceMappingURL=size.js.map

56

snap/edges.js

@@ -28,45 +28,31 @@ /**

*/
import clone from '@interactjs/utils/clone';
import extend from '@interactjs/utils/extend';
import snapSize from './size';
function install (scope) {
const {
defaults,
} = scope;
defaults.perAction.snapEdges = snapEdges.defaults;
function install(scope) {
const { defaults, } = scope;
defaults.perAction.snapEdges = snapEdges.defaults;
}
function start (arg) {
const edges = arg.interaction.prepared.edges;
if (!edges) { return null; }
arg.state.targetFields = arg.state.targetFields || [
[edges.left ? 'left' : 'right', edges.top ? 'top' : 'bottom'],
];
return snapSize.start(arg);
function start(arg) {
const edges = arg.interaction.prepared.edges;
if (!edges) {
return null;
}
arg.state.targetFields = arg.state.targetFields || [
[edges.left ? 'left' : 'right', edges.top ? 'top' : 'bottom'],
];
return snapSize.start(arg);
}
function set (arg) {
return snapSize.set(arg);
function set(arg) {
return snapSize.set(arg);
}
function modifyCoords (arg) {
snapSize.modifyCoords(arg);
}
const snapEdges = {
install,
start,
set,
modifyCoords,
defaults: extend(clone(snapSize.defaults), {
offset: { x: 0, y: 0 },
}),
install,
start,
set,
defaults: extend(clone(snapSize.defaults), {
offset: { x: 0, y: 0 },
}),
};
export default snapEdges;
//# sourceMappingURL=edges.js.map

266

snap/pointer.js
import * as utils from '@interactjs/utils';
function start ({ interaction, interactable, element, rect, state, startOffset }) {
const { options } = state;
const offsets = [];
const optionsOrigin = utils.rect.rectToXY(utils.rect.resolveRectLike(options.origin));
const origin = optionsOrigin || utils.getOriginXY(interactable, element, interaction.prepared.name);
let snapOffset;
if (options.offset === 'startCoords') {
snapOffset = {
x: interaction.coords.start.page.x - origin.x,
y: interaction.coords.start.page.y - origin.y,
};
}
else {
const offsetRect = utils.rect.resolveRectLike(options.offset, interactable, element, [interaction]);
snapOffset = utils.rect.rectToXY(offsetRect) || { x: 0, y: 0 };
}
const relativePoints = options.relativePoints || [];
if (rect && options.relativePoints && options.relativePoints.length) {
for (let index = 0; index < relativePoints.length; index++) {
const relativePoint = relativePoints[index];
offsets.push({
index,
relativePoint,
x: startOffset.left - (rect.width * relativePoint.x) + snapOffset.x,
y: startOffset.top - (rect.height * relativePoint.y) + snapOffset.y,
});
function start({ interaction, interactable, element, rect, state, startOffset }) {
const { options } = state;
const offsets = [];
const optionsOrigin = utils.rect.rectToXY(utils.rect.resolveRectLike(options.origin));
const origin = optionsOrigin || utils.getOriginXY(interactable, element, interaction.prepared.name);
let snapOffset;
if (options.offset === 'startCoords') {
snapOffset = {
x: interaction.coords.start.page.x - origin.x,
y: interaction.coords.start.page.y - origin.y,
};
}
}
else {
offsets.push(utils.extend({
index: 0,
relativePoint: null,
}, snapOffset));
}
state.offsets = offsets;
else {
const offsetRect = utils.rect.resolveRectLike(options.offset, interactable, element, [interaction]);
snapOffset = utils.rect.rectToXY(offsetRect) || { x: 0, y: 0 };
}
const relativePoints = options.relativePoints || [];
if (rect && options.relativePoints && options.relativePoints.length) {
for (let index = 0; index < relativePoints.length; index++) {
const relativePoint = relativePoints[index];
offsets.push({
index,
relativePoint,
x: startOffset.left - (rect.width * relativePoint.x) + snapOffset.x,
y: startOffset.top - (rect.height * relativePoint.y) + snapOffset.y,
});
}
}
else {
offsets.push(utils.extend({
index: 0,
relativePoint: null,
}, snapOffset));
}
state.offsets = offsets;
}
function set ({ interaction, coords, state }) {
const { options, offsets } = state;
const origin = utils.getOriginXY(interaction.target, interaction.element, interaction.prepared.name);
const page = utils.extend({}, coords);
const targets = [];
let target;
let i;
page.x -= origin.x;
page.y -= origin.y;
state.realX = page.x;
state.realY = page.y;
let len = options.targets? options.targets.length : 0;
for (const offset of offsets) {
const relativeX = page.x - offset.x;
const relativeY = page.y - offset.y;
for (let index = 0; index < options.targets.length; index++) {
const snapTarget = options.targets[index];
if (utils.is.func(snapTarget)) {
target = snapTarget(relativeX, relativeY, interaction, offset, index);
}
else {
target = snapTarget;
}
if (!target) { continue; }
targets.push({
x: utils.is.number(target.x) ? (target.x + offset.x) : relativeX,
y: utils.is.number(target.y) ? (target.y + offset.y) : relativeY,
range: utils.is.number(target.range)? target.range: options.range,
});
function set({ interaction, coords, state }) {
const { options, offsets } = state;
const origin = utils.getOriginXY(interaction.target, interaction.element, interaction.prepared.name);
const page = utils.extend({}, coords);
const targets = [];
let target;
let i;
page.x -= origin.x;
page.y -= origin.y;
state.realX = page.x;
state.realY = page.y;
let len = options.targets ? options.targets.length : 0;
for (const offset of offsets) {
const relativeX = page.x - offset.x;
const relativeY = page.y - offset.y;
for (let index = 0; index < options.targets.length; index++) {
const snapTarget = options.targets[index];
if (utils.is.func(snapTarget)) {
target = snapTarget(relativeX, relativeY, interaction, offset, index);
}
else {
target = snapTarget;
}
if (!target) {
continue;
}
targets.push({
x: utils.is.number(target.x) ? (target.x + offset.x) : relativeX,
y: utils.is.number(target.y) ? (target.y + offset.y) : relativeY,
range: utils.is.number(target.range) ? target.range : options.range,
});
}
}
}
const closest = {
target: null,
inRange: false,
distance: 0,
range: 0,
dx: 0,
dy: 0,
};
for (i = 0, len = targets.length; i < len; i++) {
target = targets[i];
const range = target.range;
const dx = target.x - page.x;
const dy = target.y - page.y;
const distance = utils.hypot(dx, dy);
let inRange = distance <= range;
// Infinite targets count as being out of range
// compared to non infinite ones that are in range
if (range === Infinity && closest.inRange && closest.range !== Infinity) {
inRange = false;
const closest = {
target: null,
inRange: false,
distance: 0,
range: 0,
dx: 0,
dy: 0,
};
for (i = 0, len = targets.length; i < len; i++) {
target = targets[i];
const range = target.range;
const dx = target.x - page.x;
const dy = target.y - page.y;
const distance = utils.hypot(dx, dy);
let inRange = distance <= range;
// Infinite targets count as being out of range
// compared to non infinite ones that are in range
if (range === Infinity && closest.inRange && closest.range !== Infinity) {
inRange = false;
}
if (!closest.target || (inRange
// is the closest target in range?
? (closest.inRange && range !== Infinity
// the pointer is relatively deeper in this target
? distance / range < closest.distance / closest.range
// this target has Infinite range and the closest doesn't
: (range === Infinity && closest.range !== Infinity) ||
// OR this target is closer that the previous closest
distance < closest.distance)
// The other is not in range and the pointer is closer to this target
: (!closest.inRange && distance < closest.distance))) {
closest.target = target;
closest.distance = distance;
closest.range = range;
closest.inRange = inRange;
closest.dx = dx;
closest.dy = dy;
state.range = range;
}
}
if (!closest.target || (inRange
// is the closest target in range?
? (closest.inRange && range !== Infinity
// the pointer is relatively deeper in this target
? distance / range < closest.distance / closest.range
// this target has Infinite range and the closest doesn't
: (range === Infinity && closest.range !== Infinity) ||
// OR this target is closer that the previous closest
distance < closest.distance)
// The other is not in range and the pointer is closer to this target
: (!closest.inRange && distance < closest.distance))) {
closest.target = target;
closest.distance = distance;
closest.range = range;
closest.inRange = inRange;
closest.dx = dx;
closest.dy = dy;
state.range = range;
if (closest.inRange) {
coords.x = closest.target.x;
coords.y = closest.target.y;
}
}
if (closest.inRange) {
coords.x = closest.target.x;
coords.y = closest.target.y;
}
state.closest = closest;
state.closest = closest;
}
const snap = {
start,
set,
defaults: {
enabled: false,
range : Infinity,
targets: null,
offset: null,
relativePoints: null,
},
start,
set,
defaults: {
enabled: false,
range: Infinity,
targets: null,
offset: null,
relativePoints: null,
},
};
export default snap;
//# sourceMappingURL=pointer.js.map

142

snap/size.js
// This module allows snapping of the size of targets during resize
// interactions.
import extend from '@interactjs/utils/extend';
import * as is from '@interactjs/utils/is';
import snap from './pointer';
function start (arg) {
const { interaction, state } = arg;
const { options } = state;
const edges = interaction.prepared.edges;
if (!edges) { return null; }
arg.state = {
options: {
relativePoints: [{
x: edges.left? 0 : 1,
y: edges.top ? 0 : 1,
}],
origin: { x: 0, y: 0 },
offset: options.offset || 'self',
range: options.range,
},
};
state.targetFields = state.targetFields || [
['width', 'height'],
['x', 'y'],
];
snap.start(arg);
state.offsets = arg.state.offsets;
arg.state = state;
function start(arg) {
const { interaction, state } = arg;
const { options } = state;
const edges = interaction.prepared.edges;
if (!edges) {
return null;
}
arg.state = {
options: {
relativePoints: [{
x: edges.left ? 0 : 1,
y: edges.top ? 0 : 1,
}],
origin: { x: 0, y: 0 },
offset: options.offset || 'self',
range: options.range,
},
};
state.targetFields = state.targetFields || [
['width', 'height'],
['x', 'y'],
];
snap.start(arg);
state.offsets = arg.state.offsets;
arg.state = state;
}
function set (arg) {
const { interaction, state, coords } = arg;
const { options, offsets } = state;
const relative = {
x: coords.x - offsets[0].x,
y: coords.y - offsets[0].y,
};
state.options = extend({}, options);
state.options.targets = [];
for (const snapTarget of (options.targets || [])) {
let target;
if (is.func(snapTarget)) {
target = snapTarget(relative.x, relative.y, interaction);
function set(arg) {
const { interaction, state, coords } = arg;
const { options, offsets } = state;
const relative = {
x: coords.x - offsets[0].x,
y: coords.y - offsets[0].y,
};
state.options = extend({}, options);
state.options.targets = [];
for (const snapTarget of (options.targets || [])) {
let target;
if (is.func(snapTarget)) {
target = snapTarget(relative.x, relative.y, interaction);
}
else {
target = snapTarget;
}
if (!target) {
continue;
}
for (const [xField, yField] of state.targetFields) {
if (xField in target || yField in target) {
target.x = target[xField];
target.y = target[yField];
break;
}
}
state.options.targets.push(target);
}
else {
target = snapTarget;
}
if (!target) { continue; }
for (const [xField, yField] of state.targetFields) {
if (xField in target || yField in target) {
target.x = target[xField];
target.y = target[yField];
break;
}
}
state.options.targets.push(target);
}
snap.set(arg);
state.options = options;
snap.set(arg);
state.options = options;
}
const snapSize = {
start,
set,
defaults: {
enabled: false,
range : Infinity,
targets: null,
offset: null,
},
start,
set,
defaults: {
enabled: false,
range: Infinity,
targets: null,
offset: null,
},
};
export default snapSize;
//# sourceMappingURL=size.js.map

4

tests/base.js
import test from '@interactjs/_dev/test/test';
import * as helpers from '@interactjs/core/tests/helpers';
import * as utils from '@interactjs/utils';
import modifiersBase from '../base';
import * as utils from '@interactjs/utils/index.ts';
import modifiersBase from '../base.ts';

@@ -6,0 +6,0 @@ test('modifiers/base', t => {

4

tests/restrict/edges.js
import test from '@interactjs/_dev/test/test';
import { mockSignals } from '@interactjs/core/tests/helpers';
import Interaction from '@interactjs/core/Interaction';
import restrictEdges from '../../restrict/edges';
import Interaction from '@interactjs/core/Interaction.ts';
import restrictEdges from '../../restrict/edges.ts';

@@ -6,0 +6,0 @@ test('restrictEdges', t => {

8

tests/restrict/size.js
import test from '@interactjs/_dev/test/test';
import { mockSignals } from '@interactjs/core/tests/helpers';
import rectUtils from '@interactjs/utils/rect';
import Interaction from '@interactjs/core/Interaction';
import base from '../../base';
import restrictSize from '../../restrict/size';
import rectUtils from '@interactjs/utils/rect.ts';
import Interaction from '@interactjs/core/Interaction.ts';
import base from '../../base.ts';
import restrictSize from '../../restrict/size.ts';

@@ -9,0 +9,0 @@ test('restrictSize', t => {

4

tests/snap/edges.js
import test from '@interactjs/_dev/test/test';
import { mockSignals, mockInteractable, mockScope } from '@interactjs/core/tests/helpers';
import Interaction from '@interactjs/core/Interaction';
import snapEdges from '../../snap/edges';
import Interaction from '@interactjs/core/Interaction.ts';
import snapEdges from '../../snap/edges.ts';

@@ -6,0 +6,0 @@ test('modifiers/snapEdges', t => {

4

tests/snap/pointer.js
import test from '@interactjs/_dev/test/test';
import { mockSignals, mockInteractable } from '@interactjs/core/tests/helpers';
import Interaction from '@interactjs/core/Interaction';
import snap from '../../snap/pointer';
import Interaction from '@interactjs/core/Interaction.ts';
import snap from '../../snap/pointer.ts';

@@ -7,0 +7,0 @@ test('modifiers/snap', t => {

4

tests/snap/size.js
import test from '@interactjs/_dev/test/test';
import { mockSignals, mockInteractable } from '@interactjs/core/tests/helpers';
import Interaction from '@interactjs/core/Interaction';
import snapSize from '../../snap/size';
import Interaction from '@interactjs/core/Interaction.ts';
import snapSize from '../../snap/size.ts';

@@ -6,0 +6,0 @@ test('modifiers/snapSize', t => {

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc