feat(menu): add context menu for page elements

fixes #111
meetalva · Jan 20, 2018 · a8cd86e · a8cd86e
1 parent 5652072
commit a8cd86e
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 4 deletions.
diff --git a/src/component/container/element_list.tsx b/src/component/container/element_list.tsx
@@ -1,3 +1,4 @@
+import { elementMenu } from '../../electron/context-menus';
 import { ElementWrapper } from './element_wrapper';
 import { ListItemProps } from '../../lsg/patterns/list';
 import { createMenu } from '../../electron/menu';
@@ -45,6 +46,7 @@ export class ElementList extends React.Component<ElementListProps> {
 				title={item.value}
 				key={key}
 				handleClick={item.onClick}
+				handleContextMenu={item.onContextMenu}
 				active={item.active}
 				handleDragStart={item.handleDragStart}
 				handleDragDropForChild={item.handleDragDropForChild}
@@ -93,6 +95,9 @@ export class ElementList extends React.Component<ElementListProps> {
 			label: key,
 			value: pattern.getName(),
 			onClick: updatePageElement,
+			onContextMenu: () => {
+				elementMenu(this.props.store, element);
+			},
 			handleDragStart: (e: React.DragEvent<HTMLElement>) => {
 				this.props.store.setRearrangeElement(element);
 			},

diff --git a/src/component/container/element_wrapper.tsx b/src/component/container/element_wrapper.tsx
@@ -12,6 +12,7 @@ export interface ElementWrapperProps {
 	open?: boolean;
 	title: string;
 	handleClick?: React.MouseEventHandler<HTMLElement>;
+	handleContextMenu?: React.MouseEventHandler<HTMLElement>;
 	handleDragStart?: React.DragEventHandler<HTMLElement>;
 	handleDragDrop?: React.DragEventHandler<HTMLElement>;
 	handleDragDropForChild?: React.DragEventHandler<HTMLElement>;
@@ -94,7 +95,7 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 	}
 
 	public render(): JSX.Element {
-		const { active, children, handleClick, title } = this.props;
+		const { active, children, handleClick, handleContextMenu, title } = this.props;
 		return (
 			<Element
 				title={title}
@@ -103,6 +104,7 @@ export class ElementWrapper extends React.Component<ElementWrapperProps, Element
 				highlight={this.state.highlight}
 				highlightPlaceholder={this.state.highlightPlaceholder}
 				handleClick={handleClick}
+				handleContextMenu={handleContextMenu}
 				draggable
 				handleIconClick={this.handleIconClick}
 				handleDragStart={this.handleDragStart}

diff --git a/src/electron/context-menus.ts b/src/electron/context-menus.ts
@@ -0,0 +1,58 @@
+import { MenuItemConstructorOptions, remote } from 'electron';
+import { PageElement } from '../store/page/page-element';
+import { Store } from '../store/store';
+const { Menu } = remote;
+
+export function elementMenu(store: Store, element: PageElement): void {
+	const clipboardElement: PageElement | undefined = store.getClipboardElement();
+
+	const template: MenuItemConstructorOptions[] = [
+		{
+			label: 'Cut Element',
+			click: () => {
+				store.setClipboardElement(element);
+				element.remove();
+			}
+		},
+		{
+			label: 'Copy Element',
+			click: () => {
+				store.setClipboardElement(element);
+			}
+		},
+		{
+			label: 'Delete element',
+			click: () => {
+				element.remove();
+			}
+		},
+		{
+			type: 'separator'
+		},
+		{
+			label: 'Paste element below',
+			enabled: Boolean(clipboardElement),
+			click: () => {
+				const newPageElement = clipboardElement && clipboardElement.clone();
+
+				if (newPageElement) {
+					element.addSibling(newPageElement);
+				}
+			}
+		},
+		{
+			label: 'Paste element inside',
+			enabled: Boolean(clipboardElement),
+			click: () => {
+				const newPageElement = clipboardElement && clipboardElement.clone();
+
+				if (newPageElement) {
+					element.addChild(newPageElement);
+				}
+			}
+		}
+	];
+
+	const menu = Menu.buildFromTemplate(template);
+	menu.popup();
+}
diff --git a/src/lsg/patterns/element/index.tsx b/src/lsg/patterns/element/index.tsx
@@ -13,6 +13,7 @@ export interface ElementProps {
 
 	draggable?: boolean;
 	handleClick?: React.MouseEventHandler<HTMLElement>;
+	handleContextMenu?: React.MouseEventHandler<HTMLElement>;
 	handleIconClick?: React.MouseEventHandler<SVGSVGElement>;
 	handleDragStart?: React.DragEventHandler<HTMLElement>;
 	handleDragEnter?: React.DragEventHandler<HTMLElement>;
@@ -142,6 +143,7 @@ const Element: React.StatelessComponent<ElementProps> = props => {
 		highlight,
 		draggable,
 		handleClick,
+		handleContextMenu,
 		handleIconClick,
 		handleDragStart,
 		handleDragEnter,
@@ -176,6 +178,7 @@ const Element: React.StatelessComponent<ElementProps> = props => {
 				active={active}
 				highlight={highlight}
 				onClick={handleClick}
+				onContextMenu={handleContextMenu}
 			>
 				{children && (
 					<StyledIcon

diff --git a/src/lsg/patterns/list/index.tsx b/src/lsg/patterns/list/index.tsx
@@ -14,6 +14,7 @@ export interface ListItemProps {
 	value: string;
 
 	onClick?: React.MouseEventHandler<HTMLElement>;
+	onContextMenu?: React.MouseEventHandler<HTMLElement>;
 	handleDragStart?: React.DragEventHandler<HTMLElement>;
 	handleDragDrop?: React.DragEventHandler<HTMLElement>;
 	handleDragDropForChild?: React.DragEventHandler<HTMLElement>;
@@ -45,13 +46,14 @@ const StyledUl = styled.ul`
 const StyledLi = styled.li`
 	line-height: 25px;
 	list-style: none;
-	${(props: StyledListItemProps) => (props.onClick ? 'cursor: pointer;' : '')}
-	${(props: StyledListItemProps) => (props.active ? 'background: #def' : '')}
+	${(props: StyledListItemProps) => (props.onClick ? 'cursor: pointer;' : '')} ${(
+			props: StyledListItemProps
+		) => (props.active ? 'background: #def' : '')};
 `;
 
 const StyledLabel = styled.span`
 	color: ${colors.black.toString()};
-	padding-right 4px;
+	padding-right: 4px;
 `;
 
 const StyledValue = styled.span`