{"_id":"5a2a43a00b68c20026c6c431","category":{"_id":"5a2a43a00b68c20026c6c41e","version":"5a2a43a00b68c20026c6c41d","project":"5707c6875309d117006948d4","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-07-15T07:28:09.870Z","from_sync":false,"order":0,"slug":"getting-started","title":"Basic"},"user":"54d742a80771980d0052f4b5","project":"5707c6875309d117006948d4","parentDoc":null,"version":{"_id":"5a2a43a00b68c20026c6c41d","project":"5707c6875309d117006948d4","__v":1,"createdAt":"2017-12-08T07:47:44.113Z","releaseDate":"2017-12-08T07:47:44.113Z","categories":["5a2a43a00b68c20026c6c41e","5a2a43a00b68c20026c6c41f","5a2a43a00b68c20026c6c420","5a2a43a00b68c20026c6c421"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"6.1.0","version":"6.1.0"},"__v":0,"updates":["5910795bd4a1e81b002eda2b","59634b50b465b9002bc6ec50"],"next":{"pages":[],"description":""},"createdAt":"2016-08-09T22:31:36.723Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":3,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Override key and mouse actions\"\n}\n[/block]\nAngular 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.\n\nUsing the `actionMapping` option, you can override how the tree reacts to mouse and key events, by providing a custom mapping.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';\\n\\nconst actionMapping:IActionMapping = {\\n  mouse: {\\n    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI\\n  },\\n  keys: {\\n    [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`)\\n  }  \\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"actionMapping (IActionMapping)\"\n}\n[/block]\nThe `actionMapping` attribute needs to implement the `IActionMapping` interface, which is an object that maps predefined mouse events, and key codes, to callbacks.\nSee full API Here: [ActionMapping](doc:actionmapping) \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"The callback (IActionHandler)\"\n}\n[/block]\nThe callback always receives three parameters: `TreeModel`, `TreeNode`, and `$event`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"TREE_ACTIONS\"\n}\n[/block]\nNotice the `TREE_ACTIONS` object. It holds predefined callbacks that do common actions.\nThe available attributes are:\n- TOGGLE_SELECTED\n- TOGGLE_SELECTED_MULTI\n- SELECT\n- DESELECT\n- FOCUS\n- TOGGLE_EXPANDED\n- EXPAND\n- COLLAPSE\n- DRILL_DOWN\n- DRILL_UP\n- NEXT_NODE\n- PREVIOUS_NODE\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Mouse events\"\n}\n[/block]\nIn mouse events, the `TreeNode` parameter of the callback is the node that the event was activated on (e.g. clicked on).\n\nThe possible attributes for `actionMapping.mouse` are:\n- click\n- dblClick\n- expanderClick\n- dragStart\n- drag\n- dragOver\n- dragEnd\n- contextMenu (right click)\n\nFor example: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { TREE_ACTIONS, IActionMapping } from 'angular-tree-component';\\n\\nactionMapping:IActionMapping = {\\n  mouse: {\\n    dblClick: (tree, node, $event) => // Open a modal with node content,\\n    click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI,\\n  }\\n}\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Shift+Click (Alt / Ctrl)\"\n}\n[/block]\nIf you want to perform actions based on modifier keys, use `$event.shiftKey`, `$event.ctrlKey` etc., provided on the third callback argument - `$event`.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Keyboard events\"\n}\n[/block]\nIn keyboard events, the `TreeNode` parameter of the callback is the currently focused node. In case no node is focused, this will be null.\n\nThe attributes for `actionMapping.keys` are integers which represent the key code (e.g. 32 for Space)\n\nangular-tree-component exposes a `KEYS` constant with predefined common key codes:\n\n```\nKEYS = {    \n  LEFT: 37,\n  UP: 38,\n  RIGHT: 39,\n  DOWN: 40,\n  ENTER: 13,\n  SPACE: 32\n}\n```\n\nSo you can use those, or pass any keycode you'd like.\n\nFor example: \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';\\n\\nactionMapping:IActionMapping = {\\n  keys: {\\n    127: (tree, node, $event) => // do something to delete the node,\\n    [KEYS.ENTER]: TREE_ACTIONS.EXPAND\\n  }\\n}\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Default mapping\"\n}\n[/block]\nHere is the default mapping that ships with angular-tree-component:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  mouse: {\\n    click: TREE_ACTIONS.TOGGLE_SELECTED,\\n    dblClick: null,\\n    contextMenu: null,\\n    expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,\\n    drop: TREE_ACTIONS.MOVE_NODE\\n  },\\n  keys: {\\n    [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,\\n    [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,\\n    [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,\\n    [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,\\n    [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_SELECTED,\\n    [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_SELECTED\\n  }\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Context menu\"\n}\n[/block]\nIn case you want to open your own context menu, you must first run `$event.preventDefault()` within the callback.","excerpt":"","slug":"action-mapping","type":"basic","title":"Customize actions"}
[block:api-header] { "type": "basic", "title": "Override key and mouse actions" } [/block] 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. [block:code] { "codes": [ { "code": "import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';\n\nconst actionMapping:IActionMapping = {\n mouse: {\n click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI\n },\n keys: {\n [KEYS.ENTER]: (tree, node, $event) => alert(`This is ${node.data.name}`)\n } \n}", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "actionMapping (IActionMapping)" } [/block] The `actionMapping` attribute needs to implement the `IActionMapping` interface, which is an object that maps predefined mouse events, and key codes, to callbacks. See full API Here: [ActionMapping](doc:actionmapping) [block:api-header] { "type": "basic", "title": "The callback (IActionHandler)" } [/block] The callback always receives three parameters: `TreeModel`, `TreeNode`, and `$event`. [block:api-header] { "type": "basic", "title": "TREE_ACTIONS" } [/block] 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 [block:api-header] { "type": "basic", "title": "Mouse events" } [/block] 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: [block:code] { "codes": [ { "code": "import { TREE_ACTIONS, IActionMapping } from 'angular-tree-component';\n\nactionMapping:IActionMapping = {\n mouse: {\n dblClick: (tree, node, $event) => // Open a modal with node content,\n click: TREE_ACTIONS.TOGGLE_SELECTED_MULTI,\n }\n}\n", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Shift+Click (Alt / Ctrl)" } [/block] If you want to perform actions based on modifier keys, use `$event.shiftKey`, `$event.ctrlKey` etc., provided on the third callback argument - `$event`. [block:api-header] { "type": "basic", "title": "Keyboard events" } [/block] 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) angular-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: [block:code] { "codes": [ { "code": "import { TREE_ACTIONS, KEYS, IActionMapping } from 'angular-tree-component';\n\nactionMapping:IActionMapping = {\n keys: {\n 127: (tree, node, $event) => // do something to delete the node,\n [KEYS.ENTER]: TREE_ACTIONS.EXPAND\n }\n}\n", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Default mapping" } [/block] Here is the default mapping that ships with angular-tree-component: [block:code] { "codes": [ { "code": "{\n mouse: {\n click: TREE_ACTIONS.TOGGLE_SELECTED,\n dblClick: null,\n contextMenu: null,\n expanderClick: TREE_ACTIONS.TOGGLE_EXPANDED,\n drop: TREE_ACTIONS.MOVE_NODE\n },\n keys: {\n [KEYS.RIGHT]: TREE_ACTIONS.DRILL_DOWN,\n [KEYS.LEFT]: TREE_ACTIONS.DRILL_UP,\n [KEYS.DOWN]: TREE_ACTIONS.NEXT_NODE,\n [KEYS.UP]: TREE_ACTIONS.PREVIOUS_NODE,\n [KEYS.SPACE]: TREE_ACTIONS.TOGGLE_SELECTED,\n [KEYS.ENTER]: TREE_ACTIONS.TOGGLE_SELECTED\n }\n}", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Context menu" } [/block] In case you want to open your own context menu, you must first run `$event.preventDefault()` within the callback.