simonwep/selection

✨ Viselect - A high performance and lightweight library to add a visual way of selecting elements, just like on your Desktop. Zero dependencies, super small. Support for major frameworks!

Visual dom-selection library

Features 🤘

• 🌟 Modern bundle
• 🔩 Ultra tiny (~4kb)
• 👌 Simple usage
• ⚡ Highly optimized
• ✔ Zero dependencies
• 📱 Mobile / touch support
• 🖱 Vertical and horizontal scroll support
• 💪 Hardened (over 3 years old and used in many apps)
• 🖼 Support for major frameworks (WIP)

Getting started

Check out the documentation for the package you want to use:

• @viselect/vanilla - To be used with plain JavaScript or TypeScript.
• @viselect/preact - Preact wrapper.
• @viselect/react - React wrapper.
• @viselect/vue - Vue3 wrapper.

Check out recipes for commonly asked questions and how to solve them using the standart library! For information about events and more check out the vanilla readme!

Browser support

This library will always have the previous year as its target. For 2021 for example the target will be ES2020. It always provides both a UMD (.js) and .mjs version. If you want to support legacy browsers, please use the feature of your bundler to transpile dependencie. In case of webpack and babel (give vite a try, it's awesome) you'll have to install corresponding plugins such as babel-plugin-proposal-optional-chaining and include the dependency from node_modules which is normally entirely excluded from being processed.

I do this to provide maximum flexibility and give those who target ESNext a chance to make full use of how this library is bundled. Everything else is just a matter of configuration :)

Is this library the right choice for me?

Viselect primarily focuses on being a high-performant engine to select elements with various boundaries, behaviours and modes in your browser. Viselect is to "full-blown libraries" what is popper.js to tippy.js - the core of your feature / of another library.

Development

Use the following commands to work on this locally (we use lerna to manage this):

• npm run dev - Spawns a dev-server for all packages. Every framework-dependend package is bundled with the vanilla version.
• npm run build - Builds all packages in parallel.
• npm run lint:fix - Lints and fixes all errors in all packages.

For the development servers vite is used. It's superb, you should give it a try. To bundle it we use rollup (which is btw also used by vite behind the scenes) to have full control over how the bundle looks like.

Releasing a new version

This project is managed via lerna. To bump the version and publish a new one run the following commands:

• lerna version
• lerna publish from-package

You want to contribute?

That's awesome! Check out the contribution guidelines to get started :)

selection's Issues

Installing with npm doesn't work

This looks like an awesome library. Unfortunately I can't get npm to work - npm install results in a folder (@simonwep/selection-js) with no content, other than LICENSE, package.json and README.md

npm install @simonwep/selection-js --save

Scrolling is not stopping on mouseup outside scrolling area

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Scenario: the user wants to scroll while selecting. The user preseses the mouse button inside the scroll area, moves the mouse outside, and then releases the mouse button. The area never stop scrolling, even after manually scrolling back. This is true for both vertical and horizontal scrolling.

If the current behavior is a bug, please provide the steps to reproduce and create a JSFiddle.

