diff --git a/src/Editor.tsx b/src/Editor.tsx index 336a592..f332bdf 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -195,7 +195,7 @@ class Editor extends React.Component { * @param type The type of container * @returns void */ - public AddContainer(type: string): void { + public AddContainerToSelectedContainer(type: string): void { const history = this.getCurrentHistory(); const current = history[history.length - 1]; @@ -204,13 +204,22 @@ class Editor extends React.Component { return; } + const parent = current.SelectedContainer; + this.AddContainer(type, parent.properties.id); + } + + public AddContainer(type: string, parentId: string): void { + const history = this.getCurrentHistory(); + const current = history[history.length - 1]; + if (current.MainContainer === null || current.MainContainer === undefined) { return; } // Get the preset properties from the API - const properties = this.props.configuration.AvailableContainers.find(option => option.Type === type); + const properties = this.props.configuration.AvailableContainers + .find(option => option.Type === type); if (properties === undefined) { throw new Error(`[AddContainer] Object type not found. Found: ${type}`); @@ -230,35 +239,30 @@ class Editor extends React.Component { const clone: IContainerModel = structuredClone(current.MainContainer); // Find the parent - const it = MakeIterator(clone); - let parent: ContainerModel | null = null; - for (const child of it) { - if (child.properties.id === current.SelectedContainer.properties.id) { - parent = child as ContainerModel; - break; - } - } + const parentClone: IContainerModel | undefined = findContainerById( + clone, parentId + ); - if (parent === null) { + if (parentClone === null || parentClone === undefined) { throw new Error('[OnPropertyChange] Container model was not found among children of the main container!'); } let x = 0; - const lastChild: IContainerModel | undefined = parent.children.at(-1); + const lastChild: IContainerModel | undefined = parentClone.children.at(-1); if (lastChild !== undefined) { x = lastChild.properties.x + Number(lastChild.properties.width); } // Create the container const newContainer = new ContainerModel( - parent, + parentClone, { id: `${type}-${count}`, - parentId: parent.properties.id, + parentId: parentClone.properties.id, x, y: 0, width: properties?.Width, - height: parent.properties.height, + height: parentClone.properties.height, ...properties.Style }, [], @@ -268,15 +272,15 @@ class Editor extends React.Component { ); // And push it the the parent children - parent.children.push(newContainer); + parentClone.children.push(newContainer); // Update the state this.setState({ history: history.concat([{ MainContainer: clone, TypeCounters: newCounters, - SelectedContainer: parent, - SelectedContainerId: parent.properties.id + SelectedContainer: parentClone, + SelectedContainerId: parentClone.properties.id }]), historyCurrentStep: history.length }); @@ -331,7 +335,7 @@ class Editor extends React.Component { SelectContainer={(container) => this.SelectContainer(container)} DeleteContainer={(containerId: string) => this.DeleteContainer(containerId)} OnPropertyChange={(key, value) => this.OnPropertyChange(key, value)} - AddContainer={(type) => this.AddContainer(type)} + AddContainer={(type) => this.AddContainerToSelectedContainer(type)} SaveEditorAsJSON={() => this.SaveEditorAsJSON()} SaveEditorAsSVG={() => this.SaveEditorAsSVG()} LoadState={(move) => this.LoadState(move)}