Skip to content

Releases: ThibaultJanBeyer/DragSelect

Version 2.0.2

07 Jan 09:13
8c77a32
Compare
Choose a tag to compare
  • Fix element position when useTransform: false issue

Version 2.0.1

06 Jan 15:06
Compare
Choose a tag to compare
  • Fix import issue caused by ignoring dist files

Version 2.0.0

05 Jan 14:27
Compare
Choose a tag to compare

2.0.0

Added Draggability! (solves #24) (Breaking Change)

  • You can now also drag and drop selectable elements
  • Set immediateDrag to false if you want drag-ability only after a selection was made
  • You can turn off that functionality by setting draggability to false
  • You can drag elements also solely using your keyboard. Which makes it accessible. You can set the keys that can be used for dragging via dragKeys.

Improved Selector (Potential Breaking Change)

The selector element is now not rendered inside of the area instead we generate a div overlaying the actual area and render the element inside that div. Which has a lot of benefits:

  • selector is not inside of the area itself (solves #63)
  • selector is now in a fresh selection area overlay (solves #26)
  • the overlay adapts size to always match the real area
  • most css modifications will work as the area is not affected
  • the overlay has no pointer-events and acts as a clip box
  • selection can be drawn outside of the area which makes auto-scrolling and selection easier
  • you can still target that area overlay if you want use the class ds-selector-area
  • Area can now be scrolled in each direction simultaneously
  • You can now set the tolerance for the scroll via overflowTolerance property

Improved inside area checker (Potential Breaking Change)

There were various bugs before 2.0 which would bypass the area restrictions and user would still be able to select elements outside of the area.
We now check whether the elements are inside of the area to know whether they are selectable or not.

  • Fixes bug where elements outside of area could still be selected with keyboard
  • Fixes bug where elements outside of area could still be selected with negative scroll

Improved callbacks (Breaking Change)

Changed the callbacks to follow a pub/sub pattern. They're not events you can subscribe to and they will pass back an object always following the same pattern holding extra information. Currently DragSelect still supports setting callbacks in the constructor method to make it easier for you to transition. However, in future, only subscribers will work.

  • Adds 3 public methods: subscribe (listen to an event), unsubscribe (remove listener) and publish (publish an event yourself!)
  • Allows adding/removing events whenever and wherever you want
  • Makes it more flexible to add new events
  • Follows the pub/sub pattern from dom events (i.e. addEventListener is subscribe)

Here is an example on what you'll have to change:

Before

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),
})

Now

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))
// 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))

Removed private and public methods (Breaking Change)

Based on the changes, some methods did not make sense anymore. So we cleaned them up. Generally we want to move away from providing utility methods (like i.e. cursor position retrieval) instead we want to focus on the tool itself only. In case you still want any of the public method or a new one, feel free to open an issue.

Public methods that were removed:

  • .break was removed
  • .getCursorPos
  • .getScroll
  • .getAreaRect
  • .toArray
  • .isCursorNearEdge
  • .toggle (use .toggleSelection instead)
  • .select (use .setSelection or .addSelection instead)
  • .getCursorPositionDifference (is deprecated, calculate yourself instead. i.e. .getCurrentCursorPosition().x - .getInitialCursorPosition().x)

Fixing Multi-Select-Keys issue & adding more available keys (Breaking Change)

  • Fixes the issue with multi-selection via Keyboard not working on Firefox.
  • You can now use any key to trigger multi-selection mode that is available under event.key on Keyboard Events (see MDN docs)

However, that means that the key names have changes. Following keys should be replaced:

  • Instead of "ctrlKey" use "Control" now
  • Instead of "shiftKey" use "Shift" now
  • Instead of "metaKey" use "Meta" now

Dropped IE Support

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

Impressive performance improvements

This version is an (almost) complete rewrite of DragSelect. Of course the main reason is to improve the ease to add new features and maintain existing ones but that also gave the opportunity to add some performance improvements.

The setup used to measure this is the performance test which runs DragSelect over 25.000 selectable Nodes.
We compared the accumulated average execution times before and after the changes. Before the changes that was an average of 3s/run. Now we lows of 1.5s.

  • 4.09% faster by caching calculations
  • 11.36% faster by using an interaction pub/sub mechanism
  • 15.86% faster by caching element positions (each update) & using more performant css class manipulations
  • 28.36% faster by caching by bundling reflows and repaints

= 59,67% performance increase

dragselect

Version 1.15.1

09 Nov 13:45
Compare
Choose a tag to compare
  • This is a preparation to some code-refactoring and bigger changes aimed for v2
  • 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.

Version 1.15.0

07 Nov 15:57
Compare
Choose a tag to compare

This update is a preparation for a larger update to simplify the code and ease of development. It changes the way the exports are created in dist & docs.

  • Use rollup to build the package: this simplifies the portability of the module and will allow to split the code going forward.
  • Added tests for various import types (default, amd & esm)

Version 1.14.0

04 Nov 16:43
Compare
Choose a tag to compare
  • Enhanced auto-scrolling. See PR 59. Big thanks to @slinhart for this addition <3

Version 1.13.4

04 Nov 14:39
Compare
Choose a tag to compare
  • Update & upgrade dev-deps
  • Use puppeteer-jest for faster & cleaner tests
  • Fix typing issues (unused properties should be used last)
  • Deprecating isCursorNearEdge(event, area) in favor of isCursorNearEdge(area, event) (both will work for now. Just a warning will be logged)

Version 1.13.2

15 Mar 13:02
Compare
Choose a tag to compare
  • Update dev deps
  • Extract some build functionality from package.json to /bin
  • Fix typos in functional tests
  • Update raw DragSelect to meet new standards from prettier

Version 1.13.1

30 Jul 12:52
Compare
Choose a tag to compare
  • Quick-Fix for zoom issue. See PR #42

Version 1.13.0

25 Jul 10:13
Compare
Choose a tag to compare
  • Add zoom value for use-cases with CSS scale transformations. Implemented in PR #40. Thanks to @staradayev for your contribution!