Support for virtual list/lazy loading?

[junqdu]

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?

[junqdu]

@daybrush it seems like to achieve it, we would need to call findSelectableTargets before the hitTest

https://github.com/daybrush/selecto/blob/master/src/SelectoManager.tsx#L730

[daybrush]

@junqdu

Sorry. If you call the method every time, there is a performance problem.

Add code that calls that methodselecto.findSelectableTargets() when lazy loading is done from the outside.

[junqdu]

@daybrush I found another issue with it, even though I am calling findSelectableTargets to get new items in the virtualized list, but as I scroll down, some items are also being removed from the virtualized list, which would be missing fromfindSelectableTargets, and caused it to be removed. See example below, thanks! Sandbox: https://codesandbox.io/s/nervous-sound-2cb4j?file=/src/App.js Demo: https://share.getcloudapp.com/qGuEOeR5

[junqdu]

Is it possible to have some method like findAdditionalSelectableTargets, which instead of replacing the current selectableTargets, it would append the newly find targets into selectableTargets?

[junqdu]

@daybrush Before submitting a PR, what do you think about adding a method like the following? It would be almost the same as findSelectableTargets, but instead of replacing datas.selectableTargets, this would append new targets to it.

    /**
     * Find additional targets for selectableTargets during drag event within virtualized list
     * @params field - the attribute to test against
     */
    public findAdditionalSelectableTargets(
        datas: any = this.gesto.getEventDatas(),
        field: string
    ) {
        const selectableTargets = this.getSelectableTargets();
        const selectablePoints = selectableTargets.map((target) =>
            this.getElementPoints(target)
        );
        selectableTargets.forEach((target) => {
            if (!datas.selectableTargets.includes(target)) {
                datas.selectableTargets.push(selectableTargets);
            }
        });
        datas.selectablePoints = selectablePoints;
    }

[axetroy]

Very useful function, I am looking forward to this.

[xuanaxuan]

@daybrush 在提交 PR 之前，您对添加以下方法有什么看法？它几乎相同findSelectableTargets，但不是替换datas.selectableTargets，而是向其附加新目标。

    /**
     * Find additional targets for selectableTargets during drag event within virtualized list
     * @params field - the attribute to test against
     */
    public findAdditionalSelectableTargets(
        datas: any = this.gesto.getEventDatas(),
        field: string
    ) {
        const selectableTargets = this.getSelectableTargets();
        const selectablePoints = selectableTargets.map((target) =>
            this.getElementPoints(target)
        );
        selectableTargets.forEach((target) => {
            if (!datas.selectableTargets.includes(target)) {
                datas.selectableTargets.push(selectableTargets);
            }
        });
        datas.selectablePoints = selectablePoints;
    }

Has this plan not been released yet? It's already 2021.

[daybrush]

@xuanaxuan

between onDragStart and onDragEnd. Just call findSelectableTargets again. But it doesn't check automatically.

[eugene-f02]

Are there any updates on this issue? It would be extremely nice for selecto to support virtualized lists

[jonlepage]

why every links in this tread are broken's ! it pain !

[jonlepage]

so my temp solution it just render the full liste during selector drag, work but will laggy on > 1000 nodes ! selecto.findSelectableTargets() it called after dragStart and we use useMemo *1 time when proxi detect selector dragging, sor it rendering the full list.

we really need native support for this.