Fix json selected container by saving its id

src/App.tsx

@@ -9,6 +9,7 @@ import { Configuration } from './Interfaces/Configuration';
 export interface IHistoryState {
   MainContainer: IContainerModel | null,
   SelectedContainer: IContainerModel | null,
+  SelectedContainerId: string,
   TypeCounters: Record<string, number>
 }
 
@@ -157,12 +158,11 @@ export async function fetchConfiguration(): Promise<Configuration> {
 function Revive(editorState: IEditorState): void {
   const history = editorState.history;
   for (const state of history) {
-    if (state.MainContainer === null) {
+    if (state.MainContainer === null || state.MainContainer === undefined) {
       continue;
     }
 
     const it = MakeIterator(state.MainContainer);
-    state.SelectedContainer = state.MainContainer;
     for (const container of it) {
       const parentId = container.properties.parentId;
       if (parentId === null) {
@@ -175,5 +175,12 @@ 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, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
 import Properties from './Interfaces/Properties';
 import { IHistoryState } from './App';
 
@@ -79,11 +79,24 @@ 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: current.MainContainer,
-        TypeCounters: current.TypeCounters,
-        SelectedContainer: container
+        MainContainer: mainContainerClone,
+        TypeCounters: Object.assign({}, current.TypeCounters),
+        SelectedContainer,
+        SelectedContainerId: SelectedContainer.properties.id
       }]),
       historyCurrentStep: history.length
     } as IEditorState);
@@ -110,30 +123,25 @@ class Editor extends React.Component<IEditorProps> {
     }
 
     if (parent === null) {
-      const clone: IContainerModel = structuredClone(current.SelectedContainer);
-      (clone.properties as any)[key] = value;
+      const selectedContainerClone: IContainerModel = structuredClone(current.SelectedContainer);
+      (selectedContainerClone.properties as any)[key] = value;
       this.setState({
         history: history.concat([{
-          SelectedContainer: clone,
-          MainContainer: clone,
-          TypeCounters: current.TypeCounters
+          SelectedContainer: selectedContainerClone,
+          SelectedContainerId: selectedContainerClone.properties.id,
+          MainContainer: selectedContainerClone,
+          TypeCounters: Object.assign({}, current.TypeCounters)
         }]),
         historyCurrentStep: history.length
       } as IEditorState);
       return;
     }
 
-    const clone: IContainerModel = structuredClone(current.MainContainer);
-    const it = MakeIterator(clone);
-    let container: ContainerModel | null = null;
-    for (const child of it) {
-      if (child.properties.id === current.SelectedContainer.properties.id) {
-        container = child as ContainerModel;
-        break;
-      }
-    }
+    const mainContainerClone: IContainerModel = structuredClone(current.MainContainer);
+    const it = MakeIterator(mainContainerClone);
+    const container: ContainerModel | undefined = findContainerById(current.MainContainer, current.SelectedContainer.properties.id);
 
-    if (container === null) {
+    if (container === null || container === undefined) {
       throw new Error('[OnPropertyChange] Container model was not found among children of the main container!');
     }
 
@@ -143,8 +151,9 @@ class Editor extends React.Component<IEditorProps> {
       {
         history: history.concat([{
           SelectedContainer: container,
-          MainContainer: clone,
-          TypeCounters: current.TypeCounters
+          SelectedContainerId: container.properties.id,
+          MainContainer: mainContainerClone,
+          TypeCounters: Object.assign({}, current.TypeCounters)
         }]),
         historyCurrentStep: history.length
       } as IEditorState);
@@ -230,7 +239,8 @@ 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);