Implement deletion + context menu

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -3,6 +3,8 @@ import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
 import { IContainerModel } from '../../Interfaces/ContainerModel';
 import { getDepth, MakeIterator } from '../../utils/itertools';
+import { Menu } from '../Menu/Menu';
+import { MenuItem } from '../Menu/MenuItem';
 
 interface IElementsSidebarProps {
   MainContainer: IContainerModel | null
@@ -11,9 +13,77 @@ interface IElementsSidebarProps {
   SelectedContainer: IContainerModel | null
   onPropertyChange: (key: string, value: string) => void
   selectContainer: (container: IContainerModel) => void
+  deleteContainer: (containerid: string) => void
+}
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface IElementsSidebarState {
+  isContextMenuOpen: boolean
+  contextMenuPosition: Point
+  onClickContainerId: string
 }
 
 export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps> {
+  public state: IElementsSidebarState;
+  public elementRef: React.RefObject<HTMLDivElement>;
+
+  constructor(props: IElementsSidebarProps) {
+    super(props);
+    this.state = {
+      isContextMenuOpen: false,
+      contextMenuPosition: {
+        x: 0,
+        y: 0
+      },
+      onClickContainerId: ''
+    };
+    this.elementRef = React.createRef();
+  }
+
+  componentDidMount(): void {
+    this.elementRef.current?.addEventListener('contextmenu', (event) => this.handleRightClick(event));
+    window.addEventListener('click', (event) => this.handleLeftClick(event));
+  }
+
+  componentWillUnmount(): void {
+    this.elementRef.current?.removeEventListener('contextmenu', (event) => this.handleRightClick(event));
+    window.removeEventListener('click', (event) => this.handleLeftClick(event));
+  }
+
+  public handleRightClick(event: MouseEvent): void {
+    event.preventDefault();
+
+    if (!(event.target instanceof HTMLButtonElement)) {
+      this.setState({
+        isContextMenuOpen: false,
+        onClickContainerId: ''
+      });
+      return;
+    }
+
+    const contextMenuPosition: Point = { x: event.pageX, y: event.pageY };
+    this.setState({
+      isContextMenuOpen: true,
+      contextMenuPosition,
+      onClickContainerId: event.target.id
+    });
+  }
+
+  public handleLeftClick(event: MouseEvent): void {
+    if (!this.state.isContextMenuOpen) {
+      return;
+    }
+
+    this.setState({
+      isContextMenuOpen: false,
+      onClickContainerId: ''
+    });
+  }
+
   public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
     if (this.props.MainContainer == null) {
       return null;
@@ -56,6 +126,7 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
             `w-full elements-sidebar-row whitespace-pre
           text-left text-sm font-medium transition-all ${selectedClass}`
           }
+          id={key}
           key={key}
           onClick={() => this.props.selectContainer(container)}>
           { text }
@@ -68,9 +139,17 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
         <div className='bg-slate-100 font-bold sidebar-title'>
           Elements
         </div>
-        <div className='overflow-y-auto overflow-x-hidden text-gray-800 flex-grow'>
+        <div ref={this.elementRef} className='overflow-y-auto overflow-x-hidden text-gray-800 flex-grow'>
           { containerRows }
         </div>
+        <Menu
+          className='transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl'
+          x={this.state.contextMenuPosition.x}
+          y={this.state.contextMenuPosition.y}
+          isOpen={this.state.isContextMenuOpen}
+        >
+          <MenuItem className='contextmenu-item' text='Delete' onClick={() => this.props.deleteContainer(this.state.onClickContainerId)} />
+        </Menu>
         <Properties properties={this.props.SelectedContainer?.properties} onChange={this.props.onPropertyChange}></Properties>
       </div>
     );