Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implement save/load events

Browse source
This commit is contained in:
Eric NGUYEN 2022-09-23 11:01:31 +02:00
parent 614016462f
commit da3bd0a323
3 changed files with 127 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

98
public/smartcomponent/svg-layout-designer.ts
View file

@ -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' }
});
}

42
src/Events/EditorEvents.ts
View file

@ -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);
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 },

4
src/utils/saveload.ts
View file

@ -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);
}