From da3bd0a323d529d507b69635b57769051536ddac Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 23 Sep 2022 11:01:31 +0200 Subject: [PATCH] Implement save/load events --- public/smartcomponent/svg-layout-designer.ts | 98 +++++++++++++++++--- src/Events/EditorEvents.ts | 42 ++++++++- src/utils/saveload.ts | 4 + 3 files changed, 127 insertions(+), 17 deletions(-) diff --git a/public/smartcomponent/svg-layout-designer.ts b/public/smartcomponent/svg-layout-designer.ts index d6c166b..fd31b94 100644 --- a/public/smartcomponent/svg-layout-designer.ts +++ b/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' } }); } + diff --git a/src/Events/EditorEvents.ts b/src/Events/EditorEvents.ts index 2e5bc87..8c0fdc4 100644 --- a/src/Events/EditorEvents.ts +++ b/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('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('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('reviveEditorState', { detail: history }); + root.dispatchEvent(customEvent); +} + function GetCurrentHistoryState(root: Element | Document, editorState: IEditorState): void { const customEvent = new CustomEvent( @@ -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); - ReviveState(state); + const state: IHistoryState = eventInitDict?.detail.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 }, diff --git a/src/utils/saveload.ts b/src/utils/saveload.ts index 30fc85d..058b8cd 100644 --- a/src/utils/saveload.ts +++ b/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); }