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

Refactor AddContainer with AddContainerToSelectedContainer in order to use AddContainer with others containers

Browse source
This commit is contained in:
Siklos 2022-08-09 11:04:10 +02:00
parent f1e2326073
commit 884b38dc96
1 changed files with 23 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/Editor.tsx
View file

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