Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@interactjs/core

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/core - npm Package Compare versions

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

PointerInfo.d.ts
PointerInfo.js
PointerInfo.js.map
PointerInfo.ts

6

defaultOptions.d.ts

@@ -6,4 +6,8 @@ export interface Defaults {

export interface BaseDefaults extends SubDefaults {
preventDefault?: 'auto' | 'never' | string;
deltaSource?: 'page' | 'client';
}
export interface PerActionDefaults extends SubDefaults {
enabled?: boolean;
origin?: Interact.Point | string | Element;
}

@@ -13,3 +17,5 @@ export interface SubDefaults {

}
export interface Options extends BaseDefaults, PerActionDefaults {
}
export declare const defaults: Defaults;
export default defaults;

20

defaultOptions.ts

@@ -6,4 +6,10 @@ export interface Defaults {

export interface BaseDefaults extends SubDefaults {}
export interface PerActionDefaults extends SubDefaults {}
export interface BaseDefaults extends SubDefaults {
preventDefault?: 'auto' | 'never' | string
deltaSource?: 'page' | 'client'
}
export interface PerActionDefaults extends SubDefaults {
enabled?: boolean
origin?: Interact.Point | string | Element
}

@@ -14,14 +20,16 @@ export interface SubDefaults {

export interface Options extends BaseDefaults, PerActionDefaults {}
export const defaults: Defaults = {
base: {
preventDefault: 'auto',
deltaSource : 'page',
} as BaseDefaults,
deltaSource: 'page',
},
perAction: {
enabled : false,
enabled: false,
origin: { x: 0, y: 0 },
} as PerActionDefaults,
},
}
export default defaults

9

Eventable.d.ts

@@ -0,4 +1,7 @@

declare type Listener = (event: any) => any;
declare class Eventable {
options: any;
types: {};
types: {
[type: string]: Listener[];
};
propagationStopped: boolean;

@@ -11,5 +14,5 @@ immediatePropagationStopped: boolean;

fire(event: any): void;
on(type: any, listener: any): void;
off(type: any, listener: any): void;
on(type: string, listener: Listener): void;
off(type: string, listener: Listener): void;
}
export default Eventable;

1

Eventable.js

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

// Interactable#on() listeners
// tslint:disable no-conditional-assignment
if ((listeners = this.types[event.type])) {

@@ -25,0 +26,0 @@ fireUntilImmediateStopped(event, listeners);

58

Eventable.ts

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

import * as arr from '@interactjs/utils/arr';
import extend from '@interactjs/utils/extend';
import normalize from '@interactjs/utils/normalizeListeners';
import * as arr from '@interactjs/utils/arr'
import extend from '@interactjs/utils/extend'
import normalize from '@interactjs/utils/normalizeListeners'
import InteractEvent from './InteractEvent'
function fireUntilImmediateStopped (event, listeners) {
type Listener = (event: any) => any
function fireUntilImmediateStopped (event: InteractEvent, listeners: Listener[]) {
for (const listener of listeners) {
if (event.immediatePropagationStopped) { break; }
if (event.immediatePropagationStopped) { break }
listener(event);
listener(event)
}

@@ -14,19 +17,22 @@ }

class Eventable {
options: any;
types = {};
propagationStopped = false;
immediatePropagationStopped = false;
global: any;
options: any
types: {
[type: string]: Listener[]
} = {}
propagationStopped = false
immediatePropagationStopped = false
global: any
constructor (options?: { [index: string]: any }) {
this.options = extend({}, options || {});
this.options = extend({}, options || {})
}
fire (event: any) {
let listeners;
const global = this.global;
let listeners
const global = this.global
// Interactable#on() listeners
// tslint:disable no-conditional-assignment
if ((listeners = this.types[event.type])) {
fireUntilImmediateStopped(event, listeners);
fireUntilImmediateStopped(event, listeners)
}

@@ -36,27 +42,27 @@

if (!event.propagationStopped && global && (listeners = global[event.type])) {
fireUntilImmediateStopped(event, listeners);
fireUntilImmediateStopped(event, listeners)
}
}
on (type, listener) {
const listeners = normalize(type, listener);
on (type: string, listener: Listener) {
const listeners = normalize(type, listener)
for (type in listeners) {
this.types[type] = arr.merge(this.types[type] || [], listeners[type]);
this.types[type] = arr.merge(this.types[type] || [], listeners[type])
}
}
off (type, listener) {
const listeners = normalize(type, listener);
off (type: string, listener: Listener) {
const listeners = normalize(type, listener)
for (type in listeners) {
const eventList = this.types[type];
const eventList = this.types[type]
if (!eventList || !eventList.length) { continue; }
if (!eventList || !eventList.length) { continue }
for (listener of listeners[type]) {
const index = eventList.indexOf(listener);
const index = eventList.indexOf(listener)
if (index !== -1) {
eventList.splice(index, 1);
eventList.splice(index, 1)
}

@@ -68,2 +74,2 @@ }

export default Eventable;
export default Eventable

18

Interactable.d.ts

@@ -0,9 +1,7 @@

import { Defaults, Options } from './defaultOptions';
import Eventable from './Eventable';
/** */
export declare class Interactable implements Partial<Eventable> {
protected readonly _defaults: {
base: {};
perAction: {};
};
options: any;
protected readonly _defaults: Defaults;
options: Options;
_actions: any;

@@ -16,6 +14,8 @@ readonly target: Interact.Target;

/** */
constructor(target: Interact.Target, options: any, defaultContext: any);
setOnEvents(actionName: any, phases: any): this;
constructor(target: Interact.Target, options: any, defaultContext: Element | Node);
setOnEvents(actionName: string, phases: {
[phase: string]: Interact.Listeners;
}): this;
updatePerActionListeners(actionName: any, prev: any, cur: any): void;
setPerAction(actionName: any, options: any): void;
setPerAction(actionName: any, options: Options): void;
/**

@@ -72,3 +72,3 @@ * The default function to get an Interactables bounding rect. Can be

*/
deltaSource(newValue: any): any;
deltaSource(newValue: any): "client" | "page" | this;
/**

@@ -75,0 +75,0 @@ * Gets the selector context Node of the Interactable. The default is

18

Interactable.js

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

if (is.object(defaults.perAction[optionName]) && 'enabled' in defaults.perAction[optionName]) {
actionOptions[optionName].enabled = optionValue.enabled === false ? false : true;
actionOptions[optionName].enabled = optionValue.enabled !== false;
}

@@ -95,7 +95,5 @@ }

getRect(element) {
element = element
? element
: is.element(this.target)
? this.target
: null;
element = element || (is.element(this.target)
? this.target
: null);
if (is.string(this.target)) {

@@ -173,4 +171,4 @@ element = element || this._context.querySelector(this.target);

inContext(element) {
return (this._context === element.ownerDocument
|| nodeContains(this._context, element));
return (this._context === element.ownerDocument ||
nodeContains(this._context, element));
}

@@ -280,4 +278,4 @@ /**

const delegated = events.delegatedEvents[type];
if (delegated.selectors[0] === this.target
&& delegated.contexts[0] === this._context) {
if (delegated.selectors[0] === this.target &&
delegated.contexts[0] === this._context) {
delegated.selectors.splice(0, 1);

@@ -284,0 +282,0 @@ delegated.contexts.splice(0, 1);

205

Interactable.ts

@@ -1,48 +0,48 @@

import * as arr from '@interactjs/utils/arr';
import browser from '@interactjs/utils/browser';
import clone from '@interactjs/utils/clone';
import { getElementRect, nodeContains, trySelector } from '@interactjs/utils/domUtils';
import events from '@interactjs/utils/events';
import extend from '@interactjs/utils/extend';
import * as is from '@interactjs/utils/is';
import normalizeListeners from '@interactjs/utils/normalizeListeners';
import { getWindow } from '@interactjs/utils/window';
import Eventable from './Eventable';
import * as arr from '@interactjs/utils/arr'
import browser from '@interactjs/utils/browser'
import clone from '@interactjs/utils/clone'
import { getElementRect, nodeContains, trySelector } from '@interactjs/utils/domUtils'
import events from '@interactjs/utils/events'
import extend from '@interactjs/utils/extend'
import * as is from '@interactjs/utils/is'
import normalizeListeners from '@interactjs/utils/normalizeListeners'
import { getWindow } from '@interactjs/utils/window'
import { Defaults, Options } from './defaultOptions'
import Eventable from './Eventable'
/** */
export class Interactable implements Partial<Eventable> {
protected get _defaults () {
protected get _defaults (): Defaults {
return {
base: {},
perAction: {},
};
}
}
options: any;
_actions: any;
readonly target: Interact.Target;
events = new Eventable();
_context: Element;
_win: Window;
_doc: Document;
options!: Options
_actions: any
readonly target: Interact.Target
events = new Eventable()
_context: Element
_win: Window
_doc: Document
/** */
constructor (target: Interact.Target, options: any, defaultContext) {
this._actions = options.actions;
this.target = target;
this._context = options.context || defaultContext;
this._win = getWindow(trySelector(target)? this._context : target);
this._doc = this._win.document;
constructor (target: Interact.Target, options: any, defaultContext: Element | Node) {
this._actions = options.actions
this.target = target
this._context = options.context || defaultContext
this._win = getWindow(trySelector(target) ? this._context : target)
this._doc = this._win.document
this.set(options);
this.set(options)
}
setOnEvents (actionName, phases) {
if (is.func(phases.onstart) ) { this.on(`${actionName}start` , phases.onstart ); }
if (is.func(phases.onmove) ) { this.on(`${actionName}move` , phases.onmove ); }
if (is.func(phases.onend) ) { this.on(`${actionName}end` , phases.onend ); }
if (is.func(phases.oninertiastart)) { this.on(`${actionName}inertiastart`, phases.oninertiastart); }
setOnEvents (actionName: string, phases: { [phase: string]: Interact.Listeners }) {
if (is.func(phases.onstart)) { this.on(`${actionName}start`, phases.onstart) }
if (is.func(phases.onmove)) { this.on(`${actionName}move`, phases.onmove) }
if (is.func(phases.onend)) { this.on(`${actionName}end`, phases.onend) }
if (is.func(phases.oninertiastart)) { this.on(`${actionName}inertiastart`, phases.oninertiastart) }
return this;
return this
}

@@ -52,22 +52,22 @@

if (is.array(prev)) {
this.off(actionName, prev);
this.off(actionName, prev)
}
if (is.array(cur)) {
this.on(actionName, cur);
this.on(actionName, cur)
}
}
setPerAction (actionName, options) {
const defaults = this._defaults;
setPerAction (actionName, options: Options) {
const defaults = this._defaults
// for all the default per-action options
for (const optionName in options) {
const actionOptions = this.options[actionName];
const optionValue = options[optionName];
const isArray = is.array(optionValue);
const actionOptions = this.options[actionName]
const optionValue = options[optionName]
const isArray = is.array(optionValue)
// remove old event listeners and add new ones
if (optionName === 'listeners') {
this.updatePerActionListeners(actionName, actionOptions.listeners, optionValue);
this.updatePerActionListeners(actionName, actionOptions.listeners, optionValue)
}

@@ -77,3 +77,3 @@

if (isArray) {
actionOptions[optionName] = arr.from(optionValue);
actionOptions[optionName] = arr.from(optionValue)
}

@@ -85,7 +85,7 @@ // if the option value is an object

actionOptions[optionName] || {},
clone(optionValue));
clone(optionValue))
// set anabled field to true if it exists in the defaults
if (is.object(defaults.perAction[optionName]) && 'enabled' in defaults.perAction[optionName]) {
actionOptions[optionName].enabled = optionValue.enabled === false? false : true;
actionOptions[optionName].enabled = optionValue.enabled !== false
}

@@ -95,7 +95,7 @@ }

else if (is.bool(optionValue) && is.object(defaults.perAction[optionName])) {
actionOptions[optionName].enabled = optionValue;
actionOptions[optionName].enabled = optionValue
}
// if it's anything else, do a plain assignment
else {
actionOptions[optionName] = optionValue;
actionOptions[optionName] = optionValue
}

@@ -113,13 +113,11 @@ }

getRect (element: Element) {
element = element
? element
: is.element(this.target)
? this.target
: null;
element = element || (is.element(this.target)
? this.target
: null)
if (is.string(this.target)) {
element = element || this._context.querySelector(this.target);
element = element || this._context.querySelector(this.target)
}
return getElementRect(element);
return getElementRect(element)
}

@@ -137,14 +135,14 @@

if (is.func(checker)) {
this.getRect = checker;
this.getRect = checker
return this;
return this
}
if (checker === null) {
delete this.options.getRect;
delete this.options.getRect
return this;
return this
}
return this.getRect;
return this.getRect
}

@@ -154,12 +152,12 @@

if (trySelector(newValue) || is.object(newValue)) {
this.options[optionName] = newValue;
this.options[optionName] = newValue
for (const action of this._actions.names) {
this.options[action][optionName] = newValue;
this.options[action][optionName] = newValue
}
return this;
return this
}
return this.options[optionName];
return this.options[optionName]
}

@@ -178,3 +176,3 @@

origin (newValue) {
return this._backCompatOption('origin', newValue);
return this._backCompatOption('origin', newValue)
}

@@ -192,8 +190,8 @@

if (newValue === 'page' || newValue === 'client') {
this.options.deltaSource = newValue;
this.options.deltaSource = newValue
return this;
return this
}
return this.options.deltaSource;
return this.options.deltaSource
}

@@ -208,8 +206,8 @@

context () {
return this._context;
return this._context
}
inContext (element) {
return (this._context === element.ownerDocument
|| nodeContains(this._context, element));
return (this._context === element.ownerDocument ||
nodeContains(this._context, element))
}

@@ -226,5 +224,5 @@

fire (iEvent) {
this.events.fire(iEvent);
this.events.fire(iEvent)
return this;
return this
}

@@ -234,11 +232,11 @@

if (is.object(typeArg) && !is.array(typeArg)) {
options = listenerArg;
listenerArg = null;
options = listenerArg
listenerArg = null
}
const addRemove = method === 'on' ? 'add' : 'remove';
const listeners = normalizeListeners(typeArg, listenerArg);
const addRemove = method === 'on' ? 'add' : 'remove'
const listeners = normalizeListeners(typeArg, listenerArg)
for (let type in listeners) {
if (type === 'wheel') { type = browser.wheelEvent; }
if (type === 'wheel') { type = browser.wheelEvent }

@@ -248,11 +246,11 @@ for (const listener of listeners[type]) {

if (arr.contains(this._actions.eventTypes, type)) {
this.events[method](type, listener);
this.events[method](type, listener)
}
// delegated event
else if (is.string(this.target)) {
events[`${addRemove}Delegate`](this.target, this._context, type, listener, options);
events[`${addRemove}Delegate`](this.target, this._context, type, listener, options)
}
// remove listener from this Interatable's element
else {
(events[addRemove] as typeof events.remove)(this.target as Element, type, listener, options);
(events[addRemove] as typeof events.remove)(this.target as Element, type, listener, options)
}

@@ -262,3 +260,3 @@ }

return this;
return this
}

@@ -277,3 +275,3 @@

on (types: string | string[] | Interact.EventTypes, listener?: Interact.Listeners, options?: any) {
return this._onOff('on', types, listener, options);
return this._onOff('on', types, listener, options)
}

@@ -292,3 +290,3 @@

off (types: string | string[] | Interact.EventTypes, listener?: Interact.Listeners, options?: any) {
return this._onOff('off', types, listener, options);
return this._onOff('off', types, listener, options)
}

@@ -303,17 +301,17 @@

set (options) {
const defaults = this._defaults;
const defaults = this._defaults
if (!is.object(options)) {
options = {};
options = {}
}
this.options = clone(defaults.base);
this.options = clone(defaults.base)
for (const actionName in this._actions.methodDict) {
const methodName = this._actions.methodDict[actionName];
const methodName = this._actions.methodDict[actionName]
this.options[actionName] = {};
this.setPerAction(actionName, extend(extend({}, defaults.perAction), defaults[actionName]));
this.options[actionName] = {}
this.setPerAction(actionName, extend(extend({}, defaults.perAction), defaults[actionName]))
this[methodName](options[actionName]);
this[methodName](options[actionName])
}

@@ -323,7 +321,7 @@

if (is.func(this[setting])) {
this[setting](options[setting]);
this[setting](options[setting])
}
}
return this;
return this
}

@@ -338,3 +336,3 @@

unset () {
events.remove(this.target as Node, 'all');
events.remove(this.target as Node, 'all')

@@ -344,23 +342,22 @@ if (is.string(this.target)) {

for (const type in events.delegatedEvents) {
const delegated = events.delegatedEvents[type];
const delegated = events.delegatedEvents[type]
if (delegated.selectors[0] === this.target
&& delegated.contexts[0] === this._context) {
if (delegated.selectors[0] === this.target &&
delegated.contexts[0] === this._context) {
delegated.selectors.splice(0, 1)
delegated.contexts.splice(0, 1)
delegated.listeners.splice(0, 1)
delegated.selectors.splice(0, 1);
delegated.contexts .splice(0, 1);
delegated.listeners.splice(0, 1);
// remove the arrays if they are empty
if (!delegated.selectors.length) {
delegated[type] = null;
delegated[type] = null
}
}
events.remove(this._context, type, events.delegateListener);
events.remove(this._context, type, events.delegateUseCapture, true);
events.remove(this._context, type, events.delegateListener)
events.remove(this._context, type, events.delegateUseCapture, true)
}
}
else {
events.remove(this.target as Node, 'all');
events.remove(this.target as Node, 'all')
}

@@ -370,2 +367,2 @@ }

export default Interactable;
export default Interactable

10

interactablePreventDefault.js

@@ -41,4 +41,4 @@ import { matchesSelector, nodeContains } from '@interactjs/utils/domUtils';

// don't preventDefault on editable elements
if (is.element(event.target)
&& matchesSelector(event.target, 'input,select,textarea,[contenteditable=true],[contenteditable=true] *')) {
if (is.element(event.target) &&
matchesSelector(event.target, 'input,select,textarea,[contenteditable=true],[contenteditable=true] *')) {
return;

@@ -78,5 +78,5 @@ }

for (const interaction of scope.interactions.list) {
if (interaction.element
&& (interaction.element === event.target
|| nodeContains(interaction.element, event.target))) {
if (interaction.element &&
(interaction.element === event.target ||
nodeContains(interaction.element, event.target))) {
interaction.target.checkAndPreventDefault(event);

@@ -83,0 +83,0 @@ return;

75

interactablePreventDefault.ts

@@ -1,29 +0,28 @@

import { matchesSelector, nodeContains } from '@interactjs/utils/domUtils';
import events from '@interactjs/utils/events';
import * as is from '@interactjs/utils/is';
import { getWindow } from '@interactjs/utils/window';
import { matchesSelector, nodeContains } from '@interactjs/utils/domUtils'
import events from '@interactjs/utils/events'
import * as is from '@interactjs/utils/is'
import { getWindow } from '@interactjs/utils/window'
function preventDefault (interactable, newValue) {
if (/^(always|never|auto)$/.test(newValue)) {
interactable.options.preventDefault = newValue;
return interactable;
interactable.options.preventDefault = newValue
return interactable
}
if (is.bool(newValue)) {
interactable.options.preventDefault = newValue? 'always' : 'never';
return interactable;
interactable.options.preventDefault = newValue ? 'always' : 'never'
return interactable
}
return interactable.options.preventDefault;
return interactable.options.preventDefault
}
function checkAndPreventDefault (interactable, scope, event) {
const setting = interactable.options.preventDefault;
const setting = interactable.options.preventDefault
if (setting === 'never') { return; }
if (setting === 'never') { return }
if (setting === 'always') {
event.preventDefault();
return;
event.preventDefault()
return
}

@@ -37,7 +36,7 @@

if (events.supportsPassive && /^touch(start|move)$/.test(event.type)) {
const doc = getWindow(event.target).document;
const docOptions = scope.getDocOptions(doc);
const doc = getWindow(event.target).document
const docOptions = scope.getDocOptions(doc)
if (!(docOptions && docOptions.events) || docOptions.events.passive !== false) {
return;
return
}

@@ -48,12 +47,12 @@ }

if (/^(mouse|pointer|touch)*(down|start)/i.test(event.type)) {
return;
return
}
// don't preventDefault on editable elements
if (is.element(event.target)
&& matchesSelector(event.target, 'input,select,textarea,[contenteditable=true],[contenteditable=true] *')) {
return;
if (is.element(event.target) &&
matchesSelector(event.target, 'input,select,textarea,[contenteditable=true],[contenteditable=true] *')) {
return
}
event.preventDefault();
event.preventDefault()
}

@@ -63,3 +62,3 @@

if (interaction.target) {
interaction.target.checkAndPreventDefault(event);
interaction.target.checkAndPreventDefault(event)
}

@@ -70,3 +69,3 @@ }

/** @lends Interactable */
const Interactable = scope.Interactable;
const Interactable = scope.Interactable

@@ -84,11 +83,11 @@ /**

Interactable.prototype.preventDefault = function (newValue) {
return preventDefault(this, newValue);
};
return preventDefault(this, newValue)
}
Interactable.prototype.checkAndPreventDefault = function (event) {
return checkAndPreventDefault(this, scope, event);
};
return checkAndPreventDefault(this, scope, event)
}
for (const eventSignal of ['down', 'move', 'up', 'cancel']) {
scope.interactions.signals.on(eventSignal, onInteractionEvent);
scope.interactions.signals.on(eventSignal, onInteractionEvent)
}

@@ -99,16 +98,14 @@

for (const interaction of scope.interactions.list) {
if (interaction.element
&& (interaction.element === event.target
|| nodeContains(interaction.element, event.target))) {
interaction.target.checkAndPreventDefault(event);
return;
if (interaction.element &&
(interaction.element === event.target ||
nodeContains(interaction.element, event.target))) {
interaction.target.checkAndPreventDefault(event)
return
}
}
};
}
}
export type Install = typeof install;
export type Install = typeof install
export default { install };
export default { install }

25

InteractEvent.d.ts
import Interactable from './Interactable';
import Interaction from './Interaction';
declare class InteractEvent {
type: string;
target: Element;
relatedTarget: Element;
relatedTarget: Element | null;
currentTarget: Element;
screenX: number;
screenY: number;
screenX?: number;
screenY?: number;
button: number;

@@ -33,14 +34,14 @@ buttons: number;

dragLeave?: Element;
axes: Interact.Point;
distance: number;
angle: number;
da: number;
scale: number;
ds: number;
box: Interact.Rect;
preEnd: boolean;
axes?: Interact.Point;
distance?: number;
angle?: number;
da?: number;
scale?: number;
ds?: number;
box?: Interact.Rect;
preEnd?: boolean;
immediatePropagationStopped: boolean;
propagationStopped: boolean;
/** */
constructor(interaction: any, event: Interact.PointerEventType, actionName: string, phase: string, element: Element, related?: Element, preEnd?: boolean, type?: string);
constructor(interaction: Interaction, event: Interact.PointerEventType, actionName: string, phase: string, element: Element, related?: Element, preEnd?: boolean, type?: string);
pageX: number;

@@ -47,0 +48,0 @@ pageY: number;

15

InteractEvent.js

@@ -12,3 +12,4 @@ import extend from '@interactjs/utils/extend';

const target = interaction.target;
const deltaSource = (target && target.options || defaults).deltaSource;
// FIXME: add deltaSource to defaults
const deltaSource = ((target && target.options) || defaults).deltaSource;
const origin = getOriginXY(target, element, actionName);

@@ -69,21 +70,21 @@ const starting = phase === 'start';

get pageX() { return this.page.x; }
set pageX(value) { this.page.x = value; }
get pageY() { return this.page.y; }
set pageX(value) { this.page.x = value; }
set pageY(value) { this.page.y = value; }
get clientX() { return this.client.x; }
set clientX(value) { this.client.x = value; }
get clientY() { return this.client.y; }
set clientX(value) { this.client.x = value; }
set clientY(value) { this.client.y = value; }
get dx() { return this.delta.x; }
set dx(value) { this.delta.x = value; }
get dy() { return this.delta.y; }
set dx(value) { this.delta.x = value; }
set dy(value) { this.delta.y = value; }
get velocityX() { return this.velocity.x; }
set velocityX(value) { this.velocity.x = value; }
get velocityY() { return this.velocity.y; }
set velocityX(value) { this.velocity.x = value; }
set velocityY(value) { this.velocity.y = value; }
getSwipe() {
const interaction = this.interaction;
if (interaction.prevEvent.speed < 600
|| this.timeStamp - interaction.prevEvent.timeStamp > 150) {
if (interaction.prevEvent.speed < 600 ||
this.timeStamp - interaction.prevEvent.timeStamp > 150) {
return null;

@@ -90,0 +91,0 @@ }

178

InteractEvent.ts

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

import extend from '@interactjs/utils/extend';
import getOriginXY from '@interactjs/utils/getOriginXY';
import hypot from '@interactjs/utils/hypot';
import defaults from './defaultOptions';
import Interactable from './Interactable';
import extend from '@interactjs/utils/extend'
import getOriginXY from '@interactjs/utils/getOriginXY'
import hypot from '@interactjs/utils/hypot'
import defaults from './defaultOptions'
import Interactable from './Interactable'
import Interaction from './Interaction'

@@ -10,6 +11,6 @@ class InteractEvent {

target: Element
relatedTarget: Element
relatedTarget: Element | null
currentTarget: Element
screenX: number
screenY: number
screenX?: number
screenY?: number
button: number

@@ -42,11 +43,11 @@ buttons: number

// resize
axes: Interact.Point
axes?: Interact.Point
// gestureend
distance: number
angle: number
da: number // angle change
scale: number // ratio of distance start to current event
ds: number // scale change
box: Interact.Rect // enclosing box of all points
preEnd: boolean
distance?: number
angle?: number
da?: number // angle change
scale?: number // ratio of distance start to current event
ds?: number // scale change
box?: Interact.Rect // enclosing box of all points
preEnd?: boolean
immediatePropagationStopped = false

@@ -56,11 +57,12 @@ propagationStopped = false

/** */
constructor (interaction, event: Interact.PointerEventType, actionName: string, phase: string, element: Element, related?: Element, preEnd?: boolean, type?: string) {
element = element || interaction.element;
constructor (interaction: Interaction, event: Interact.PointerEventType, actionName: string, phase: string, element: Element, related?: Element, preEnd?: boolean, type?: string) {
element = element || interaction.element as Element
const target = interaction.target;
const deltaSource = (target && target.options || defaults).deltaSource;
const origin = getOriginXY(target, element, actionName);
const starting = phase === 'start';
const ending = phase === 'end';
const prevEvent = starting? this : interaction.prevEvent;
const target = interaction.target
// FIXME: add deltaSource to defaults
const deltaSource = (((target && target.options) || defaults) as any).deltaSource as 'page' | 'client'
const origin = getOriginXY(target, element, actionName)
const starting = phase === 'start'
const ending = phase === 'end'
const prevEvent = starting ? this : interaction.prevEvent
const coords = starting

@@ -70,41 +72,41 @@ ? interaction.coords.start

? { page: prevEvent.page, client: prevEvent.client, timeStamp: interaction.coords.cur.timeStamp }
: interaction.coords.cur;
: interaction.coords.cur
this.page = extend({}, coords.page);
this.client = extend({}, coords.client);
this.timeStamp = coords.timeStamp;
this.page = extend({}, coords.page)
this.client = extend({}, coords.client)
this.timeStamp = coords.timeStamp
if (!ending) {
this.page.x -= origin.x;
this.page.y -= origin.y;
this.page.x -= origin.x
this.page.y -= origin.y
this.client.x -= origin.x;
this.client.y -= origin.y;
this.client.x -= origin.x
this.client.y -= origin.y
}
this.ctrlKey = event.ctrlKey;
this.altKey = event.altKey;
this.shiftKey = event.shiftKey;
this.metaKey = event.metaKey;
this.button = (event as MouseEvent).button;
this.buttons = (event as MouseEvent).buttons;
this.target = element;
this.currentTarget = element;
this.relatedTarget = related || null;
this.preEnd = preEnd;
this.type = type || (actionName + (phase || ''));
this.interaction = interaction;
this.interactable = target;
this.ctrlKey = event.ctrlKey
this.altKey = event.altKey
this.shiftKey = event.shiftKey
this.metaKey = event.metaKey
this.button = (event as MouseEvent).button
this.buttons = (event as MouseEvent).buttons
this.target = element
this.currentTarget = element
this.relatedTarget = related || null
this.preEnd = preEnd
this.type = type || (actionName + (phase || ''))
this.interaction = interaction
this.interactable = target
this.t0 = starting
? interaction.pointers[interaction.pointers.length - 1].downTime
: prevEvent.t0;
: prevEvent.t0
this.x0 = interaction.coords.start.page.x - origin.x;
this.y0 = interaction.coords.start.page.y - origin.y;
this.clientX0 = interaction.coords.start.client.x - origin.x;
this.clientY0 = interaction.coords.start.client.y - origin.y;
this.x0 = interaction.coords.start.page.x - origin.x
this.y0 = interaction.coords.start.page.y - origin.y
this.clientX0 = interaction.coords.start.client.x - origin.x
this.clientY0 = interaction.coords.start.client.y - origin.y
if (starting || ending) {
this.delta = { x: 0, y: 0 };
this.delta = { x: 0, y: 0 }
}

@@ -115,55 +117,55 @@ else {

y: this[deltaSource].y - prevEvent[deltaSource].y,
};
}
}
this.dt = interaction.coords.delta.timeStamp;
this.duration = this.timeStamp - this.t0;
this.dt = interaction.coords.delta.timeStamp
this.duration = this.timeStamp - this.t0
// velocity and speed in pixels per second
this.velocity = extend({}, interaction.coords.velocity[deltaSource]);
this.speed = hypot(this.velocity.x, this.velocity.y);
this.velocity = extend({}, interaction.coords.velocity[deltaSource])
this.speed = hypot(this.velocity.x, this.velocity.y)
this.swipe = (ending || phase === 'inertiastart')? this.getSwipe() : null;
this.swipe = (ending || phase === 'inertiastart') ? this.getSwipe() : null
}
get pageX () { return this.page.x; }
get pageY () { return this.page.y; }
set pageX (value) { this.page.x = value; }
set pageY (value) { this.page.y = value; }
get pageX () { return this.page.x }
set pageX (value) { this.page.x = value }
get pageY () { return this.page.y }
set pageY (value) { this.page.y = value }
get clientX () { return this.client.x; }
get clientY () { return this.client.y; }
set clientX (value) { this.client.x = value; }
set clientY (value) { this.client.y = value; }
get clientX () { return this.client.x }
set clientX (value) { this.client.x = value }
get clientY () { return this.client.y }
set clientY (value) { this.client.y = value }
get dx () { return this.delta.x; }
get dy () { return this.delta.y; }
set dx (value) { this.delta.x = value; }
set dy (value) { this.delta.y = value; }
get dx () { return this.delta.x }
set dx (value) { this.delta.x = value }
get dy () { return this.delta.y }
set dy (value) { this.delta.y = value }
get velocityX () { return this.velocity.x; }
get velocityY () { return this.velocity.y; }
set velocityX (value) { this.velocity.x = value; }
set velocityY (value) { this.velocity.y = value; }
get velocityX () { return this.velocity.x }
set velocityX (value) { this.velocity.x = value }
get velocityY () { return this.velocity.y }
set velocityY (value) { this.velocity.y = value }
getSwipe () {
const interaction = this.interaction;
const interaction = this.interaction
if (interaction.prevEvent.speed < 600
|| this.timeStamp - interaction.prevEvent.timeStamp > 150) {
return null;
if (interaction.prevEvent.speed < 600 ||
this.timeStamp - interaction.prevEvent.timeStamp > 150) {
return null
}
let angle = 180 * Math.atan2(interaction.prevEvent.velocityY, interaction.prevEvent.velocityX) / Math.PI;
const overlap = 22.5;
let angle = 180 * Math.atan2(interaction.prevEvent.velocityY, interaction.prevEvent.velocityX) / Math.PI
const overlap = 22.5
if (angle < 0) {
angle += 360;
angle += 360
}
const left = 135 - overlap <= angle && angle < 225 + overlap;
const up = 225 - overlap <= angle && angle < 315 + overlap;
const left = 135 - overlap <= angle && angle < 225 + overlap
const up = 225 - overlap <= angle && angle < 315 + overlap
const right = !left && (315 - overlap <= angle || angle < 45 + overlap);
const down = !up && 45 - overlap <= angle && angle < 135 + overlap;
const right = !left && (315 - overlap <= angle || angle < 45 + overlap)
const down = !up && 45 - overlap <= angle && angle < 135 + overlap

@@ -181,3 +183,3 @@ return {

},
};
}
}

@@ -191,3 +193,3 @@

stopImmediatePropagation () {
this.immediatePropagationStopped = this.propagationStopped = true;
this.immediatePropagationStopped = this.propagationStopped = true
}

@@ -199,6 +201,6 @@

stopPropagation () {
this.propagationStopped = true;
this.propagationStopped = true
}
}
export default InteractEvent;
export default InteractEvent

12

Interaction.d.ts
import * as utils from '@interactjs/utils';
import Interactable from './Interactable';
import InteractEvent from './InteractEvent';
import PointerInfo from './PointerInfo';
export interface Action {

@@ -33,3 +34,3 @@ name: 'drag' | 'resize' | 'gesture';

*/
doMove: () => any;
doMove: (this: typeof utils) => any;
coords: {

@@ -182,10 +183,3 @@ start: {

}
export declare class PointerInfo {
id: number;
pointer: Interact.PointerType;
event: Interact.PointerEventType;
downTime: number;
downTarget: Node;
constructor(id: number, pointer: Interact.PointerType, event: Interact.PointerEventType, downTime: number, downTarget: Node);
}
export default Interaction;
export { PointerInfo };

31

Interaction.js
import * as utils from '@interactjs/utils';
import InteractEvent from './InteractEvent';
import PointerInfo from './PointerInfo';
export class Interaction {

@@ -100,5 +101,5 @@ /** */

start(action, target, element) {
if (this.interacting()
|| !this.pointerIsDown
|| this.pointers.length < (action.name === 'gesture' ? 2 : 1)) {
if (this.interacting() ||
!this.pointerIsDown ||
this.pointers.length < (action.name === 'gesture' ? 2 : 1)) {
return;

@@ -118,8 +119,8 @@ }

this.updatePointer(pointer, event, eventTarget, false);
utils.pointer.setCoords(this.coords.cur, this.pointers.map(p => p.pointer));
utils.pointer.setCoords(this.coords.cur, this.pointers.map((p) => p.pointer));
}
const duplicateMove = (this.coords.cur.page.x === this.coords.prev.page.x
&& this.coords.cur.page.y === this.coords.prev.page.y
&& this.coords.cur.client.x === this.coords.prev.client.x
&& this.coords.cur.client.y === this.coords.prev.client.y);
const duplicateMove = (this.coords.cur.page.x === this.coords.prev.page.x &&
this.coords.cur.page.y === this.coords.prev.page.y &&
this.coords.cur.client.x === this.coords.prev.client.x &&
this.coords.cur.client.y === this.coords.prev.client.y);
let dx;

@@ -262,3 +263,3 @@ let dy;

? this.pointers.length - 1
: utils.arr.findIndex(this.pointers, curPointer => curPointer.id === pointerId);
: utils.arr.findIndex(this.pointers, (curPointer) => curPointer.id === pointerId);
}

@@ -286,3 +287,3 @@ getPointerInfo(pointer) {

if (!this.interacting()) {
utils.pointer.setCoords(this.coords.start, this.pointers.map(p => p.pointer));
utils.pointer.setCoords(this.coords.start, this.pointers.map((p) => p.pointer));
utils.pointer.copyCoords(this.coords.cur, this.coords.start);

@@ -354,12 +355,4 @@ utils.pointer.copyCoords(this.coords.prev, this.coords.start);

}
export class PointerInfo {
constructor(id, pointer, event, downTime, downTarget) {
this.id = id;
this.pointer = pointer;
this.event = event;
this.downTime = downTime;
this.downTarget = downTarget;
}
}
export default Interaction;
export { PointerInfo };
//# sourceMappingURL=Interaction.js.map

258

Interaction.ts

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

import * as utils from '@interactjs/utils';
import Interactable from './Interactable';
import InteractEvent from './InteractEvent';
import * as utils from '@interactjs/utils'
import Interactable from './Interactable'
import InteractEvent from './InteractEvent'
import PointerInfo from './PointerInfo'

@@ -13,6 +14,6 @@ export interface Action {

// current interactable being interacted with
target: Interactable = null
target: Interactable = null as any
// the target element of the interactable
element: Node = null
element: Node = null as any

@@ -23,8 +24,8 @@ _signals: utils.Signals

prepared: Action = {
name : null,
axis : null,
edges: null,
name : null as any,
axis : null as any,
edges: null as any,
}
pointerType: string;
pointerType: string

@@ -35,5 +36,5 @@ // keep track of added pointers

// pointerdown/mousedown/touchstart event
downEvent: Interact.PointerEventType = null;
downEvent: Interact.PointerEventType = null as any
downPointer: Interact.PointerType = {} as Interact.PointerType;
downPointer: Interact.PointerType = {} as Interact.PointerType

@@ -45,16 +46,16 @@ _latestPointer: {

} = {
pointer: null,
event: null,
eventTarget: null,
};
pointer: null as any,
event: null as any,
eventTarget: null as any,
}
// previous action event
prevEvent: InteractEvent = null;
prevEvent: InteractEvent = null as any
pointerIsDown = false;
pointerWasMoved = false;
_interacting = false;
_ending = false;
pointerIsDown = false
pointerWasMoved = false
_interacting = false
_ending = false
simulation = null;
simulation = null

@@ -69,6 +70,6 @@ get pointerMoveTolerance () {

doMove = utils.warnOnce(
function (signalArg) {
this.move(signalArg);
function (this: Interaction, signalArg: any) {
this.move(signalArg)
},
'The interaction.doMove() method has been renamed to interaction.move()');
'The interaction.doMove() method has been renamed to interaction.move()')

@@ -86,14 +87,14 @@ coords = {

velocity: utils.pointer.newCoords(),
};
}
/** */
constructor ({ pointerType, signals }: { pointerType: string, signals: utils.Signals }) {
this._signals = signals;
this.pointerType = pointerType;
this._signals = signals
this.pointerType = pointerType
this._signals.fire('new', this);
this._signals.fire('new', this)
}
pointerDown (pointer, event, eventTarget) {
const pointerIndex = this.updatePointer(pointer, event, eventTarget, true);
const pointerIndex = this.updatePointer(pointer, event, eventTarget, true)

@@ -106,3 +107,3 @@ this._signals.fire('down', {

interaction: this,
});
})
}

@@ -142,12 +143,12 @@

start (action, target, element) {
if (this.interacting()
|| !this.pointerIsDown
|| this.pointers.length < (action.name === 'gesture'? 2 : 1)) {
return;
if (this.interacting() ||
!this.pointerIsDown ||
this.pointers.length < (action.name === 'gesture' ? 2 : 1)) {
return
}
utils.copyAction(this.prepared, action);
utils.copyAction(this.prepared, action)
this.target = target;
this.element = element;
this.target = target
this.element = element
this._interacting = this._doPhase({

@@ -157,3 +158,3 @@ interaction: this,

phase: 'start',
});
})
}

@@ -163,20 +164,20 @@

if (!this.simulation) {
this.updatePointer(pointer, event, eventTarget, false);
utils.pointer.setCoords(this.coords.cur, this.pointers.map(p => p.pointer));
this.updatePointer(pointer, event, eventTarget, false)
utils.pointer.setCoords(this.coords.cur, this.pointers.map((p) => p.pointer))
}
const duplicateMove = (this.coords.cur.page.x === this.coords.prev.page.x
&& this.coords.cur.page.y === this.coords.prev.page.y
&& this.coords.cur.client.x === this.coords.prev.client.x
&& this.coords.cur.client.y === this.coords.prev.client.y);
const duplicateMove = (this.coords.cur.page.x === this.coords.prev.page.x &&
this.coords.cur.page.y === this.coords.prev.page.y &&
this.coords.cur.client.x === this.coords.prev.client.x &&
this.coords.cur.client.y === this.coords.prev.client.y)
let dx;
let dy;
let dx
let dy
// register movement greater than pointerMoveTolerance
if (this.pointerIsDown && !this.pointerWasMoved) {
dx = this.coords.cur.client.x - this.coords.start.client.x;
dy = this.coords.cur.client.y - this.coords.start.client.y;
dx = this.coords.cur.client.x - this.coords.start.client.x
dy = this.coords.cur.client.y - this.coords.start.client.y
this.pointerWasMoved = utils.hypot(dx, dy) > this.pointerMoveTolerance;
this.pointerWasMoved = utils.hypot(dx, dy) > this.pointerMoveTolerance
}

@@ -193,11 +194,11 @@

interaction: this,
};
}
if (!duplicateMove) {
// set pointer coordinate, time changes and velocity
utils.pointer.setCoordDeltas(this.coords.delta, this.coords.prev, this.coords.cur);
utils.pointer.setCoordVelocity(this.coords.velocity, this.coords.delta);
utils.pointer.setCoordDeltas(this.coords.delta, this.coords.prev, this.coords.cur)
utils.pointer.setCoordVelocity(this.coords.velocity, this.coords.delta)
}
this._signals.fire('move', signalArg);
this._signals.fire('move', signalArg)

@@ -207,7 +208,7 @@ if (!duplicateMove) {

if (this.interacting()) {
this.move(signalArg);
this.move(signalArg)
}
if (this.pointerWasMoved) {
utils.pointer.copyCoords(this.coords.prev, this.coords.cur);
utils.pointer.copyCoords(this.coords.prev, this.coords.cur)
}

@@ -242,7 +243,7 @@ }

noBefore: false,
}, signalArg || {});
}, signalArg || {})
signalArg.phase = 'move';
signalArg.phase = 'move'
this._doPhase(signalArg);
this._doPhase(signalArg)
}

@@ -252,9 +253,9 @@

pointerUp (pointer, event, eventTarget, curEventTarget) {
let pointerIndex = this.getPointerIndex(pointer);
let pointerIndex = this.getPointerIndex(pointer)
if (pointerIndex === -1) {
pointerIndex = this.updatePointer(pointer, event, eventTarget, false);
pointerIndex = this.updatePointer(pointer, event, eventTarget, false)
}
this._signals.fire(/cancel$/i.test(event.type)? 'cancel' : 'up', {
this._signals.fire(/cancel$/i.test(event.type) ? 'cancel' : 'up', {
pointer,

@@ -266,15 +267,15 @@ pointerIndex,

interaction: this,
});
})
if (!this.simulation) {
this.end(event);
this.end(event)
}
this.pointerIsDown = false;
this.removePointer(pointer, event);
this.pointerIsDown = false
this.removePointer(pointer, event)
}
documentBlur (event) {
this.end(event);
this._signals.fire('blur', { event, interaction: this });
this.end(event)
this._signals.fire('blur', { event, interaction: this })
}

@@ -299,5 +300,5 @@

end (event) {
this._ending = true;
event = event || this._latestPointer.event;
let endPhaseResult;
this._ending = true
event = event || this._latestPointer.event
let endPhaseResult

@@ -309,9 +310,9 @@ if (this.interacting()) {

phase: 'end',
});
})
}
this._ending = false;
this._ending = false
if (endPhaseResult === true) {
this.stop();
this.stop()
}

@@ -321,7 +322,7 @@ }

currentAction () {
return this._interacting? this.prepared.name: null;
return this._interacting ? this.prepared.name : null
}
interacting () {
return this._interacting;
return this._interacting
}

@@ -331,12 +332,12 @@

stop () {
this._signals.fire('stop', { interaction: this });
this._signals.fire('stop', { interaction: this })
this.target = this.element = null;
this.target = this.element = null
this._interacting = false;
this.prepared.name = this.prevEvent = null;
this._interacting = false
this.prepared.name = this.prevEvent = null
}
getPointerIndex (pointer) {
const pointerId = utils.pointer.getPointerId(pointer);
const pointerId = utils.pointer.getPointerId(pointer)

@@ -346,17 +347,17 @@ // mouse and pen interactions may have only one pointer

? this.pointers.length - 1
: utils.arr.findIndex(this.pointers, curPointer => curPointer.id === pointerId);
: utils.arr.findIndex(this.pointers, (curPointer) => curPointer.id === pointerId)
}
getPointerInfo (pointer) {
return this.pointers[this.getPointerIndex(pointer)];
return this.pointers[this.getPointerIndex(pointer)]
}
updatePointer (pointer, event, eventTarget, down) {
const id = utils.pointer.getPointerId(pointer);
let pointerIndex = this.getPointerIndex(pointer);
let pointerInfo = this.pointers[pointerIndex];
const id = utils.pointer.getPointerId(pointer)
let pointerIndex = this.getPointerIndex(pointer)
let pointerInfo = this.pointers[pointerIndex]
down = down === false
? false
: down || /(down|start)$/i.test(event.type);
: down || /(down|start)$/i.test(event.type)

@@ -370,30 +371,30 @@ if (!pointerInfo) {

null,
);
)
pointerIndex = this.pointers.length;
this.pointers.push(pointerInfo);
pointerIndex = this.pointers.length
this.pointers.push(pointerInfo)
}
else {
pointerInfo.pointer = pointer;
pointerInfo.pointer = pointer
}
if (down) {
this.pointerIsDown = true;
this.pointerIsDown = true
if (!this.interacting()) {
utils.pointer.setCoords(this.coords.start, this.pointers.map(p => p.pointer));
utils.pointer.setCoords(this.coords.start, this.pointers.map((p) => p.pointer))
utils.pointer.copyCoords(this.coords.cur , this.coords.start);
utils.pointer.copyCoords(this.coords.prev, this.coords.start);
utils.pointer.pointerExtend(this.downPointer, pointer);
utils.pointer.copyCoords(this.coords.cur, this.coords.start)
utils.pointer.copyCoords(this.coords.prev, this.coords.start)
utils.pointer.pointerExtend(this.downPointer, pointer)
this.downEvent = event;
pointerInfo.downTime = this.coords.cur.timeStamp;
pointerInfo.downTarget = eventTarget;
this.downEvent = event
pointerInfo.downTime = this.coords.cur.timeStamp
pointerInfo.downTarget = eventTarget
this.pointerWasMoved = false;
this.pointerWasMoved = false
}
}
this._updateLatestPointer(pointer, event, eventTarget);
this._updateLatestPointer(pointer, event, eventTarget)

