feat(component): shortcuts for managing page elements

src/component/app.tsx

@@ -46,6 +46,7 @@ class App extends React.Component<AppProps> {
 	public constructor(props: AppProps) {
 		super(props);
 		this.handleTabNaviagtionClick = this.handleTabNaviagtionClick.bind(this);
+		this.handleMainWindowClick = this.handleMainWindowClick.bind(this);
 	}
 
 	public componentDidMount(): void {
@@ -54,7 +55,10 @@ class App extends React.Component<AppProps> {
 			store.openStyleguide('../designkit');
 			store.openPage('homepage');
 		});
+	}
 
+	private handleMainWindowClick(): void {
+		this.props.store.setElementFocus(false);
 		createMenu(store);
 	}
 
@@ -65,7 +69,7 @@ class App extends React.Component<AppProps> {
 		const title = `${project && project.getName()} > ${page && page.getName()}`;
 
 		return (
-			<Layout directionVertical>
+			<Layout directionVertical handleClick={this.handleMainWindowClick}>
 				<Chrome title={title} />
 				<MainArea>
 					<SideBar directionVertical hasPaddings>

src/component/container/element_list.tsx

@@ -1,5 +1,6 @@
 import { ElementWrapper } from './elementWrapper';
 import { ListItemProps } from '../../lsg/patterns/list';
+import { createMenu } from '../menu';
 import { observer } from 'mobx-react';
 import { Page } from '../../store/page';
 import { PageElement } from '../../store/page/page_element';
@@ -29,6 +30,14 @@ export class ElementList extends React.Component<ElementListProps> {
 		}
 	}
 
+	public componentDidMount(): void {
+		createMenu(this.props.store);
+	}
+
+	public componentWillUpdate(newProps: ElementListProps): void {
+		createMenu(newProps.store);
+	}
+
 	public renderList(item: ListItemProps, key?: number): JSX.Element {
 		return (
 			<ElementWrapper
@@ -76,10 +85,12 @@ export class ElementList extends React.Component<ElementListProps> {
 		const updatePageElement: React.MouseEventHandler<HTMLElement> = event => {
 			if (this.props.store.getSelectedElement() === element) {
 				event.stopPropagation();
-				this.props.store && this.props.store.unsetSelectedElement();
+				this.props.store.unsetSelectedElement();
+				this.props.store.setElementFocus(false);
 			} else {
 				event.stopPropagation();
-				this.props.store && this.props.store.setSelectedElement(element);
+				this.props.store.setSelectedElement(element);
+				this.props.store.setElementFocus(true);
 			}
 		};
 

src/component/menu.ts

@@ -60,36 +60,36 @@ export function createMenu(store: Store): void {
 				{
 					label: '&Cut',
 					accelerator: 'CmdOrCtrl+X',
-					role: 'cut',
 					click: () => {
 						const selectedElement: PageElement | undefined = store.getSelectedElement();
-						if (selectedElement) {
+						if (selectedElement && store.getElementFocus()) {
 							store.setClipboardElement(selectedElement);
 							selectedElement.remove();
 						}
+						Menu.sendActionToFirstResponder('cut:');
 					}
 				},
 				{
 					label: 'C&opy',
 					accelerator: 'CmdOrCtrl+C',
-					role: 'copy',
 					click: () => {
 						const selectedElement: PageElement | undefined = store.getSelectedElement();
-						if (selectedElement) {
+						if (selectedElement && store.getElementFocus()) {
 							store.setClipboardElement(selectedElement);
 						}
+						Menu.sendActionToFirstResponder('copy:');
 					}
 				},
 				{
 					label: '&Paste',
 					accelerator: 'CmdOrCtrl+V',
-					role: 'paste',
 					click: () => {
 						const selectedElement: PageElement | undefined = store.getSelectedElement();
 						const clipboardElement: PageElement | undefined = store.getClipboardElement();
-						if (selectedElement && clipboardElement) {
+						if (selectedElement && clipboardElement && store.getElementFocus()) {
 							selectedElement.addChild(clipboardElement.clone());
 						}
+						Menu.sendActionToFirstResponder('paste:');
 					}
 				},
 				{
@@ -102,12 +102,14 @@ export function createMenu(store: Store): void {
 				},
 				{
 					label: '&Delete',
-					accelerator: 'Del',
-					role: 'delete',
+					accelerator: 'Backspace',
 					click: () => {
+						console.log('delete');
 						const selectedElement: PageElement | undefined = store.getSelectedElement();
 						if (selectedElement) {
 							selectedElement.remove();
+						} else {
+							Menu.sendActionToFirstResponder('Backspace');
 						}
 					}
 				}