daybrush/selecto

Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

selecto's Issues

Please support keyboard based selection as well

Environments

• Framework name:
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

A lot of public types are not visible to typescript when using ngx-moveable as they're not export in public-api.d.ts

Environments

• Framework name:
  angular
• Framework version:
  11.2.0
• Component name:
  ngx-moveable
• Component version:
  0.19.0

Description

There a lot of types are not visible to typescript when using ngx-moveable as they are not part of the public api.
The fix is to copy the declarations folder from react-moveable to ngx-moveable, and to append export * from './declaration/types'; to the end of public-api.d.ts. This worked for me locally.

A workaround is to import the types from react-moveable directly:
import { OnDrag, OnDragEnd, OnDragGroup, OnDragGroupEnd, OnDragGroupStart, OnDragStart } from 'react-moveable/declaration/types'; but this is kind of hacky.

When the parent container contains "transform:'scale(1)'", the selection box position is incorrect.

Environments

• Framework name:
• Framework version:
• Component name:
• Component version: 1.11.1
• Testable Address(optional):

Description

When the parent container contains css style: "transform:'scale(1)'", the selection box position is incorrect.
The reason for the error: the start and end positions of the selected rectangle have not been converted.

Selecto with PyCharm

Environments

• Framework name: Vanilla
• IDE: PyCharm
• Component name: Selecto

Description

Hey, thanky for providing such a great tool! I want to use selecto with moveable. Moveable is working but selecto is not, when I'm importing it in my .js it says "Interface cannot be instantiated". I had this issue with moveable too, and it was kindly fixed. It would be great if this would be possible with selecto too, so I can use them together.

Thanks a lot!

Selecto to select desired target using code instead of mouse click

May I know is this possible to use selecto to select desired target using code instead of mouse click on the target object?

I am trying to achieve something like click one single target object (target1) to also select other target object (target2) programmatically that are grouped.

For example:

<div class="moveable target" id="target1">target 1 under group 1</div>

<div class="moveable target" id="target2">target 2 under group 1</div>

const selecto = new Selecto({
      container: document.body, 
      selectableTargets: [".target"],
      hitRate: 80,
      selectByClick: true, 
      selectFromInside: false,
      continueSelect: false,
      boundContainer: true,
      toggleContinueSelect: ["shift"],
      ratio: 0,
  });

Selection continues even after switching tabs

• Framework name: Vanilla JS
• Testable Address(optional): https://codepen.io/yesvivek/pen/LYNbQdo
• OS: Windows
• Browser: Chrome

Am using Selecto to select table rows and has been working good. One problem I notice when using Ctrl and/or shift toggleContinueSelect is that when moving away from the page using Ctrl+Tab and returning back makes Selecto think that I keep pressing Ctrl/shift and it continues to select without removing old selection.

Reproduction steps to follow on above page (or in your demo page):

1. Select any row in the table.
2. Use Ctrl+tab to navigate to next tab in the window.
3. Do whatever you wanted to do on the next tab.
4. Switch back to the selecto page.
5. Select any row.
6. Previous selection is not cleared.

Notice that I never intended to use Ctrl for selection at all.

[Feature] Hover event element

Before selected one target, can fire hover event target?
Thank @daybrush!

Could you explain the functionality in onSelect (see: README.md)?

What does e.added and .classList stand for and how can I store all selected <div>s to my own variable const divsSelected=

SelectEnd event has a isDragStart boolean?

...that's confusing to me.
a selectEnd event can't have a drag start? makes no sense.

i have spent a grate amount of time now trying to have a draggable element and also using selecto at the same time and finally got it the way i wanted. was something about live select and select on end mixing that made some bad behaviors.
it was buggy for a while. I simply just clicked an element without dragging and the isDragStart was still saying that it was true while i haven't even moved the mouse one bit.

But also it seems you don't use the native drag and drop event
looking at the evt.inputEvent.type after selectEnd indicates that the event is of type mousedown event (based on this assumption it seems like you are trying to emulate some of the drag events using only mousedown+mousemove+mouseup events?)
wouldn't it benefit if you used native dragstart, dragend and drag event instead? and used some elm.draggable properties instead? i could not find them in the registered event listener anywhere in the chrome inspector

Selectro Drag Area In Wrong Place (Offset by pixels)

Environments

• Framework name: Node / React
• Framework version: v14.15.5 / 16.14.0
• Component name: Selecto
• Component version: 1.11.1
• Testable Address(optional):

Description

When dragging the select area the area starts in the wrong spot, offset by top and left, often to the right and below the original area. The dragContainer is being resized after the component mounts which is potentially/likely causing the issue, though. Additionally, there is a transform: scale on the dragContainer.

