diff --git a/src/App.tsx b/src/App.tsx index c6d5b13..6245066 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,8 +14,7 @@ interface IAppState { isSidebarOpen: boolean, isSVGSidebarOpen: boolean, configuration: Configuration, - MainContainer: Container | null, - SelectedContainer: Container | null + MainContainer: Container | null } class App extends React.Component { @@ -31,33 +30,29 @@ class App extends React.Component { AvailableSymbols: [], MainContainer: {} as AvailableContainer }, - MainContainer: null, - SelectedContainer: null + MainContainer: 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 + MainContainer: new Container( + { + id: 'main', + x: 0, + y: 0, + width: configuration.MainContainer.Width, + height: configuration.MainContainer.Height, + children: [], + style: { + fillOpacity: 0, + stroke: 'black' + } as React.CSSProperties + } + ) })); }); } @@ -74,18 +69,7 @@ class App extends React.Component { } 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; @@ -97,16 +81,12 @@ class App extends React.Component { 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, + id: this.state.MainContainer.props.children.length.toString(), + x: 0 + properties?.Width * this.state.MainContainer.props.children.length, y: 0, width: properties?.Width, - height: parent.props.height, + height: this.state.configuration.MainContainer.Height, children: [], style: properties.Style, userData: { @@ -114,9 +94,15 @@ class App extends React.Component { } }); - parent.props.children.push(container); - - const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props)); + const newMainContainer = new Container({ + id: this.state.MainContainer.props.id, + x: this.state.MainContainer.props.x, + y: this.state.MainContainer.props.y, + width: this.state.MainContainer.props.width, + height: this.state.MainContainer.props.height, + style: this.state.MainContainer.props.style, + children: this.state.MainContainer.props.children.concat([container]) + }); this.setState({ MainContainer: newMainContainer @@ -133,12 +119,7 @@ class App extends React.Component { buttonOnClick={(type: string) => this.AddContainer(type)} /> - this.ToggleSVGSidebar()} - selectContainer={(container: Container) => this.SelectContainer(container)} - /> + this.ToggleSVGSidebar()}/> { this.state.MainContainer } diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 728a954..86f69cd 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; interface IContainerProps { - // eslint-disable-next-line no-use-before-define - parent: Container | null, id: string, // eslint-disable-next-line no-use-before-define children: Container[], @@ -35,16 +33,4 @@ export class Container extends React.Component { ); } - - public static getDepth(container: Container): number { - let depth = 0; - - let current: Container | null = container.props.parent; - while (current != null) { - depth++; - current = current.props.parent; - } - - return depth; - } } diff --git a/src/Components/SVGSidebar/SVGSidebar.tsx b/src/Components/SVGSidebar/SVGSidebar.tsx index bac4a5a..a40adf8 100644 --- a/src/Components/SVGSidebar/SVGSidebar.tsx +++ b/src/Components/SVGSidebar/SVGSidebar.tsx @@ -4,13 +4,11 @@ import { Container } from '../SVG/Elements/Container'; interface ISVGSidebarProps { MainContainer: Container | null, isOpen: boolean, - onClick: () => void, - selectContainer: (container: Container) => void + onClick: () => void } export class SVGSidebar extends React.Component { public iterateChilds(handleContainer: (container: Container, depth: number) => void): React.ReactNode { - // TODO: fix this by using dfs or sort const root = this.props.MainContainer; if (!root) { return null; @@ -47,7 +45,7 @@ export class SVGSidebar extends React.Component { const key = container.props.id.toString(); const text = '\t\t'.repeat(depth) + key; containerRows.push( -