It can be reproduced on demo site (https://simonwep.github.io/selection/)

What is the expected behavior?

The area should stop scrolling after mouse up.

I have created pull request to fix the bug: #47

Your environment:

Selection-version: 1.2.0
Browser-version:  Google Chrome 76.0.3809.100
Operating-system:  Windows 10

Default selection is not getting cleared when selecting otrhers.

I am using with following libraries
"@simonwep/selection-js": "^1.4.3",
"vue": "^2.6.10",
"vuetify": "^2.1.0"

This is my component named as "selectableTime" and I am calling it in vuetify Modal. I have also tried to clear it with provided method on 'beforeStart' and still not clearing.

<template>
    <div class="selectable-time-wrapper">
        <v-list max-height="500" :class="{'add-style': paramProps === 0, 'edit-style': paramProps > 0}">
            <v-list-item v-for="(item, i) in timeSlots" :key="i" :class="{'selectable-time': true, 'selected': i>5 && i<15}">
                <v-list-item-content>
                    <v-list-item-title>{{item}}</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list>
    </div>
</template>

<script>

    import Selection from "@simonwep/selection-js";
    import options from "./options"; // import options for selection.js

     export default {
        name: 'SelectableTime',
         props: ['timeSlots', 'paramProps'],
         data() {
           return {
               selectionInstance: null,
           }
         },
        mounted() {
            this.selectionInstance = Selection.create({

                // Class for the selection-area-element
                class: "selection-area",

                selectedClass: "selected",

                // px, how many pixels the point should move before starting the selection
                startThreshold: 10,

                // Disable the selection functionality for touch devices
                disableTouch: false,

                // Enable single-click selection
                singleClick: false,

                // Query selectors from elements from which the siblings can be selected
                // containers: [".selectable-time-grid"],

                // Query selectors from elements which can be selected
                selectables: [".selectable-time"],

                // Query selectors for elements from where a selection can be start
                startareas: [".selectable-time-wrapper"],

                // Query selectors for elements which will be used as boundaries for the selection
                boundaries: [".selectable-time-wrapper"],
            }).on('start', ({inst, selected, oe}) => {

                // Remove class if the user isn't pressing the control key or ⌘ key
                if (!oe.ctrlKey && !oe.metaKey) {

                    // Unselect all elements
                    for (const el of selected) {
                        el.classList.remove('selected');
                        inst.removeFromSelection(el);
                    }

                    // Clear previous selection
                    inst.clearSelection();
                }

            }).on('move', ({changed: {removed, added}}) => {

                // Add a custom class to the elements that where selected.
                for (const el of added) {
                    el.classList.add('selected');
                }

                // Remove the class from elements that where removed
                // since the last selection
                for (const el of removed) {
                    el.classList.remove('selected');
                }

            }).on('stop', ({inst}) => {
                // Remember selection in case the user wants to add smth in the next one
                inst.keepSelection();
            });
            // this.selectionInstance = Selection.create(options);
        }
    };
</script>

<!-- UNSCOPED -->
<style lang="scss">
</style>

<!-- SCOPED -->
<style lang="scss" scoped>
    .selection-area {
        outline: 1px solid rgba(0, 128, 255, 0.6);
        background: rgba(0, 128, 255, 0.2);
    }
    .selectable-time-grid {
        display: flex;
        flex-wrap: wrap;
        // width: 600px;
        // margin: 0 auto;
        // background: #eee;
    }

    .selectable-time {
        /*width: 100px;*/
        /*height: 35px;*/
        /*padding: 10px;*/
        cursor: pointer;
        background: #ddd;
        text-align: center;
        // margin: 2px;
        /*border: 1px solid white;*/
        // border-radius: 3px;
    }

    .add-style {
        overflow: auto;
    }
    .edit-style {
        overflow: auto;
        display: flex;
    }

    .selected {
        background: rgba(0, 128, 64, 0.3);
        // transition: background 300ms ease;
    }
</style>

Why push all elements and also all childNodes?

https://github.com/Simonwep/selection/blob/b64e73f8b2cfa42d8c193efd6caeda094a747988/src/selection.js#L453-L461

[Feature] selecting transformed elements

Hi there,

Seems to be a nice library.
However, within the demo, I added a transform: rotate(45deg) to the square divs, and it seems that the selection doesn't take that into account, it will only consider the non-transformed divs.
It would be great if it could also select transformed divs !

Question about Math.max variable shortcuts

Hi Simon, just a quick Q. Just out of curiosity, are there any performance gains in using the following constants outside of the _updateArea function? Or is this just a design choice?

const abs = Math.abs,
          max = Math.max,
          min = Math.min;

I'm trying to become a better programmer so it helps me to learn these things :)

Error on initialization

Very cool plugin. Thanks for creating.

I downloaded the plugin from GitHub today.

I'm using Chrome Version 73.0.3683.86 (Official Build) (64-bit).

My operating system is Windows 10.

I'm having a go at getting the plugin running for the first time.

I am getting an exception on drag start.

My bare-bones instantiation code is,

				const selection = Selection.create({
					
					class: 'viewport',
					selectables: ['.cell'],
					startareas: ['html'],
					boundaries: ['html'],
					selectionAreaContainer: 'body',
				});

I have a div with the class 'viewport'. It contains child div elements with the class 'cell'.

I've attached a screenshot of the error message. In case there is a problem with the attachment, the text of the error message is, "selection.min.js:7 Uncaught TypeError: t._targetContainer.getBoundingClientRect is not a function at HTMLDocument._onTapStart (selection.min.js:7)".

Click - exact element on click

I found common bug:
#19

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

If user select by dragging - selections gets element from bbox (just touch).
Click behaviour doesn't work that way. You have to click exact element.

If the current behavior is a bug, please provide the steps to reproduce.

For example - unclosed circle. You have to click the line to set css class. But if you select by dragging rectangle it work's fine.

What is the expected behavior?

Click in Bbox of element triggers onSelect event.

Selecting while scrolling doesn't work well in Firefox

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When selecting items in a scrolling container in Firefox, only the last screen of items is selected. Reproduction

What is the expected behavior?

All items that were previously selected stay selected.

Your environment:

Selection-version: master probably?
Browser-version: Firefox/71.0
Operating-system: Linux

Pre-defined selected items

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

I'm trying to implement a list of selectable items, where some need to be selected by default.

As far as I can tell there's currently no way to do this (please correct me if I'm wrong).