@@ -408,13 +409,13 @@ this._signals.fire('update-pointer', {

interaction: this,
});
})
return pointerIndex;
return pointerIndex
}
removePointer (pointer, event) {
const pointerIndex = this.getPointerIndex(pointer);
const pointerIndex = this.getPointerIndex(pointer)
if (pointerIndex === -1) { return; }
if (pointerIndex === -1) { return }
const pointerInfo = this.pointers[pointerIndex];
const pointerInfo = this.pointers[pointerIndex]

@@ -427,24 +428,24 @@ this._signals.fire('remove-pointer', {

interaction: this,
});
})
this.pointers.splice(pointerIndex, 1);
this.pointers.splice(pointerIndex, 1)
}
_updateLatestPointer (pointer, event, eventTarget) {
this._latestPointer.pointer = pointer;
this._latestPointer.event = event;
this._latestPointer.eventTarget = eventTarget;
this._latestPointer.pointer = pointer
this._latestPointer.event = event
this._latestPointer.eventTarget = eventTarget
}
_createPreparedEvent (event, phase, preEnd, type) {
const actionName = this.prepared.name;
const actionName = this.prepared.name
return new InteractEvent(this, event, actionName, phase, this.element as Element, null, preEnd, type);
return new InteractEvent(this, event, actionName, phase, this.element as Element, null, preEnd, type)
}
_fireEvent (iEvent) {
this.target.fire(iEvent);
this.target.fire(iEvent)
if (!this.prevEvent || iEvent.timeStamp >= this.prevEvent.timeStamp) {
this.prevEvent = iEvent;
this.prevEvent = iEvent
}

@@ -454,34 +455,25 @@ }

