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

Delegate MainContainer to App

Browse source
This commit is contained in:
Siklos 2022-07-31 18:41:34 +02:00
parent 6db63d5a47
commit 70963ce41f
4 changed files with 48 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/App.tsx
View file

@ -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 { MainContainer } from './SVG/Elements/MainContainer';
import { SVG } from './SVG/SVG';
interface IAppProps {
@ -12,7 +13,8 @@ interface IAppProps {
interface IAppState {
isSidebarOpen: boolean,
isSVGSidebarOpen: boolean,
configuration: Configuration
configuration: Configuration,
MainContainer: MainContainer | null
}
class App extends React.Component<IAppProps> {
@ -27,7 +29,8 @@ class App extends React.Component<IAppProps> {
AvailableContainers: [],
AvailableSymbols: [],
MainContainer: {} as AvailableContainer
}
},
MainContainer: null
};
}
@ -35,33 +38,55 @@ class App extends React.Component<IAppProps> {
fetchConfiguration().then((configuration: Configuration) => {
this.setState(prevState => ({
...prevState,
configuration
configuration,
MainContainer: new MainContainer(
{
width: configuration.MainContainer.Width,
height: configuration.MainContainer.Height,
children: []
}
)
}));
});
}
public ToggleSidebar() {
this.setState(prevState => ({
...prevState,
this.setState({
isSidebarOpen: !this.state.isSidebarOpen
} as IAppState));
} as IAppState);
}
public ToggleSVGSidebar() {
this.setState(prevState => ({
...prevState,
this.setState({
isSVGSidebarOpen: !this.state.isSVGSidebarOpen
} as IAppState));
} as IAppState);
}
public AddContainer(type: string) {
// const container = new Container({
// x: 0,
// y: 0,
// width: 300,
// height: this.state.configuration.MainContainer.Height,
// children: []
// });
}
render() {
return (
<div className="App font-sans h-full">
<Sidebar componentOptions={this.state.configuration.AvailableContainers} isOpen={this.state.isSidebarOpen} onClick={() => this.ToggleSidebar()} />
<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 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 MainContainer={this.state.configuration.MainContainer} />
<SVG>
{ this.state.MainContainer }
</SVG>
</div>
);
}