Socket
Socket
Sign inDemoInstall

@interactjs/actions

Package Overview
Dependencies
Maintainers
2
Versions
137
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@interactjs/actions - npm Package Compare versions

Comparing version 1.4.0-alpha.20 to 1.4.0-alpha.21

types.d.ts

25

drag.d.ts
import { Scope } from '@interactjs/core/scope';
declare module '@interactjs/core/Interactable' {
interface Interactable {
draggable?: (options: any) => Interactable | {
[key: string]: any;
};
}
}
declare module '@interactjs/core/defaultOptions' {
interface Defaults {
drag?: any;
}
}
declare module '@interactjs/core/scope' {
interface Actions {
drag?: typeof drag;
}
}
export declare type DraggableMethod = (options: Interact.DraggableOptions) => Interact.Interactable | {
[key: string]: any;
};
declare function install(scope: Scope): void;

@@ -72,6 +58,3 @@ declare function beforeMove({ interaction }: {

move: typeof move;
defaults: {
startAxis: string;
lockAxis: string;
};
defaults: import("../interactjs/types").DropzoneOptions;
checker(_pointer: any, _event: any, interactable: any): {

@@ -78,0 +61,0 @@ name: string;

2

drag.js

@@ -93,3 +93,3 @@ import * as arr from '@interactjs/utils/arr';

if (is.object(options)) {
this.options.drag.enabled = options.enabled === false ? false : true;
this.options.drag.enabled = options.enabled !== false;
this.setPerAction('drag', options);

@@ -96,0 +96,0 @@ this.setOnEvents('drag', options);

106

drag.ts

@@ -1,23 +0,7 @@

import { Scope } from '@interactjs/core/scope';
import * as arr from '@interactjs/utils/arr';
import * as is from '@interactjs/utils/is';
import { Scope } from '@interactjs/core/scope'
import * as arr from '@interactjs/utils/arr'
import * as is from '@interactjs/utils/is'
declare module '@interactjs/core/Interactable' {
interface Interactable {
draggable?: (options: any) => Interactable | { [key: string]: any }
}
}
export type DraggableMethod = (options: Interact.DraggableOptions) => Interact.Interactable | { [key: string]: any }
declare module '@interactjs/core/defaultOptions' {
interface Defaults {
drag?: any
}
}
declare module '@interactjs/core/scope' {
interface Actions {
drag?: typeof drag
}
}
function install (scope: Scope) {

@@ -29,14 +13,14 @@ const {

defaults,
} = scope;
} = scope
interactions.signals.on('before-action-move', beforeMove);
interactions.signals.on('action-resume', beforeMove);
interactions.signals.on('before-action-move', beforeMove)
interactions.signals.on('action-resume', beforeMove)
// dragmove
interactions.signals.on('action-move', move);
interactions.signals.on('action-move', move)
Interactable.prototype.draggable = drag.draggable;
Interactable.prototype.draggable = drag.draggable
actions.drag = drag;
actions.names.push('drag');
actions.drag = drag
actions.names.push('drag')
arr.merge(actions.eventTypes, [

@@ -48,26 +32,26 @@ 'dragstart',

'dragend',
]);
actions.methodDict.drag = 'draggable';
])
actions.methodDict.drag = 'draggable'
defaults.drag = drag.defaults;
defaults.drag = drag.defaults
}
function beforeMove ({ interaction }) {
if (interaction.prepared.name !== 'drag') { return; }
if (interaction.prepared.name !== 'drag') { return }
const axis = interaction.prepared.axis;
const axis = interaction.prepared.axis
if (axis === 'x') {
interaction.coords.cur.page.y = interaction.coords.start.page.y;
interaction.coords.cur.client.y = interaction.coords.start.client.y;
interaction.coords.cur.page.y = interaction.coords.start.page.y
interaction.coords.cur.client.y = interaction.coords.start.client.y
interaction.coords.velocity.client.y = 0;
interaction.coords.velocity.page.y = 0;
interaction.coords.velocity.client.y = 0
interaction.coords.velocity.page.y = 0
}
else if (axis === 'y') {
interaction.coords.cur.page.x = interaction.coords.start.page.x;
interaction.coords.cur.client.x = interaction.coords.start.client.x;
interaction.coords.cur.page.x = interaction.coords.start.page.x
interaction.coords.cur.client.x = interaction.coords.start.client.x
interaction.coords.velocity.client.x = 0;
interaction.coords.velocity.page.x = 0;
interaction.coords.velocity.client.x = 0
interaction.coords.velocity.page.x = 0
}

@@ -77,12 +61,12 @@ }

function move ({ iEvent, interaction }) {
if (interaction.prepared.name !== 'drag') { return; }
if (interaction.prepared.name !== 'drag') { return }
const axis = interaction.prepared.axis;
const axis = interaction.prepared.axis
if (axis === 'x' || axis === 'y') {
const opposite = axis === 'x' ? 'y' : 'x';
const opposite = axis === 'x' ? 'y' : 'x'
iEvent.page[opposite] = interaction.coords.start.page[opposite];
iEvent.client[opposite] = interaction.coords.start.client[opposite];
iEvent.delta[opposite] = 0;
iEvent.page[opposite] = interaction.coords.start.page[opposite]
iEvent.client[opposite] = interaction.coords.start.client[opposite]
iEvent.delta[opposite] = 0
}

@@ -132,23 +116,23 @@ }

if (is.object(options)) {
this.options.drag.enabled = options.enabled === false? false: true;
this.setPerAction('drag', options);
this.setOnEvents('drag', options);
this.options.drag.enabled = options.enabled !== false
this.setPerAction('drag', options)
this.setOnEvents('drag', options)
if (/^(xy|x|y|start)$/.test(options.lockAxis)) {
this.options.drag.lockAxis = options.lockAxis;
this.options.drag.lockAxis = options.lockAxis
}
if (/^(xy|x|y)$/.test(options.startAxis)) {
this.options.drag.startAxis = options.startAxis;
this.options.drag.startAxis = options.startAxis
}
return this;
return this
}
if (is.bool(options)) {
this.options.drag.enabled = options;
this.options.drag.enabled = options
return this;
return this
}
return this.options.drag;
return this.options.drag
}

@@ -164,6 +148,6 @@

lockAxis : 'xy',
},
} as Interact.DropzoneOptions,
checker (_pointer, _event, interactable) {
const dragOptions = interactable.options.drag;
const dragOptions = interactable.options.drag

@@ -177,10 +161,10 @@ return dragOptions.enabled

}
: null;
: null
},
getCursor () {
return 'move';
return 'move'
},
};
}
export default drag;
export default drag

64

drop/DropEvent.ts

@@ -1,5 +0,5 @@

import Interactable from '@interactjs/core/Interactable';
import InteractEvent from '@interactjs/core/InteractEvent';
import Interaction from '@interactjs/core/Interaction';
import * as arr from '@interactjs/utils/arr';
import Interactable from '@interactjs/core/Interactable'
import InteractEvent from '@interactjs/core/InteractEvent'
import Interaction from '@interactjs/core/Interaction'
import * as arr from '@interactjs/utils/arr'

@@ -25,13 +25,13 @@ class DropEvent {

? dropStatus.prev
: dropStatus.cur;
: dropStatus.cur
this.type = type;
this.target = element;
this.currentTarget = element;
this.dropzone = dropzone;
this.dragEvent = dragEvent;
this.relatedTarget = dragEvent.target;
this.interaction = dragEvent.interaction;
this.draggable = dragEvent.interactable;
this.timeStamp = dragEvent.timeStamp;
this.type = type
this.target = element
this.currentTarget = element
this.dropzone = dropzone
this.dragEvent = dragEvent
this.relatedTarget = dragEvent.target
this.interaction = dragEvent.interaction
this.draggable = dragEvent.interactable
this.timeStamp = dragEvent.timeStamp
}

@@ -47,3 +47,3 @@

reject () {
const { dropStatus } = this.interaction;
const { dropStatus } = this.interaction

@@ -55,17 +55,17 @@ if (

dropStatus.cur.element !== this.target)) {
return;
return
}
dropStatus.prev.dropzone = this.dropzone;
dropStatus.prev.element = this.target;
dropStatus.prev.dropzone = this.dropzone
dropStatus.prev.element = this.target
dropStatus.rejected = true;
dropStatus.events.enter = null;
dropStatus.rejected = true
dropStatus.events.enter = null
this.stopImmediatePropagation();
this.stopImmediatePropagation()
if (this.type === 'dropactivate') {
const activeDrops = dropStatus.activeDrops;
const activeDrops = dropStatus.activeDrops
const index = arr.findIndex(activeDrops, ({ dropzone, element }) =>
dropzone === this.dropzone && element === this.target);
dropzone === this.dropzone && element === this.target)

@@ -75,13 +75,13 @@ dropStatus.activeDrops = [

...activeDrops.slice(index + 1),
];
]
const deactivateEvent = new DropEvent(dropStatus, this.dragEvent, 'dropdeactivate');
const deactivateEvent = new DropEvent(dropStatus, this.dragEvent, 'dropdeactivate')
deactivateEvent.dropzone = this.dropzone;
deactivateEvent.target = this.target;
deactivateEvent.dropzone = this.dropzone
deactivateEvent.target = this.target
this.dropzone.fire(deactivateEvent);
this.dropzone.fire(deactivateEvent)
}
else {
this.dropzone.fire(new DropEvent(dropStatus, this.dragEvent, 'dragleave'));
this.dropzone.fire(new DropEvent(dropStatus, this.dragEvent, 'dragleave'))
}

@@ -93,10 +93,10 @@ }

stopPropagation () {
this.propagationStopped = true;
this.propagationStopped = true
}
stopImmediatePropagation () {
this.immediatePropagationStopped = this.propagationStopped = true;
this.immediatePropagationStopped = this.propagationStopped = true
}
}
export default DropEvent;
export default DropEvent

22

drop/index.d.ts

@@ -0,8 +1,9 @@

import InteractEvent from '@interactjs/core/InteractEvent';
import { Scope } from '@interactjs/core/scope';
declare module '@interactjs/core/Interactable' {
interface Interactable {
dropzone?: (options: any) => Interactable | {
dropzone: (options: any) => Interactable | {
[key: string]: any;
};
dropCheck?: (dragEvent: any, event: any, draggable: any, draggableElement: any, dropElement: any, rect: any) => boolean;
dropCheck: (dragEvent: InteractEvent, event: Interact.PointerEventType, draggable: Interactable, draggableElement: Element, dropElemen: Element, rect: any) => boolean;
}

@@ -12,3 +13,5 @@ }

interface Interaction {
dropStatus?: any;
dropStatus?: {
[key: string]: any;
};
}

@@ -18,4 +21,7 @@ }

interface Defaults {
drop?: any;
drop?: Interact.DropzoneOptions;
}
interface Options {
drop?: Interact.DropzoneOptions;
}
}

