feature request: selection box CSS customization.

[aliveornot]

Environments

• Framework name: react. (but the requested feature is framework-agnostic)
• Framework version:
• Component name: selecto
• Component version:
• Testable Address(optional):

Description

Before start, kudos to your impressive work! It helps me a lot!

It would be great if the css styling of .selecto-selection div (i.e. the skyblue rectangle displayed when I drag, to indicate the selected region) can be customized.

The motivation:

1. I have two different types of selection mode in my app. It would be great if I can display it intuitively.
2. Plus, I think selecto can potentially be used to DRAW a
   in real time, in which case, transparent background rectangle is more appropriate than the sky blue one.

Thanks a lot!

[daybrush]

@aliveornot

For now, I have no choice but to tell you to process it with css.

There is a way to force assignment using !important.

.selecto-selection {
    position: fixed;
    display: none;
    border: 1px solid #4af;
    background: rgba(68, 170, 255, 0.5);
    pointer-events: none;
    will-change: transform;
    z-index: 100;
}

[aliveornot]

Thank you very much! Actually I had somewhat similar workaround in my mind, but this seems better. I'll try.

[golnaaz73]

@daybrush Hi, thanks a lot in advance, is there any way to disable selecting targets with selection box?

[daybrush]

@golnaaz73

okay. I'll consider it.

[golnaaz73]

@golnaaz73

okay. I'll consider it.

I set clickBySelectEnd prop true and it solved the problem, thanks

[jonlepage]

am also looking for this. can you add a field for pass a css ?

        const selecto = new Selecto({

        // pass a custom classname
        className:'myClassName',

            // The container to add a selection element
            container: document.body,

            // Selecto's root container (No transformed container. (default: null)
            rootContainer: null,

            // The area to drag selection element (default: container)
            dragContainer:document.body,

            // Targets to select. You can register a queryselector or an Element.
            selectableTargets: ['.KeyPoint'],

            // Whether to select by click (default: true)
            selectByClick: true,

            // Whether to select from the target inside (default: true)
            selectFromInside: true,

            // After the select, whether to select the next target with the selected target (deselected if the target is selected again).
            continueSelect: false,

            // Determines which key to continue selecting the next target via keydown and keyup.
            toggleContinueSelect: 'shift',

            // The container for keydown and keyup events
            keyContainer: window,

            // The rate at which the target overlaps the drag area to be selected. (default: 100)
            hitRate: 100,

        });