src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -3,8 +3,6 @@ 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
@@ -13,77 +11,9 @@ 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;
@@ -126,7 +56,6 @@ 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 }
@@ -139,17 +68,9 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
         <div className='bg-slate-100 font-bold sidebar-title'>
           Elements
         </div>
-        <div ref={this.elementRef} className='overflow-y-auto overflow-x-hidden text-gray-800 flex-grow'>
+        <div 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>
     );

src/Components/Menu/Menu.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-
-interface IMenuProps {
-  className?: string
-  x: number
-  y: number
-  isOpen: boolean
-  children: React.ReactNode[] | React.ReactNode
-}
-
-export const Menu: React.FC<IMenuProps> = (props) => {
-  const visible = props.isOpen ? 'visible opacity-1' : 'invisible opacity-0';
-  return (
-    <div
-      className={`fixed ${props.className ?? ''} ${visible}`}
-      style={{
-        left: props.x,
-        top: props.y
-      }}>
-      { props.children }
-    </div>
-  );
-};

src/Components/Menu/MenuItem.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-interface IMenuItemProps {
-  className?: string
-  text: string
-  onClick: () => void
-}
-
-export const MenuItem: React.FC<IMenuItemProps> = (props) => {
-  return (
-    <button
-      className={props.className}
-      onClick={() => props.onClick()}>{props.text}
-    </button>
-  );
-};

src/Components/UI/UI.tsx

@@ -15,7 +15,6 @@ interface IUIProps {
   historyCurrentStep: number
   AvailableContainers: AvailableContainer[]
   SelectContainer: (container: ContainerModel) => void
-  DeleteContainer: (containerId: string) => void
   OnPropertyChange: (key: string, value: string) => void
   AddContainer: (type: string) => void
   SaveEditorAsJSON: () => void
@@ -98,7 +97,6 @@ export class UI extends React.PureComponent<IUIProps, IUIState> {
           isHistoryOpen={this.state.isHistoryOpen}
           onPropertyChange={this.props.OnPropertyChange}
           selectContainer={this.props.SelectContainer}
-          deleteContainer={this.props.DeleteContainer}
         />
         <History
           history={this.props.history}

src/Editor.tsx

@@ -91,49 +91,6 @@ class Editor extends React.Component<IEditorProps> {
     });
   }
 
-  public DeleteContainer(containerId: string): void {
-    const history = this.getCurrentHistory();
-    const current = history[this.state.historyCurrentStep];
-
-    if (current.MainContainer === null) {
-      throw new Error('[DeleteContainer] Error: Tried to delete a container without a main container');
-    }
-
-    const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
-    const container = findContainerById(mainContainerClone, containerId);
-
-    if (container === undefined) {
-      throw new Error(`[DeleteContainer] Tried to delete a container that is not present in the main container: ${containerId}`);
-    }
-
-    if (container === mainContainerClone) {
-      // TODO: Implement alert
-      throw new Error('[DeleteContainer] Tried to delete the main container! Deleting the main container is not allowed !');
-    }
-
-    if (container === null || container === undefined) {
-      throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
-    }
-
-    if (container.parent != null) {
-      const index = container.parent.children.indexOf(container);
-      if (index > -1) {
-        container.parent.children.splice(index, 1);
-      }
-    }
-
-    this.setState(
-      {
-        history: history.concat([{
-          SelectedContainer: null,
-          SelectedContainerId: '',
-          MainContainer: mainContainerClone,
-          TypeCounters: Object.assign({}, current.TypeCounters)
-        }]),
-        historyCurrentStep: history.length
-      });
-  }
-
   /**
    * Handled the property change event in the properties form
    * @param key Property name
@@ -329,7 +286,6 @@ class Editor extends React.Component<IEditorProps> {
           historyCurrentStep={this.state.historyCurrentStep}
           AvailableContainers={this.state.configuration.AvailableContainers}
           SelectContainer={(container) => this.SelectContainer(container)}
-          DeleteContainer={(containerId: string) => this.DeleteContainer(containerId)}
           OnPropertyChange={(key, value) => this.OnPropertyChange(key, value)}
           AddContainer={(type) => this.AddContainer(type)}
           SaveEditorAsJSON={() => this.SaveEditorAsJSON()}

src/index.scss

@@ -44,8 +44,4 @@
     text-xs font-bold
     transition-all duration-100 scale-0 origin-left;
   }
-
-  .contextmenu-item {
-    @apply px-2 py-1 hover:bg-slate-300 text-left
-  }
 }

src/utils/itertools.ts

@@ -11,14 +11,14 @@ export function * MakeIterator(root: IContainerModel): Generator<IContainerModel
 
     yield container;
 
-    for (let i = container.children.length - 1; i >= 0; i--) {
+    // if this reverse() gets costly, replace it by a simple for
-      const child = container.children[i];
+    container.children.forEach((child) => {
       if (visited.has(child)) {
         return;
       }
       visited.add(child);
       queue.push(child);
-    }
+    });
   }
 }