Implement revive of json after load + Added parentId

src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import './App.scss';
 import { MainMenu } from './Components/MainMenu/MainMenu';
-import { ContainerModel, IContainerModel } from './Components/SVG/Elements/ContainerModel';
+import { ContainerModel, findContainerById, IContainerModel, MakeIterator } from './Components/SVG/Elements/ContainerModel';
 import Editor, { IEditorState } from './Editor';
 import { AvailableContainer } from './Interfaces/AvailableContainer';
 import { Configuration } from './Interfaces/Configuration';
@@ -47,6 +47,7 @@ export class App extends React.Component<IAppProps> {
         null,
         {
           id: 'main',
+          parentId: 'null',
           x: 0,
           y: 0,
           width: configuration.MainContainer.Width,
@@ -83,6 +84,9 @@ export class App extends React.Component<IAppProps> {
     reader.addEventListener('load', () => {
       const result = reader.result as string;
       const editorState: IEditorState = JSON.parse(result);
+
+      Revive(editorState);
+
       this.setState({
         configuration: editorState.configuration,
         history: editorState.history,
@@ -147,3 +151,32 @@ export async function fetchConfiguration(): Promise<Configuration> {
     xhr.send();
   });
 }
+
+/**
+ * Revive the Editor state
+ * by setting the containers references to their parent
+ * @param editorState Editor state
+ */
+function Revive(editorState: IEditorState): void {
+  const history = editorState.history;
+  for (const state of history) {
+    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) {
+        container.parent = null;
+        continue;
+      }
+      const parent = findContainerById(state.MainContainer, parentId);
+      if (parent === undefined) {
+        continue;
+      }
+      container.parent = parent;
+    }
+  }
+}

src/Components/Properties/Properties.tsx

@@ -43,7 +43,7 @@ export class Properties extends React.Component<IPropertiesProps, IPropertiesSta
   ) => {
     const id = `property-${key}`;
     const type = isNaN(Number(value)) ? 'text' : 'number';
-    const isDisabled = key === 'id'; // hardcoded
+    const isDisabled = key === 'id' || key === 'parentId'; // hardcoded
     groupInput.push(
       <div key={id} className='mt-4'>
         <label className='text-sm font-medium text-slate-200' htmlFor={id}>{key}</label>

src/Components/SVG/Elements/ContainerModel.ts

@@ -78,3 +78,13 @@ export function getAbsolutePosition(container: IContainerModel): [number, number
   }
   return [x, y];
 }
+
+export function findContainerById(root: IContainerModel, id: string): IContainerModel | undefined {
+  const it = MakeIterator(root);
+  for (const container of it) {
+    if (container.properties.id === id) {
+      return container;
+    }
+  }
+  return undefined;
+}

src/Editor.tsx

@@ -208,6 +208,7 @@ class Editor extends React.Component<IEditorProps> {
       parent,
       {
         id: `${type}-${count}`,
+        parentId: parent.properties.id,
         x: 0,
         y: 0,
         width: properties?.Width,

src/Interfaces/Properties.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 
 export default interface Properties extends React.CSSProperties {
   id: string,
+  parentId: string | null,
   x: number,
-  y: number,
+  y: number
 }