There doesn't appear to method to update/recalculate the dragContainer bounding rect. Ideas on how to fix this?

After selection and make SVGs and SPAN elements in group, the some SVGs are not selectable due to any reason

Environments

• Framework name: React
• Framework version: 16.13.1
• Component name: react-selecto + react-moveable
• Component version: react-selecto= 1.5.2 and react-moveable=0.21.6-rc

Description

after selection of svgs and span elements by react-selecto and make group elements with react-moveable , when select those group elements for few svgs they're not able to selected as a group.

Selection drag area positioned incorrectly for container positioned with transform

Environments

ngx-selecto

Description

Hi, when I position the selecto container in the middle of a page using a transform. The drag selection drag box is positioned in the wrong place.

I centered the container like this. If I remove the transform, it all works fine.

.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }

If this isn't easy to fix, is it possible to hide the drag area during the selection process?

How to disable selecto ?

Environments

• Framework name: react
• Framework version: latest
• Component name:
• Component version:
• Testable Address(optional):

Description

Is there has a prop like disable to disable Selecto ?
except

{
  disabled ? <Selecto /> : null
}

Cannot install selecto in angular 11.2.3

Environments

• Framework name: angular
• Framework version: 11.2.3
• Component name: selecto
• Component version: 1.10.2
• Testable Address(optional):

Description

Cannot install selecto in angular 11.2.3

diandiantu on  master is 📦 v0.0.0
➜ npm install ngx-selecto
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^11.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^8.2.14" from [email protected]
npm ERR! node_modules/ngx-selecto
npm ERR!   ngx-selecto@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Is there anyway to select all after selecting the first and last one?

Environments

• Framework name: react
• Framework version: 16.13.1
• Component name: react-selecto
• Component version: latest
• Testable Address(optional):

Description

Similar to explorer press shift key.

Selecto doesn't seems to check item transformation bound

Environments

• Framework name: daybrush.com/moveable
• Framework version: -
• Component name: -
• Component version: -
• Testable Address(optional): daybrush.com/moveable

Description

Hi! Thanks for the awesome library!

I would like to ask about the selecto detection when the item is transformed, such as "rotated". This is the example I see from moveable demo:

As you can see, the element bound is rotated, but the selecto still detect it as selected.

Should selecto also able to detect the item bound when it's rotated?

Thanks!

in the dragContainer have a textarea and can not click and type, because selecto prevented this behavior， how to exclude some element in drag area?

in the dragContainer have a textarea and can not click and type, because selecto prevented this behavior， how to exclude some element in drag area?

[Bug] svelte-selecto logs to console on initialisation

Environments

• Framework name: svelte-selecto
• Framework version: 1.10.2
• Component name: Selecto.svelte
• Component version: ??

Description

There is a console.log statement in the svelte-selecto package, its not possible for me to disable this in production because it's not wrapped in a conditional. Ideally developer logs shouldn't be visible in production.

selecto/packages/svelte-selecto/src/svelte-selecto/Selecto.svelte

Line 54 in fd58600

console.log(options, selecto);

Selection drag area shifted when container parent has transform

Environments

• Framework name: React
• Framework version: 1.17
• Component name: react-selecto
• Component version: 1.10.2
• Testable Address(optional): https://codesandbox.io/s/compassionate-beaver-0cpbo?from-embed=&file=/src/App.tsx:476-487

Description

Hi, when selecto container is placed in parent which already is transformed then selection drag area is positioned incorrectly. I have attached modified example to reproduce this behaviour.
Of cource as workaround I can hide drag area but I would like to have it in right place.

Thanks in advance.

after rotating group elements second time the inner and outer moveable boundries change with rotations

Environments

• Framework name: React
• Framework version: 16.13.1
• Component name: react-selecto + react-moveable
• Component version: react-selecto= 1.5.2 and react-moveable=0.21.6-rc

Description

After making the elements in form of group and rotating that group make inner elements rotate too and outter moveable selection boundaries also change...

Has one way to use window.scroll as a scroll Option ?

Hello, there's anyway to use window scroll as an option ? Without using a container to get her ref.
I've tried to follow the docs but i didn't succeed using window.scroll

Acceptance testing strategies?

Environments

• Framework name: Ember.js
• Framework version: 3.22
• Component name: Selecto
• Component version: 1.10.2
• Testable Address(optional):

Description

I am trying to write some acceptance tests around Selecto, and I was wondering if anyone has any good testing strategies. Basically, I want to test that when I select a region, a modal appears with the appropriate data (see screencap below). Ember has pretty good test helpers to allow triggering events, for example you could write a helper for drag and drop:

