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

Implement add on selected container

Browse source
This commit is contained in:
Siklos 2022-08-01 11:02:44 +02:00
parent 092b156cc0
commit 893b525d45
3 changed files with 35 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/App.tsx
View file

@ -74,6 +74,12 @@ class App extends React.Component<IAppProps> {
} 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) {
@ -91,13 +97,16 @@ class App extends React.Component<IAppProps> {
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: this.state.SelectedContainer,
id: this.state.SelectedContainer.props.children.length.toString(),
parent,
id: `${depth}-${parent.props.children.length.toString()}`,
x: 0,
y: 0,
width: properties?.Width,
height: this.state.configuration.MainContainer.Height,
height: parent.props.height,
children: [],
style: properties.Style,
userData: {
@ -105,7 +114,7 @@ class App extends React.Component<IAppProps> {
}
});
this.state.SelectedContainer.props.children.push(container);
parent.props.children.push(container);
const newMainContainer = new Container(Object.assign({}, this.state.MainContainer.props));
@ -124,7 +133,12 @@ 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 MainContainer={this.state.MainContainer} isOpen={this.state.isSVGSidebarOpen} onClick={() => this.ToggleSVGSidebar()}/>
<SVGSidebar
MainContainer={this.state.MainContainer}
isOpen={this.state.isSVGSidebarOpen}
onClick={() => this.ToggleSVGSidebar()}
selectContainer={(container: Container) => this.SelectContainer(container)}
/>
<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 }