Skip to content

Cell selection, navigation, and operations

Jonathan Eiten edited this page Jan 9, 2017 · 1 revision

Definitions

Selection means defining one or more of:

  • Cell(s)
  • Column(s)
  • Row(s)

Navigation means:

  • Redefine selection
  • Modify existing selection

Selection operations include:

  • Programmatic operations to obtain the selection cell/column/row coordinates or data
  • User actions through the UI to copy the selected data
  • Custom actions

Selection styling

All selections are rendered with distinctive style:

  • Selection font (weight, style, font name, and size) (defaults to bold)
  • Selection foreground (_i.e., font) color (defaults to medium blue)
  • Selection background color (defaults to translucent light blue)

In addition cell selections specifically are framed with additional style:

  • Selection border color (defaults to dark grey)
  • Selection background color (defaults to transparent)

Cell selection

Cell selection includes either of:

  • Select a single cell
  • Select a single rectangular region of cells

Cell navigation includes:

  • Move the current selection to an adjacent cell
  • Grow/shrink the current selection region to include/exclude an adjacent cell

User selection

Single cell selection/deselection

The user selects a cell by clicking the mouse while hovering over the cell. This action clears the current column and cell selections (if any) before selecting the cell under the mouse pointer.

The user deselects a single selected cell by CTRL + clicking it.

Cell region selection/deselection

The user selects a single rectangular cell region by:

  1. Clicking one corner of the proposed region
  2. Either of:
    • Dragging to the diagonally opposite corner
    • SHIFT + clicking the diagonally opposite corner

The user can deselect a cell region by:

  1. Clicking an arbitrary cell. This redefines the selection to a single cell.
  2. Deselecting the single cell as described above by CTRL + clicking it.

NOTE: If the two clicks on the same cell occur too quickly, user will effect a double click (which opens the cell's editor). (Double-click speed can be tweaked using the doubleClickDelay grid property.)

Programmatic cell selection

[section to be completed]

Cell navigation

Cell navigation is purely a UI action, allowing the user to move the cell selection around using the keyboard.

Hypergrid defines keyboard navigation as follows:

  • Hard nav keys
  • Soft nav keys

Hard nav keys

Hypergrid is hard-coded to the four arrow keys.

Soft nav keys

In addition to the four built-in keys, Hypergrid respects the navKeyMap grid property, which is a dictionary of additional keyboard characters mapped back to those four arrow keys.

Developer can redefine navKeyMap. The default value is:

navKeyMap: {
    RETURN: 'DOWN',
    RETURNSHIFT: 'UP',
    TAB: 'RIGHT',
    TABSHIFT: 'LEFT'
},

Explanation

All keyboard characters are mapped by Hypergrid to character names. Visible characters are mapped to themselves.

Invisible ("non-printing") characters are mapped to descriptive names with "SHIFT" typically appended when the SHIFT key was down.

Examples:

  • a is mapped to 'a'
  • A is mapped to 'A'
  • The four arrow keys are mapped to 'UP' or 'UPSHIFT', 'DOWN' or 'DOWNSHIFT', 'LEFT' or 'LEFTSHIFT', and 'RIGHT' or 'RIGHTSHIFT'.
  • The RETURN (aka ENTER) key is mapped to 'RETURN' (or 'RETURNSHIFT').
  • Et cetera.

So if navKeyMap is defined as above, when the user presses the RETURN key, the built-in down-arrow action occurs (see below).

Notes:

  1. The meta keys (SHIFT, CTRL, and ALT) are mapped as (and can be detected as) regular keypresses (e.g, 'CTRL' and 'CTRLSHIFT') even without also pressing some other key.
  2. Multiple navKeyMap mappings can be defined to point to the same arrow key.
  3. Visible characters can be used as navigation characters only when the editOnKeyDown grid property is clear (i.e., falsy).

Column selections & navigation

Column selections include:

  • A single column
  • A contiguous group of columns
  • An arbitrary set of non-contiguous columns

User column selection

NOTE: Column headers are required in order for users to take advantage of the built-in column selection through the UI.

Single column selection/deselection

The user selects a column by clicking the mouse while hovering over the column header. This action clears the current row and cell selections (if any) before selecting the cell under the mouse pointer.

The user deselects a single selected column by clicking over the column header again. That is, clicking a column header toggles column selection.

Contiguous column group selection

The user selects a contiguous group of columns by:

  1. Clicking the first column of the proposed group
  2. Then either of:
    • Dragging to the last column
    • SHIFT + clicking the last column

Non-contiguous column selection

The user selects additional arbitrary column(s) by CTRL + clicking over the column header.

Non-contiguous column group selection

The user selects additional column groups by:

  1. CTRL + clicking the first column of the proposed additional group
  2. Dragging to the last column

Deselecting arbitrary columns

The user can deselect an arbitrary selected column by CTRL + clicking over the column header.

Programmatic column selection

[section to be completed]

Row selections & navigation

Row selections include:

  • A single row
  • A contiguous group of rows
  • An arbitrary set of non-contiguous rows

User row selection

[section to be completed]

Programmatic row selection

[section to be completed]

Operating on a selection

Once a selection is defined, the following operations on the selection are available:

  • Programmatic operations
    • Determine the cells, columns, and/or rows that comprise the selection
    • Extract the data in the selection
    • Copy the selection to the clipboard
  • User interface actions
    • Copy the selection to the clipboard

[section to be completed]

Clone this wiki locally