_doPhase (signalArg) {
const { event, phase, preEnd, type } = signalArg;
const { event, phase, preEnd, type } = signalArg
if (!signalArg.noBefore) {
const beforeResult = this._signals.fire(`before-action-${phase}`, signalArg);
const beforeResult = this._signals.fire(`before-action-${phase}`, signalArg)
if (beforeResult === false) {
return false;
return false
}
}
const iEvent = signalArg.iEvent = this._createPreparedEvent(event, phase, preEnd, type);
const iEvent = signalArg.iEvent = this._createPreparedEvent(event, phase, preEnd, type)
this._signals.fire(`action-${phase}`, signalArg);
this._signals.fire(`action-${phase}`, signalArg)
this._fireEvent(iEvent);
this._fireEvent(iEvent)
this._signals.fire(`after-action-${phase}`, signalArg);
this._signals.fire(`after-action-${phase}`, signalArg)
return true;
return true
}
}
export class PointerInfo {
constructor (
public id: number,
public pointer: Interact.PointerType,
public event: Interact.PointerEventType,
public downTime: number,
public downTarget: Node,
) {}
}
export default Interaction;
export default Interaction
export { PointerInfo }

2

interactions.d.ts

@@ -12,3 +12,3 @@ import Signals from '@interactjs/utils/Signals';

