svg-layout-designer-react/src/App.tsx

import React from 'react';
import './App.scss';
import Sidebar from './Components/Sidebar/Sidebar';
import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
import { AvailableContainer } from './Interfaces/AvailableContainer';
import { Configuration } from './Interfaces/Configuration';
import { Container } from './Components/SVG/Elements/Container';
import { SVG } from './Components/SVG/SVG';

interface IAppProps {
}

interface IAppState {
  isSidebarOpen: boolean,
  isSVGSidebarOpen: boolean,
  configuration: Configuration,
  MainContainer: Container | null,
  SelectedContainer: Container | null
}

class App extends React.Component<IAppProps> {
  public state: IAppState;

  constructor(props: IAppProps) {
    super(props);
    this.state = {
      isSidebarOpen: true,
      isSVGSidebarOpen: false,
      configuration: {
        AvailableContainers: [],
        AvailableSymbols: [],
        MainContainer: {} as AvailableContainer
      },
      MainContainer: null,
      SelectedContainer: null
    };
  }

  componentDidMount() {
    fetchConfiguration().then((configuration: Configuration) => {
      const MainContainer = new Container(
        {
          parent: null,
          id: 'main',
          x: 0,
          y: 0,
          width: configuration.MainContainer.Width,
          height: configuration.MainContainer.Height,
          children: [],
          style: {
            fillOpacity: 0,
            stroke: 'black'
          } as React.CSSProperties
        }
      );
      this.setState(prevState => ({
        ...prevState,
        configuration,
        MainContainer,
        SelectedContainer: MainContainer
      }));
    });
  }

  public ToggleSidebar() {
    this.setState({
      isSidebarOpen: !this.state.isSidebarOpen
    } as IAppState);
  }

  public ToggleSVGSidebar() {
    this.setState({
      isSVGSidebarOpen: !this.state.isSVGSidebarOpen
    } as IAppState);
  }

  public SelectContainer(container: Container) {
    this.setState({
      SelectedContainer: container
    } as IAppProps);
  }

  public AddContainer(type: string): void {
    if (this.state.SelectedContainer === null ||
      this.state.SelectedContainer === undefined) {
      return;
    }

    if (this.state.MainContainer === null ||
      this.state.MainContainer === undefined) {
      return;
    }

    const properties = this.state.configuration.AvailableContainers.find(option => option.Type === type);

    if (properties === undefined) {
      throw new Error(`[AddContainer] Object type not found. Found: ${type}`);
    }

    const parent = this.state.SelectedContainer;

    const depth: number = Container.getDepth(parent) + 1;
    const container = new Container({
      parent,
      id: `${depth}-${parent.props.children.length.toString()}`,
      x: 0,
      y: 0,
      width: properties?.Width,
      height: parent.props.height,
      children: [],
      style: properties.Style,
      userData: {
        type
      }
    });

    parent.props.children.push(container);

    const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));

    this.setState({
      MainContainer: newMainContainer
    });
  }

  render() {
    return (
      <div className="App font-sans h-full">
        <Sidebar
          componentOptions={this.state.configuration.AvailableContainers}
          isOpen={this.state.isSidebarOpen}
          onClick={() => this.ToggleSidebar()}
          buttonOnClick={(type: string) => this.AddContainer(type)}
        />
        <button className='fixed z-10 top-4 left-4 text-lg bg-blue-200 hover:bg-blue-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSidebar()}>&#9776; Menu</button>
        <SVGSidebar
          MainContainer={this.state.MainContainer}
          isOpen={this.state.isSVGSidebarOpen}
          onClick={() => this.ToggleSVGSidebar()}
          selectContainer={(container: Container) => this.SelectContainer(container)}
        />
        <button className='fixed z-10 top-4 right-12 text-lg bg-slate-200 hover:bg-slate-300 transition-all drop-shadow-md hover:drop-shadow-lg py-2 px-3 rounded-lg' onClick={() => this.ToggleSVGSidebar()}>&#9776; Menu</button>
        <SVG>
          { this.state.MainContainer }
        </SVG>
      </div>
    );
  }
}

async function fetchConfiguration(): Promise<Configuration> {
  const url = `${import.meta.env.VITE_API_URL}`;

  return await fetch(url, {
    method: 'POST'
  })
    .then((response) =>
      response.json()
    ) as Configuration;
}

export default App;