Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Remove MainContainer as it is the same as Container

Browse source
This commit is contained in:
Siklos 2022-07-31 23:40:04 +02:00
parent 2a445cfdc2
commit 63d72b883b
4 changed files with 32 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/App.tsx
View file

@ -5,7 +5,6 @@ import { SVGSidebar } from './Components/SVGSidebar/SVGSidebar';
import { AvailableContainer } from './Interfaces/AvailableContainer';
import { Configuration } from './Interfaces/Configuration';
import { Container } from './Components/SVG/Elements/Container';
import { MainContainer } from './Components/SVG/Elements/MainContainer';
import { SVG } from './Components/SVG/SVG';
interface IAppProps {
@ -15,7 +14,7 @@ interface IAppState {
isSidebarOpen: boolean,
isSVGSidebarOpen: boolean,
configuration: Configuration,
MainContainer: MainContainer | null
MainContainer: Container | null
}
class App extends React.Component<IAppProps> {
@ -40,11 +39,18 @@ class App extends React.Component<IAppProps> {
this.setState(prevState => ({
...prevState,
configuration,
MainContainer: new MainContainer(
MainContainer: new Container(
{
id: 'main',
x: 0,
y: 0,
width: configuration.MainContainer.Width,
height: configuration.MainContainer.Height,
children: []
children: [],
style: {
fillOpacity: 0,
stroke: 'black'
} as React.CSSProperties
}
)
}));
@ -88,9 +94,13 @@ class App extends React.Component<IAppProps> {
}
});
const newMainContainer = new MainContainer({
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])
});
@ -109,7 +119,7 @@ class App extends React.Component<IAppProps> {
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 isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
<SVGSidebar MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
<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 }