listeners: {
[type: string]: Function;
[type: string]: Interact.Listener;
};

@@ -15,0 +15,0 @@ eventMap: any;

12

interactions.js

@@ -35,3 +35,3 @@ import browser from '@interactjs/utils/browser';

}
eventMap.blur = event => {
eventMap.blur = (event) => {
for (const interaction of scope.interactions.list) {

@@ -72,3 +72,3 @@ interaction.documentBlur(event);

function doOnInteractions(method, scope) {
return (function (event) {
return function (event) {
const interactions = scope.interactions.list;

@@ -110,6 +110,6 @@ const pointerType = pointerUtils.getPointerType(event);

// after a touch event
invalidPointer = invalidPointer
|| (new Date().getTime() - scope.prevTouchTime < 500)
invalidPointer = invalidPointer ||
(new Date().getTime() - scope.prevTouchTime < 500) ||
// on iOS and Firefox Mobile, MouseEvent.timeStamp is zero if simulated
|| event.timeStamp === 0;
event.timeStamp === 0;
}

@@ -139,3 +139,3 @@ if (!invalidPointer) {

}
});
};
}

@@ -142,0 +142,0 @@ function getInteraction(searchDetails) {

153

interactions.ts

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

import browser from '@interactjs/utils/browser';
import domObjects from '@interactjs/utils/domObjects';
import events from '@interactjs/utils/events';
import finder from '@interactjs/utils/interactionFinder';
import pointerUtils from '@interactjs/utils/pointerUtils';
import Signals from '@interactjs/utils/Signals';
import InteractionBase from './Interaction';
import { Scope } from './scope';
import browser from '@interactjs/utils/browser'
import domObjects from '@interactjs/utils/domObjects'
import events from '@interactjs/utils/events'
import finder from '@interactjs/utils/interactionFinder'
import pointerUtils from '@interactjs/utils/pointerUtils'
import Signals from '@interactjs/utils/Signals'
import InteractionBase from './Interaction'
import { Scope } from './scope'
declare module '@interactjs/core/scope' {

@@ -18,3 +17,3 @@ interface Scope {

list: InteractionBase[]
listeners: { [type: string]: Function }
listeners: { [type: string]: Interact.Listener }
eventMap: any

@@ -37,54 +36,54 @@ pointerMoveTolerance: number

'updatePointer', 'removePointer', 'windowBlur',
];
]
function install (scope: Scope) {
const signals = new Signals();
const signals = new Signals()
const listeners = {} as any;
const listeners = {} as any
for (const method of methodNames) {
listeners[method] = doOnInteractions(method, scope);
listeners[method] = doOnInteractions(method, scope)
}
const pEventTypes = browser.pEventTypes;
const eventMap = {} as { [key: string]: Function};
const pEventTypes = browser.pEventTypes
const eventMap = {} as { [key: string]: Interact.Listener }
if (domObjects.PointerEvent) {
eventMap[pEventTypes.down ] = listeners.pointerDown;
eventMap[pEventTypes.move ] = listeners.pointerMove;
eventMap[pEventTypes.up ] = listeners.pointerUp;
eventMap[pEventTypes.cancel] = listeners.pointerUp;
eventMap[pEventTypes.down ] = listeners.pointerDown
eventMap[pEventTypes.move ] = listeners.pointerMove
eventMap[pEventTypes.up ] = listeners.pointerUp
eventMap[pEventTypes.cancel] = listeners.pointerUp
}
else {
eventMap.mousedown = listeners.pointerDown;
eventMap.mousemove = listeners.pointerMove;
eventMap.mouseup = listeners.pointerUp;
eventMap.mousedown = listeners.pointerDown
eventMap.mousemove = listeners.pointerMove
eventMap.mouseup = listeners.pointerUp
eventMap.touchstart = listeners.pointerDown;
eventMap.touchmove = listeners.pointerMove;
eventMap.touchend = listeners.pointerUp;
eventMap.touchcancel = listeners.pointerUp;
eventMap.touchstart = listeners.pointerDown
eventMap.touchmove = listeners.pointerMove
eventMap.touchend = listeners.pointerUp
eventMap.touchcancel = listeners.pointerUp
}
eventMap.blur = event => {
eventMap.blur = (event) => {
for (const interaction of scope.interactions.list) {
interaction.documentBlur(event);
interaction.documentBlur(event)
}
};
}
scope.signals.on('add-document' , onDocSignal);
scope.signals.on('remove-document', onDocSignal);
scope.signals.on('add-document', onDocSignal)
scope.signals.on('remove-document', onDocSignal)
// for ignoring browser's simulated mouse events
scope.prevTouchTime = 0;
scope.prevTouchTime = 0
scope.Interaction = class Interaction extends InteractionBase {
get pointerMoveTolerance () {
return scope.interactions.pointerMoveTolerance;
return scope.interactions.pointerMoveTolerance
}
set pointerMoveTolerance (value) {
scope.interactions.pointerMoveTolerance = value;
scope.interactions.pointerMoveTolerance = value
}
};
}
scope.interactions = {

@@ -95,5 +94,5 @@ signals,

new (options) {
options.signals = signals;
options.signals = signals
return new scope.Interaction(options);
return new scope.Interaction(options)
},

@@ -103,3 +102,3 @@ listeners,

pointerMoveTolerance: 1,
};
}

@@ -110,19 +109,19 @@ scope.actions = {

eventTypes: [],
};
}
}
function doOnInteractions (method, scope) {
return (function (event) {
const interactions = scope.interactions.list;
return function (event) {
const interactions = scope.interactions.list
const pointerType = pointerUtils.getPointerType(event);
const [eventTarget, curEventTarget] = pointerUtils.getEventTargets(event);
const matches = []; // [ [pointer, interaction], ...]
const pointerType = pointerUtils.getPointerType(event)
const [eventTarget, curEventTarget] = pointerUtils.getEventTargets(event)
const matches = [] // [ [pointer, interaction], ...]
if (browser.supportsTouch && /touch/.test(event.type)) {
scope.prevTouchTime = new Date().getTime();
scope.prevTouchTime = new Date().getTime()
for (const changedTouch of event.changedTouches) {
const pointer = changedTouch;
const pointerId = pointerUtils.getPointerId(pointer);
const pointer = changedTouch
const pointerId = pointerUtils.getPointerId(pointer)
const searchDetails = {

@@ -136,4 +135,4 @@ pointer,

scope,
};
const interaction = getInteraction(searchDetails);
}
const interaction = getInteraction(searchDetails)

@@ -145,7 +144,7 @@ matches.push([

interaction,
]);
])
}
}
else {
let invalidPointer = false;
let invalidPointer = false

@@ -155,3 +154,3 @@ if (!browser.supportsPointerEvent && /mouse/.test(event.type)) {

for (let i = 0; i < interactions.length && !invalidPointer; i++) {
invalidPointer = interactions[i].pointerType !== 'mouse' && interactions[i].pointerIsDown;
invalidPointer = interactions[i].pointerType !== 'mouse' && interactions[i].pointerIsDown
}

@@ -161,6 +160,6 @@

// after a touch event
invalidPointer = invalidPointer
|| (new Date().getTime() - scope.prevTouchTime < 500)
invalidPointer = invalidPointer ||
(new Date().getTime() - scope.prevTouchTime < 500) ||
// on iOS and Firefox Mobile, MouseEvent.timeStamp is zero if simulated
|| event.timeStamp === 0;
event.timeStamp === 0
}

@@ -177,5 +176,5 @@

scope,
};
}
const interaction = getInteraction(searchDetails);
const interaction = getInteraction(searchDetails)

@@ -187,3 +186,3 @@ matches.push([

interaction,
]);
])
}

@@ -194,32 +193,32 @@ }

for (const [pointer, eventTarget, curEventTarget, interaction] of matches) {
interaction[method](pointer, event, eventTarget, curEventTarget);
interaction[method](pointer, event, eventTarget, curEventTarget)
}
});
}
}
function getInteraction (searchDetails) {
const { pointerType, scope } = searchDetails;
const { pointerType, scope } = searchDetails
const foundInteraction = finder.search(searchDetails);
const signalArg = { interaction: foundInteraction, searchDetails };
const foundInteraction = finder.search(searchDetails)
const signalArg = { interaction: foundInteraction, searchDetails }
scope.interactions.signals.fire('find', signalArg);
scope.interactions.signals.fire('find', signalArg)
return signalArg.interaction || newInteraction({ pointerType }, scope);
return signalArg.interaction || newInteraction({ pointerType }, scope)
}
export function newInteraction (options, scope) {
const interaction = scope.interactions.new(options);
const interaction = scope.interactions.new(options)
scope.interactions.list.push(interaction);
return interaction;
scope.interactions.list.push(interaction)
return interaction
}
function onDocSignal ({ doc, scope, options }, signalName) {
const { eventMap } = scope.interactions;
const { eventMap } = scope.interactions
const eventMethod = signalName.indexOf('add') === 0
? events.add : events.remove;
? events.add : events.remove
if (scope.browser.isIOS && !options.events) {
options.events = { passive: false };
options.events = { passive: false }
}

@@ -229,10 +228,10 @@

for (const eventType in events.delegatedEvents) {
eventMethod(doc, eventType, events.delegateListener);
eventMethod(doc, eventType, events.delegateUseCapture, true);
eventMethod(doc, eventType, events.delegateListener)
eventMethod(doc, eventType, events.delegateUseCapture, true)
}
const eventOptions = options && options.events;
const eventOptions = options && options.events
for (const eventType in eventMap) {
eventMethod(doc, eventType, eventMap[eventType], eventOptions);
eventMethod(doc, eventType, eventMap[eventType], eventOptions)
}

@@ -247,2 +246,2 @@ }

methodNames,
};
}

8

package.json
{
"name": "@interactjs/core",
"version": "1.4.0-alpha.20+sha.ce0da21",
"version": "1.4.0-alpha.21+sha.cdc1d5f",
"peerDependencies": {
"@interactjs/utils": "1.4.0-alpha.20+sha.ce0da21"
"@interactjs/utils": "1.4.0-alpha.21+sha.cdc1d5f"
},
"devDependencies": {
"@interactjs/_dev": "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/utils": "1.4.0-alpha.21+sha.cdc1d5f"
},

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

48

scope.d.ts

@@ -30,14 +30,25 @@ import * as utils from '@interactjs/utils';

events: {
add: (element: EventTarget, type: string, listener: Function, optionalArg?: any) => void;
remove: (element: EventTarget, type: string, listener?: Function | "all", optionalArg?: any) => void;
addDelegate: (selector: string, context: EventTarget, type: string, listener: Function, optionalArg?: any) => void;
add: (element: EventTarget, type: string, listener: (event: Event) => any, optionalArg?: any) => void;
remove: (element: EventTarget, type: string, listener?: "all" | ((event: Event) => any), optionalArg?: any) => void;
addDelegate: (selector: string, context: EventTarget, type: string, listener: (event: Event) => any, optionalArg?: any) => void;
removeDelegate: (selector: any, context: any, type: any, listener?: any, optionalArg?: any) => void;
delegateListener: (event: Event, optionalArg?: any) => void;
delegateUseCapture: (event: Event) => any;
delegatedEvents: {};
documents: any[];
delegatedEvents: {
[type: string]: {
selectors: string[];
contexts: EventTarget[];
listeners: [(event: Event) => any, boolean, boolean][][];
};
};
documents: Document[];
supportsOptions: boolean;
supportsPassive: boolean;
_elements: EventTarget[];
_targets: any[];
_targets: {
events: {
[type: string]: ((event: Event) => any)[];
};
typeCount: number;
}[];
init(window: Window): void;

@@ -52,11 +63,14 @@ };

_win: Window;
document: any;
documents: any[];
document: Document;
documents: Array<{
doc: Document;
options: any;
}>;
constructor();
init(window: Window): Scope;
addDocument(doc: Document, options?: any): void | false;
removeDocument(doc: any): void;
onWindowUnload(event: any): void;
getDocIndex(doc: any): number;
getDocOptions(doc: any): any;
constructor();
removeDocument(doc: Document): void;
onWindowUnload(event: Event): void;
getDocIndex(doc: Document): number;
getDocOptions(doc: Document): any;
}

@@ -68,8 +82,8 @@ declare class InteractableSet {

constructor(scope: Scope);
new(target: any, options: any): InteractableBase;
indexOfElement(target: any, context: any): number;
new(target: Interact.Target, options: any): InteractableBase;
indexOfElement(target: Interact.Target, context: Document | Element): number;
get(element: Interact.Target, options: any, dontCheckInContext?: boolean): InteractableBase;
forEachMatch(element: any, callback: any): any;
forEachMatch(element: Document | Element, callback: (interactable: any) => any): any;
}
export declare function initScope(scope: Scope, window: any): Scope;
export declare function initScope(scope: Scope, window: Window): Scope;
export {};

12

scope.js

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

this.interactables = new InteractableSet(this);
// main document
this.document = null;
// all documents being listened to
this.documents = [ /* { doc, options } */];
this.documents = [];
const scope = this;

@@ -74,3 +72,3 @@ this.Interactable = class Interactable extends InteractableBase {

onWindowUnload(event) {
this.removeDocument(event.currentTarget.document);
this.removeDocument(event.target);
}

@@ -107,3 +105,3 @@ getDocIndex(doc) {

options,
interactable: interactable,
interactable,
win: this.scope._win,

@@ -135,5 +133,5 @@ });

// target is the element
: element === interactable.target)
: element === interactable.target) &&
// the element is in context
&& (interactable.inContext(element))) {
(interactable.inContext(element))) {
ret = callback(interactable);

@@ -140,0 +138,0 @@ }

188

scope.ts

@@ -1,10 +0,9 @@

import * as utils from '@interactjs/utils';
import domObjects from '@interactjs/utils/domObjects';
import defaults from './defaultOptions';
import Eventable from './Eventable';
import InteractableBase from './Interactable';
import InteractEvent from './InteractEvent';
import interactions from './interactions';
import * as utils from '@interactjs/utils'
import domObjects from '@interactjs/utils/domObjects'
import defaults from './defaultOptions'
import Eventable from './Eventable'
import InteractableBase from './Interactable'
import InteractEvent from './InteractEvent'
import interactions from './interactions'
const {

@@ -16,3 +15,3 @@ win,

events,
} = utils;
} = utils

@@ -22,3 +21,3 @@ export type Defaults = typeof defaults

export function createScope () {
return new Scope();
return new Scope()
}

@@ -36,28 +35,52 @@

