getSelection(). Am I doing this right?

[g40]

An excellent and much needed project, thank you.

I have a grid of draggable items, with https://github.com/anseki/plain-draggable handling dragging, snapping and constraining to a container. selection is being used to manage groups of items. The various steps to do so are outlined below. What I end up with is the selection feedback mechanism apparently working but nothing obvious in terms of the selected elements.

In the stop handler I've got the code below, but the selection list is always empty. What am I doing wrong? Many thanks.

.on('stop', evt => {
// Do something with the selected elements.
console.log('stop', selection.getSelection());
});

<div id="t_grid_container" style="border: 0px solid #808080; width:2400px;">
  <img id="t_grid" draggable="false" style="width:100%;height:600px;" src="./svg/g2.svg"/>
  <img id="draggable_1" class="selectable" src="./svg/grand.svg" tabindex="0" style="position:absolute;left:0px;top:0px;" ></img>
  <img id="draggable_2" class="selectable" src="./svg/grand.svg" tabindex="0" style="position:absolute;left:0px;top:100px;"></img>
</div>		

Styling is applied:

        .selection-area {
            background: rgba(46, 115, 252, 0.11);
            border: 2px solid rgba(98, 155, 255, 0.81);
            border-radius: 0.1em;
        }
        .container {
            user-select: none;
        }

Vanilla .JS code imports from the CDN as directed:

import SelectionArea from "https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.mjs";

and in the handler for the HTML window loading. a new SelectionArea is created:

const selection = new SelectionArea({
	// Class for the selection-area itself (the element).
	selectionAreaClass: 'selection-area',
	// Class for the selection-area container.
	selectionContainerClass: 't_grid_container',
	// class for selectable elements
	selectables: ['selectable']
});

[g40]

So, with a tiny modification the selection mechanism works for certain elements. It still does not work for elements dynamically added to the DOM using appendChild() after the SelectionArea() constructor has been called.

Here is the majik:

const selection = new SelectionArea({
	// Class for the selection-area itself (the element).
	selectionAreaClass: 'selection-area',
	// Class for the selection-area container.
	selectionContainerClass: 't_grid_container',
	// class for selectable elements
	selectables: ['.selectable'] // <= dot '.' added here
});

[simonwep]

Hey! You have to call resolveSelectables after adding new elements (https://github.com/Simonwep/selection/tree/master/packages/vanilla#functions) :)

[g40]

@simonwep Yes, that does it. Thank you.