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

dragselect

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

dragselect - npm Package Compare versions

Comparing version 2.7.4 to 3.0.0

LICENSE

rollup.config.mjs

src/DragSelect.ts

src/methods/addModificationObservers.ts

src/methods/canScroll.ts

src/methods/createSelectorAreaElement.ts

src/methods/createSelectorElement.ts

src/methods/debounce.ts

src/methods/ensureArray.ts

src/methods/getAllParentNodes.ts

src/methods/getAreaRect.ts

src/methods/getCurrentScroll.ts

src/methods/getDocumentScroll.ts

src/methods/getOverflowEdges.ts

src/methods/getPointerPos.ts

src/methods/getSelectionRect.ts

src/methods/getSelectorPosition.ts

src/methods/getStylePosition.spec.ts

src/methods/getStylePosition.ts

src/methods/handleElementPositionAttribute.ts

src/methods/handleKeyboardDragPosDifference.ts

src/methods/handleSelection.ts

src/methods/handleUnSelection.ts

src/methods/hydrateSettings.ts

src/methods/isCollision.ts

src/methods/limitDirection.ts

src/methods/moveElement.ts

src/methods/scrollElement.ts

src/methods/setStylePosition.ts

src/methods/subscriberAliases.ts

src/methods/updateElementStylePos.ts

src/methods/vect2.ts

src/modules/Area.ts

src/modules/Drag.ts

src/modules/DropZone.ts

src/modules/DropZones.ts

src/modules/Interaction.ts

src/modules/PubSub.ts

src/modules/SelectableSet.ts

src/modules/SelectedSet.ts

src/modules/Selection.ts

src/modules/Selector.ts

src/modules/SelectorArea.ts

src/stores/KeyStore.ts

src/stores/PointerStore.ts

src/stores/ScrollStore.ts

src/stores/SettingsStore.ts

src/types.ts

tsconfig.json

120