InteractEvent = InteractEvent
Interactable: typeof InteractableBase
Interactable!: typeof InteractableBase
interactables = new InteractableSet(this)
// main window
_win: Window
_win!: Window
// main document
document = null
document!: Document
// all documents being listened to
documents = [/* { doc, options } */]
documents: Array<{ doc: Document, options: any }> = []
constructor () {
const scope = this as Scope;
(this as { Interactable: typeof InteractableBase }).Interactable = class Interactable extends InteractableBase implements InteractableBase {
get _defaults () { return scope.defaults }
set (options: any) {
super.set(options)
scope.interactables.signals.fire('set', {
options,
interactable: this,
})
return this
}
unset () {
super.unset()
scope.interactables.signals.fire('unset', { interactable: this })
}
}
}
init (window: Window) {
return initScope(this, window);
return initScope(this, window)
}
addDocument (doc: Document, options?): void | false {
addDocument (doc: Document, options?: any): void | false {
// do nothing if document is already known
if (this.getDocIndex(doc) !== -1) { return false; }
if (this.getDocIndex(doc) !== -1) { return false }
const window = win.getWindow(doc);
const window = win.getWindow(doc)
options = options ? utils.extend({}, options) : {};
options = options ? utils.extend({}, options) : {}
this.documents.push({ doc, options });
events.documents.push(doc);
this.documents.push({ doc, options })
events.documents.push(doc)

@@ -67,65 +90,41 @@ // don't add an unload event for the main document

if (doc !== this.document) {
events.add(window, 'unload', this.onWindowUnload);
events.add(window, 'unload', this.onWindowUnload)
}
this.signals.fire('add-document', { doc, window, scope: this, options });
this.signals.fire('add-document', { doc, window, scope: this, options })
}
removeDocument (doc) {
const index = this.getDocIndex(doc);
removeDocument (doc: Document) {
const index = this.getDocIndex(doc)
const window = win.getWindow(doc);
const options = this.documents[index].options;
const window = win.getWindow(doc)
const options = this.documents[index].options
events.remove(window, 'unload', this.onWindowUnload);
events.remove(window, 'unload', this.onWindowUnload)
this.documents.splice(index, 1);
events.documents.splice(index, 1);
this.documents.splice(index, 1)
events.documents.splice(index, 1)
this.signals.fire('remove-document', { doc, window, scope: this, options });
this.signals.fire('remove-document', { doc, window, scope: this, options })
}
onWindowUnload (event) {
this.removeDocument(event.currentTarget.document);
onWindowUnload (event: Event) {
this.removeDocument(event.target as Document)
}
getDocIndex (doc) {
getDocIndex (doc: Document) {
for (let i = 0; i < this.documents.length; i++) {
if (this.documents[i].doc === doc) {
return i;
return i
}
}
return -1;
return -1
}
getDocOptions (doc) {
const docIndex = this.getDocIndex(doc);
getDocOptions (doc: Document) {
const docIndex = this.getDocIndex(doc)
return docIndex === -1 ? null : this.documents[docIndex].options;
return docIndex === -1 ? null : this.documents[docIndex].options
}
constructor () {
const scope = this;
(this as { Interactable: typeof InteractableBase }).Interactable = class Interactable extends InteractableBase implements InteractableBase {
get _defaults () { return scope.defaults; }
set (options) {
super.set(options);
scope.interactables.signals.fire('set', {
options,
interactable: this,
});
return this;
}
unset () {
super.unset();
scope.interactables.signals.fire('unset', { interactable: this });
}
}
}
}

@@ -141,11 +140,11 @@

new (target, options) {
new (target: Interact.Target, options: any): InteractableBase {
options = utils.extend(options || {}, {
actions: this.scope.actions,
});
const interactable = new this.scope.Interactable(target, options, this.scope.document);
})
const interactable = new this.scope.Interactable(target, options, this.scope.document)
this.scope.addDocument(interactable._doc);
this.scope.addDocument(interactable._doc)
this.scope.interactables.list.push(interactable);
this.scope.interactables.list.push(interactable)

@@ -155,34 +154,34 @@ this.scope.interactables.signals.fire('new', {

options,
interactable: interactable,
interactable,
win: this.scope._win,
});
})
return interactable;
return interactable
}
indexOfElement (target, context) {
context = context || this.scope.document;
indexOfElement (target: Interact.Target, context: Document | Element) {
context = context || this.scope.document
const list = this.list;
const list = this.list
for (let i = 0; i < list.length; i++) {
const interactable = list[i];
const interactable = list[i]
if (interactable.target === target && interactable._context === context) {
return i;
return i
}
}
return -1;
return -1
}
get (element: Interact.Target, options, dontCheckInContext?: boolean) {
const ret = this.list[this.indexOfElement(element, options && options.context)];
const ret = this.list[this.indexOfElement(element, options && options.context)]
return ret && (utils.is.string(element) || dontCheckInContext || ret.inContext(element))? ret : null;
return ret && (utils.is.string(element) || dontCheckInContext || ret.inContext(element)) ? ret : null
}
forEachMatch (element, callback) {
forEachMatch (element: Document | Element, callback: (interactable: any) => any) {
for (const interactable of this.list) {
let ret;
let ret

@@ -193,27 +192,26 @@ if ((utils.is.string(interactable.target)

// target is the element
: element === interactable.target)
: element === interactable.target) &&
// the element is in context
&& (interactable.inContext(element))) {
ret = callback(interactable);
(interactable.inContext(element))) {
ret = callback(interactable)
}
if (ret !== undefined) {
return ret;
return ret
}
}
}
}
export function initScope (scope: Scope, window) {
win.init(window);
domObjects.init(window);
browser.init(window);
raf.init(window);
events.init(window);
export function initScope (scope: Scope, window: Window) {
win.init(window)
domObjects.init(window)
browser.init(window)
raf.init(window)
events.init(window)
interactions.install(scope);
scope.document = window.document;
interactions.install(scope)
scope.document = window.document
return scope;
return scope
}

40

tests/Eventable.js

@@ -1,30 +0,30 @@

import test from '@interactjs/_dev/test/test';
import Eventable from '../Eventable';
import test from '@interactjs/_dev/test/test'
import Eventable from '../Eventable'
test('Eventable', t => {
const eventable = new Eventable();
const type = 'TEST';
const eventable = new Eventable()
const type = 'TEST'
const testEvent = { type };
let firedEvent;
const listener = event => { firedEvent = event; };
const testEvent = { type }
let firedEvent
const listener = event => { firedEvent = event }
eventable.on(type, listener);
eventable.fire(testEvent);
eventable.on(type, listener)
eventable.fire(testEvent)
t.equal(firedEvent, testEvent, 'on\'d listener is called');
t.equal(firedEvent, testEvent, 'on\'d listener is called')
firedEvent = undefined;
eventable.off(type, listener);
eventable.fire(testEvent);
firedEvent = undefined
eventable.off(type, listener)
eventable.fire(testEvent)
t.equal(firedEvent, undefined, 'off\'d listener is not called');
t.equal(firedEvent, undefined, 'off\'d listener is not called')
testEvent.immediatePropagationStopped = true;
eventable.on(type, listener);
eventable.fire(testEvent);
testEvent.immediatePropagationStopped = true
eventable.on(type, listener)
eventable.fire(testEvent)
t.equal(firedEvent, undefined, 'listener is not called with immediatePropagationStopped');
t.equal(firedEvent, undefined, 'listener is not called with immediatePropagationStopped')
t.end();
});
t.end()
})

54

tests/helpers.js

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

import * as utils from '@interactjs/utils';
import Signals from '@interactjs/utils/Signals';
import { createScope } from '../scope';
import Eventable from '../Eventable';
import { doc } from '@interactjs/_dev/test/domator';
import * as utils from '@interactjs/utils'
import Signals from '@interactjs/utils/Signals'
import { createScope } from '../scope'
import Eventable from '../Eventable'
import { doc } from '@interactjs/_dev/test/domator'
let counter = 0;
let counter = 0
export function unique () {
return (counter++);
return (counter++)
}

@@ -15,9 +15,9 @@

for (const prop in obj) {
if (!obj.hasOwnProperty(prop)) { continue; }
if (!obj.hasOwnProperty(prop)) { continue }
if (utils.is.object(obj)) {
uniqueProps(obj[obj]);
uniqueProps(obj[obj])
}
else {
obj[prop] = (counter++);
obj[prop] = (counter++)
}

@@ -28,3 +28,3 @@ }

export function newCoordsSet (n) {
n = n || 0;
n = n || 0

@@ -57,7 +57,7 @@ return {

},
};
}
}
export function newPointer (n) {
n = n || 50;
n = n || 50

@@ -70,12 +70,12 @@ return {

clientY: n++,
};
}
}
export function mockScope (options) {
options = options || {};
options = options || {}
const document = options.document || doc;
const window = document.defaultView;
const document = options.document || doc
const window = document.defaultView
const scope = createScope().init(window);
const scope = createScope().init(window)

@@ -88,5 +88,5 @@ Object.assign(scope, {

},
}, options);
}, options)
return scope;
return scope
}

@@ -99,3 +99,3 @@

fire () {},
};
}
}

@@ -119,9 +119,9 @@

? utils.dom.getClientRect(this.element)
: { left: 0, top: 0, right: 0, bottom: 0 };
: { left: 0, top: 0, right: 0, bottom: 0 }
},
fire (event) {
this.events.fire(event);
this.events.fire(event)
},
},
props);
props)
}

@@ -131,5 +131,5 @@

return props.reduce((acc, prop) => {
acc[prop] = src[prop];
return acc;
}, {});
acc[prop] = src[prop]
return acc
}, {})
}

149

tests/Interactable.js

@@ -1,16 +0,16 @@

import test from '@interactjs/_dev/test/test';
import d from '@interactjs/_dev/test/domator';
import test from '@interactjs/_dev/test/test'
import d from '@interactjs/_dev/test/domator'
import * as helpers from './helpers';
import Interactable from '../Interactable';
import * as helpers from './helpers'
import Interactable from '../Interactable'
test('Interactable copies and extends defaults', t => {
const scope = helpers.mockScope();
const { defaults } = scope;
const scope = helpers.mockScope()
const { defaults } = scope
scope.actions.methodDict = { test: 'testize' };
scope.actions.methodDict = { test: 'testize' }
scope.Interactable.prototype.testize = function (options) {
this.setPerAction('test', options);
};
this.setPerAction('test', options)
}

@@ -20,32 +20,32 @@ defaults.test = {

specified: { c: 1, d: 2 },
};
}
const specified = { specified: 'parent' };
const specified = { specified: 'parent' }
const div = d('div');
const interactable = scope.interactables.new(div, { test: specified });
const div = d('div')
const interactable = scope.interactables.new(div, { test: specified })
t.deepEqual(interactable.options.test.specified, specified.specified,
'specified options are properly set');
'specified options are properly set')
t.deepEqual(interactable.options.test.fromDefault, defaults.test.fromDefault,
'default options are properly set');
'default options are properly set')
t.notEqual(interactable.options.test.fromDefault, defaults.test.fromDefault,
'defaults are not aliased');
'defaults are not aliased')
defaults.test.fromDefault.c = 3;
defaults.test.fromDefault.c = 3
t.notOk('c' in interactable.options.test.fromDefault,
'modifying defaults does not affect constructed interactables');
'modifying defaults does not affect constructed interactables')
t.end();
});
t.end()
})
test('Interactable copies and extends per action defaults', t => {
const scope = helpers.mockScope();
const { defaults } = scope;
const scope = helpers.mockScope()
const { defaults } = scope
scope.actions.methodDict = { test: 'testize' };
scope.actions.methodDict = { test: 'testize' }
scope.Interactable.prototype.testize = function (options) {
this.setPerAction('test', options);
};
this.setPerAction('test', options)
}

@@ -55,8 +55,8 @@ defaults.perAction.testModifier = {

specified: null,
};
defaults.test = { testModifier: defaults.perAction.testModifier };
}
defaults.test = { testModifier: defaults.perAction.testModifier }
const div = d('div');
const interactable = scope.interactables.new(div, {});
interactable.testize({ testModifier: { specified: 'parent' } });
const div = d('div')
const interactable = scope.interactables.new(div, {})
interactable.testize({ testModifier: { specified: 'parent' } })

