@interactjs/auto-start
Advanced tools
@interactjs/auto-start - npm Package Compare versions
Comparing version 1.10.23 to 1.10.24
@@ -8,2 +8,11 @@ import type { Interactable } from '@interactjs/core/Interactable'; | ||
| interface InteractStatic { | ||
| /** | ||
| * Returns or sets the maximum number of concurrent interactions allowed. By | ||
| * default only 1 interaction is allowed at a time (for backwards | ||
| * compatibility). To allow multiple interactions on the same Interactables and | ||
| * elements, you need to enable it in the draggable, resizable and gesturable | ||
| * `'max'` and `'maxPerElement'` options. | ||
| * | ||
| * @param {number} [newValue] Any number. newValue <= 0 means no interactions. | ||
| */ | ||
| maxInteractions: (newValue: any) => any; | ||
@@ -10,0 +19,0 @@ } |
69
base.js
@@ -5,4 +5,4 @@ import * as domUtils from "../utils/domUtils.js"; | ||
| import { copyAction } from "../utils/misc.js"; | ||
| /* eslint-disable import/no-duplicates -- for typescript module augmentations */ | ||
| import './InteractableMethods'; | ||
@@ -30,16 +30,3 @@ import InteractableMethods from './InteractableMethods'; | ||
| }); | ||
| /** | ||
| * Returns or sets the maximum number of concurrent interactions allowed. By | ||
| * default only 1 interaction is allowed at a time (for backwards | ||
| * compatibility). To allow multiple interactions on the same Interactables and | ||
| * elements, you need to enable it in the draggable, resizable and gesturable | ||
| * `'max'` and `'maxPerElement'` options. | ||
| * | ||
| * @alias module:interact.maxInteractions | ||
| * | ||
| * @param {number} [newValue] Any number. newValue <= 0 means no interactions. | ||
| */ | ||
| interact.maxInteractions = newValue => maxInteractions(newValue, scope); | ||
| scope.autoStart = { | ||
@@ -52,3 +39,2 @@ // Allow this many interactions to happen simultaneously | ||
| } | ||
| function prepareOnDown({ | ||
@@ -64,3 +50,2 @@ interaction, | ||
| } | ||
| function prepareOnMove({ | ||
@@ -76,3 +61,2 @@ interaction, | ||
| } | ||
| function startOnMove(arg, scope) { | ||
@@ -82,7 +66,5 @@ const { | ||
| } = arg; | ||
| if (!interaction.pointerIsDown || interaction.interacting() || !interaction.pointerWasMoved || !interaction.prepared.name) { | ||
| return; | ||
| } | ||
| scope.fire('autoStart:before-start', arg); | ||
@@ -93,3 +75,2 @@ const { | ||
| const actionName = interaction.prepared.name; | ||
| if (actionName && interactable) { | ||
@@ -105,3 +86,2 @@ // check manualStart and interaction limit | ||
| } | ||
| function clearCursorOnStop({ | ||
@@ -113,10 +93,9 @@ interaction | ||
| } = interaction; | ||
| if (interactable && interactable.options.styleCursor) { | ||
| setCursor(interaction.element, '', scope); | ||
| } | ||
| } // Check if the current interactable supports the action. | ||
| } | ||
| // Check if the current interactable supports the action. | ||
| // If so, return the validated action. Otherwise, return null | ||
| function validateAction(action, interactable, element, eventTarget, scope) { | ||
@@ -126,6 +105,4 @@ if (interactable.testIgnoreAllow(interactable.options[action.name], element, eventTarget) && interactable.options[action.name].enabled && withinInteractionLimit(interactable, element, action, scope)) { | ||
| } | ||
| return null; | ||
| } | ||
| function validateMatches(interaction, pointer, event, matches, matchElements, eventTarget, scope) { | ||
@@ -136,9 +113,6 @@ for (let i = 0, len = matches.length; i < len; i++) { | ||
| const matchAction = match.getAction(pointer, event, interaction, matchElement); | ||
| if (!matchAction) { | ||
| continue; | ||
| } | ||
| const action = validateAction(matchAction, match, matchElement, eventTarget, scope); | ||
| if (action) { | ||
@@ -152,3 +126,2 @@ return { | ||
| } | ||
| return { | ||
@@ -160,3 +133,2 @@ action: null, | ||
| } | ||
| function getActionInfo(interaction, pointer, event, eventTarget, scope) { | ||
@@ -166,3 +138,2 @@ let matches = []; | ||
| let element = eventTarget; | ||
| function pushMatches(interactable) { | ||
@@ -172,3 +143,2 @@ matches.push(interactable); | ||
| } | ||
| while (is.element(element)) { | ||
@@ -179,10 +149,7 @@ matches = []; | ||
| const actionInfo = validateMatches(interaction, pointer, event, matches, matchElements, eventTarget, scope); | ||
| if (actionInfo.action && !actionInfo.interactable.options[actionInfo.action.name].manualStart) { | ||
| return actionInfo; | ||
| } | ||
| element = domUtils.parentNode(element); | ||
| } | ||
| return { | ||
@@ -194,3 +161,2 @@ action: null, | ||
| } | ||
| function prepare(interaction, { | ||
@@ -213,3 +179,2 @@ action, | ||
| } | ||
| function withinInteractionLimit(interactable, element, action, scope) { | ||
@@ -222,34 +187,26 @@ const options = interactable.options; | ||
| let interactableCount = 0; | ||
| let elementCount = 0; // no actions if any of these values == 0 | ||
| let elementCount = 0; | ||
| // no actions if any of these values == 0 | ||
| if (!(maxActions && maxPerElement && autoStartMax)) { | ||
| return false; | ||
| } | ||
| for (const interaction of scope.interactions.list) { | ||
| const otherAction = interaction.prepared.name; | ||
| if (!interaction.interacting()) { | ||
| continue; | ||
| } | ||
| activeInteractions++; | ||
| if (activeInteractions >= autoStartMax) { | ||
| return false; | ||
| } | ||
| if (interaction.interactable !== interactable) { | ||
| continue; | ||
| } | ||
| interactableCount += otherAction === action.name ? 1 : 0; | ||
| if (interactableCount >= maxActions) { | ||
| return false; | ||
| } | ||
| if (interaction.element === element) { | ||
| elementCount++; | ||
| if (otherAction === action.name && elementCount >= maxPerElement) { | ||
@@ -260,6 +217,4 @@ return false; | ||
| } | ||
| return autoStartMax > 0; | ||
| } | ||
| function maxInteractions(newValue, scope) { | ||
@@ -270,6 +225,4 @@ if (is.number(newValue)) { | ||
| } | ||
| return scope.autoStart.maxInteractions; | ||
| } | ||
| function setCursor(element, cursor, scope) { | ||
@@ -279,7 +232,5 @@ const { | ||
| } = scope.autoStart; | ||
| if (prevCursorElement && prevCursorElement !== element) { | ||
| prevCursorElement.style.cursor = ''; | ||
| } | ||
| element.ownerDocument.documentElement.style.cursor = cursor; | ||
@@ -289,3 +240,2 @@ element.style.cursor = cursor; | ||
| } | ||
| function setInteractionCursor(interaction, scope) { | ||
@@ -297,3 +247,2 @@ const { | ||
| } = interaction; | ||
| if (!(interaction.pointerType === 'mouse' && interactable && interactable.options.styleCursor)) { | ||
@@ -304,11 +253,7 @@ // clear previous target element cursor | ||
| } | ||
| return; | ||
| } | ||
| let cursor = ''; | ||
| if (prepared.name) { | ||
| const cursorChecker = interactable.options[prepared.name].cursorChecker; | ||
| if (is.func(cursorChecker)) { | ||
@@ -320,6 +265,4 @@ cursor = cursorChecker(prepared, interactable, element, interaction._interacting); | ||
| } | ||
| setCursor(interaction.element, cursor || '', scope); | ||
| } | ||
| const autoStart = { | ||
@@ -326,0 +269,0 @@ id: 'auto-start/base', |
| import { parentNode } from "../utils/domUtils.js"; | ||
| import is from "../utils/is.js"; | ||
| import autoStart from './base'; | ||
| function beforeStart({ | ||
@@ -11,4 +10,5 @@ interaction, | ||
| }, scope) { | ||
| if (interaction.prepared.name !== 'drag') return; // check if a drag is in the correct axis | ||
| if (interaction.prepared.name !== 'drag') return; | ||
| // check if a drag is in the correct axis | ||
| const absX = Math.abs(dx); | ||
@@ -20,18 +20,17 @@ const absY = Math.abs(dy); | ||
| interaction.prepared.axis = targetOptions.lockAxis === 'start' ? currentAxis[0] // always lock to one axis even if currentAxis === 'xy' | ||
| : targetOptions.lockAxis; // if the movement isn't in the startAxis of the interactable | ||
| : targetOptions.lockAxis; | ||
| // if the movement isn't in the startAxis of the interactable | ||
| if (currentAxis !== 'xy' && startAxis !== 'xy' && startAxis !== currentAxis) { | ||
| // cancel the prepared action | ||
| ; | ||
| interaction.prepared.name = null; // then try to get a drag from another ineractable | ||
| interaction.prepared.name = null; | ||
| // then try to get a drag from another ineractable | ||
| let element = eventTarget; | ||
| const getDraggable = function (interactable) { | ||
| if (interactable === interaction.interactable) return; | ||
| const options = interaction.interactable.options.drag; | ||
| if (!options.manualStart && interactable.testIgnoreAllow(options, element, eventTarget)) { | ||
| const action = interactable.getAction(interaction.downPointer, interaction.downEvent, interaction, element); | ||
| if (action && action.name === 'drag' && checkStartAxis(currentAxis, interactable) && autoStart.validateAction(action, interactable, element, eventTarget, scope)) { | ||
@@ -41,8 +40,7 @@ return interactable; | ||
| } | ||
| }; // check all interactables | ||
| }; | ||
| // check all interactables | ||
| while (is.element(element)) { | ||
| const interactable = scope.interactables.forEachMatch(element, getDraggable); | ||
| if (interactable) { | ||
@@ -55,3 +53,2 @@ ; | ||
| } | ||
| element = parentNode(element); | ||
@@ -61,3 +58,2 @@ } | ||
| } | ||
| function checkStartAxis(startAxis, interactable) { | ||
@@ -67,7 +63,5 @@ if (!interactable) { | ||
| } | ||
| const thisAxis = interactable.options.drag.startAxis; | ||
| return startAxis === 'xy' || thisAxis === 'xy' || thisAxis === startAxis; | ||
| } | ||
| export default { | ||
@@ -74,0 +68,0 @@ id: 'auto-start/dragAxis', |
@@ -14,14 +14,10 @@ /* eslint-disable import/no-duplicates -- for typescript module augmentations */ | ||
| } | ||
| function getHoldDuration(interaction) { | ||
| const actionName = interaction.prepared && interaction.prepared.name; | ||
| if (!actionName) { | ||
| return null; | ||
| } | ||
| const options = interaction.interactable.options; | ||
| return options[actionName].hold || options[actionName].delay; | ||
| } | ||
| const hold = { | ||
@@ -40,3 +36,2 @@ id: 'auto-start/hold', | ||
| const hold = getHoldDuration(interaction); | ||
| if (hold > 0) { | ||
@@ -62,3 +57,2 @@ interaction.autoStartHoldTimer = setTimeout(() => { | ||
| const holdDuration = getHoldDuration(interaction); | ||
| if (holdDuration > 0) { | ||
@@ -65,0 +59,0 @@ interaction.prepared.name = null; |
@@ -1,2 +0,1 @@ | ||
| import type { Interactable } from '@interactjs/core/Interactable'; | ||
| import type { Interaction } from '@interactjs/core/Interaction'; | ||
@@ -8,18 +7,103 @@ import type { Scope } from '@interactjs/core/scope'; | ||
| getAction: (this: Interactable, pointer: PointerType, event: PointerEventType, interaction: Interaction, element: Element) => ActionProps | null; | ||
| styleCursor: typeof styleCursor; | ||
| actionChecker: typeof actionChecker; | ||
| ignoreFrom: { | ||
| (...args: any[]): Interactable; | ||
| (): boolean; | ||
| }; | ||
| allowFrom: { | ||
| (...args: any[]): Interactable; | ||
| (): boolean; | ||
| }; | ||
| styleCursor(newValue: boolean): this; | ||
| styleCursor(): boolean; | ||
| /** | ||
| * Returns or sets whether the the cursor should be changed depending on the | ||
| * action that would be performed if the mouse were pressed and dragged. | ||
| * | ||
| * @param {boolean} [newValue] | ||
| * @return {boolean | Interactable} The current setting or this Interactable | ||
| */ | ||
| styleCursor(newValue?: boolean): boolean | this; | ||
| actionChecker(checker: Function): Interactable; | ||
| actionChecker(): Function; | ||
| /** | ||
| * ```js | ||
| * interact('.resize-drag') | ||
| * .resizable(true) | ||
| * .draggable(true) | ||
| * .actionChecker(function (pointer, event, action, interactable, element, interaction) { | ||
| * | ||
| * if (interact.matchesSelector(event.target, '.drag-handle')) { | ||
| * // force drag with handle target | ||
| * action.name = drag | ||
| * } | ||
| * else { | ||
| * // resize from the top and right edges | ||
| * action.name = 'resize' | ||
| * action.edges = { top: true, right: true } | ||
| * } | ||
| * | ||
| * return action | ||
| * }) | ||
| * ``` | ||
| * | ||
| * Returns or sets the function used to check action to be performed on | ||
| * pointerDown | ||
| * | ||
| * @param checker - A function which takes a pointer event, | ||
| * defaultAction string, interactable, element and interaction as parameters | ||
| * and returns an object with name property 'drag' 'resize' or 'gesture' and | ||
| * optionally an `edges` object with boolean 'top', 'left', 'bottom' and right | ||
| * props. | ||
| * @returns The checker function or this Interactable | ||
| */ | ||
| actionChecker(checker?: Function): Interactable | Function; | ||
| /** @returns This interactable */ | ||
| ignoreFrom(newValue: string | Element | null): Interactable; | ||
| /** @returns The current ignoreFrom value */ | ||
| ignoreFrom(): string | Element | null; | ||
| /** | ||
| * If the target of the `mousedown`, `pointerdown` or `touchstart` event or any | ||
| * of it's parents match the given CSS selector or Element, no | ||
| * drag/resize/gesture is started. | ||
| * | ||
| * @deprecated | ||
| * Don't use this method. Instead set the `ignoreFrom` option for each action | ||
| * or for `pointerEvents` | ||
| * | ||
| * ```js | ||
| * interact(targett) | ||
| * .draggable({ | ||
| * ignoreFrom: 'input, textarea, a[href]'', | ||
| * }) | ||
| * .pointerEvents({ | ||
| * ignoreFrom: '[no-pointer]', | ||
| * }) | ||
| * ``` | ||
| * Interactable | ||
| */ | ||
| ignoreFrom( | ||
| /** a CSS selector string, an Element or `null` to not ignore any elements */ | ||
| newValue?: string | Element | null): Interactable | string | Element | null; | ||
| allowFrom(): boolean; | ||
| /** | ||
| * | ||
| * A drag/resize/gesture is started only If the target of the `mousedown`, | ||
| * `pointerdown` or `touchstart` event or any of it's parents match the given | ||
| * CSS selector or Element. | ||
| * | ||
| * @deprecated | ||
| * Don't use this method. Instead set the `allowFrom` option for each action | ||
| * or for `pointerEvents` | ||
| * | ||
| * ```js | ||
| * interact(targett) | ||
| * .resizable({ | ||
| * allowFrom: '.resize-handle', | ||
| * .pointerEvents({ | ||
| * allowFrom: '.handle',, | ||
| * }) | ||
| * ``` | ||
| * | ||
| * @param {string | Element | null} [newValue] | ||
| * @return {string | Element | object} The current allowFrom value or this | ||
| * Interactable | ||
| */ | ||
| allowFrom( | ||
| /** A CSS selector string, an Element or `null` to allow from any element */ | ||
| newValue: string | Element | null): Interactable; | ||
| } | ||
| } | ||
| declare function install(scope: Scope): void; | ||
| declare function styleCursor(this: Interactable): boolean; | ||
| declare function styleCursor(this: Interactable, newValue: boolean): typeof this; | ||
| declare function actionChecker(this: Interactable, checker: any): any; | ||
| declare const _default: { | ||
@@ -26,0 +110,0 @@ id: string; |
| import is from "../utils/is.js"; | ||
| import { warnOnce } from "../utils/misc.js"; | ||
| function install(scope) { | ||
| const { | ||
| /** @lends Interactable */ | ||
| Interactable // tslint:disable-line no-shadowed-variable | ||
| } = scope; | ||
| Interactable.prototype.getAction = function getAction(pointer, event, interaction, element) { | ||
| const action = defaultActionChecker(this, event, interaction, element, scope); | ||
| if (this.options.actionChecker) { | ||
| return this.options.actionChecker(pointer, event, action, this, element, interaction); | ||
| } | ||
| return action; | ||
| }; | ||
| /** | ||
| * If the target of the `mousedown`, `pointerdown` or `touchstart` event or any | ||
| * of it's parents match the given CSS selector or Element, no | ||
| * drag/resize/gesture is started. | ||
| * | ||
| * @deprecated | ||
| * Don't use this method. Instead set the `ignoreFrom` option for each action | ||
| * or for `pointerEvents` | ||
| * | ||
| * ```js | ||
| * interact(targett) | ||
| * .draggable({ | ||
| * ignoreFrom: 'input, textarea, a[href]'', | ||
| * }) | ||
| * .pointerEvents({ | ||
| * ignoreFrom: '[no-pointer]', | ||
| * }) | ||
| * ``` | ||
| * | ||
| * @param {string | Element | null} [newValue] a CSS selector string, an | ||
| * Element or `null` to not ignore any elements | ||
| * @return {string | Element | object} The current ignoreFrom value or this | ||
| * Interactable | ||
| */ | ||
| Interactable.prototype.ignoreFrom = warnOnce(function (newValue) { | ||
| return this._backCompatOption('ignoreFrom', newValue); | ||
| }, 'Interactable.ignoreFrom() has been deprecated. Use Interactble.draggable({ignoreFrom: newValue}).'); | ||
| /** | ||
| * | ||
| * A drag/resize/gesture is started only If the target of the `mousedown`, | ||
| * `pointerdown` or `touchstart` event or any of it's parents match the given | ||
| * CSS selector or Element. | ||
| * | ||
| * @deprecated | ||
| * Don't use this method. Instead set the `allowFrom` option for each action | ||
| * or for `pointerEvents` | ||
| * | ||
| * ```js | ||
| * interact(targett) | ||
| * .resizable({ | ||
| * allowFrom: '.resize-handle', | ||
| * .pointerEvents({ | ||
| * allowFrom: '.handle',, | ||
| * }) | ||
| * ``` | ||
| * | ||
| * @param {string | Element | null} [newValue] a CSS selector string, an | ||
| * Element or `null` to allow from any element | ||
| * @return {string | Element | object} The current allowFrom value or this | ||
| * Interactable | ||
| */ | ||
| Interactable.prototype.allowFrom = warnOnce(function (newValue) { | ||
| return this._backCompatOption('allowFrom', newValue); | ||
| }, 'Interactable.allowFrom() has been deprecated. Use Interactble.draggable({allowFrom: newValue}).'); | ||
| /** | ||
| * ```js | ||
| * interact('.resize-drag') | ||
| * .resizable(true) | ||
| * .draggable(true) | ||
| * .actionChecker(function (pointer, event, action, interactable, element, interaction) { | ||
| * | ||
| * if (interact.matchesSelector(event.target, '.drag-handle')) { | ||
| * // force drag with handle target | ||
| * action.name = drag | ||
| * } | ||
| * else { | ||
| * // resize from the top and right edges | ||
| * action.name = 'resize' | ||
| * action.edges = { top: true, right: true } | ||
| * } | ||
| * | ||
| * return action | ||
| * }) | ||
| * ``` | ||
| * | ||
| * Returns or sets the function used to check action to be performed on | ||
| * pointerDown | ||
| * | ||
| * @param {function | null} [checker] A function which takes a pointer event, | ||
| * defaultAction string, interactable, element and interaction as parameters | ||
| * and returns an object with name property 'drag' 'resize' or 'gesture' and | ||
| * optionally an `edges` object with boolean 'top', 'left', 'bottom' and right | ||
| * props. | ||
| * @return {Function | Interactable} The checker function or this Interactable | ||
| */ | ||
| Interactable.prototype.actionChecker = actionChecker; | ||
| /** | ||
| * Returns or sets whether the the cursor should be changed depending on the | ||
| * action that would be performed if the mouse were pressed and dragged. | ||
| * | ||
| * @param {boolean} [newValue] | ||
| * @return {boolean | Interactable} The current setting or this Interactable | ||
| */ | ||
| Interactable.prototype.styleCursor = styleCursor; | ||
| } | ||
| function defaultActionChecker(interactable, event, interaction, element, scope) { | ||
@@ -140,3 +42,2 @@ const rect = interactable.getRect(element); | ||
| } | ||
| function styleCursor(newValue) { | ||
@@ -147,3 +48,2 @@ if (is.bool(newValue)) { | ||
| } | ||
| if (newValue === null) { | ||
@@ -153,6 +53,4 @@ delete this.options.styleCursor; | ||
| } | ||
| return this.options.styleCursor; | ||
| } | ||
| function actionChecker(checker) { | ||
@@ -163,3 +61,2 @@ if (is.func(checker)) { | ||
| } | ||
| if (checker === null) { | ||
@@ -169,6 +66,4 @@ delete this.options.actionChecker; | ||
| } | ||
| return this.options.actionChecker; | ||
| } | ||
| export default { | ||
@@ -175,0 +70,0 @@ id: 'auto-start/interactableMethods', |
| { | ||
| "name": "@interactjs/auto-start", | ||
| "version": "1.10.23", | ||
| "version": "1.10.24", | ||
| "main": "index", | ||
@@ -13,7 +13,7 @@ "module": "index", | ||
| "peerDependencies": { | ||
| "@interactjs/core": "1.10.23", | ||
| "@interactjs/utils": "1.10.23" | ||
| "@interactjs/core": "1.10.24", | ||
| "@interactjs/utils": "1.10.24" | ||
| }, | ||
| "optionalDependencies": { | ||
| "@interactjs/interact": "1.10.23" | ||
| "@interactjs/interact": "1.10.24" | ||
| }, | ||
@@ -28,3 +28,3 @@ "publishConfig": { | ||
| "license": "MIT", | ||
| "gitHead": "9ba48631" | ||
| "gitHead": "86c64a3f" | ||
| } |
@@ -12,3 +12,2 @@ /* eslint-disable import/no-duplicates -- for typescript module augmentations */ | ||
| id: 'auto-start', | ||
| install(scope) { | ||
@@ -19,4 +18,3 @@ scope.usePlugin(autoStart); | ||
| } | ||
| }; | ||
| //# sourceMappingURL=plugin.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.57%
107281
- Lines of code
- increased by0.14%
702
No dependency changes