Implement save/load events

public/smartcomponent/svg-layout-designer.ts

@@ -27,67 +27,136 @@
                 .contentDocument;
         }
 
+
+        /// Custom Events ///
+
         public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
-            const component = this.GetEditorComponent();
             const eventType = 'getCurrentHistoryState';
-            component.dispatchEvent(new CustomEvent(eventType));
             this.AddEventListener(callback, eventType);
+            const component = this.GetEditorComponent();
+            component.dispatchEvent(new CustomEvent(eventType));
         }
 
         public GetEditorState(callback: (state: IEditorState) => void) {
-            const component = this.GetEditorComponent();
             const eventType = 'getEditorState';
-            component.dispatchEvent(new CustomEvent(eventType));
             this.AddEventListener(callback, eventType);
+            const component = this.GetEditorComponent();
+            component.dispatchEvent(new CustomEvent(eventType));
+        }
+
+        public SetEditorState(history: SVGLD.IHistoryState[], callback?: (state: IEditorState) => void) {
+            const eventType = 'setEditorState';
+            this.AddEventListener(callback, eventType);
+            const component = this.GetEditorComponent();
+            component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
+        }
+
+        public ReviveEditorState(editorState: SVGLD.IEditorState, callback: (state: IEditorState) => void) {
+            const eventType = 'reviveEditorState';
+            this.AddEventListener(callback, eventType);
+            const component = this.GetEditorComponent();
+            component.dispatchEvent(new CustomEvent(eventType, { detail: editorState }));
+        }
+
+        public ReviveHistory(history: SVGLD.IHistoryState[], callback: (state: IHistoryState[]) => void) {
+            const eventType = 'reviveHistory';
+            this.AddEventListener(callback, eventType);
+            const component = this.GetEditorComponent();
+            component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
         }
 
         public AppendNewHistoryState(historyState: SVGLD.IHistoryState, callback?: (state: IEditorState) => void) {
             const eventType = 'appendNewState';
-            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
             this.AddEventListener(callback, eventType);
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
         }
 
         public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'addContainer';
+            this.AddEventListener(callback, eventType);
             const detail = {
                 index,
                 type,
                 parentId
             }
-            const eventType = 'addContainer';
             this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
-            this.AddEventListener(callback, eventType);
         }
 
         public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'addContainerToSelectedContainer';
+            this.AddEventListener(callback, eventType);
             const detail = {
                 index,
                 type
             }
-            const eventType = 'addContainerToSelectedContainer';
             this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
-            this.AddEventListener(callback, eventType);
         }
 
         public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'appendContainer';
+            this.AddEventListener(callback, eventType);
             const detail = {
                 type,
                 parentId
             }
-            const eventType = 'appendContainer';
             this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
-            this.AddEventListener(callback, eventType);
         }
 
         public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'appendContainerToSelectedContainer';
+            this.AddEventListener(callback, eventType);
             const detail = {
                 type
             }
-            const eventType = 'appendContainerToSelectedContainer';
             this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
-            this.AddEventListener(callback, eventType);
         }
 
-        private AddEventListener(callback: (...args: any[]) => void, eventType: string) {
+        public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'selectContainer';
+            this.AddEventListener(callback, eventType);
+            const detail = {
+                containerId
+            }
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+        }
+
+        public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'deleteContainer';
+            this.AddEventListener(callback, eventType);
+            const detail = {
+                containerId
+            }
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+        }
+
+        public AddSymbol(name: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'addSymbol';
+            this.AddEventListener(callback, eventType);
+            const detail = {
+                name
+            }
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+        }
+
+        public SelectSymbol(symbolId, callback?: (state: IEditorState) => void) {
+            const eventType = 'selectSymbol';
+            this.AddEventListener(callback, eventType);
+            const detail = {
+                symbolId
+            }
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+        }
+
+        public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
+            const eventType = 'deleteSymbol';
+            this.AddEventListener(callback, eventType);
+            const detail = {
+                symbolId
+            }
+            this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
+        }
+
+        private AddEventListener(callback: ((...args: any[]) => void) | undefined, eventType: string) {
             const root = this.GetRootComponent();
             const listener = (e: CustomEvent) => {
                 e.target.removeEventListener(e.type, listener);
@@ -106,3 +175,4 @@
         template: { element: 'svg-layout-designer' }
     });
 }
+

src/Events/EditorEvents.ts

@@ -5,7 +5,7 @@ import { GetCurrentHistory } from '../Components/Editor/Editor';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
 import { FindContainerById } from '../utils/itertools';
-import { ReviveState } from '../utils/saveload';
+import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload';
 
 function GetEditorState(root: Element | Document,
   editorState: IEditorState): void {
@@ -13,6 +13,40 @@ function GetEditorState(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
+// TODO: In the near future, implement a real SetEditorState which also change IConfiguration
+function SetEditorState(root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const history: IHistoryState[] = eventInitDict?.detail;
+  ReviveHistoryAction(history);
+  setNewHistory(history);
+  const customEvent = new CustomEvent<IEditorState>('setEditorState', { detail: editorState });
+  root.dispatchEvent(customEvent);
+}
+
+function ReviveEditorState(
+  root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const anEditorState: IEditorState = eventInitDict?.detail;
+  Revive(anEditorState);
+  const customEvent = new CustomEvent<IEditorState>('reviveEditorState', { detail: anEditorState });
+  root.dispatchEvent(customEvent);
+}
+
+function ReviveHistory(
+  root: Element | Document,
+  editorState: IEditorState,
+  setNewHistory: (newHistory: IHistoryState[]) => void,
+  eventInitDict?: CustomEventInit): void {
+  const history: IHistoryState[] = eventInitDict?.detail;
+  ReviveHistoryAction(history);
+  const customEvent = new CustomEvent<IHistoryState[]>('reviveEditorState', { detail: history });
+  root.dispatchEvent(customEvent);
+}
+
 function GetCurrentHistoryState(root: Element | Document,
   editorState: IEditorState): void {
   const customEvent = new CustomEvent<IHistoryState>(
@@ -25,8 +59,7 @@ function AppendNewState(root: Element | Document,
   editorState: IEditorState,
   setNewHistory: (newHistory: IHistoryState[]) => void,
   eventInitDict?: CustomEventInit): void {
-  const state: IHistoryState = JSON.parse(eventInitDict?.detail.state);
+  const state: IHistoryState = eventInitDict?.detail.state;
-  ReviveState(state);
   const history = GetCurrentHistory(editorState.history, editorState.historyCurrentStep);
 
   history.push(state);
@@ -283,6 +316,9 @@ export interface IEditorEvent {
 
 export const events: IEditorEvent[] = [
   { name: 'getEditorState', func: GetEditorState },
+  { name: 'setEditorState', func: SetEditorState },
+  { name: 'reviveEditorState', func: ReviveEditorState },
+  { name: 'reviveHistory', func: ReviveHistory },
   { name: 'getCurrentHistoryState', func: GetCurrentHistoryState },
   { name: 'appendNewState', func: AppendNewState },
   { name: 'addContainer', func: AddContainer },

src/utils/saveload.ts

@@ -14,6 +14,10 @@ export function Revive(editorState: IEditorState): void {
   editorState.historyCurrentStep = history.length - 1;
 
   // restore the parents and the selected container
+  ReviveHistory(history);
+}
+
+export function ReviveHistory(history: IHistoryState[]): void {
   for (const state of history) {
     ReviveState(state);
   }