@@ -68,43 +68,43 @@ t.deepEqual(interactable.options.test, {

testModifier: {
fromDefault: { a: 1, b: 2},
fromDefault: { a: 1, b: 2 },
specified: 'parent',
},
}, 'specified options are properly set');
}, 'specified options are properly set')
t.deepEqual(
interactable.options.test.testModifier.fromDefault,
defaults.perAction.testModifier.fromDefault,
'default options are properly set');
'default options are properly set')
t.notEqual(
interactable.options.test.testModifier.fromDefault,
defaults.perAction.testModifier.fromDefault,
'defaults are not aliased');
'defaults are not aliased')
defaults.perAction.testModifier.fromDefault.c = 3;
defaults.perAction.testModifier.fromDefault.c = 3
t.notOk('c' in interactable.options.test.testModifier.fromDefault,
'modifying defaults does not affect constructed interactables');
'modifying defaults does not affect constructed interactables')
// Undo global changes
delete scope.actions;
delete Interactable.prototype.test;
delete defaults.test;
delete defaults.perAction.testModifier;
delete scope.actions
delete Interactable.prototype.test
delete defaults.test
delete defaults.perAction.testModifier
t.end();
});
t.end()
})
test('Interactable.updatePerActionListeners', t => {
const scope = helpers.mockScope();
const scope = helpers.mockScope()
let fired = [];
function addToFired (event) { fired.push(event); }
let fired = []
function addToFired (event) { fired.push(event) }
scope.actions.eventTypes.push('teststart', 'testmove', 'testend');
scope.actions.methodDict = { test: 'testize' };
scope.actions.eventTypes.push('teststart', 'testmove', 'testend')
scope.actions.methodDict = { test: 'testize' }
scope.Interactable.prototype.testize = function (options) {
this.setPerAction('test', options);
};
this.setPerAction('test', options)
}
scope.defaults.test = {};
scope.defaults.test = {}
const interactable = scope.interactables.new('target');
const interactable = scope.interactables.new('target')

@@ -117,38 +117,37 @@ interactable.setPerAction('test', {

}],
});
})
interactable.fire({ type: 'teststart' });
t.deepEqual(fired.map(e => e.type), ['teststart']);
interactable.fire({ type: 'teststart' })
t.deepEqual(fired.map(e => e.type), ['teststart'])
interactable.fire({ type: 'testmove' });
t.deepEqual(fired.map(e => e.type), ['teststart', 'testmove']);
interactable.fire({ type: 'testmove' })
t.deepEqual(fired.map(e => e.type), ['teststart', 'testmove'])
interactable.fire({ type: 'testnotadded' });
t.deepEqual(fired.map(e => e.type), ['teststart', 'testmove']);
interactable.fire({ type: 'testnotadded' })
t.deepEqual(fired.map(e => e.type), ['teststart', 'testmove'])
interactable.fire({ type: 'testend' });
t.deepEqual(fired.map(e => e.type), ['teststart', 'testmove', 'testend']);
interactable.fire({ type: 'testend' })
t.deepEqual(fired.map(e => e.type), ['teststart', 'testmove', 'testend'])
fired = [];
fired = []
interactable.setPerAction('test', {
listeners: [{ start: addToFired }],
});
})
interactable.fire({ type: 'teststart' });
interactable.fire({ type: 'testmove' });
interactable.fire({ type: 'testend' });
t.deepEqual(fired.map(e => e.type), ['teststart']);
interactable.fire({ type: 'teststart' })
interactable.fire({ type: 'testmove' })
interactable.fire({ type: 'testend' })
t.deepEqual(fired.map(e => e.type), ['teststart'])
fired = [];
fired = []
interactable.setPerAction('test', {
listeners: null,
});
})
interactable.fire({ type: 'teststart' });
interactable.fire({ type: 'testmove' });
interactable.fire({ type: 'testend' });
t.deepEqual(fired, []);
interactable.fire({ type: 'teststart' })
interactable.fire({ type: 'testmove' })
interactable.fire({ type: 'testend' })
t.deepEqual(fired, [])
t.end();
});
t.end()
})

414

tests/Interaction.js

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

import test from '@interactjs/_dev/test/test';
import pointerUtils from '@interactjs/utils/pointerUtils';
import * as helpers from './helpers';
import test from '@interactjs/_dev/test/test'
import pointerUtils from '@interactjs/utils/pointerUtils'
import * as helpers from './helpers'
import Signals from '@interactjs/utils/Signals';
import Interaction from '../Interaction';
import InteractEvent from '../InteractEvent';
import interactions from '../interactions';
import Signals from '@interactjs/utils/Signals'
import Interaction from '../Interaction'
import InteractEvent from '../InteractEvent'
import interactions from '../interactions'
const makeInteractionAndSignals = () => new Interaction({ signals: new Signals });
const makeInteractionAndSignals = () => new Interaction({ signals: new Signals() })
test('Interaction constructor', t => {
const testType = 'test';
const signals = new Signals();
const testType = 'test'
const signals = new Signals()
const interaction = new Interaction({
pointerType: testType,
signals,
});
})
const zeroCoords = {

@@ -23,19 +23,19 @@ page : { x: 0, y: 0 },

timeStamp: 0,
};
}
t.equal(interaction._signals, signals,
'signals option is set assigned to interaction._signals');
'signals option is set assigned to interaction._signals')
t.ok(interaction.prepared instanceof Object,
'interaction.prepared is an object');
'interaction.prepared is an object')
t.ok(interaction.downPointer instanceof Object,
'interaction.downPointer is an object');
'interaction.downPointer is an object')
for (const coordField in interaction.coords) {
t.deepEqual(interaction.coords[coordField], zeroCoords,
`nteraction.coords.${coordField} set to zero`);
`nteraction.coords.${coordField} set to zero`)
}
t.equal(interaction.pointerType, testType,
'interaction.pointerType is set');
'interaction.pointerType is set')

@@ -46,31 +46,31 @@ // pointerInfo properties

[],
'interaction.pointers is initially an empty array');
'interaction.pointers is initially an empty array')
// false properties
for (const prop of 'pointerIsDown pointerWasMoved _interacting mouse'.split(' ')) {
t.notOk(interaction[prop], `interaction.${prop} is false`);
t.notOk(interaction[prop], `interaction.${prop} is false`)
}
t.end();
});
t.end()
})
test('Interaction.getPointerIndex', t => {
const interaction = makeInteractionAndSignals();
const interaction = makeInteractionAndSignals()
interaction.pointers = [2, 4, 5, 0, -1].map(id => ({ id }));
interaction.pointers = [2, 4, 5, 0, -1].map(id => ({ id }))
interaction.pointers.forEach(({ id }, index) => {
t.equal(interaction.getPointerIndex({ pointerId: id }), index);
});
t.equal(interaction.getPointerIndex({ pointerId: id }), index)
})
t.end();
});
t.end()
})
test('Interaction.updatePointer', t => {
t.test('no existing pointers', st => {
const interaction = makeInteractionAndSignals();
const pointer = { pointerId: 10 };
const event = {};
const interaction = makeInteractionAndSignals()
const pointer = { pointerId: 10 }
const event = {}
const ret = interaction.updatePointer(pointer, event);
const ret = interaction.updatePointer(pointer, event)

@@ -86,17 +86,17 @@ st.deepEqual(

}],
'interaction.pointers == [{ pointer, ... }]');
st.equal(ret, 0, 'new pointer index is returned');
'interaction.pointers == [{ pointer, ... }]')
st.equal(ret, 0, 'new pointer index is returned')
st.end();
});
st.end()
})
t.test('new pointer with exisiting pointer', st => {
const interaction = makeInteractionAndSignals();
const existing = { pointerId: 0 };
const event = {};
const interaction = makeInteractionAndSignals()
const existing = { pointerId: 0 }
const event = {}
interaction.updatePointer(existing, event);
interaction.updatePointer(existing, event)
const newPointer = { pointerId: 10 };
const ret = interaction.updatePointer(newPointer, event);
const newPointer = { pointerId: 10 }
const ret = interaction.updatePointer(newPointer, event)

@@ -120,35 +120,35 @@ st.deepEqual(

],
'interaction.pointers == [{ pointer: existing, ... }, { pointer: newPointer, ... }]');
'interaction.pointers == [{ pointer: existing, ... }, { pointer: newPointer, ... }]')
st.equal(ret, 1, 'second pointer index is 1');
st.equal(ret, 1, 'second pointer index is 1')
st.end();
});
st.end()
})
t.test('update existing pointers', st => {
const interaction = makeInteractionAndSignals();
const interaction = makeInteractionAndSignals()
const oldPointers = [-3, 10, 2].map(pointerId => ({ pointerId }));
const newPointers = oldPointers.map(pointer => ({ ...pointer, new: true }));
const oldPointers = [-3, 10, 2].map(pointerId => ({ pointerId }))
const newPointers = oldPointers.map(pointer => ({ ...pointer, new: true }))
oldPointers.forEach(pointer => interaction.updatePointer(pointer, pointer));
newPointers.forEach(pointer => interaction.updatePointer(pointer, pointer));
oldPointers.forEach(pointer => interaction.updatePointer(pointer, pointer))
newPointers.forEach(pointer => interaction.updatePointer(pointer, pointer))
st.equal(interaction.pointers.length, oldPointers.length,
'number of pointers is unchanged');
'number of pointers is unchanged')
interaction.pointers.forEach((pointerInfo, i) => {
st.equal(pointerInfo.id, oldPointers[i].pointerId,
`pointer[${i}].id is the same`);
`pointer[${i}].id is the same`)
st.notEqual(pointerInfo.pointer, oldPointers[i],
`new pointer ${i} !== old pointer object`);
});
`new pointer ${i} !== old pointer object`)
})
st.end();
});
});
st.end()
})
})
test('Interaction.removePointer', t => {
const interaction = makeInteractionAndSignals();
const ids = [0, 1, 2, 3];
const interaction = makeInteractionAndSignals()
const ids = [0, 1, 2, 3]
const removals = [

@@ -159,8 +159,8 @@ { id: 0, remain: [1, 2, 3], message: 'first of 4' },

{ id: 1, remain: [ ], message: 'final' },
];
]
ids.forEach((pointerId) => interaction.updatePointer({ pointerId }, {}));
ids.forEach((pointerId) => interaction.updatePointer({ pointerId }, {}))
for (const removal of removals) {
interaction.removePointer({ pointerId: removal.id });
interaction.removePointer({ pointerId: removal.id })

@@ -170,22 +170,22 @@ t.deepEqual(

removal.remain,
`${removal.message} - remaining interaction.pointers is correct`);
`${removal.message} - remaining interaction.pointers is correct`)
}
t.end();
});
t.end()
})
test('Interaction.pointer{Down,Move,Up} updatePointer', t => {
const signals = new Signals();
const interaction = new Interaction({ signals });
const eventTarget = {};
const signals = new Signals()
const interaction = new Interaction({ signals })
const eventTarget = {}
const pointer = {
target: eventTarget,
pointerId: 0,
};
let info = {};
}
let info = {}
signals.on('update-pointer', (arg) => info.updated = arg.pointerInfo);
signals.on('remove-pointer', (arg) => info.removed = arg.pointerInfo);
signals.on('update-pointer', (arg) => { info.updated = arg.pointerInfo })
signals.on('remove-pointer', (arg) => { info.removed = arg.pointerInfo })
interaction.coords.cur.timeStamp = 0;
interaction.coords.cur.timeStamp = 0
const commonPointerInfo = {

@@ -197,5 +197,5 @@ id: 0,

downTarget: null,
};
}
interaction.pointerDown(pointer, pointer, eventTarget);
interaction.pointerDown(pointer, pointer, eventTarget)
t.deepEqual(

@@ -209,8 +209,8 @@ info.updated,

'interaction.pointerDown updates pointer'
);
t.equal(info.removed, undefined, 'interaction.pointerDown doesn\'t remove pointer');
interaction.removePointer(pointer);
info = {};
)
t.equal(info.removed, undefined, 'interaction.pointerDown doesn\'t remove pointer')
interaction.removePointer(pointer)
info = {}
interaction.pointerMove(pointer, pointer, eventTarget);
interaction.pointerMove(pointer, pointer, eventTarget)
t.deepEqual(

@@ -220,11 +220,11 @@ info.updated,

'interaction.pointerMove updates pointer'
);
t.equal(info.removed, undefined, 'interaction.pointerMove doesn\'t remove pointer');
info = {};
)
t.equal(info.removed, undefined, 'interaction.pointerMove doesn\'t remove pointer')
info = {}
interaction.pointerUp(pointer, pointer, eventTarget);
t.equal(info.updated, undefined, 'interaction.pointerUp doesn\'t update existing pointer');
info = {};
interaction.pointerUp(pointer, pointer, eventTarget)
t.equal(info.updated, undefined, 'interaction.pointerUp doesn\'t update existing pointer')
info = {}
interaction.pointerUp(pointer, pointer, eventTarget);
interaction.pointerUp(pointer, pointer, eventTarget)
t.deepEqual(

@@ -234,38 +234,38 @@ info.updated,

'interaction.pointerUp updates non existing pointer'
);
t.deepEqual(info.removed, commonPointerInfo, 'interaction.pointerUp also removes pointer');
info = {};
)
t.deepEqual(info.removed, commonPointerInfo, 'interaction.pointerUp also removes pointer')
info = {}
t.end();
});
t.end()
})
test('Interaction.pointerDown', t => {
const interaction = makeInteractionAndSignals();
const coords = helpers.newCoordsSet();
const eventTarget = {};
const interaction = makeInteractionAndSignals()
const coords = helpers.newCoordsSet()
const eventTarget = {}
const event = {
type: 'down',
target: eventTarget,
};
const pointer = helpers.newPointer();
let signalArg;
}
const pointer = helpers.newPointer()
let signalArg
const signalListener = arg => {
signalArg = arg;
};
signalArg = arg
}
interaction._signals.on('down', signalListener);
interaction._signals.on('down', signalListener)
const pointerCoords = { page: {}, client: {} };
pointerUtils.setCoords(pointerCoords, [pointer]);
const pointerCoords = { page: {}, client: {} }
pointerUtils.setCoords(pointerCoords, [pointer])
for (const prop in coords) {
pointerUtils.copyCoords(interaction.coords[prop], coords[prop]);
pointerUtils.copyCoords(interaction.coords[prop], coords[prop])
}
// test while interacting
interaction._interacting = true;
interaction.pointerDown(pointer, event, eventTarget);
interaction._interacting = true
interaction.pointerDown(pointer, event, eventTarget)
t.equal(interaction.downEvent, null, 'downEvent is not updated');
t.equal(interaction.downEvent, null, 'downEvent is not updated')
t.deepEqual(

@@ -281,35 +281,35 @@ interaction.pointers,

'pointer is added'
);
)
t.deepEqual(interaction.downPointer, {}, 'downPointer is not updated');
t.deepEqual(interaction.downPointer, {}, 'downPointer is not updated')
t.deepEqual(interaction.coords.start, coords.start, 'coords.start are not modified');
t.deepEqual(interaction.coords.cur, coords.cur, 'coords.cur are not modified');
t.deepEqual(interaction.coords.prev, coords.prev, 'coords.prev are not modified');
t.deepEqual(interaction.coords.start, coords.start, 'coords.start are not modified')
t.deepEqual(interaction.coords.cur, coords.cur, 'coords.cur are not modified')
t.deepEqual(interaction.coords.prev, coords.prev, 'coords.prev are not modified')
t.ok(interaction.pointerIsDown, 'pointerIsDown');
t.notOk(interaction.pointerWasMoved, '!pointerWasMoved');
t.ok(interaction.pointerIsDown, 'pointerIsDown')
t.notOk(interaction.pointerWasMoved, '!pointerWasMoved')
t.equal(signalArg.pointer, pointer, 'pointer in down signal arg');
t.equal(signalArg.event, event, 'event in down signal arg');
t.equal(signalArg.eventTarget, eventTarget, 'eventTarget in down signal arg');
t.equal(signalArg.pointerIndex, 0, 'pointerIndex in down signal arg');
t.equal(signalArg.pointer, pointer, 'pointer in down signal arg')
t.equal(signalArg.event, event, 'event in down signal arg')
t.equal(signalArg.eventTarget, eventTarget, 'eventTarget in down signal arg')
t.equal(signalArg.pointerIndex, 0, 'pointerIndex in down signal arg')
// test while not interacting
interaction._interacting = false;
interaction._interacting = false
// reset pointerIsDown
interaction.pointerIsDown = false;
interaction.pointerIsDown = false
// pretend pointer was moved
interaction.pointerWasMoved = true;
interaction.pointerWasMoved = true
// reset signalArg object
signalArg = undefined;
signalArg = undefined
interaction.removePointer(pointer);
interaction.pointerDown(pointer, event, eventTarget);
interaction.removePointer(pointer)
interaction.pointerDown(pointer, event, eventTarget)
// timeStamp is assigned with new Date.getTime()
// don't let it cause deepEaual to fail
pointerCoords.timeStamp = interaction.coords.start.timeStamp;
pointerCoords.timeStamp = interaction.coords.start.timeStamp
t.equal(interaction.downEvent, event, 'downEvent is updated');
t.equal(interaction.downEvent, event, 'downEvent is updated')

