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

Merged PR 194: Added option to disable any API call

Browse source 
Added option to disable any API call
Fix http.js and node-http.js
Fix MainContainer not using IAvailableContainer from MainContainer
Fix generate_dts.py script
More docs
Fix MainContainer default style. Extend config will now be taken into account. But Main container can still have its own type.
This commit is contained in:
Eric Nguyen 2022-09-23 15:59:42 +00:00
parent 8ba19cc96b
commit 3ecff4cf01
10 changed files with 648 additions and 570 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,6 +7,7 @@
export class SVGLayoutDesigner extends Components.ComponentBase {
private _hooks: Record<string, (e: CustomEvent) => void>;
public App: AppController;
public Editor: EditorController;
@ -14,6 +15,7 @@
super(componentInfo, params);
this.App = new AppController(this, this.$component);
this.Editor = new EditorController(this, this.$component);
this._hooks = {};
}
/**
@ -32,7 +34,7 @@
* @param callback Callback function to call in the event listener
* @param eventType Event type for the listener to listen to
*/
public AddEventListener(callback: ((...args: any[]) => void) | undefined, eventType: string) {
public AddEventListener(eventType: string, callback: ((...args: any[]) => void) | undefined) {
const root = this.GetRootComponent();
const listener = (e: CustomEvent) => {
e.target.removeEventListener(e.type, listener);
@ -41,6 +43,40 @@
root.addEventListener(eventType, listener);
}
/// Hooks ///
private static EDITOR_LISTENER_TYPE = 'editorListener';
/**
* Add a hook to the editor state change.
* After every time an action is perform on the editor, the callback will be called
* @param callback Callback to add that listen to the event
*/
public AddEditorListenerHook(hookId: string, callback: (state: IEditorState) => void): void {
const root = this.GetRootComponent();
const customEvent = (e: CustomEvent) => {
callback(e.detail);
}
if (this._hooks[hookId] !== undefined) {
console.error(`HookId is already occupied. Please use a different HookId: ${hookId}`);
return;
}
this._hooks[hookId] = customEvent;
root.addEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, customEvent);
}
/**
* Remove a hook to the editor state change.
* @param callback Callback to remove that listen to the event
*/
public RemoveEditorListenerHook(hookId): void {
const root = this.GetRootComponent();
root.removeEventListener(SVGLayoutDesigner.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
delete this._hooks[hookId];
}
/// Macros ///
@ -99,7 +135,7 @@
*/
public SetEditor(newEditor: IEditorState, callback?: (state: IEditorState) => void) {
const eventType = 'setEditor';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: newEditor }))
}
@ -112,7 +148,7 @@
*/
public SetLoaded(isLoaded: boolean, callback?: (state: IEditorState) => void) {
const eventType = 'setLoaded';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetAppComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: isLoaded }))
}
@ -122,12 +158,10 @@
class EditorController {
app: SVGLayoutDesigner;
$component: JQuery;
private _hooks: Record<string, (e: CustomEvent) => void>;
constructor(app: SVGLayoutDesigner, $component: JQuery) {
this.app = app;
this.$component = $component;
this._hooks = {};
}
/**
@ -154,7 +188,7 @@
*/
public GetCurrentHistoryState(callback: (state: IHistoryState) => void) {
const eventType = 'getCurrentHistoryState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType));
}
@ -165,7 +199,7 @@
*/
public GetEditorState(callback: (state: IEditorState) => void) {
const eventType = 'getEditorState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType));
}
@ -177,7 +211,7 @@
*/
public SetHistory(history: IHistoryState[], callback?: (state: IEditorState) => void) {
const eventType = 'setHistory';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
}
@ -190,7 +224,7 @@
*/
public ReviveEditorState(editorState: IEditorState, callback: (state: IEditorState) => void) {
const eventType = 'reviveEditorState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: editorState }));
}
@ -203,7 +237,7 @@
*/
public ReviveHistory(history: IHistoryState[], callback: (state: IHistoryState[]) => void) {
const eventType = 'reviveHistory';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const component = this.GetEditorComponent();
component.dispatchEvent(new CustomEvent(eventType, { detail: history }));
}
@ -215,7 +249,7 @@
*/
public AppendNewHistoryState(historyState: IHistoryState, callback?: (state: IEditorState) => void) {
const eventType = 'appendNewState';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail: historyState }));
}
@ -228,7 +262,7 @@
*/
public AddContainer(index: number, type: string, parentId: string, callback?: (state: IEditorState) => void) {
const eventType = 'addContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
index,
type,
@ -245,7 +279,7 @@
*/
public AddContainerToSelectedContainer(index: number, type: string, callback?: (state: IEditorState) => void) {
const eventType = 'addContainerToSelectedContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
index,
type
@ -261,7 +295,7 @@
*/
public AppendContainer(type: string, parentId: string, callback?: (state: IEditorState) => void) {
const eventType = 'appendContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
type,
parentId
@ -277,7 +311,7 @@
*/
public AppendContainerToSelectedContainer(type: string, callback?: (state: IEditorState) => void) {
const eventType = 'appendContainerToSelectedContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
type
}
@ -291,7 +325,7 @@
*/
public SelectContainer(containerId: string, callback?: (state: IEditorState) => void) {
const eventType = 'selectContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
containerId
}
@ -305,7 +339,7 @@
*/
public DeleteContainer(containerId: string, callback?: (state: IEditorState) => void) {
const eventType = 'deleteContainer';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
containerId
}
@ -320,7 +354,7 @@
*/
public AddSymbol(name: string, callback?: (state: IEditorState) => void) {
const eventType = 'addSymbol';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
name
}
@ -334,7 +368,7 @@
*/
public SelectSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
const eventType = 'selectSymbol';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
symbolId
}
@ -348,49 +382,12 @@
*/
public DeleteSymbol(symbolId: string, callback?: (state: IEditorState) => void) {
const eventType = 'deleteSymbol';
this.app.AddEventListener(callback, eventType);
this.app.AddEventListener(eventType, callback);
const detail = {
symbolId
}
this.GetEditorComponent().dispatchEvent(new CustomEvent(eventType, { detail }));
}
/// Hooks ///
private static EDITOR_LISTENER_TYPE = 'editorListener';
/**
* Add a hook to the editor state change.
* After every time an action is perform on the editor, the callback will be called
* @param callback Callback to add that listen to the event
*/
public AddEditorListenerHook(hookId: string, callback: (state: IEditorState) => void): void {
const root = this.app.GetRootComponent();
const customEvent = (e: CustomEvent) => {
callback(e.detail);
}
if (this._hooks[hookId] !== undefined) {
console.error(`HookId is already occupied. Please use a different HookId: ${hookId}`);
return;
}
this._hooks[hookId] = customEvent;
root.addEventListener(EditorController.EDITOR_LISTENER_TYPE, customEvent);
}
/**
* Remove a hook to the editor state change.
* @param callback Callback to remove that listen to the event
*/
public RemoveEditorListenerHook(hookId): void {
const root = this.app.GetRootComponent();
root.removeEventListener(EditorController.EDITOR_LISTENER_TYPE, this._hooks[hookId]);
delete this._hooks[hookId];
}
}
ko.components.register('svg-layout-designer', {