MultiselectJS demo application

This application demonstrates various selection geometries and that they can be changed without distorting the current selection, or the undo and redo stacks. Filtering and various mouse/keyboard selections can be freely intermixed. The key-bindings below are given assuming a Mac computer; Windows users should use the ctrl modifier key instead of command, and alt instead of opt. Key-bindings are only active if focus is on the selection area. Please hit TAB or click on the selectable area to change focus.

Selection Geometries
Rectangular: Selects all elements that intersect a rectangle. No keyboard commands.
Row-wise: The anchor and active end specify a range; elements are ordered row-wise. All arrows are operational. The default for right/down is the first element and left/up the last. Dragging or shift-clicking outside of all elements has no impact.
Snake: A drag or shift-click adds a new point to the path; all elements that touch the path are selected. Dragging backwards along the path removes points from the path. A sharp change of direction (close to 180 degrees) initiates erasing. No keyboard commands.
Point-wise: A drag or shift-click adds new point to the path; all elements that touch any of the path's points are selected. No keyboard commands.
Mixed: Rectangular selection when the anchor is outside of all elements and row-wise selection when it is within an element. This corresponds to, say, iPhoto's selection.
Filtering String:
If the given string is a substring of an element, the element is selected. Modifying the string modifies the active set (it behaves like shift-click in this regard). The Commit filter button or any mouse or keyboard operation commits the active set.
(De)select all

Mouse operations

  • click: clear all, set anchor, select anchor
  • command-click: set anchor, set selection mode based on anchor, toggle anchor
  • shift-click: set active end (or extend selection path), select/deselect active set
  • drag: mouse move during a drag is a shift-click

Keyboard operations

  • space: click on cursor
  • command-space: command-click on cursor
  • shift-space: shift-click on cursor
  • arrowdir: move cursor to the direction dir
  • command-arrowdir: command-space, move cursor to the direction dir
  • shift-arrowdir: move cursor to the direction dir, shift-space
  • opt-z: undo
  • shift-opt-z: redo