One possibility would be to add support for an option that accepts a selector matching the items that should be selected by default.

If the current behavior is a bug, please provide the steps to reproduce.

1. Create a list of selectable items
2. Set some of these items as selected by default
3. Drag-to-select a region with no items
4. Drag-to-select any other items
5. Drag-to-select a region with no items

Here's an interactive example with 10 items, where first five are selected by default: https://codepen.io/jcsmorais/full/oROEvL

What is the actual behavior?

3. Items that were selected by default are still selected
4. Items that were selected on step 4. are now unselected

What is the expected behavior?

3. Items that were selected by default are now unselected
4. Items that were selected on step 4. are now unelected

Your environment:

Selection-version: 0.2.3
Browser-version:  Chrome Version 76.0.3809.2 (Official Build) canary (64-bit)
Operating-system:  macOS Sierra version 10.12.6

Possibility to chose selection mode

Feature request

Different pre-built selection possibilities

What is the current behavior?

Default behavior :
If selection rectangle intersects with a pixel of one selectable element, selects it
User can provide his own selectionFilter function

What is the expected behavior?

Having a switch between two modes (or more ?) :

• current default behavior
• center based selection
  (if the center of the selectable element is inside the selection rectangle, selects it)

And still the possibility to provide a selectionFilter function

Code example

selectionFilter(evt) {
        const rectangle = evt.selection.areaElement;
        const selectionLeft = rectangle.offsetLeft;
        const selectionTop = rectangle.offsetTop;
        const selectionWidth = rectangle.offsetWidth;
        const selectionHeight = rectangle.offsetHeight;

        const item = evt.element.getBoundingClientRect();
        const itemLeft = item.left;
        const itemTop = item.top;
        const itemWidth = item.width;
        const itemHeight = item.height;

        const itemCenterX = itemLeft + (itemWidth / 2);
        const itemCenterY = itemTop + (itemHeight / 2);

        const containsCenter = (selectionLeft < itemCenterX && itemCenterX < (selectionLeft + selectionWidth))
                                && (selectionTop < itemCenterY && itemCenterY < (selectionTop + selectionHeight));

        return containsCenter;
}

Explanation

Some might want a fast setup and this could avoid some redundant work across users
If needed I can work on a pull request :)

Your environment:

Not relevant (npm, 0.1.0 package)

Improve / refactor demo-code

The demo-code isn't really good understandable or legible for inexperienced user, so I think it should be refactored or simplified. Ideas to simplify the selection-core are also welcome!

Please write suggestions here instead of opening a pull-request with hereto-related changes. Thanks!

When trying to drag an picture object which is draggable, the selection is getting started! How can I stop this?

Thanks for creating this wonderful library, I am new to the field of development, please excuse me in case of irrelevant word usage.

I am trying to select picture objects that are created using Konva.js and then I want to know which objects are selected in the code so that I can group individual objects into one but here I am facing two problems. The first one is that the picture objects are draggable so when I am trying to drag the objects the selection is also getting enabled, in my case the selection should only be enabled when clicked on non draggable area and the second one is that when I am selecting the objects and using var selectedItems = selection.getSelection(); to know the objects that are selected, it always returns the array of html element but I need an array of objects references that are selected (Like the variables of objects, like var box, box1, box2 in my code). So, is it possible to know which objects are selected in code?

Below is the fiddle.
JSFiddle.

Environment:

Selection-version: Using CDN
Browser-version:  Chrome version 75.0.3770.100 (Official Build) (64-bit)
Operating-system:  MacOS Mojave 10.14.3

is vue support?

do this support vuejs

Selection area is invisible after update to 1.4.0

Do you want to request a feature or report a bug?

a bug

