set different selected/stored values on stop

[swampthang]

I have set up 2 selectable areas, both of which contain elements that relate to an element in the other container. The top container's 'selectable' is a div with a class of .note and the bottom container's 'selectable' is an svg 'g' element with a class of .vf-note

When the user selects elements in the top container, I want the related items in the bottom container to become the stored values and add the .selected class to them as well. Parsing through the library, I see where the SelectionArea class contains a property named i that has 4 arrays: stored, selected, touched and changed. I'm trying to figure out how to make this happen but failing miserably.

Here's the function that inits the SelectionArea class. Check out the on stop to see what I'm talking about. Is there a clear way to pull this off? I hate having to get my grubby hands on values buried down in your code.

initMultiSelect() {
  // this is a function in a class
  const that = this;

  this.MultiSelect = new SelectionArea({
    // the 2 selectable areas
    selectables: ['.vextab-container .notation-container svg .vf-note', '.neckmodule .note:not(.muted)'],
    boundaries: ['.neckmodule','.vextab-container .notation-container'],
    })
    .on("stop", ({ store: { stored } }) => {
      if( stored.length > 0 ) {
        /** 
         * if user selects the upper container find all the 
         * relative elements in the lower one so first check to 
         * see if the first selected item is a div
        **/
        if( stored[0].tagName.toLowerCase() === 'div' ) {
          
          let newStaveNotes = [];
          for( let note of stored ) {
            let matchArr = that.playData.filter( obj => {
              return obj.note[0].id === note.id;
            });
            matchArr.forEach( obj => {
              newStaveNotes.push(obj.noteWrap);
            })
          }

          // here's where I'm trying to set these values on the SelectionArea class
          stored = newStaveNotes;
          that.MultiSelect.i.selected =  that.MultiSelect.i.stored = newStaveNotes;

          // I'm keeping track of the selected notes in a class property named selectedStaffNotes
          that.selectedStaffNotes = stored;

          // now trying to set the selected class on the matching elements in the lower area
          for( let n of newStaveNotes ) {
            n[0].classList.add('selected');
          }
          
        } else {
          // must be an item from the lower container so just save it to selectedStaffNotes
          that.selectedStaffNotes = stored;
        }
      }
    }
  )
}

[swampthang]

This seems to work now though I haven't tested it on shift/cmd click selection yet. I changed the on stop event to this:

.on("stop", ({ store }) => {

  const selected = store.selected;
  let stored = store.stored;

  if( selected.length > 0 ) {
    if( selected[0].tagName.toLowerCase() === 'div' ) {

      let newStaveNotes = [];
      for( let note of selected ) {
        let matchArr = that.playData.filter( obj => {
          return obj.note[0].id === note.id;
        });
        matchArr.forEach( obj => {
          newStaveNotes.push(obj.noteWrap);
        })
      }
      stored = newStaveNotes;
     
      that.selectedStaffNotes = stored;
      for( let n of newStaveNotes ) {
        n[0].classList.add('selected');
      }
    } else {
      that.selectedStaffNotes = stored;
    }
  }
}

and in the beforestart method:

}).on('beforestart', ({ store }) => {

  store.stored = [];
  that.selectedStaffNotes = [];
})