@@ -29,3 +35,3 @@ declare module '@interactjs/core/scope' {

interface InteractStatic {
dynamicDrop: (newValue?: boolean) => boolean | InteractStatic;
dynamicDrop: (newValue?: boolean) => boolean | typeof import('@interactjs/interact/interact').default;
}

@@ -55,8 +61,4 @@ }

fireDropEvents: typeof fireDropEvents;
defaults: {
enabled: boolean;
accept: any;
overlap: string;
};
defaults: import("../../interactjs/types").DropzoneOptions;
};
export default drop;

34

drop/index.js

@@ -9,3 +9,3 @@ import * as utils from '@interactjs/utils';

Interactable, interactions, defaults, } = scope;
interactions.signals.on('after-action-start', function ({ interaction, event, iEvent: dragEvent }) {
interactions.signals.on('after-action-start', ({ interaction, event, iEvent: dragEvent }) => {
if (interaction.prepared.name !== 'drag') {

@@ -26,5 +26,5 @@ return;

});
interactions.signals.on('action-move', arg => onEventCreated(arg, scope));
interactions.signals.on('action-end', arg => onEventCreated(arg, scope));
interactions.signals.on('after-action-move', function ({ interaction }) {
interactions.signals.on('action-move', (arg) => onEventCreated(arg, scope));
interactions.signals.on('action-end', (arg) => onEventCreated(arg, scope));
interactions.signals.on('after-action-move', ({ interaction }) => {
if (interaction.prepared.name !== 'drag') {

@@ -36,3 +36,3 @@ return;

});
interactions.signals.on('after-action-end', function ({ interaction }) {
interactions.signals.on('after-action-end', ({ interaction }) => {
if (interaction.prepared.name === 'drag') {

@@ -42,7 +42,7 @@ fireDropEvents(interaction, interaction.dropStatus.events);

});
interactions.signals.on('stop', function ({ interaction }) {
interactions.signals.on('stop', ({ interaction }) => {
interaction.dropStatus.activeDrops = null;
interaction.dropStatus.events = null;
});
interactions.signals.on('new', function (interaction) {
interactions.signals.on('new', (interaction) => {
interaction.dropStatus = {

@@ -62,3 +62,3 @@ cur: {

});
interactions.signals.on('stop', function ({ interaction: { dropStatus } }) {
interactions.signals.on('stop', ({ interaction: { dropStatus } }) => {
dropStatus.cur.dropzone = dropStatus.cur.element =

@@ -139,5 +139,5 @@ dropStatus.prev.dropzone = dropStatus.prev.element = null;

if (utils.is.bool(newValue)) {
//if (dragging && scope.dynamicDrop !== newValue && !newValue) {
// if (dragging && scope.dynamicDrop !== newValue && !newValue) {
// calcRects(dropzones);
//}
// }
scope.dynamicDrop = newValue;

@@ -169,6 +169,6 @@ return interact;

// test the draggable draggableElement against the dropzone's accept setting
if ((utils.is.element(accept) && accept !== draggableElement)
|| (utils.is.string(accept)
&& !utils.dom.matchesSelector(draggableElement, accept))
|| (utils.is.func(accept) && !accept({ dropzone, draggableElement }))) {
if ((utils.is.element(accept) && accept !== draggableElement) ||
(utils.is.string(accept) &&
!utils.dom.matchesSelector(draggableElement, accept)) ||
(utils.is.func(accept) && !accept({ dropzone, draggableElement }))) {
continue;

@@ -315,3 +315,3 @@ }

if (utils.is.object(options)) {
interactable.options.drop.enabled = options.enabled === false ? false : true;
interactable.options.drop.enabled = options.enabled !== false;
if (options.listeners) {

@@ -397,4 +397,4 @@ const normalized = utils.normalizeListeners(options.listeners);

if (dragRect && utils.is.number(dropOverlap)) {
const overlapArea = (Math.max(0, Math.min(rect.right, dragRect.right) - Math.max(rect.left, dragRect.left))
* Math.max(0, Math.min(rect.bottom, dragRect.bottom) - Math.max(rect.top, dragRect.top)));
const overlapArea = (Math.max(0, Math.min(rect.right, dragRect.right) - Math.max(rect.left, dragRect.left)) *
Math.max(0, Math.min(rect.bottom, dragRect.bottom) - Math.max(rect.top, dragRect.top)));
const overlapRatio = overlapArea / (dragRect.width * dragRect.height);

@@ -401,0 +401,0 @@ dropped = overlapRatio >= dropOverlap;

342

drop/index.ts

@@ -1,9 +0,17 @@

import { Scope } from '@interactjs/core/scope';
import * as utils from '@interactjs/utils';
import DropEvent from './DropEvent';
import InteractEvent from '@interactjs/core/InteractEvent'
import { Scope } from '@interactjs/core/scope'
import * as utils from '@interactjs/utils'
import DropEvent from './DropEvent'
declare module '@interactjs/core/Interactable' {
interface Interactable {
dropzone?: (options: any) => Interactable | { [key: string]: any }
dropCheck?: (dragEvent, event, draggable, draggableElement, dropElement, rect) => boolean
dropzone: (options: any) => Interactable | { [key: string]: any }
dropCheck: (
dragEvent: InteractEvent,
event: Interact.PointerEventType,
draggable: Interactable,
draggableElement: Element,
dropElemen: Element,
rect: any
) => boolean
}

@@ -14,3 +22,3 @@ }

interface Interaction {
dropStatus?
dropStatus?: { [key: string]: any }
}

@@ -21,4 +29,7 @@ }

interface Defaults {
drop?: any
drop?: Interact.DropzoneOptions
}
interface Options {
drop?: Interact.DropzoneOptions
}
}

@@ -34,3 +45,3 @@

interface InteractStatic {
dynamicDrop: (newValue?: boolean) => boolean | InteractStatic
dynamicDrop: (newValue?: boolean) => boolean | typeof import ('@interactjs/interact/interact').default
}

@@ -48,46 +59,46 @@ }

defaults,
} = scope;
} = scope
interactions.signals.on('after-action-start', function ({ interaction, event, iEvent: dragEvent }) {
if (interaction.prepared.name !== 'drag') { return; }
interactions.signals.on('after-action-start', ({ interaction, event, iEvent: dragEvent }) => {
if (interaction.prepared.name !== 'drag') { return }
const { dropStatus } = interaction;
const { dropStatus } = interaction
// reset active dropzones
dropStatus.activeDrops = null;
dropStatus.events = null;
dropStatus.activeDrops = null
dropStatus.events = null
if (!scope.dynamicDrop) {
dropStatus.activeDrops = getActiveDrops(scope, interaction.element);
dropStatus.activeDrops = getActiveDrops(scope, interaction.element)
}
dropStatus.events = getDropEvents(interaction, event, dragEvent);
dropStatus.events = getDropEvents(interaction, event, dragEvent)
if (dropStatus.events.activate) {
fireActivationEvents(dropStatus.activeDrops, dropStatus.events.activate);
fireActivationEvents(dropStatus.activeDrops, dropStatus.events.activate)
}
});
})
interactions.signals.on('action-move', arg => onEventCreated(arg, scope));
interactions.signals.on('action-end' , arg => onEventCreated(arg, scope));
interactions.signals.on('action-move', (arg) => onEventCreated(arg, scope))
interactions.signals.on('action-end', (arg) => onEventCreated(arg, scope))
interactions.signals.on('after-action-move', function ({ interaction }) {
if (interaction.prepared.name !== 'drag') { return; }
interactions.signals.on('after-action-move', ({ interaction }) => {
if (interaction.prepared.name !== 'drag') { return }
fireDropEvents(interaction, interaction.dropStatus.events);
interaction.dropStatus.events = {};
});
fireDropEvents(interaction, interaction.dropStatus.events)
interaction.dropStatus.events = {}
})
interactions.signals.on('after-action-end', function ({ interaction }) {
interactions.signals.on('after-action-end', ({ interaction }) => {
if (interaction.prepared.name === 'drag') {
fireDropEvents(interaction, interaction.dropStatus.events);
fireDropEvents(interaction, interaction.dropStatus.events)
}
});
})
interactions.signals.on('stop', function ({ interaction }) {
interaction.dropStatus.activeDrops = null;
interaction.dropStatus.events = null;
});
interactions.signals.on('stop', ({ interaction }) => {
interaction.dropStatus.activeDrops = null
interaction.dropStatus.events = null
})
interactions.signals.on('new', function (interaction) {
interactions.signals.on('new', (interaction) => {
interaction.dropStatus = {

@@ -105,10 +116,10 @@ cur: {

activeDrops: null, // an array of { dropzone, element, rect }
};
});
}
})
interactions.signals.on('stop', function ({ interaction: { dropStatus } }) {
interactions.signals.on('stop', ({ interaction: { dropStatus } }) => {
dropStatus.cur.dropzone = dropStatus.cur.element =
dropStatus.prev.dropzone = dropStatus.prev.element = null;
dropStatus.rejected = false;
});
dropStatus.prev.dropzone = dropStatus.prev.element = null
dropStatus.rejected = false
})

@@ -156,4 +167,4 @@ /**

Interactable.prototype.dropzone = function (options) {
return dropzoneMethod(this, options);
};
return dropzoneMethod(this, options)
}

@@ -176,4 +187,4 @@ /**

Interactable.prototype.dropCheck = function (dragEvent, event, draggable, draggableElement, dropElement, rect) {
return dropCheckMethod(this, dragEvent, event, draggable, draggableElement, dropElement, rect);
};
return dropCheckMethod(this, dragEvent, event, draggable, draggableElement, dropElement, rect)
}

@@ -188,14 +199,14 @@ /**

*/
interact.dynamicDrop = function (newValue) {
interact.dynamicDrop = function (newValue?: boolean) {
if (utils.is.bool(newValue)) {
//if (dragging && scope.dynamicDrop !== newValue && !newValue) {
// if (dragging && scope.dynamicDrop !== newValue && !newValue) {
// calcRects(dropzones);
//}
// }
scope.dynamicDrop = newValue;
scope.dynamicDrop = newValue
return interact;
return interact
}
return scope.dynamicDrop;
};
return scope.dynamicDrop
}

@@ -209,26 +220,25 @@ utils.arr.merge(actions.eventTypes, [

'drop',
]);
actions.methodDict.drop = 'dropzone';
])
actions.methodDict.drop = 'dropzone'
scope.dynamicDrop = false;
scope.dynamicDrop = false
defaults.drop = drop.defaults;
defaults.drop = drop.defaults
}
function collectDrops ({ interactables }, draggableElement) {
const drops = [];
const drops = []
// collect all dropzones and their elements which qualify for a drop
for (const dropzone of interactables.list) {
if (!dropzone.options.drop.enabled) { continue; }
if (!dropzone.options.drop.enabled) { continue }
const accept = dropzone.options.drop.accept;
const accept = dropzone.options.drop.accept
// test the draggable draggableElement against the dropzone's accept setting
if ((utils.is.element(accept) && accept !== draggableElement)
|| (utils.is.string(accept)
&& !utils.dom.matchesSelector(draggableElement, accept))
|| (utils.is.func(accept) && !accept({ dropzone, draggableElement }))) {
continue;
if ((utils.is.element(accept) && accept !== draggableElement) ||
(utils.is.string(accept) &&
!utils.dom.matchesSelector(draggableElement, accept)) ||
(utils.is.func(accept) && !accept({ dropzone, draggableElement }))) {
continue
}

@@ -239,3 +249,3 @@

? dropzone._context.querySelectorAll(dropzone.target)
: utils.is.array(dropzone.target) ? dropzone.target : [dropzone.target];
: utils.is.array(dropzone.target) ? dropzone.target : [dropzone.target]

@@ -247,3 +257,3 @@ for (const dropzoneElement of dropElements) {

element: dropzoneElement,
});
})
}

@@ -253,3 +263,3 @@ }

return drops;
return drops
}

@@ -260,8 +270,8 @@

for (const { dropzone, element } of activeDrops) {
event.dropzone = dropzone;
event.dropzone = dropzone
// set current element as event target
event.target = element;
dropzone.fire(event);
event.propagationStopped = event.immediatePropagationStopped = false;
event.target = element
dropzone.fire(event)
event.propagationStopped = event.immediatePropagationStopped = false
}

@@ -275,13 +285,13 @@ }

// get dropzones and their elements that could receive the draggable
const activeDrops = collectDrops(scope, dragElement);
const activeDrops = collectDrops(scope, dragElement)
for (const activeDrop of activeDrops) {
activeDrop.rect = activeDrop.dropzone.getRect(activeDrop.element);
activeDrop.rect = activeDrop.dropzone.getRect(activeDrop.element)
}
return activeDrops;
return activeDrops
}
function getDrop ({ dropStatus, target: draggable, element: dragElement }, dragEvent, pointerEvent) {
const validDrops = [];
const validDrops = []

@@ -292,13 +302,13 @@ // collect all dropzones and their elements which qualify for a drop

? dropzoneElement
: null);
: null)
}
// get the most appropriate dropzone based on DOM depth and order
const dropIndex = utils.dom.indexOfDeepestElement(validDrops);
const dropIndex = utils.dom.indexOfDeepestElement(validDrops)
return dropStatus.activeDrops[dropIndex] || null;
return dropStatus.activeDrops[dropIndex] || null
}
function getDropEvents (interaction, _pointerEvent, dragEvent) {
const { dropStatus } = interaction;
const { dropStatus } = interaction
const dropEvents = {

@@ -311,19 +321,19 @@ enter : null,

drop : null,
};
}
if (dragEvent.type === 'dragstart') {
dropEvents.activate = new DropEvent(dropStatus, dragEvent, 'dropactivate');
dropEvents.activate = new DropEvent(dropStatus, dragEvent, 'dropactivate')
dropEvents.activate.target = null;
dropEvents.activate.dropzone = null;
dropEvents.activate.target = null
dropEvents.activate.dropzone = null
}
if (dragEvent.type === 'dragend') {
dropEvents.deactivate = new DropEvent(dropStatus, dragEvent, 'dropdeactivate');
dropEvents.deactivate = new DropEvent(dropStatus, dragEvent, 'dropdeactivate')
dropEvents.deactivate.target = null;
dropEvents.deactivate.dropzone = null;
dropEvents.deactivate.target = null
dropEvents.deactivate.dropzone = null
}
if (dropStatus.rejected) {
return dropEvents;
return dropEvents
}

@@ -334,13 +344,13 @@

if (dropStatus.prev.dropzone) {
dropEvents.leave = new DropEvent(dropStatus, dragEvent, 'dragleave');
dropEvents.leave = new DropEvent(dropStatus, dragEvent, 'dragleave')
dragEvent.dragLeave = dropEvents.leave.target = dropStatus.prev.element;
dragEvent.prevDropzone = dropEvents.leave.dropzone = dropStatus.prev.dropzone;
dragEvent.dragLeave = dropEvents.leave.target = dropStatus.prev.element
dragEvent.prevDropzone = dropEvents.leave.dropzone = dropStatus.prev.dropzone
}
// if dropzone is not null, create a dragenter event
if (dropStatus.cur.dropzone) {
dropEvents.enter = new DropEvent(dropStatus, dragEvent, 'dragenter');
dropEvents.enter = new DropEvent(dropStatus, dragEvent, 'dragenter')
dragEvent.dragEnter = dropStatus.cur.element;
dragEvent.dropzone = dropStatus.cur.dropzone;
dragEvent.dragEnter = dropStatus.cur.element
dragEvent.dropzone = dropStatus.cur.dropzone
}

@@ -350,19 +360,19 @@ }

if (dragEvent.type === 'dragend' && dropStatus.cur.dropzone) {
dropEvents.drop = new DropEvent(dropStatus, dragEvent, 'drop');
dropEvents.drop = new DropEvent(dropStatus, dragEvent, 'drop')
dragEvent.dropzone = dropStatus.cur.dropzone;
dragEvent.relatedTarget = dropStatus.cur.element;
dragEvent.dropzone = dropStatus.cur.dropzone
dragEvent.relatedTarget = dropStatus.cur.element
}
if (dragEvent.type === 'dragmove' && dropStatus.cur.dropzone) {
dropEvents.move = new DropEvent(dropStatus, dragEvent, 'dropmove');
dropEvents.move = new DropEvent(dropStatus, dragEvent, 'dropmove')
dropEvents.move.dragmove = dragEvent;
dragEvent.dropzone = dropStatus.cur.dropzone;
dropEvents.move.dragmove = dragEvent
dragEvent.dropzone = dropStatus.cur.dropzone
}
return dropEvents;
return dropEvents
}
function fireDropEvents (interaction, events) {
const { dropStatus } = interaction;
const { dropStatus } = interaction
const {

@@ -372,28 +382,28 @@ activeDrops,

prev,
} = dropStatus;
} = dropStatus
if (events.leave) { prev.dropzone.fire(events.leave); }
if (events.move ) { cur.dropzone.fire(events.move ); }
if (events.enter) { cur.dropzone.fire(events.enter); }
if (events.drop ) { cur.dropzone.fire(events.drop ); }
if (events.leave) { prev.dropzone.fire(events.leave) }
if (events.move) { cur.dropzone.fire(events.move) }
if (events.enter) { cur.dropzone.fire(events.enter) }
if (events.drop) { cur.dropzone.fire(events.drop) }
if (events.deactivate) {
fireActivationEvents(activeDrops, events.deactivate);
fireActivationEvents(activeDrops, events.deactivate)
}
dropStatus.prev.dropzone = cur.dropzone;
dropStatus.prev.element = cur.element;
dropStatus.prev.dropzone = cur.dropzone
dropStatus.prev.element = cur.element
}
function onEventCreated ({ interaction, iEvent, event }, scope) {
if (iEvent.type !== 'dragmove' && iEvent.type !== 'dragend') { return; }
if (iEvent.type !== 'dragmove' && iEvent.type !== 'dragend') { return }
const { dropStatus } = interaction;
const { dropStatus } = interaction
if (scope.dynamicDrop) {
dropStatus.activeDrops = getActiveDrops(scope, interaction.element);
dropStatus.activeDrops = getActiveDrops(scope, interaction.element)
}
const dragEvent = iEvent;
const dropResult = getDrop(interaction, dragEvent, event);
const dragEvent = iEvent
const dropResult = getDrop(interaction, dragEvent, event)

@@ -404,16 +414,16 @@ // update rejected status

dropResult.dropzone === dropStatus.cur.dropzone &&
dropResult.element === dropStatus.cur.element;
dropResult.element === dropStatus.cur.element
dropStatus.cur.dropzone = dropResult && dropResult.dropzone;
dropStatus.cur.element = dropResult && dropResult.element;
dropStatus.cur.dropzone = dropResult && dropResult.dropzone
dropStatus.cur.element = dropResult && dropResult.element
dropStatus.events = getDropEvents(interaction, event, dragEvent);
dropStatus.events = getDropEvents(interaction, event, dragEvent)
}
function dropzoneMethod (interactable, options) {
function dropzoneMethod (interactable: Interact.Interactable, options: Interact.DropzoneOptions) {
if (utils.is.object(options)) {
interactable.options.drop.enabled = options.enabled === false? false: true;
interactable.options.drop.enabled = options.enabled !== false
if (options.listeners) {
const normalized = utils.normalizeListeners(options.listeners);
const normalized = utils.normalizeListeners(options.listeners)
// rename 'drop' to '' as it will be prefixed with 'drop'

@@ -425,49 +435,48 @@ const corrected = Object.keys(normalized).reduce((acc, type) => {

? `drop${type}`
: type;
: type
acc[correctedType] = normalized[type];
acc[correctedType] = normalized[type]
return acc;
}, {});
return acc
}, {})
interactable.off(interactable.options.drop.listeners);
interactable.on(corrected);
interactable.options.drop.listeners = corrected;
interactable.off(interactable.options.drop.listeners)
interactable.on(corrected)
interactable.options.drop.listeners = corrected
}
if (utils.is.func(options.ondrop) ) { interactable.on('drop' , options.ondrop ); }
if (utils.is.func(options.ondropactivate) ) { interactable.on('dropactivate' , options.ondropactivate ); }
if (utils.is.func(options.ondropdeactivate)) { interactable.on('dropdeactivate', options.ondropdeactivate); }
if (utils.is.func(options.ondragenter) ) { interactable.on('dragenter' , options.ondragenter ); }
if (utils.is.func(options.ondragleave) ) { interactable.on('dragleave' , options.ondragleave ); }
if (utils.is.func(options.ondropmove) ) { interactable.on('dropmove' , options.ondropmove ); }
if (utils.is.func(options.ondrop)) { interactable.on('drop', options.ondrop) }
if (utils.is.func(options.ondropactivate)) { interactable.on('dropactivate', options.ondropactivate) }
if (utils.is.func(options.ondropdeactivate)) { interactable.on('dropdeactivate', options.ondropdeactivate) }
if (utils.is.func(options.ondragenter)) { interactable.on('dragenter', options.ondragenter) }
if (utils.is.func(options.ondragleave)) { interactable.on('dragleave', options.ondragleave) }
if (utils.is.func(options.ondropmove)) { interactable.on('dropmove', options.ondropmove) }
if (/^(pointer|center)$/.test(options.overlap)) {
interactable.options.drop.overlap = options.overlap;
if (/^(pointer|center)$/.test(options.overlap as string)) {
interactable.options.drop.overlap = options.overlap
}
else if (utils.is.number(options.overlap)) {
interactable.options.drop.overlap = Math.max(Math.min(1, options.overlap), 0);
interactable.options.drop.overlap = Math.max(Math.min(1, options.overlap), 0)
}
if ('accept' in options) {
interactable.options.drop.accept = options.accept;
interactable.options.drop.accept = options.accept
}
if ('checker' in options) {
interactable.options.drop.checker = options.checker;
interactable.options.drop.checker = options.checker
}
return interactable;
return interactable
}
if (utils.is.bool(options)) {
interactable.options.drop.enabled = options;
interactable.options.drop.enabled = options
return interactable;
return interactable
}
return interactable.options.drop;
return interactable.options.drop
}
function dropCheckMethod (interactable, dragEvent, event, draggable, draggableElement, dropElement, rect) {
let dropped = false;
let dropped = false

@@ -479,46 +488,45 @@ // if the dropzone has no rect (eg. display: none)

? interactable.options.drop.checker(dragEvent, event, dropped, interactable, dropElement, draggable, draggableElement)
: false);
: false)
}
const dropOverlap = interactable.options.drop.overlap;
const dropOverlap = interactable.options.drop.overlap
if (dropOverlap === 'pointer') {
const origin = utils.getOriginXY(draggable, draggableElement, 'drag');
const page = utils.pointer.getPageXY(dragEvent);
const origin = utils.getOriginXY(draggable, draggableElement, 'drag')
const page = utils.pointer.getPageXY(dragEvent)
page.x += origin.x;
page.y += origin.y;
page.x += origin.x
page.y += origin.y
const horizontal = (page.x > rect.left) && (page.x < rect.right);
const vertical = (page.y > rect.top ) && (page.y < rect.bottom);
const horizontal = (page.x > rect.left) && (page.x < rect.right)
const vertical = (page.y > rect.top) && (page.y < rect.bottom)
dropped = horizontal && vertical;
dropped = horizontal && vertical
}
const dragRect = draggable.getRect(draggableElement);
const dragRect = draggable.getRect(draggableElement)
if (dragRect && dropOverlap === 'center') {
const cx = dragRect.left + dragRect.width / 2;
const cy = dragRect.top + dragRect.height / 2;
const cx = dragRect.left + dragRect.width / 2
const cy = dragRect.top + dragRect.height / 2
dropped = cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom;
dropped = cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom
}
if (dragRect && utils.is.number(dropOverlap)) {
const overlapArea = (Math.max(0, Math.min(rect.right , dragRect.right ) - Math.max(rect.left, dragRect.left))
* Math.max(0, Math.min(rect.bottom, dragRect.bottom) - Math.max(rect.top , dragRect.top )));
const overlapArea = (Math.max(0, Math.min(rect.right, dragRect.right) - Math.max(rect.left, dragRect.left)) *
Math.max(0, Math.min(rect.bottom, dragRect.bottom) - Math.max(rect.top, dragRect.top)))
const overlapRatio = overlapArea / (dragRect.width * dragRect.height);
const overlapRatio = overlapArea / (dragRect.width * dragRect.height)
dropped = overlapRatio >= dropOverlap;
dropped = overlapRatio >= dropOverlap
}
if (interactable.options.drop.checker) {
dropped = interactable.options.drop.checker(dragEvent, event, dropped, interactable, dropElement, draggable, draggableElement);
dropped = interactable.options.drop.checker(dragEvent, event, dropped, interactable, dropElement, draggable, draggableElement)
}
return dropped;
return dropped
}
const drop = {

@@ -534,5 +542,5 @@ install,

overlap: 'pointer',
},
};
} as Interact.DropzoneOptions,
}
export default drop;
export default drop

