Group and Ungroup Button/Action/Custom Ables

[jadiagaurang]

Environments

• Framework name: Vanilla JS
• Framework version: N/A
• Moveable Component version: 0.48.0
• Testable Address(optional):

Description

I would like to provide a way to group Elements when user has more than one elements in the Selection. I am also looking for a way to ungroup elements as well.

Can you help me come up with any way to provide such functionality?

[daybrush]

@jadiagaurang

is this what you're looking for?

If there are more than two target props in an array, they automatically become a group.

https://daybrush.com/moveable/storybook/index.html?path=/story/group--group-draggable-resizable-rotatable

You can also set groups within groups by using nested arrays.

https://daybrush.com/moveable/storybook/index.html?path=/story/combination-with-other-components--components-selecto-with-multiple-group

[jadiagaurang]

Hi @daybrush

I am trying to introduce Group and Ungroup, Custom Ables. If the User selects multiple individual targets, then I would like to show the Group button to group them into one single group and show the Ungroup button on the single group.

Can you help me provide a Vanilla JS Example to set groups within groups by using nested arrays? It should be help me, setup Groups, for Selecto selection.

[jadiagaurang]

Hi @daybrush

I am planning to provide a single-level grouping. I looked at the Use Selecto with Multiple Group Storybook Page. The example seems excellent to me to achieve what I am trying to implement.

But, I am unfamiliar with ReactJS or VueJS, so If you can add a Vanilla JS Example to that Storybook Page, it will be easy for me to study and implement. CodePen works as well.

I appreciate any help you can provide.

[daybrush]

@jadiagaurang

group & ungroup are not the roles of Moveable. It is quite complex and requires many steps. So I decided to make it in Helper.

@moveable/helper https://daybrush.com/moveable/helper/release/latest/dist/helper.js

demo: https://codepen.io/daybrush/pen/zYMBQVY

[jadiagaurang]

@daybrush This is super helpful. I will study and implement this solution in my project. I will let you know if I have any questions.

[jadiagaurang]

Hi @daybrush

Is it possible to keep the onSelect event to show selection in real time? I tried but didn't work well with Grouping and Ungrouping.

Storybook Page: https://daybrush.com/selecto/storybook/index.html?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time

Snippet:

objSelectoRef.on("select", e => {
    targets = e.selected;
    moveable.target = targets;
})

It will be helpful to keep that feature to have better UX. Thanks in advance!

[jadiagaurang]

Hi @daybrush

Also, I want to have double click functionality, which allows to select a single element when a group is selected.

https://daybrush.com/moveable/storybook/index.html?path=/story/combination-with-other-components--components-selecto-with-multiple-group

I tried to convert the following onClickGroup and onSelectEnd functions but couldn't replicate similar functionality as you have on the Storybook Example.

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

        setSelectedTargets(childs.targets());
        return;
    }
    if (e.isTrusted) {
        selectoRef.current!.clickTarget(e.inputEvent, e.moveableTarget);
    }
}}

onSelectEnd={e => {
    const {
        isDragStart,
        isClick,
        added,
        removed,
        inputEvent,
    } = e;
    const moveable = moveableRef.current!;

    if (isDragStart) {
        inputEvent.preventDefault();

        moveable.waitToChangeTarget().then(() => {
            moveable.dragStart(inputEvent);
        });
    }
    const groupManager = groupManagerRef.current!;
    let nextChilds: TargetList;

    if (isDragStart || isClick) {
        if (isCommand) {
            nextChilds = groupManager.selectSingleChilds(targets, added, removed);
        } else {
            nextChilds = groupManager.selectCompletedChilds(targets, added, removed, isShift);
        }
    } else {
        nextChilds = groupManager.selectSameDepthChilds(targets, added, removed);
    }
    e.currentTarget.setSelectedTargets(nextChilds.flatten());
    setSelectedTargets(nextChilds.targets());
}}

I appreciate any help you can provide.

[daybrush]

@jadiagaurang

https://codepen.io/daybrush/pen/zYMBQVY

As you said, I modified the demo to use clickGroup and selectEnd. Look at the codepen again. Is this the feature you want?

[jadiagaurang]

@daybrush Thanks for adding clickGroup and selectEnd. Both work for me now!

Also, is it possible to keep select to show real-time element or group selection? or is it too complicated?

Storybook Page: https://daybrush.com/selecto/storybook/index.html?path=/story/selecto-with-moveable--select-moveable-targets-in-real-time

Snippet:

objSelectoRef.on("select", e => {
    targets = e.selected;
    moveable.target = targets;
});

It will be helpful to keep that feature to have better UX. Thanks in advance!

[daybrush]

@jadiagaurang

selecto's new version(1.25.0) is released. and codepen's code is also fixed. Check it again.

https://codepen.io/daybrush/pen/zYMBQVY

[jadiagaurang]

@daybrush Thanks for adding real-time selection to the demo.

I am facing an issue where, after selecting multiple elements not able to deselect. It gets stuck for some reason.

If I find a clean way to reproduce it, I will post the video on this issue soon.

[jadiagaurang]

Hi @daybrush I am trying to implement Group and Ungroup into my Project this week. But I need help with a few issues.

1. After making a group, you can't deselect the group by clicking outside!

https://github.com/daybrush/moveable/assets/430637/a0116094-11d8-4c13-8eb5-b25e0e2c29a7

2. After making a group, if another element is selected, then the element is added to the selected targets rather than deselecting the group and selecting another element.

https://github.com/daybrush/moveable/assets/430637/c75267a2-f66d-434e-9c61-43d8c70b6048

3. Can't Select a Group by Selecto until the entire group is under selection.

https://github.com/daybrush/moveable/assets/430637/a45235bb-75b3-4500-80d8-bc33f557622f

4. Ungroup Button/Function seems to need fixing.

https://github.com/daybrush/moveable/assets/430637/476bc41f-cf91-46fb-a52f-dde9e1b922f0

Please help me in any way possible. Otherwise, I must reinvent the wheel and implement my version of GroupManager! 🙏