Keyboard Shortcuts

[seveibar]

Need to have keyboard shortcuts for common tasks.

[Ownmarc]

Not exactly what you need, but it could help.. This is what I use to do things while key is pressed :

function useKeyPress(targetKey) {
  // State for keeping track of whether key is pressed
  const [keyPressed, setKeyPressed] = useState(false)

  // If pressed key is our target key then set to true
  function downHandler({ key }) {
    if (key === targetKey) {
      setKeyPressed(true)
    }
  }

  // If released key is our target key then set to false
  const upHandler = ({ key }) => {
    if (key === targetKey) {
      setKeyPressed(false)
    }
  }

  // Add event listeners
  useEffect(() => {
    window.addEventListener('keydown', downHandler)
    window.addEventListener('keyup', upHandler)
    // Remove event listeners on cleanup
    return () => {
      window.removeEventListener('keydown', downHandler)
      window.removeEventListener('keyup', upHandler)
    }
  }, []) // Empty array ensures that effect is only run on mount and unmount

  return keyPressed
}

const shiftPressed = useKeyPress('Shift')

{shiftPressed && (
          <Fragment>

          </Fragment>
)}

[seveibar]

Thanks @Ownmarc! We're working on this issue this week! We were considering using the react-use useKey method.

Some of the keyboard shortcuts will be built into the library react-image-annotate.

@Ownmarc I was wondering what keyboard shortcuts, you'd like to see? If any?

[Ownmarc]

Those from labelimg are great (W for new annotation, A/D for previous/next image, "SPACE" to verify an image (should probably be something else since this tool is web based))

numbers for classes or simply let user assign the key he wants to the class he wants

[puskuruk]

You can look for the pr from here.