@@ -325,59 +325,59 @@ t.deepEqual(

}],
'interaction.pointers is updated');
'interaction.pointers is updated')
t.deepEqual(interaction.coords.start, pointerCoords, 'coords.start are set to pointer');
t.deepEqual(interaction.coords.cur, pointerCoords, 'coords.cur are set to pointer');
t.deepEqual(interaction.coords.prev, pointerCoords, 'coords.prev are set to pointer');
t.deepEqual(interaction.coords.start, pointerCoords, 'coords.start are set to pointer')
t.deepEqual(interaction.coords.cur, pointerCoords, 'coords.cur are set to pointer')
t.deepEqual(interaction.coords.prev, pointerCoords, 'coords.prev are set to pointer')
t.equal(typeof signalArg, 'object', 'down signal was fired again');
t.ok(interaction.pointerIsDown, 'pointerIsDown');
t.notOk(interaction.pointerWasMoved, 'pointerWasMoved should always change to false');
t.equal(typeof signalArg, 'object', 'down signal was fired again')
t.ok(interaction.pointerIsDown, 'pointerIsDown')
t.notOk(interaction.pointerWasMoved, 'pointerWasMoved should always change to false')
t.end();
});
t.end()
})
test('Interaction.start', t => {
const interaction = makeInteractionAndSignals();
const action = { name: 'TEST' };
const target = helpers.mockInteractable();
const element = {};
const pointer = helpers.newPointer();
const event = {};
const interaction = makeInteractionAndSignals()
const action = { name: 'TEST' }
const target = helpers.mockInteractable()
const element = {}
const pointer = helpers.newPointer()
const event = {}
interaction.start(action, target, element);
t.equal(interaction.prepared.name, null, 'do nothing if !pointerIsDown');
interaction.start(action, target, element)
t.equal(interaction.prepared.name, null, 'do nothing if !pointerIsDown')
// pointers is still empty
interaction.pointerIsDown = true;
interaction.start(action, target, element);
t.equal(interaction.prepared.name, null, 'do nothing if too few pointers are down');
interaction.pointerIsDown = true
interaction.start(action, target, element)
t.equal(interaction.prepared.name, null, 'do nothing if too few pointers are down')
interaction.pointerDown(pointer, event, null);
interaction.pointerDown(pointer, event, null)
interaction._interacting = true;
interaction.start(action, target, element);
t.equal(interaction.prepared.name, null, 'do nothing if already interacting');
interaction._interacting = true
interaction.start(action, target, element)
t.equal(interaction.prepared.name, null, 'do nothing if already interacting')
interaction._interacting = false;
interaction._interacting = false
let signalArg;
let signalArg
// let interactingInStartListener;
const signalListener = arg => {
signalArg = arg;
signalArg = arg
// interactingInStartListener = arg.interaction.interacting();
};
}
interaction._signals.on('action-start', signalListener);
interaction.start(action, target, element);
interaction._signals.on('action-start', signalListener)
interaction.start(action, target, element)
t.equal(interaction.prepared.name, action.name, 'action is prepared');
t.equal(interaction.target, target, 'interaction.target is updated');
t.equal(interaction.element, element, 'interaction.element is updated');
t.equal(interaction.prepared.name, action.name, 'action is prepared')
t.equal(interaction.target, target, 'interaction.target is updated')
t.equal(interaction.element, element, 'interaction.element is updated')
// t.assert(interactingInStartListener, 'interaction is interacting during action-start signal');
t.assert(interaction.interacting(), 'interaction is interacting after start method');
t.equal(signalArg.interaction, interaction, 'interaction in signal arg');
t.equal(signalArg.event, event, 'event (interaction.downEvent) in signal arg');
t.assert(interaction.interacting(), 'interaction is interacting after start method')
t.equal(signalArg.interaction, interaction, 'interaction in signal arg')
t.equal(signalArg.event, event, 'event (interaction.downEvent) in signal arg')
interaction._interacting = false;
interaction._interacting = false

@@ -387,80 +387,80 @@ // interaction.start(action, target, element);

t.end();
});
t.end()
})
test('stop interaction from start event', t => {
const scope = helpers.mockScope();
const scope = helpers.mockScope()
interactions.install(scope);
const interaction = scope.interactions.new({});
const interactable = helpers.mockInteractable();
interactions.install(scope)
const interaction = scope.interactions.new({})
const interactable = helpers.mockInteractable()
interaction.target = interactable;
interaction.element = interactable.element;
interaction.prepared = { name: 'TEST' };
interaction.target = interactable
interaction.element = interactable.element
interaction.prepared = { name: 'TEST' }
interactable.events.on('TESTstart', event => {
event.interaction.stop();
});
event.interaction.stop()
})
interaction._signals.fire('action-start', { interaction, event: {} });
interaction._signals.fire('action-start', { interaction, event: {} })
t.notOk(interaction.interacting(), 'interaction can be stopped from start event listener');
t.notOk(interaction.interacting(), 'interaction can be stopped from start event listener')
t.end();
});
t.end()
})
test('Interaction createPreparedEvent', t => {
const scope = helpers.mockScope();
const scope = helpers.mockScope()
interactions.install(scope);
interactions.install(scope)
const interaction = scope.interactions.new({});
const interactable = helpers.mockInteractable();
const action = { name: 'resize' };
const phase = 'TEST_PHASE';
const interaction = scope.interactions.new({})
const interactable = helpers.mockInteractable()
const action = { name: 'resize' }
const phase = 'TEST_PHASE'
interaction.prepared = action;
interaction.target = interactable;
interaction.element = interactable.element;
interaction.prevEvent = { page: {}, client: {}, velocity: {} };
interaction.prepared = action
interaction.target = interactable
interaction.element = interactable.element
interaction.prevEvent = { page: {}, client: {}, velocity: {} }
const iEvent = interaction._createPreparedEvent({}, phase);
const iEvent = interaction._createPreparedEvent({}, phase)
t.ok(iEvent instanceof InteractEvent,
'InteractEvent is fired');
'InteractEvent is fired')
t.equal(iEvent.type, action.name + phase,
'event type');
'event type')
t.equal(iEvent.interactable, interactable,
'event.interactable');
'event.interactable')
t.equal(iEvent.target, interactable.element,
'event.target');
'event.target')
t.end();
});
t.end()
})
test('Interaction fireEvent', t => {
const interaction = new Interaction({ signals: helpers.mockSignals() });
const interactable = helpers.mockInteractable();
const iEvent = {};
let firedEvent;
const interaction = new Interaction({ signals: helpers.mockSignals() })
const interactable = helpers.mockInteractable()
const iEvent = {}
let firedEvent
// this method should be called from actions.firePrepared
interactable.fire = event => {
firedEvent = event;
};
firedEvent = event
}
interaction.target = interactable;
interaction._fireEvent(iEvent);
interaction.target = interactable
interaction._fireEvent(iEvent)
t.equal(firedEvent, iEvent,
'target interactable\'s fire method is called');
'target interactable\'s fire method is called')
t.equal(interaction.prevEvent, iEvent,
'interaction.prevEvent is updated');
'interaction.prevEvent is updated')
t.end();
});
t.end()
})

76

tests/interactions.js

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

import test from '@interactjs/_dev/test/test';
import * as helpers from './helpers';
import test from '@interactjs/_dev/test/test'
import * as helpers from './helpers'
import Signals from '@interactjs/utils/Signals';
import Interaction from '../Interaction';
import interactions from '../interactions';
import Signals from '@interactjs/utils/Signals'
import Interaction from '../Interaction'
import interactions from '../interactions'
test('interactions', t => {
let scope = helpers.mockScope();
let scope = helpers.mockScope()
interactions.install(scope);
interactions.install(scope)

@@ -16,41 +16,41 @@ const interaction = interactions.newInteraction(

scope
);
)
t.equal(scope.interactions.list[0], interaction,
'new Interaction is pushed to scope.interactions');
'new Interaction is pushed to scope.interactions')
interactions.install(scope);
interactions.install(scope)
t.ok(scope.interactions instanceof Object, 'interactions object added to scope');
t.ok(scope.interactions instanceof Object, 'interactions object added to scope')
const listeners = scope.interactions.listeners;
const listeners = scope.interactions.listeners
t.ok(interactions.methodNames.reduce((acc, m) => acc && typeof listeners[m] === 'function', true),
'interactions object added to scope');
'interactions object added to scope')
scope = helpers.mockScope();
scope = helpers.mockScope()
interactions.install(scope);
const newInteraction = scope.interactions.new({});
interactions.install(scope)
const newInteraction = scope.interactions.new({})
t.assert(typeof scope.interactions === 'object');
t.assert(scope.interactions.signals instanceof Signals);
t.assert(typeof scope.interactions.new === 'function');
t.assert(newInteraction instanceof Interaction);
t.equal(newInteraction._signals, scope.interactions.signals);
t.assert(typeof scope.interactions === 'object')
t.assert(scope.interactions.signals instanceof Signals)
t.assert(typeof scope.interactions.new === 'function')
t.assert(newInteraction instanceof Interaction)
t.equal(newInteraction._signals, scope.interactions.signals)
t.assert(typeof scope.actions === 'object');
t.deepEqual(scope.actions.names, []);
t.deepEqual(scope.actions.methodDict, {});
t.assert(typeof scope.actions === 'object')
t.deepEqual(scope.actions.names, [])
t.deepEqual(scope.actions.methodDict, {})
t.end();
});
t.end()
})
test('interactions document event options', t => {
const scope = helpers.mockScope();
const doc = scope.document;
const scope = helpers.mockScope()
const doc = scope.document
let options = {};
scope.browser = { isIOS: false };
scope.signals.fire('add-document', { doc, scope, options });
let options = {}
scope.browser = { isIOS: false }
scope.signals.fire('add-document', { doc, scope, options })

@@ -60,8 +60,8 @@ t.deepEqual(

{},
'no doc options.event.passive is added when not iOS');
'no doc options.event.passive is added when not iOS')
options = {};
options = {}
scope.browser.isIOS = true;
scope.signals.fire('add-document', { doc, scope, options });
scope.browser.isIOS = true
scope.signals.fire('add-document', { doc, scope, options })

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

{ events: { passive: false } },
'doc options.event.passive is set to false for iOS');
'doc options.event.passive is set to false for iOS')
t.end();
});
t.end()
})
tsconfig.json
defaultOptions.js.map

Sorry, the diff of this file is not supported yet

Eventable.js.map

Sorry, the diff of this file is not supported yet

Interactable.js.map

Sorry, the diff of this file is not supported yet

interactablePreventDefault.js.map

Sorry, the diff of this file is not supported yet

InteractEvent.js.map

Sorry, the diff of this file is not supported yet

Interaction.js.map

Sorry, the diff of this file is not supported yet

interactions.js.map

Sorry, the diff of this file is not supported yet

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