Implement basic drag-drop

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { motion } from 'framer-motion';
 import { Properties } from '../Properties/Properties';
 import { IContainerModel } from '../../Interfaces/ContainerModel';
-import { getDepth, MakeIterator } from '../../utils/itertools';
+import { findContainerById, getDepth, MakeIterator } from '../../utils/itertools';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
 
@@ -12,8 +12,9 @@ interface IElementsSidebarProps {
   isHistoryOpen: boolean
   SelectedContainer: IContainerModel | null
   onPropertyChange: (key: string, value: string) => void
-  selectContainer: (container: IContainerModel) => void
-  deleteContainer: (containerid: string) => void
+  SelectContainer: (container: IContainerModel) => void
+  DeleteContainer: (containerid: string) => void
+  AddContainer: (index: number, type: string, parent: string) => void
 }
 
 interface Point {
@@ -84,6 +85,68 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
     });
   }
 
+  public handleDragOver(event: React.DragEvent): void {
+    event.preventDefault();
+  }
+
+  public handleOnDrop(event: React.DragEvent): void {
+    event.preventDefault();
+    const type = event.dataTransfer.getData('type');
+    const target: HTMLButtonElement = event.target as HTMLButtonElement;
+
+    if (this.props.MainContainer === null) {
+      throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!');
+    }
+
+    const targetContainer: IContainerModel | undefined = findContainerById(
+      this.props.MainContainer,
+      target.id
+    );
+
+    if (targetContainer === undefined) {
+      throw new Error('[handleOnDrop] Tried to drop onto a unknown container!');
+    }
+
+    if (targetContainer === this.props.MainContainer) {
+      // if the container is the root, only add type as child
+      this.props.AddContainer(
+        targetContainer.children.length,
+        type,
+        targetContainer.properties.id);
+      return;
+    }
+
+    if (targetContainer.parent === null ||
+      targetContainer.parent === undefined) {
+      throw new Error('[handleDrop] Tried to drop into a child container without a parent!');
+    }
+
+    const rect = target.getBoundingClientRect();
+    const y = event.clientY - rect.top; // y position within the element.
+
+    // locate the hitboxes
+    if (y < 12) {
+      const index = targetContainer.parent.children.indexOf(targetContainer);
+      this.props.AddContainer(
+        index,
+        type,
+        targetContainer.parent.properties.id
+      );
+    } else if (y < 24) {
+      this.props.AddContainer(
+        targetContainer.children.length,
+        type,
+        targetContainer.properties.id);
+    } else {
+      const index = targetContainer.parent.children.indexOf(targetContainer);
+      this.props.AddContainer(
+        index + 1,
+        type,
+        targetContainer.parent.properties.id
+      );
+    }
+  }
+
   public iterateChilds(handleContainer: (container: IContainerModel) => void): React.ReactNode {
     if (this.props.MainContainer == null) {
       return null;
@@ -128,7 +191,9 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
           }
           id={key}
           key={key}
-          onClick={() => this.props.selectContainer(container)}>
+          onDrop={(event) => this.handleOnDrop(event)}
+          onDragOver={(event) => this.handleDragOver(event)}
+          onClick={() => this.props.SelectContainer(container)}>
           { text }
         </motion.button>
       );
@@ -148,7 +213,7 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
           y={this.state.contextMenuPosition.y}
           isOpen={this.state.isContextMenuOpen}
         >
-          <MenuItem className='contextmenu-item' text='Delete' onClick={() => this.props.deleteContainer(this.state.onClickContainerId)} />
+          <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>