27

gesture.d.ts
import { Scope } from '@interactjs/core/scope';
declare module '@interactjs/core/Interactable' {
interface Interactable {
gesturable?: (options: any) => Interactable | {
[key: string]: any;
};
}
}
declare module '@interactjs/core/defaultOptions' {
interface Defaults {
gesture?: any;
}
}
declare module '@interactjs/core/scope' {
interface Actions {
gesture?: typeof gesture;
}
}
declare function install(scope: Scope): void;
declare const gesture: {
install: typeof install;
defaults: {};
checker: (_pointer: any, _event: any, _interactable: any, _element: any, interaction: any) => {
checker(_pointer: any, _event: any, _interactable: any, _element: any, interaction: any): {
name: string;
};
getCursor: () => string;
getCursor(): string;
};
declare const _default: {
install: typeof install;
};
export default _default;
export default gesture;

21

gesture.js

@@ -30,3 +30,3 @@ import InteractEvent from '@interactjs/core/InteractEvent';

if (utils.is.object(options)) {
this.options.gesture.enabled = options.enabled === false ? false : true;
this.options.gesture.enabled = options.enabled !== false;
this.setPerAction('gesture', options);

@@ -47,3 +47,3 @@ this.setOnEvents('gesture', options);

interactions.signals.on('action-move', move);
interactions.signals.on('new', function (interaction) {
interactions.signals.on('new', (interaction) => {
interaction.gesture = {

@@ -70,4 +70,5 @@ start: { x: 0, y: 0 },

const gesture = {
install,
defaults: {},
checker: function (_pointer, _event, _interactable, _element, interaction) {
checker(_pointer, _event, _interactable, _element, interaction) {
if (interaction.pointers.length >= 2) {

@@ -78,3 +79,3 @@ return { name: 'gesture' };

},
getCursor: function () {
getCursor() {
return '';

@@ -100,6 +101,6 @@ },

interaction.gesture.prevDistance = iEvent.distance;
if (iEvent.scale !== Infinity
&& iEvent.scale !== null
&& iEvent.scale !== undefined
&& !isNaN(iEvent.scale)) {
if (iEvent.scale !== Infinity &&
iEvent.scale !== null &&
iEvent.scale !== undefined &&
!isNaN(iEvent.scale)) {
interaction.gesture.scale = iEvent.scale;

@@ -112,3 +113,3 @@ }

}
const pointers = interaction.pointers.map(p => p.pointer);
const pointers = interaction.pointers.map((p) => p.pointer);
const starting = phase === 'start';

@@ -143,3 +144,3 @@ const ending = phase === 'end';

}
export default { install };
export default gesture;
//# sourceMappingURL=gesture.js.map

163

gesture.ts

@@ -1,24 +0,5 @@

import InteractEvent from '@interactjs/core/InteractEvent';
import { Scope } from '@interactjs/core/scope';
import * as utils from '@interactjs/utils';
import InteractEvent from '@interactjs/core/InteractEvent'
import { Scope } from '@interactjs/core/scope'
import * as utils from '@interactjs/utils'
declare module '@interactjs/core/Interactable' {
interface Interactable {
gesturable?: (options: any) => Interactable | { [key: string]: any }
}
}
declare module '@interactjs/core/defaultOptions' {
interface Defaults {
gesture?: any
}
}
declare module '@interactjs/core/scope' {
interface Actions {
gesture?: typeof gesture
}
}
function install (scope: Scope) {

@@ -30,3 +11,3 @@ const {

defaults,
} = scope;
} = scope

@@ -58,26 +39,26 @@ /**

if (utils.is.object(options)) {
this.options.gesture.enabled = options.enabled === false? false: true;
this.setPerAction('gesture', options);
this.setOnEvents('gesture', options);
this.options.gesture.enabled = options.enabled !== false
this.setPerAction('gesture', options)
this.setOnEvents('gesture', options)
return this;
return this
}
if (utils.is.bool(options)) {
this.options.gesture.enabled = options;
this.options.gesture.enabled = options
return this;
return this
}
return this.options.gesture;
};
return this.options.gesture
}
interactions.signals.on('action-start', updateGestureProps);
interactions.signals.on('action-move', updateGestureProps);
interactions.signals.on('action-end', updateGestureProps);
interactions.signals.on('action-start', updateGestureProps)
interactions.signals.on('action-move', updateGestureProps)
interactions.signals.on('action-end', updateGestureProps)
interactions.signals.on('action-start', start);
interactions.signals.on('action-move', move);
interactions.signals.on('action-start', start)
interactions.signals.on('action-move', move)
interactions.signals.on('new', function (interaction) {
interactions.signals.on('new', (interaction) => {
interaction.gesture = {

@@ -94,7 +75,7 @@ start: { x: 0, y: 0 },

prevAngle : 0, // angle of the previous gesture event
};
});
}
})
actions.gesture = gesture;
actions.names.push('gesture');
actions.gesture = gesture
actions.names.push('gesture')
utils.arr.merge(actions.eventTypes, [

@@ -104,51 +85,51 @@ 'gesturestart',

'gestureend',
]);
actions.methodDict.gesture = 'gesturable';
])
actions.methodDict.gesture = 'gesturable'
defaults.gesture = gesture.defaults;
defaults.gesture = gesture.defaults
}
const gesture = {
install,
defaults: {
},
checker: function (_pointer, _event, _interactable, _element, interaction) {
checker (_pointer, _event, _interactable, _element, interaction) {
if (interaction.pointers.length >= 2) {
return { name: 'gesture' };
return { name: 'gesture' }
}
return null;
return null
},
getCursor: function () {
return '';
getCursor () {
return ''
},
};
}
function start ({ iEvent, interaction }) {
if (interaction.prepared.name !== 'gesture') { return; }
if (interaction.prepared.name !== 'gesture') { return }
iEvent.ds = 0;
iEvent.ds = 0
interaction.gesture.startDistance = interaction.gesture.prevDistance = iEvent.distance;
interaction.gesture.startAngle = interaction.gesture.prevAngle = iEvent.angle;
interaction.gesture.scale = 1;
interaction.gesture.startDistance = interaction.gesture.prevDistance = iEvent.distance
interaction.gesture.startAngle = interaction.gesture.prevAngle = iEvent.angle
interaction.gesture.scale = 1
}
function move ({ iEvent, interaction }) {
if (interaction.prepared.name !== 'gesture') { return; }
if (interaction.prepared.name !== 'gesture') { return }
iEvent.ds = iEvent.scale - interaction.gesture.scale;
iEvent.ds = iEvent.scale - interaction.gesture.scale
interaction.target.fire(iEvent);
interaction.target.fire(iEvent)
interaction.gesture.prevAngle = iEvent.angle;
interaction.gesture.prevDistance = iEvent.distance;
interaction.gesture.prevAngle = iEvent.angle
interaction.gesture.prevDistance = iEvent.distance
if (iEvent.scale !== Infinity
&& iEvent.scale !== null
&& iEvent.scale !== undefined
&& !isNaN(iEvent.scale)) {
interaction.gesture.scale = iEvent.scale;
if (iEvent.scale !== Infinity &&
iEvent.scale !== null &&
iEvent.scale !== undefined &&
!isNaN(iEvent.scale)) {
interaction.gesture.scale = iEvent.scale
}

@@ -158,38 +139,38 @@ }

function updateGestureProps ({ interaction, iEvent, event, phase }) {
if (interaction.prepared.name !== 'gesture') { return; }
if (interaction.prepared.name !== 'gesture') { return }
const pointers = interaction.pointers.map(p => p.pointer);
const starting = phase === 'start';
const ending = phase === 'end';
const deltaSource = interaction.target.options.deltaSource;
const pointers = interaction.pointers.map((p) => p.pointer)
const starting = phase === 'start'
const ending = phase === 'end'
const deltaSource = interaction.target.options.deltaSource
iEvent.touches = [pointers[0].pointer, pointers[1].pointer];
iEvent.touches = [pointers[0].pointer, pointers[1].pointer]
if (starting) {
iEvent.distance = utils.pointer.touchDistance(pointers, deltaSource);
iEvent.box = utils.pointer.touchBBox(pointers);
iEvent.scale = 1;
iEvent.ds = 0;
iEvent.angle = utils.pointer.touchAngle(pointers, deltaSource);
iEvent.da = 0;
iEvent.distance = utils.pointer.touchDistance(pointers, deltaSource)
iEvent.box = utils.pointer.touchBBox(pointers)
iEvent.scale = 1
iEvent.ds = 0
iEvent.angle = utils.pointer.touchAngle(pointers, deltaSource)
iEvent.da = 0
}
else if (ending || event instanceof InteractEvent) {
iEvent.distance = interaction.prevEvent.distance;
iEvent.box = interaction.prevEvent.box;
iEvent.scale = interaction.prevEvent.scale;
iEvent.ds = iEvent.scale - 1;
iEvent.angle = interaction.prevEvent.angle;
iEvent.da = iEvent.angle - interaction.gesture.startAngle;
iEvent.distance = interaction.prevEvent.distance
iEvent.box = interaction.prevEvent.box
iEvent.scale = interaction.prevEvent.scale
iEvent.ds = iEvent.scale - 1
iEvent.angle = interaction.prevEvent.angle
iEvent.da = iEvent.angle - interaction.gesture.startAngle
}
else {
iEvent.distance = utils.pointer.touchDistance(pointers, deltaSource);
iEvent.box = utils.pointer.touchBBox(pointers);
iEvent.scale = iEvent.distance / interaction.gesture.startDistance;
iEvent.angle = utils.pointer.touchAngle(pointers, deltaSource);
iEvent.distance = utils.pointer.touchDistance(pointers, deltaSource)
iEvent.box = utils.pointer.touchBBox(pointers)
iEvent.scale = iEvent.distance / interaction.gesture.startDistance
iEvent.angle = utils.pointer.touchAngle(pointers, deltaSource)
iEvent.ds = iEvent.scale - interaction.gesture.prevScale;
iEvent.da = iEvent.angle - interaction.gesture.prevAngle;
iEvent.ds = iEvent.scale - interaction.gesture.prevScale
iEvent.da = iEvent.angle - interaction.gesture.prevAngle
}
}
export default { install };
export default gesture

4

index.d.ts

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

import drag from './drag';
import drop from './drop';
import gesture from './gesture';
import resize from './resize';
import drag from './drag';
import drop from './drop';
declare function install(scope: any): void;
export { gesture, resize, drag, drop, install, };

4

index.js

@@ -0,5 +1,5 @@

import drag from './drag';
import drop from './drop';
import gesture from './gesture';
import resize from './resize';
import drag from './drag';
import drop from './drop';
function install(scope) {

@@ -6,0 +6,0 @@ gesture.install(scope);

18

index.ts

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

import gesture from './gesture';
import resize from './resize';
import drag from './drag';
import drop from './drop';
import drag from './drag'
import drop from './drop'
import gesture from './gesture'
import resize from './resize'
function install (scope) {
gesture.install(scope);
resize.install(scope);
drag.install(scope);
drop.install(scope);
gesture.install(scope)
resize.install(scope)
drag.install(scope)
drop.install(scope)
}

@@ -19,2 +19,2 @@

install,
};
}

12

package.json
{
"name": "@interactjs/actions",
"version": "1.4.0-alpha.20+sha.ce0da21",
"version": "1.4.0-alpha.21+sha.cdc1d5f",
"peerDependencies": {
"@interactjs/core": "1.4.0-alpha.20+sha.ce0da21",
"@interactjs/utils": "1.4.0-alpha.20+sha.ce0da21"
"@interactjs/core": "1.4.0-alpha.21+sha.cdc1d5f",
"@interactjs/utils": "1.4.0-alpha.21+sha.cdc1d5f"
},
"devDependencies": {
"@interactjs/_dev": "1.4.0-alpha.20+sha.ce0da21",
"@interactjs/core": "1.4.0-alpha.20+sha.ce0da21",
"@interactjs/utils": "1.4.0-alpha.20+sha.ce0da21"
"@interactjs/_dev": "1.4.0-alpha.21+sha.cdc1d5f",
"@interactjs/core": "1.4.0-alpha.21+sha.cdc1d5f",
"@interactjs/utils": "1.4.0-alpha.21+sha.cdc1d5f"
},

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

42

resize.d.ts

@@ -0,37 +1,12 @@

import { Action, Interaction } from '@interactjs/core/Interaction';
import { Scope } from '@interactjs/core/scope';
export declare type EdgeName = 'top' | 'left' | 'bottom' | 'right';
declare module '@interactjs/core/Interactable' {
interface Interactable {
resizable?: (options: any) => Interactable | {
[key: string]: any;
};
}
}
declare module '@interactjs/core/defaultOptions' {
interface Defaults {
resize?: any;
}
}
declare module '@interactjs/core/scope' {
interface Actions {
resize?: typeof resize;
}
}
declare function install(scope: Scope): void;
declare const resize: {
defaults: {
square: boolean;
preserveAspectRatio: boolean;
axis: string;
margin: number;
edges: any;
invert: string;
};
checker: (_pointer: any, _event: any, interactable: any, element: any, interaction: any, rect: any) => {
install: typeof install;
defaults: import("../interactjs/types").ResizableOptions;
checker(_pointer: import("../interactjs/types").PointerType, _event: import("../interactjs/types").PointerEventType, interactable: import("@interactjs/core/Interactable").Interactable, element: Element, interaction: Interaction, rect: import("../interactjs/types").Rect): {
name: string;
edges: {
left: boolean;
right: boolean;
top: boolean;
bottom: boolean;
[edge: string]: boolean;
};

@@ -57,8 +32,5 @@ axes?: undefined;

};
getCursor: (action: any) => any;
getCursor(action: Action): string;
defaultMargin: number;
};
declare const _default: {
install: typeof install;
};
export default _default;
export default resize;

35

resize.js

@@ -5,5 +5,6 @@ import * as utils from '@interactjs/utils';

/** @lends Interactable */
Interactable, interactions, defaults, } = scope;
Interactable, // tslint:disable-line no-shadowed-variable
interactions, defaults, } = scope;
// Less Precision with touch input
interactions.signals.on('new', function (interaction) {
interactions.signals.on('new', (interaction) => {
interaction.resizeAxes = 'xy';

@@ -78,2 +79,3 @@ });

const resize = {
install,
defaults: {

@@ -96,3 +98,3 @@ square: false,

},
checker: function (_pointer, _event, interactable, element, interaction, rect) {
checker(_pointer, _event, interactable, element, interaction, rect) {
if (!rect) {

@@ -109,3 +111,3 @@ return null;

for (const edge in resizeEdges) {
resizeEdges[edge] = checkResizeEdge(edge, resizeOptions.edges[edge], page, interaction._eventTarget, element, rect, resizeOptions.margin || this.defaultMargin);
resizeEdges[edge] = checkResizeEdge(edge, resizeOptions.edges[edge], page, interaction._latestPointer.eventTarget, element, rect, resizeOptions.margin || this.defaultMargin);
}

@@ -135,5 +137,6 @@ resizeEdges.left = resizeEdges.left && !resizeEdges.right;

cursors: null,
getCursor: function (action) {
getCursor(action) {
const cursors = resize.cursors;
if (action.axis) {
return resize.cursors[action.name + action.axis];
return cursors[action.name + action.axis];
}

@@ -148,4 +151,5 @@ else if (action.edges) {

}
return resize.cursors[cursorKey];
return cursors[cursorKey];
}
return null;
},

@@ -156,3 +160,3 @@ defaultMargin: null,

if (utils.is.object(options)) {
interactable.options.resize.enabled = options.enabled === false ? false : true;
interactable.options.resize.enabled = options.enabled !== false;
interactable.setPerAction('resize', options);

@@ -180,3 +184,2 @@ interactable.setOnEvents('resize', options);

}
;
function checkResizeEdge(name, value, page, element, interactableElement, rect, margin) {

@@ -293,4 +296,8 @@ // false, '', undefined, null

delta: {
left: 0, right: 0, width: 0,
top: 0, bottom: 0, height: 0,
left: 0,
right: 0,
width: 0,
top: 0,
bottom: 0,
height: 0,
},

@@ -323,4 +330,4 @@ };

edges = interaction.prepared._linkedEdges;
if ((originalEdges.left && originalEdges.bottom)
|| (originalEdges.right && originalEdges.top)) {
if ((originalEdges.left && originalEdges.bottom) ||
(originalEdges.right && originalEdges.top)) {
eventDelta.y = -eventDelta.x / startAspectRatio;

@@ -406,3 +413,3 @@ }

}
export default { install };
export default resize;
//# sourceMappingURL=resize.js.map

305

resize.ts

@@ -1,24 +0,8 @@

import { Scope } from '@interactjs/core/scope';
import * as utils from '@interactjs/utils';
import { Action, Interaction } from '@interactjs/core/Interaction'
import { Scope } from '@interactjs/core/scope'
import * as utils from '@interactjs/utils'
type Interactable = import ('@interactjs/core/Interactable').default
export type EdgeName = 'top' | 'left' | 'bottom' | 'right'
declare module '@interactjs/core/Interactable' {
interface Interactable {
resizable?: (options: any) => Interactable | { [key: string]: any }
}
}
declare module '@interactjs/core/defaultOptions' {
interface Defaults {
resize?: any
}
}
declare module '@interactjs/core/scope' {
interface Actions {
resize?: typeof resize
}
}
function install (scope: Scope) {

@@ -29,21 +13,21 @@ const {

/** @lends Interactable */
Interactable,
Interactable, // tslint:disable-line no-shadowed-variable
interactions,
defaults,
} = scope;
} = scope
// Less Precision with touch input
interactions.signals.on('new', function (interaction) {
interaction.resizeAxes = 'xy';
});
interactions.signals.on('new', (interaction: Interaction) => {
interaction.resizeAxes = 'xy'
})
interactions.signals.on('action-start', start);
interactions.signals.on('action-move', move);
interactions.signals.on('action-start', start)
interactions.signals.on('action-move', move)
interactions.signals.on('action-start', updateEventAxes);
interactions.signals.on('action-move', updateEventAxes);
interactions.signals.on('action-start', updateEventAxes)
interactions.signals.on('action-move', updateEventAxes)
resize.cursors = initCursors(browser);
resize.defaultMargin = browser.supportsTouch || browser.supportsPointerEvent? 20: 10;
resize.cursors = initCursors(browser)
resize.defaultMargin = browser.supportsTouch || browser.supportsPointerEvent ? 20 : 10

@@ -99,4 +83,4 @@ /**

actions.resize = resize;
actions.names.push('resize');
actions.resize = resize
actions.names.push('resize')
utils.arr.merge(actions.eventTypes, [

@@ -108,9 +92,10 @@ 'resizestart',

'resizeend',
]);
actions.methodDict.resize = 'resizable';
])
actions.methodDict.resize = 'resizable'
defaults.resize = resize.defaults;
defaults.resize = resize.defaults
}
const resize = {
install,
defaults: {

@@ -135,13 +120,20 @@ square: false,

invert: 'none',
},
} as Interact.ResizableOptions,
checker: function (_pointer, _event, interactable, element, interaction, rect) {
if (!rect) { return null; }
checker (
_pointer: Interact.PointerType,
_event: Interact.PointerEventType,
interactable: Interactable,
element: Element,
interaction: Interaction,
rect: Interact.Rect
) {
if (!rect) { return null }
const page = utils.extend({}, interaction.coords.cur.page);
const options = interactable.options;
const page = utils.extend({}, interaction.coords.cur.page)
const options = interactable.options
if (options.resize.enabled) {
const resizeOptions = options.resize;
const resizeEdges = { left: false, right: false, top: false, bottom: false };
const resizeOptions = options.resize
const resizeEdges: { [edge: string]: boolean } = { left: false, right: false, top: false, bottom: false }

@@ -154,10 +146,10 @@ // if using resize.edges

page,
interaction._eventTarget,
interaction._latestPointer.eventTarget,
element,
rect,
resizeOptions.margin || this.defaultMargin);
resizeOptions.margin || this.defaultMargin)
}
resizeEdges.left = resizeEdges.left && !resizeEdges.right;
resizeEdges.top = resizeEdges.top && !resizeEdges.bottom;
resizeEdges.left = resizeEdges.left && !resizeEdges.right
resizeEdges.top = resizeEdges.top && !resizeEdges.bottom

@@ -168,8 +160,8 @@ if (resizeEdges.left || resizeEdges.right || resizeEdges.top || resizeEdges.bottom) {

edges: resizeEdges,
};
}
}
}
else {
const right = options.resize.axis !== 'y' && page.x > (rect.right - this.defaultMargin);
const bottom = options.resize.axis !== 'x' && page.y > (rect.bottom - this.defaultMargin);
const right = options.resize.axis !== 'y' && page.x > (rect.right - this.defaultMargin)
const bottom = options.resize.axis !== 'x' && page.y > (rect.bottom - this.defaultMargin)

@@ -179,4 +171,4 @@ if (right || bottom) {

name: 'resize',
axes: (right? 'x' : '') + (bottom? 'y' : ''),
};
axes: (right ? 'x' : '') + (bottom ? 'y' : ''),
}
}

@@ -186,61 +178,64 @@ }

return null;
return null
},
cursors: null as ReturnType<typeof initCursors>,
cursors: null as unknown as ReturnType<typeof initCursors>,
getCursor: function (action) {
getCursor (action: Action) {
const cursors = resize.cursors as { [key: string]: string }
if (action.axis) {
return resize.cursors[action.name + action.axis];
return cursors[action.name + action.axis]
}
else if (action.edges) {
let cursorKey = '';
const edgeNames = ['top', 'bottom', 'left', 'right'];
let cursorKey = ''
const edgeNames = ['top', 'bottom', 'left', 'right']
for (let i = 0; i < 4; i++) {
if (action.edges[edgeNames[i]]) {
cursorKey += edgeNames[i];
cursorKey += edgeNames[i]
}
}
return resize.cursors[cursorKey];
return cursors[cursorKey]
}
return null
},
defaultMargin: null as number,
};
}
function resizable (interactable, options, scope: Scope) {
if (utils.is.object(options)) {
interactable.options.resize.enabled = options.enabled === false? false: true;
interactable.setPerAction('resize', options);
interactable.setOnEvents('resize', options);
interactable.options.resize.enabled = options.enabled !== false
interactable.setPerAction('resize', options)
interactable.setOnEvents('resize', options)
if (/^x$|^y$|^xy$/.test(options.axis)) {
interactable.options.resize.axis = options.axis;
interactable.options.resize.axis = options.axis
}
else if (options.axis === null) {
interactable.options.resize.axis = scope.defaults.resize.axis;
interactable.options.resize.axis = scope.defaults.resize.axis
}
if (utils.is.bool(options.preserveAspectRatio)) {
interactable.options.resize.preserveAspectRatio = options.preserveAspectRatio;
interactable.options.resize.preserveAspectRatio = options.preserveAspectRatio
}
else if (utils.is.bool(options.square)) {
interactable.options.resize.square = options.square;
interactable.options.resize.square = options.square
}
return interactable;
return interactable
}
if (utils.is.bool(options)) {
interactable.options.resize.enabled = options;
interactable.options.resize.enabled = options
return interactable;
return interactable
}
return interactable.options.resize;
};
return interactable.options.resize
}
function checkResizeEdge (name, value, page, element, interactableElement, rect, margin) {
// false, '', undefined, null
if (!value) { return false; }
if (!value) { return false }

@@ -250,26 +245,26 @@ // true value, use pointer coords and element rect

// if dimensions are negative, "switch" edges
const width = utils.is.number(rect.width )? rect.width : rect.right - rect.left;
const height = utils.is.number(rect.height)? rect.height : rect.bottom - rect.top ;
const width = utils.is.number(rect.width) ? rect.width : rect.right - rect.left
const height = utils.is.number(rect.height) ? rect.height : rect.bottom - rect.top
// don't use margin greater than half the relevent dimension
margin = Math.min(margin, (name === 'left' || name === 'right' ? width : height) / 2);
margin = Math.min(margin, (name === 'left' || name === 'right' ? width : height) / 2)
if (width < 0) {
if (name === 'left' ) { name = 'right'; }
else if (name === 'right') { name = 'left' ; }
if (name === 'left') { name = 'right' }
else if (name === 'right') { name = 'left' }
}
if (height < 0) {
if (name === 'top' ) { name = 'bottom'; }
else if (name === 'bottom') { name = 'top' ; }
if (name === 'top') { name = 'bottom' }
else if (name === 'bottom') { name = 'top' }
}
if (name === 'left' ) { return page.x < ((width >= 0? rect.left: rect.right ) + margin); }
if (name === 'top' ) { return page.y < ((height >= 0? rect.top : rect.bottom) + margin); }
if (name === 'left') { return page.x < ((width >= 0 ? rect.left : rect.right) + margin) }
if (name === 'top') { return page.y < ((height >= 0 ? rect.top : rect.bottom) + margin) }
if (name === 'right' ) { return page.x > ((width >= 0? rect.right : rect.left) - margin); }
if (name === 'bottom') { return page.y > ((height >= 0? rect.bottom: rect.top ) - margin); }
if (name === 'right') { return page.x > ((width >= 0 ? rect.right : rect.left) - margin) }
if (name === 'bottom') { return page.y > ((height >= 0 ? rect.bottom : rect.top) - margin) }
}
// the remaining checks require an element
if (!utils.is.element(element)) { return false; }
if (!utils.is.element(element)) { return false }

@@ -280,3 +275,3 @@ return utils.is.element(value)

// otherwise check if element matches value as selector
: utils.dom.matchesUpTo(element, value, interactableElement);
: utils.dom.matchesUpTo(element, value, interactableElement)
}

@@ -316,7 +311,7 @@

if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) {
return;
return
}
const startRect = interaction.target.getRect(interaction.element);
const resizeOptions = interaction.target.options.resize;
const startRect = interaction.target.getRect(interaction.element)
const resizeOptions = interaction.target.options.resize

@@ -330,13 +325,13 @@ /*

if (resizeOptions.square || resizeOptions.preserveAspectRatio) {
const linkedEdges = utils.extend({}, interaction.prepared.edges);
const linkedEdges = utils.extend({}, interaction.prepared.edges)
linkedEdges.top = linkedEdges.top || (linkedEdges.left && !linkedEdges.bottom);
linkedEdges.left = linkedEdges.left || (linkedEdges.top && !linkedEdges.right );
linkedEdges.bottom = linkedEdges.bottom || (linkedEdges.right && !linkedEdges.top );
linkedEdges.right = linkedEdges.right || (linkedEdges.bottom && !linkedEdges.left );
linkedEdges.top = linkedEdges.top || (linkedEdges.left && !linkedEdges.bottom)
linkedEdges.left = linkedEdges.left || (linkedEdges.top && !linkedEdges.right)
linkedEdges.bottom = linkedEdges.bottom || (linkedEdges.right && !linkedEdges.top)
linkedEdges.right = linkedEdges.right || (linkedEdges.bottom && !linkedEdges.left)
interaction.prepared._linkedEdges = linkedEdges;
interaction.prepared._linkedEdges = linkedEdges
}
else {
interaction.prepared._linkedEdges = null;
interaction.prepared._linkedEdges = null
}

@@ -346,3 +341,3 @@

if (resizeOptions.preserveAspectRatio) {
interaction.resizeStartAspectRatio = startRect.width / startRect.height;
interaction.resizeStartAspectRatio = startRect.width / startRect.height
}

@@ -356,29 +351,33 @@

delta : {
left: 0, right : 0, width : 0,
top : 0, bottom: 0, height: 0,
left: 0,
right : 0,
width : 0,
top : 0,
bottom: 0,
height: 0,
},
};
}
iEvent.rect = interaction.resizeRects.inverted;
iEvent.deltaRect = interaction.resizeRects.delta;
iEvent.rect = interaction.resizeRects.inverted
iEvent.deltaRect = interaction.resizeRects.delta
}
function move ({ iEvent, interaction }) {
if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) { return; }
if (interaction.prepared.name !== 'resize' || !interaction.prepared.edges) { return }
const resizeOptions = interaction.target.options.resize;
const invert = resizeOptions.invert;
const invertible = invert === 'reposition' || invert === 'negate';
const resizeOptions = interaction.target.options.resize
const invert = resizeOptions.invert
const invertible = invert === 'reposition' || invert === 'negate'
let edges = interaction.prepared.edges;
let edges = interaction.prepared.edges
// eslint-disable-next-line no-shadow
const start = interaction.resizeRects.start;
const current = interaction.resizeRects.current;
const inverted = interaction.resizeRects.inverted;
const deltaRect = interaction.resizeRects.delta;
const previous = utils.extend(interaction.resizeRects.previous, inverted);
const originalEdges = edges;
const start = interaction.resizeRects.start
const current = interaction.resizeRects.current
const inverted = interaction.resizeRects.inverted
const deltaRect = interaction.resizeRects.delta
const previous = utils.extend(interaction.resizeRects.previous, inverted)
const originalEdges = edges
const eventDelta = utils.extend({}, iEvent.delta);
const eventDelta = utils.extend({}, iEvent.delta)

@@ -389,39 +388,39 @@ if (resizeOptions.preserveAspectRatio || resizeOptions.square) {

? interaction.resizeStartAspectRatio
: 1;
: 1
edges = interaction.prepared._linkedEdges;
edges = interaction.prepared._linkedEdges
if ((originalEdges.left && originalEdges.bottom)
|| (originalEdges.right && originalEdges.top)) {
eventDelta.y = -eventDelta.x / startAspectRatio;
if ((originalEdges.left && originalEdges.bottom) ||
(originalEdges.right && originalEdges.top)) {
eventDelta.y = -eventDelta.x / startAspectRatio
}
else if (originalEdges.left || originalEdges.right ) { eventDelta.y = eventDelta.x / startAspectRatio; }
else if (originalEdges.top || originalEdges.bottom) { eventDelta.x = eventDelta.y * startAspectRatio; }
else if (originalEdges.left || originalEdges.right) { eventDelta.y = eventDelta.x / startAspectRatio }
else if (originalEdges.top || originalEdges.bottom) { eventDelta.x = eventDelta.y * startAspectRatio }
}
// update the 'current' rect without modifications
if (edges.top ) { current.top += eventDelta.y; }
if (edges.bottom) { current.bottom += eventDelta.y; }
if (edges.left ) { current.left += eventDelta.x; }
if (edges.right ) { current.right += eventDelta.x; }
if (edges.top) { current.top += eventDelta.y }
if (edges.bottom) { current.bottom += eventDelta.y }
if (edges.left) { current.left += eventDelta.x }
if (edges.right) { current.right += eventDelta.x }
if (invertible) {
// if invertible, copy the current rect
utils.extend(inverted, current);
utils.extend(inverted, current)
if (invert === 'reposition') {
// swap edge values if necessary to keep width/height positive
let swap;
let swap
if (inverted.top > inverted.bottom) {
swap = inverted.top;
swap = inverted.top
inverted.top = inverted.bottom;
inverted.bottom = swap;
inverted.top = inverted.bottom
inverted.bottom = swap
}
if (inverted.left > inverted.right) {
swap = inverted.left;
swap = inverted.left
inverted.left = inverted.right;
inverted.right = swap;
inverted.left = inverted.right
inverted.right = swap
}

@@ -432,42 +431,42 @@ }

// if not invertible, restrict to minimum of 0x0 rect
inverted.top = Math.min(current.top, start.bottom);
inverted.bottom = Math.max(current.bottom, start.top);
inverted.left = Math.min(current.left, start.right);
inverted.right = Math.max(current.right, start.left);
inverted.top = Math.min(current.top, start.bottom)
inverted.bottom = Math.max(current.bottom, start.top)
inverted.left = Math.min(current.left, start.right)
inverted.right = Math.max(current.right, start.left)
}
inverted.width = inverted.right - inverted.left;
inverted.height = inverted.bottom - inverted.top ;
inverted.width = inverted.right - inverted.left
inverted.height = inverted.bottom - inverted.top
for (const edge in inverted) {
deltaRect[edge] = inverted[edge] - previous[edge];
deltaRect[edge] = inverted[edge] - previous[edge]
}
iEvent.edges = interaction.prepared.edges;
iEvent.rect = inverted;
iEvent.deltaRect = deltaRect;
iEvent.edges = interaction.prepared.edges
iEvent.rect = inverted
iEvent.deltaRect = deltaRect
}
function updateEventAxes ({ interaction, iEvent, action }) {
if (action !== 'resize' || !interaction.resizeAxes) { return; }
if (action !== 'resize' || !interaction.resizeAxes) { return }
const options = interaction.target.options;
const options = interaction.target.options
if (options.resize.square) {
if (interaction.resizeAxes === 'y') {
iEvent.delta.x = iEvent.delta.y;
iEvent.delta.x = iEvent.delta.y
}
else {
iEvent.delta.y = iEvent.delta.x;
iEvent.delta.y = iEvent.delta.x
}
iEvent.axes = 'xy';
iEvent.axes = 'xy'
}
else {
iEvent.axes = interaction.resizeAxes;
iEvent.axes = interaction.resizeAxes
if (interaction.resizeAxes === 'x') {
iEvent.delta.y = 0;
iEvent.delta.y = 0
}
else if (interaction.resizeAxes === 'y') {
iEvent.delta.x = 0;
iEvent.delta.x = 0
}

@@ -477,2 +476,2 @@ }

export default { install };
export default resize

154

tests/drag.js

@@ -1,20 +0,19 @@

import test from '@interactjs/_dev/test/test';
import * as helpers from '@interactjs/core/tests/helpers';
import interactions from '@interactjs/core/interactions';
import pointerUtils from '@interactjs/utils/pointerUtils';
import { extend } from '@interactjs/utils';
import drag from '../drag';
import test from '@interactjs/_dev/test/test'
import * as helpers from '@interactjs/core/tests/helpers'
import interactions from '@interactjs/core/interactions'
import pointerUtils from '@interactjs/utils/pointerUtils'
import { extend } from '@interactjs/utils'
import drag from '../drag'
test('drag action init', t => {
const scope = helpers.mockScope();
const scope = helpers.mockScope()
drag.install(scope);
drag.install(scope)
t.ok(scope.actions.names.includes('drag'), '"drag" in actions.names');
t.equal(scope.actions.methodDict.drag, 'draggable');
t.equal(typeof scope.Interactable.prototype.draggable, 'function');
t.ok(scope.actions.names.includes('drag'), '"drag" in actions.names')
t.equal(scope.actions.methodDict.drag, 'draggable')
t.equal(typeof scope.Interactable.prototype.draggable, 'function')
t.end();
});
t.end()
})

@@ -27,31 +26,30 @@ test('Interactable.draggable method', t => {

draggable: drag.draggable,
setPerAction: () => calledSetPerAction = true,
setOnEvents: () => calledSetOnEvents = true,
};
let calledSetPerAction = false;
let calledSetOnEvents = false;
setPerAction: () => { calledSetPerAction = true },
setOnEvents: () => { calledSetOnEvents = true },
}
let calledSetPerAction = false
let calledSetOnEvents = false
t.equal(interactable.draggable(), interactable.options.drag,
'interactable.draggable() returns interactable.options.drag object');
'interactable.draggable() returns interactable.options.drag object')
interactable.draggable(true);
interactable.draggable(true)
t.ok(interactable.options.drag.enabled,
'calling `interactable.draggable(true)` enables dragging');
'calling `interactable.draggable(true)` enables dragging')
interactable.draggable(false);
interactable.draggable(false)
t.notOk(interactable.options.drag.enabled,
'calling `interactable.draggable(false)` disables dragging');
'calling `interactable.draggable(false)` disables dragging')
interactable.draggable({});
interactable.draggable({})
t.ok(interactable.options.drag.enabled,
'calling `interactable.draggable({})` enables dragging');
'calling `interactable.draggable({})` enables dragging')
t.ok(calledSetOnEvents,
'calling `interactable.draggable({})` calls this.setOnEvents');
'calling `interactable.draggable({})` calls this.setOnEvents')
t.ok(calledSetPerAction,
'calling `interactable.draggable({})` calls this.setPerAction');
'calling `interactable.draggable({})` calls this.setPerAction')
interactable.draggable({ enabled: false });
interactable.draggable({ enabled: false })
t.notOk(interactable.options.drag.enabled,
'calling `interactable.draggable({ enabled: false })` disables dragging');
'calling `interactable.draggable({ enabled: false })` disables dragging')

@@ -61,30 +59,30 @@ const axisSettings = {

startAxis: ['x', 'y', 'xy'],
};
}
for (const axis in axisSettings) {
for (let i = 0; i < axisSettings[axis].length; i++) {
const options = {};
const value = axisSettings[axis][i];
const options = {}
const value = axisSettings[axis][i]
options[axis] = value;
options[axis] = value
interactable.draggable(options);
interactable.draggable(options)
t.equal(interactable.options.drag[axis], value,
'`' + axis + ': "' + value + '"` is set correctly');
'`' + axis + ': "' + value + '"` is set correctly')
delete interactable.options.drag[axis];
delete interactable.options.drag[axis]
}
}
t.end();
});
t.end()
})
test('drag axis', t => {
const scope = helpers.mockScope();
const scope = helpers.mockScope()
interactions.install(scope);
drag.install(scope);
interactions.install(scope)
drag.install(scope)
const interaction = scope.interactions.new({});
const element = {};
const interaction = scope.interactions.new({})
const element = {}
const interactable = {

@@ -95,6 +93,6 @@ options: {

target: element,
};
const iEvent = { page: {}, client: {}, delta: {}, type: 'dragmove' };
}
const iEvent = { page: {}, client: {}, delta: {}, type: 'dragmove' }
const opposites = { x: 'y', y: 'x' };
const opposites = { x: 'y', y: 'x' }
const eventCoords = {

@@ -104,35 +102,34 @@ page: { x: -1, y: -2 },

delta: { x: -5, y: -6 },
};
const coords = helpers.newCoordsSet();
}
const coords = helpers.newCoordsSet()
resetCoords();
interaction.prepared = { name: 'drag', axis: 'xy' };
interaction.target = interactable;
resetCoords()
interaction.prepared = { name: 'drag', axis: 'xy' }
interaction.target = interactable
t.test('xy (any direction)', tt => {
scope.interactions.signals.fire('before-action-move', { interaction });
scope.interactions.signals.fire('before-action-move', { interaction })
tt.deepEqual(interaction.coords.start, coords.start,
'coords.start is not modified');
'coords.start is not modified')
tt.deepEqual(interaction.coords.delta, coords.delta,
'coords.delta is not modified');
'coords.delta is not modified')
scope.interactions.signals.fire('action-move', { iEvent, interaction });
scope.interactions.signals.fire('action-move', { iEvent, interaction })
tt.deepEqual(iEvent.page, eventCoords.page, 'page coords are not modified');
tt.deepEqual(iEvent.delta, eventCoords.delta, 'delta is not modified');
tt.deepEqual(iEvent.page, eventCoords.page, 'page coords are not modified')
tt.deepEqual(iEvent.delta, eventCoords.delta, 'delta is not modified')
tt.end();
});
tt.end()
})
for (const axis in opposites) {
const opposite = opposites[axis];
const opposite = opposites[axis]
t.test(axis + '-axis', tt => {
resetCoords()
interaction.prepared.axis = axis
resetCoords();
interaction.prepared.axis = axis;
scope.interactions.signals.fire('action-move', { iEvent, interaction })
scope.interactions.signals.fire('action-move', { iEvent, interaction });
tt.deepEqual(

@@ -144,3 +141,3 @@ iEvent.delta,

},
`opposite axis (${opposite}) delta is 0; target axis (${axis}) delta is not modified`);
`opposite axis (${opposite}) delta is 0; target axis (${axis}) delta is not modified`)

@@ -154,3 +151,3 @@ tt.deepEqual(

`page.${opposite} is coords.start value`
);
)

@@ -161,3 +158,3 @@ tt.equal(

`page.${axis} is not modified`
);
)

@@ -168,3 +165,3 @@ tt.equal(

`client.${opposite} is coords.start value`
);
)
tt.equal(

@@ -174,19 +171,18 @@ iEvent.client[axis],

`client.${axis} is not modified`
);
)
tt.end();
});
tt.end()
})
}
t.end();
t.end()
function resetCoords () {
pointerUtils.copyCoords(iEvent, eventCoords);
extend(iEvent.delta, eventCoords.delta);
pointerUtils.copyCoords(iEvent, eventCoords)
extend(iEvent.delta, eventCoords.delta)
for (const prop in coords) {
pointerUtils.copyCoords(interaction.coords[prop], coords[prop]);
pointerUtils.copyCoords(interaction.coords[prop], coords[prop])
}
}
});
})

102

tests/drop/DropEvent.js

@@ -1,15 +0,15 @@

import test from '@interactjs/_dev/test/test';
import * as utils from '@interactjs/utils';
import DropEvent from '../../drop/DropEvent';
import test from '@interactjs/_dev/test/test'
import * as utils from '@interactjs/utils'
import DropEvent from '../../drop/DropEvent'
const dz1 = { target: 'dz1', fire (event) { this.fired = event; } };
const dz2 = { target: 'dz2', fire (event) { this.fired = event; } };
const el1 = Symbol('el1');
const el2 = Symbol('el2');
const interactable = Symbol('interactable');
const dragElement = Symbol('drag-el');
const dz1 = { target: 'dz1', fire (event) { this.fired = event } }
const dz2 = { target: 'dz2', fire (event) { this.fired = event } }
const el1 = Symbol('el1')
const el2 = Symbol('el2')
const interactable = Symbol('interactable')
const dragElement = Symbol('drag-el')
test('DropEvent constructor', t => {
const interaction = { dropStatus: {} };
const dragEvent = Object.freeze({ interaction, interactable, target: dragElement, timeStamp: 10 });
const interaction = { dropStatus: {} }
const dragEvent = Object.freeze({ interaction, interactable, target: dragElement, timeStamp: 10 })

@@ -24,22 +24,22 @@ utils.extend(interaction.dropStatus, {

events: {},
});
})
const dropmove = new DropEvent(interaction.dropStatus, dragEvent, 'dropmove');
const dropmove = new DropEvent(interaction.dropStatus, dragEvent, 'dropmove')
t.equal(dropmove.target, el1, 'dropmove uses dropStatus.cur.element');
t.equal(dropmove.dropzone, dz1, 'dropmove uses dropStatus.cur.dropzone');
t.equal(dropmove.relatedTarget, dragElement);
t.equal(dropmove.target, el1, 'dropmove uses dropStatus.cur.element')
t.equal(dropmove.dropzone, dz1, 'dropmove uses dropStatus.cur.dropzone')
t.equal(dropmove.relatedTarget, dragElement)
const dragleave = new DropEvent(interaction.dropStatus, dragEvent, 'dragleave');
const dragleave = new DropEvent(interaction.dropStatus, dragEvent, 'dragleave')
t.equal(dragleave.target, el2, 'dropmove uses dropStatus.prev.element');
t.equal(dragleave.dropzone, dz2, 'dropmove uses dropStatus.prev.dropzone');
t.equal(dragleave.relatedTarget, dragElement);
t.equal(dragleave.target, el2, 'dropmove uses dropStatus.prev.element')
t.equal(dragleave.dropzone, dz2, 'dropmove uses dropStatus.prev.dropzone')
t.equal(dragleave.relatedTarget, dragElement)
t.end();
});
t.end()
})
test('DropEvent.reject()', t => {
const interaction = { dropStatus: {} };
const dragEvent = Object.freeze({ interaction, interactable, target: dragElement, timeStamp: 10 });
const interaction = { dropStatus: {} }
const dragEvent = Object.freeze({ interaction, interactable, target: dragElement, timeStamp: 10 })

@@ -54,14 +54,14 @@ utils.extend(interaction.dropStatus, {

events: {},
});
})
const dropactivate = new DropEvent(interaction.dropStatus, dragEvent, 'dropactivate');
const dropactivate = new DropEvent(interaction.dropStatus, dragEvent, 'dropactivate')
dropactivate.dropzone = dz1;
dropactivate.target = el1;
dropactivate.reject();
dropactivate.dropzone = dz1
dropactivate.target = el1
dropactivate.reject()
t.ok(dropactivate.propagationStopped && dropactivate.immediatePropagationStopped,
'rejected event propagation is stopped');
'rejected event propagation is stopped')
t.equal(dz1.fired.type, 'dropdeactivate', 'dropdeactivate is fired on rejected dropzone');
t.equal(dz1.fired.type, 'dropdeactivate', 'dropdeactivate is fired on rejected dropzone')

@@ -71,3 +71,3 @@ t.deepEqual(

[{ dropzone: dz2, element: el2 }],
'activeDrop of rejected dropactivate event is removed');
'activeDrop of rejected dropactivate event is removed')

@@ -77,3 +77,3 @@ t.deepEqual(

{ dropzone: null, element: null },
'dropStatus.cur dropzone and element are set to null after rejecting dropactivate');
'dropStatus.cur dropzone and element are set to null after rejecting dropactivate')

@@ -84,7 +84,7 @@ utils.extend(interaction.dropStatus, {

events: {},
});
})
const dropmove = new DropEvent(interaction.dropStatus, dragEvent, 'dropmove');
const dropmove = new DropEvent(interaction.dropStatus, dragEvent, 'dropmove')
dropmove.reject();
dropmove.reject()

@@ -94,26 +94,26 @@ t.deepEqual(

{ dropzone: dz1, element: el1 },
'dropStatus.cur remains the same after rejecting non activate event');
'dropStatus.cur remains the same after rejecting non activate event')
t.ok(interaction.dropStatus.rejected, 'dropStatus.rejected === true');
t.ok(interaction.dropStatus.rejected, 'dropStatus.rejected === true')
t.equal(dz1.fired.type, 'dragleave', 'dragleave is fired on rejected dropzone');
t.equal(dz1.fired.type, 'dragleave', 'dragleave is fired on rejected dropzone')
t.end();
});
t.end()
})
test('DropEvent.stop[Immediate]Propagation()', t => {
const dropEvent = new DropEvent({ cur: {} }, {}, 'dragmove');
const dropEvent = new DropEvent({ cur: {} }, {}, 'dragmove')
t.notOk(dropEvent.propagationStopped || dropEvent.immediatePropagationStopped);
t.notOk(dropEvent.propagationStopped || dropEvent.immediatePropagationStopped)
dropEvent.stopPropagation();
t.ok(dropEvent.propagationStopped);
t.notOk(dropEvent.immediatePropagationStopped);
dropEvent.stopPropagation()
t.ok(dropEvent.propagationStopped)
t.notOk(dropEvent.immediatePropagationStopped)
dropEvent.propagationStopped = false;
dropEvent.propagationStopped = false
dropEvent.stopImmediatePropagation();
t.ok(dropEvent.propagationStopped && dropEvent.immediatePropagationStopped);
dropEvent.stopImmediatePropagation()
t.ok(dropEvent.propagationStopped && dropEvent.immediatePropagationStopped)
t.end();
});
t.end()
})

38

tests/drop/index.js

@@ -1,13 +0,13 @@

import test from '@interactjs/_dev/test/test';
import * as helpers from '@interactjs/core/tests/helpers';
import interactions from '@interactjs/core/interactions';
import drop from '../../drop';
import test from '@interactjs/_dev/test/test'
import * as helpers from '@interactjs/core/tests/helpers'
import interactions from '@interactjs/core/interactions'
import drop from '../../drop'
test('actions/drop options', t => {
const scope = helpers.mockScope();
scope.interact = {};
interactions.install(scope);
drop.install(scope);
const scope = helpers.mockScope()
scope.interact = {}
interactions.install(scope)
drop.install(scope)
const interactable = scope.interactables.new('test');
const interactable = scope.interactables.new('test')

@@ -21,16 +21,16 @@ const funcs = Object.freeze({

dragleave () {},
});
})
interactable.dropzone({
listeners: [funcs],
});
})
t.equal(interactable.events.types.drop[0], funcs.drop);
t.equal(interactable.events.types.dropactivate[0], funcs.activate);
t.equal(interactable.events.types.dropdeactivate[0], funcs.deactivate);
t.equal(interactable.events.types.dropmove[0], funcs.dropmove);
t.equal(interactable.events.types.dragenter[0], funcs.dragenter);
t.equal(interactable.events.types.dragleave[0], funcs.dragleave);
t.equal(interactable.events.types.drop[0], funcs.drop)
t.equal(interactable.events.types.dropactivate[0], funcs.activate)
t.equal(interactable.events.types.dropdeactivate[0], funcs.deactivate)
t.equal(interactable.events.types.dropmove[0], funcs.dropmove)
t.equal(interactable.events.types.dragenter[0], funcs.dragenter)
t.equal(interactable.events.types.dragleave[0], funcs.dragleave)
t.end();
});
t.end()
})

49

tests/resize.js

@@ -1,18 +0,17 @@

import test from '@interactjs/_dev/test/test';
import * as helpers from '@interactjs/core/tests/helpers';
import pointerUtils from '@interactjs/utils/pointerUtils';
import resize from '../resize';
import test from '@interactjs/_dev/test/test'
import * as helpers from '@interactjs/core/tests/helpers'
import pointerUtils from '@interactjs/utils/pointerUtils'
import resize from '../resize'
test('resize', t => {
const scope = helpers.mockScope();
const scope = helpers.mockScope()
resize.install(scope);
resize.install(scope)
t.ok(scope.actions.names.includes('resize'), '"resize" in actions.names');
t.equal(scope.actions.methodDict.resize, 'resizable');
t.equal(typeof scope.Interactable.prototype.resizable, 'function', 'Interactable.resizable method is added');
t.ok(scope.actions.names.includes('resize'), '"resize" in actions.names')
t.equal(scope.actions.methodDict.resize, 'resizable')
t.equal(typeof scope.Interactable.prototype.resizable, 'function', 'Interactable.resizable method is added')
const page = { x: 0, y: 0 };
const event = pointerUtils.coordsToEvent({ page, client: page });
const page = { x: 0, y: 0 }
const event = pointerUtils.coordsToEvent({ page, client: page })
const interactable = scope.interactables.new('test', {})

@@ -23,7 +22,7 @@ .resizable({

margin: Infinity,
});
const interaction = scope.interactions.new({});
const rect = { left: 0, top: 0, right: 10, bottom: 10 };
})
const interaction = scope.interactions.new({})
const rect = { left: 0, top: 0, right: 10, bottom: 10 }
interaction.updatePointer(event, event, {}, true);
interaction.updatePointer(event, event, {}, true)

@@ -36,6 +35,6 @@ t.deepEqual(

},
);
)
page.x = 10;
interaction.updatePointer(event, event, {}, true);
page.x = 10
interaction.updatePointer(event, event, {}, true)

@@ -48,6 +47,6 @@ t.deepEqual(

},
);
)
page.y = 10;
interaction.updatePointer(event, event, {}, true);
page.y = 10
interaction.updatePointer(event, event, {}, true)

@@ -60,5 +59,5 @@ t.deepEqual(

},
);
)
t.end();
});
t.end()
})
tsconfig.json
drag.js.map

Sorry, the diff of this file is not supported yet

drop/DropEvent.js.map

Sorry, the diff of this file is not supported yet

drop/index.js.map

Sorry, the diff of this file is not supported yet

gesture.js.map

Sorry, the diff of this file is not supported yet

index.js.map

Sorry, the diff of this file is not supported yet

resize.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