What is the current behavior?

After updating Selection to any version, greater then 0.1.4, I do not see the selection area on selection.

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

It is quite difficult to extract the page I'm using Selection on out of the whole project.

But it seems to me that change is behaviour is caused by the that._clippingElement added after 0.1.4

How it worked before (v0.1.0):

How it works now (v0.1.5, same on 0.2.1):

Are there any restrictions on the style of html/body tags?

Your environment:

Selection-version: 0.1.5
Browser-version:  Chrome Version 73.0.3683.103
Operating-system:  macOS Mojave 10.14.4

Could you please provide instructions for importing

Hi Simon, great library - I just can't seem to get it working. Since I can't import from node_modules (there's nothing in your libs folder) I've manually coped your code over to my project, but all attempts to import 'Selection' aren't working for me.

Could you please add further instructions to your docs? This is what I've tried (btw I'm new to this):

// import { Selection } from './selection';
// import Selection from './selection';
// import './selection';
// import * from '/selection';
// import '/selection/index.js/';

But I always get "cannot read property 'create' of undefined" or similar when I run Selection.create(options).

Thanks!

Right click ?

Is there a way to select with the right click ?

If not, there will be a good feature to do that. Working with custom contextmenu, selection with right click will work like a charm.

selections is not correct if the target elements have `zoom` style property

Do you want to request a feature or report a bug?

Yes, there is a bug

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and create a JSFiddle.

DEMO: https://jsfiddle.net/ns8f43wy/1/

What is the expected behavior?

Your environment:

Selection-version: 1.3.0
Browser-version: Google Chrome 78.0.3904.97
Operating-system: macOS 10.15

disable multiple selection by drag and drop

I want to disable multiple selection by drag and drop.
Please tell me the coding method.

Which browsers are supported

Can it work in ie9?

Threshold per axis

Do you want to request a feature or report a bug?

It is a question and maybe a feature request.

What is the current behavior?

The selection starts with a given threshold on both axis.

What is the expected behavior?

Is it possible to set a threshold per axis?

The use case: If we have some inputs as selectable targets, it would be awesome if the selection only starts when it passes a threshold on the y-axis and ignores the x-axis. If we drag on the x-axis we probably want to mark a text. And if we drag on the y-axis, we probably want to select the input boxes.

Your environment:

Selection-version: 1.2.1
Browser-version: Chrome 77.0.3865.90 
Operating-system:  Debian

Multiselection on MacOS

ctrl+mousedown opens context menu on MacOS.

So it would be better to use cmd (⌘ keycodes 91 and 93) for multiselection on MacOS. I can PR if this is approved.

Exclude blocks from selection.

Hello, was wondering if there is a way to exclude block from being selected, like for exemple i have a 100x100 area of square, someone select 6x6 (36 blocks) anywhere in the area and save it, then someone else cannot select this 6x6 anymore. Is there such option already to exclude blocks ?

startThreshold isPoint check looks like an error

https://github.com/Simonwep/selection/blob/40e1c1bde731ca34d6810e41bb416921371ddb6e/src/selection.js#L223

startThreshold.y - without type restriction

[Feature] Support for adding a selection area to another (not only body) place.

Hello! Thanks for the great library :)

Feature request
Support for adding a selection to another (not only body) place.

What is the current behavior?
Add setting selectionAreaContainer: string|HTMLElement

What is the expected behavior?
If the user specifies a selector or node, then the selection area is added to the specified element.

moblie support

need support mobile

CDN in docs not working

link

Couldn't find the requested file /selection.min.js in @simonwep/selection-js.

Prevent the default browser actions when touching an element selectable

The default browser actions, such as following links.

Error's in console after scroll

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Error's in console.

If the current behavior is a bug, please provide the steps to reproduce.

Start selection, then still holding left mouse button, scroll down.

What is the expected behavior?

Clear console.

Cannot start selection on YouTube

Steps

• Navigate to https://youtube.com.
• Open the console.
• Load https://cdn.jsdelivr.net/npm/@simonwep/selection-js/dist/selection.min.js.
• Paste the following:

const style = `
  .selection {
    background-color: rgba(0, 0, 255, 0.1);
    border-radius: 0.1em;
    border: 0.05em solid rgba(0, 0, 255, 0.2);
  }
`

const documentStyle = document.createElement('style')
documentStyle.textContent = style
document.documentElement.append(documentStyle)

