diff --git a/src/App.tsx b/src/App.tsx index 47ffcda..12cf62d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ 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 './SVG/Elements/Container'; import { MainContainer } from './SVG/Elements/MainContainer'; import { SVG } from './SVG/SVG'; @@ -62,14 +63,29 @@ class App extends React.Component { } as IAppState); } - public AddContainer(type: string) { - // const container = new Container({ - // x: 0, - // y: 0, - // width: 300, - // height: this.state.configuration.MainContainer.Height, - // children: [] - // }); + public AddContainer(type: string): void { + if (this.state.MainContainer === null || + this.state.MainContainer === undefined) { + return; + } + + const container = new Container({ + x: 0, + y: 0, + width: 300, + height: this.state.configuration.MainContainer.Height, + children: [] + }); + + const newMainContainer = new MainContainer({ + width: this.state.MainContainer.props.width, + height: this.state.MainContainer.props.height, + children: this.state.MainContainer.props.children.concat([container]) + }); + + this.setState({ + MainContainer: newMainContainer + }); } render() { diff --git a/src/SVG/Elements/Container.tsx b/src/SVG/Elements/Container.tsx index ef3008d..9c4dc9a 100644 --- a/src/SVG/Elements/Container.tsx +++ b/src/SVG/Elements/Container.tsx @@ -11,12 +11,18 @@ interface IContainerProps { } export class Container extends React.Component { - public render(): React.ReactNode { - const containersElements = this.props.children.map(child => child.render()); + public static ContainerCount = 0; + componentWillUnMount() { + } + + public render(): React.ReactNode { + Container.ContainerCount++; + const containersElements = this.props.children.map(child => child.render()); return (