diff --git a/public/smartcomponent/svg-layout-designer.ts b/public/smartcomponent/svg-layout-designer.ts index fd31b94..edc281b 100644 --- a/public/smartcomponent/svg-layout-designer.ts +++ b/public/smartcomponent/svg-layout-designer.ts @@ -1,6 +1,9 @@ namespace SmartBusiness.Web.Components { - import IHistoryState = SVGLD.IHistoryState; - import IEditorState = SVGLD.IEditorState; + /** + * Types macros + */ + type IHistoryState = SVGLD.IHistoryState; + type IEditorState = SVGLD.IEditorState; export class SVGLayoutDesigner extends Components.ComponentBase { @@ -8,6 +11,9 @@ super(componentInfo, params); } + /** + * Return the HTML component handling the editor + */ public GetEditorComponent() { const component = this.$component[0] .querySelector('iframe') @@ -21,6 +27,10 @@ return component; } + /** + * Return the root HTML component of the SmartComponent + * In the iframe, it would be the document. + */ public GetRootComponent() { return this.$component[0] .querySelector('iframe') @@ -30,6 +40,10 @@ /// Custom Events /// + /** + * Return in a callback the current state in the history of the editor + * @param callback + */ public GetCurrentHistoryState(callback: (state: IHistoryState) => void) { const eventType = 'getCurrentHistoryState'; this.AddEventListener(callback, eventType); @@ -37,6 +51,10 @@ component.dispatchEvent(new CustomEvent(eventType)); } + /** + * Return in a callback the current state of the editor + * @param callback + */ public GetEditorState(callback: (state: IEditorState) => void) { const eventType = 'getEditorState'; this.AddEventListener(callback, eventType); @@ -44,33 +62,62 @@ component.dispatchEvent(new CustomEvent(eventType)); } - public SetEditorState(history: SVGLD.IHistoryState[], callback?: (state: IEditorState) => void) { + /** + * Set the current history of the editor + * @param history Whole history of the editor + * @param callback (optional) + */ + public SetEditorState(history: .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) { + /** + * Revive the references in the editor state by mutation + * Useful after using JSON.stringify with a replacer + * @param editorState Editor state to revive + * @param callback Callback with the revived state + */ + public ReviveEditorState(editorState: .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) { + /** + * Revive the references in the history by mutation + * Useful after using JSON.stringify with a replacer + * @param history History to revive + * @param callback Callback with the revived state + */ + public ReviveHistory(history: .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) { + /** + * Add a new state to the editor + * @param historyState New history state to append + * @param callback + */ + public AppendNewHistoryState(historyState: .IHistoryState, callback?: (state: IEditorState) => void) { const eventType = 'appendNewState'; this.AddEventListener(callback, eventType); this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState })); } + /** + * Create a new container at the given index position in a given parent container + * @param index Position to insert the container + * @param type Container type to create + * @param parentId Parent container of the new container + * @param callback + */ public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) { const eventType = 'addContainer'; this.AddEventListener(callback, eventType); @@ -82,6 +129,12 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + /** + * Create a new container at the given index position in the current selected container + * @param index Position to insert the container + * @param type Container type to create + * @param callback + */ public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) { const eventType = 'addContainerToSelectedContainer'; this.AddEventListener(callback, eventType); @@ -92,6 +145,12 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + /** + * Append a new container in a given parent container + * @param type Container type to create + * @param parentId Parent container of the new container + * @param callback + */ public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) { const eventType = 'appendContainer'; this.AddEventListener(callback, eventType); @@ -102,6 +161,12 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + + /** + * Append a new container in the current selected container + * @param type Container type to create + * @param callback + */ public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) { const eventType = 'appendContainerToSelectedContainer'; this.AddEventListener(callback, eventType); @@ -111,6 +176,11 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + /** + * Select a container by id + * @param containerId Container's id to select + * @param callback + */ public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) { const eventType = 'selectContainer'; this.AddEventListener(callback, eventType); @@ -120,6 +190,11 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + /** + * Delete a container by id + * @param containerId Container's id to delete + * @param callback + */ public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) { const eventType = 'deleteContainer'; this.AddEventListener(callback, eventType); @@ -129,6 +204,12 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + + /** + * Create a new symbol + * @param name Name of the symbol present in the config + * @param callback + */ public AddSymbol(name: string, callback?: (state: IEditorState) => void) { const eventType = 'addSymbol'; this.AddEventListener(callback, eventType); @@ -138,7 +219,12 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } - public SelectSymbol(symbolId, callback?: (state: IEditorState) => void) { + /** + * Select a symbol by id + * @param symbolId Symbol's id to select + * @param callback + */ + public SelectSymbol(symbolId: string, callback?: (state: IEditorState) => void) { const eventType = 'selectSymbol'; this.AddEventListener(callback, eventType); const detail = { @@ -147,6 +233,11 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + /** + * Delete a symbol by id + * @param symbolId Symbol's id to delete + * @param callback + */ public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) { const eventType = 'deleteSymbol'; this.AddEventListener(callback, eventType); @@ -156,6 +247,12 @@ this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail })); } + /** + * Add the a new event listener that will be delete on call, + * optionnally call a callback + * @param callback Callback function to call in the event listener + * @param eventType Event type for the listener to listen to + */ private AddEventListener(callback: ((...args: any[]) => void) | undefined, eventType: string) { const root = this.GetRootComponent(); const listener = (e: CustomEvent) => {