svg-layout-designer-react/src/Components/ElementsSidebar/ElementsSidebar.tsx

import * as React from 'react';
import { FixedSizeList as List } from 'react-window';
import { Properties } from '../ContainerProperties/ContainerProperties';
import { IContainerModel } from '../../Interfaces/IContainerModel';
import { FindContainerById, GetDepth, MakeIterator } from '../../utils/itertools';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { PropertyType } from '../../Enums/PropertyType';

interface IElementsSidebarProps {
  mainContainer: IContainerModel
  symbols: Map<string, ISymbolModel>
  isOpen: boolean
  isHistoryOpen: boolean
  selectedContainer: IContainerModel | undefined
  onPropertyChange: (
    key: string,
    value: string | number | boolean,
    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 {
  // Render
  let isOpenClasses = '-right-64';
  if (props.isOpen) {
    isOpenClasses = props.isHistoryOpen ? 'right-64' : 'right-0';
  }

  const it = MakeIterator(props.mainContainer);
  const containers = [...it];
  function Row({
    index, style
  }: {
    index: number
    style: React.CSSProperties
  }): JSX.Element {
    const container = containers[index];
    const depth: number = GetDepth(container);
    const key = container.properties.id.toString();
    const text = container.properties.displayedText === key
      ? `${'|\t'.repeat(depth)} ${key}`
      : `${'|\t'.repeat(depth)} ${container.properties.displayedText} (${key})`;
    const selectedClass: string = props.selectedContainer !== undefined &&
      props.selectedContainer !== null &&
      props.selectedContainer.properties.id === container.properties.id
      ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
      : 'bg-slate-300/60 hover:bg-slate-300';

    return (
      <button type="button"
        className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
          text-left text-sm font-medium transition-all ${container.properties.type} ${selectedClass}`}
        id={key}
        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>
    );
  }

  return (
    <div
      className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}
    >
      <div className="bg-slate-100 font-bold sidebar-title">Elements</div>
      <div className="h-96 text-gray-800">
        <List
          className="List divide-y divide-black"
          itemCount={containers.length}
          itemSize={35}
          height={384}
          width={256}
        >
          {Row}
        </List>
      </div>
      <Properties
        properties={props.selectedContainer?.properties}
        symbols={props.symbols}
        onChange={props.onPropertyChange} />
    </div>
  );
}