Action Mapping

Override mapping of keys and mouse events to actions

Angular Tree Component comes with a default mapping of mouse events and key events to actions. For example - click on the node selects / deselects it, click on the expander expands / collapses it, pressing space or enter will toggle the node selection (same as click), etc.

Using the actionMapping option, you can override how the tree reacts to mouse and key events, by providing a custom mapping.

import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular2-tree-component';

const actionMapping:IActionMapping = {
  mouse: {
    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI
  },
  keys: {
    [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`)
  }  
}

actionMapping (IActionMapping)

The actionMapping attribute needs to implement the IActionMapping interface, which is an object that maps predefined mouse events, and key codes, to callbacks.

The callback (IActionHandler)

The callback always receives three parameters: TreeModel, TreeNode, and $event.

TREE_ACTIONS

Notice the TREE_ACTIONS object. It holds predefined callbacks that do common actions.
The available attributes are:

TOGGLE_SELECTED
TOGGLE_SELECTED_MULTI
SELECT
DESELECT
FOCUS
TOGGLE_EXPANDED
EXPAND
COLLAPSE
DRILL_DOWN
DRILL_UP
NEXT_NODE
PREVIOUS_NODE

Mouse events

In mouse events, the TreeNode parameter of the callback is the node that the event was activated on (e.g. clicked on).

The possible attributes for actionMapping.mouse are:

click
dblClick
expanderClick
dragStart
drag
dragOver
dragEnd
contextMenu (right click)

For example:

import { TREE_ACTIONS, IActionMapping } from 'angular2-tree-component';

actionMapping:IActionMapping = {
  mouse: {
    dblClick: (tree, node, $event) => // Open a modal with node content,
    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI,
  }
}

Shift+Click (Alt / Ctrl)

If you want to perform actions based on modifier keys, use $event.shiftKey, $event.ctrlKey etc., provided on the third callback argument - $event.

Keyboard events

In keyboard events, the TreeNode parameter of the callback is the currently focused node. In case no node is focused, this will be null.

The attributes for actionMapping.keys are integers which represent the key code (e.g. 32 for Space)

angular2-tree-component exposes a KEYS constant with predefined common key codes:

KEYS = {    
  LEFT: 37,
  UP: 38,
  RIGHT: 39,
  DOWN: 40,
  ENTER: 13,
  SPACE: 32
}

So you can use those, or pass any keycode you'd like.

For example:

import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';

actionMapping:IActionMapping = {
  keys: {
    127: (tree, node, $event) => // do something to delete the node,
    [KEYS.ENTER]: TREE_ACTIONS.EXPAND
  }
}

Default mapping

Here is the default mapping that ships with angular2-tree-component:

{
  mouse: {
    click: TREE_ACTIONS.TOGGLE_SELECTED,
    dblClick: null,
    contextMenu: null,
    expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,
    drop: TREE_ACTIONS.MOVE_NODE
  },
  keys: {
    [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,
    [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,
    [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,
    [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,
    [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_SELECTED,
    [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_SELECTED
  }
}

Context menu

In case you want to open your own context menu, you must first run $event.preventDefault() within the callback.