const selection = Selection.create({
  class: 'selection',
  selectables: ['a']
}).on('start', () => {
  console.log('Selection started')
})

• Click and drag Left Mouse to make a multi-selection.

Outcome

Nothing happens.

Expected

Selection started.

Two finger scrolling on touch devices

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Two finger scrolling on touch devices is missing, and two finger touches result in selection of elements. Figuring out the implementation is almost, but not quite in my grasp ;)

If the current behavior is a bug, please provide the steps to reproduce and create a JSFiddle.

What is the expected behavior?

Two fingered scrolling on touch devices should retain the current selection and allow scrolling the content area without selecting elements; essentially just pausing the selecting logic during .move() and letting the OS native two finger scroll work as usual.

Your environment:

Selection-version: 1.5.0 (CDN)
Browser-version:  Safari (iPadOS 13)
Operating-system:  iPadOS 13

Latest version of selection-js not working in this example with vue

https://codesandbox.io/s/vue-template-qqiel

I have copied this example in the project and I've installed latest selection-js package. but the latest selection-js (1.4.1) not working with this above provide example code.

I am using this version of vue "^2.6.10",

onOutBoundaries event?

https://streamable.com/qvvi4

when this happen(cross boundary) any possible to cancel the selection?

the container with paper class is the boundary

or maybe i can mess with onStart and onStop to check if the certain $el is equal?

IE 11 : not working due to SCRIPT1006: Expected ')' .

bug