export async function dragAndDrop(fieldSelector, dropZoneSelector, options) {
  await triggerEvent(fieldSelector, 'mousedown');
  await triggerEvent(fieldSelector, 'dragstart', options);
  await triggerEvent(dropZoneSelector, 'dragenter', options);
  await triggerEvent(dropZoneSelector, 'drop', options);
}

I've tried something similar to simulate selecting a region, but haven't found what events I need to trigger to do that. OR if anyone has suggestions on how to hook into Selecto's event directly, that would be appreciated.

selectByClick:false is not working

Environments

• Framework name: React
• Framework version: v16
• Component name:
• Component version:
• Testable Address(optional):

Description

When I set selectByClick to false, the item still could be selected by single click, but when I set selectFromInside to false, it works，but another problem occurs: I can not selected item from inside...It makes me confused, as you can see in your demo...

toggleContinueSelect is not effective in particular case

• Framework name: Vanilla JS
• Testable Address(optional): https://codepen.io/yesvivek/pen/LYNbQdo

I have been trying to use selecto to select rows in the table. I want to allow selection of rows using keyboard and also using mouse. I take care of keyboard selection and selecto is used only for mouse selection. Whenever keyboard is used, I use selecto.setSelectedTargets to set the current selection and it works fine so far.

This particular problem arises only when mixing keyboard and mouse. Follow below steps on above sample page that is created to reproduce this issue. I have used textbox instead of up or down arrow key because I started with textbox first. I can rewrite to use keyboard event if needed or simplify reproduction sample.

1. Click on row 6 (any row other than 2).
2. Press Shift key.
3. Click Add button which will select row 2.
4. Do not release Shift key.
5. Press some key (Down arrow)
6. Do not release shift key.
7. Click on new row.
8. Now old selection is removed

Callbacks are called with removed containing previously selected elements even though Shift (toggle) key is still pressed.
Am not sure whether this is a bug or I need to set keyContainer option with different value. Please advice.

How can I change the style of drag area?

Thank you for building such a nice library.

I have one question. I want to style the area created from the mouse cursor when dragging.

But I have no idea what the class of this is. Even when I look through the code of this library, I couldn't find the part that sets its style. How do I modify CSS to change its style?

Demo with Moveable

Environments

• Framework name: React
• Framework version: 16.13.1
• Component name: Selecto
• Component version: 1.0.0
• Testable Address(optional):

Description

Hello I was wondering if you could provide examples of Selecto together with Moveable (especially resizable). Thank you for all your great work.

Range aspect ratio

Environments

• Framework name: Vanilla
• Framework version:
• Component name: Selecto
• Component version: Latest

Description

I am always grateful for the projects you create.

I thought about the moveable demo site, but is it possible to fix the aspect ratio of range selection?

For example, if you hold down the Shift key and it becomes a square, you will find many useful scenes.

I am happy if it becomes a good suggestion.

[Feature] selection ends only if specified minimum selection made

I'm using selecto to trigger an event when an area on a timeline is selected. There is a separate event that is triggered when the timeline is clicked. I am using on:selectEnd to trigger the event, however, the selectEnd event is triggered even if the target is merely clicked resulting in an event.detail.rect with exactly the same value for left and right. This presents a problem for me, because the selectEnd event is triggered when a click event is also triggered.

Suggestion: It would be great if there was a prop called minimumPixelsForSelection that allows me to specify that a 'selection' is only 'active' after a certain number of pixels have been selected. This wouldn't change the display of the blue selection box, just prevent the selectionEnd event being triggered when a target is clicked.

EDIT: For clarity, selectEnd is fired regardless of whether select event is fired. Hence why changing the hitRate value doesn't fix this issue.

EDIT: Closing because I think this is actually a non-issue. I can just fire my event conditionally based on the difference between the two numbers. The only downside is that the selection logic is running on every click, but there is no noticeable performance hit so not an issue.

How can i remove selected by clicking the outside area of Selecto?

Environments

• Framework name: React Hooks
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

Hello again @daybrush , Thank you so mush for great plugin. I'm using react-moveable with selecto as [https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time].

In your example, selection is unselect by clicking within this ".selecto-area .elements" div.
I would like to remove selection by clicking outside area of Selecto.
I tried with two option,
First option with setTargets([]) to remove selection and it was remove the selection but i can't select items again.
Second option is i add ".selecto-area .elements" class to body tag. But other click event doesn't work inside that body.

Do you have any example like that please?

svelte-selecto package broken?

Environments

• Framework name: selecto
• Framework version: 1.10.1
• Component name: svelte-selecto
• Component version:1.10.1
• Testable Address(optional): https://codesandbox.io/s/6u5gu

