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,

		});