src/App.tsx

@@ -9,7 +9,6 @@ import { Configuration } from './Interfaces/Configuration';
 export interface IHistoryState {
   MainContainer: IContainerModel | null,
   SelectedContainer: IContainerModel | null,
-  SelectedContainerId: string,
   TypeCounters: Record<string, number>
 }
 
@@ -158,11 +157,12 @@ export async function fetchConfiguration(): Promise<Configuration> {
 function Revive(editorState: IEditorState): void {
   const history = editorState.history;
   for (const state of history) {
-    if (state.MainContainer === null || state.MainContainer === undefined) {
+    if (state.MainContainer === null) {
       continue;
     }
 
     const it = MakeIterator(state.MainContainer);
+    state.SelectedContainer = state.MainContainer;
     for (const container of it) {
       const parentId = container.properties.parentId;
       if (parentId === null) {
@@ -175,12 +175,5 @@ function Revive(editorState: IEditorState): void {
       }
       container.parent = parent;
     }
-
-    const selected = findContainerById(state.MainContainer, state.SelectedContainerId);
-    if (selected === undefined) {
-      state.SelectedContainer = null;
-      continue;
-    }
-    state.SelectedContainer = selected;
   }
-}
+}

src/Editor.tsx

@@ -6,7 +6,7 @@ import { ElementsSidebar } from './Components/ElementsSidebar/ElementsSidebar';
 import { Configuration } from './Interfaces/Configuration';
 import { SVG } from './Components/SVG/SVG';
 import { History } from './Components/History/History';
-import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
 
@@ -18,7 +18,7 @@ interface IEditorProps {
 
 export interface IEditorState {
   isSidebarOpen: boolean,
-  isElementsSidebarOpen: boolean,
+  isSVGSidebarOpen: boolean,
   isHistoryOpen: boolean,
   history: Array<IHistoryState>,
   historyCurrentStep: number,
@@ -34,7 +34,7 @@ class Editor extends React.Component<IEditorProps> {
     super(props);
     this.state = {
       isSidebarOpen: true,
-      isElementsSidebarOpen: false,
+      isSVGSidebarOpen: false,
       isHistoryOpen: false,
       configuration: Object.assign({}, props.configuration),
       history: [...props.history],
@@ -59,7 +59,7 @@ class Editor extends React.Component<IEditorProps> {
    */
   public ToggleElementsSidebar() {
     this.setState({
-      isElementsSidebarOpen: !this.state.isElementsSidebarOpen
+      isSVGSidebarOpen: !this.state.isSVGSidebarOpen
     } as IEditorState);
   }
 
@@ -79,24 +79,11 @@ class Editor extends React.Component<IEditorProps> {
   public SelectContainer(container: ContainerModel) {
     const history = this.getCurrentHistory();
     const current = history[history.length - 1];
-
-    if (current.MainContainer === null) {
-      throw new Error('[SelectContainer] Tried to select a container while there is no main container!');
-    }
-
-    const mainContainerClone = structuredClone(current.MainContainer);
-    const SelectedContainer = findContainerById(mainContainerClone, container.properties.id);
-
-    if (SelectedContainer === undefined) {
-      throw new Error('[SelectContainer] Cannot find container among children of main container!');
-    }
-
     this.setState({
       history: history.concat([{
-        MainContainer: mainContainerClone,
+        MainContainer: current.MainContainer,
-        TypeCounters: Object.assign({}, current.TypeCounters),
+        TypeCounters: current.TypeCounters,
-        SelectedContainer,
+        SelectedContainer: container
-        SelectedContainerId: SelectedContainer.properties.id
       }]),
       historyCurrentStep: history.length
     } as IEditorState);
@@ -123,25 +110,30 @@ class Editor extends React.Component<IEditorProps> {
     }
 
     if (parent === null) {
-      const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer);
+      const clone: IContainerModel = structuredClone(current.SelectedContainer);
-      (selectedContainerClone.properties as any)[key] = value;
+      (clone.properties as any)[key] = value;
       this.setState({
         history: history.concat([{
-          SelectedContainer: selectedContainerClone,
+          SelectedContainer: clone,
-          SelectedContainerId: selectedContainerClone.properties.id,
+          MainContainer: clone,
-          MainContainer: selectedContainerClone,
+          TypeCounters: current.TypeCounters
-          TypeCounters: Object.assign({}, current.TypeCounters)
         }]),
         historyCurrentStep: history.length
       } as IEditorState);
       return;
     }
 
-    const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
+    const clone: IContainerModel = structuredClone(current.MainContainer);
-    const it = MakeIterator(mainContainerClone);
+    const it = MakeIterator(clone);
-    const container: ContainerModel | undefined = findContainerById(current.MainContainer, current.SelectedContainer.properties.id);
+    let container: ContainerModel | null = null;
+    for (const child of it) {
+      if (child.properties.id === current.SelectedContainer.properties.id) {
+        container = child as ContainerModel;
+        break;
+      }
+    }
 
-    if (container === null || container === undefined) {
+    if (container === null) {
       throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
     }
 
@@ -151,9 +143,8 @@ class Editor extends React.Component<IEditorProps> {
       {
         history: history.concat([{
           SelectedContainer: container,
-          SelectedContainerId: container.properties.id,
+          MainContainer: clone,
-          MainContainer: mainContainerClone,
+          TypeCounters: current.TypeCounters
-          TypeCounters: Object.assign({}, current.TypeCounters)
         }]),
         historyCurrentStep: history.length
       } as IEditorState);
@@ -239,8 +230,7 @@ class Editor extends React.Component<IEditorProps> {
       history: history.concat([{
         MainContainer: clone,
         TypeCounters: newCounters,
-        SelectedContainer: parent,
+        SelectedContainer: parent
-        SelectedContainerId: parent.properties.id
       }]),
       historyCurrentStep: history.length
     } as IEditorState);
@@ -269,13 +259,6 @@ class Editor extends React.Component<IEditorProps> {
    */
   render() {
     const current = this.getCurrentHistoryState();
-    let buttonRightOffsetClasses = 'right-12';
-    if (this.state.isElementsSidebarOpen || this.state.isHistoryOpen) {
-      buttonRightOffsetClasses = 'right-72';
-    }
-    if (this.state.isHistoryOpen && this.state.isElementsSidebarOpen) {
-      buttonRightOffsetClasses = 'right-[544px]';
-    }
     return (
       <div className="App font-sans h-full">
         <Sidebar
@@ -294,7 +277,7 @@ class Editor extends React.Component<IEditorProps> {
         <ElementsSidebar
           MainContainer={current.MainContainer}
           SelectedContainer={current.SelectedContainer}
-          isOpen={this.state.isElementsSidebarOpen}
+          isOpen={this.state.isSVGSidebarOpen}
           isHistoryOpen={this.state.isHistoryOpen}
           onClick={() => this.ToggleElementsSidebar()}
           onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)}
@@ -324,7 +307,7 @@ class Editor extends React.Component<IEditorProps> {
           { current.MainContainer }
         </SVG>
         <button
-          className={`fixed transition-all ${buttonRightOffsetClasses} bottom-10 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800`}
+          className='fixed transition-all right-12 bottom-10 w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'
           title='Export as JSON'
           onClick={() => this.SaveEditor()}
         >
@@ -338,10 +321,6 @@ class Editor extends React.Component<IEditorProps> {
 const getCircularReplacer = () => {
   const seen = new WeakSet();
   return (key: any, value: object | null) => {
-    if (key === 'parent') {
-      return;
-    }
-
     if (typeof value === 'object' && value !== null) {
       if (seen.has(value)) {
         return;