![\"interact.js\"](\"https://c4d6f7d727e094887e93-4ea74b676357550bd514a6a5b344c625.ssl.cf2.rackcdn.com/ijs-solid.svg\")
\n\n\n JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+).\n
\n\n![\"Gitter\"](\"https://badges.gitter.im/taye/interact.js.svg\")
\n![\"Build](\"https://github.com/taye/interact.js/actions/workflows/workflow.yml/badge.svg\"){kind=icon}
\n\n\nFeatures include:\n\n- **inertia** and **snapping**\n- **multi-touch**, simultaneous interactions\n- cross browser and device, supporting the **desktop and mobile** versions of\n Chrome, Firefox and Opera as well as **Internet Explorer 9+**\n- interaction with [**SVG**](http://interactjs.io/#use_in_svg_files) elements\n- being **standalone and customizable**\n- **not modifying the DOM** except to change the cursor (but you can disable\n that)\n\n## Installation\n\n- [npm](https://www.npmjs.org/): `npm install interactjs`\n- [jsDelivr CDN](https://cdn.jsdelivr.net/npm/interactjs/): ``\n- [unpkg CDN](https://unpkg.com/interactjs/): ``\n- [Rails 5.1+](https://rubyonrails.org/):\n 1. `yarn add interactjs`\n 2. `//= require interactjs/interact`\n- [Webjars SBT/Play 2](https://www.webjars.org/): `libraryDependencies ++= Seq(\"org.webjars.npm\" % \"interactjs\" % version)`\n\n### Typescript definitions\n\nThe project is written in Typescript and the npm package includes the type\ndefinitions, but if you need the typings alone, you can install them with:\n\n```\nnpm install --save-dev @interactjs/types\n```\n\n## Documentation\n\nhttp://interactjs.io/docs\n\n## Example\n\n```javascript\nvar pixelSize = 16;\n\ninteract('.rainbow-pixel-canvas')\n .origin('self')\n .draggable({\n modifiers: [\n interact.modifiers.snap({\n // snap to the corners of a grid\n targets: [\n interact.snappers.grid({ x: pixelSize, y: pixelSize }),\n ],\n })\n ],\n listeners: {\n // draw colored squares on move\n move: function (event) {\n var context = event.target.getContext('2d'),\n // calculate the angle of the drag direction\n dragAngle = 180 * Math.atan2(event.dx, event.dy) / Math.PI;\n\n // set color based on drag angle and speed\n context.fillStyle = 'hsl(' + dragAngle + ', 86%, '\n + (30 + Math.min(event.speed / 1000, 1) * 50) + '%)';\n\n // draw squares\n context.fillRect(event.pageX - pixelSize / 2, event.pageY - pixelSize / 2,\n pixelSize, pixelSize);\n }\n }\n })\n // clear the canvas on doubletap\n .on('doubletap', function (event) {\n var context = event.target.getContext('2d');\n\n context.clearRect(0, 0, context.canvas.width, context.canvas.height);\n });\n\n function resizeCanvases () {\n [].forEach.call(document.querySelectorAll('.rainbow-pixel-canvas'), function (canvas) {\n canvas.width = document.body.clientWidth;\n canvas.height = window.innerHeight * 0.7;\n });\n }\n\n // interact.js can also add DOM event listeners\n interact(document).on('DOMContentLoaded', resizeCanvases);\n interact(window).on('resize', resizeCanvases);\n```\n\nSee the above code in action at https://codepen.io/taye/pen/tCKAm\n\n## License\n\ninteract.js is released under the [MIT License](http://taye.mit-license.org).\n\n[ijs-twitter]: https://twitter.com/interactjs\n[upcoming-changes]: https://github.com/taye/interact.js/blob/main/CHANGELOG.md#upcoming-changes\n" }, { "path": "babel.config.cjs", "content": "module.exports = {\n presets: [['@babel/preset-env', { targets: { node: 'current' } }], '@babel/preset-typescript'],\n}\n" }, { "path": "bin/_add_plugin_indexes", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/add_plugin_indexes')\n" }, { "path": "bin/_bundle", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/bundle')\n" }, { "path": "bin/_check_deps", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/_check_deps')\n" }, { "path": "bin/_clean", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/clean')\n" }, { "path": "bin/_link", "content": "#!/bin/bash\nROOT=$(dirname $(dirname $(readlink -f $0)))\nif [ -z \"$ROOT\" ]\nthen\n ROOT=$(dirname $(dirname $0))\nfi\n\nmodules_scope_dir=node_modules/@interactjs\nmodules_bin_dir=node_modules/.bin\n\nmkdir -p $modules_scope_dir $modules_bin_dir\n\nrm $modules_scope_dir/* 2> /dev/null\n\n# link _dev package\nln -sf $ROOT $modules_scope_dir/_dev\n\n# link all scoped packages from CWD\nfor package in $(cd packages/@interactjs && ls -d *); do\n ln -sf ../../packages/@interactjs/$package $modules_scope_dir\ndone\n\n# link all packages from this repo\nfor package in $(cd $ROOT/packages/@interactjs && ls -d *); do\n ln -sf $ROOT/packages/@interactjs/$package $modules_scope_dir\ndone\n\n# link all bins from this repo and from CWD\ncd node_modules/.bin && ln -sf $ROOT/bin/* ../../bin/* .\n" }, { "path": "bin/_lint", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/lint')\n" }, { "path": "bin/_release", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/release')\n" }, { "path": "bin/_types", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/types')\n" }, { "path": "bin/_version", "content": "#!/usr/bin/env node\nrequire('../scripts/bin/version')\n" }, { "path": "bundle.rollup.config.cjs", "content": "/* eslint-disable import/no-extraneous-dependencies */\nconst { resolve } = require('path')\n\nconst babel = require('@rollup/plugin-babel')\nconst commonjs = require('@rollup/plugin-commonjs')\nconst nodeResolve = require('@rollup/plugin-node-resolve')\nconst replace = require('@rollup/plugin-replace')\nconst terser = require('@rollup/plugin-terser')\nconst { defineConfig } = require('rollup')\n\nconst headers = require('./scripts/headers')\nconst { extendBabelOptions, getModuleDirectories, isPro } = require('./scripts/utils')\n\nconst globals = {\n react: 'React',\n vue: 'Vue',\n}\nconst external = Object.keys(globals)\nconst INPUT_EXTENSIONS = ['.ts', '.tsx', '.vue']\n\nmodule.exports = defineConfig(async () => {\n const variations = [\n { env: { NODE_ENV: 'development' }, ext: '.js', minify: isPro },\n { env: { NODE_ENV: 'production' }, ext: '.min.js', minify: true },\n ]\n\n return variations.map(({ minify, ext, env }) => {\n const babelConfig = extendBabelOptions({\n babelrc: false,\n configFile: false,\n browserslistConfigFile: false,\n targets: { ie: 9 },\n babelHelpers: 'bundled',\n skipPreflightCheck: true,\n extensions: INPUT_EXTENSIONS,\n plugins: [[require.resolve('@babel/plugin-transform-runtime'), { helpers: false, regenerator: true }]],\n })\n\n return defineConfig({\n input: resolve(__dirname, 'packages', 'interactjs', 'index.ts'),\n external,\n plugins: [\n nodeResolve({\n modulePaths: getModuleDirectories(),\n extensions: INPUT_EXTENSIONS,\n }),\n commonjs({ include: '**/node_modules/{rebound,symbol-tree}/**' }),\n babel(babelConfig),\n replace({\n preventAssignment: true,\n values: Object.entries({\n npm_package_version: process.env.npm_package_version,\n IJS_BUNDLE: '1',\n ...env,\n }).reduce((acc, [key, value]) => {\n acc[`process.env.${key}`] = JSON.stringify(value)\n return acc\n }, {}),\n }),\n minify &&\n terser({\n module: false,\n mangle: true,\n compress: {\n ecma: 5,\n unsafe: true,\n unsafe_Function: true,\n unsafe_arrows: false,\n unsafe_methods: true,\n },\n format: {\n preamble: headers?.min,\n },\n }),\n ],\n context: 'window',\n moduleContext: 'window',\n output: {\n file: resolve(__dirname, 'packages', 'interactjs', 'dist', `interact${ext}`),\n format: 'umd',\n name: 'interact',\n banner: minify ? headers.min : headers.raw,\n minifyInternalExports: true,\n inlineDynamicImports: true,\n sourcemap: true,\n globals,\n },\n })\n })\n})\n" }, { "path": "docs/action-options.md", "content": "---\ntitle: Action Options\n---\n\nThe `Interactable` methods `draggable()`, `resizable()` and `gesturable()` are\nused to enable and configure actions for target elements. They all have some\ncommon options as well as some action-specific options and event properties.\n\nDrag, resizem and gesture interactions fire `InteractEvent`s which have the\nfollowing properties common to all action types:\n\n| InteractEvent property | Description |\n| ------------------------ | ------------------------------------------------ |\n| `target` | The element that is being interacted with |\n| `interactable` | The Interactable that is being interacted with |\n| `interaction` | The Interaction that the event belongs to |\n| `x0`, `y0` | Page x and y coordinates of the starting event |\n| `clientX0`, `clientY0` | Client x and y coordinates of the starting event |\n| `dx`, `dy` | Change in coordinates of the mouse/touch |\n| `velocityX`, `velocityY` | The Velocity of the pointer |\n| `speed` | The speed of the pointer |\n| `timeStamp` | The time of creation of the event object |\n\n## Common Action Options\n\nThe Interactable methods `draggable`, `resizable` and `gesturable` take either\n`true` or `false` to simply allow/disallow the action or an object with\nproperties to change certain settings.\n\n### `max`\n\n`max` is used to limit the number of concurrent interactions that can target an\ninteractable. By default, any number of interactions can target an\ninteractable.\n\n### `maxPerElement`\n\nBy default only 1 interaction can target the same interactable+element\ncombination. If you want to allow multiple interactions on the same target\nelement, set the `maxPerElement` property of your object to a value `>= 2`.\n\n### `manualStart`\n\nIf this is changed to `true` then drag, resize and gesture actions will have to\nbe started with a call to [`Interaction#start`][interaction-start] as the usual\n`down`, `move`, `
Selectable text
\n1\n\n \n\n\n" }, { "path": "examples/events/index.js", "content": "/* eslint-disable import/no-absolute-path */\nimport interact from '@interactjs/interactjs'\n\nconst dirs = ['up', 'down', 'left', 'right']\n\ninteract('#swipe')\n .draggable(true)\n .on('dragend', (event) => {\n if (!event.swipe) {\n return\n }\n\n let str = 'swipe'\n\n for (const dir of dirs) {\n if (event.swipe[dir]) {\n str += ' ' + dir\n }\n }\n\n str += '
' + event.swipe.angle.toFixed(2) + 'Β°' + '
' + event.swipe.speed.toFixed(2) + 'px/sec'\n\n event.target.innerHTML = str\n window.console.log(str.replace(/
/g, ' '))\n })\n\nconst pointerEvents = ['tap', 'doubletap', 'hold', 'down', 'move', 'up']\n\nfunction logEvent(event) {\n event.currentTarget.innerHTML = event.pointerType\n\n if (/tap|up|click|down/.test(event.type) && event.interaction.prevTap) {\n window.console.log(\n event.type + ' -- ' + event.dt + ', ' + (new Date().getTime() - event.interaction.prevTap.timeStamp),\n )\n }\n\n if (interact.supportsTouch() || interact.supportsPointerEvent()) {\n event.target.innerHTML += ' #' + event.pointerId\n }\n\n const interactionIndex = interact.debug().interactions.list.indexOf(event.interaction)\n\n event.currentTarget.innerHTML +=\n ' ' +\n event.type +\n '
(' +\n event.pageX +\n ', ' +\n event.pageY +\n ')
' +\n 'interaction #' +\n interactionIndex\n\n // window.console.log(event.pointerType, event.pointerId, event.type, event.pageX, event.pageY, interactionIndex);\n\n event.preventDefault()\n}\n\nfor (let i = 0; i < pointerEvents.length; i++) {\n const eventType = pointerEvents[i]\n\n interact('#swipe').on(eventType, logEvent)\n}\n\nfunction changeTolerance(event) {\n const value = event.target.value | 0\n\n interact.pointerMoveTolerance(value)\n\n document.getElementById('tolerance-display').textContent = value\n}\n\ninteract('.tolerance-slider').on('input', changeTolerance)\ninteract('.tolerance-slider').on('change', changeTolerance)\n" }, { "path": "examples/iframes/bottom.html", "content": "\n\n\n\n\n
An element in the BOTTOM frame
\nAn element in the TOP frame
\nAn element in the MIDDLE frame
\ngrid spacing
\n \n \n\n
grid offset
\n \n \n\n
snap range
\n \n\n
snap mode
\n\n
\n \n
\n
\n\n \n\n \n\n \n
\n
\n\n \n
{{ list.title }}
\n\n{{ list.items }}\n\n [ {{ tags.join(', ') }} ]\n\n \nThis package is an internal part of interactjs and is not meant\nto be used independently as each update may introduce breaking changes\n
\n"
},
{
"path": "packages/@interactjs/actions/actions.spec.ts",
"content": "import type { Scope } from '@interactjs/core/scope'\nimport * as helpers from '@interactjs/core/tests/_helpers'\nimport type { ActionName } from '@interactjs/core/types'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\n\nimport actions from './plugin'\n\ndescribe('actions integration', () => {\n const scope: Scope = helpers.mockScope()\n const event = pointerUtils.coordsToEvent(pointerUtils.newCoords())\n const element = scope.document.body\n\n scope.usePlugin(actions)\n\n const interactable = scope.interactables.new(element)\n // make a dropzone\n scope.interactables.new(scope.document.documentElement).dropzone({})\n const interaction1 = scope.interactions.new({})\n\n interaction1.pointerDown(event, event, element)\n\n for (const name in scope.actions.map) {\n test(`${name} interaction starts and stops as expected`, () => {\n interaction1.start({ name: name as ActionName }, interactable, element)\n interaction1.stop()\n\n expect(() => {\n interaction1.interacting()\n }).not.toThrow()\n\n expect(interaction1.interacting()).toBe(false)\n })\n }\n\n const actionNames = Object.keys(scope.actions.map)\n\n for (const order of [actionNames, [...actionNames].reverse()] as ActionName[][]) {\n const interaction2 = scope.interactions.new({})\n\n for (const name of order) {\n test(`${name} interaction starts, moves and ends as expected`, () => {\n expect(() => {\n interaction2.start({ name }, interactable, element)\n interaction2.pointerMove(event, event, element)\n interaction2.pointerUp(event, event, element, element)\n }).not.toThrow()\n\n expect(interaction2.interacting()).toBe extends InteractEvent<'resize', P> {\n deltaRect?: FullRect\n edges?: ActionProps['edges']\n}\n\nfunction install(scope: Scope) {\n const {\n actions,\n browser,\n Interactable, // tslint:disable-line no-shadowed-variable\n defaults,\n } = scope\n\n // Less Precision with touch input\n\n resize.cursors = initCursors(browser)\n resize.defaultMargin = browser.supportsTouch || browser.supportsPointerEvent ? 20 : 10\n\n Interactable.prototype.resizable = function (this: Interactable, options: ResizableOptions | boolean) {\n return resizable(this, options, scope)\n } as Interactable['resizable']\n\n actions.map.resize = resize\n actions.methodDict.resize = 'resizable'\n\n defaults.actions.resize = resize.defaults\n}\n\nfunction resizeChecker(arg) {\n const { interaction, interactable, element, rect, buttons } = arg\n\n if (!rect) {\n return undefined\n }\n\n const page = extend({}, interaction.coords.cur.page)\n const resizeOptions = interactable.options.resize\n\n if (\n !(resizeOptions && resizeOptions.enabled) ||\n // check mouseButton setting if the pointer is down\n (interaction.pointerIsDown &&\n /mouse|pointer/.test(interaction.pointerType) &&\n (buttons & resizeOptions.mouseButtons) === 0)\n ) {\n return undefined\n }\n\n // if using resize.edges\n if (is.object(resizeOptions.edges)) {\n const resizeEdges = {\n left: false,\n right: false,\n top: false,\n bottom: false,\n }\n\n for (const edge in resizeEdges) {\n resizeEdges[edge] = checkResizeEdge(\n edge,\n resizeOptions.edges[edge],\n page,\n interaction._latestPointer.eventTarget,\n element,\n rect,\n resizeOptions.margin || resize.defaultMargin,\n )\n }\n\n resizeEdges.left = resizeEdges.left && !resizeEdges.right\n resizeEdges.top = resizeEdges.top && !resizeEdges.bottom\n\n if (resizeEdges.left || resizeEdges.right || resizeEdges.top || resizeEdges.bottom) {\n arg.action = {\n name: 'resize',\n edges: resizeEdges,\n }\n }\n } else {\n const right = resizeOptions.axis !== 'y' && page.x > rect.right - resize.defaultMargin\n const bottom = resizeOptions.axis !== 'x' && page.y > rect.bottom - resize.defaultMargin\n\n if (right || bottom) {\n arg.action = {\n name: 'resize',\n axes: (right ? 'x' : '') + (bottom ? 'y' : ''),\n }\n }\n }\n\n return arg.action ? false : undefined\n}\n\nfunction resizable(interactable: Interactable, options: OrBoolean (\n event: PointerEventType,\n phase: P,\n preEnd?: boolean,\n type?: string,\n ) {\n return new InteractEvent (iEvent: InteractEvent (\n signalArg: Omit\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/auto-scroll/package.json",
"content": "{\n \"name\": \"@interactjs/auto-scroll\",\n \"version\": \"1.10.27\",\n \"main\": \"index\",\n \"module\": \"index\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/taye/interact.js.git\",\n \"directory\": \"packages/@interactjs/auto-scroll\"\n },\n \"peerDependencies\": {\n \"@interactjs/utils\": \"1.10.27\"\n },\n \"optionalDependencies\": {\n \"@interactjs/interact\": \"1.10.27\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"sideEffects\": [\n \"**/index.js\",\n \"**/index.prod.js\"\n ],\n \"license\": \"MIT\"\n}\n"
},
{
"path": "packages/@interactjs/auto-scroll/plugin.ts",
"content": "import type { Interactable } from '@interactjs/core/Interactable'\nimport type Interaction from '@interactjs/core/Interaction'\nimport type { Scope, Plugin } from '@interactjs/core/scope'\nimport type { ActionName, PointerType } from '@interactjs/core/types'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport is from '@interactjs/utils/is'\nimport raf from '@interactjs/utils/raf'\nimport { getStringOptionResult } from '@interactjs/utils/rect'\nimport { getWindow } from '@interactjs/utils/window'\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n autoScroll: typeof autoScroll\n }\n}\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n autoScroll?: typeof autoScroll\n }\n}\n\ndeclare module '@interactjs/core/options' {\n interface PerActionDefaults {\n autoScroll?: AutoScrollOptions\n }\n}\n\nexport interface AutoScrollOptions {\n container?: Window | HTMLElement | string\n margin?: number\n distance?: number\n interval?: number\n speed?: number\n enabled?: boolean\n}\n\nfunction install(scope: Scope) {\n const { defaults, actions } = scope\n\n scope.autoScroll = autoScroll\n autoScroll.now = () => scope.now()\n\n actions.phaselessTypes.autoscroll = true\n defaults.perAction.autoScroll = autoScroll.defaults\n}\n\nconst autoScroll = {\n defaults: {\n enabled: false,\n margin: 60,\n\n // the item that is scrolled (Window or HTMLElement)\n container: null as AutoScrollOptions['container'],\n\n // the scroll speed in pixels per second\n speed: 300,\n } as AutoScrollOptions,\n\n now: Date.now,\n\n interaction: null as Interaction\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/auto-start/autoStart.spec.ts",
"content": "import drag from '@interactjs/actions/drag/plugin'\nimport * as helpers from '@interactjs/core/tests/_helpers'\n\nimport autoStart from './base'\n\ntest('autoStart', () => {\n window.PointerEvent = null\n\n document.body.innerHTML = `\n \n \n `\n\n Object.assign(document.body.style)\n\n const {\n interaction,\n interactable,\n event,\n coords,\n target: element,\n down,\n } = helpers.testEnv({\n plugins: [autoStart, drag],\n target: document.getElementById('target'),\n })\n\n interactable.draggable(true)\n interaction.pointerType = coords.pointerType = 'mouse'\n coords.buttons = 1\n\n down()\n\n // prepares action\n expect(interaction.prepared).toEqual({ name: 'drag', axis: 'xy', edges: undefined })\n\n // set interaction.rect\n expect(interaction.rect).toEqual(\n helpers.getProps(element.getBoundingClientRect(), ['top', 'left', 'bottom', 'right', 'width', 'height']),\n )\n\n // sets drag cursor\n expect(element.style.cursor).toBe('move')\n\n const cursorChecker = jest.fn(() => 'pointer')\n\n interactable.draggable({\n cursorChecker,\n })\n\n interaction.pointerDown(event, event, element)\n\n // calls cursorChecker with expected args\n expect(cursorChecker).toHaveBeenCalledWith(\n { name: 'drag', axis: 'xy', edges: undefined },\n interactable,\n element,\n false,\n )\n\n interaction.pointerDown(event, event, element)\n // uses cursorChecker value\n expect(element.style.cursor).toBe('pointer')\n\n coords.page.x += 10\n coords.client.x += 10\n interaction.pointerMove(event, event, element)\n // down -> move starts action\n expect(interaction._interacting).toBe(true)\n\n // calls cursorChecker with true for interacting arg\n expect(cursorChecker).toHaveBeenCalledWith(\n { name: 'drag', axis: 'xy', edges: undefined },\n interactable,\n element,\n true,\n )\n})\n"
},
{
"path": "packages/@interactjs/auto-start/base.ts",
"content": "import type { Interactable } from '@interactjs/core/Interactable'\nimport type { Interaction } from '@interactjs/core/Interaction'\nimport type { Scope, SignalArgs, Plugin } from '@interactjs/core/scope'\nimport type {\n CursorChecker,\n PointerType,\n PointerEventType,\n Element,\n ActionName,\n ActionProps,\n} from '@interactjs/core/types'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\nimport { copyAction } from '@interactjs/utils/misc'\n\n/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport './InteractableMethods'\nimport InteractableMethods from './InteractableMethods'\n/* eslint-enable import/no-duplicates */\n\ndeclare module '@interactjs/core/InteractStatic' {\n export interface InteractStatic {\n /**\n * Returns or sets the maximum number of concurrent interactions allowed. By\n * default only 1 interaction is allowed at a time (for backwards\n * compatibility). To allow multiple interactions on the same Interactables and\n * elements, you need to enable it in the draggable, resizable and gesturable\n * `'max'` and `'maxPerElement'` options.\n *\n * @param {number} [newValue] Any number. newValue <= 0 means no interactions.\n */\n maxInteractions: (newValue: any) => any\n }\n}\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n autoStart: AutoStart\n }\n\n interface SignalArgs {\n 'autoStart:before-start': Omit\nThis package is an internal part of
\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/dev-tools/babel-plugin-prod.js",
"content": "/* global process, __dirname */\nconst path = require('path')\n\nconst PROD_EXT = '.prod'\n\nfunction fixImportSource ({ node: { source } }, { filename }) {\n if (shouldIgnoreImport(source)) return\n\n let resolvedShort = ''\n\n try {\n const paths = [filename && path.dirname(filename), __dirname, process.cwd()].filter((p) => !!p)\n\n const resolved = require.resolve(source.value, { paths })\n const resolvedWithoutScopePath = resolved.replace(/.*[\\\\/]@interactjs[\\\\/]/, '')\n\n resolvedShort = path\n .join('@interactjs', resolvedWithoutScopePath)\n // windows path to posix\n .replace(/\\\\/g, '/')\n source.value = resolvedShort.replace(/(\\.js)?$/, PROD_EXT)\n } catch (e) {}\n}\n\nfunction babelPluginInteractjsProd () {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n \"[@interactjs/dev-tools] You're using the production plugin in the development environment. You might lose out on some helpful hints!\",\n )\n }\n\n return {\n visitor: {\n ImportDeclaration: fixImportSource,\n ExportNamedDeclaration: fixImportSource,\n ExportAllDeclaration: fixImportSource,\n ExportDefaultSpecifier: fixImportSource,\n },\n }\n}\n\nfunction shouldIgnoreImport (source) {\n return (\n !source ||\n // only change @interactjs scoped imports\n !source.value.startsWith('@interactjs/') ||\n // ignore imports of prod files\n source.value.endsWith(PROD_EXT) ||\n source.value.endsWith(PROD_EXT + '.js')\n )\n}\n\nmodule.exports = babelPluginInteractjsProd\n\nObject.assign(module.exports, {\n default: babelPluginInteractjsProd,\n fixImportSource,\n})\n"
},
{
"path": "packages/@interactjs/dev-tools/babel-plugin-prod.spec.ts",
"content": "/** @jest-environment node */\nimport * as babel from '@babel/core'\nimport proposalExportDefaultFrom from '@babel/plugin-proposal-export-default-from'\n\nimport babelPluginProd, { fixImportSource } from './babel-plugin-prod'\n\ndescribe('@dev-tools/prod/babel-plugin-prod', () => {\n const filename = require.resolve('@interactjs/_dev/test/fixtures/babelPluginProject/index.js')\n\n const cases = [\n {\n module: 'x',\n expected: 'x',\n message: 'non @interact/* package unchanged',\n },\n {\n module: 'interact',\n expected: 'interact',\n message: 'unscoped interact import unchanged',\n },\n {\n module: '@interactjs/NONEXISTENT_PACKAGE',\n expected: '@interactjs/NONEXISTENT_PACKAGE',\n message: 'missing package unchanged',\n },\n {\n module: '@interactjs/a/NONEXISTENT_MODULE',\n expected: '@interactjs/a/NONEXISTENT_MODULE',\n message: 'import of missing module unchanged',\n },\n {\n module: '@interactjs/a',\n expected: '@interactjs/a/package-main-file.prod',\n message: 'package main module',\n },\n {\n module: '@interactjs/a/a',\n expected: '@interactjs/a/a.prod',\n message: 'package root-level non index module',\n },\n {\n module: '@interactjs/a/b',\n expected: '@interactjs/a/b/index.prod',\n message: 'nested index module',\n },\n {\n module: '@interactjs/a/b/b',\n expected: '@interactjs/a/b/b.prod',\n message: 'package nested non index module',\n },\n ]\n\n for (const { module, expected, message } of cases) {\n // eslint-disable-next-line jest/valid-title\n test(message, () => {\n const source = { value: module }\n\n fixImportSource({ node: { source } }, { filename })\n\n expect(source.value).toBe(expected)\n })\n }\n\n test('transforms code when used in babel config', () => {\n expect(\n babel.transform(\n [\n 'import \"@interactjs/a/a\";',\n 'import a, { b } from \"@interactjs/a/a\";',\n 'export b from \"@interactjs/a/a\";',\n 'export * from \"@interactjs/a/a\";',\n ].join('\\n'),\n {\n babelrc: false,\n configFile: false,\n plugins: [babelPluginProd, [proposalExportDefaultFrom, { loose: true }]],\n filename,\n sourceType: 'module',\n },\n ).code,\n ).toEqual(\n [\n 'import \"@interactjs/a/a.prod\";',\n 'import a, { b } from \"@interactjs/a/a.prod\";',\n 'export { default as b } from \"@interactjs/a/a.prod\";',\n 'export * from \"@interactjs/a/a.prod\";',\n ].join('\\n'),\n )\n })\n})\n"
},
{
"path": "packages/@interactjs/dev-tools/devTools.spec.ts",
"content": "import drag from '@interactjs/actions/drag/plugin'\nimport resize from '@interactjs/actions/resize/plugin'\nimport * as helpers from '@interactjs/core/tests/_helpers'\n\nimport type { Check, Logger } from './plugin'\nimport devTools from './plugin'\n\nconst { checks, links, prefix } = devTools\nconst checkMap = checks.reduce(\n (acc, check) => {\n acc[check.name] = check\n return acc\n },\n {} as { [name: string]: Check },\n)\n\ntest('devTools', () => {\n const devToolsWithLogger = {\n install: (s) =>\n s.usePlugin(devTools, {\n logger: {\n warn(...args: any[]) {\n log(args, 'warn')\n },\n log(...args: any[]) {\n log(args, 'log')\n },\n error(...args: any[]) {\n log(args, 'error')\n },\n },\n }),\n }\n\n const {\n scope,\n interaction,\n interactable,\n target: element,\n down,\n start,\n move,\n stop,\n } = helpers.testEnv({\n plugins: [devToolsWithLogger, drag, resize],\n })\n\n const logs: Array<{ args: any[]; type: keyof Logger }> = []\n\n function log(args: any, type: any) {\n logs.push({ args, type })\n }\n\n scope.usePlugin(drag)\n scope.usePlugin(resize)\n\n interactable.draggable(true).resizable({ onmove: () => {} })\n\n down()\n start({ name: 'drag' })\n // warning about missing touchAction\n expect(logs[0]).toEqual({\n args: [prefix + checkMap.touchAction.text, element, links.touchAction],\n type: 'warn',\n })\n\n // warning about missing move listeners\n expect(logs[1]).toEqual({ args: [prefix + checkMap.noListeners.text, 'drag', interactable], type: 'warn' })\n\n stop()\n\n // resolve touchAction\n element.style.touchAction = 'none'\n // resolve missing listeners\n interactable.on('dragmove', () => {})\n\n interaction.start({ name: 'resize' }, interactable, element)\n move()\n stop()\n\n // warning about resizing without \"box-sizing: none\"\n expect(logs[2]).toEqual({\n args: [prefix + checkMap.boxSizing.text, element, links.boxSizing],\n type: 'warn',\n })\n\n logs.splice(0)\n\n interaction.start({ name: 'resize' }, interactable, element)\n move()\n stop()\n\n interactable.options.devTools.ignore = { boxSizing: true }\n\n interaction.start({ name: 'resize' }, interactable, element)\n move()\n stop()\n\n // warning removed with options.devTools.ignore\n expect(logs).toHaveLength(1)\n\n logs.splice(0)\n\n // resolve boxSizing\n interactable.options.devTools.ignore = {}\n element.style.boxSizing = 'border-box'\n\n interaction.start({ name: 'resize' }, interactable, element)\n move(true)\n stop()\n\n interaction.start({ name: 'drag' }, interactable, element)\n move()\n stop()\n\n // no warnings when issues are resolved\n expect(logs).toHaveLength(0)\n})\n"
},
{
"path": "packages/@interactjs/dev-tools/package.json",
"content": "{\n \"name\": \"@interactjs/dev-tools\",\n \"version\": \"1.10.27\",\n \"main\": \"index\",\n \"module\": \"index\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/taye/interact.js.git\",\n \"directory\": \"packages/@interactjs/dev-tools\"\n },\n \"peerDependencies\": {\n \"@interactjs/modifiers\": \"1.10.27\",\n \"@interactjs/utils\": \"1.10.27\"\n },\n \"optionalDependencies\": {\n \"@interactjs/interact\": \"1.10.27\",\n \"vue\": \"3\"\n },\n \"devDependencies\": {\n \"vue\": \"next\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"sideEffects\": [\n \"**/index.js\",\n \"**/index.prod.js\"\n ],\n \"license\": \"MIT\"\n}\n"
},
{
"path": "packages/@interactjs/dev-tools/plugin.ts",
"content": "import type Interaction from '@interactjs/core/Interaction'\nimport type { Scope, Plugin } from '@interactjs/core/scope'\nimport type { Element, OptionMethod } from '@interactjs/core/types'\nimport domObjects from '@interactjs/utils/domObjects'\nimport { parentNode } from '@interactjs/utils/domUtils'\nimport extend from '@interactjs/utils/extend'\nimport is from '@interactjs/utils/is'\nimport isNonNativeEvent from '@interactjs/utils/isNonNativeEvent'\nimport normalizeListeners from '@interactjs/utils/normalizeListeners'\nimport * as win from '@interactjs/utils/window'\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n logger: Logger\n }\n}\n\ndeclare module '@interactjs/core/options' {\n interface BaseDefaults {\n devTools?: DevToolsOptions\n }\n}\n\ndeclare module '@interactjs/core/Interactable' {\n interface Interactable {\n devTools: OptionMethod\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/inertia/inertia.spec.ts",
"content": "import drag from '@interactjs/actions/drag/plugin'\nimport type { EventPhase, InteractEvent } from '@interactjs/core/InteractEvent'\nimport * as helpers from '@interactjs/core/tests/_helpers'\nimport extend from '@interactjs/utils/extend'\n\nimport inertia from './plugin'\n\ntest('inertia', () => {\n const { scope, interaction, down, start, move, up, interactable, coords } = helpers.testEnv({\n plugins: [inertia, drag],\n rect: { left: 0, top: 0, bottom: 100, right: 100 },\n })\n\n const state = interaction.inertia\n const modifierChange = 5\n const changeModifier = {\n options: { endOnly: false },\n methods: {\n set({ coords: modifierCoords, phase }: any) {\n modifierCoords.x = modifierChange\n modifierCoords.y = modifierChange\n modifierCallPhases.push(phase)\n },\n },\n }\n\n let fired: Array\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/interact/index.ts",
"content": "import { Scope } from '@interactjs/core/scope'\n\nconst scope = new Scope()\n\nconst interact = scope.interactStatic\n\nexport default interact\n\nconst _global = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this\nscope.init(_global)\n"
},
{
"path": "packages/@interactjs/interact/interact.spec.ts",
"content": "import { Scope } from '@interactjs/core/scope'\n\nconst makeIframeDoc = () => {\n const iframe = document.body.appendChild(document.createElement('iframe'))\n return iframe.contentWindow.document\n}\ntest('interact export', () => {\n const scope = new Scope()\n const interact = scope.interactStatic\n\n scope.init(window)\n\n const interactable1 = interact('selector')\n // interact function returns Interactable instance\n expect(interactable1).toBeInstanceOf(scope.Interactable)\n // same interactable is returned with same target and context\n expect(interact('selector')).toBe(interactable1)\n // new interactables are added to list\n expect(scope.interactables.list).toHaveLength(1)\n\n interactable1.unset()\n // unset interactables are removed\n expect(scope.interactables.list).toHaveLength(0)\n // unset interactions are removed\n expect(scope.interactions.list).toHaveLength(0)\n\n const doc1 = document\n const doc2 = makeIframeDoc()\n const results = (\n [\n ['repeat', doc1],\n ['repeat', doc2],\n [doc1, doc1],\n [doc2.body, doc2],\n ] as const\n ).reduce((acc, [target, context]) => {\n const interactable = interact(target, { context })\n\n // unique contexts make unique interactables with identical targets\n expect(acc.some((e) => e.interactable === interactable)).toBe(false)\n\n acc.push({ interactable, target, context })\n return acc\n }, [])\n\n for (const { interactable, target, context } of results) {\n // interactions.get returns correct result with identical targets and different contexts\n expect(scope.interactables.getExisting(target, { context })).toBe(interactable)\n }\n\n const doc3 = makeIframeDoc()\n\n const prevDocCount = scope.documents.length\n\n interact.addDocument(doc3, { events: { passive: false } })\n // interact.addDocument() adds to scope with options\n expect(scope.documents[prevDocCount]).toEqual({ doc: doc3, options: { events: { passive: false } } })\n\n interact.removeDocument(doc3)\n // interact.removeDocument() removes document from scope\n expect(scope.documents).toHaveLength(prevDocCount)\n\n scope.interactables.list.forEach((i) => i.unset())\n\n const plugin1 = {\n id: 'test-1',\n install() {\n plugin1.count++\n },\n count: 0,\n }\n const plugin2 = {\n id: '',\n install() {\n plugin2.count++\n },\n count: 0,\n }\n\n interact.use(plugin1)\n interact.use(plugin2)\n\n // new plugin install methods are called\n expect([plugin1.count, plugin2.count]).toEqual([1, 1])\n\n interact.use({ ...plugin1 })\n // different plugin object with same id not installed\n expect([plugin1.count, plugin2.count]).toEqual([1, 1])\n\n interact.use(plugin2)\n // plugin without id not re-installed\n expect([plugin1.count, plugin2.count]).toEqual([1, 1])\n})\n"
},
{
"path": "packages/@interactjs/interact/package.json",
"content": "{\n \"name\": \"@interactjs/interact\",\n \"version\": \"1.10.27\",\n \"main\": \"index\",\n \"module\": \"index\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/taye/interact.js.git\",\n \"directory\": \"packages/@interactjs/interact\"\n },\n \"dependencies\": {\n \"@interactjs/core\": \"1.10.27\",\n \"@interactjs/utils\": \"1.10.27\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"sideEffects\": false,\n \"license\": \"MIT\"\n}\n"
},
{
"path": "packages/@interactjs/interactjs/index.stub.ts",
"content": "/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport '@interactjs/actions/plugin'\nimport '@interactjs/auto-scroll/plugin'\nimport '@interactjs/auto-start/plugin'\nimport '@interactjs/core/interactablePreventDefault'\nimport '@interactjs/dev-tools/plugin'\nimport '@interactjs/inertia/plugin'\nimport '@interactjs/interact'\nimport '@interactjs/modifiers/plugin'\nimport '@interactjs/offset/plugin'\nimport '@interactjs/pointer-events/plugin'\nimport '@interactjs/reflow/plugin'\n\nimport actions from '@interactjs/actions/plugin'\nimport autoScroll from '@interactjs/auto-scroll/plugin'\nimport autoStart from '@interactjs/auto-start/plugin'\nimport interactablePreventDefault from '@interactjs/core/interactablePreventDefault'\nimport devTools from '@interactjs/dev-tools/plugin'\nimport inertia from '@interactjs/inertia/plugin'\nimport interact from '@interactjs/interact'\nimport modifiers from '@interactjs/modifiers/plugin'\nimport offset from '@interactjs/offset/plugin'\nimport pointerEvents from '@interactjs/pointer-events/plugin'\nimport reflow from '@interactjs/reflow/plugin'\n/* eslint-enable import/no-duplicates */\n\ninteract.use(interactablePreventDefault)\n\ninteract.use(offset)\n\n// pointerEvents\ninteract.use(pointerEvents)\n\n// inertia\ninteract.use(inertia)\n\n// snap, resize, etc.\ninteract.use(modifiers)\n\n// autoStart, hold\ninteract.use(autoStart)\n\n// drag and drop, resize, gesture\ninteract.use(actions)\n\n// autoScroll\ninteract.use(autoScroll)\n\n// reflow\ninteract.use(reflow)\n\n// eslint-disable-next-line no-undef\nif (process.env.NODE_ENV !== 'production') {\n interact.use(devTools)\n}\n\nexport default interact\n;(interact as any).default = interact\n"
},
{
"path": "packages/@interactjs/interactjs/index.ts",
"content": "/* eslint-disable import/no-duplicates -- for typescript module augmentations */\nimport '@interactjs/actions/plugin'\nimport '@interactjs/auto-scroll/plugin'\nimport '@interactjs/auto-start/plugin'\nimport '@interactjs/core/interactablePreventDefault'\nimport '@interactjs/dev-tools/plugin'\nimport '@interactjs/inertia/plugin'\nimport '@interactjs/interact'\nimport '@interactjs/modifiers/plugin'\nimport '@interactjs/offset/plugin'\nimport '@interactjs/pointer-events/plugin'\nimport '@interactjs/reflow/plugin'\n\nimport actions from '@interactjs/actions/plugin'\nimport autoScroll from '@interactjs/auto-scroll/plugin'\nimport autoStart from '@interactjs/auto-start/plugin'\nimport interactablePreventDefault from '@interactjs/core/interactablePreventDefault'\nimport devTools from '@interactjs/dev-tools/plugin'\nimport inertia from '@interactjs/inertia/plugin'\nimport interact from '@interactjs/interact'\nimport modifiers from '@interactjs/modifiers/plugin'\nimport offset from '@interactjs/offset/plugin'\nimport pointerEvents from '@interactjs/pointer-events/plugin'\nimport reflow from '@interactjs/reflow/plugin'\n/* eslint-enable import/no-duplicates */\n\ninteract.use(interactablePreventDefault)\n\ninteract.use(offset)\n\n// pointerEvents\ninteract.use(pointerEvents)\n\n// inertia\ninteract.use(inertia)\n\n// snap, resize, etc.\ninteract.use(modifiers)\n\n// autoStart, hold\ninteract.use(autoStart)\n\n// drag and drop, resize, gesture\ninteract.use(actions)\n\n// autoScroll\ninteract.use(autoScroll)\n\n// reflow\ninteract.use(reflow)\n\n// eslint-disable-next-line no-undef\nif (process.env.NODE_ENV !== 'production') {\n interact.use(devTools)\n}\n\nexport default interact\n;(interact as any).default = interact\n"
},
{
"path": "packages/@interactjs/interactjs/package.json",
"content": "{\n \"name\": \"@interactjs/interactjs\",\n \"version\": \"1.10.27\",\n \"main\": \"index\",\n \"module\": \"index\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/taye/interact.js.git\"\n },\n \"dependencies\": {\n \"@interactjs/actions\": \"1.10.27\",\n \"@interactjs/arrange\": \"1.10.27\",\n \"@interactjs/auto-scroll\": \"1.10.27\",\n \"@interactjs/auto-start\": \"1.10.27\",\n \"@interactjs/clone\": \"1.10.27\",\n \"@interactjs/core\": \"1.10.27\",\n \"@interactjs/dev-tools\": \"1.10.27\",\n \"@interactjs/feedback\": \"1.10.27\",\n \"@interactjs/inertia\": \"1.10.27\",\n \"@interactjs/interact\": \"1.10.27\",\n \"@interactjs/modifiers\": \"1.10.27\",\n \"@interactjs/multi-target\": \"1.10.27\",\n \"@interactjs/offset\": \"1.10.27\",\n \"@interactjs/pointer-events\": \"1.10.27\",\n \"@interactjs/react\": \"1.10.27\",\n \"@interactjs/rebound\": \"1.10.27\",\n \"@interactjs/symbol-tree\": \"1.10.27\",\n \"@interactjs/reflow\": \"1.10.27\",\n \"@interactjs/utils\": \"1.10.27\",\n \"@interactjs/vue\": \"1.10.27\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"sideEffects\": false,\n \"license\": \"MIT\"\n}\n"
},
{
"path": "packages/@interactjs/modifiers/Modification.ts",
"content": "import type { EventPhase } from '@interactjs/core/InteractEvent'\nimport type { Interaction, DoAnyPhaseArg } from '@interactjs/core/Interaction'\nimport type { EdgeOptions, FullRect, Point, Rect } from '@interactjs/core/types'\nimport clone from '@interactjs/utils/clone'\nimport extend from '@interactjs/utils/extend'\nimport * as rectUtils from '@interactjs/utils/rect'\n\nimport type { Modifier, ModifierArg, ModifierState } from './types'\n\nexport interface ModificationResult {\n delta: Point\n rectDelta: Rect\n coords: Point\n rect: FullRect\n eventProps: any[]\n changed: boolean\n}\n\ninterface MethodArg {\n phase: EventPhase\n pageCoords: Point\n rect: FullRect\n coords: Point\n preEnd?: boolean\n skipModifiers?: number\n}\n\nexport class Modification {\n states: ModifierState[] = []\n startOffset: Rect = { left: 0, right: 0, top: 0, bottom: 0 }\n startDelta!: Point\n result!: ModificationResult\n endResult!: Point\n startEdges!: EdgeOptions\n edges: EdgeOptions\n readonly interaction: Readonly\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/modifiers/all.ts",
"content": "/* eslint-disable n/no-extraneous-import, import/no-unresolved */\nimport aspectRatio from './aspectRatio'\nimport avoid from './avoid/avoid'\nimport restrictEdges from './restrict/edges'\nimport restrict from './restrict/pointer'\nimport restrictRect from './restrict/rect'\nimport restrictSize from './restrict/size'\nimport rubberband from './rubberband/rubberband'\nimport snapEdges from './snap/edges'\nimport snap from './snap/pointer'\nimport snapSize from './snap/size'\nimport spring from './spring/spring'\nimport transform from './transform/transform'\n\nexport default {\n aspectRatio,\n restrictEdges,\n restrict,\n restrictRect,\n restrictSize,\n snapEdges,\n snap,\n snapSize,\n\n spring,\n avoid,\n transform,\n rubberband,\n}\n"
},
{
"path": "packages/@interactjs/modifiers/aspectRatio.spec.ts",
"content": "import resize from '@interactjs/actions/resize/plugin'\nimport * as helpers from '@interactjs/core/tests/_helpers'\nimport type { FullRect, EdgeOptions } from '@interactjs/core/types'\n\nimport type { AspectRatioOptions } from './aspectRatio'\nimport aspectRatio from './aspectRatio'\nimport modifiersBase from './base'\nimport restrictSize from './restrict/size'\n\nconst { ltrbwh } = helpers\n\ntest('modifiers/aspectRatio', () => {\n const rect = Object.freeze({ left: 0, top: 0, right: 10, bottom: 20, width: 10, height: 20 })\n const { interactable, interaction, event, coords, target } = helpers.testEnv({\n plugins: [modifiersBase, resize],\n rect,\n })\n\n coords.client = coords.page\n\n const options: AspectRatioOptions = {}\n let lastRect: FullRect = null\n\n interactable.resizable({\n edges: { left: true, top: true, right: true, bottom: true },\n modifiers: [aspectRatio(options)],\n listeners: {\n move(e) {\n lastRect = e.rect\n },\n },\n })\n\n options.equalDelta = true\n downStartMoveUp({ x: 2, y: 4.33, edges: { left: true, top: true } })\n // `equalDelta: true, 1 { left: true, top: true }\n expect(lastRect).toEqual(ltrbwh(2, 2, 10, 20, 8, 18))\n\n downStartMoveUp({ x: 30, y: 2, edges: { bottom: true } })\n // equalDelta: true, 2, edges: { bottom: true }\n expect(lastRect).toEqual(ltrbwh(0, 0, 12, 22, 12, 22))\n\n options.equalDelta = false\n options.ratio = 2\n downStartMoveUp({ x: -5, y: 2, edges: { left: true } })\n // equalDelta: false, ratio: 2, edges: left\n expect(lastRect).toEqual(ltrbwh(-5, 12.5, 10, 20, 15, 7.5))\n\n // combine with restrictSize\n options.modifiers = [\n restrictSize({\n max: { width: 20, height: 20 },\n }),\n ]\n options.equalDelta = false\n options.ratio = 2\n\n downStartMoveUp({ x: 20, y: 0, edges: { right: true } })\n // restrictSize with critical primary edge\n expect(lastRect).toEqual(ltrbwh(0, 0, 20, 10, 20, 10))\n\n downStartMoveUp({ x: 20, y: 20, edges: { bottom: true } })\n // restrictSize with critical secondary edge\n expect(lastRect).toEqual(ltrbwh(0, 0, 20, 10, 20, 10))\n\n options.ratio = 0.5\n downStartMoveUp({ x: 5, y: -5, edges: { left: true, bottom: true } })\n // equalDelta: false, ratio: 2, edges: left & bottom\n expect(lastRect).toEqual(ltrbwh(5, 0, 10, 10, 5, 10))\n\n downStartMoveUp({ x: -5, y: -5, edges: { right: true, top: true } })\n // equalDelta: false, ratio: 2, edges: right & top\n expect(lastRect).toEqual(ltrbwh(0, 10, 5, 20, 5, 10))\n\n function downStartMoveUp({ x, y, edges }: { x: number; y: number; edges: EdgeOptions }) {\n coords.timeStamp = 0\n interaction.stop()\n lastRect = null\n\n Object.assign(coords.page, { x: 0, y: 0 })\n interaction.pointerDown(event, event, target)\n\n interaction.start({ name: 'resize', edges }, interactable, target)\n\n Object.assign(coords.page, { x, y })\n interaction.pointerMove(event, event, target)\n interaction.pointerMove(event, event, target)\n interaction.pointerUp(event, event, target, target)\n }\n})\n"
},
{
"path": "packages/@interactjs/modifiers/aspectRatio.ts",
"content": "/**\n * @module modifiers/aspectRatio\n *\n * @description\n * This modifier forces elements to be resized with a specified dx/dy ratio.\n *\n * ```js\n * interact(target).resizable({\n * modifiers: [\n * interact.modifiers.snapSize({\n * targets: [ interact.snappers.grid({ x: 20, y: 20 }) ],\n * }),\n * interact.aspectRatio({ ratio: 'preserve' }),\n * ],\n * });\n * ```\n */\n\nimport type { Point, Rect, EdgeOptions } from '@interactjs/core/types'\nimport extend from '@interactjs/utils/extend'\nimport { addEdges } from '@interactjs/utils/rect'\n\nimport { makeModifier } from './base'\nimport { Modification } from './Modification'\nimport type { Modifier, ModifierModule, ModifierState } from './types'\n\nexport interface AspectRatioOptions {\n ratio?: number | 'preserve'\n equalDelta?: boolean\n modifiers?: Modifier[]\n enabled?: boolean\n}\n\nexport type AspectRatioState = ModifierState<\n AspectRatioOptions,\n {\n startCoords: Point\n startRect: Rect\n linkedEdges: EdgeOptions\n ratio: number\n equalDelta: boolean\n xIsPrimaryAxis: boolean\n edgeSign: {\n x: number\n y: number\n }\n subModification: Modification\n }\n>\n\nconst aspectRatio: ModifierModule\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/pointer-events/base.spec.ts",
"content": "import { Eventable } from '@interactjs/core/Eventable'\nimport type { Scope } from '@interactjs/core/scope'\nimport * as helpers from '@interactjs/core/tests/_helpers'\nimport type { PointerEventType, PointerType } from '@interactjs/core/types'\n\nimport type { EventTargetList } from './base'\nimport pointerEvents from './base'\nimport interactableTargets from './interactableTargets'\n\ntest('pointerEvents.types', () => {\n expect(pointerEvents.types).toEqual({\n down: true,\n move: true,\n up: true,\n cancel: true,\n tap: true,\n doubletap: true,\n hold: true,\n })\n})\n\ntest('pointerEvents.fire', () => {\n const { scope, interaction, event, coords } = helpers.testEnv({ plugins: [pointerEvents] })\n\n const eventable = new Eventable(pointerEvents.defaults)\n const type = 'TEST'\n const element = {}\n const eventTarget = {}\n const TEST_PROP = ['TEST_PROP']\n let firedEvent: any\n const targets: EventTargetList = [\n {\n eventable,\n node: element as Node,\n props: {\n TEST_PROP,\n },\n },\n ]\n\n eventable.on(type, (e) => {\n firedEvent = e\n })\n\n pointerEvents.fire(\n {\n type,\n eventTarget,\n pointer: {},\n event: {},\n interaction: {},\n targets,\n } as any,\n scope,\n )\n\n // Fired event is an instance of pointerEvents.PointerEvent\n expect(firedEvent instanceof pointerEvents.PointerEvent).toBe(true)\n // Fired event type is correct\n expect(firedEvent.type).toBe(type)\n // Fired event currentTarget is correct\n expect(firedEvent.currentTarget).toBe(element)\n // Fired event target is correct\n expect(firedEvent.target).toBe(eventTarget)\n // Fired event has props from target.props\n expect(firedEvent.TEST_PROP).toBe(TEST_PROP)\n\n scope.now = () => coords.timeStamp\n\n coords.timeStamp = 0\n interaction.pointerDown(event, event, scope.document)\n coords.timeStamp = 500\n interaction.pointerUp(event, event, scope.document, scope.document)\n\n // interaction.tapTime is updated\n expect(interaction.tapTime).toBe(500)\n // interaction.prevTap is updated\n expect(interaction.prevTap.type).toBe('tap')\n})\n\ntest('pointerEvents.collectEventTargets', () => {\n const { scope, interaction } = helpers.testEnv()\n\n const type = 'TEST'\n const TEST_PROP = ['TEST_PROP']\n const target = {\n node: {} as Node,\n props: { TEST_PROP },\n eventable: new Eventable(pointerEvents.defaults),\n }\n let collectedTargets: EventTargetList\n\n function onCollect({ targets }: { targets?: EventTargetList }) {\n targets.push(target)\n\n collectedTargets = targets\n }\n\n scope.addListeners({\n 'pointerEvents:collect-targets': onCollect,\n })\n\n pointerEvents.collectEventTargets(\n {\n interaction,\n pointer: {},\n event: {},\n eventTarget: {},\n type,\n } as any,\n scope,\n )\n\n expect(collectedTargets).toEqual([target])\n})\n\ntest('pointerEvents Interaction update-pointer signal', () => {\n const scope: Scope = helpers.mockScope()\n\n scope.usePlugin(pointerEvents)\n\n const interaction = scope.interactions.new({})\n const initialHold = { duration: Infinity, timeout: null as number }\n const event = {} as PointerEventType\n\n interaction.updatePointer(helpers.newPointer(0), event, null, false)\n // set hold info for move on new pointer\n expect(interaction.pointers.map((p) => p.hold)).toEqual([initialHold])\n\n interaction.removePointer(helpers.newPointer(0), event)\n\n interaction.updatePointer(helpers.newPointer(0), event, null, true)\n expect(interaction.pointers.map((p) => p.hold)).toEqual([initialHold])\n\n interaction.updatePointer(helpers.newPointer(5), event, null, true)\n expect(interaction.pointers.map((p) => p.hold)).toEqual([initialHold, initialHold])\n})\n\ntest('pointerEvents Interaction remove-pointer signal', () => {\n const scope: Scope = helpers.mockScope()\n\n scope.usePlugin(pointerEvents)\n\n const interaction = scope.interactions.new({})\n\n const ids = [0, 1, 2, 3]\n const removals = [\n { id: 0, remain: [1, 2, 3], message: 'first of 4' },\n { id: 2, remain: [1, 3], message: 'middle of 3' },\n { id: 3, remain: [1], message: 'last of 2' },\n { id: 1, remain: [], message: 'final' },\n ]\n\n for (const id of ids) {\n const index = interaction.updatePointer(\n { pointerId: id } as PointerType,\n {} as PointerEventType,\n null,\n true,\n )\n // use the ids as the pointerInfo.hold value for this test\n interaction.pointers[index].hold = id as any\n }\n\n for (const removal of removals) {\n interaction.removePointer({ pointerId: removal.id } as any, null)\n\n // `${removal.message} - remaining interaction.pointers[i].hold are correct`\n expect(interaction.pointers.map((p) => p.hold as unknown as number)).toEqual(removal.remain)\n }\n})\n\ntest('pointerEvents down hold up tap', async () => {\n const { interaction, event, interactable } = helpers.testEnv({\n plugins: [pointerEvents, interactableTargets],\n })\n\n const fired: PointerEvent[] = []\n\n for (const type in pointerEvents.types) {\n interactable.on(type, (e) => fired.push(e))\n }\n\n interaction.pointerDown(event, event, event.target)\n interaction.pointerMove(event, event, event.target)\n\n // duplicate move event is not fired\n expect(fired.map((e) => e.type)).toEqual(['down'])\n\n const holdTimer = interaction.pointers[0].hold\n\n // hold timeout is set\n expect(holdTimer.timeout).toBeTruthy()\n\n await helpers.timeout(holdTimer.duration)\n\n interaction.pointerUp(event, event, event.target, event.target)\n\n // tap event is fired after down, hold and up events\n expect(fired.map((e) => e.type)).toEqual(['down', 'hold', 'up', 'tap'])\n})\n"
},
{
"path": "packages/@interactjs/pointer-events/base.ts",
"content": "import type { Eventable } from '@interactjs/core/Eventable'\nimport type { Interaction } from '@interactjs/core/Interaction'\nimport type { PerActionDefaults } from '@interactjs/core/options'\nimport type { Scope, SignalArgs, Plugin } from '@interactjs/core/scope'\nimport type { Point, PointerType, PointerEventType, Element } from '@interactjs/core/types'\nimport * as domUtils from '@interactjs/utils/domUtils'\nimport extend from '@interactjs/utils/extend'\nimport getOriginXY from '@interactjs/utils/getOriginXY'\n\nimport { PointerEvent } from './PointerEvent'\n\nexport type EventTargetList = Array<{\n node: Node\n eventable: Eventable\n props: { [key: string]: any }\n}>\n\nexport interface PointerEventOptions extends PerActionDefaults {\n enabled?: undefined // not used\n holdDuration?: number\n ignoreFrom?: any\n allowFrom?: any\n origin?: Point | string | Element\n}\n\ndeclare module '@interactjs/core/scope' {\n interface Scope {\n pointerEvents: typeof pointerEvents\n }\n}\n\ndeclare module '@interactjs/core/Interaction' {\n interface Interaction {\n prevTap?: PointerEvent\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/reflow/package.json",
"content": "{\n \"name\": \"@interactjs/reflow\",\n \"version\": \"1.10.27\",\n \"main\": \"index\",\n \"module\": \"index\",\n \"type\": \"module\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/taye/interact.js.git\",\n \"directory\": \"packages/@interactjs/reflow\"\n },\n \"peerDependencies\": {\n \"@interactjs/core\": \"1.10.27\",\n \"@interactjs/utils\": \"1.10.27\"\n },\n \"optionalDependencies\": {\n \"@interactjs/interact\": \"1.10.27\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"sideEffects\": [\n \"**/index.js\",\n \"**/index.prod.js\"\n ],\n \"license\": \"MIT\"\n}\n"
},
{
"path": "packages/@interactjs/reflow/plugin.ts",
"content": "import type { Interactable } from '@interactjs/core/Interactable'\nimport type { DoAnyPhaseArg, Interaction } from '@interactjs/core/Interaction'\nimport type { Scope, Plugin } from '@interactjs/core/scope'\nimport type { ActionName, ActionProps, Element } from '@interactjs/core/types'\nimport * as arr from '@interactjs/utils/arr'\nimport { copyAction } from '@interactjs/utils/misc'\nimport * as pointerUtils from '@interactjs/utils/pointerUtils'\nimport { tlbrToXywh } from '@interactjs/utils/rect'\n\ndeclare module '@interactjs/core/scope' {\n interface SignalArgs {\n 'interactions:before-action-reflow': Omit\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/types/index.ts",
"content": "/* eslint-disable import/no-extraneous-dependencies */\nimport type { InteractEvent as _InteractEvent, EventPhase } from '@interactjs/core/InteractEvent'\nimport type * as interaction from '@interactjs/core/Interaction'\nimport type { ActionName, ActionProps as _ActionProps } from '@interactjs/core/types'\n// import module augmentations\nimport '@interactjs/interactjs'\n\nexport * from '@interactjs/core/types'\nexport type { Plugin } from '@interactjs/core/scope'\nexport type { EventPhase } from '@interactjs/core/InteractEvent'\nexport type { Options } from '@interactjs/core/options'\nexport type { PointerEvent } from '@interactjs/pointer-events/PointerEvent'\nexport type { Interactable } from '@interactjs/core/Interactable'\nexport type { DragEvent } from '@interactjs/actions/drag/plugin'\nexport type { DropEvent } from '@interactjs/actions/drop/DropEvent'\nexport type { GestureEvent } from '@interactjs/actions/gesture/plugin'\nexport type { ResizeEvent } from '@interactjs/actions/resize/plugin'\nexport type { SnapFunction, SnapTarget } from '@interactjs/modifiers/snap/pointer'\n\nexport type ActionProps\nThis package is an internal part of
\n"
},
{
"path": "packages/@interactjs/utils/arr.ts",
"content": "type Filter