Description

In all examples (in code sandbox) an error is thrown when you click in a selectable area. this occurs only for svelte-selecto (and lit). For the other packages. Tested on Chrome and Firefox (latest stable - win 10).

Selecting only when clicking on the container

Environments

• Framework name: pure JS

Description

Is it possible to only start selection only when clicking on the actual background container, not on the objects themselves? I'm using selecto (without moveable) and when I click to drag an element selecto also starts selecting. I tried selectFromInside: false, but there was no effect.

Compatibility about windowing technique

Environments

• Framework name: React
• Framework version: v16
• Component name: Selecto
• Component version: Latest
• Testable Address(optional):

Description

Firstly, thank you for this library. I am using react-window.
Selecto runs querySelectorAll method for selectableTargets only during onDragStart.
For windowing, is it possible re-find selectableTargets during onDrag ?
Could a more logical piece of code be written for this use ?

Add prop to limit select area bounds to the dragContainer

Environments

• Framework name: React
• Framework version: Latest
• Component name: React Selecto component
• Component version:
• Testable Address(optional):

Description

Would it be possible to add a prop to selecto like limitDragArea so that after a drag has started inside the dragContainer, then the selecting area cannot go outside of the dragContainer? Currently, you can't start a select outside a dragContainer (which is great) but you can start a select inside a dragContainer and then drag outside of that container. This prop would essentially limit the bounds to the bounds of the dragContainer specified

The isDouble is always return false in onSelectEnd.

Environments

• Framework name: react
• Framework version: 16.13.1
• Component name: react-selecto
• Component version: 1.7.4
• Testable Address(optional): https://codesandbox.io/s/tender-moon-6rc3i?file=/src/App.tsx

Description

When i double click the element, onSelectEnd is triggered only once and isDouble is false(expectation is true).
When i double click the blank space, onSelectEnd is triggered twice. IsDouble is false in first event and it is true in second event.
I checked the inputEvent type is 'mousedown'. Does‘t meet the following conditions.

if (inputEvent && inputEvent.type !== "mousedown" && inputEvent.type !== "touchstart") {
         this.trigger("dragEnd", {
                isDouble: false,
                isDrag: false,
                ...e,
                rect,
            });
        }

npm install vue-selecto npm ERR! notarget No matching version found for selecto@^1.10.2.

Environments

• Framework name:
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

npm ERR! code ETARGET
npm ERR! notarget No matching version found for selecto@^1.10.2.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'vue-selecto'
npm ERR! notarget

[Vue warn]: Unknown custom element: <Selecto>

Environments

• Framework name: Vue
• Framework version: 2.x

Description

I got this error message: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

onSelectend I need to know whether it's triggered by a click or a drag

@daybrush Can you add a parameter? like
1、event: "drag" or "click"
or
2、isClick: true or false

I'm using React-selecto

how to select all elements by pressing a specific button?

Environments

• Framework name:
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

Editable on double click.

Environments

• Framework name: Angular
• Framework version: 9.1.0
• Component name: Selecto + Moveable
• Component version: latest
• Testable Address(optional):

Description

I created a moveable component that having text. Using selecto, it can be selected on a single click. I need it to be editable on a double click. Is it possible through your library?

I'm through select From Inside choose，Then clicking on a blank area will not clear the selection

I'm through select From Inside choose, Then clicking on a blank area will not clear the selection, But you can clear the selection by clicking on a blank area in the box, Just like this, clicking on an empty area doesn't clear the selection

Start selecting only on key press.

Environments

• Framework name:react
• Framework version:latest
• Component name: react-selecto
• Component version: 1.12.0
• Testable Address(optional):

Description

Is there a way to start selection only on keypress?
For example, I want to start selecting only when I have the ctrl key pressed, not all the time.

Blur/Focus issue with selecto

Environments

• Framework name: React
• Framework version: 16.8.0
• Component name: Selecto
• Component version: 1.1.1
• Testable Address(optional):
  https://codesandbox.io/s/cool-roentgen-6u4ib

Description

Text inputs do not get a onBlur event anymore, and focus does not move away.

Please see this demo: https://codesandbox.io/s/cool-roentgen-6u4ib

1. Click in the text input
2. Start a selection
3. Blur is not triggered & focus stays on the input

I have an editor with textfields around a canvas, when a user changes a text in the textfield and then starts a selection, the blur is not triggered, meaning I don't know that I should save the textlayer.
Also, the focus stays on menus that should not have focus after clicking on the canvas.

Support for virtual list/lazy loading?

Environments

• Framework name:
• Framework version:
• Component name:
• Component version:
• Testable Address(optional):

