Merged PR 175: Implement drag drop

- [x] Implement drag drop to create an element at a specific index
- Add Swap behavrior
- Implement max contraints with simplex
~~- [ ] Implement drag drop to swap two container that flex~~

- Fixes tries number for simplex it can now go up to 2 * number of containers
- Fixes flex calling another flex behavior when not needed (remember that flex behavior is the only behavior that needs to communicate with siblings)
- Fix max width being ignored in input group

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -22,6 +22,7 @@ describe.concurrent('Elements sidebar', () => {
       selectedContainer={undefined}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      addContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -45,6 +46,7 @@ describe.concurrent('Elements sidebar', () => {
       selectedContainer={mainContainer}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      addContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -149,6 +151,7 @@ describe.concurrent('Elements sidebar', () => {
       selectedContainer={mainContainer}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      addContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -208,6 +211,7 @@ describe.concurrent('Elements sidebar', () => {
       selectedContainer={selectedContainer}
       onPropertyChange={() => {}}
       selectContainer={selectContainer}
+      addContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -230,6 +234,7 @@ describe.concurrent('Elements sidebar', () => {
       selectedContainer={selectedContainer}
       onPropertyChange={() => {}}
       selectContainer={selectContainer}
+      addContainer={() => {}}
     />);
 
     expect((propertyId as HTMLInputElement).value === 'main').toBeFalsy();

src/Components/ElementsSidebar/ElementsSidebar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { Properties } from '../ContainerProperties/ContainerProperties';
 import { IContainerModel } from '../../Interfaces/IContainerModel';
-import { GetDepth, MakeIterator } from '../../utils/itertools';
+import { FindContainerById, GetDepth, MakeIterator } from '../../utils/itertools';
 import { ISymbolModel } from '../../Interfaces/ISymbolModel';
 import { PropertyType } from '../../Enums/PropertyType';
 
@@ -18,6 +18,102 @@ interface IElementsSidebarProps {
     type?: PropertyType
   ) => void
   selectContainer: (containerId: string) => void
+  addContainer: (index: number, type: string, parent: string) => void
+}
+
+function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''): void {
+  const bordersClasses = ['border-t-8', 'border-8', 'border-b-8'].filter(className => className !== exception);
+  target.classList.remove(...bordersClasses);
+}
+
+function HandleDragLeave(event: React.DragEvent): void {
+  const target: HTMLButtonElement = event.target as HTMLButtonElement;
+  RemoveBorderClasses(target);
+}
+
+function HandleDragOver(
+  event: React.DragEvent,
+  mainContainer: IContainerModel
+): void {
+  event.preventDefault();
+  const target: HTMLButtonElement = event.target as HTMLButtonElement;
+  const rect = target.getBoundingClientRect();
+  const y = event.clientY - rect.top; // y position within the element.
+
+  if (target.id === mainContainer.properties.id) {
+    target.classList.add('border-8');
+    return;
+  }
+
+  if (y < 12) {
+    RemoveBorderClasses(target, 'border-t-8');
+    target.classList.add('border-t-8');
+  } else if (y < 24) {
+    RemoveBorderClasses(target, 'border-8');
+    target.classList.add('border-8');
+  } else {
+    RemoveBorderClasses(target, 'border-b-8');
+    target.classList.add('border-b-8');
+  }
+}
+
+function HandleOnDrop(
+  event: React.DragEvent,
+  mainContainer: IContainerModel,
+  addContainer: (index: number, type: string, parent: string) => void
+): void {
+  event.preventDefault();
+  const type = event.dataTransfer.getData('type');
+  const target: HTMLButtonElement = event.target as HTMLButtonElement;
+  RemoveBorderClasses(target);
+
+  const targetContainer: IContainerModel | undefined = FindContainerById(
+    mainContainer,
+    target.id
+  );
+
+  if (targetContainer === undefined) {
+    throw new Error('[handleOnDrop] Tried to drop onto a unknown container!');
+  }
+
+  if (targetContainer === mainContainer) {
+    // if the container is the root, only add type as child
+    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);
+    addContainer(
+      index,
+      type,
+      targetContainer.parent.properties.id
+    );
+  } else if (y < 24) {
+    addContainer(
+      targetContainer.children.length,
+      type,
+      targetContainer.properties.id);
+  } else {
+    const index = targetContainer.parent.children.indexOf(targetContainer);
+    addContainer(
+      index + 1,
+      type,
+      targetContainer.parent.properties.id
+    );
+  }
 }
 
 export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
@@ -55,6 +151,9 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
         key={key}
         style={style}
         onClick={() => props.selectContainer(container.properties.id)}
+        onDrop={(event) => HandleOnDrop(event, props.mainContainer, props.addContainer)}
+        onDragOver={(event) => HandleDragOver(event, props.mainContainer)}
+        onDragLeave={(event) => HandleDragLeave(event)}
       >
         {text}
       </button>