CHANGELOG.md

		@@ -1,3 +0,62 @@
		# 2.7.3
		# 3.0.0

		## Breaking Updates

		### Moving the project to typescript

		- Enable complex typings
		- Removes typing issues from the past

		### New license model

		- Free to everything for non-commercial, paid for commercial projects
		- Fees will be split with contributors
		- Enables faster development cycles
		- Keeps the lights on
		- Attract talent to collaborate

		### Callbacks Refactor

		```
		"elementselect" => "DS:select",
		"elementunselect" => "DS:unselect",
		"autoscroll" => "DS:scroll",
		"dragstart" => "DS:start",
		"dragmove" => "DS:update",
		"callback" => "DS:end",
		"preelementselect" => "DS:select:pre",
		"preelementunselect" => "DS:unselect:pre",
		"preautoscroll" => "DS:scroll:pre",
		"predragstart" => "DS:start:pre",
		"predragmove" => "DS:update:pre",
		"precallback" => "DS:end:pre",
		```

		- New callbacks:

		```
		"DS:added:pre"
		"DS:added"
		"DS:removed:pre"
		"DS:removed"
		```

		### Box-Dragging as new default

		- This is the default expected behaviour, hence if should be the default

		### Removing self-hosted versions

		- This was just bad practice from ancient times

		## Extras (non-breaking)

		- Previous setting `dragAsBlock` is the default behavior.
		- Add an over-writeable method to filter the elements that are supposed to be dragged `.filterDragElements` [Override](https://www.DragSelect.com/docs/API/Overrides) inspired by [#158](https://github.com/ThibaultJanBeyer/DragSelect/pull/158)
		- Fix persistance of `removeSelectables` as of [148](https://github.com/ThibaultJanBeyer/DragSelect/issues/148) note however, that the items are still in the settings, thus will be re-added when manually running `.start()`
		- Add keyboard drop-zoning solving [149](https://github.com/ThibaultJanBeyer/DragSelect/issues/149)
		- Fix key stroke bug [#181](https://github.com/ThibaultJanBeyer/DragSelect/issues/181)

		# 2.7.4

		- Fix typing issues [#175](https://github.com/ThibaultJanBeyer/DragSelect/issues/175) thanks [@Ruslan207](https://github.com/Ruslan207)
		@@ -12,5 +71,5 @@

		- Introduce blog-drag as alpha. It is supposed to fix dragging of multiple elements: dragging them as one block keeping aspect ratio positions on drag-scroll. Instead of moving elements individually. This was considered a bug. However as it is not fully tested it comes under a flag, please turn it on by setting `dragAsBlock: true` and [report any issue you find here](https://github.com/ThibaultJanBeyer/DragSelect/issues). Thanks to [@rendertom](https://github.com/rendertom) for the addition [#162](https://github.com/ThibaultJanBeyer/DragSelect/pull/162).
		- Introduce blog-drag as alpha. It is supposed to fix dragging of multiple elements: dragging them as one block keeping aspect ratio positions on drag-scroll. Instead of moving elements individually. This was considered a bug. However as it is not fully tested it comes under a flag, please turn it on by setting `dragAsBlock: true` and [report any issue you find here](https://github.com/ThibaultJanBeyer/DragSelect/issues). Thanks to [@rendertom](https://github.com/rendertom) for the addition [#162](https://github.com/ThibaultJanBeyer/DragSelect/pull/162).

		Note: this feature will be turned on by default in a future release once proper testing and all bugs are fixed
		_Note: this feature will be turned on by default in a future release once proper testing and all bugs are fixed_

		@@ -25,3 +84,3 @@ # 2.6.1
		- - See [Example use-case](https://dragselect.com/docs/guided-examples/Custom-Selection-Filter-Override) & [API for overrides](https://dragselect.com/docs/API/Overrides)
		- Expose `filterSelected` in `Selection` module
		- Expose `filterSelected` in `Selection` module
		- Expose `isCollision` helper method
		@@ -74,3 +133,3 @@

		- Change all Properties dynamically anytime. Solves #111 and #95. Very helpful for async libraries like react. You can do so using the `setSettings` method, you can pass any settings in the object and they will be updated. Example: update the drag area at any time by running: `ds.setSettings({ area: document.getElementById("new-area") })`.
		- Change all Properties dynamically _anytime_. Solves #111 and #95. Very helpful for async libraries like react. You can do so using the `setSettings` method, you can pass any settings in the object and they will be updated. Example: update the drag area at any time by running: `ds.setSettings({ area: document.getElementById("new-area") })`.
		- Remove deprecated keys `ctrlKey`, `shiftKey` and `metaKey`. Use `Control`, `Shift` and `Meta` respectively instead.
		@@ -90,3 +149,3 @@ - Remove deprecated method `getCursorPositionDifference`. Calculate the difference on your own instead.
		- - This upgrade changes the order in which the callbacks are fired. The normal callbacks are fired in a FIFO order, first in, first out. The `pre` callbacks are fired in a LIFO order, last in first out.
		- - Pre Events are now really triggered before the whole action.
		- - Pre Events are now really triggered _before_ the whole action.
		- Fixes issue [#110](https://github.com/ThibaultJanBeyer/DragSelect/issues/110) where teardown did not work properly
		@@ -117,3 +176,3 @@
		- Fixes build error bug introduced by typings. Solves [#100](https://github.com/ThibaultJanBeyer/DragSelect/issues/100)
		Issue: the JS-Docs files types.js was not included in d.ts files. Now rollup builds are force-including it.
		Issue: the JS-Docs files types.js was not included in d.ts files. Now rollup builds are force-including it.

		@@ -181,10 +240,11 @@ # 2.1.0-1
		### Before

		```javascript
		const ds = new DragSelect({
		callback: (items, event) => console.log("my callback", items, event),
		onDragMove: (event) => console.log("my callback", event),
		onDragStartBegin: (event) => console.log("my callback", event),
		onDragStart: (event) => console.log("my callback", event),
		onElementSelect: (item) => console.log("my callback", item),
		onElementUnselect: (item) => console.log("my callback", item),
		callback: (items, event) => console.log('my callback', items, event),
		onDragMove: (event) => console.log('my callback', event),
		onDragStartBegin: (event) => console.log('my callback', event),
		onDragStart: (event) => console.log('my callback', event),
		onElementSelect: (item) => console.log('my callback', item),
		onElementUnselect: (item) => console.log('my callback', item),
		})
		@@ -194,10 +254,21 @@ ```
		### Now

		```javascript
		const ds = new DragSelect({})
		ds.subscribe('callback', ({ items, item, event }) => console.log("my callback", items, event))
		ds.subscribe('dragmove', ({ items, item, event }) => console.log("my callback", event))
		ds.subscribe('callback', ({ items, item, event }) =>
		console.log('my callback', items, event)
		)
		ds.subscribe('dragmove', ({ items, item, event }) =>
		console.log('my callback', event)
		)
		// dragstartbegin was removed use dragstart instead
		ds.subscribe('dragstart', ({ items, item, event }) => console.log("my callback", event))
		ds.subscribe('elementselect', ({ items, item, event }) => console.log("my callback", item))
		ds.subscribe('elementunselect', ({ items, item, event }) => console.log("my callback", item))
		ds.subscribe('dragstart', ({ items, item, event }) =>
		console.log('my callback', event)
		)
		ds.subscribe('elementselect', ({ items, item, event }) =>
		console.log('my callback', item)
		)
		ds.subscribe('elementunselect', ({ items, item, event }) =>
		console.log('my callback', item)
		)
		```
		@@ -235,3 +306,3 @@
		- Internet explorer is no longer supported. Following other big libraries. Dropping IE Support drastically reduces bundle size and improves maintainability of the project. Also following Microsoft itself, which [stopped support for IE all together](https://www.independent.co.uk/life-style/gadgets-and-tech/news/microsoft-internet-explorer-out-use-11-edge-a9676176.html). If you need IE support, please use a build tool that gives you IE Support with necessary polyfills for now and write support request stating your use-case. You can also consider using any versions prior 2.
		We do support Edge and all other major browsers.
		We do support Edge and all other major browsers.

		@@ -249,3 +320,5 @@ ## Impressive performance improvements
		- 28.36% faster by caching by bundling reflows and repaints

		---

		= 59,67% performance increase
		@@ -257,3 +330,3 @@
		- Preparation to deprecate `getScroll` and `getAreaRect`. They will both become internal methods. Unless you've valid reasons to keep exposing them.
		- We will soon also prevent you from using most internal methods (those marked with `_` at the start). You'll not be able to extend them, nor override, nor use directly. Also here, unless you've valid reasons to keep them exposed.
		- We will soon also prevent you from using most internal methods (those marked with `_` at the start). You'll not be able to extend them, nor override, nor use directly. Also here, unless you've valid reasons to keep them exposed.

		@@ -319,2 +392,3 @@ # 1.15.0
		- Add em6 moduled files that have native `module export DragSelect` that can be used in for example:

		```html
		@@ -330,5 +404,5 @@ <script type="module">
		- Moved the files from the `dist` folder to the `docs` folder to adhere to github pages standart
		- Improve code stability by enforcing typechecks via JS-Docs, inspired by [truckjs](https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76)
		- Improve code stability by enforcing typechecks via JS-Docs, inspired by [truckjs](https://medium.com/@trukrs/type-safe-javascript-with-jsdoc-7a2a63209b76)
		- Partial rewrite using native ES6 classes transpiling down to ES5 using babel.
		Note: first I refactored the code to TypeScript but then rolled back because it might limit the ability of external people to contribute due to the new language
		_Note: first I refactored the code to TypeScript but then rolled back because it might limit the ability of external people to contribute due to the new language_
		- Improve documentation by autogenerating it with JS-Docs
		@@ -340,3 +414,3 @@
		- Preparations for modern code. I.e. ES6:
		Usind Babel to transpile downwards to ES5. This should not result in any changes on your side.
		Usind Babel to transpile downwards to ES5. This should not result in any changes on your side.

		@@ -343,0 +417,0 @@ # 1.9.1

jest-puppeteer.config.js

		@@ -1,6 +0,16 @@
		module.exports = {
		let jest_puppeteer_conf = {
		launch: {
		headless: true,
		args: ['--no-sandbox', '--disable-setuid-sandbox']
		args: ['--no-sandbox', '--disable-setuid-sandbox'],
		timeout: 30000,
		headless: 'new',
		dumpio: true, // Whether to pipe the browser process stdout and stderr
		},
		}

		if (process.env.DEBUG) {
		jest_puppeteer_conf.launch.headless = false // for debug: to see what the browser is displaying
		// jest_puppeteer_conf.launch.slowMo = 250; // slow down by 250ms for each step
		jest_puppeteer_conf.launch.devtools = true // This lets you debug code in the application code browser
		}

		module.exports = jest_puppeteer_conf

jest.config.js

		@@ -5,2 +5,7 @@ module.exports = {
		modulePathIgnorePatterns: ['<rootDir>/__tests__/helpers'],
		transform: {
		'^.+\\.[tj]s$': 'ts-jest',
		},
		moduleFileExtensions: ['ts', 'js', 'html'],
		coverageDirectory: './coverage/',
		}

package.json

		{
		"name": "dragselect",
		"version": "2.7.4",
		"version": "3.0.0",
		"description": "Easy JavaScript library for selecting and moving elements. With no dependencies. Drag-Select & Drag-And-Drop.",
		@@ -11,56 +11,50 @@ "main": "./dist/DragSelect.js",
		"start": "yarn open & yarn watch",
		"watch": "concurrently --kill-others \"yarn checkjs:watch\" \"yarn rollup:watch\" \"yarn test:watch\"",
		"watch": "concurrently --kill-others \"yarn rollup:watch\" \"yarn test:watch\"",
		"\n# TESTING:": "",
		"checkjs": "tsc --lib es2019,dom -t es5 --allowJs --skipLibCheck --checkJs --noEmit src/*.js",
		"checkjs:watch": "yarn checkjs -- -w",
		"pretest": "yarn build",
		"jest": "jest --detectOpenHandles",
		"test": "yarn checkjs && yarn jest",
		"test:watch": "yarn jest -- --watch",
		"test": "yarn jest",
		"test:debug": "DEBUG=true yarn jest",
		"test:watch": "yarn jest --watch",
		"\n# BUILDING:": "",
		"prebuild": "yarn install",
		"build": "yarn rollup",
		"prerollup": "yarn types",
		"rollup": "rollup -c",
		"rollup:watch": "yarn rollup -- -w",
		"types": "tsc src/DragSelect.js --lib es2019,dom -t es5 --declaration --allowJs --emitDeclarationOnly --skipLibCheck --outDir dist"
		"rollup:watch": "yarn rollup -w"
		},
		"devDependencies": {
		"@babel/cli": "^7.12.10",
		"@babel/compat-data": "^7.12.7",
		"@babel/core": "^7.12.10",
		"@babel/plugin-proposal-class-properties": "^7.12.1",
		"@babel/plugin-transform-runtime": "^7.12.10",
		"@babel/preset-env": "^7.12.11",
		"@babel/runtime": "^7.12.5",
		"@rollup/plugin-babel": "^5.2.2",
		"@rollup/plugin-node-resolve": "^11.0.1",
		"@typescript-eslint/eslint-plugin-tslint": "^4.12.0",
		"@typescript-eslint/parser": "^5.41.0",
		"babel-jest": "^26.6.3",
		"babel-loader": "^8.2.2",
		"babel-polyfill": "^6.26.0",
		"better-docs": "^2.3.2",
		"concurrently": "^5.3.0",
		"eslint": "^7.17.0",
		"eslint-config-airbnb": "^18.2.1",
		"eslint-config-prettier": "^7.1.0",
		"eslint-config-standard": "^16.0.2",
		"eslint-plugin-import": "^2.22.1",
		"eslint-plugin-jest": "^24.1.3",
		"eslint-plugin-jsx-a11y": "^6.4.1",
		"eslint-plugin-prettier": "^3.3.1",
		"eslint-plugin-react": "^7.22.0",
		"eslint-plugin-react-hooks": "^4.2.0",
		"eslint-plugin-security": "^1.4.0",
		"@jest/globals": "^29.7.0",
		"@rollup/plugin-node-resolve": "^15.2.1",
		"@rollup/plugin-typescript": "^11.1.3",
		"@types/expect-puppeteer": "^5.0.3",
		"@types/jest": "^29.5.5",
		"@types/jest-environment-puppeteer": "^5.0.4",
		"@types/puppeteer": "^7.0.4",
		"@typescript-eslint/eslint-plugin-tslint": "^6.7.2",
		"@typescript-eslint/parser": "^6.7.2",
		"better-docs": "^2.7.2",
		"concurrently": "^8.2.1",
		"eslint": "^8.49.0",
		"eslint-config-airbnb": "^19.0.4",
		"eslint-config-prettier": "^9.0.0",
		"eslint-config-standard": "^17.1.0",
		"eslint-plugin-import": "^2.28.1",
		"eslint-plugin-jest": "^27.4.0",
		"eslint-plugin-jsx-a11y": "^6.7.1",
		"eslint-plugin-prettier": "^5.0.0",
		"eslint-plugin-react": "^7.33.2",
		"eslint-plugin-react-hooks": "^4.6.0",
		"eslint-plugin-security": "^1.7.1",
		"eslint-plugin-standard": "^5.0.0",
		"glob": "^7.1.7",
		"jest": "^26.6.3",
		"jest-puppeteer": "^6.1.1",
		"glob": "^10.3.5",
		"jest": "^29.7.0",
		"jest-environment-jsdom": "^29.7.0",
		"jest-puppeteer": "^9.0.0",
		"minami": "^1.2.3",
		"prettier": "^2.2.1",
		"puppeteer": "18.1.0",
		"rollup": "^2.36.1",
		"prettier": "^3.0.3",
		"puppeteer": "21.3.1",
		"rollup": "^3.29.2",
		"rollup-plugin-dts": "^6.0.2",
		"rollup-plugin-terser": "^7.0.2",
		"typescript": "^4.9.3"
		"ts-jest": "^29.1.1",
		"typescript": "^5.2.2"
		},
		@@ -80,7 +74,7 @@ "repository": {
		"author": "Thibault Jan Beyer",
		"license": "MIT",
		"license": "GPLv3",
		"bugs": {
		"url": "https://github.com/ThibaultJanBeyer/DragSelect/issues"
		},
		"homepage": "https://ThibaultJanBeyer.com/"
		"homepage": "https://DragSelect.com/"
		}

README.md

		@@ -18,3 +18,3 @@ <p align="center" style="text-align: center" >
		<a href="https://github.com/ThibaultJanBeyer/DragSelect/actions"><img alt="Build Status" src="https://github.com/ThibaultJanBeyer/DragSelect/actions/workflows/github-actions-build.yml/badge.svg"></a>
		<a href="https://dragselect.com/v2/ds.min.js"><img alt="gzip size" src="https://img.badgesize.io/https://dragselect.com/v2/ds.min.js?compression=gzip"></a>
		<a href="https://unpkg.com/dragselect@latest/dist/ds.min.js"><img alt="gzip size" src="https://img.badgesize.io/https://unpkg.com/dragselect@latest/dist/ds.min.js?compression=gzip"></a>
		<a href="https://www.npmjs.com/package/dragselect"><img alt="npm downloads count" src="https://img.shields.io/npm/dt/dragselect.svg"></a>
		@@ -27,2 +27,3 @@ <a href="https://github.com/ThibaultJanBeyer/DragSelect/blob/master/DragSelect/package.json"><img alt="No Dependency" src="https://img.shields.io/badge/dependencies-none-informational"></a>
		# DragSelect [![GitHub release](https://img.shields.io/github/release/ThibaultJanBeyer/DragSelect.svg)](https://GitHub.com/ThibaultJanBeyer/DragSelect/releases/)

		easily add a selection algorithm to your application/website.
		@@ -29,0 +30,0 @@

bower.json

dist/DragSelect.d.ts

dist/DragSelect.es6m.js

dist/DragSelect.js

dist/ds.es6m.min.js

dist/ds.min.js

dist/methods/addModificationObservers.d.ts

dist/methods/canScroll.d.ts

dist/methods/createSelectorAreaElement.d.ts

dist/methods/createSelectorElement.d.ts

dist/methods/debounce.d.ts

dist/methods/documentScroll.d.ts

dist/methods/getAllParentNodes.d.ts

dist/methods/getAreaRect.d.ts

dist/methods/getBoundingClientRect.d.ts

dist/methods/getCurrentScroll.d.ts

dist/methods/getOverflowEdges.d.ts

dist/methods/getPointerPos.d.ts

dist/methods/getSelectorPosition.d.ts

dist/methods/getStylePosition.d.ts

dist/methods/handleElementOverflow.d.ts

dist/methods/handleElementPositionAttribute.d.ts

dist/methods/handleKeyboardDragPosDifference.d.ts

dist/methods/handleSelection.d.ts

dist/methods/handleUnSelection.d.ts

dist/methods/hydrateSettings.d.ts

dist/methods/index.d.ts

dist/methods/isCollision.d.ts

dist/methods/moveElement.d.ts

dist/methods/removeModificationObservers.d.ts

dist/methods/scrollElement.d.ts

dist/methods/setStylePosition.d.ts

dist/methods/subscriberAliases.d.ts

dist/methods/toArray.d.ts

dist/methods/updateElementStylePos.d.ts

dist/methods/vect2.d.ts

dist/modules/Area.d.ts

dist/modules/Drag.d.ts

dist/modules/DropZone.d.ts

dist/modules/DropZones.d.ts

dist/modules/index.d.ts

dist/modules/Interaction.d.ts

dist/modules/PubSub.d.ts

dist/modules/SelectableSet.d.ts

dist/modules/SelectedSet.d.ts

dist/modules/Selection.d.ts

dist/modules/Selector.d.ts

dist/modules/SelectorArea.d.ts

dist/stores/index.d.ts

dist/stores/KeyStore.d.ts

dist/stores/PointerStore.d.ts

dist/stores/ScrollStore.d.ts

dist/stores/SettingsStore.d.ts

dist/types.d.ts

jsconfig.json

rollup.config.js

src/DragSelect.js

src/methods/addModificationObservers.js

src/methods/canScroll.js

src/methods/createSelectorAreaElement.js

src/methods/createSelectorElement.js

src/methods/debounce.js

src/methods/documentScroll.js

src/methods/getAllParentNodes.js

src/methods/getAreaRect.js

src/methods/getBoundingClientRect.js

src/methods/getCurrentScroll.js

src/methods/getOverflowEdges.js

src/methods/getPointerPos.js

src/methods/getSelectorPosition.js

src/methods/getStylePosition.js

src/methods/getStylePosition.spec.js

src/methods/handleElementOverflow.js

src/methods/handleElementPositionAttribute.js

src/methods/handleKeyboardDragPosDifference.js

src/methods/handleSelection.js

src/methods/handleUnSelection.js

src/methods/hydrateSettings.js

src/methods/index.js

src/methods/isCollision.js

src/methods/moveElement.js

src/methods/removeModificationObservers.js

src/methods/scrollElement.js

src/methods/setStylePosition.js

src/methods/subscriberAliases.js

src/methods/toArray.js

src/methods/updateElementStylePos.js

src/methods/vect2.js

src/modules/Area.js

src/modules/Drag.js

src/modules/DropZone.js

src/modules/DropZones.js

src/modules/index.js

src/modules/Interaction.js

src/modules/PubSub.js

src/modules/SelectableSet.js

src/modules/SelectedSet.js

src/modules/Selection.js

src/modules/Selector.js

src/modules/SelectorArea.js

src/stores/index.js

src/stores/KeyStore.js

src/stores/PointerStore.js

src/stores/ScrollStore.js

src/stores/SettingsStore.js

src/types.js

dragselect - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics