Is it possible to change the selection area initial position?

[Polcsi]

Feature request or a solution for this issue! Currently there is no feature in the library for this issue or I could not find one. I hope there is an optimal solution for this problem.

Issue

I would like to change the area-selection initial position inside of onBeforeStart event handler.

Description about issue:

1. When the user moves the mouse over one item then there will displayed a button at the bottom left corner.
   
2. User will be able to copy the current item properties to the newly selected items by selecting a range.
   
3. And I want to change the area-selection start position to the center of the item when user starts copying.
   

Desired solution

This is how I imagine the solution for this issue:

const onBeforeStart = ({ event }: SelectionEvent) => {
        if (isCopy.current === true) {
           // Change area selection initial position
          // ...
        }

        // Preventing select from right click, middle mouse or left click
        return allowedButtons.current.includes(event.buttons);
    };

[simonwep]

That's a really cool idea, will definitely look into it :)

[simonwep]

Hey ho! It's been a while, but this is now possible with the following functions:

• selection.getSelectables() - to get a list of all elements that are currently selectable.
• selection.setAreaLocation({...}) - to adjust the location at any time.

Translated into code this may look like something like this:

selection
    .on('start', (evt) => {
        // There may not be an event if the selection was triggered programmatically
        const startElement = evt.event?.target;

        // Make sure the target is a selectable element and the user started the
        // selection inside an selectable element, and not just the boundaries
        if (startElement instanceof HTMLElement && selection.getSelectables().includes(startElement)) {
            const startElementRect = startElement.getBoundingClientRect();

            // "attach" the selection area to the top left corner of the element
            selection.setAreaLocation({
                x1: startElementRect.x,
                y1: startElementRect.y
            });
        }
    })

Which would result in something like this:

Note

Keep in mind that translating the area also may change the selection itself if you move it too much, in the gif below it is exact at the corner, keeping the source element still selected at any time.

The feature will be available starting with v3.9.0 :)