From cf49ad644a5683e76d1a902ae1c3058db3bc181c Mon Sep 17 00:00:00 2001
From: Siklos <siklos@tuta.io>
Date: Thu, 4 Aug 2022 18:02:27 +0200
Subject: [PATCH] Implement revive of json after load + Added parentId

---
 src/App.tsx                                   | 35 ++++++++++++++++++-
 src/Components/Properties/Properties.tsx      |  2 +-
 src/Components/SVG/Elements/ContainerModel.ts | 10 ++++++
 src/Editor.tsx                                |  1 +
 src/Interfaces/Properties.ts                  |  3 +-
 5 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 97a10d0..3f5541a 100644
--- a/src/App.tsx
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/Components/Properties/Properties.tsx b/src/Components/Properties/Properties.tsx
index 09c156d..e75e86b 100644
--- a/src/Components/Properties/Properties.tsx
+++ b/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>
diff --git a/src/Components/SVG/Elements/ContainerModel.ts b/src/Components/SVG/Elements/ContainerModel.ts
index 4b35082..d66f6c8 100644
--- a/src/Components/SVG/Elements/ContainerModel.ts
+++ b/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;
+}
diff --git a/src/Editor.tsx b/src/Editor.tsx
index 5358df5..c9dc2fa 100644
--- a/src/Editor.tsx
+++ b/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,
diff --git a/src/Interfaces/Properties.ts b/src/Interfaces/Properties.ts
index ce386aa..79f4f47 100644
--- a/src/Interfaces/Properties.ts
+++ b/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
 }