line no: 8 function Selection(options = {}) {

function Selection(options) {
options = options || {};

It may work , for above fix .
Thanks;

What is the expected behavior?

Your environment:

Selection-version: CDN 
Browser-version:   IE 11
Operating-system:  Windows.

Prevent Overlap

Feature Request: A boolean property that if true prevents overlap. I can see that there is a static method, "intersects", so clearly the logic is partway there.

Selection with jquery.panzoom doesn't work correctly.

Maybe a bug, maybe a feature. Not sure.

Current behavior:
In conjunction with jquery.panzoom, the coordinates where selection starts are wrong after panning/zooming.
I've setup this jsfiddle as an example.
https://jsfiddle.net/websitewill/ah4k0gc2/12/
The links toggle the pan/select mode. If you go into pan mode and drag the div, then go to select mode and drag a selection, you'll see the selection window ends up being offset from where the mouse cursor is.
Recommend not panning by much otherwise you won't see the selection window at all.

Expected:
Selection should start where mouse cursor is. Or, need a way to reinitialize the selection coordinates based on where pan/zoom is.

Selection-version: Latest
Browser-version: Chrome latest
Operating-system: Windows 10

how to calc scroll height?

this is the video that shows the problem

https://streamable.com/r9zjf

import Selection from '@simonwep/selection-js'
import img from './abc.jpeg'

class Paper extends Component {
  render() {
    return (
      <div className='paper'>
        <img className='image' src={img} />
      </div>
    )
  }
}

export default class Comp extends Component {
  state = {
    active: false,
    box: []
  }

  componentDidMount() {
    this.toggleSelection()
  }

  initSelection = () => {
    return new Selection({
      class: 'selection-area',
      selectables: ['.image'],
      boundaries: ['.paper'],
      validateStart: this.preventRightClickEvent,
      onStart: this.onSelectionStart,
      onStop: this.onSelectionStop,
    })
  }

  preventRightClickEvent = evt => {
    if (this.state.active === false) return false
    return evt.button === 2 ? false : true
  }

  onSelectionStart = evt => {
    console.log('onSelectionStart', evt)
    const { clientX, clientY, layerX, layerY, pageY, offsetY } = evt.originalEvent
  }

  onSelectionStop = evt => {
    console.log('onSelectionStop', evt)
    const [imageTarget] = evt.selectedElements
    if (!imageTarget) return
    const { _areaX1, _areaX2, _areaY1, _areaY2 } = evt.selection
    const x = Math.min(_areaX1, _areaX2)
    const y = Math.min(_areaY1, _areaY2)
    const box = this.state.box
    box.push({ _areaX1, _areaX2, _areaY1, _areaY2, x, y })
    this.setState({ box })
  }

  toggleSelection = evt => {
    this.setState({ active: !this.state.active }, () => {
      this.selection = this.selection || this.initSelection()
    })
  }

  render() {
    return (
      <div>
        <div>
          <button onClick={this.toggleSelection}>选</button>
        </div>
        {this.state.box.map(({
          _areaX1,
          _areaX2,
          _areaY1,
          _areaY2,
          x,
          y,
        }, idx) => <div key={idx} style={{
          position: 'absolute',
          zIndex: '999',
          top: (y) + 'px',
          left: (x) + 'px',
          width: Math.abs(_areaX1 - _areaX2) + 'px',
          height: Math.abs(_areaY1 - _areaY2) + 'px',
          background: 'rgba(0, 0, 255, .4)',
        }}></div>)}
        <Paper id='1' />
        <Paper id='2' />
      </div>
    )
  }
}

Selection with shift key

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Selection with holding shift is not possible.

What is the expected behavior?

Selection like in Windows-Explorer: While holding down the shift key, you can set the end of the selection with a mouse click.

Feature Request: Selecting child element of element container selects parent.

Feature request:

Selecting a child element of a specified parent class, parent will be selected. Ex:

<div>
          <img>
          <label>
    </div>

(clicking <img> or <label> should by-option be able to select <div>, and not select the children)

What is the current behavior?

Clicking on an element will only select itself.

(I have set selectables to the class of the <div> elements, still clicking on <img> or <label> still selects them.

Your environment:

Selection-version: latest
Browser-version:  Pale Moon 28 (Firefox 52-based)
Operating-system:  Windows

enable-selection-inside-of-iframes

Do you want to request a feature or report a bug?

feature

What is the current behavior?

selection does not work inside of iframes.

What is the expected behavior?

It should be possible to tell selection in which document it should live.

Selection-version: 1.4.3

preventDefault error

hi
I see some problems with { passive: false }

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
_manualScroll @ selection.min.js?72a4:7

I can't understend how to resolve this problems. All works right, but error in console

no way to override selectables .

I tried to override selectables in .on(start) with the idea of selecting only what divs i desire . i want to make a calendar event in plain javascript vanilla and i need to restrict selectables to select only what divs i want .
in this line of code "this.selectables=[".box-wrap > div."+inst._selected[0].classList[0]];" i tried to set the selectables to the first selected element className .

Text input fields stop working

Do you want to request a feature or report a bug?

This seems to be a possible bug?

What is the current behavior?

After enabling the selection plugin, I can longer click on an text input to edit anything

If the current behavior is a bug, please provide the steps to reproduce.

Just enabling the selection plugin causes the above error

What is the expected behavior?

Selection should not affect other behaviors

Your environment:

Selection-version: latest version as the time this question is posted
Browser-version:  latest version as the time this question is posted (Chrome)
Operating-system:  Windows 10

selectionAreaContainer is not working correctly?

Do you want to request a feature or report a bug?

This is a bug report

What is the current behavior?

Perhaps I mis-understand how this option should work, but I try to ensure that the drag-select behavior cannot happen outside certain element by specifying a dom node for this option

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

I expected that I cannot drag-select outside of the provided selectionAreaContainer dom node

Your environment:

Selection-version: latest from https://github.com/Simonwep/selection/tree/master/dist at the time this is posted
Browser-version:  Chrome Version 75.0.3770.100 (Official Build) (64-bit)
Operating-system:  Windows 10

Override selectable

Do you want to request a feature or report a bug?

feature

What is the current behavior?

After overriding selectables in Selection.create the selection don't take in account that selectables was changed .

What is the expected behavior?

After overriding selectables i want the selection to see what elements to select and what elements to ignore .

Your environment:

Selection-version: Using CDN
Browser-version:  Chrome version 75.0.3770.100 (Official Build) (64-bit)
Operating-system:  MacOS Mojave 10.14.3

destroy/disable Selection in Vue

Hi Simon,

I am using selection in a Vue PWA, and i implemented it as described here:

#14

based on this:

https://codesandbox.io/s/rlx7w7l76p

I need to destroy/disable the Selection but it does not work as expected. Do you have any hint for me please?

Typo

There is a typo in your GitHub project description: "Supports any CSS libary".

Add an option to start selection with a prefix key

Suggested prefix key: Alt

vue use error

Do you want to request a feature or report a bug?

bug
ERROR in js/0.js from UglifyJs
Unexpected token: name (r) [js/0.js:11341,1617]

if i use this in vue ,run webpack : npm run build
throw error

[Feature] horizontal scroll

Hi! Is there any plan to add horizontal scroll functionality?

P.s. Thanks for awesome library!