Description

Codesandbox: https://codesandbox.io/s/nervous-sound-2cb4j?file=/src/App.js:239-240
Demo: https://share.getcloudapp.com/Jru4qmjp

Is there any support for supporting virtualized list?

boundContainer is not working with scrollOptions (react-selecto)

On scroll using scrollOptions the selection portion is going above the bound area vertically.

Is it possible to cast/convert the return type of the methods (.selected, .added, .afterAdded) to Array<ReactComponent>?

How is this possible as my code does not accept HTMLElement as return.

after selecting multi elements and start dragging all elements collapse on each other at same place

Environments

• Framework name: ReactJS
• Framework version: 16.13.1
• Component name: react-selecto + react-moveable
• Component version: react-selecto= 1.5.2 and react-moveable=0.21.6-rc
• Video Address(optional): https://www.screencast.com/t/DIWtY7mpm6

Description

after selecting group elements and start dragging all elements collapse on same position but if i start scalling after selecting elements than selected elements don't collapse then dragging also work perfectly.

How can I make table rows selectable?

Environments

• Framework name: Javascript

Description

I need table rows to be selected and trying to achieve that using selecto. Attached a sample code that I have been trying and my intention is I should be able to select the rows by clicking them individually (which works) and also by dragging mouse over TRs, which I dont know how to achieve. Can someone help me to achieve it?

selectable.html.txt

Mouse down and drag on target not working with react-moveable.

After upgrading react-selecto from v1.7.4 to v1.9.2 the mouse down and drag no longer works when moving an element with react-moveable, unless you explicitly click (mouse down & up) and then drag. This behaviour can be reproduced in the example: https://daybrush.com/selecto/storybook/?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time

Expected behaviour:

Observed behaviour (mouse is held down, but the element does not move):

As a side note, it would be good to couple the exact version of selecto to a given framework release (eg 1.7.4 of react-selecto should install "1.7.4" of selecto not "^1.7.4") - The cause of this issue was hard to track down because after removing my package-lock.json and reinstalling 1.7.4 of react-selecto the issue was still occuring - only after looking into the package-lock.json was it apparent that 1.7.4 had installed 1.9.2 of selecto because of the '^'

[Feature] Fixed height for selection box

boundContainer is really useful, what I'd like is prop that builds on this functionality by allowing me to specify a fixed height. Meaning that dragging a selection only allows you to modify the width of a selection but not the height. What I'm using this for is to make it possible to create selections on a timeline, so I'm trying to recreate selection behaviour you might find in Final Cut or Premiere.

SvelteKit: <Selecto> is not a valid SSR component

Environments

• Framework name: SvelteKit
• Framework version: 1.0.0-next.146
• Component name: Selecto
• Component version: 1.12.0

Description

Selecto throws 'not a valid SSR component error' due to this issue (I believe): sveltejs/sapper#774

Also relevant: rob-balfre/svelte-select#87

Solution

Change:

  import Selecto from "svelte-selecto";

  import Selecto from "svelte-selecto/src/svelte-selecto/Selecto.svelte";

EDIT: Actually this doesn't work, leads to this error: EDIT: Incorrect

500
Cannot read property 'destroy' of undefined
TypeError: Cannot read property 'destroy' of undefined
    at Selecto.svelte:65:19
    at run (/Users/ben/dev/language-platform/my-project/node_modules/svelte/internal/index.js:22:12)
    at Array.forEach (<anonymous>)
    at run_all (/Users/ben/dev/language-platform/my-project/node_modules/svelte/internal/index.js:28:9)
    at Object.render (/Users/ben/dev/language-platform/my-project/node_modules/svelte/internal/index.js:1686:13)
    at render_response (file:///Users/ben/dev/language-platform/my-project/node_modules/@sveltejs/kit/dist/ssr.js:472:28)
    at async respond$1 (file:///Users/ben/dev/language-platform/my-project/node_modules/@sveltejs/kit/dist/ssr.js:1324:10)
    at async render_page (file:///Users/ben/dev/language-platform/my-project/node_modules/@sveltejs/kit/dist/ssr.js:1386:19)
    at async resolve (file:///Users/ben/dev/language-platform/my-project/node_modules/@sveltejs/kit/dist/ssr.js:1647:10)
    at async Object.handle (/Users/ben/dev/language-platform/my-project/src/hooks.ts:29:25)

Concerns

This solution depends upon the uncompiled Selecto component being shipped in the npm package.

## Another solution (untested): Doesn't work in SvelteKit

<!-- {#if (process.browser) } -->
<!--   <Selecto /> -->
<!-- {/if} -->