diff --git a/src/App.tsx b/src/App.tsx index 12cf62d..00b0f4a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,8 +4,6 @@ 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'; interface IAppProps { @@ -14,8 +12,7 @@ interface IAppProps { interface IAppState { isSidebarOpen: boolean, isSVGSidebarOpen: boolean, - configuration: Configuration, - MainContainer: MainContainer | null + configuration: Configuration } class App extends React.Component { @@ -30,8 +27,7 @@ class App extends React.Component { AvailableContainers: [], AvailableSymbols: [], MainContainer: {} as AvailableContainer - }, - MainContainer: null + } }; } @@ -39,70 +35,33 @@ class App extends React.Component { fetchConfiguration().then((configuration: Configuration) => { this.setState(prevState => ({ ...prevState, - configuration, - MainContainer: new MainContainer( - { - width: configuration.MainContainer.Width, - height: configuration.MainContainer.Height, - children: [] - } - ) + configuration })); }); } public ToggleSidebar() { - this.setState({ + this.setState(prevState => ({ + ...prevState, isSidebarOpen: !this.state.isSidebarOpen - } as IAppState); + } as IAppState)); } public ToggleSVGSidebar() { - this.setState({ + this.setState(prevState => ({ + ...prevState, isSVGSidebarOpen: !this.state.isSVGSidebarOpen - } as IAppState); - } - - 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 - }); + } as IAppState)); } render() { return (
- this.ToggleSidebar()} - buttonOnClick={(type: string) => this.AddContainer(type)} - /> + this.ToggleSidebar()} /> this.ToggleSVGSidebar()}/> - - { this.state.MainContainer } - +
); } diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx index f8da2b6..8d806a5 100644 --- a/src/Components/Sidebar/Sidebar.tsx +++ b/src/Components/Sidebar/Sidebar.tsx @@ -5,13 +5,12 @@ interface ISidebarProps { componentOptions: AvailableContainer[] isOpen: boolean; onClick: () => void; - buttonOnClick: (type: string) => void; } export default class Sidebar extends React.Component { public render() { const listElements = this.props.componentOptions.map(componentOption => - ); diff --git a/src/SVG/Elements/Container.tsx b/src/SVG/Elements/Container.tsx index 9c4dc9a..71dfa35 100644 --- a/src/SVG/Elements/Container.tsx +++ b/src/SVG/Elements/Container.tsx @@ -7,22 +7,16 @@ interface IContainerProps { y: number, width: number, height: number, - style?: React.CSSProperties, + style: React.CSSProperties, } export class Container extends React.Component { - public static ContainerCount = 0; - - componentWillUnMount() { - } - public render(): React.ReactNode { - Container.ContainerCount++; const containersElements = this.props.children.map(child => child.render()); + return ( { ], value: { viewerWidth: window.innerWidth, - viewerHeight: window.innerHeight + viewerHeight: window.innerHeight, + SVGHeight: this.props.MainContainer.Height, + SVGWidth: this.props.MainContainer.Width } as Value, tool: TOOL_PAN }; @@ -61,12 +65,7 @@ export class SVG extends React.Component { xmlns }; - let children: React.ReactNode | React.ReactNode[] = []; - if (Array.isArray(this.props.children)) { - children = this.props.children.map(child => child.render()); - } else if (this.props.children !== null) { - children = this.props.children.render(); - } + const children: Container[] = []; return ( { tool={this.state.tool} onChangeTool={tool => this.setState({ tool })} > - { children } + + { children } + );