Selecting child on single and grandchild on dbl click

[srdjan-stanisic]

Environments

Using Vanilla JS with SolidJS on the side.

Description

Hey,

I'm trying to create a functionality that will allow direct children of an element (like selection context) to be selected on a single click and grandchildren only on a double click. I tried with custom arrays and setting them as selected in "selectEnd" but it seems like a messy solution since the Selecto already does most of the heavy-lifting and I'm overwriting a lot of logic.

So, I ended up creating setTimeout function which adds children of the selected elements to selectable elements for 500ms and then removes them (enough time for fake dbl click).

To illustrate: -Selection context (parent) --Child elements (selectable on single click) ---Grandchild elements (selectable on dbl click)

The problem I'm having is that none of the select events (start, select, and end) won't fire again on the selected element and its children can't be selected in that case.

Is there a way to force the "select" event on an already selected element without deselecting it?

Here's the code that I was talking about

.on("selectEnd", e => {

    //add drill selectables
    e.selected.forEach(elem => {
        const drill = [...elem.children]
        selecto.selectableTargets = [...selecto.selectableTargets, ...drill]
        console.log(selecto.getSelectableElements())
    })

    //remove drill selectables after 500ms
    setTimeout(() => {
        selecto.selectableTargets = setContext(canvas)
        console.log(selecto.getSelectableElements())
    }, 500);

    //add selected to Solid global signal
    setSelected(e.selected);

    //allow moveables if they're top level only (child of canvas)
    moveables = e.selected.filter(item => item.parentNode === canvas);
    moveable.target = moveables;

})

[daybrush]

@srdjan-stanisic

I made a demo that works similarly to other editors by making it a separate module.

https://daybrush.com/moveable/storybook2/?path=/story/combination-with-other-components--use-selecto-with-multiple-group

<Moveable
onClickGroup={e => {
    if (!e.moveableTarget) {
        setSelectedTargets([]);
        return;
    }
    if (e.isDouble) {
        const childs = groupManagerRef!.current!.selectSubChilds(targets, e.moveableTarget);

        setSelectedTargets(childs.targets());
        return;
    }
    selectoRef.current!.clickTarget(e.inputEvent, e.moveableTarget);
}} />