How to change rect-selection size when container scroll

[yoole5699]

Environments

• Framework name: react
• Framework version: v16
• Component name: react-selecto
• Component version: 1.12.0
• Testable Address(optional): https://codesandbox.io/s/broken-fog-bbl8w (fork from https://codesandbox.io/s/4lw4q, only change file style.css line 122( height: 300px; => // height: 300px; ))

Description

Is there a way to autoChange rect-selection size when container is dragging and outer container(e.g window) is scolling? Currently,when outer container scrolls, the rect-selection only change pos(size not change)。

[daybrush]

@yoole5699

You have a few things to change.

1. container

   
   setScrollOptions({
     container: document.body,
     getScrollPosition: () => [
       document.documentElement.scrollLeft,
       document.documentElement.scrollTop
     ],
   ...
   });

2. onScroll

onScroll={(e) => {
            document.documentElement.scrollBy(
              e.direction[0] * 10,
              e.direction[1] * 10
            );
          }}

https://codesandbox.io/s/zen-proskuriakova-b3l7y?file=/src/App.tsx:1979-1994

It has been confirmed that we also have getScrollPosition bug. I'll fix it.

[yoole5699]

@yoole5699

You have a few things to change.

1. container

setScrollOptions({
      container: document.body,
      getScrollPosition: () => [
        document.documentElement.scrollLeft,
        document.documentElement.scrollTop
      ],
   ...
});
2.  onScroll

```js
onScroll={(e) => {
            document.documentElement.scrollBy(
              e.direction[0] * 10,
              e.direction[1] * 10
            );
          }}

https://codesandbox.io/s/zen-proskuriakova-b3l7y?file=/src/App.tsx:1979-1994

It has been confirmed that we also have getScrollPosition bug. I'll fix it.

hi @daybrush ,thanks for reply! I try the new demo.It seems still not working.When It scrolls, rect-selection size remains unchanged. I hope It can work like marqueeselection

current:

target:

[ttay24]

Hi, I've also run into this issue and I'm wondering if there's any work around now compared to in September? Thanks! This is an awesome library

[na2793]

I'm also looking forward to hearing an answer on this. This will be very useful.

[daybrush]

@ttay24 @na2793 @yoole5699

How about now? It seems to work well for the current demo (1.14 version)? https://codesandbox.io/s/angry-albattani-2uu9kg?file=/src/App.tsx

[na2793]

It doesn't seem to work well. Here's a capture of the codesandbox preview.

[daybrush]

@ttay24 @na2793 @yoole5699

• selecto 1.15.0
• react-selecto 1.15.0
• preact-selecto 1.15.0
• ngx-selecto 1.15.0
• svelte-selecto 1.15.0
• vue-selecto 1.15.0
• vue3-selecto 1.1.0
• lit-selecto 1.15.0

selecto's new version is released and see this demo: https://codesandbox.io/s/angry-albattani-2uu9kg?file=/src/App.tsx

And storybook also updated.

https://daybrush.com/selecto/storybook/?path=/story/selecto--select-in-the-scroll-area

Thank you :)

[na2793]

It works perfectly. I appreciate for your efforts.

[ttay24]

Can also confirm it's working for me! Thanks!

[claudiabdm]

Hi! I'm facing a similar issue when the scroll container increases its height when more items are added. If don't set a boundContainer, the selection rect won't select the items anymore and if I set it, the selection rect won't increase its height while scrolling. Is there something I might be missing? Thank you!

Here's a codesanbox with an example: https://codesandbox.io/s/confident-sun-etvlcb?file=/src/App.tsx

[na2793]

@claudiabdm I had the same problem before. Check out the link below. https://daybrush.com/selecto/release/latest/doc/Selecto.html#findSelectableTargets I hope this helps.

[claudiabdm]

@claudiabdm I had the same problem before. Check out the link below. https://daybrush.com/selecto/release/latest/doc/Selecto.html#findSelectableTargets I hope this helps.

That's perfect, thank you! It's working great although when the boundContainer is set the selection rect won't change its height but that might be a different issue.