Can I get access to the store so I can clear selection when pressing Escape

[tonyduanesmith]

Is your feature request related to a problem? Please describe. Can I get access to the store so I can clear selection when pressing Escape, I cannot see how I can get access

Describe the solution you'd like Getting access to the store

Describe alternatives you've considered Not using escape key to deselect everything

Additional context There may be a way to do this already but if there is could you point me in the right direction

[Nielson]

Hi @tonyduanesmith !

This should be possible with adding an event listener and then using the built in clearSelection() method, like this:

const selection = new SelectionArea({});

document.body.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    console.log("Escape key pressed");

    selection.clearSelection();
  }
});

[tonyduanesmith]

Sorry I didn't provide enough context, I am using the react component , but I did spot the useSelection hook on the type definition file which gives me the same methods

Thanks for the help

for anyone else in the future wants to also add Escape to clear and is also using React

import { useEffect } from 'react';
import { useSelection } from '@viselect/react';

  const selection = useSelection();

  useEffect(() => {
    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        selection?.clearSelection();
      }
    }

    window.addEventListener('keydown', handleKeyDown);

    return () => window.removeEventListener('keydown', handleKeyDown);
  });

[abeijnoff]

I'm trying to use the useSelection hook above to clear the selection when a button outside the SelectionArea is clicked but the selection returned from the hook is always undefined. Any idea why?

[tonyduanesmith]

@abeijnoff useSelection needs to be a child of SelectionArea as useSelection uses context and SelectionArea provides that context

[abeijnoff]

Super, it worked when a put the button in a child component, thanks!